theme redux

src/types/desktop-theme.ts

@@ -1,10 +1,12 @@
 import type {
   DesktopTheme,
   ThemeColors,
+  ThemeDefinition,
   ThemeName,
   ThemeToken,
   ThemeVariant,
 } from "../types/settings"
+import type { ColorValue } from "./theme-schema"
 
 // Base theme colors
 export const BASE_THEME_COLORS: ThemeColors = {
@@ -63,12 +65,12 @@ export const THEMES_DESKTOP: DesktopTheme = {
         warning: "#fab387",
         error: "#f38ba8",
         success: "#a6e3a1",
-        layerBackgrounds: {
-          layer0: "transparent",
-          layer1: "#181825",
-          layer2: "#11111b",
-          layer3: "#0a0a0f",
-        },
+  layerBackgrounds: {
+    layer0: "transparent",
+    layer1: "#181825",
+    layer2: "#11111b",
+    layer3: "#0a0a0f",
+  },
       },
     },
     {
@@ -150,3 +152,9 @@ export function getDefaultTheme(): ThemeVariant {
     (variant) => variant.name === THEMES_DESKTOP.defaultVariant
   )!
 }
+
+export type ThemeJsonFile = ThemeDefinition
+
+export function isColorReference(value: ColorValue): value is string {
+  return typeof value === "string" && !value.startsWith("#")
+}

src/types/settings.ts

@@ -1,23 +1,26 @@
+import type { RGBA } from "@opentui/core"
+import type { ColorValue, ThemeJson, Variant } from "./theme-schema"
+
 export type ThemeName = "system" | "catppuccin" | "gruvbox" | "tokyo" | "nord" | "custom"
 
 export type LayerBackgrounds = {
-  layer0: string
-  layer1: string
-  layer2: string
-  layer3: string
+  layer0: ColorValue
+  layer1: ColorValue
+  layer2: ColorValue
+  layer3: ColorValue
 }
 
 export type ThemeColors = {
-  background: string
-  surface: string
-  primary: string
-  secondary: string
-  accent: string
-  text: string
-  muted: string
-  warning: string
-  error: string
-  success: string
+  background: ColorValue
+  surface: ColorValue
+  primary: ColorValue
+  secondary: ColorValue
+  accent: ColorValue
+  text: ColorValue
+  muted: ColorValue
+  warning: ColorValue
+  error: ColorValue
+  success: ColorValue
   layerBackgrounds?: LayerBackgrounds
 }
 
@@ -30,8 +33,10 @@ export type ThemeToken = {
   [key: string]: string
 }
 
-export type ResolvedTheme = ThemeColors & {
-  layerBackgrounds: LayerBackgrounds
+export type ResolvedTheme = Record<string, RGBA> & {
+  layerBackgrounds: Record<string, RGBA>
+  _hasSelectedListItemText: boolean
+  thinkingOpacity: number
 }
 
 export type DesktopTheme = {
@@ -58,3 +63,7 @@ export type AppState = {
   preferences: UserPreferences
   customTheme: ThemeColors
 }
+
+export type ThemeMode = "dark" | "light"
+export type ThemeVariantValue = Variant
+export type ThemeDefinition = ThemeJson

src/types/theme-schema.ts

@@ -0,0 +1,26 @@
+import type { RGBA } from "@opentui/core"
+
+export type HexColor = `#${string}`
+export type RefName = string
+
+export type Variant = {
+  dark: HexColor | RefName
+  light: HexColor | RefName
+}
+
+export type ColorValue = HexColor | RefName | Variant | RGBA | number
+
+export type ThemeJson = {
+  $schema?: string
+  defs?: Record<string, HexColor | RefName>
+  theme: Record<string, ColorValue> & {
+    selectedListItemText?: ColorValue
+    backgroundMenu?: ColorValue
+    thinkingOpacity?: number
+  }
+}
+
+export type ThemeColors = Record<string, RGBA> & {
+  _hasSelectedListItemText: boolean
+  thinkingOpacity: number
+}