about summary refs log tree commit diff
path: root/src/alf/themes.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/alf/themes.ts')
-rw-r--r--src/alf/themes.ts320
1 files changed, 320 insertions, 0 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
new file mode 100644
index 000000000..7c6b7dab4
--- /dev/null
+++ b/src/alf/themes.ts
@@ -0,0 +1,320 @@
+import * as tokens from '#/alf/tokens'
+import type {Mutable} from '#/alf/types'
+import {atoms} from '#/alf/atoms'
+
+export type ThemeName = 'light' | 'dim' | 'dark'
+export type ReadonlyTheme = typeof light
+export type Theme = Mutable<ReadonlyTheme>
+export type ReadonlyPalette = typeof lightPalette
+export type Palette = Mutable<ReadonlyPalette>
+
+export const lightPalette = {
+  white: tokens.color.gray_0,
+  black: tokens.color.gray_1000,
+
+  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,
+
+  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,
+
+  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,
+
+  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
+
+export const darkPalette: Palette = {
+  white: tokens.color.gray_0,
+  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,
+
+  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,
+
+  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,
+
+  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
+
+export const light = {
+  name: 'light',
+  palette: lightPalette,
+  atoms: {
+    text: {
+      color: lightPalette.black,
+    },
+    text_contrast_700: {
+      color: lightPalette.contrast_700,
+    },
+    text_contrast_600: {
+      color: lightPalette.contrast_600,
+    },
+    text_contrast_500: {
+      color: lightPalette.contrast_500,
+    },
+    text_contrast_400: {
+      color: lightPalette.contrast_400,
+    },
+    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,
+    },
+    border: {
+      borderColor: lightPalette.contrast_100,
+    },
+    border_contrast: {
+      borderColor: lightPalette.contrast_400,
+    },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowColor: lightPalette.black,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowColor: lightPalette.black,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowColor: lightPalette.black,
+    },
+  },
+}
+
+export const dim: Theme = {
+  name: 'dim',
+  palette: darkPalette,
+  atoms: {
+    text: {
+      color: darkPalette.white,
+    },
+    text_contrast_700: {
+      color: darkPalette.contrast_800,
+    },
+    text_contrast_600: {
+      color: darkPalette.contrast_700,
+    },
+    text_contrast_500: {
+      color: darkPalette.contrast_600,
+    },
+    text_contrast_400: {
+      color: darkPalette.contrast_500,
+    },
+    text_inverted: {
+      color: darkPalette.black,
+    },
+    bg: {
+      backgroundColor: darkPalette.contrast_50,
+    },
+    bg_contrast_25: {
+      backgroundColor: darkPalette.contrast_100,
+    },
+    bg_contrast_50: {
+      backgroundColor: darkPalette.contrast_200,
+    },
+    bg_contrast_100: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_200: {
+      backgroundColor: darkPalette.contrast_400,
+    },
+    bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_500,
+    },
+    border: {
+      borderColor: darkPalette.contrast_200,
+    },
+    border_contrast: {
+      borderColor: darkPalette.contrast_400,
+    },
+    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,
+    },
+  },
+}
+
+export const dark: Theme = {
+  name: 'dark',
+  palette: darkPalette,
+  atoms: {
+    text: {
+      color: darkPalette.white,
+    },
+    text_contrast_700: {
+      color: darkPalette.contrast_700,
+    },
+    text_contrast_600: {
+      color: darkPalette.contrast_600,
+    },
+    text_contrast_500: {
+      color: darkPalette.contrast_500,
+    },
+    text_contrast_400: {
+      color: darkPalette.contrast_400,
+    },
+    text_inverted: {
+      color: darkPalette.black,
+    },
+    bg: {
+      backgroundColor: darkPalette.black,
+    },
+    bg_contrast_25: {
+      backgroundColor: darkPalette.contrast_50,
+    },
+    bg_contrast_50: {
+      backgroundColor: darkPalette.contrast_100,
+    },
+    bg_contrast_100: {
+      backgroundColor: darkPalette.contrast_200,
+    },
+    bg_contrast_200: {
+      backgroundColor: darkPalette.contrast_300,
+    },
+    bg_contrast_300: {
+      backgroundColor: darkPalette.contrast_400,
+    },
+    border: {
+      borderColor: darkPalette.contrast_100,
+    },
+    border_contrast: {
+      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,
+    },
+  },
+}
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-13 18:29:38 +0000