themeOverride values replaced by hex colors

0xsequence · Nov 13, 2023 · 8c3f6a3 · 8c3f6a3
1 parent 9c2fd82
commit 8c3f6a3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 54 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -28,18 +28,6 @@ export const parameters = {
   },
 }
 
-const themeOverride = {
-  foreground: { r: 255, g: 15, b: 100 },
-  background: { r: 125, g: 200, b: 25 },
-  backgroundBackdrop: { r: 221, g: 221, b: 221 },
-  backgroundRaised: { r: 192, g: 192, b: 192 },
-  statusPositive: { r: 31, g: 194, b: 102 },
-  statusNegative: { r: 194, g: 80, b: 31 },
-  statusWarning: { r: 244, g: 176, b: 62 },
-  statusInfo: { r: 0, g: 118, b: 204 },
-  primaryButton: 'linear-gradient(89.69deg, #4411E1 0.27%, #7537F9 99.73%)'
-}
-
 export const globalTypes = {
   // Theme select toggle
   theme: {
@@ -74,14 +62,14 @@ const withTheme: Decorator = (StoryFn, context) => {
   const { theme, themeOverride } = context.globals
 
   const customTheme = {
-    foreground: { r: 255, g: 127, b: 80 },
-    background: { r: 85, g: 38, b: 201 },
-    backgroundBackdrop: { r: 221, g: 221, b: 221 },
-    backgroundRaised: { r: 192, g: 192, b: 192 },
-    statusPositive: { r: 31, g: 194, b: 102 },
-    statusNegative: { r: 194, g: 80, b: 31 },
-    statusWarning: { r: 244, g: 176, b: 62 },
-    statusInfo: { r: 0, g: 118, b: 204 },
+    foreground: '#FF7F50',
+    background: '#5526C9',
+    backgroundBackdrop: '#DDDDDD',
+    backgroundRaised: '#C0C0C0',
+    statusPositive: '#1FC266',
+    statusNegative: '#C2501F',
+    statusWarning: '#F4B03E',
+    statusInfo: '#0076CC',
     primaryButton: 'linear-gradient(89.69deg, #4411E1 0.27%, #7537F9 99.73%)'
   }
 

diff --git a/src/components/ThemeProvider/ThemeProvider.stories.tsx b/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -25,14 +25,14 @@ export const Default = () => {
 
 export const Nested = () => {
   const customTheme = {
-    foreground: { r: 255, g: 127, b: 80 },
-    background: { r: 85, g: 38, b: 201 },
-    backgroundBackdrop: { r: 221, g: 221, b: 221 },
-    backgroundRaised: { r: 192, g: 192, b: 192 },
-    statusPositive: { r: 31, g: 194, b: 102 },
-    statusNegative: { r: 194, g: 80, b: 31 },
-    statusWarning: { r: 244, g: 176, b: 62 },
-    statusInfo: { r: 0, g: 118, b: 204 },
+    foreground: '#FF7F50',
+    background: '#5526C9',
+    backgroundBackdrop: '#DDDDDD',
+    backgroundRaised: '#C0C0C0',
+    statusPositive: '#1FC266',
+    statusNegative: '#C2501F',
+    statusWarning: '#F4B03E',
+    statusInfo: '#0076CC',
     primaryButton: 'linear-gradient(89.69deg, #4411E1 0.27%, #7537F9 99.73%)'
   }
   return (

diff --git a/src/tokens/color.ts b/src/tokens/color.ts
@@ -15,42 +15,52 @@ export interface ColorBase {
 }
 
 export interface ThemePalette {
-  foreground: ColorBase
-  background: ColorBase
-  backgroundBackdrop: ColorBase,
-  backgroundRaised: ColorBase,
-  statusPositive: ColorBase
-  statusNegative: ColorBase
-  statusWarning: ColorBase
-  statusInfo: ColorBase
+  foreground: String
+  background: String
+  backgroundBackdrop: String
+  backgroundRaised: String
+  statusPositive: String
+  statusNegative: String
+  statusWarning: String
+  statusInfo: String
   primaryButton: string
 }
 
-export const makeRGBA = (color: ColorBase, alpha: number) => {
-  return `rgba(${color.r},${color.g},${color.b},${alpha})`
+const convertToRgb = (hex: String): ColorBase => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  return { r, g, b };
+}
+
+export const makeRGBA = (color: String, alpha: number) => {
+  const colorRgb = convertToRgb(color)
+
+  return `rgba(${colorRgb.r},${colorRgb.g},${colorRgb.b},${alpha})`
 }
 
 export const darkPalette: ThemePalette = {
-  foreground: { r: 255, g: 255, b: 255 },
-  background: { r: 0, g: 0, b: 0 },
-  backgroundBackdrop: { r: 34, g: 34, b: 34 },
-  backgroundRaised: { r: 54, g: 54, b: 54 },
-  statusPositive: { r: 31, g: 194, b: 102 },
-  statusNegative: { r: 194, g: 80, b: 31 },
-  statusWarning: { r: 244, g: 176, b: 62 },
-  statusInfo: { r: 0, g: 118, b: 204 },
+  foreground: '#FFFFFF',
+  background: '#000000',
+  backgroundBackdrop: '#222222',
+  backgroundRaised: '#363636',
+  statusPositive: '#1FC266',
+  statusNegative: '#C2501F',
+  statusWarning: '#F4B03E',
+  statusInfo: '#0076CC',
   primaryButton: 'linear-gradient(89.69deg, #4411E1 0.27%, #7537F9 99.73%)'
 }
 
 export const lightPalette: ThemePalette = {
-  foreground: { r: 0, g: 0, b: 0 },
-  background: { r: 255, g: 255, b: 255 },
-  backgroundBackdrop: { r: 221, g: 221, b: 221 },
-  backgroundRaised: { r: 192, g: 192, b: 192 },
-  statusPositive: { r: 31, g: 194, b: 102 },
-  statusNegative: { r: 194, g: 80, b: 31 },
-  statusWarning: { r: 244, g: 176, b: 62 },
-  statusInfo: { r: 0, g: 118, b: 204 },
+  foreground: '#000000',
+  background: '#FFFFFF',
+  backgroundBackdrop: '#DDDDDD',
+  backgroundRaised: '#C0C0C0',
+  statusPositive: '#1FC266',
+  statusNegative: '#C2501F',
+  statusWarning: '#F4B03E',
+  statusInfo: '#0076CC',
   primaryButton: 'linear-gradient(89.69deg, #4411E1 0.27%, #7537F9 99.73%)'
 }