themelia-ui 3.0.0 → 3.2.0

package/dist/tokens.json

@@ -1,9 +1,10 @@
 {
   "$description": "themelia-ui design tokens in the W3C Design Tokens (DTCG) format.",
-  "palette": {
-    "$type": "color",
-    "neutral": {
-      "0": {
+  "theme": {
+    "light": {
+      "background": {
+        "$description": "The page and the app shell.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -14,242 +15,209 @@
           "hex": "#ffffff"
         }
       },
-      "25": {
+      "foreground": {
+        "$description": "Primary text and icons.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.99,
+            0.28,
             0,
             0
           ],
-          "hex": "#fcfcfc"
+          "hex": "#292929"
         }
       },
-      "50": {
+      "card": {
+        "$description": "Framed regions: cards, table frames, panels.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.985,
+            1,
             0,
             0
           ],
-          "hex": "#fafafa"
+          "hex": "#ffffff"
         }
       },
-      "75": {
+      "card-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.98,
+            0.28,
             0,
             0
           ],
-          "hex": "#f8f8f8"
+          "hex": "#292929"
         }
       },
-      "100": {
+      "popover": {
+        "$description": "Anchored popups, menus, palettes, toasts.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.97,
+            1,
             0,
             0
           ],
-          "hex": "#f5f5f5"
+          "hex": "#ffffff"
         }
       },
-      "150": {
+      "popover-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.96,
+            0.28,
             0,
             0
           ],
-          "hex": "#f2f2f2"
+          "hex": "#292929"
         }
       },
-      "200": {
+      "muted": {
+        "$description": "Wells and placeholders.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.922,
+            0.97,
             0,
             0
           ],
-          "hex": "#e5e5e5"
+          "hex": "#f5f5f5"
         }
       },
-      "400": {
+      "muted-foreground": {
+        "$description": "Supporting text.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.708,
+            0.5,
             0,
             0
           ],
-          "hex": "#a1a1a1"
+          "hex": "#636363"
         }
       },
-      "500": {
+      "accent": {
+        "$description": "The one hover and current fill.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.556,
+            0.97,
             0,
             0
           ],
-          "hex": "#737373"
+          "hex": "#f5f5f5"
         }
       },
-      "550": {
+      "accent-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.5,
+            0.205,
             0,
             0
           ],
-          "hex": "#636363"
+          "hex": "#171717"
         }
       },
-      "700": {
+      "border": {
+        "$description": "Every divider and frame.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.36,
+            0.922,
             0,
             0
           ],
-          "hex": "#3d3d3d"
+          "hex": "#e5e5e5"
         }
       },
-      "750": {
+      "input": {
+        "$description": "Control frames.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.33,
+            0.73,
             0,
             0
           ],
-          "hex": "#353535"
+          "hex": "#a8a8a8"
         }
       },
-      "800": {
+      "ring": {
+        "$description": "Focus.",
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.28,
+            0.58,
             0,
             0
           ],
-          "hex": "#292929"
+          "hex": "#7a7a7a"
         }
       },
-      "850": {
+      "primary": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.25,
-            0,
-            0
+            0.45,
+            0.124,
+            167.35
           ],
-          "hex": "#222222"
+          "hex": "#006a47"
         }
       },
-      "875": {
+      "primary-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.23,
+            0.985,
             0,
             0
           ],
-          "hex": "#1d1d1d"
+          "hex": "#fafafa"
         }
       },
-      "900": {
+      "secondary": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.205,
+            0.97,
             0,
             0
           ],
-          "hex": "#171717"
+          "hex": "#f5f5f5"
         }
       },
-      "950": {
+      "secondary-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.16,
+            0.205,
             0,
             0
           ],
-          "hex": "#0d0d0d"
-        }
-      }
-    },
-    "brand": {
-      "300": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.72,
-            0.124,
-            167.35
-          ],
-          "hex": "#43bd95"
-        }
-      },
-      "350": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.7,
-            0.13,
-            167.35
-          ],
-          "hex": "#30b88e"
-        }
-      },
-      "600": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.45,
-            0.124,
-            167.35
-          ],
-          "hex": "#006a47"
-        }
-      },
-      "950": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.18,
-            0.03,
-            167.35
-          ],
-          "hex": "#03160f"
-        }
-      }
-    },
-    "danger": {
-      "400": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.704,
-            0.191,
-            22.216
-          ],
-          "hex": "#ff6467"
+          "hex": "#171717"
         }
       },
-      "600": {
+      "destructive": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -260,31 +228,20 @@
           "hex": "#ca0000"
         }
       },
-      "950": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.18,
-            0.05,
-            22
-          ],
-          "hex": "#230707"
-        }
-      }
-    },
-    "success": {
-      "400": {
+      "destructive-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.76,
-            0.16,
-            145
+            0.99,
+            0,
+            0
           ],
-          "hex": "#68cb6e"
+          "hex": "#fcfcfc"
         }
       },
-      "600": {
+      "success": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -295,66 +252,20 @@
           "hex": "#005b00"
         }
       },
-      "950": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.18,
-            0.05,
-            145
-          ],
-          "hex": "#021704"
-        }
-      }
-    },
-    "info": {
-      "400": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.72,
-            0.14,
-            250
-          ],
-          "hex": "#59aaf8"
-        }
-      },
-      "600": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.45,
-            0.214,
-            276.966
-          ],
-          "hex": "#4136c7"
-        }
-      },
-      "950": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.18,
-            0.05,
-            250
-          ],
-          "hex": "#001226"
-        }
-      }
-    },
-    "warning": {
-      "300": {
+      "success-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.82,
-            0.16,
-            90
+            0.985,
+            0,
+            0
           ],
-          "hex": "#ecbe24"
+          "hex": "#fafafa"
         }
       },
-      "500": {
+      "warning": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -365,18 +276,8 @@
           "hex": "#cb9e00"
         }
       },
-      "700": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.45,
-            0.12,
-            80
-          ],
-          "hex": "#774b00"
-        }
-      },
-      "900": {
+      "warning-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -387,31 +288,32 @@
           "hex": "#221300"
         }
       },
-      "950": {
+      "info": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.18,
-            0.05,
-            80
+            0.45,
+            0.214,
+            276.966
           ],
-          "hex": "#1d0e00"
+          "hex": "#4136c7"
         }
-      }
-    },
-    "link": {
-      "400": {
+      },
+      "info-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.72,
-            0.12,
-            259.13
+            0.99,
+            0,
+            0
           ],
-          "hex": "#76a5ef"
+          "hex": "#fcfcfc"
         }
       },
-      "600": {
+      "link": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -421,23 +323,9 @@
           ],
           "hex": "#0351b9"
         }
-      }
-    },
-    "violet": {
-      "500": {
-        "$value": {
-          "colorSpace": "oklch",
-          "components": [
-            0.488,
-            0.243,
-            264.376
-          ],
-          "hex": "#1447e6"
-        }
-      }
-    },
-    "series": {
-      "1": {
+      },
+      "chart-1": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -448,7 +336,8 @@
           "hex": "#148967"
         }
       },
-      "2": {
+      "chart-2": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -459,7 +348,8 @@
           "hex": "#077fa8"
         }
       },
-      "3": {
+      "chart-3": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -470,7 +360,8 @@
           "hex": "#6e60d2"
         }
       },
-      "4": {
+      "chart-4": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -481,7 +372,8 @@
           "hex": "#ad51a7"
         }
       },
-      "5": {
+      "chart-5": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -492,18 +384,791 @@
           "hex": "#bb6802"
         }
       },
-      "1-dark": {
+      "sidebar": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0.74,
-            0.13,
-            167
+            0.96,
+            0,
+            0
           ],
-          "hex": "#42c599"
+          "hex": "#f2f2f2"
+        }
+      },
+      "sidebar-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.28,
+            0,
+            0
+          ],
+          "hex": "#292929"
+        }
+      },
+      "sidebar-accent": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.98,
+            0,
+            0
+          ],
+          "hex": "#f8f8f8"
+        }
+      },
+      "sidebar-accent-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.205,
+            0,
+            0
+          ],
+          "hex": "#171717"
+        }
+      },
+      "sidebar-border": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.922,
+            0,
+            0
+          ],
+          "hex": "#e5e5e5"
+        }
+      },
+      "sidebar-ring": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.58,
+            0,
+            0
+          ],
+          "hex": "#7a7a7a"
+        }
+      },
+      "overlay-backdrop": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0,
+            0,
+            0
+          ],
+          "alpha": 0.5,
+          "hex": "#000000"
+        }
+      },
+      "shadow": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "color": {
+              "colorSpace": "oklch",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "alpha": 0.06,
+              "hex": "#000000"
+            },
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 1,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 2,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            }
+          },
+          {
+            "color": {
+              "colorSpace": "oklch",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "alpha": 0.06,
+              "hex": "#000000"
+            },
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 1,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 1,
+              "unit": "px"
+            },
+            "spread": {
+              "value": -1,
+              "unit": "px"
+            }
+          }
+        ]
+      },
+      "shadow-lg": {
+        "$type": "shadow",
+        "$value": [
+          {
+            "color": {
+              "colorSpace": "oklch",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "alpha": 0.1,
+              "hex": "#000000"
+            },
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 4,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 8,
+              "unit": "px"
+            },
+            "spread": {
+              "value": -2,
+              "unit": "px"
+            }
+          },
+          {
+            "color": {
+              "colorSpace": "oklch",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "alpha": 0.18,
+              "hex": "#000000"
+            },
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 12,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 24,
+              "unit": "px"
+            },
+            "spread": {
+              "value": -12,
+              "unit": "px"
+            }
+          }
+        ]
+      },
+      "z-sticky": {
+        "$description": "Sticky table headers and toolbars.",
+        "$type": "number",
+        "$value": 10
+      },
+      "z-docked": {
+        "$description": "A floating batch bar: above a sticky header, below any menu it opens.",
+        "$type": "number",
+        "$value": 20
+      },
+      "z-popover": {
+        "$description": "Menus, selects, popovers.",
+        "$type": "number",
+        "$value": 50
+      },
+      "z-toast": {
+        "$description": "Above a menu still open when a toast arrives.",
+        "$type": "number",
+        "$value": 100
+      },
+      "z-tooltip": {
+        "$description": "Always last: a tooltip may describe anything, a toast included.",
+        "$type": "number",
+        "$value": 1000
+      },
+      "sidebar-width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 16,
+          "unit": "rem"
+        }
+      },
+      "header-height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 3.5,
+          "unit": "rem"
+        }
+      },
+      "content-width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 64,
+          "unit": "rem"
+        }
+      },
+      "duration-fast": {
+        "$type": "duration",
+        "$value": {
+          "value": 150,
+          "unit": "ms"
+        }
+      },
+      "duration": {
+        "$type": "duration",
+        "$value": {
+          "value": 200,
+          "unit": "ms"
+        }
+      },
+      "ease": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.23,
+          1,
+          0.32,
+          1
+        ]
+      },
+      "disabled-opacity": {
+        "$type": "number",
+        "$value": 0.5
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "radius-sm": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
+      },
+      "radius-pill": {
+        "$type": "dimension",
+        "$value": {
+          "value": 999,
+          "unit": "px"
+        }
+      },
+      "border-width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "px"
+        }
+      },
+      "control-height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 2.125,
+          "unit": "rem"
+        }
+      },
+      "control-height-sm": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.875,
+          "unit": "rem"
+        }
+      },
+      "icon-size": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "icon-size-sm": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        }
+      },
+      "padding": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "padding-sm": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "gap-sm": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
+      },
+      "font-sans": {
+        "$type": "fontFamily",
+        "$value": [
+          "Geist",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "sans-serif"
+        ]
+      },
+      "font-mono": {
+        "$type": "fontFamily",
+        "$value": [
+          "Geist Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "SF Mono",
+          "Menlo",
+          "Consolas",
+          "Liberation Mono",
+          "monospace"
+        ]
+      },
+      "text-xs": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        }
+      },
+      "text-pxs": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.8125,
+          "unit": "rem"
+        }
+      },
+      "text-sm": {
+        "$description": "The default body size.",
+        "$type": "dimension",
+        "$value": {
+          "value": 0.875,
+          "unit": "rem"
+        }
+      },
+      "text-base": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "text-lg": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.125,
+          "unit": "rem"
+        }
+      },
+      "text-xl": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.25,
+          "unit": "rem"
+        }
+      },
+      "text-2xl": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        }
+      },
+      "text-scale": {
+        "$type": "number",
+        "$value": 1
+      }
+    },
+    "dark": {
+      "background": {
+        "$description": "The page and the app shell.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.205,
+            0,
+            0
+          ],
+          "hex": "#171717"
+        }
+      },
+      "foreground": {
+        "$description": "Primary text and icons.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
+        }
+      },
+      "card": {
+        "$description": "Framed regions: cards, table frames, panels.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.25,
+            0,
+            0
+          ],
+          "hex": "#222222"
+        }
+      },
+      "card-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
+        }
+      },
+      "popover": {
+        "$description": "Anchored popups, menus, palettes, toasts.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.28,
+            0,
+            0
+          ],
+          "hex": "#292929"
+        }
+      },
+      "popover-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
+        }
+      },
+      "muted": {
+        "$description": "Wells and placeholders.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.23,
+            0,
+            0
+          ],
+          "hex": "#1d1d1d"
+        }
+      },
+      "muted-foreground": {
+        "$description": "Supporting text.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.708,
+            0,
+            0
+          ],
+          "hex": "#a1a1a1"
+        }
+      },
+      "accent": {
+        "$description": "The one hover and current fill.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.33,
+            0,
+            0
+          ],
+          "hex": "#353535"
+        }
+      },
+      "accent-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
+        }
+      },
+      "border": {
+        "$description": "Every divider and frame.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            1,
+            0,
+            0
+          ],
+          "alpha": 0.1,
+          "hex": "#ffffff"
+        }
+      },
+      "input": {
+        "$description": "Control frames.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            1,
+            0,
+            0
+          ],
+          "alpha": 0.28,
+          "hex": "#ffffff"
+        }
+      },
+      "ring": {
+        "$description": "Focus.",
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.62,
+            0,
+            0
+          ],
+          "hex": "#868686"
+        }
+      },
+      "primary": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.7,
+            0.13,
+            167.35
+          ],
+          "hex": "#30b88e"
+        }
+      },
+      "primary-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.18,
+            0.03,
+            167.35
+          ],
+          "hex": "#03160f"
+        }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.25,
+            0,
+            0
+          ],
+          "hex": "#222222"
+        }
+      },
+      "secondary-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
+        }
+      },
+      "destructive": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.74,
+            0.158,
+            22.216
+          ],
+          "hex": "#ff7e7c"
+        }
+      },
+      "destructive-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.18,
+            0.05,
+            22
+          ],
+          "hex": "#230707"
+        }
+      },
+      "success": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.76,
+            0.16,
+            145
+          ],
+          "hex": "#68cb6e"
+        }
+      },
+      "success-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.18,
+            0.05,
+            145
+          ],
+          "hex": "#021704"
+        }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.82,
+            0.16,
+            90
+          ],
+          "hex": "#ecbe24"
+        }
+      },
+      "warning-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.18,
+            0.05,
+            80
+          ],
+          "hex": "#1d0e00"
+        }
+      },
+      "info": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.72,
+            0.14,
+            250
+          ],
+          "hex": "#59aaf8"
+        }
+      },
+      "info-foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.18,
+            0.05,
+            250
+          ],
+          "hex": "#001226"
+        }
+      },
+      "link": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.72,
+            0.12,
+            259.13
+          ],
+          "hex": "#76a5ef"
+        }
+      },
+      "chart-1": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "oklch",
+          "components": [
+            0.74,
+            0.13,
+            167
+          ],
+          "hex": "#42c599"
         }
       },
-      "2-dark": {
+      "chart-2": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -514,7 +1179,8 @@
           "hex": "#16b3eb"
         }
       },
-      "3-dark": {
+      "chart-3": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -525,7 +1191,8 @@
           "hex": "#9c95fe"
         }
       },
-      "4-dark": {
+      "chart-4": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -536,7 +1203,8 @@
           "hex": "#df86d7"
         }
       },
-      "5-dark": {
+      "chart-5": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
@@ -546,363 +1214,124 @@
           ],
           "hex": "#f8a052"
         }
-      }
-    },
-    "white": {
-      "a10": {
+      },
+      "sidebar": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            1,
+            0.16,
             0,
             0
           ],
-          "alpha": 0.1,
-          "hex": "#ffffff"
+          "hex": "#0d0d0d"
         }
       },
-      "a15": {
+      "sidebar-foreground": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            1,
+            0.985,
             0,
             0
           ],
-          "alpha": 0.15,
-          "hex": "#ffffff"
+          "hex": "#fafafa"
         }
-      }
-    },
-    "pure": {
-      "black": {
+      },
+      "sidebar-accent": {
+        "$type": "color",
         "$value": {
           "colorSpace": "oklch",
           "components": [
-            0,
+            0.28,
             0,
             0
           ],
-          "hex": "#000000"
-        }
-      }
-    }
-  },
-  "theme": {
-    "light": {
-      "background": {
-        "$description": "Application canvas and default page background.",
-        "$value": "{palette.neutral.0}"
-      },
-      "foreground": {
-        "$description": "Primary text and icon color on the application canvas.",
-        "$value": "{palette.neutral.800}"
-      },
-      "card": {
-        "$description": "Card and framed content-surface background.",
-        "$value": "{palette.neutral.0}"
-      },
-      "card-foreground": {
-        "$description": "Primary text and icons on card surfaces.",
-        "$value": "{palette.neutral.800}"
-      },
-      "popover": {
-        "$description": "Popover, menu, select, and transient-surface background.",
-        "$value": "{theme.light.background}"
-      },
-      "popover-foreground": {
-        "$description": "Primary text and icons on popover surfaces.",
-        "$value": "{theme.light.foreground}"
-      },
-      "primary": {
-        "$description": "Brand and primary-action color.",
-        "$value": "{palette.brand.600}"
-      },
-      "primary-foreground": {
-        "$description": "Text and icons on solid primary fills.",
-        "$value": "{palette.neutral.50}"
-      },
-      "secondary": {
-        "$description": "Neutral secondary-control and supporting-surface fill.",
-        "$value": "{palette.neutral.100}"
-      },
-      "secondary-foreground": {
-        "$description": "Text and icons on secondary fills.",
-        "$value": "{palette.neutral.900}"
-      },
-      "muted": {
-        "$description": "Subdued backgrounds for passive regions and skeletons.",
-        "$value": "{palette.neutral.100}"
-      },
-      "muted-foreground": {
-        "$description": "Secondary text, metadata, and passive icons.",
-        "$value": "{palette.neutral.550}"
-      },
-      "accent": {
-        "$description": "Hover, selected-row, and emphasized neutral fill.",
-        "$value": "{palette.neutral.100}"
-      },
-      "accent-foreground": {
-        "$description": "Text and icons on accent fills.",
-        "$value": "{palette.neutral.900}"
-      },
-      "destructive": {
-        "$description": "Destructive action, error, and invalid-state color.",
-        "$value": "{palette.danger.600}"
-      },
-      "destructive-foreground": {
-        "$description": "Text and icons on solid destructive fills.",
-        "$value": "{palette.neutral.25}"
-      },
-      "border": {
-        "$description": "Default divider, outline, and surface-border color.",
-        "$value": "{palette.neutral.200}"
-      },
-      "input": {
-        "$description": "Default form-control border color.",
-        "$value": "{palette.neutral.200}"
-      },
-      "ring": {
-        "$description": "Focus-visible ring and outline color.",
-        "$value": "{palette.neutral.400}"
-      },
-      "chart-1": {
-        "$description": "First categorical chart-series color; never a status color.",
-        "$value": "{palette.series.1}"
-      },
-      "chart-2": {
-        "$description": "Second categorical chart-series color; never a status color.",
-        "$value": "{palette.series.2}"
-      },
-      "chart-3": {
-        "$description": "Third categorical chart-series color; never a status color.",
-        "$value": "{palette.series.3}"
-      },
-      "chart-4": {
-        "$description": "Fourth categorical chart-series color; never a status color.",
-        "$value": "{palette.series.4}"
-      },
-      "chart-5": {
-        "$description": "Fifth categorical chart-series color; never a status color.",
-        "$value": "{palette.series.5}"
-      },
-      "radius": {
-        "$description": "The container radius — cards, dialogs, popovers, menus.",
-        "$type": "dimension",
-        "$value": {
-          "value": 1,
-          "unit": "rem"
-        }
-      },
-      "radius-sm": {
-        "$description": "Everything inside a container or smaller than one — controls, rows, chips, badges, tooltips.",
-        "$type": "dimension",
-        "$value": {
-          "value": 0.5,
-          "unit": "rem"
+          "hex": "#292929"
         }
       },
-      "border-width": {
-        "$description": "Default hairline weight for dividers, outlines, and control borders.",
-        "$type": "dimension",
+      "sidebar-accent-foreground": {
+        "$type": "color",
         "$value": {
-          "value": 1,
-          "unit": "px"
+          "colorSpace": "oklch",
+          "components": [
+            0.985,
+            0,
+            0
+          ],
+          "hex": "#fafafa"
         }
       },
-      "border-width-strong": {
-        "$description": "Emphasized rail weight for quote bars and active navigation indicators.",
-        "$type": "dimension",
+      "sidebar-border": {
+        "$type": "color",
         "$value": {
-          "value": 2,
-          "unit": "px"
+          "colorSpace": "oklch",
+          "components": [
+            1,
+            0,
+            0
+          ],
+          "alpha": 0.1,
+          "hex": "#ffffff"
         }
       },
-      "radius-pill": {
-        "$description": "Fully rounded ends for pills, switches, tracks, and status dots. True circles (avatars, radios) use 50%.",
-        "$type": "dimension",
+      "sidebar-ring": {
+        "$type": "color",
         "$value": {
-          "value": 999,
-          "unit": "px"
+          "colorSpace": "oklch",
+          "components": [
+            0.62,
+            0,
+            0
+          ],
+          "hex": "#868686"
         }
       },
-      "sidebar": {
-        "$description": "Sidebar shell background.",
-        "$value": "{palette.neutral.150}"
-      },
-      "sidebar-foreground": {
-        "$description": "Primary sidebar text and icon color.",
-        "$value": "{palette.neutral.800}"
-      },
-      "sidebar-primary": {
-        "$description": "Strong sidebar selection or primary action fill.",
-        "$value": "{palette.neutral.900}"
-      },
-      "sidebar-primary-foreground": {
-        "$description": "Text and icons on sidebar primary fills.",
-        "$value": "{palette.neutral.50}"
-      },
-      "sidebar-accent": {
-        "$description": "Sidebar hover and selected-row neutral fill.",
-        "$value": "{palette.neutral.75}"
-      },
-      "sidebar-accent-foreground": {
-        "$description": "Text and icons on sidebar accent fills.",
-        "$value": "{palette.neutral.900}"
-      },
-      "sidebar-border": {
-        "$description": "Sidebar dividers and shell border.",
-        "$value": "{palette.neutral.200}"
-      },
-      "sidebar-ring": {
-        "$description": "The sidebar's focus-ring seed, as --ring is the page's: sidebar surfaces mix it 70/30 toward --sidebar-foreground in light, read it unmixed in dark, and compose --focus-ring, --focus-ring-inset and --field-focus-ring from it.",
-        "$value": "{palette.neutral.400}"
-      },
-      "shadow-ink": {
-        "$description": "Ink every elevation tier tints with.",
-        "$value": "{palette.pure.black}"
-      },
-      "success": {
-        "$description": "Semantic success fill, border, and foreground accent.",
-        "$value": "{palette.success.600}"
-      },
-      "success-foreground": {
-        "$description": "Text and icons on solid success fills.",
-        "$value": "{palette.neutral.50}"
-      },
-      "info": {
-        "$description": "Semantic informational fill, border, and foreground accent.",
-        "$value": "{palette.info.600}"
-      },
-      "info-foreground": {
-        "$description": "Text and icons on solid informational fills.",
-        "$value": "{palette.neutral.25}"
-      },
-      "link-color": {
-        "$description": "Inline links and link-like copyable values.",
-        "$value": "{palette.link.600}"
-      },
-      "primary-accent": {
-        "$description": "Brand color drawn AS foreground — text, icons, spinners, active marks — on the app surface or a primary tint. Matches --primary here; in dark it steps one lighter than --primary, which is tuned as a fill for --primary-foreground ink. Read this, not --primary, wherever the brand is ink. Not shadcn's --accent, which is a muted hover surface.",
-        "$value": "{palette.brand.600}"
-      },
-      "warning": {
-        "$description": "Semantic warning fill, border, and foreground accent.",
-        "$value": "{palette.warning.500}"
-      },
-      "warning-foreground": {
-        "$description": "Text and icons on solid warning fills.",
-        "$value": "{palette.warning.900}"
-      },
-      "warning-accent": {
-        "$description": "Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber.",
-        "$value": "{palette.warning.700}"
-      },
-      "inverse-background": {
-        "$description": "Base background for explicit dark or artwork-backed surfaces.",
-        "$value": "{palette.neutral.800}"
-      },
-      "inverse-foreground": {
-        "$description": "Primary text and icons on inverse backgrounds.",
-        "$value": "{palette.neutral.50}"
-      }
-    },
-    "dark": {
-      "background": {
-        "$description": "Application canvas and default page background.",
-        "$value": "{palette.neutral.900}"
-      },
-      "foreground": {
-        "$description": "Primary text and icon color on the application canvas.",
-        "$value": "{palette.neutral.50}"
-      },
-      "card": {
-        "$description": "Card and framed content-surface background.",
-        "$value": "{palette.neutral.850}"
-      },
-      "card-foreground": {
-        "$description": "Primary text and icons on card surfaces.",
-        "$value": "{palette.neutral.50}"
-      },
-      "popover": {
-        "$description": "Popover, menu, select, and transient-surface background.",
-        "$value": "{palette.neutral.800}"
-      },
-      "popover-foreground": {
-        "$description": "Primary text and icons on popover surfaces.",
-        "$value": "{theme.dark.foreground}"
-      },
-      "primary": {
-        "$description": "Brand and primary-action color.",
-        "$value": "{palette.brand.350}"
-      },
-      "primary-foreground": {
-        "$description": "Text and icons on solid primary fills.",
-        "$value": "{palette.brand.950}"
-      },
-      "secondary": {
-        "$description": "Neutral secondary-control and supporting-surface fill.",
-        "$value": "{palette.neutral.850}"
-      },
-      "secondary-foreground": {
-        "$description": "Text and icons on secondary fills.",
-        "$value": "{palette.neutral.50}"
+      "overlay-backdrop": {
+        "$value": "{theme.light.overlay-backdrop}"
       },
-      "muted": {
-        "$description": "Subdued backgrounds for passive regions and skeletons.",
-        "$value": "{palette.neutral.875}"
+      "shadow": {
+        "$value": "{theme.light.shadow}"
       },
-      "muted-foreground": {
-        "$description": "Secondary text, metadata, and passive icons.",
-        "$value": "{palette.neutral.400}"
+      "shadow-lg": {
+        "$value": "{theme.light.shadow-lg}"
       },
-      "accent": {
-        "$description": "Hover, selected-row, and emphasized neutral fill.",
-        "$value": "{palette.neutral.750}"
+      "z-sticky": {
+        "$value": "{theme.light.z-sticky}"
       },
-      "accent-foreground": {
-        "$description": "Text and icons on accent fills.",
-        "$value": "{palette.neutral.50}"
+      "z-docked": {
+        "$value": "{theme.light.z-docked}"
       },
-      "destructive": {
-        "$description": "Destructive action, error, and invalid-state color.",
-        "$value": "{palette.danger.400}"
+      "z-popover": {
+        "$value": "{theme.light.z-popover}"
       },
-      "destructive-foreground": {
-        "$description": "Text and icons on solid destructive fills.",
-        "$value": "{palette.danger.950}"
+      "z-toast": {
+        "$value": "{theme.light.z-toast}"
       },
-      "border": {
-        "$description": "Default divider, outline, and surface-border color.",
-        "$value": "{palette.white.a10}"
+      "z-tooltip": {
+        "$value": "{theme.light.z-tooltip}"
       },
-      "input": {
-        "$description": "Default form-control border color.",
-        "$value": "{palette.white.a15}"
+      "sidebar-width": {
+        "$value": "{theme.light.sidebar-width}"
       },
-      "ring": {
-        "$description": "Focus-visible ring and outline color.",
-        "$value": "{palette.neutral.500}"
+      "header-height": {
+        "$value": "{theme.light.header-height}"
       },
-      "chart-1": {
-        "$description": "First categorical chart-series color; never a status color.",
-        "$value": "{palette.series.1-dark}"
+      "content-width": {
+        "$value": "{theme.light.content-width}"
       },
-      "chart-2": {
-        "$description": "Second categorical chart-series color; never a status color.",
-        "$value": "{palette.series.2-dark}"
+      "duration-fast": {
+        "$value": "{theme.light.duration-fast}"
       },
-      "chart-3": {
-        "$description": "Third categorical chart-series color; never a status color.",
-        "$value": "{palette.series.3-dark}"
+      "duration": {
+        "$value": "{theme.light.duration}"
       },
-      "chart-4": {
-        "$description": "Fourth categorical chart-series color; never a status color.",
-        "$value": "{palette.series.4-dark}"
+      "ease": {
+        "$value": "{theme.light.ease}"
       },
-      "chart-5": {
-        "$description": "Fifth categorical chart-series color; never a status color.",
-        "$value": "{palette.series.5-dark}"
+      "disabled-opacity": {
+        "$value": "{theme.light.disabled-opacity}"
       },
       "radius": {
         "$value": "{theme.light.radius}"
@@ -910,116 +1339,78 @@
       "radius-sm": {
         "$value": "{theme.light.radius-sm}"
       },
-      "border-width": {
-        "$value": "{theme.light.border-width}"
-      },
-      "border-width-strong": {
-        "$value": "{theme.light.border-width-strong}"
-      },
       "radius-pill": {
         "$value": "{theme.light.radius-pill}"
       },
-      "sidebar": {
-        "$description": "Sidebar shell background.",
-        "$value": "{palette.neutral.950}"
-      },
-      "sidebar-foreground": {
-        "$description": "Primary sidebar text and icon color.",
-        "$value": "{palette.neutral.50}"
+      "border-width": {
+        "$value": "{theme.light.border-width}"
       },
-      "sidebar-primary": {
-        "$description": "Strong sidebar selection or primary action fill.",
-        "$value": "{palette.neutral.50}"
+      "control-height": {
+        "$value": "{theme.light.control-height}"
       },
-      "sidebar-primary-foreground": {
-        "$description": "Text and icons on sidebar primary fills.",
-        "$value": "{palette.neutral.900}"
+      "control-height-sm": {
+        "$value": "{theme.light.control-height-sm}"
       },
-      "sidebar-accent": {
-        "$description": "Sidebar hover and selected-row neutral fill.",
-        "$value": "{palette.neutral.800}"
+      "icon-size": {
+        "$value": "{theme.light.icon-size}"
       },
-      "sidebar-accent-foreground": {
-        "$description": "Text and icons on sidebar accent fills.",
-        "$value": "{palette.neutral.50}"
+      "icon-size-sm": {
+        "$value": "{theme.light.icon-size-sm}"
       },
-      "sidebar-border": {
-        "$description": "Sidebar dividers and shell border.",
-        "$value": "{palette.white.a10}"
+      "padding": {
+        "$value": "{theme.light.padding}"
       },
-      "sidebar-ring": {
-        "$description": "The sidebar's focus-ring seed, as --ring is the page's: sidebar surfaces mix it 70/30 toward --sidebar-foreground in light, read it unmixed in dark, and compose --focus-ring, --focus-ring-inset and --field-focus-ring from it.",
-        "$value": "{palette.neutral.500}"
+      "padding-sm": {
+        "$value": "{theme.light.padding-sm}"
       },
-      "shadow-ink": {
-        "$value": "{theme.light.shadow-ink}"
+      "gap": {
+        "$value": "{theme.light.gap}"
       },
-      "success": {
-        "$description": "Semantic success fill, border, and foreground accent.",
-        "$value": "{palette.success.400}"
+      "gap-sm": {
+        "$value": "{theme.light.gap-sm}"
       },
-      "success-foreground": {
-        "$description": "Text and icons on solid success fills.",
-        "$value": "{palette.success.950}"
+      "font-sans": {
+        "$value": "{theme.light.font-sans}"
       },
-      "info": {
-        "$description": "Semantic informational fill, border, and foreground accent.",
-        "$value": "{palette.info.400}"
+      "font-mono": {
+        "$value": "{theme.light.font-mono}"
       },
-      "info-foreground": {
-        "$description": "Text and icons on solid informational fills.",
-        "$value": "{palette.info.950}"
+      "text-xs": {
+        "$value": "{theme.light.text-xs}"
       },
-      "link-color": {
-        "$description": "Inline links and link-like copyable values.",
-        "$value": "{palette.link.400}"
+      "text-pxs": {
+        "$value": "{theme.light.text-pxs}"
       },
-      "primary-accent": {
-        "$description": "Brand color drawn AS foreground — text, icons, spinners, active marks — on the app surface or a primary tint. Matches --primary here; in dark it steps one lighter than --primary, which is tuned as a fill for --primary-foreground ink. Read this, not --primary, wherever the brand is ink. Not shadcn's --accent, which is a muted hover surface.",
-        "$value": "{palette.brand.300}"
+      "text-sm": {
+        "$value": "{theme.light.text-sm}"
       },
-      "warning": {
-        "$description": "Semantic warning fill, border, and foreground accent.",
-        "$value": "{palette.warning.300}"
+      "text-base": {
+        "$value": "{theme.light.text-base}"
       },
-      "warning-foreground": {
-        "$description": "Text and icons on solid warning fills.",
-        "$value": "{palette.warning.950}"
+      "text-lg": {
+        "$value": "{theme.light.text-lg}"
       },
-      "warning-accent": {
-        "$description": "Warning colour drawn AS foreground — icons and marks — on a tinted warning surface. Darkens here and brightens in dark, where --warning stays a light fill so solid warning chips keep the amber.",
-        "$value": "{palette.warning.300}"
+      "text-xl": {
+        "$value": "{theme.light.text-xl}"
       },
-      "inverse-background": {
-        "$value": "{theme.light.inverse-background}"
+      "text-2xl": {
+        "$value": "{theme.light.text-2xl}"
       },
-      "inverse-foreground": {
-        "$value": "{theme.light.inverse-foreground}"
+      "text-scale": {
+        "$value": "{theme.light.text-scale}"
       }
     }
   },
   "$extensions": {
     "org.themelia-ui": {
       "skipped": [
-        "--shadow-2xs: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-xs: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-sm: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-md: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-lg: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-xl: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--shadow-2xl: multi-layer shadow with a color-mix colour — DTCG has no equivalent",
-        "--destructive-accent: light: no DTCG type fits color-mix(in oklab, var(--destructive) 85%, var(--foreground))",
-        "--inverse-muted: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 74%, transparent)",
-        "--inverse-subtle: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 58%, transparent)",
-        "--inverse-disabled: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 42%, transparent)",
-        "--inverse-surface: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 12%, transparent)",
-        "--inverse-surface-strong: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 22%, transparent)",
-        "--inverse-border: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 18%, transparent)",
-        "--inverse-decoration: light: no DTCG type fits color-mix(in oklab, var(--neutral-50) 6%, transparent)"
+        "--tint: no DTCG type fits 10%",
+        "--tint-strong: no DTCG type fits 30%",
+        "--overlay-backdrop-filter: no DTCG type fits none",
+        "--font-heading: unset by default"
       ],
-      "outOfGamutColors": 8,
-      "note": "calc() is resolved to a literal, so a derived dimension no longer follows the token it derives from. Shadows are absent: DTCG cannot express a color-mix."
+      "outOfGamutColors": 6,
+      "note": "Each colour is one CSS variable holding both modes as light-dark(); here it is a token per mode. Every other variable is the same in both modes, so theme.dark aliases theme.light."
     }
   }
 }