Expose colors

ooni · Jul 3, 2024 · 965ae2c · 965ae2c
1 parent 7762141
commit 965ae2c
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 322 deletions.
diff --git 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
@@ -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',
+  },
+}