1 files changed, 108 insertions, 0 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
new file mode 100644
index 000000000..aae5c5893
--- /dev/null
+++ b/src/alf/themes.ts
@@ -0,0 +1,108 @@
+import * as tokens from '#/alf/tokens'
+import type {Mutable} from '#/alf/types'
+
+export type ThemeName = 'light' | 'dark'
+export type ReadonlyTheme = typeof light
+export type Theme = Mutable<ReadonlyTheme>
+
+export type Palette = {
+  primary: string
+  positive: string
+  negative: string
+}
+
+export const lightPalette: Palette = {
+  primary: tokens.color.blue_500,
+  positive: tokens.color.green_500,
+  negative: tokens.color.red_500,
+} as const
+
+export const darkPalette: Palette = {
+  primary: tokens.color.blue_500,
+  positive: tokens.color.green_400,
+  negative: tokens.color.red_400,
+} as const
+
+export const light = {
+  palette: lightPalette,
+  atoms: {
+    text: {
+      color: tokens.color.gray_1000,
+    },
+    text_contrast_700: {
+      color: tokens.color.gray_700,
+    },
+    text_contrast_500: {
+      color: tokens.color.gray_500,
+    },
+    text_inverted: {
+      color: tokens.color.white,
+    },
+    bg: {
+      backgroundColor: tokens.color.white,
+    },
+    bg_contrast_100: {
+      backgroundColor: tokens.color.gray_100,
+    },
+    bg_contrast_200: {
+      backgroundColor: tokens.color.gray_200,
+    },
+    bg_contrast_300: {
+      backgroundColor: tokens.color.gray_300,
+    },
+    bg_positive: {
+      backgroundColor: tokens.color.green_500,
+    },
+    bg_negative: {
+      backgroundColor: tokens.color.red_400,
+    },
+    border: {
+      borderColor: tokens.color.gray_200,
+    },
+    border_contrast_500: {
+      borderColor: tokens.color.gray_500,
+    },
+  },
+}
+
+export const dark: Theme = {
+  palette: darkPalette,
+  atoms: {
+    text: {
+      color: tokens.color.white,
+    },
+    text_contrast_700: {
+      color: tokens.color.gray_300,
+    },
+    text_contrast_500: {
+      color: tokens.color.gray_500,
+    },
+    text_inverted: {
+      color: tokens.color.gray_1000,
+    },
+    bg: {
+      backgroundColor: tokens.color.gray_1000,
+    },
+    bg_contrast_100: {
+      backgroundColor: tokens.color.gray_900,
+    },
+    bg_contrast_200: {
+      backgroundColor: tokens.color.gray_800,
+    },
+    bg_contrast_300: {
+      backgroundColor: tokens.color.gray_700,
+    },
+    bg_positive: {
+      backgroundColor: tokens.color.green_400,
+    },
+    bg_negative: {
+      backgroundColor: tokens.color.red_400,
+    },
+    border: {
+      borderColor: tokens.color.gray_800,
+    },
+    border_contrast_500: {
+      borderColor: tokens.color.gray_500,
+    },
+  },
+}