about summary refs log tree commit diff
path: root/src/alf
diff options
context:
space:
mode:
Diffstat (limited to 'src/alf')
-rw-r--r--src/alf/themes.ts202
-rw-r--r--src/alf/tokens.ts14
2 files changed, 169 insertions, 47 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index b36e782fd..72e08e894 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -73,19 +73,19 @@ export const darkPalette: Palette = {
   white: tokens.color.gray_0,
   black: tokens.color.trueBlack,
 
-  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: 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,
@@ -133,6 +133,20 @@ export const darkPalette: Palette = {
 export const dimPalette: Palette = {
   ...darkPalette,
   black: tokens.color.gray_1000,
+
+  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,
 } as const
 
 export const light = {
@@ -142,17 +156,14 @@ export const light = {
     text: {
       color: lightPalette.black,
     },
-    text_contrast_700: {
-      color: lightPalette.contrast_700,
-    },
-    text_contrast_600: {
-      color: lightPalette.contrast_600,
+    text_contrast_low: {
+      color: lightPalette.contrast_400,
     },
-    text_contrast_500: {
-      color: lightPalette.contrast_500,
+    text_contrast_medium: {
+      color: lightPalette.contrast_700,
     },
-    text_contrast_400: {
-      color: lightPalette.contrast_400,
+    text_contrast_high: {
+      color: lightPalette.contrast_900,
     },
     text_inverted: {
       color: lightPalette.white,
@@ -175,11 +186,38 @@ export const light = {
     bg_contrast_300: {
       backgroundColor: lightPalette.contrast_300,
     },
-    border: {
+    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: {
-      borderColor: lightPalette.contrast_400,
+    border_contrast_medium: {
+      borderColor: lightPalette.contrast_200,
+    },
+    border_contrast_high: {
+      borderColor: lightPalette.contrast_300,
     },
     shadow_sm: {
       ...atoms.shadow_sm,
@@ -203,17 +241,14 @@ export const dark: Theme = {
     text: {
       color: darkPalette.white,
     },
-    text_contrast_700: {
-      color: darkPalette.contrast_700,
+    text_contrast_low: {
+      color: darkPalette.contrast_400,
     },
-    text_contrast_600: {
-      color: darkPalette.contrast_600,
+    text_contrast_medium: {
+      color: darkPalette.contrast_700,
     },
-    text_contrast_500: {
-      color: darkPalette.contrast_500,
-    },
-    text_contrast_400: {
-      color: darkPalette.contrast_400,
+    text_contrast_high: {
+      color: darkPalette.contrast_900,
     },
     text_inverted: {
       color: darkPalette.black,
@@ -222,24 +257,51 @@ export const dark: Theme = {
       backgroundColor: darkPalette.black,
     },
     bg_contrast_25: {
-      backgroundColor: darkPalette.contrast_50,
+      backgroundColor: darkPalette.contrast_25,
     },
     bg_contrast_50: {
-      backgroundColor: darkPalette.contrast_100,
+      backgroundColor: darkPalette.contrast_50,
     },
     bg_contrast_100: {
-      backgroundColor: darkPalette.contrast_200,
+      backgroundColor: darkPalette.contrast_100,
     },
     bg_contrast_200: {
-      backgroundColor: darkPalette.contrast_300,
+      backgroundColor: darkPalette.contrast_200,
     },
     bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_400: {
       backgroundColor: darkPalette.contrast_400,
     },
-    border: {
+    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: {
+    border_contrast_medium: {
+      borderColor: darkPalette.contrast_200,
+    },
+    border_contrast_high: {
       borderColor: darkPalette.contrast_300,
     },
     shadow_sm: {
@@ -265,11 +327,71 @@ export const dim: Theme = {
   name: 'dim',
   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,
+    },
   },
 }
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index f3ae80275..f0b8c7c69 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -13,13 +13,13 @@ export const color = {
   gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`,
   gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`,
   gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`,
-  gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`,
-  gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`,
-  gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`,
-  gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`,
-  gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`,
-  gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`,
-  gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`,
+  gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`,
+  gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`,
+  gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`,
+  gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`,
+  gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`,
+  gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`,
+  gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`,
 
   blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
   blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-17 11:03:57 +0000