@uncinq/design-tokens 1.0.3 → 1.1.1

package/README.md

@@ -138,7 +138,7 @@ The property mirrors the CSS property name — `background-color`, `border-color
 | `duration` | Animation timing | `--duration-fast` |
 | `easing` | Timing functions | `--easing-bounce` |
 | `transition` | Shorthand transitions | `--transition-normal`, `--transition-color` |
-| `ratio` | Aspect ratios | `--ratio-16-9` |
+| `ratio` | Aspect ratios | `--ratio-video` |
 | `fluid-text` | Responsive fluid type scale (Utopia) | `--fluid-text-sm`, `--fluid-text-xl` |
 | `fluid-spacing` | Responsive fluid spacing scale (Utopia) | `--fluid-spacing-sm`, `--fluid-spacing-lg` |
 | `focus` | Focus ring tokens | `--focus-color`, `--focus-outline-width` |
@@ -232,7 +232,7 @@ Semantic tokens are named by **purpose**, not by value. They reference primitive
 The default brand is **sienna** — a warm brick-red. Override it in your project:
 
 ```css
-@layer config {
+@layer tokens {
   :root {
     --color-brand:        var(--color-violet-600);
     --color-brand-muted:  var(--color-violet-100);
@@ -327,7 +327,7 @@ Add a new primitive scale in `tokens/primitive/color.css` following the existing
 --color-coral-950: oklch(0.225 0.078 35.0);
 ```
 
-Then reference it in `tokens/semantic/color.css` or your project's `@layer config` override.
+Then reference it in `tokens/semantic/color.css` or your project's `@layer tokens` override.
 
 ---
 
@@ -337,12 +337,12 @@ Two approaches are available depending on how deep the override needs to go.
 
 ### 1 — CSS override (recommended)
 
-All tokens live in `@layer config`, the lowest-priority layer in the stack. Any `@layer config` block imported **after** this package wins by source order — no specificity tricks needed.
+All tokens live in `@layer tokens`, the lowest-priority layer in the stack. Any `@layer tokens` block imported **after** this package wins by source order — no specificity tricks needed.
 
 ```css
 @import '@uncinq/design-tokens';
 
-@layer config {
+@layer tokens {
   :root {
     --color-brand:        var(--color-violet-600);
     --color-brand-muted:  var(--color-violet-100);
@@ -382,7 +382,7 @@ Use this approach to:
 
 | Need | Approach |
 | --- | --- |
-| Change brand, typography, a few tokens | CSS `@layer config` |
+| Change brand, typography, a few tokens | CSS `@layer tokens` |
 | Redefine the entire primitive palette | JSON + build |
 | Add project-specific tokens | JSON + build (or CSS if few) |
 

package/dist/css/index.css

@@ -1,10 +1,3 @@
-/* @uncinq/design-tokens — index.css */
-/*
- * Imports all layers in order: primitives first, then semantic.
- * Use this file to get everything, or import primitive.css / semantic.css individually.
- *
- * Usage:
- *   @import '@uncinq/design-tokens/tokens/index.css';
- */
-@import 'primitive.css';
-@import 'semantic.css';
+@import "./primitive.css";
+@import "./semantic.css";
+@import "./themes/dark.css";

package/dist/css/primitive/blur.css

@@ -3,7 +3,7 @@
  */
 
 /* primitive/blur.css */
-@layer config {
+@layer tokens {
   :root {
     --blur-xs: 2px;
     --blur-sm: 4px;

package/dist/css/primitive/color.css

@@ -3,22 +3,22 @@
  */
 
 /* primitive/color.css */
-@layer config {
+@layer tokens {
   :root {
     --color-black: oklch(0 0 0);
     --color-white: oklch(1 0 0);
     --color-amber-50: oklch(0.987 0.022 95.277);
     --color-amber-100: oklch(0.962 0.059 95.617);
-    --color-amber-200: oklch(0.924 0.120 95.746);
+    --color-amber-200: oklch(0.924 0.12 95.746);
     --color-amber-300: oklch(0.879 0.169 91.605);
     --color-amber-400: oklch(0.828 0.189 84.429);
-    --color-amber-500: oklch(0.769 0.188 70.080);
+    --color-amber-500: oklch(0.769 0.188 70.08);
     --color-amber-600: oklch(0.666 0.179 58.318);
     --color-amber-700: oklch(0.555 0.163 48.998);
     --color-amber-800: oklch(0.473 0.137 46.201);
     --color-amber-900: oklch(0.414 0.112 45.904);
     --color-amber-950: oklch(0.279 0.077 45.635);
-    --color-blue-50: oklch(0.970 0.014 254.604);
+    --color-blue-50: oklch(0.97 0.014 254.604);
     --color-blue-100: oklch(0.932 0.032 255.585);
     --color-blue-200: oklch(0.882 0.059 254.128);
     --color-blue-300: oklch(0.809 0.105 251.813);
@@ -31,52 +31,52 @@
     --color-blue-950: oklch(0.282 0.091 267.935);
     --color-cyan-50: oklch(0.984 0.019 200.873);
     --color-cyan-100: oklch(0.956 0.045 203.388);
-    --color-cyan-200: oklch(0.917 0.080 205.041);
+    --color-cyan-200: oklch(0.917 0.08 205.041);
     --color-cyan-300: oklch(0.865 0.127 207.078);
-    --color-cyan-400: oklch(0.789 0.154 211.530);
+    --color-cyan-400: oklch(0.789 0.154 211.53);
     --color-cyan-500: oklch(0.715 0.143 215.221);
     --color-cyan-600: oklch(0.609 0.126 221.723);
-    --color-cyan-700: oklch(0.520 0.105 223.128);
-    --color-cyan-800: oklch(0.450 0.085 224.283);
-    --color-cyan-900: oklch(0.398 0.070 227.392);
+    --color-cyan-700: oklch(0.52 0.105 223.128);
+    --color-cyan-800: oklch(0.45 0.085 224.283);
+    --color-cyan-900: oklch(0.398 0.07 227.392);
     --color-cyan-950: oklch(0.302 0.056 229.695);
     --color-emerald-50: oklch(0.979 0.021 166.113);
-    --color-emerald-100: oklch(0.950 0.052 163.051);
-    --color-emerald-200: oklch(0.905 0.093 164.150);
+    --color-emerald-100: oklch(0.95 0.052 163.051);
+    --color-emerald-200: oklch(0.905 0.093 164.15);
     --color-emerald-300: oklch(0.845 0.143 164.978);
     --color-emerald-400: oklch(0.765 0.177 163.223);
-    --color-emerald-500: oklch(0.696 0.170 162.480);
+    --color-emerald-500: oklch(0.696 0.17 162.48);
     --color-emerald-600: oklch(0.596 0.145 163.225);
     --color-emerald-700: oklch(0.508 0.118 165.612);
     --color-emerald-800: oklch(0.432 0.095 166.913);
-    --color-emerald-900: oklch(0.378 0.077 168.940);
+    --color-emerald-900: oklch(0.378 0.077 168.94);
     --color-emerald-950: oklch(0.262 0.051 172.552);
     --color-fuchsia-50: oklch(0.977 0.017 320.058);
     --color-fuchsia-100: oklch(0.952 0.037 318.852);
     --color-fuchsia-200: oklch(0.903 0.076 319.062);
     --color-fuchsia-300: oklch(0.833 0.145 321.434);
-    --color-fuchsia-400: oklch(0.740 0.238 322.160);
-    --color-fuchsia-500: oklch(0.667 0.295 322.150);
+    --color-fuchsia-400: oklch(0.74 0.238 322.16);
+    --color-fuchsia-500: oklch(0.667 0.295 322.15);
     --color-fuchsia-600: oklch(0.591 0.293 322.896);
     --color-fuchsia-700: oklch(0.518 0.253 323.949);
     --color-fuchsia-800: oklch(0.452 0.211 324.591);
-    --color-fuchsia-900: oklch(0.401 0.170 325.612);
+    --color-fuchsia-900: oklch(0.401 0.17 325.612);
     --color-fuchsia-950: oklch(0.293 0.136 325.661);
     --color-gray-50: oklch(0.985 0.002 247.839);
     --color-gray-100: oklch(0.967 0.003 264.542);
     --color-gray-200: oklch(0.928 0.006 264.531);
-    --color-gray-300: oklch(0.872 0.010 258.338);
+    --color-gray-300: oklch(0.872 0.01 258.338);
     --color-gray-400: oklch(0.707 0.022 261.325);
     --color-gray-500: oklch(0.556 0.022 264.364);
-    --color-gray-600: oklch(0.439 0.020 264.531);
+    --color-gray-600: oklch(0.439 0.02 264.531);
     --color-gray-700: oklch(0.373 0.014 264.542);
-    --color-gray-800: oklch(0.279 0.010 264.542);
+    --color-gray-800: oklch(0.279 0.01 264.542);
     --color-gray-900: oklch(0.208 0.006 264.542);
     --color-gray-950: oklch(0.145 0.005 264.542);
     --color-green-50: oklch(0.982 0.018 155.826);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-200: oklch(0.925 0.084 155.995);
-    --color-green-300: oklch(0.871 0.150 154.449);
+    --color-green-300: oklch(0.871 0.15 154.449);
     --color-green-400: oklch(0.792 0.209 151.711);
     --color-green-500: oklch(0.723 0.219 149.579);
     --color-green-600: oklch(0.627 0.194 149.214);
@@ -85,42 +85,42 @@
     --color-green-900: oklch(0.393 0.095 152.535);
     --color-green-950: oklch(0.266 0.065 152.934);
     --color-indigo-50: oklch(0.962 0.018 272.314);
-    --color-indigo-100: oklch(0.930 0.034 272.788);
-    --color-indigo-200: oklch(0.870 0.065 274.039);
+    --color-indigo-100: oklch(0.93 0.034 272.788);
+    --color-indigo-200: oklch(0.87 0.065 274.039);
     --color-indigo-300: oklch(0.785 0.115 274.713);
     --color-indigo-400: oklch(0.673 0.182 276.935);
     --color-indigo-500: oklch(0.585 0.233 277.117);
     --color-indigo-600: oklch(0.511 0.262 276.966);
-    --color-indigo-700: oklch(0.457 0.240 277.023);
+    --color-indigo-700: oklch(0.457 0.24 277.023);
     --color-indigo-800: oklch(0.398 0.195 277.366);
     --color-indigo-900: oklch(0.359 0.144 278.697);
-    --color-indigo-950: oklch(0.257 0.090 281.288);
+    --color-indigo-950: oklch(0.257 0.09 281.288);
     --color-lime-50: oklch(0.986 0.031 120.757);
     --color-lime-100: oklch(0.967 0.067 122.328);
     --color-lime-200: oklch(0.938 0.127 124.321);
     --color-lime-300: oklch(0.897 0.196 126.665);
-    --color-lime-400: oklch(0.841 0.238 128.850);
-    --color-lime-500: oklch(0.768 0.233 130.850);
-    --color-lime-600: oklch(0.648 0.200 131.684);
+    --color-lime-400: oklch(0.841 0.238 128.85);
+    --color-lime-500: oklch(0.768 0.233 130.85);
+    --color-lime-600: oklch(0.648 0.2 131.684);
     --color-lime-700: oklch(0.532 0.157 131.589);
     --color-lime-800: oklch(0.453 0.124 130.933);
     --color-lime-900: oklch(0.405 0.101 131.063);
     --color-lime-950: oklch(0.274 0.072 132.109);
-    --color-orange-50: oklch(0.980 0.016 73.684);
+    --color-orange-50: oklch(0.98 0.016 73.684);
     --color-orange-100: oklch(0.954 0.038 75.164);
     --color-orange-200: oklch(0.901 0.076 70.697);
-    --color-orange-300: oklch(0.837 0.128 66.290);
-    --color-orange-400: oklch(0.750 0.183 55.934);
+    --color-orange-300: oklch(0.837 0.128 66.29);
+    --color-orange-400: oklch(0.75 0.183 55.934);
     --color-orange-500: oklch(0.705 0.213 47.604);
     --color-orange-600: oklch(0.646 0.222 41.116);
     --color-orange-700: oklch(0.553 0.195 38.402);
-    --color-orange-800: oklch(0.470 0.157 37.304);
+    --color-orange-800: oklch(0.47 0.157 37.304);
     --color-orange-900: oklch(0.408 0.123 38.172);
     --color-orange-950: oklch(0.266 0.079 36.259);
     --color-pink-50: oklch(0.971 0.014 343.198);
     --color-pink-100: oklch(0.948 0.028 342.258);
     --color-pink-200: oklch(0.899 0.061 343.231);
-    --color-pink-300: oklch(0.823 0.120 346.018);
+    --color-pink-300: oklch(0.823 0.12 346.018);
     --color-pink-400: oklch(0.718 0.202 349.761);
     --color-pink-500: oklch(0.656 0.241 354.308);
     --color-pink-600: oklch(0.592 0.249 0.584);
@@ -133,13 +133,13 @@
     --color-purple-200: oklch(0.902 0.063 306.703);
     --color-purple-300: oklch(0.827 0.119 306.383);
     --color-purple-400: oklch(0.714 0.203 305.504);
-    --color-purple-500: oklch(0.627 0.265 303.900);
+    --color-purple-500: oklch(0.627 0.265 303.9);
     --color-purple-600: oklch(0.558 0.288 302.321);
     --color-purple-700: oklch(0.496 0.265 301.924);
     --color-purple-800: oklch(0.438 0.218 303.724);
     --color-purple-900: oklch(0.381 0.176 304.987);
     --color-purple-950: oklch(0.291 0.149 302.717);
-    --color-red-50: oklch(0.971 0.013 17.380);
+    --color-red-50: oklch(0.971 0.013 17.38);
     --color-red-100: oklch(0.936 0.032 17.717);
     --color-red-200: oklch(0.885 0.062 18.334);
     --color-red-300: oklch(0.808 0.114 19.571);
@@ -151,45 +151,45 @@
     --color-red-900: oklch(0.396 0.141 25.723);
     --color-red-950: oklch(0.258 0.092 26.042);
     --color-rose-50: oklch(0.969 0.015 12.422);
-    --color-rose-100: oklch(0.941 0.030 12.580);
+    --color-rose-100: oklch(0.941 0.03 12.58);
     --color-rose-200: oklch(0.892 0.058 10.001);
-    --color-rose-300: oklch(0.810 0.101 2.432);
+    --color-rose-300: oklch(0.81 0.101 2.432);
     --color-rose-400: oklch(0.712 0.194 13.428);
     --color-rose-500: oklch(0.645 0.246 16.439);
     --color-rose-600: oklch(0.586 0.253 17.585);
     --color-rose-700: oklch(0.514 0.222 16.935);
     --color-rose-800: oklch(0.455 0.188 13.697);
-    --color-rose-900: oklch(0.410 0.159 10.272);
+    --color-rose-900: oklch(0.41 0.159 10.272);
     --color-rose-950: oklch(0.271 0.105 12.094);
-    --color-sienna-50: oklch(0.973 0.012 22.0);
+    --color-sienna-50: oklch(0.973 0.012 22);
     --color-sienna-100: oklch(0.945 0.028 22.5);
-    --color-sienna-200: oklch(0.900 0.060 23.5);
-    --color-sienna-300: oklch(0.832 0.108 25.0);
-    --color-sienna-400: oklch(0.727 0.160 25.5);
-    --color-sienna-500: oklch(0.630 0.198 24.0);
-    --color-sienna-600: oklch(0.530 0.195 22.0);
-    --color-sienna-700: oklch(0.450 0.170 20.0);
-    --color-sienna-800: oklch(0.380 0.136 18.0);
-    --color-sienna-900: oklch(0.322 0.106 16.0);
-    --color-sienna-950: oklch(0.218 0.072 15.0);
-    --color-sky-50: oklch(0.977 0.013 236.620);
+    --color-sienna-200: oklch(0.9 0.06 23.5);
+    --color-sienna-300: oklch(0.832 0.108 25);
+    --color-sienna-400: oklch(0.727 0.16 25.5);
+    --color-sienna-500: oklch(0.63 0.198 24);
+    --color-sienna-600: oklch(0.53 0.195 22);
+    --color-sienna-700: oklch(0.45 0.17 20);
+    --color-sienna-800: oklch(0.38 0.136 18);
+    --color-sienna-900: oklch(0.322 0.106 16);
+    --color-sienna-950: oklch(0.218 0.072 15);
+    --color-sky-50: oklch(0.977 0.013 236.62);
     --color-sky-100: oklch(0.951 0.026 236.824);
     --color-sky-200: oklch(0.901 0.058 230.902);
     --color-sky-300: oklch(0.828 0.111 230.318);
-    --color-sky-400: oklch(0.746 0.160 232.661);
+    --color-sky-400: oklch(0.746 0.16 232.661);
     --color-sky-500: oklch(0.685 0.169 237.323);
     --color-sky-600: oklch(0.588 0.158 241.966);
-    --color-sky-700: oklch(0.500 0.134 242.749);
-    --color-sky-800: oklch(0.443 0.110 240.790);
-    --color-sky-900: oklch(0.391 0.090 240.876);
+    --color-sky-700: oklch(0.5 0.134 242.749);
+    --color-sky-800: oklch(0.443 0.11 240.79);
+    --color-sky-900: oklch(0.391 0.09 240.876);
     --color-sky-950: oklch(0.293 0.066 243.157);
-    --color-teal-50: oklch(0.984 0.014 180.720);
+    --color-teal-50: oklch(0.984 0.014 180.72);
     --color-teal-100: oklch(0.953 0.051 180.801);
-    --color-teal-200: oklch(0.910 0.096 180.426);
+    --color-teal-200: oklch(0.91 0.096 180.426);
     --color-teal-300: oklch(0.855 0.138 181.071);
     --color-teal-400: oklch(0.777 0.152 181.912);
-    --color-teal-500: oklch(0.704 0.140 182.503);
-    --color-teal-600: oklch(0.600 0.118 184.704);
+    --color-teal-500: oklch(0.704 0.14 182.503);
+    --color-teal-600: oklch(0.6 0.118 184.704);
     --color-teal-700: oklch(0.511 0.096 186.391);
     --color-teal-800: oklch(0.437 0.078 188.216);
     --color-teal-900: oklch(0.386 0.063 188.416);
@@ -199,15 +199,15 @@
     --color-violet-200: oklch(0.894 0.057 293.283);
     --color-violet-300: oklch(0.811 0.111 293.571);
     --color-violet-400: oklch(0.702 0.183 293.541);
-    --color-violet-500: oklch(0.606 0.250 292.717);
+    --color-violet-500: oklch(0.606 0.25 292.717);
     --color-violet-600: oklch(0.541 0.281 293.009);
-    --color-violet-700: oklch(0.491 0.270 292.581);
+    --color-violet-700: oklch(0.491 0.27 292.581);
     --color-violet-800: oklch(0.432 0.232 292.222);
-    --color-violet-900: oklch(0.380 0.189 293.745);
+    --color-violet-900: oklch(0.38 0.189 293.745);
     --color-violet-950: oklch(0.283 0.141 291.089);
     --color-yellow-50: oklch(0.987 0.026 102.212);
     --color-yellow-100: oklch(0.973 0.071 103.193);
-    --color-yellow-200: oklch(0.945 0.129 101.540);
+    --color-yellow-200: oklch(0.945 0.129 101.54);
     --color-yellow-300: oklch(0.905 0.182 98.111);
     --color-yellow-400: oklch(0.852 0.199 91.936);
     --color-yellow-500: oklch(0.795 0.184 86.047);

package/dist/css/primitive/font.css

@@ -3,7 +3,7 @@
  */
 
 /* primitive/font.css */
-@layer config {
+@layer tokens {
   :root {
     --font-family-mono: ui-monospace, monospace;
     --font-family-sans: system-ui, sans-serif;

package/dist/css/primitive/shadow.css

@@ -3,7 +3,7 @@
  */
 
 /* primitive/shadow.css */
-@layer config {
+@layer tokens {
   :root {
     --shadow-none: 0 0 0 0 transparent;
     --shadow-sm: 0 1px 2px 0 var(--color-shadow-normal), 0 1px 1px -1px var(--color-shadow-normal);

package/dist/css/primitive/size.css

@@ -3,7 +3,7 @@
  */
 
 /* primitive/size.css */
-@layer config {
+@layer tokens {
   :root {
     --size-1: 0.0625rem;
     --size-2: 0.125rem;
@@ -32,7 +32,9 @@
     --size-28: 1.75rem;
     --size-30: 1.875rem;
     --size-32: 2rem;
+    --size-36: 2.25rem;
     --size-40: 2.5rem;
+    --size-44: 2.75rem;
     --size-48: 3rem;
     --size-50: 3.125rem;
     --size-52: 3.25rem;
@@ -41,11 +43,15 @@
     --size-64: 4rem;
     --size-68: 4.25rem;
     --size-72: 4.5rem;
+    --size-76: 4.75rem;
     --size-80: 5rem;
-    --size-88: 5.5rem;
     --size-96: 6rem;
     --size-100: 6.25rem;
+    --size-112: 7rem;
+    --size-128: 8rem;
+    --size-144: 9rem;
     --size-150: 9.375rem;
+    --size-160: 10rem;
     --size-768: 48rem;
     --size-1024: 64rem;
     --size-1200: 75rem;

package/dist/css/primitive.css

@@ -1,8 +1,6 @@
-/* @uncinq/design-tokens — primitive.css */
-@layer config;
-
-@import 'primitive/blur.css';
-@import 'primitive/color.css';
-@import 'primitive/font.css';
-@import 'primitive/shadow.css';
-@import 'primitive/size.css';
+/* primitive.css — barrel, do not edit */
+@import "./primitive/blur.css";
+@import "./primitive/color.css";
+@import "./primitive/font.css";
+@import "./primitive/shadow.css";
+@import "./primitive/size.css";

package/dist/css/semantic/blur.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/blur.css */
-@layer config {
+@layer tokens {
   :root {
     --blur-backdrop: var(--blur-sm);
   }

package/dist/css/semantic/border.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/border.css */
-@layer config {
+@layer tokens {
   :root {
     --border-style-normal: solid;
     --border-width-none: 0px;

package/dist/css/semantic/color.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/color.css */
-@layer config {
+@layer tokens {
   :root {
     --color-accent: var(--color-sienna-600);
     --color-accent-hover: var(--color-sienna-700);
@@ -80,20 +80,4 @@
     --color-warning-muted: var(--color-amber-100);
     --color-warning-strong: var(--color-amber-700);
   }
-
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-color-scheme="light"]) {
-      --color-background: var(--color-gray-950);
-      --color-background-media: var(--color-gray-800);
-      --color-background-muted: var(--color-gray-900);
-      --color-background-muted-hover: var(--color-gray-800);
-      --color-border: var(--color-gray-800);
-      --color-heading: var(--color-white);
-      --color-shadow: var(--color-white);
-      --color-text: var(--color-gray-200);
-      --color-text-disabled: var(--color-gray-600);
-      --color-text-hover: var(--color-gray-300);
-      --color-text-muted: var(--color-gray-400);
-    }
-  }
 }

package/dist/css/semantic/focus.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/focus.css */
-@layer config {
+@layer tokens {
   :root {
     --focus-color-outline: var(--color-focus);
     --focus-outline-offset: 2px;

package/dist/css/semantic/form.css

@@ -3,15 +3,18 @@
  */
 
 /* semantic/form.css */
-@layer config {
+@layer tokens {
   :root {
     --form-border-radius: var(--radius-xs);
     --form-border-width: var(--border-width-sm);
-    --form-color-accent: var(--color-black);
+    --form-color-accent: var(--color-accent);
+    --form-color-accent-hover: var(--color-accent-hover);
+    --form-color-accent-muted: var(--color-accent-muted);
     --form-color-background: var(--color-white);
     --form-color-border: var(--color-border);
     --form-color-border-hover: var(--color-border-hover);
     --form-color-text: var(--color-text);
+    --form-color-text-on-accent: var(--color-text-on-accent);
     --form-padding: var(--spacing-control);
     --form-shadow: var(--shadow-control);
     --form-shadow-hover: var(--shadow-control-hover);
@@ -25,7 +28,8 @@
     --input-color-text: var(--form-color-text);
     --input-padding: var(--form-padding);
     --file-button-margin-inline-end: var(--size-12);
-    --file-button-padding: var(--size-8) var(--size-12);
+    --file-button-padding-block: var(--size-6);
+    --file-button-padding-inline: var(--size-10);
     --textarea-border-radius: var(--form-border-radius);
     --textarea-border-width: var(--form-border-width);
     --textarea-color-background: var(--form-color-background);
@@ -100,10 +104,4 @@
     --switch-track-color-checked: var(--form-color-accent);
     --switch-width: var(--size-40);
   }
-
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-color-scheme="light"]) {
-      --form-color-background: var(--color-gray-900);
-    }
-  }
 }

package/dist/css/semantic/grid.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/grid.css */
-@layer config {
+@layer tokens {
   :root {
     --columns: 12;
     --gap: var(--spacing-md);

package/dist/css/semantic/icon.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/icon.css */
-@layer config {
+@layer tokens {
   :root {
     --icon-size: var(--size-16);
     --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><line x1=%222%22 y1=%228%22 x2=%2212%22 y2=%228%22/><polyline points=%228 4 12 8 8 12%22/></svg>');
@@ -11,6 +11,7 @@
     --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%222 5 8 11 14 5%22/></svg>');
     --icon-close: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%223%22 y1=%223%22 x2=%2213%22 y2=%2213%22/><line x1=%2213%22 y1=%223%22 x2=%223%22 y2=%2213%22/></svg>');
     --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 height=%2216%22 width=%2214%22 viewBox=%220 0 448 512%22><path d=%22M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z%22/></svg>');
+    --icon-external-link: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10 2h4v4%22/><path d=%22M6.7 9.3 14 2%22/><path d=%22M12 8.7v4a1.3 1.3 0 0 1-1.3 1.3H3.3a1.3 1.3 0 0 1-1.3-1.3V5.3a1.3 1.3 0 0 1 1.3-1.3h4%22/></svg>');
     --icon-filter: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M1.3 3.3h13.4%22/><path d=%22M4 8h8%22/><path d=%22M6 12.7h4%22/></svg>');
     --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%222%22 y1=%224%22 x2=%2214%22 y2=%224%22/><line x1=%222%22 y1=%228%22 x2=%2214%22 y2=%228%22/><line x1=%222%22 y1=%2212%22 x2=%2214%22 y2=%2212%22/></svg>');
     --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22%23000000%22 stroke-width=%221%22 stroke-linecap=%22round%22><line x1=%228%22 y1=%223%22 x2=%228%22 y2=%2213%22/><line x1=%223%22 y1=%228%22 x2=%2213%22 y2=%228%22/></svg>');

package/dist/css/semantic/motion.css

@@ -3,20 +3,20 @@
  */
 
 /* semantic/motion.css */
-@layer config {
+@layer tokens {
   :root {
     --duration-fast: 150ms;
     --duration-normal: 300ms;
     --duration-slow: 600ms;
-    --easing-linear: linear;
-    --easing: ease-in-out;
-    --easing-in: ease-in;
-    --easing-out: ease-out;
+    --easing: var(--easing-in-out);
+    --easing-linear: cubic-bezier(0, 0, 1, 1);
+    --easing-in: cubic-bezier(0.42, 0, 1, 1);
+    --easing-out: cubic-bezier(0, 0, 0.58, 1);
+    --easing-in-out: cubic-bezier(0.42, 0, 0.58, 1);
     --easing-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
     --easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
     --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
     --easing-bounce: cubic-bezier(0.165, 0.84, 0.44, 1);
-    --easing-spring: linear(0, 0.006, 0.025 2.8%, 0.101, 0.197, 0.325, 0.474, 0.638, 0.806, 0.962, 1.065, 1.12, 1.14, 1.12 30.9%, 1.034, 0.997, 0.986, 0.998, 1);
     --transition-fast: all var(--duration-fast) var(--easing);
     --transition-normal: all var(--duration-normal) var(--easing);
     --transition-slow: all var(--duration-slow) var(--easing);

package/dist/css/semantic/opacity.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/opacity.css */
-@layer config {
+@layer tokens {
   :root {
     --opacity-backdrop: 0.5;
     --opacity-disabled: 0.5;

package/dist/css/semantic/radius.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/radius.css */
-@layer config {
+@layer tokens {
   :root {
     --radius-2xs: var(--size-2);
     --radius-xs: var(--size-4);

package/dist/css/semantic/ratio.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/ratio.css */
-@layer config {
+@layer tokens {
   :root {
     --ratio-cinema: 21 / 9;
     --ratio-hero: 4 / 1;
@@ -11,6 +11,7 @@
     --ratio-photography: 3 / 2;
     --ratio-portrait: 3 / 4;
     --ratio-print: 5 / 4;
+    --ratio-social: 4 / 5;
     --ratio-square: 1 / 1;
     --ratio-story: 9 / 16;
     --ratio-video: 16 / 9;

package/dist/css/semantic/shadow.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/shadow.css */
-@layer config {
+@layer tokens {
   :root {
     --shadow-control: var(--shadow-none);
     --shadow-control-hover: var(--shadow-none);

package/dist/css/semantic/size.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/size.css */
-@layer config {
+@layer tokens {
   :root {
     --size-tablet: var(--size-768);
     --size-tablet-wide: var(--size-1024);

package/dist/css/semantic/spacing.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/spacing.css */
-@layer config {
+@layer tokens {
   :root {
     --spacing-2xs: var(--size-5);
     --spacing-xs: var(--size-10);

package/dist/css/semantic/typography.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/typography.css */
-@layer config {
+@layer tokens {
   :root {
     --font-family-code: var(--font-family-mono);
     --font-family-heading: var(--font-family-sans);

package/dist/css/semantic/z-index.css

@@ -3,7 +3,7 @@
  */
 
 /* semantic/z-index.css */
-@layer config {
+@layer tokens {
   :root {
     --z-index-below: -1;
     --z-index-base: 0;