refactor(theme): adjust gray color palette

sozonome · Sep 15, 2023 · 954a428 · 954a428 · vercel · Sep 15, 2023
1 parent 9b96047
commit 954a428
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts
@@ -13,19 +13,21 @@ export const colors: DeepPartial<Theme['colors']> = {
     500: '#9F9287',
     300: '#BFB7AF',
   },
-  // https://tailcolor.com/palettes/181f1e
+  // History:
+  // v2: https://tailcolor.com/palettes/181f1e
+  // v3: https://palette.saas-ui.dev/ gray #212121
   // colors converter:
   // - https://www.w3schools.com/colors/colors_hexadecimal.asp
   gray: {
-    50: '#e8e9e9',
-    100: '#d1d2d2',
-    200: '#a3a5a5',
-    300: '#747978',
-    400: '#464c4b',
-    500: '#181f1e',
-    600: '#131918',
-    700: '#0e1312',
-    800: '#0a0c0c',
-    900: '#050606',
+    '50': '#f9fafa',
+    '100': '#f0f1f3',
+    '200': '#e5e8eb',
+    '300': '#d0d4da',
+    '400': '#a5adb8',
+    '500': '#748091',
+    '600': '#45566c',
+    '700': '#2c3747',
+    '800': '#1a202a',
+    '900': '#141a21',
   },
 };
diff --git a/src/lib/styles/theme/semanticTokens/index.ts b/src/lib/styles/theme/semanticTokens/index.ts
@@ -18,8 +18,10 @@ export const semanticTokens: SemanticTokenType = {
       _dark: 'gray.800',
     },
     headerAlphaBackground: {
-      default: 'rgba(232, 233, 233, 0.8)',
-      _dark: 'rgba(10, 12, 12, 0.8)',
+      // gray.50 0.8
+      default: 'rgba(249, 250, 250, 0.8)',
+      // gray.800 0.8
+      _dark: 'rgba(26, 32, 42, 0.8)',
     },
     tabBarAlphaBackground: {
       default: 'rgba(209, 210, 210, 0.8)',
@@ -30,12 +32,12 @@ export const semanticTokens: SemanticTokenType = {
       _dark: 'gray.700',
     },
     cardBorder: {
-      default: 'gray.200',
-      _dark: 'gray.500',
+      default: 'gray.300',
+      _dark: 'gray.700',
     },
     cardHoverBorder: {
-      default: 'gray.500',
-      _dark: 'gray.400',
+      default: 'gray.600',
+      _dark: 'gray.600',
     },
     buttonBackground: {
       default: 'gray.100',

diff --git a/src/lib/styles/theme/styles.ts b/src/lib/styles/theme/styles.ts
@@ -27,8 +27,8 @@ export const styles: DeepPartial<Theme['styles']> = {
      */
     html: {
       scrollbarWidth: 'thin',
-      scrollbarColor: `${props.colorMode === 'light' ? '#A0AEC0' : '#2D3748'} ${
-        props.colorMode === 'light' ? '#CBD5E0' : 'black'
+      scrollbarColor: `${props.colorMode === 'light' ? '#e5e8eb' : '#2D3748'} ${
+        props.colorMode === 'light' ? '#a5adb8' : 'black'
       }`,
     },
   }),