get-shit-pretty 0.7.3 → 0.8.2

package/gsp/skills/gsp-style/styles/bauhaus.yml

@@ -5,17 +5,44 @@ trend_ref: trends/bauhaus.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FFFFFF"
+    foreground: "#000000"
+    card: "#F0F0F0"
+    card-foreground: "#000000"
+    popover: "#F0F0F0"
+    popover-foreground: "#000000"
     primary: "#D02020"
+    primary-foreground: "#FFFFFF"
     secondary: "#1040C0"
+    secondary-foreground: "#FFFFFF"
     accent: "#F0C020"
-    background: "#FFFFFF"
-    surface: "#F0F0F0"
-    on-primary: "#FFFFFF"
-    on-background: "#000000"
-    error: "#DC2626"
+    accent-foreground: "#000000"
+    muted: "#E0E0E0"
+    muted-foreground: "#555555"
+    destructive: "#DC2626"
+    border: "#000000"
+    input: "#000000"
+    ring: "#D02020"
+    # Sidebar
+    sidebar: "#F0F0F0"
+    sidebar-foreground: "#000000"
+    sidebar-primary: "#D02020"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#E0E0E0"
+    sidebar-accent-foreground: "#000000"
+    sidebar-border: "#000000"
+    sidebar-ring: "#D02020"
+    # Extras
     success: "#16A34A"
     warning: "#F0C020"
     info: "#1040C0"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#D02020"  # Bauhaus red (primary)
+    chart-2: "#1040C0"  # Bauhaus blue (secondary)
+    chart-3: "#E8B000"  # Bauhaus yellow (shifted deeper)
+    chart-4: "#16A34A"  # constructivist green
+    chart-5: "#6B21A8"  # modernist violet
 
   typography:
     font-family-primary: "Outfit, sans-serif"
@@ -30,7 +57,6 @@ tokens:
     border-radius-md: "0px"
     border-radius-lg: "9999px"
     border-width: "4px"
-    border-color: "#000000"
 
   elevation:
     shadow-sm: "4px 4px 0px 0px #000000"
@@ -50,8 +76,13 @@ tokens:
 dark_mode:
   color:
     background: "#1A1A1A"
-    surface: "#2A2A2A"
-    on-background: "#F0F0F0"
+    foreground: "#F0F0F0"
+    card: "#2A2A2A"
+    card-foreground: "#F0F0F0"
+    popover: "#2A2A2A"
+    popover-foreground: "#F0F0F0"
+    border: "#F0F0F0"
+    input: "#F0F0F0"
 
 intensity:
   variance: 7     # asymmetric color-blocked sections, overlapping geometric shapes, broken grids

package/gsp/skills/gsp-style/styles/bold-typography.yml

@@ -5,18 +5,44 @@ trend_ref: trends/bold-typography.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#0A0A0A"
+    foreground: "#FAFAFA"
+    card: "#171717"
+    card-foreground: "#FAFAFA"
+    popover: "#171717"
+    popover-foreground: "#FAFAFA"
     primary: "#FF3D00"
+    primary-foreground: "#000000"
     secondary: "#A3A3A3"
+    secondary-foreground: "#000000"
     accent: "#FFFFFF"
-    background: "#0A0A0A"
-    surface: "#171717"
-    on-primary: "#000000"
-    on-background: "#FAFAFA"
-    error: "#EF4444"
+    accent-foreground: "#0A0A0A"
+    muted: "#737373"
+    muted-foreground: "#A3A3A3"
+    destructive: "#EF4444"
+    border: "#262626"
+    input: "#262626"
+    ring: "#FF3D00"
+    # Sidebar
+    sidebar: "#171717"
+    sidebar-foreground: "#FAFAFA"
+    sidebar-primary: "#FF3D00"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#262626"
+    sidebar-accent-foreground: "#FAFAFA"
+    sidebar-border: "#262626"
+    sidebar-ring: "#FF3D00"
+    # Extras
     success: "#22C55E"
     warning: "#F59E0B"
     info: "#3B82F6"
-    muted: "#737373"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#FF3D00"  # vermillion (primary)
+    chart-2: "#22C55E"  # electric green
+    chart-3: "#3B82F6"  # vivid blue
+    chart-4: "#F59E0B"  # amber signal
+    chart-5: "#E879F9"  # hot pink
 
   typography:
     font-family-primary: "Inter Tight, Inter, sans-serif"
@@ -32,7 +58,6 @@ tokens:
     border-radius-md: "4px"
     border-radius-lg: "8px"
     border-width: "1px"
-    border-color: "#262626"
 
   elevation:
     shadow-sm: "none"
@@ -55,7 +80,13 @@ tokens:
 dark_mode:
   color:
     background: "#050505"
-    surface: "#0F0F0F"
+    foreground: "#FAFAFA"
+    card: "#0F0F0F"
+    card-foreground: "#FAFAFA"
+    popover: "#0F0F0F"
+    popover-foreground: "#FAFAFA"
+    border: "#1A1A1A"
+    input: "#1A1A1A"
 
 intensity:
   variance: 6

package/gsp/skills/gsp-style/styles/botanical.yml

@@ -5,18 +5,44 @@ trend_ref: trends/botanical.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#F9F8F4"
+    foreground: "#2D3A31"
+    card: "#F7FEE7"
+    card-foreground: "#2D3A31"
+    popover: "#F7FEE7"
+    popover-foreground: "#2D3A31"
     primary: "#166534"
+    primary-foreground: "#FFFFFF"
     secondary: "#5D7052"
+    secondary-foreground: "#FFFFFF"
     accent: "#C27B66"
-    background: "#F9F8F4"
-    surface: "#F7FEE7"
-    on-primary: "#FFFFFF"
-    on-background: "#2D3A31"
-    error: "#DC2626"
+    accent-foreground: "#FFFFFF"
+    muted: "#8C9A84"
+    muted-foreground: "#4D5C48"
+    destructive: "#DC2626"
+    border: "rgba(22,101,52,0.15)"
+    input: "rgba(22,101,52,0.15)"
+    ring: "#166534"
+    # Sidebar
+    sidebar: "#F7FEE7"
+    sidebar-foreground: "#2D3A31"
+    sidebar-primary: "#166534"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#E8F5E9"
+    sidebar-accent-foreground: "#2D3A31"
+    sidebar-border: "rgba(22,101,52,0.15)"
+    sidebar-ring: "#166534"
+    # Extras
     success: "#16A34A"
     warning: "#CA8A04"
     info: "#2563EB"
-    muted: "#8C9A84"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#166534"  # deep forest green (primary)
+    chart-2: "#C27B66"  # terracotta clay (accent)
+    chart-3: "#CA8A04"  # harvest gold
+    chart-4: "#2563EB"  # botanical blue
+    chart-5: "#8B5E3C"  # rich bark brown
 
   typography:
     font-family-primary: "Playfair Display, serif"
@@ -32,7 +58,6 @@ tokens:
     border-radius-md: "16px"
     border-radius-lg: "32px"
     border-width: "1px"
-    border-color: "rgba(22,101,52,0.15)"
 
   elevation:
     shadow-sm: "0 2px 4px rgba(22,101,52,0.1)"
@@ -56,8 +81,13 @@ tokens:
 dark_mode:
   color:
     background: "#1A2E1A"
-    surface: "#243524"
-    on-background: "#E2EDE2"
+    foreground: "#E2EDE2"
+    card: "#243524"
+    card-foreground: "#E2EDE2"
+    popover: "#243524"
+    popover-foreground: "#E2EDE2"
+    border: "rgba(22,101,52,0.25)"
+    input: "rgba(22,101,52,0.25)"
 
 intensity:
   variance: 4     # staggered card offsets, arch imagery, but structured overall

package/gsp/skills/gsp-style/styles/claymorphism.yml

@@ -5,18 +5,44 @@ trend_ref: trends/claymorphism.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#F4F1FA"
+    foreground: "#332F3A"
+    card: "oklch(100% 0 0 / 0.60)"
+    card-foreground: "#332F3A"
+    popover: "oklch(100% 0 0 / 0.60)"
+    popover-foreground: "#332F3A"
     primary: "#7C3AED"
+    primary-foreground: "#FFFFFF"
     secondary: "#EC4899"
+    secondary-foreground: "#FFFFFF"
     accent: "#0EA5E9"
-    background: "#F4F1FA"
-    surface: "rgba(255,255,255,0.60)"
-    on-primary: "#FFFFFF"
-    on-background: "#332F3A"
-    error: "#EF4444"
+    accent-foreground: "#FFFFFF"
+    muted: "#635F69"
+    muted-foreground: "#9E9AA8"
+    destructive: "#EF4444"
+    border: "transparent"
+    input: "transparent"
+    ring: "#7C3AED"
+    # Sidebar
+    sidebar: "oklch(100% 0 0 / 0.60)"
+    sidebar-foreground: "#332F3A"
+    sidebar-primary: "#7C3AED"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#EFEBF5"
+    sidebar-accent-foreground: "#332F3A"
+    sidebar-border: "transparent"
+    sidebar-ring: "#7C3AED"
+    # Extras
     success: "#22C55E"
     warning: "#F59E0B"
     info: "#0EA5E9"
-    muted: "#635F69"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#7C3AED"  # clay violet (primary)
+    chart-2: "#EC4899"  # bubblegum pink (secondary)
+    chart-3: "#0EA5E9"  # sky blue (accent)
+    chart-4: "#22C55E"  # mint green
+    chart-5: "#F59E0B"  # candy amber
 
   typography:
     font-family-primary: "Nunito, sans-serif"
@@ -32,7 +58,6 @@ tokens:
     border-radius-md: "32px"
     border-radius-lg: "48px"
     border-width: "0px"
-    border-color: "transparent"
 
   inset:
     pressed: "inset 10px 10px 20px #d9d4e3, inset -10px -10px 20px #fff"
@@ -62,8 +87,13 @@ tokens:
 dark_mode:
   color:
     background: "#1E1B2E"
-    surface: "rgba(50,45,70,0.60)"
-    on-background: "#E8E6F0"
+    foreground: "#E8E6F0"
+    card: "oklch(28% 0.03 290 / 0.60)"
+    card-foreground: "#E8E6F0"
+    popover: "oklch(28% 0.03 290 / 0.60)"
+    popover-foreground: "#E8E6F0"
+    border: "transparent"
+    input: "transparent"
 
 intensity:
   variance: 6     # bento grids with col-span mixing, overlapping badges, varied radii per nesting level

package/gsp/skills/gsp-style/styles/cyberpunk.yml

@@ -4,17 +4,44 @@ tags: [dark, neon, expressive, futuristic, bold]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#0A0A0F"
+    foreground: "#E0E0FF"
+    card: "#12121A"
+    card-foreground: "#E0E0FF"
+    popover: "#12121A"
+    popover-foreground: "#E0E0FF"
     primary: "#00FFFF"
+    primary-foreground: "#000000"
     secondary: "#FF00FF"
+    secondary-foreground: "#000000"
     accent: "#FFFF00"
-    background: "#0A0A0F"
-    surface: "#12121A"
-    on-primary: "#000000"
-    on-background: "#E0E0FF"
-    error: "#FF3366"
+    accent-foreground: "#000000"
+    muted: "#1A1A28"
+    muted-foreground: "#8080B0"
+    destructive: "#FF3366"
+    border: "rgba(0, 255, 255, 0.3)"
+    input: "rgba(0, 255, 255, 0.3)"
+    ring: "#00FFFF"
+    # Sidebar
+    sidebar: "#12121A"
+    sidebar-foreground: "#E0E0FF"
+    sidebar-primary: "#00FFFF"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#1A1A28"
+    sidebar-accent-foreground: "#E0E0FF"
+    sidebar-border: "rgba(0, 255, 255, 0.3)"
+    sidebar-ring: "#00FFFF"
+    # Extras
     success: "#00FF88"
     warning: "#FFB800"
     info: "#00BFFF"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#00FFFF"  # neon cyan (primary)
+    chart-2: "#FF00FF"  # neon magenta (secondary)
+    chart-3: "#FFFF00"  # neon yellow (accent)
+    chart-4: "#00FF88"  # neon green (success)
+    chart-5: "#FF3366"  # hot red (destructive)
 
   typography:
     font-family-primary: "Orbitron, sans-serif"
@@ -30,7 +57,6 @@ tokens:
     border-radius-md: "4px"
     border-radius-lg: "8px"
     border-width: "1px"
-    border-color: "rgba(0, 255, 255, 0.3)"
 
   elevation:
     shadow-sm: "0 0 8px rgba(0, 255, 255, 0.15)"
@@ -56,7 +82,13 @@ tokens:
 dark_mode:
   color:
     background: "#050508"
-    surface: "#0A0A12"
+    foreground: "#E0E0FF"
+    card: "#0A0A12"
+    card-foreground: "#E0E0FF"
+    popover: "#0A0A12"
+    popover-foreground: "#E0E0FF"
+    border: "rgba(0, 255, 255, 0.3)"
+    input: "rgba(0, 255, 255, 0.3)"
 
 intensity:
   variance: 8     # asymmetric HUD layouts, skewed grids, overlapping neon panels

package/gsp/skills/gsp-style/styles/enterprise.yml

@@ -5,18 +5,44 @@ trend_ref: trends/enterprise.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#F8FAFC"
+    foreground: "#0F172A"
+    card: "#FFFFFF"
+    card-foreground: "#0F172A"
+    popover: "#FFFFFF"
+    popover-foreground: "#0F172A"
     primary: "#4F46E5"
+    primary-foreground: "#FFFFFF"
     secondary: "#7C3AED"
+    secondary-foreground: "#FFFFFF"
     accent: "#0EA5E9"
-    background: "#F8FAFC"
-    surface: "#FFFFFF"
-    on-primary: "#FFFFFF"
-    on-background: "#0F172A"
-    error: "#EF4444"
+    accent-foreground: "#FFFFFF"
+    muted: "#64748B"
+    muted-foreground: "#94A3B8"
+    destructive: "#EF4444"
+    border: "#CBD5E1"
+    input: "#CBD5E1"
+    ring: "#4F46E5"
+    # Sidebar
+    sidebar: "#FFFFFF"
+    sidebar-foreground: "#0F172A"
+    sidebar-primary: "#4F46E5"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#F1F5F9"
+    sidebar-accent-foreground: "#0F172A"
+    sidebar-border: "#CBD5E1"
+    sidebar-ring: "#4F46E5"
+    # Extras
     success: "#10B981"
     warning: "#F59E0B"
     info: "#3B82F6"
-    muted: "#64748B"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#4F46E5"  # indigo (primary)
+    chart-2: "#0EA5E9"  # sky blue (accent)
+    chart-3: "#10B981"  # emerald (success)
+    chart-4: "#F59E0B"  # amber (warning)
+    chart-5: "#EF4444"  # signal red
 
   typography:
     font-family-primary: "Plus Jakarta Sans, Inter, sans-serif"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "6px"
     border-radius-lg: "8px"
     border-width: "1px"
-    border-color: "#CBD5E1"
 
   elevation:
     shadow-sm: "0 1px 3px rgba(79,70,229,0.08)"
@@ -54,9 +79,13 @@ tokens:
 dark_mode:
   color:
     background: "#0F172A"
-    surface: "#1E293B"
-    on-background: "#F1F5F9"
-    border-color: "#334155"
+    foreground: "#F1F5F9"
+    card: "#1E293B"
+    card-foreground: "#F1F5F9"
+    popover: "#1E293B"
+    popover-foreground: "#F1F5F9"
+    border: "#334155"
+    input: "#334155"
 
 intensity:
   variance: 3     # structured grids, predictable zig-zag layouts, controlled hierarchy

package/gsp/skills/gsp-style/styles/flat-design.yml

@@ -5,18 +5,44 @@ trend_ref: trends/flat-design.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FFFFFF"
+    foreground: "#212121"
+    card: "#FAFAFA"
+    card-foreground: "#212121"
+    popover: "#FAFAFA"
+    popover-foreground: "#212121"
     primary: "#2196F3"
+    primary-foreground: "#FFFFFF"
     secondary: "#4CAF50"
+    secondary-foreground: "#FFFFFF"
     accent: "#FF9800"
-    background: "#FFFFFF"
-    surface: "#FAFAFA"
-    on-primary: "#FFFFFF"
-    on-background: "#212121"
-    error: "#F44336"
+    accent-foreground: "#FFFFFF"
+    muted: "#9E9E9E"
+    muted-foreground: "#616161"
+    destructive: "#F44336"
+    border: "transparent"
+    input: "transparent"
+    ring: "#2196F3"
+    # Sidebar
+    sidebar: "#FAFAFA"
+    sidebar-foreground: "#212121"
+    sidebar-primary: "#2196F3"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#F5F5F5"
+    sidebar-accent-foreground: "#212121"
+    sidebar-border: "transparent"
+    sidebar-ring: "#2196F3"
+    # Extras
     success: "#4CAF50"
     warning: "#FF9800"
     info: "#2196F3"
-    muted: "#9E9E9E"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#2196F3"  # flat blue (primary)
+    chart-2: "#4CAF50"  # flat green (secondary)
+    chart-3: "#FF9800"  # flat orange (accent)
+    chart-4: "#9C27B0"  # flat purple
+    chart-5: "#F44336"  # flat red
 
   typography:
     font-family-primary: "Outfit, Open Sans, sans-serif"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "8px"
     border-radius-lg: "12px"
     border-width: "0px"
-    border-color: "transparent"
 
   elevation:
     shadow-sm: "none"
@@ -51,8 +76,13 @@ tokens:
 dark_mode:
   color:
     background: "#212121"
-    surface: "#303030"
-    on-background: "#FAFAFA"
+    foreground: "#FAFAFA"
+    card: "#303030"
+    card-foreground: "#FAFAFA"
+    popover: "#303030"
+    popover-foreground: "#FAFAFA"
+    border: "transparent"
+    input: "transparent"
 
 intensity:
   variance: 3     # rigid grid, predictable layout, geometric purity

package/gsp/skills/gsp-style/styles/fluent.yml

@@ -5,18 +5,44 @@ trend_ref: trends/fluent.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#F5F5F5"
+    foreground: "#242424"
+    card: "#FFFFFF"
+    card-foreground: "#242424"
+    popover: "#FFFFFF"
+    popover-foreground: "#242424"
     primary: "#0F6CBD"
+    primary-foreground: "#FFFFFF"
     secondary: "#115EA3"
+    secondary-foreground: "#FFFFFF"
     accent: "#0C3B5E"
-    background: "#F5F5F5"
-    surface: "#FFFFFF"
-    on-primary: "#FFFFFF"
-    on-background: "#242424"
-    error: "#C4314B"
+    accent-foreground: "#FFFFFF"
+    muted: "#616161"
+    muted-foreground: "#9E9E9E"
+    destructive: "#C4314B"
+    border: "#E0E0E0"
+    input: "#E0E0E0"
+    ring: "#0F6CBD"
+    # Sidebar
+    sidebar: "#FFFFFF"
+    sidebar-foreground: "#242424"
+    sidebar-primary: "#0F6CBD"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#F0F0F0"
+    sidebar-accent-foreground: "#242424"
+    sidebar-border: "#E0E0E0"
+    sidebar-ring: "#0F6CBD"
+    # Extras
     success: "#0E7A0D"
     warning: "#F7630C"
     info: "#0F6CBD"
-    muted: "#616161"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#0F6CBD"  # Fluent blue (primary)
+    chart-2: "#0E7A0D"  # Fluent green (success)
+    chart-3: "#F7630C"  # Fluent orange (warning)
+    chart-4: "#881798"  # Fluent purple
+    chart-5: "#038387"  # Fluent teal
 
   typography:
     font-family-primary: "Segoe UI Variable, Segoe UI, system-ui, sans-serif"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "8px"
     border-radius-lg: "12px"
     border-width: "1px"
-    border-color: "#E0E0E0"
 
   elevation:
     shadow-sm: "0 1px 2px rgba(0,0,0,0.12)"
@@ -55,9 +80,13 @@ tokens:
 dark_mode:
   color:
     background: "#292929"
-    surface: "#1F1F1F"
-    on-background: "#FFFFFF"
-    border-color: "#404040"
+    foreground: "#FFFFFF"
+    card: "#1F1F1F"
+    card-foreground: "#FFFFFF"
+    popover: "#1F1F1F"
+    popover-foreground: "#FFFFFF"
+    border: "#404040"
+    input: "#404040"
 
 intensity:
   variance: 2     # strict grid alignment, consistent density, OS-level predictability

package/gsp/skills/gsp-style/styles/glassmorphism.yml

@@ -5,17 +5,44 @@ trend_ref: trends/glassmorphism.md
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#0F172A"
+    foreground: "#F8FAFC"
+    card: "oklch(100% 0 0 / 0.12)"
+    card-foreground: "#F8FAFC"
+    popover: "oklch(100% 0 0 / 0.12)"
+    popover-foreground: "#F8FAFC"
     primary: "#6366F1"
+    primary-foreground: "#FFFFFF"
     secondary: "#8B5CF6"
+    secondary-foreground: "#FFFFFF"
     accent: "#EC4899"
-    background: "#0F172A"
-    surface: "rgba(255, 255, 255, 0.12)"
-    on-primary: "#FFFFFF"
-    on-background: "#F8FAFC"
-    error: "#EF4444"
+    accent-foreground: "#FFFFFF"
+    muted: "oklch(100% 0 0 / 0.08)"
+    muted-foreground: "#94A3B8"
+    destructive: "#EF4444"
+    border: "oklch(100% 0 0 / 0.20)"
+    input: "oklch(100% 0 0 / 0.20)"
+    ring: "#6366F1"
+    # Sidebar
+    sidebar: "oklch(100% 0 0 / 0.08)"
+    sidebar-foreground: "#F8FAFC"
+    sidebar-primary: "#6366F1"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "oklch(100% 0 0 / 0.12)"
+    sidebar-accent-foreground: "#F8FAFC"
+    sidebar-border: "oklch(100% 0 0 / 0.20)"
+    sidebar-ring: "#6366F1"
+    # Extras
     success: "#22C55E"
     warning: "#F59E0B"
     info: "#3B82F6"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#818CF8"  # frosted indigo (primary brightened)
+    chart-2: "#A78BFA"  # frosted violet (secondary brightened)
+    chart-3: "#F472B6"  # frosted pink (accent brightened)
+    chart-4: "#34D399"  # frosted emerald
+    chart-5: "#60A5FA"  # frosted blue
 
   typography:
     font-family-primary: "Inter, sans-serif"
@@ -30,7 +57,6 @@ tokens:
     border-radius-md: "16px"
     border-radius-lg: "24px"
     border-width: "1px"
-    border-color: "rgba(255, 255, 255, 0.20)"
 
   elevation:
     shadow-sm: "0 4px 16px rgba(31, 38, 135, 0.15)"
@@ -57,8 +83,13 @@ tokens:
 dark_mode:
   color:
     background: "#020617"
-    surface: "rgba(255, 255, 255, 0.08)"
-    on-background: "#E2E8F0"
+    foreground: "#E2E8F0"
+    card: "oklch(100% 0 0 / 0.08)"
+    card-foreground: "#E2E8F0"
+    popover: "oklch(100% 0 0 / 0.08)"
+    popover-foreground: "#E2E8F0"
+    border: "oklch(100% 0 0 / 0.15)"
+    input: "oklch(100% 0 0 / 0.15)"
 
 intensity:
   variance: 5