1 files changed, 73 insertions, 14 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index 72e08e894..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
@@ -132,21 +133,63 @@ export const darkPalette: Palette = {
 
 export const dimPalette: Palette = {
   ...darkPalette,
-  black: tokens.color.gray_1000,
+  black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
 
-  contrast_25: tokens.color.gray_975,
-  contrast_50: tokens.color.gray_950,
-  contrast_100: tokens.color.gray_900,
-  contrast_200: tokens.color.gray_800,
-  contrast_300: tokens.color.gray_700,
-  contrast_400: tokens.color.gray_600,
-  contrast_500: tokens.color.gray_500,
-  contrast_600: tokens.color.gray_400,
-  contrast_700: tokens.color.gray_300,
-  contrast_800: tokens.color.gray_200,
-  contrast_900: tokens.color.gray_100,
-  contrast_950: tokens.color.gray_50,
-  contrast_975: tokens.color.gray_25,
+  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_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 = {
@@ -325,6 +368,7 @@ export const dark: Theme = {
 export const dim: Theme = {
   ...dark,
   name: 'dim',
+  palette: dimPalette,
   atoms: {
     ...dark.atoms,
     text: {
@@ -393,5 +437,20 @@ export const dim: Theme = {
     border_contrast_high: {
       borderColor: dimPalette.contrast_300,
     },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
+    },
   },
 }