feat(appearance): add composable theme package

2026-09-21 16:05:05 +08:00
parent 71c416caab
commit e2dbbcb884
29 changed files with 2877 additions and 0 deletions
@@ -0,0 +1,195 @@
+import type { MessageDescriptor } from "@workspace/i18n"
+
+export const appearanceMessages = {
+  active: /* i18n */ {
+    id: "appearance.active",
+    message: "Active",
+  },
+  appearance: /* i18n */ {
+    id: "appearance.title",
+    message: "Appearance",
+  },
+  appearanceCommandDescription: /* i18n */ {
+    id: "appearance.command.description",
+    message: "Open theme and layout preferences",
+  },
+  baseColor: /* i18n */ {
+    id: "appearance.baseColor",
+    message: "Base color",
+  },
+  compactDescription: /* i18n */ {
+    id: "appearance.compact.description",
+    message: "Use a compact width for the main page content",
+  },
+  compactLayout: /* i18n */ {
+    id: "appearance.compact.title",
+    message: "Compact layout",
+  },
+  darkMode: /* i18n */ {
+    id: "appearance.mode.dark",
+    message: "Dark",
+  },
+  darkModeDescription: /* i18n */ {
+    id: "appearance.mode.dark.description",
+    message: "The interface will always use the dark theme",
+  },
+  darkTheme: /* i18n */ {
+    id: "appearance.theme.dark",
+    message: "Dark theme",
+  },
+  darkThemeDescription: /* i18n */ {
+    id: "appearance.theme.dark.description",
+    message: "This theme is used when the system is in dark mode",
+  },
+  followSystem: /* i18n */ {
+    id: "appearance.mode.system",
+    message: "System",
+  },
+  followSystemDescription: /* i18n */ {
+    id: "appearance.mode.system.description",
+    message: "The interface theme will follow the system appearance",
+  },
+  lightMode: /* i18n */ {
+    id: "appearance.mode.light",
+    message: "Light",
+  },
+  lightModeDescription: /* i18n */ {
+    id: "appearance.mode.light.description",
+    message: "The interface will always use the light theme",
+  },
+  lightTheme: /* i18n */ {
+    id: "appearance.theme.light",
+    message: "Light theme",
+  },
+  lightThemeDescription: /* i18n */ {
+    id: "appearance.theme.light.description",
+    message: "This theme is used when the system is in light mode",
+  },
+  primaryColor: /* i18n */ {
+    id: "appearance.primaryColor",
+    message: "Primary color",
+  },
+  themeAndLayoutPreferences: /* i18n */ {
+    id: "appearance.description",
+    message: "Theme and layout preferences",
+  },
+  themeMode: /* i18n */ {
+    id: "appearance.mode.title",
+    message: "Theme mode",
+  },
+  toggleTheme: /* i18n */ {
+    id: "appearance.toggleTheme",
+    message: "Toggle theme",
+  },
+  toggleThemeDescription: /* i18n */ {
+    id: "appearance.toggleTheme.description",
+    message: "Switch between light and dark themes",
+  },
+  switchToDark: /* i18n */ {
+    id: "appearance.toggleTheme.dark",
+    message: "Switch to dark mode",
+  },
+  switchToLight: /* i18n */ {
+    id: "appearance.toggleTheme.light",
+    message: "Switch to light mode",
+  },
+} as const satisfies Record<string, MessageDescriptor>
+
+export const themeColorMessages = {
+  amber: /* i18n */ {
+    id: "appearance.color.amber",
+    message: "Amber",
+  },
+  blue: /* i18n */ {
+    id: "appearance.color.blue",
+    message: "Blue",
+  },
+  cyan: /* i18n */ {
+    id: "appearance.color.cyan",
+    message: "Cyan",
+  },
+  emerald: /* i18n */ {
+    id: "appearance.color.emerald",
+    message: "Emerald",
+  },
+  fuchsia: /* i18n */ {
+    id: "appearance.color.fuchsia",
+    message: "Fuchsia",
+  },
+  green: /* i18n */ {
+    id: "appearance.color.green",
+    message: "Green",
+  },
+  indigo: /* i18n */ {
+    id: "appearance.color.indigo",
+    message: "Indigo",
+  },
+  lime: /* i18n */ {
+    id: "appearance.color.lime",
+    message: "Lime",
+  },
+  mauve: /* i18n */ {
+    id: "appearance.color.mauve",
+    message: "Mauve",
+  },
+  mist: /* i18n */ {
+    id: "appearance.color.mist",
+    message: "Mist",
+  },
+  neutral: /* i18n */ {
+    id: "appearance.color.neutral",
+    message: "Neutral",
+  },
+  olive: /* i18n */ {
+    id: "appearance.color.olive",
+    message: "Olive",
+  },
+  orange: /* i18n */ {
+    id: "appearance.color.orange",
+    message: "Orange",
+  },
+  pink: /* i18n */ {
+    id: "appearance.color.pink",
+    message: "Pink",
+  },
+  purple: /* i18n */ {
+    id: "appearance.color.purple",
+    message: "Purple",
+  },
+  red: /* i18n */ {
+    id: "appearance.color.red",
+    message: "Red",
+  },
+  rose: /* i18n */ {
+    id: "appearance.color.rose",
+    message: "Rose",
+  },
+  sky: /* i18n */ {
+    id: "appearance.color.sky",
+    message: "Sky",
+  },
+  stone: /* i18n */ {
+    id: "appearance.color.stone",
+    message: "Stone",
+  },
+  taupe: /* i18n */ {
+    id: "appearance.color.taupe",
+    message: "Taupe",
+  },
+  teal: /* i18n */ {
+    id: "appearance.color.teal",
+    message: "Teal",
+  },
+  violet: /* i18n */ {
+    id: "appearance.color.violet",
+    message: "Violet",
+  },
+  yellow: /* i18n */ {
+    id: "appearance.color.yellow",
+    message: "Yellow",
+  },
+  zinc: /* i18n */ {
+    id: "appearance.color.zinc",
+    message: "Zinc",
+  },
+} as const satisfies Record<string, MessageDescriptor>