init

ui/theme/colors.slint

@@ -0,0 +1,75 @@
+// Shadcn-style Color System
+// Based on shadcn/ui zinc theme with light/dark mode support
+
+// Color palette structure
+export struct ColorPalette {
+    background: color,
+    foreground: color,
+    card: color,
+    card-foreground: color,
+    popover: color,
+    popover-foreground: color,
+    primary: color,
+    primary-foreground: color,
+    secondary: color,
+    secondary-foreground: color,
+    muted: color,
+    muted-foreground: color,
+    accent: color,
+    accent-foreground: color,
+    destructive: color,
+    destructive-foreground: color,
+    border: color,
+    input: color,
+    ring: color,
+}
+
+// Light mode colors - shadcn zinc theme
+export global LightColors {
+    out property <ColorPalette> palette: {
+        background: #ffffff,
+        foreground: #09090b,
+        card: #ffffff,
+        card-foreground: #09090b,
+        popover: #ffffff,
+        popover-foreground: #09090b,
+        primary: #18181b,
+        primary-foreground: #fafafa,
+        secondary: #f4f4f5,
+        secondary-foreground: #18181b,
+        muted: #f4f4f5,
+        muted-foreground: #71717a,
+        accent: #f4f4f5,
+        accent-foreground: #18181b,
+        destructive: #ef4444,
+        destructive-foreground: #fafafa,
+        border: #e4e4e7,
+        input: #e4e4e7,
+        ring: #18181b,
+    };
+}
+
+// Dark mode colors - shadcn zinc theme
+export global DarkColors {
+    out property <ColorPalette> palette: {
+        background: #09090b,
+        foreground: #fafafa,
+        card: #09090b,
+        card-foreground: #fafafa,
+        popover: #09090b,
+        popover-foreground: #fafafa,
+        primary: #fafafa,
+        primary-foreground: #18181b,
+        secondary: #27272a,
+        secondary-foreground: #fafafa,
+        muted: #27272a,
+        muted-foreground: #a1a1aa,
+        accent: #27272a,
+        accent-foreground: #fafafa,
+        destructive: #7f1d1d,
+        destructive-foreground: #fafafa,
+        border: #27272a,
+        input: #27272a,
+        ring: #d4d4d8,
+    };
+}

ui/theme/spacing.slint

@@ -0,0 +1,55 @@
+// Spacing and Border Radius System
+// Consistent spacing scale following shadcn design principles
+
+// Spacing scale (px)
+export struct Spacing {
+    s0: length,
+    s1: length,
+    s2: length,
+    s3: length,
+    s4: length,
+    s6: length,
+    s8: length,
+    s12: length,
+    s16: length,
+    s24: length,
+    s32: length,
+}
+
+// Border radius scale (px)
+export struct BorderRadius {
+    sm: length,
+    md: length,
+    lg: length,
+    xl: length,
+    xl2: length,
+    full: length,
+}
+
+// Global spacing configuration
+export global SpacingSystem {
+    // Spacing values
+    out property <Spacing> spacing: {
+        s0: 0px,
+        s1: 4px,
+        s2: 8px,
+        s3: 12px,
+        s4: 16px,
+        s6: 24px,
+        s8: 32px,
+        s12: 48px,
+        s16: 64px,
+        s24: 96px,
+        s32: 128px,
+    };
+    
+    // Border radius values
+    out property <BorderRadius> radius: {
+        sm: 4px,
+        md: 6px,
+        lg: 8px,
+        xl: 12px,
+        xl2: 16px,
+        full: 9999px,
+    };
+}

ui/theme/theme.slint

@@ -0,0 +1,26 @@
+// Theme Manager
+// Global theme state with light/dark mode support
+
+import { ColorPalette, LightColors, DarkColors } from "colors.slint";
+import { Typography } from "typography.slint";
+import { SpacingSystem } from "spacing.slint";
+
+// Global theme manager (singleton)
+export global Theme {
+    // Theme state
+    in-out property <bool> is-dark-mode: false;
+    
+    // Current active color palette (reactive)
+    out property <ColorPalette> colors: is-dark-mode ? 
+        DarkColors.palette : LightColors.palette;
+    
+    // Theme toggle callback
+    callback toggle-theme();
+    
+    toggle-theme => {
+        is-dark-mode = !is-dark-mode;
+    }
+}
+
+// Re-export for convenience
+export { Typography, SpacingSystem }

ui/theme/typography.slint

@@ -0,0 +1,59 @@
+// Typography System
+// Font sizes, weights, and line heights following shadcn design principles
+
+// Font size scale
+export struct FontSizes {
+    xs: length,
+    sm: length,
+    base: length,
+    lg: length,
+    xl: length,
+    xl2: length,
+    xl3: length,
+    xl4: length,
+}
+
+// Font weight scale
+export struct FontWeights {
+    normal: int,
+    medium: int,
+    semibold: int,
+    bold: int,
+}
+
+// Line height scale
+export struct LineHeights {
+    tight: float,
+    normal: float,
+    relaxed: float,
+}
+
+// Global typography configuration
+export global Typography {
+    // Font sizes (px)
+    out property <FontSizes> sizes: {
+        xs: 12px,
+        sm: 14px,
+        base: 16px,
+        lg: 18px,
+        xl: 20px,
+        xl2: 24px,
+        xl3: 30px,
+        xl4: 36px,
+    };
+    
+    // Font weights
+    out property <FontWeights> weights: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    };
+    
+    // Line heights (relative)
+    out property <LineHeights> line-heights: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75,
+    };
+}