[ALF] Theme & palette cleanup (#4769)

* Invert primary scale

* Invert negative palette

* Replace theme specific styles in Toggle

* Remove theme specific colors from Button, improves secondary solid on dark mode

* TextField

* Remove from MessageItem

* Threadgate editor

* IconCircle

* Muted words

* Generate themes from hues

* Cleanup

* Deprecate more values, fix circular import

* Invert positive too, hardly use

* Button tweaks, some theme diffs

* Match disabled state for negative button

* Fix unread noty bg

1 files changed, 557 insertions, 435 deletions

diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index acfd269f8..b430fa65e 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -1,456 +1,578 @@
 import {atoms} from '#/alf/atoms'
-import * as tokens from '#/alf/tokens'
-import type {Mutable} from '#/alf/types'
-import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
+import {Palette, Theme} from '#/alf/types'
+import {
+  BLUE_HUE,
+  defaultScale,
+  dimScale,
+  GREEN_HUE,
+  RED_HUE,
+} from '#/alf/util/colorGeneration'
 
-export type ThemeName = 'light' | 'dim' | 'dark'
-export type ReadonlyTheme = typeof light
-export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
-export type ReadonlyPalette = typeof lightPalette
-export type Palette = Mutable<ReadonlyPalette>
+const themes = createThemes({
+  hues: {
+    primary: BLUE_HUE,
+    negative: RED_HUE,
+    positive: GREEN_HUE,
+  },
+})
 
-export const lightPalette = {
-  white: tokens.color.gray_0,
-  black: tokens.color.gray_1000,
+/**
+ * @deprecated use ALF and access palette from `useTheme()`
+ */
+export const lightPalette = themes.lightPalette
+/**
+ * @deprecated use ALF and access palette from `useTheme()`
+ */
+export const darkPalette = themes.darkPalette
+/**
+ * @deprecated use ALF and access palette from `useTheme()`
+ */
+export const dimPalette = themes.dimPalette
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
+export const light = themes.light
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
+export const dark = themes.dark
+/**
+ * @deprecated use ALF and access theme from `useTheme()`
+ */
+export const dim = themes.dim
 
-  contrast_25: tokens.color.gray_25,
-  contrast_50: tokens.color.gray_50,
-  contrast_100: tokens.color.gray_100,
-  contrast_200: tokens.color.gray_200,
-  contrast_300: tokens.color.gray_300,
-  contrast_400: tokens.color.gray_400,
-  contrast_500: tokens.color.gray_500,
-  contrast_600: tokens.color.gray_600,
-  contrast_700: tokens.color.gray_700,
-  contrast_800: tokens.color.gray_800,
-  contrast_900: tokens.color.gray_900,
-  contrast_950: tokens.color.gray_950,
-  contrast_975: tokens.color.gray_975,
+export const defaultTheme = themes.light
 
-  primary_25: tokens.color.blue_25,
-  primary_50: tokens.color.blue_50,
-  primary_100: tokens.color.blue_100,
-  primary_200: tokens.color.blue_200,
-  primary_300: tokens.color.blue_300,
-  primary_400: tokens.color.blue_400,
-  primary_500: tokens.color.blue_500,
-  primary_600: tokens.color.blue_600,
-  primary_700: tokens.color.blue_700,
-  primary_800: tokens.color.blue_800,
-  primary_900: tokens.color.blue_900,
-  primary_950: tokens.color.blue_950,
-  primary_975: tokens.color.blue_975,
+export function createThemes({
+  hues,
+}: {
+  hues: {
+    primary: number
+    negative: number
+    positive: number
+  }
+}): {
+  lightPalette: Palette
+  darkPalette: Palette
+  dimPalette: Palette
+  light: Theme
+  dark: Theme
+  dim: Theme
+} {
+  const color = {
+    trueBlack: '#000000',
 
-  positive_25: tokens.color.green_25,
-  positive_50: tokens.color.green_50,
-  positive_100: tokens.color.green_100,
-  positive_200: tokens.color.green_200,
-  positive_300: tokens.color.green_300,
-  positive_400: tokens.color.green_400,
-  positive_500: tokens.color.green_500,
-  positive_600: tokens.color.green_600,
-  positive_700: tokens.color.green_700,
-  positive_800: tokens.color.green_800,
-  positive_900: tokens.color.green_900,
-  positive_950: tokens.color.green_950,
-  positive_975: tokens.color.green_975,
+    gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`,
+    gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`,
+    gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`,
+    gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`,
+    gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`,
+    gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`,
+    gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`,
+    gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`,
+    gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`,
+    gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`,
+    gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`,
+    gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`,
+    gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`,
+    gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`,
+    gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`,
 
-  negative_25: tokens.color.red_25,
-  negative_50: tokens.color.red_50,
-  negative_100: tokens.color.red_100,
-  negative_200: tokens.color.red_200,
-  negative_300: tokens.color.red_300,
-  negative_400: tokens.color.red_400,
-  negative_500: tokens.color.red_500,
-  negative_600: tokens.color.red_600,
-  negative_700: tokens.color.red_700,
-  negative_800: tokens.color.red_800,
-  negative_900: tokens.color.red_900,
-  negative_950: tokens.color.red_950,
-  negative_975: tokens.color.red_975,
-} as const
+    primary_25: `hsl(${hues.primary}, 99%, 97%)`,
+    primary_50: `hsl(${hues.primary}, 99%, 95%)`,
+    primary_100: `hsl(${hues.primary}, 99%, 90%)`,
+    primary_200: `hsl(${hues.primary}, 99%, 80%)`,
+    primary_300: `hsl(${hues.primary}, 99%, 70%)`,
+    primary_400: `hsl(${hues.primary}, 99%, 60%)`,
+    primary_500: `hsl(${hues.primary}, 99%, 53%)`,
+    primary_600: `hsl(${hues.primary}, 99%, 42%)`,
+    primary_700: `hsl(${hues.primary}, 99%, 34%)`,
+    primary_800: `hsl(${hues.primary}, 99%, 26%)`,
+    primary_900: `hsl(${hues.primary}, 99%, 18%)`,
+    primary_950: `hsl(${hues.primary}, 99%, 10%)`,
+    primary_975: `hsl(${hues.primary}, 99%, 7%)`,
 
-export const darkPalette: Palette = {
-  white: tokens.color.gray_0,
-  black: tokens.color.trueBlack,
+    green_25: `hsl(${hues.positive}, 82%, 97%)`,
+    green_50: `hsl(${hues.positive}, 82%, 95%)`,
+    green_100: `hsl(${hues.positive}, 82%, 90%)`,
+    green_200: `hsl(${hues.positive}, 82%, 80%)`,
+    green_300: `hsl(${hues.positive}, 82%, 70%)`,
+    green_400: `hsl(${hues.positive}, 82%, 60%)`,
+    green_500: `hsl(${hues.positive}, 82%, 50%)`,
+    green_600: `hsl(${hues.positive}, 82%, 42%)`,
+    green_700: `hsl(${hues.positive}, 82%, 34%)`,
+    green_800: `hsl(${hues.positive}, 82%, 26%)`,
+    green_900: `hsl(${hues.positive}, 82%, 18%)`,
+    green_950: `hsl(${hues.positive}, 82%, 10%)`,
+    green_975: `hsl(${hues.positive}, 82%, 7%)`,
 
-  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,
+    red_25: `hsl(${hues.negative}, 91%, 97%)`,
+    red_50: `hsl(${hues.negative}, 91%, 95%)`,
+    red_100: `hsl(${hues.negative}, 91%, 90%)`,
+    red_200: `hsl(${hues.negative}, 91%, 80%)`,
+    red_300: `hsl(${hues.negative}, 91%, 70%)`,
+    red_400: `hsl(${hues.negative}, 91%, 60%)`,
+    red_500: `hsl(${hues.negative}, 91%, 50%)`,
+    red_600: `hsl(${hues.negative}, 91%, 42%)`,
+    red_700: `hsl(${hues.negative}, 91%, 34%)`,
+    red_800: `hsl(${hues.negative}, 91%, 26%)`,
+    red_900: `hsl(${hues.negative}, 91%, 18%)`,
+    red_950: `hsl(${hues.negative}, 91%, 10%)`,
+    red_975: `hsl(${hues.negative}, 91%, 7%)`,
+  } as const
 
-  primary_25: tokens.color.blue_25,
-  primary_50: tokens.color.blue_50,
-  primary_100: tokens.color.blue_100,
-  primary_200: tokens.color.blue_200,
-  primary_300: tokens.color.blue_300,
-  primary_400: tokens.color.blue_400,
-  primary_500: tokens.color.blue_500,
-  primary_600: tokens.color.blue_600,
-  primary_700: tokens.color.blue_700,
-  primary_800: tokens.color.blue_800,
-  primary_900: tokens.color.blue_900,
-  primary_950: tokens.color.blue_950,
-  primary_975: tokens.color.blue_975,
+  const lightPalette = {
+    white: color.gray_0,
+    black: color.gray_1000,
 
-  positive_25: tokens.color.green_25,
-  positive_50: tokens.color.green_50,
-  positive_100: tokens.color.green_100,
-  positive_200: tokens.color.green_200,
-  positive_300: tokens.color.green_300,
-  positive_400: tokens.color.green_400,
-  positive_500: tokens.color.green_500,
-  positive_600: tokens.color.green_600,
-  positive_700: tokens.color.green_700,
-  positive_800: tokens.color.green_800,
-  positive_900: tokens.color.green_900,
-  positive_950: tokens.color.green_950,
-  positive_975: tokens.color.green_975,
+    contrast_25: color.gray_25,
+    contrast_50: color.gray_50,
+    contrast_100: color.gray_100,
+    contrast_200: color.gray_200,
+    contrast_300: color.gray_300,
+    contrast_400: color.gray_400,
+    contrast_500: color.gray_500,
+    contrast_600: color.gray_600,
+    contrast_700: color.gray_700,
+    contrast_800: color.gray_800,
+    contrast_900: color.gray_900,
+    contrast_950: color.gray_950,
+    contrast_975: color.gray_975,
 
-  negative_25: tokens.color.red_25,
-  negative_50: tokens.color.red_50,
-  negative_100: tokens.color.red_100,
-  negative_200: tokens.color.red_200,
-  negative_300: tokens.color.red_300,
-  negative_400: tokens.color.red_400,
-  negative_500: tokens.color.red_500,
-  negative_600: tokens.color.red_600,
-  negative_700: tokens.color.red_700,
-  negative_800: tokens.color.red_800,
-  negative_900: tokens.color.red_900,
-  negative_950: tokens.color.red_950,
-  negative_975: tokens.color.red_975,
-} as const
+    primary_25: color.primary_25,
+    primary_50: color.primary_50,
+    primary_100: color.primary_100,
+    primary_200: color.primary_200,
+    primary_300: color.primary_300,
+    primary_400: color.primary_400,
+    primary_500: color.primary_500,
+    primary_600: color.primary_600,
+    primary_700: color.primary_700,
+    primary_800: color.primary_800,
+    primary_900: color.primary_900,
+    primary_950: color.primary_950,
+    primary_975: color.primary_975,
 
-export const dimPalette: Palette = {
-  ...darkPalette,
-  black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
+    positive_25: color.green_25,
+    positive_50: color.green_50,
+    positive_100: color.green_100,
+    positive_200: color.green_200,
+    positive_300: color.green_300,
+    positive_400: color.green_400,
+    positive_500: color.green_500,
+    positive_600: color.green_600,
+    positive_700: color.green_700,
+    positive_800: color.green_800,
+    positive_900: color.green_900,
+    positive_950: color.green_950,
+    positive_975: color.green_975,
 
-  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]}%)`,
+    negative_25: color.red_25,
+    negative_50: color.red_50,
+    negative_100: color.red_100,
+    negative_200: color.red_200,
+    negative_300: color.red_300,
+    negative_400: color.red_400,
+    negative_500: color.red_500,
+    negative_600: color.red_600,
+    negative_700: color.red_700,
+    negative_800: color.red_800,
+    negative_900: color.red_900,
+    negative_950: color.red_950,
+    negative_975: color.red_975,
+  } as const
 
-  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]}%)`,
+  const darkPalette: Palette = {
+    white: color.gray_0,
+    black: color.trueBlack,
 
-  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]}%)`,
+    contrast_25: color.gray_1000,
+    contrast_50: color.gray_975,
+    contrast_100: color.gray_950,
+    contrast_200: color.gray_900,
+    contrast_300: color.gray_800,
+    contrast_400: color.gray_700,
+    contrast_500: color.gray_600,
+    contrast_600: color.gray_500,
+    contrast_700: color.gray_400,
+    contrast_800: color.gray_300,
+    contrast_900: color.gray_200,
+    contrast_950: color.gray_100,
+    contrast_975: color.gray_50,
 
-  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
+    primary_25: color.primary_975,
+    primary_50: color.primary_950,
+    primary_100: color.primary_900,
+    primary_200: color.primary_800,
+    primary_300: color.primary_700,
+    primary_400: color.primary_600,
+    primary_500: color.primary_500,
+    primary_600: color.primary_400,
+    primary_700: color.primary_300,
+    primary_800: color.primary_200,
+    primary_900: color.primary_100,
+    primary_950: color.primary_50,
+    primary_975: color.primary_25,
 
-export const light = {
-  name: 'light' as ThemeName,
-  palette: lightPalette,
-  atoms: {
-    text: {
-      color: lightPalette.black,
-    },
-    text_contrast_low: {
-      color: lightPalette.contrast_400,
-    },
-    text_contrast_medium: {
-      color: lightPalette.contrast_700,
-    },
-    text_contrast_high: {
-      color: lightPalette.contrast_900,
-    },
-    text_inverted: {
-      color: lightPalette.white,
-    },
-    bg: {
-      backgroundColor: lightPalette.white,
-    },
-    bg_contrast_25: {
-      backgroundColor: lightPalette.contrast_25,
-    },
-    bg_contrast_50: {
-      backgroundColor: lightPalette.contrast_50,
-    },
-    bg_contrast_100: {
-      backgroundColor: lightPalette.contrast_100,
-    },
-    bg_contrast_200: {
-      backgroundColor: lightPalette.contrast_200,
-    },
-    bg_contrast_300: {
-      backgroundColor: lightPalette.contrast_300,
-    },
-    bg_contrast_400: {
-      backgroundColor: lightPalette.contrast_400,
-    },
-    bg_contrast_500: {
-      backgroundColor: lightPalette.contrast_500,
-    },
-    bg_contrast_600: {
-      backgroundColor: lightPalette.contrast_600,
-    },
-    bg_contrast_700: {
-      backgroundColor: lightPalette.contrast_700,
-    },
-    bg_contrast_800: {
-      backgroundColor: lightPalette.contrast_800,
-    },
-    bg_contrast_900: {
-      backgroundColor: lightPalette.contrast_900,
-    },
-    bg_contrast_950: {
-      backgroundColor: lightPalette.contrast_950,
-    },
-    bg_contrast_975: {
-      backgroundColor: lightPalette.contrast_975,
-    },
-    border_contrast_low: {
-      borderColor: lightPalette.contrast_100,
-    },
-    border_contrast_medium: {
-      borderColor: lightPalette.contrast_200,
-    },
-    border_contrast_high: {
-      borderColor: lightPalette.contrast_300,
-    },
-    shadow_sm: {
-      ...atoms.shadow_sm,
-      shadowColor: lightPalette.black,
-    },
-    shadow_md: {
-      ...atoms.shadow_md,
-      shadowColor: lightPalette.black,
-    },
-    shadow_lg: {
-      ...atoms.shadow_lg,
-      shadowColor: lightPalette.black,
-    },
-  },
-}
+    positive_25: color.green_975,
+    positive_50: color.green_950,
+    positive_100: color.green_900,
+    positive_200: color.green_800,
+    positive_300: color.green_700,
+    positive_400: color.green_600,
+    positive_500: color.green_500,
+    positive_600: color.green_400,
+    positive_700: color.green_300,
+    positive_800: color.green_200,
+    positive_900: color.green_100,
+    positive_950: color.green_50,
+    positive_975: color.green_25,
 
-export const dark: Theme = {
-  name: 'dark' as ThemeName,
-  palette: darkPalette,
-  atoms: {
-    text: {
-      color: darkPalette.white,
-    },
-    text_contrast_low: {
-      color: darkPalette.contrast_400,
-    },
-    text_contrast_medium: {
-      color: darkPalette.contrast_700,
-    },
-    text_contrast_high: {
-      color: darkPalette.contrast_900,
-    },
-    text_inverted: {
-      color: darkPalette.black,
-    },
-    bg: {
-      backgroundColor: darkPalette.black,
-    },
-    bg_contrast_25: {
-      backgroundColor: darkPalette.contrast_25,
-    },
-    bg_contrast_50: {
-      backgroundColor: darkPalette.contrast_50,
-    },
-    bg_contrast_100: {
-      backgroundColor: darkPalette.contrast_100,
-    },
-    bg_contrast_200: {
-      backgroundColor: darkPalette.contrast_200,
-    },
-    bg_contrast_300: {
-      backgroundColor: darkPalette.contrast_300,
-    },
-    bg_contrast_400: {
-      backgroundColor: darkPalette.contrast_400,
-    },
-    bg_contrast_500: {
-      backgroundColor: darkPalette.contrast_500,
-    },
-    bg_contrast_600: {
-      backgroundColor: darkPalette.contrast_600,
-    },
-    bg_contrast_700: {
-      backgroundColor: darkPalette.contrast_700,
-    },
-    bg_contrast_800: {
-      backgroundColor: darkPalette.contrast_800,
-    },
-    bg_contrast_900: {
-      backgroundColor: darkPalette.contrast_900,
-    },
-    bg_contrast_950: {
-      backgroundColor: darkPalette.contrast_950,
-    },
-    bg_contrast_975: {
-      backgroundColor: darkPalette.contrast_975,
-    },
-    border_contrast_low: {
-      borderColor: darkPalette.contrast_100,
-    },
-    border_contrast_medium: {
-      borderColor: darkPalette.contrast_200,
-    },
-    border_contrast_high: {
-      borderColor: darkPalette.contrast_300,
-    },
-    shadow_sm: {
-      ...atoms.shadow_sm,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-    shadow_md: {
-      ...atoms.shadow_md,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-    shadow_lg: {
-      ...atoms.shadow_lg,
-      shadowOpacity: 0.7,
-      shadowColor: tokens.color.trueBlack,
-    },
-  },
-}
+    negative_25: color.red_975,
+    negative_50: color.red_950,
+    negative_100: color.red_900,
+    negative_200: color.red_800,
+    negative_300: color.red_700,
+    negative_400: color.red_600,
+    negative_500: color.red_500,
+    negative_600: color.red_400,
+    negative_700: color.red_300,
+    negative_800: color.red_200,
+    negative_900: color.red_100,
+    negative_950: color.red_50,
+    negative_975: color.red_25,
+  } as const
 
-export const dim: Theme = {
-  ...dark,
-  name: 'dim' as ThemeName,
-  palette: dimPalette,
-  atoms: {
-    ...dark.atoms,
-    text: {
-      color: dimPalette.white,
-    },
-    text_contrast_low: {
-      color: dimPalette.contrast_400,
-    },
-    text_contrast_medium: {
-      color: dimPalette.contrast_700,
-    },
-    text_contrast_high: {
-      color: dimPalette.contrast_900,
-    },
-    text_inverted: {
-      color: dimPalette.black,
-    },
-    bg: {
-      backgroundColor: dimPalette.black,
-    },
-    bg_contrast_25: {
-      backgroundColor: dimPalette.contrast_25,
-    },
-    bg_contrast_50: {
-      backgroundColor: dimPalette.contrast_50,
-    },
-    bg_contrast_100: {
-      backgroundColor: dimPalette.contrast_100,
-    },
-    bg_contrast_200: {
-      backgroundColor: dimPalette.contrast_200,
-    },
-    bg_contrast_300: {
-      backgroundColor: dimPalette.contrast_300,
-    },
-    bg_contrast_400: {
-      backgroundColor: dimPalette.contrast_400,
-    },
-    bg_contrast_500: {
-      backgroundColor: dimPalette.contrast_500,
-    },
-    bg_contrast_600: {
-      backgroundColor: dimPalette.contrast_600,
-    },
-    bg_contrast_700: {
-      backgroundColor: dimPalette.contrast_700,
-    },
-    bg_contrast_800: {
-      backgroundColor: dimPalette.contrast_800,
-    },
-    bg_contrast_900: {
-      backgroundColor: dimPalette.contrast_900,
-    },
-    bg_contrast_950: {
-      backgroundColor: dimPalette.contrast_950,
-    },
-    bg_contrast_975: {
-      backgroundColor: dimPalette.contrast_975,
-    },
-    border_contrast_low: {
-      borderColor: dimPalette.contrast_100,
-    },
-    border_contrast_medium: {
-      borderColor: dimPalette.contrast_200,
-    },
-    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%)`,
-    },
-  },
+  const dimPalette: Palette = {
+    ...darkPalette,
+    black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
+
+    contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
+    contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
+    contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
+    contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
+    contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
+    contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
+    contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
+    contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
+    contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
+    contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
+    contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
+    contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
+    contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
+
+    primary_25: `hsl(${hues.primary}, 99%, ${dimScale[1]}%)`,
+    primary_50: `hsl(${hues.primary}, 99%, ${dimScale[2]}%)`,
+    primary_100: `hsl(${hues.primary}, 99%, ${dimScale[3]}%)`,
+    primary_200: `hsl(${hues.primary}, 99%, ${dimScale[4]}%)`,
+    primary_300: `hsl(${hues.primary}, 99%, ${dimScale[5]}%)`,
+    primary_400: `hsl(${hues.primary}, 99%, ${dimScale[6]}%)`,
+    primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
+    primary_600: `hsl(${hues.primary}, 95%, ${dimScale[8]}%)`,
+    primary_700: `hsl(${hues.primary}, 90%, ${dimScale[9]}%)`,
+    primary_800: `hsl(${hues.primary}, 82%, ${dimScale[10]}%)`,
+    primary_900: `hsl(${hues.primary}, 70%, ${dimScale[11]}%)`,
+    primary_950: `hsl(${hues.primary}, 60%, ${dimScale[12]}%)`,
+    primary_975: `hsl(${hues.primary}, 50%, ${dimScale[13]}%)`,
+
+    positive_25: `hsl(${hues.positive}, 82%, ${dimScale[1]}%)`,
+    positive_50: `hsl(${hues.positive}, 82%, ${dimScale[2]}%)`,
+    positive_100: `hsl(${hues.positive}, 82%, ${dimScale[3]}%)`,
+    positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
+    positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
+    positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
+    positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
+    positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
+    positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
+    positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
+    positive_900: `hsl(${hues.positive}, 70%, ${dimScale[11]}%)`,
+    positive_950: `hsl(${hues.positive}, 60%, ${dimScale[12]}%)`,
+    positive_975: `hsl(${hues.positive}, 50%, ${dimScale[13]}%)`,
+
+    negative_25: `hsl(${hues.negative}, 91%, ${dimScale[1]}%)`,
+    negative_50: `hsl(${hues.negative}, 91%, ${dimScale[2]}%)`,
+    negative_100: `hsl(${hues.negative}, 91%, ${dimScale[3]}%)`,
+    negative_200: `hsl(${hues.negative}, 91%, ${dimScale[4]}%)`,
+    negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
+    negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
+    negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
+    negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
+    negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
+    negative_800: `hsl(${hues.negative}, 88%, ${dimScale[10]}%)`,
+    negative_900: `hsl(${hues.negative}, 84%, ${dimScale[11]}%)`,
+    negative_950: `hsl(${hues.negative}, 80%, ${dimScale[12]}%)`,
+    negative_975: `hsl(${hues.negative}, 70%, ${dimScale[13]}%)`,
+  } as const
+
+  const light: Theme = {
+    name: 'light',
+    palette: lightPalette,
+    atoms: {
+      text: {
+        color: lightPalette.black,
+      },
+      text_contrast_low: {
+        color: lightPalette.contrast_400,
+      },
+      text_contrast_medium: {
+        color: lightPalette.contrast_700,
+      },
+      text_contrast_high: {
+        color: lightPalette.contrast_900,
+      },
+      text_inverted: {
+        color: lightPalette.white,
+      },
+      bg: {
+        backgroundColor: lightPalette.white,
+      },
+      bg_contrast_25: {
+        backgroundColor: lightPalette.contrast_25,
+      },
+      bg_contrast_50: {
+        backgroundColor: lightPalette.contrast_50,
+      },
+      bg_contrast_100: {
+        backgroundColor: lightPalette.contrast_100,
+      },
+      bg_contrast_200: {
+        backgroundColor: lightPalette.contrast_200,
+      },
+      bg_contrast_300: {
+        backgroundColor: lightPalette.contrast_300,
+      },
+      bg_contrast_400: {
+        backgroundColor: lightPalette.contrast_400,
+      },
+      bg_contrast_500: {
+        backgroundColor: lightPalette.contrast_500,
+      },
+      bg_contrast_600: {
+        backgroundColor: lightPalette.contrast_600,
+      },
+      bg_contrast_700: {
+        backgroundColor: lightPalette.contrast_700,
+      },
+      bg_contrast_800: {
+        backgroundColor: lightPalette.contrast_800,
+      },
+      bg_contrast_900: {
+        backgroundColor: lightPalette.contrast_900,
+      },
+      bg_contrast_950: {
+        backgroundColor: lightPalette.contrast_950,
+      },
+      bg_contrast_975: {
+        backgroundColor: lightPalette.contrast_975,
+      },
+      border_contrast_low: {
+        borderColor: lightPalette.contrast_100,
+      },
+      border_contrast_medium: {
+        borderColor: lightPalette.contrast_200,
+      },
+      border_contrast_high: {
+        borderColor: lightPalette.contrast_300,
+      },
+      shadow_sm: {
+        ...atoms.shadow_sm,
+        shadowColor: lightPalette.black,
+      },
+      shadow_md: {
+        ...atoms.shadow_md,
+        shadowColor: lightPalette.black,
+      },
+      shadow_lg: {
+        ...atoms.shadow_lg,
+        shadowColor: lightPalette.black,
+      },
+    },
+  }
+
+  const dark: Theme = {
+    name: 'dark',
+    palette: darkPalette,
+    atoms: {
+      text: {
+        color: darkPalette.white,
+      },
+      text_contrast_low: {
+        color: darkPalette.contrast_400,
+      },
+      text_contrast_medium: {
+        color: darkPalette.contrast_700,
+      },
+      text_contrast_high: {
+        color: darkPalette.contrast_900,
+      },
+      text_inverted: {
+        color: darkPalette.black,
+      },
+      bg: {
+        backgroundColor: darkPalette.black,
+      },
+      bg_contrast_25: {
+        backgroundColor: darkPalette.contrast_25,
+      },
+      bg_contrast_50: {
+        backgroundColor: darkPalette.contrast_50,
+      },
+      bg_contrast_100: {
+        backgroundColor: darkPalette.contrast_100,
+      },
+      bg_contrast_200: {
+        backgroundColor: darkPalette.contrast_200,
+      },
+      bg_contrast_300: {
+        backgroundColor: darkPalette.contrast_300,
+      },
+      bg_contrast_400: {
+        backgroundColor: darkPalette.contrast_400,
+      },
+      bg_contrast_500: {
+        backgroundColor: darkPalette.contrast_500,
+      },
+      bg_contrast_600: {
+        backgroundColor: darkPalette.contrast_600,
+      },
+      bg_contrast_700: {
+        backgroundColor: darkPalette.contrast_700,
+      },
+      bg_contrast_800: {
+        backgroundColor: darkPalette.contrast_800,
+      },
+      bg_contrast_900: {
+        backgroundColor: darkPalette.contrast_900,
+      },
+      bg_contrast_950: {
+        backgroundColor: darkPalette.contrast_950,
+      },
+      bg_contrast_975: {
+        backgroundColor: darkPalette.contrast_975,
+      },
+      border_contrast_low: {
+        borderColor: darkPalette.contrast_100,
+      },
+      border_contrast_medium: {
+        borderColor: darkPalette.contrast_200,
+      },
+      border_contrast_high: {
+        borderColor: darkPalette.contrast_300,
+      },
+      shadow_sm: {
+        ...atoms.shadow_sm,
+        shadowOpacity: 0.7,
+        shadowColor: color.trueBlack,
+      },
+      shadow_md: {
+        ...atoms.shadow_md,
+        shadowOpacity: 0.7,
+        shadowColor: color.trueBlack,
+      },
+      shadow_lg: {
+        ...atoms.shadow_lg,
+        shadowOpacity: 0.7,
+        shadowColor: color.trueBlack,
+      },
+    },
+  }
+
+  const dim: Theme = {
+    ...dark,
+    name: 'dim',
+    palette: dimPalette,
+    atoms: {
+      ...dark.atoms,
+      text: {
+        color: dimPalette.white,
+      },
+      text_contrast_low: {
+        color: dimPalette.contrast_400,
+      },
+      text_contrast_medium: {
+        color: dimPalette.contrast_700,
+      },
+      text_contrast_high: {
+        color: dimPalette.contrast_900,
+      },
+      text_inverted: {
+        color: dimPalette.black,
+      },
+      bg: {
+        backgroundColor: dimPalette.black,
+      },
+      bg_contrast_25: {
+        backgroundColor: dimPalette.contrast_25,
+      },
+      bg_contrast_50: {
+        backgroundColor: dimPalette.contrast_50,
+      },
+      bg_contrast_100: {
+        backgroundColor: dimPalette.contrast_100,
+      },
+      bg_contrast_200: {
+        backgroundColor: dimPalette.contrast_200,
+      },
+      bg_contrast_300: {
+        backgroundColor: dimPalette.contrast_300,
+      },
+      bg_contrast_400: {
+        backgroundColor: dimPalette.contrast_400,
+      },
+      bg_contrast_500: {
+        backgroundColor: dimPalette.contrast_500,
+      },
+      bg_contrast_600: {
+        backgroundColor: dimPalette.contrast_600,
+      },
+      bg_contrast_700: {
+        backgroundColor: dimPalette.contrast_700,
+      },
+      bg_contrast_800: {
+        backgroundColor: dimPalette.contrast_800,
+      },
+      bg_contrast_900: {
+        backgroundColor: dimPalette.contrast_900,
+      },
+      bg_contrast_950: {
+        backgroundColor: dimPalette.contrast_950,
+      },
+      bg_contrast_975: {
+        backgroundColor: dimPalette.contrast_975,
+      },
+      border_contrast_low: {
+        borderColor: dimPalette.contrast_100,
+      },
+      border_contrast_medium: {
+        borderColor: dimPalette.contrast_200,
+      },
+      border_contrast_high: {
+        borderColor: dimPalette.contrast_300,
+      },
+      shadow_sm: {
+        ...atoms.shadow_sm,
+        shadowOpacity: 0.7,
+        shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
+      },
+      shadow_md: {
+        ...atoms.shadow_md,
+        shadowOpacity: 0.7,
+        shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
+      },
+      shadow_lg: {
+        ...atoms.shadow_lg,
+        shadowOpacity: 0.7,
+        shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
+      },
+    },
+  }
+
+  return {
+    lightPalette,
+    darkPalette,
+    dimPalette,
+    light,
+    dark,
+    dim,
+  }
 }