Merge pull request #9 from alt-research/feat/theme-color-envs

feat: add theme color envs
alt-research · Mar 21, 2024 · c2edca0 · c2edca0
2 parents fc2f1be + fc67ea7
commit c2edca0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
@@ -31,8 +31,18 @@ const UI = Object.freeze({
     statisticBgDarkColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR'),
     statisticTextColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR'),
     statisticTextDarkColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_TEXT_DARK_COLOR'),
-    linkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_COLOR'),
-    linkDarkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_DARK_COLOR'),
+    linkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_COLOR') || 'blue.600',
+    linkDarkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_DARK_COLOR') || 'blue.300',
+    linkHoverColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_HOVER_COLOR') || 'blue.400',
+    linkHoverDarkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_HOVER_DARK_COLOR') || 'blue.200',
+    textColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_COLOR') || 'blackAlpha.800',
+    textDarkColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_DARK_COLOR') || 'whiteAlpha.800',
+    textSecondaryColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_SECONDARY_COLOR') || 'gray.500',
+    textSecondaryDarkColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_SECONDARY_DARK_COLOR') || 'gray.400',
+    errorColor: getEnvValue('NEXT_PUBLIC_THEME_ERROR_COLOR') || 'red.400',
+    errorDarkColor: getEnvValue('NEXT_PUBLIC_THEME_ERROR_DARK_COLOR') || 'red.300',
+    dividerColor: getEnvValue('NEXT_PUBLIC_THEME_DIVIDER_COLOR') || 'blackAlpha.200',
+    dividerDarkColor: getEnvValue('NEXT_PUBLIC_THEME_DIVIDER_DARK_COLOR') || 'whiteAlpha.200',
   },
   sidebar: {
     logo: {

diff --git a/docs/ENVS.md b/docs/ENVS.md
@@ -114,6 +114,17 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 | NEXT_PUBLIC_THEME_STATISTIC_TEXT_DARK_COLOR | - | - | - |  |  |
 | NEXT_PUBLIC_THEME_LINK_COLOR | - | - | - |  |  |
 | NEXT_PUBLIC_THEME_LINK_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_HOVER_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_HOVER_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_SECONDARY_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_SECONDARY_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_ERROR_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_ERROR_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_DIVIDER_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_DIVIDER_DARK_COLOR | - | - | - |  |  |
+
 &nbsp;
 
 ### Homepage

diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
@@ -3,27 +3,28 @@ import config from 'configs/app';
 const semanticTokens = {
   colors: {
     divider: {
-      'default': 'blackAlpha.200',
-      _dark: 'whiteAlpha.200',
+      'default': config.UI.theme.dividerColor,
+      _dark: config.UI.theme.dividerDarkColor,
     },
     text: {
-      'default': 'blackAlpha.800',
-      _dark: 'whiteAlpha.800',
+      'default': config.UI.theme.textColor,
+      _dark: config.UI.theme.textDarkColor,
     },
     text_secondary: {
-      'default': 'gray.500',
-      _dark: 'gray.400',
+      'default': config.UI.theme.textSecondaryColor,
+      _dark: config.UI.theme.textSecondaryDarkColor,
     },
     link: {
-      'default': config.UI.theme.linkColor || 'blue.600',
-      _dark: config.UI.theme.linkDarkColor || 'blue.300',
+      'default': config.UI.theme.linkColor,
+      _dark: config.UI.theme.linkDarkColor,
     },
     link_hovered: {
-      'default': 'blue.400',
+      'default': config.UI.theme.linkHoverColor,
+      _dark: config.UI.theme.linkHoverDarkColor,
     },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': config.UI.theme.errorColor,
+      _dark: config.UI.theme.errorDarkColor,
     },
   },
   shadows: {