1 files changed, 72 insertions, 36 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index da96f6eff..0c95a459e 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -1,6 +1,7 @@
 import * as tokens from '#/alf/tokens'
 import type {Mutable} from '#/alf/types'
 import {atoms} from '#/alf/atoms'
+import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 
 export type ThemeName = 'light' | 'dim' | 'dark'
 export type ReadonlyTheme = typeof light
@@ -73,19 +74,19 @@ export const darkPalette: Palette = {
   white: tokens.color.gray_0,
   black: tokens.color.trueBlack,
 
-  contrast_25: `hsl(211, 28%, 8%)`,
-  contrast_50: `hsl(211, 28%, 11%)`,
-  contrast_100: `hsl(211, 28%, 16%)`,
-  contrast_200: `hsl(211, 28%, 24%)`,
-  contrast_300: `hsl(211, 24%, 31%)`,
-  contrast_400: `hsl(211, 24%, 38%)`,
-  contrast_500: `hsl(211, 20%, 44%)`,
-  contrast_600: `hsl(211, 20%, 55%)`,
-  contrast_700: `hsl(211, 20%, 63%)`,
-  contrast_800: `hsl(211, 20%, 71%)`,
-  contrast_900: `hsl(211, 20%, 79%)`,
-  contrast_950: `hsl(211, 20%, 87%)`,
-  contrast_975: `hsl(211, 20%, 95%)`,
+  contrast_25: tokens.color.gray_1000,
+  contrast_50: tokens.color.gray_975,
+  contrast_100: tokens.color.gray_950,
+  contrast_200: tokens.color.gray_900,
+  contrast_300: tokens.color.gray_800,
+  contrast_400: tokens.color.gray_700,
+  contrast_500: tokens.color.gray_600,
+  contrast_600: tokens.color.gray_500,
+  contrast_700: tokens.color.gray_400,
+  contrast_800: tokens.color.gray_300,
+  contrast_900: tokens.color.gray_200,
+  contrast_950: tokens.color.gray_100,
+  contrast_975: tokens.color.gray_50,
 
   primary_25: tokens.color.blue_25,
   primary_50: tokens.color.blue_50,
@@ -132,28 +133,63 @@ export const darkPalette: Palette = {
 
 export const dimPalette: Palette = {
   ...darkPalette,
-  black: `hsl(211, 28%, 12%)`,
+  black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
 
-  contrast_25: `hsl(211, 28%, 15%)`,
-  contrast_50: `hsl(211, 28%, 18%)`,
-  contrast_100: `hsl(211, 28%, 24%)`,
-  contrast_200: `hsl(211, 28%, 27%)`,
-  contrast_300: `hsl(211, 24%, 34%)`,
-  contrast_400: `hsl(211, 24%, 41%)`,
-  contrast_500: `hsl(211, 20%, 52%)`,
-  contrast_600: `hsl(211, 20%, 55%)`,
-  contrast_700: `hsl(211, 20%, 67%)`,
-  contrast_800: `hsl(211, 20%, 71%)`,
-  contrast_900: `hsl(211, 20%, 79%)`,
-  contrast_950: `hsl(211, 20%, 87%)`,
-  contrast_975: `hsl(211, 20%, 95%)`,
+  contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`,
+  contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`,
+  contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`,
+  contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`,
+  contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`,
+  contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`,
+  contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`,
+  contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`,
+  contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`,
+  contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`,
+  contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`,
+  contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`,
+  contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`,
 
-  primary_600: `hsl(211, 95%, 39%)`,
-  primary_700: `hsl(211, 90%, 30%)`,
-  primary_800: `hsl(211, 90%, 23%)`,
-  primary_900: `hsl(211, 80%, 16%)`,
-  primary_950: `hsl(211, 80%, 13%)`,
-  primary_975: `hsl(211, 80%, 10%)`,
+  primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[13]}%)`,
+  primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[12]}%)`,
+  primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[11]}%)`,
+  primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[10]}%)`,
+  primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[9]}%)`,
+  primary_400: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[8]}%)`,
+  primary_500: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[7]}%)`,
+  primary_600: `hsl(${BLUE_HUE}, 95%, ${tokens.dimScale[6]}%)`,
+  primary_700: `hsl(${BLUE_HUE}, 90%, ${tokens.dimScale[5]}%)`,
+  primary_800: `hsl(${BLUE_HUE}, 82%, ${tokens.dimScale[4]}%)`,
+  primary_900: `hsl(${BLUE_HUE}, 70%, ${tokens.dimScale[3]}%)`,
+  primary_950: `hsl(${BLUE_HUE}, 60%, ${tokens.dimScale[2]}%)`,
+  primary_975: `hsl(${BLUE_HUE}, 50%, ${tokens.dimScale[1]}%)`,
+
+  positive_25: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[13]}%)`,
+  positive_50: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[12]}%)`,
+  positive_100: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[11]}%)`,
+  positive_200: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[10]}%)`,
+  positive_300: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[9]}%)`,
+  positive_400: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[8]}%)`,
+  positive_500: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[7]}%)`,
+  positive_600: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[6]}%)`,
+  positive_700: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[5]}%)`,
+  positive_800: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[4]}%)`,
+  positive_900: `hsl(${GREEN_HUE}, 70%, ${tokens.dimScale[3]}%)`,
+  positive_950: `hsl(${GREEN_HUE}, 60%, ${tokens.dimScale[2]}%)`,
+  positive_975: `hsl(${GREEN_HUE}, 50%, ${tokens.dimScale[1]}%)`,
+
+  negative_25: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[13]}%)`,
+  negative_50: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[12]}%)`,
+  negative_100: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[11]}%)`,
+  negative_200: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[10]}%)`,
+  negative_300: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[9]}%)`,
+  negative_400: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[8]}%)`,
+  negative_500: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[7]}%)`,
+  negative_600: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[6]}%)`,
+  negative_700: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[5]}%)`,
+  negative_800: `hsl(${RED_HUE}, 88%, ${tokens.dimScale[4]}%)`,
+  negative_900: `hsl(${RED_HUE}, 84%, ${tokens.dimScale[3]}%)`,
+  negative_950: `hsl(${RED_HUE}, 80%, ${tokens.dimScale[2]}%)`,
+  negative_975: `hsl(${RED_HUE}, 70%, ${tokens.dimScale[1]}%)`,
 } as const
 
 export const light = {
@@ -404,17 +440,17 @@ export const dim: Theme = {
     shadow_sm: {
       ...atoms.shadow_sm,
       shadowOpacity: 0.7,
-      shadowColor: `hsl(211, 28%, 3%)`,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
     },
     shadow_md: {
       ...atoms.shadow_md,
       shadowOpacity: 0.7,
-      shadowColor: `hsl(211, 28%, 3%)`,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
     },
     shadow_lg: {
       ...atoms.shadow_lg,
       shadowOpacity: 0.7,
-      shadowColor: `hsl(211, 28%, 3%)`,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
     },
   },
 }