refactor: use named values for colors

maybeanerd · Sep 11, 2023 · 7d37bd8 · 7d37bd8
1 parent f009949
commit 7d37bd8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body {
-  @apply dark:bg-gray-900 dark:text-gray-200 bg-gray-200 text-gray-900;
+  @apply bg-background-light text-content-light dark:bg-background-dark dark:text-content-dark;
 }
diff --git a/components/inlineLink.vue b/components/inlineLink.vue
@@ -1,5 +1,8 @@
 <template>
-  <CustomRouterLink :to="props.to" class="text-green-300 hover:text-green-400">
+  <CustomRouterLink
+    :to="props.to"
+    class="text-primary-base-light hover:text-primary-highlight-light dark:text-primary-base-dark dark:hover:text-primary-highlight-dark"
+  >
     <slot />
   </CustomRouterLink>
 </template>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -28,16 +28,16 @@ const themeConfig: ThemeConfig = {
   },
   light: {
     common: {
-      primaryColor: theme.colors.blue[600],
-      primaryColorHover: theme.colors.blue[500],
-      primaryColorPressed: theme.colors.blue[700],
+      primaryColor: theme.colors.green[500],
+      primaryColorHover: theme.colors.green[400],
+      primaryColorPressed: theme.colors.green[500],
     },
   },
   dark: {
     common: {
-      primaryColor: theme.colors.blue[500],
-      primaryColorHover: theme.colors.blue[400],
-      primaryColorPressed: theme.colors.blue[600],
+      primaryColor: theme.colors.green[300],
+      primaryColorHover: theme.colors.green[400],
+      primaryColorPressed: theme.colors.green[500],
     },
   },
 };

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,8 +1,23 @@
 import type { Config } from 'tailwindcss';
 
+import colors from 'tailwindcss/colors';
+
 export default <Partial<Config>>{
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          base: {
+            light: colors.green[500],
+            dark: colors.green[300],
+          },
+          highlight: { light: colors.green[400], dark: colors.green[400] },
+          action: { light: colors.green[500], dark: colors.green[500] },
+        },
+        background: { light: colors.gray[200], dark: colors.gray[900] },
+        content: { light: colors.gray[900], dark: colors.gray[200] },
+      },
+    },
   },
   darkMode: 'class',
 };