From 965ae2c17d62be352ab8736ffe7a4b2bdb888dfd Mon Sep 17 00:00:00 2001 From: majakomel Date: Wed, 3 Jul 2024 17:48:56 -0400 Subject: [PATCH] Expose colors --- src/index.ts | 2 +- src/theme/colors.ts | 315 ++++++++++++++++++++++---------------------- src/theme/index.ts | 169 +----------------------- 3 files changed, 164 insertions(+), 322 deletions(-) diff --git a/src/index.ts b/src/index.ts index 22e76f0a..7c4ffe33 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,5 +13,5 @@ export { default as Select } from './components/Select' export { default as Textarea } from './components/Textarea' export { default as TwitterShareButton } from './components/TwitterShareButton' export { default as theme } from './theme' -// export { default as colors } from './theme/colors' +export { default as colors } from './theme/colors' diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 4e1be9e0..570b2dca 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -1,159 +1,158 @@ -const colors = { - BLACK: '#000000', - WHITE: '#ffffff', - LIGHT_BLUE: '#8DD5F8', - OONI_BLUE: '#0588CB', - DARK_BLUE: '#005B9A', - SUNFLOWER: '#F39C12', - ALIZARIN: '#E74C3C', - BLUE_GREY: '#37474F', - BLUE_GREY_LIGHT: '#62727B', - BLUE_GREY_DARK: '#102027', - - // The following palette is almost the same as Open Color - // (https://yeun.github.io/open-color/), with the exception of blue[0-9] which - // are hand picked - palette: { - primary: '#0588cb', - background: '#f8f9fa', - highlight: '#0588cb20', // Added to fix @rebass/forms/Radio in focus mode - base: '#0588cb', - black: '#212529', - white: '#f8f9fa', - twitterBlue: '#1da1f2', - facebookBlue: '#3b5998', - - gray0: '#f8f9fa', - gray1: '#f1f3f5', - gray2: '#e9ecef', - gray3: '#dee2e6', - gray4: '#ced4da', - gray5: '#adb5bd', - gray6: '#868e96', - gray7: '#495057', - gray8: '#343a40', - gray9: '#212529', - blue0: '#e7f5ff', - blue1: '#c9e8ff', - blue2: '#8dd5f8', - blue3: '#5db8fe', - blue4: '#37a6ed', - blue5: '#0588cb', - blue6: '#0f77b8', - blue7: '#056aa6', - blue8: '#005f9c', - blue9: '#005a99', - indigo0: '#edf2ff', - indigo1: '#dbe4ff', - indigo2: '#bac8ff', - indigo3: '#91a7ff', - indigo4: '#748ffc', - indigo5: '#5c7cfa', - indigo6: '#4c6ef5', - indigo7: '#4263eb', - indigo8: '#3b5bdb', - indigo9: '#364fc7', - violet0: '#f3f0ff', - violet1: '#e5dbff', - violet2: '#d0bfff', - violet3: '#b197fc', - violet4: '#9775fa', - violet5: '#845ef7', - violet6: '#7950f2', - violet7: '#7048e8', - violet8: '#6741d9', - violet9: '#5f3dc4', - fuchsia0: '#f8f0fc', - fuchsia1: '#f3d9fa', - fuchsia2: '#eebefa', - fuchsia3: '#e599f7', - fuchsia4: '#da77f2', - fuchsia5: '#cc5de8', - fuchsia6: '#be4bdb', - fuchsia7: '#ae3ec9', - fuchsia8: '#9c36b5', - fuchsia9: '#862e9c', - pink0: '#fff0f6', - pink1: '#ffdeeb', - pink2: '#fcc2d7', - pink3: '#faa2c1', - pink4: '#f783ac', - pink5: '#f06595', - pink6: '#e64980', - pink7: '#d6336c', - pink8: '#c2255c', - pink9: '#a61e4d', - red0: '#fff5f5', - red1: '#ffe3e3', - red2: '#ffc9c9', - red3: '#ffa8a8', - red4: '#ff8787', - red5: '#ff6b6b', - red6: '#fa5252', - red7: '#f03e3e', - red8: '#e03131', - red9: '#c92a2a', - orange0: '#fff4e6', - orange1: '#ffe8cc', - orange2: '#ffd8a8', - orange3: '#ffc078', - orange4: '#ffa94d', - orange5: '#ff922b', - orange6: '#fd7e14', - orange7: '#f76707', - orange8: '#e8590c', - orange9: '#d9480f', - yellow0: '#fff9db', - yellow1: '#fff3bf', - yellow2: '#ffec99', - yellow3: '#ffe066', - yellow4: '#ffd43b', - yellow5: '#fcc419', - yellow6: '#fab005', - yellow7: '#f59f00', - yellow8: '#f08c00', - yellow9: '#e67700', - lime0: '#f4fce3', - lime1: '#e9fac8', - lime2: '#d8f5a2', - lime3: '#c0eb75', - lime4: '#a9e34b', - lime5: '#94d82d', - lime6: '#82c91e', - lime7: '#74b816', - lime8: '#66a80f', - lime9: '#5c940d', - green0: '#ebfbee', - green1: '#d3f9d8', - green2: '#b2f2bb', - green3: '#8ce99a', - green4: '#69db7c', - green5: '#51cf66', - green6: '#40c057', - green7: '#37b24d', - green8: '#2f9e44', - green9: '#2b8a3e', - teal0: '#e6fcf5', - teal1: '#c3fae8', - teal2: '#96f2d7', - teal3: '#63e6be', - teal4: '#38d9a9', - teal5: '#20c997', - teal6: '#12b886', - teal7: '#0ca678', - teal8: '#099268', - teal9: '#087f5b', - cyan0: '#e3fafc', - cyan1: '#c5f6fa', - cyan2: '#99e9f2', - cyan3: '#66d9e8', - cyan4: '#3bc9db', - cyan5: '#22b8cf', - cyan6: '#15aabf', - cyan7: '#1098ad', - cyan8: '#0c8599', - cyan9: '#0b7285', +export default { + blue: { + 50: '#e7f5ff', + 100: '#c9e8ff', + 200: '#8dd5f8', + 300: '#5db8fe', + 400: '#37a6ed', + 500: '#0588cb', + 600: '#0f77b8', + 700: '#056aa6', + 800: '#005f9c', + 900: '#005a99', }, -} - -export default colors + gray: { + 50: '#f8f9fa', + 100: '#f1f3f5', + 200: '#e9ecef', + 300: '#dee2e6', + 400: '#ced4da', + 500: '#adb5bd', + 600: '#868e96', + 700: '#495057', + 800: '#343a40', + 900: '#212529', + }, + indigo: { + 50: '#edf2ff', + 100: '#dbe4ff', + 200: '#bac8ff', + 300: '#91a7ff', + 400: '#748ffc', + 500: '#5c7cfa', + 600: '#4c6ef5', + 700: '#4263eb', + 800: '#3b5bdb', + 900: '#364fc7', + }, + violet: { + 50: '#f3f0ff', + 100: '#e5dbff', + 200: '#d0bfff', + 300: '#b197fc', + 400: '#9775fa', + 500: '#845ef7', + 600: '#7950f2', + 700: '#7048e8', + 800: '#6741d9', + 900: '#5f3dc4', + }, + fuchsia: { + 50: '#f8f0fc', + 100: '#f3d9fa', + 200: '#eebefa', + 300: '#e599f7', + 400: '#da77f2', + 500: '#cc5de8', + 600: '#be4bdb', + 700: '#ae3ec9', + 800: '#9c36b5', + 900: '#862e9c', + }, + pink: { + 50: '#fff0f6', + 100: '#ffdeeb', + 200: '#fcc2d7', + 300: '#faa2c1', + 400: '#f783ac', + 500: '#f06595', + 600: '#e64980', + 700: '#d6336c', + 800: '#c2255c', + 900: '#a61e4d', + }, + red: { + 50: '#fff5f5', + 100: '#ffe3e3', + 200: '#ffc9c9', + 300: '#ffa8a8', + 400: '#ff8787', + 500: '#ff6b6b', + 600: '#fa5252', + 700: '#f03e3e', + 800: '#e03131', + 900: '#c92a2a', + }, + orange: { + 50: '#fff4e6', + 100: '#ffe8cc', + 200: '#ffd8a8', + 300: '#ffc078', + 400: '#ffa94d', + 500: '#ff922b', + 600: '#fd7e14', + 700: '#f76707', + 800: '#e8590c', + 900: '#d9480f', + }, + yellow: { + 50: '#fff9db', + 100: '#fff3bf', + 200: '#ffec99', + 300: '#ffe066', + 400: '#ffd43b', + 500: '#fcc419', + 600: '#fab005', + 700: '#f59f00', + 800: '#f08c00', + 900: '#e67700', + }, + lime: { + 50: '#f4fce3', + 100: '#e9fac8', + 200: '#d8f5a2', + 300: '#c0eb75', + 400: '#a9e34b', + 500: '#94d82d', + 600: '#82c91e', + 700: '#74b816', + 800: '#66a80f', + 900: '#5c940d', + }, + green: { + 50: '#ebfbee', + 100: '#d3f9d8', + 200: '#b2f2bb', + 300: '#8ce99a', + 400: '#69db7c', + 500: '#51cf66', + 600: '#40c057', + 700: '#37b24d', + 800: '#2f9e44', + 900: '#2b8a3e', + }, + teal: { + 50: '#e6fcf5', + 100: '#c3fae8', + 200: '#96f2d7', + 300: '#63e6be', + 400: '#38d9a9', + 500: '#20c997', + 600: '#12b886', + 700: '#0ca678', + 800: '#099268', + 900: '#087f5b', + }, + cyan: { + 50: '#e3fafc', + 100: '#c5f6fa', + 200: '#99e9f2', + 300: '#66d9e8', + 400: '#3bc9db', + 500: '#22b8cf', + 600: '#15aabf', + 700: '#1098ad', + 800: '#0c8599', + 900: '#0b7285', + }, +} \ No newline at end of file diff --git a/src/theme/index.ts b/src/theme/index.ts index 7bba1bbf..4e205b0a 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,164 +1,7 @@ +import colors from "./colors" + export default { - theme: { - extend: { - colors: { - blue: { - 50: '#e7f5ff', - 100: '#c9e8ff', - 200: '#8dd5f8', - 300: '#5db8fe', - 400: '#37a6ed', - 500: '#0588cb', - 600: '#0f77b8', - 700: '#056aa6', - 800: '#005f9c', - 900: '#005a99', - }, - gray: { - 50: '#f8f9fa', - 100: '#f1f3f5', - 200: '#e9ecef', - 300: '#dee2e6', - 400: '#ced4da', - 500: '#adb5bd', - 600: '#868e96', - 700: '#495057', - 800: '#343a40', - 900: '#212529', - }, - indigo: { - 50: '#edf2ff', - 100: '#dbe4ff', - 200: '#bac8ff', - 300: '#91a7ff', - 400: '#748ffc', - 500: '#5c7cfa', - 600: '#4c6ef5', - 700: '#4263eb', - 800: '#3b5bdb', - 900: '#364fc7', - }, - violet: { - 50: '#f3f0ff', - 100: '#e5dbff', - 200: '#d0bfff', - 300: '#b197fc', - 400: '#9775fa', - 500: '#845ef7', - 600: '#7950f2', - 700: '#7048e8', - 800: '#6741d9', - 900: '#5f3dc4', - }, - fuchsia: { - 50: '#f8f0fc', - 100: '#f3d9fa', - 200: '#eebefa', - 300: '#e599f7', - 400: '#da77f2', - 500: '#cc5de8', - 600: '#be4bdb', - 700: '#ae3ec9', - 800: '#9c36b5', - 900: '#862e9c', - }, - pink: { - 50: '#fff0f6', - 100: '#ffdeeb', - 200: '#fcc2d7', - 300: '#faa2c1', - 400: '#f783ac', - 500: '#f06595', - 600: '#e64980', - 700: '#d6336c', - 800: '#c2255c', - 900: '#a61e4d', - }, - red: { - 50: '#fff5f5', - 100: '#ffe3e3', - 200: '#ffc9c9', - 300: '#ffa8a8', - 400: '#ff8787', - 500: '#ff6b6b', - 600: '#fa5252', - 700: '#f03e3e', - 800: '#e03131', - 900: '#c92a2a', - }, - orange: { - 50: '#fff4e6', - 100: '#ffe8cc', - 200: '#ffd8a8', - 300: '#ffc078', - 400: '#ffa94d', - 500: '#ff922b', - 600: '#fd7e14', - 700: '#f76707', - 800: '#e8590c', - 900: '#d9480f', - }, - yellow: { - 50: '#fff9db', - 100: '#fff3bf', - 200: '#ffec99', - 300: '#ffe066', - 400: '#ffd43b', - 500: '#fcc419', - 600: '#fab005', - 700: '#f59f00', - 800: '#f08c00', - 900: '#e67700', - }, - lime: { - 50: '#f4fce3', - 100: '#e9fac8', - 200: '#d8f5a2', - 300: '#c0eb75', - 400: '#a9e34b', - 500: '#94d82d', - 600: '#82c91e', - 700: '#74b816', - 800: '#66a80f', - 900: '#5c940d', - }, - green: { - 50: '#ebfbee', - 100: '#d3f9d8', - 200: '#b2f2bb', - 300: '#8ce99a', - 400: '#69db7c', - 500: '#51cf66', - 600: '#40c057', - 700: '#37b24d', - 800: '#2f9e44', - 900: '#2b8a3e', - }, - teal: { - 50: '#e6fcf5', - 100: '#c3fae8', - 200: '#96f2d7', - 300: '#63e6be', - 400: '#38d9a9', - 500: '#20c997', - 600: '#12b886', - 700: '#0ca678', - 800: '#099268', - 900: '#087f5b', - }, - cyan: { - 50: '#e3fafc', - 100: '#c5f6fa', - 200: '#99e9f2', - 300: '#66d9e8', - 400: '#3bc9db', - 500: '#22b8cf', - 600: '#15aabf', - 700: '#1098ad', - 800: '#0c8599', - 900: '#0b7285', - }, - }, - }, - } -} \ No newline at end of file + extend: { + colors + }, +}