@uncinq/design-tokens 0.4.0 → 1.0.0

package/{tokens → dist/css}/primitive.css

@@ -4,6 +4,5 @@
 @import 'primitive/blur.css';
 @import 'primitive/color.css';
 @import 'primitive/font.css';
-@import 'primitive/opacity.css';
 @import 'primitive/shadow.css';
 @import 'primitive/size.css';

package/{tokens → dist/css}/semantic/blur.css

@@ -1,3 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 /* semantic/blur.css */
 @layer config {
   :root {

package/dist/css/semantic/border.css

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/border.css */
+@layer config {
+  :root {
+    --border-style-normal: solid;
+    --border-width-none: 0px;
+    --border-width-sm: 1px;
+    --border-width-md: 2px;
+    --border-width-lg: 4px;
+  }
+}

package/dist/css/semantic/color.css

@@ -0,0 +1,99 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/color.css */
+@layer config {
+  :root {
+    --color-accent: var(--color-sienna-600);
+    --color-accent-hover: var(--color-sienna-700);
+    --color-accent-muted: var(--color-sienna-100);
+    --color-accent-strong: var(--color-sienna-900);
+    --color-active: var(--color-accent);
+    --color-backdrop: oklch(from var(--color-black) l c h / var(--opacity-backdrop));
+    --color-background: var(--color-white);
+    --color-background-accent: var(--color-accent);
+    --color-background-disabled: var(--color-gray-100);
+    --color-background-media: var(--color-gray-200);
+    --color-background-muted: var(--color-gray-100);
+    --color-background-muted-hover: var(--color-gray-200);
+    --color-background-surface: var(--color-background);
+    --color-border: var(--color-gray-200);
+    --color-border-hover: var(--color-gray-500);
+    --color-brand: var(--color-sienna-600);
+    --color-brand-hover: var(--color-sienna-700);
+    --color-brand-muted: var(--color-sienna-100);
+    --color-brand-strong: var(--color-sienna-900);
+    --color-credit: var(--color-text-muted);
+    --color-danger: var(--color-red-600);
+    --color-danger-hover: var(--color-red-700);
+    --color-danger-muted: var(--color-red-100);
+    --color-danger-strong: var(--color-red-800);
+    --color-dark: var(--color-gray-900);
+    --color-dark-hover: var(--color-black);
+    --color-dark-muted: var(--color-gray-100);
+    --color-dark-strong: var(--color-black);
+    --color-focus: var(--color-text);
+    --color-heading: var(--color-black);
+    --color-info: var(--color-blue-600);
+    --color-info-hover: var(--color-blue-700);
+    --color-info-muted: var(--color-blue-100);
+    --color-info-strong: var(--color-blue-800);
+    --color-light: var(--color-gray-200);
+    --color-light-hover: var(--color-gray-300);
+    --color-light-muted: var(--color-gray-100);
+    --color-light-strong: var(--color-gray-700);
+    --color-link: var(--color-text);
+    --color-link-active: var(--color-active);
+    --color-link-hover: var(--color-accent);
+    --color-primary: var(--color-brand);
+    --color-primary-hover: var(--color-brand-hover);
+    --color-primary-muted: var(--color-brand-muted);
+    --color-primary-strong: var(--color-brand-strong);
+    --color-secondary: var(--color-gray-600);
+    --color-secondary-hover: var(--color-gray-700);
+    --color-secondary-muted: var(--color-gray-100);
+    --color-secondary-strong: var(--color-gray-800);
+    --color-shadow: var(--color-black);
+    --color-shadow-normal: oklch(from var(--color-shadow) l c h / var(--opacity-shadow));
+    --color-success: var(--color-green-600);
+    --color-success-hover: var(--color-green-700);
+    --color-success-muted: var(--color-green-100);
+    --color-success-strong: var(--color-green-800);
+    --color-text: var(--color-gray-900);
+    --color-text-disabled: var(--color-gray-300);
+    --color-text-hover: var(--color-gray-700);
+    --color-text-muted: var(--color-gray-500);
+    --color-text-on-accent: var(--color-white);
+    --color-text-on-brand: var(--color-white);
+    --color-text-on-danger: var(--color-white);
+    --color-text-on-dark: var(--color-white);
+    --color-text-on-info: var(--color-white);
+    --color-text-on-light: var(--color-gray-900);
+    --color-text-on-primary: var(--color-white);
+    --color-text-on-secondary: var(--color-white);
+    --color-text-on-success: var(--color-white);
+    --color-text-on-surface: var(--color-text);
+    --color-text-on-warning: var(--color-gray-900);
+    --color-warning: var(--color-amber-500);
+    --color-warning-hover: var(--color-amber-600);
+    --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

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/focus.css */
+@layer config {
+  :root {
+    --focus-color: var(--color-focus);
+    --focus-outline-offset: 2px;
+    --focus-outline-style: solid;
+    --focus-outline-width: 1px;
+  }
+}

package/dist/css/semantic/form.css

@@ -0,0 +1,109 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/form.css */
+@layer config {
+  :root {
+    --form-border-radius: var(--radius-xs);
+    --form-border-width: var(--border-width-sm);
+    --form-color-accent: var(--color-black);
+    --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-padding: var(--spacing-control);
+    --form-shadow: var(--shadow-control);
+    --form-shadow-hover: var(--shadow-control-hover);
+    --form-transition: var(--transition-normal);
+    --input-border-radius: var(--form-border-radius);
+    --input-border-width: var(--form-border-width);
+    --input-color-background: var(--form-color-background);
+    --input-color-border: var(--form-color-border);
+    --input-color-border-hover: var(--form-color-border-hover);
+    --input-color-placeholder: var(--color-text-muted);
+    --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);
+    --textarea-border-radius: var(--form-border-radius);
+    --textarea-border-width: var(--form-border-width);
+    --textarea-color-background: var(--form-color-background);
+    --textarea-color-border: var(--form-color-border);
+    --textarea-color-border-hover: var(--form-color-border-hover);
+    --textarea-color-placeholder: var(--color-text-muted);
+    --textarea-color-text: var(--form-color-text);
+    --textarea-min-height: 5lh;
+    --textarea-padding: var(--form-padding);
+    --select-border-radius: var(--form-border-radius);
+    --select-border-width: var(--form-border-width);
+    --select-color-background: var(--form-color-background);
+    --select-color-border: var(--form-color-border);
+    --select-color-border-hover: var(--form-color-border-hover);
+    --select-color-optgroup: var(--color-text-muted);
+    --select-color-text: var(--form-color-text);
+    --select-icon: var(--icon-chevron);
+    --select-icon-size: var(--icon-size);
+    --select-padding: var(--form-padding);
+    --select-padding-end: 2rem;
+    --label-color-text: var(--form-color-text);
+    --label-font-size: var(--font-size-xs);
+    --label-font-weight: var(--font-weight-medium);
+    --label-padding-inline: 0;
+    --label-padding-block: var(--spacing-2xs);
+    --label-text-transform: uppercase;
+    --help-color-text: var(--color-text-muted);
+    --help-font-size: var(--font-size-xs);
+    --help-font-weight: var(--font-weight-normal);
+    --help-margin: 0;
+    --checkable-color: var(--form-color-accent);
+    --checkable-size: 1.25em;
+    --checkbox-border-radius: 0;
+    --checkbox-border-width: var(--form-border-width);
+    --checkbox-color-background: var(--form-color-background);
+    --checkbox-color-background-checked: var(--form-color-background);
+    --checkbox-color-background-hover: var(--form-color-background);
+    --checkbox-color-border: var(--form-color-border);
+    --checkbox-color-border-checked: var(--checkable-color);
+    --checkbox-color-border-hover: var(--form-color-border-hover);
+    --checkbox-label-padding: 0 0 0 .3125rem;
+    --checkbox-mask-checked: var(--icon-tick) center no-repeat;
+    --checkbox-mask-indeterminate: var(--icon-dash) center no-repeat;
+    --checkbox-scale-checked: 0.7;
+    --radio-border-radius: var(--radius-pill);
+    --radio-border-width: var(--form-border-width);
+    --radio-border-width-checked: var(--border-width-md);
+    --radio-color-background: var(--form-color-background);
+    --radio-color-background-checked: var(--checkable-color);
+    --radio-color-background-hover: var(--form-color-background);
+    --radio-color-border: var(--form-color-border);
+    --radio-color-border-checked: var(--checkable-color);
+    --radio-color-border-hover: var(--form-color-border-hover);
+    --radio-label-padding: 0 0 0 .3125rem;
+    --radio-scale-checked: 0.5;
+    --range-thumb-border-width: var(--size-4);
+    --range-thumb-border-color: var(--color-white);
+    --range-thumb-color: var(--form-color-accent);
+    --range-thumb-size: var(--size-24);
+    --range-track-color: var(--form-color-border);
+    --range-track-height: calc(var(--border-width-sm) + 2px);
+    --switch-border-radius: var(--radius-pill);
+    --switch-border-width: var(--form-border-width);
+    --switch-color-background: var(--form-color-background);
+    --switch-color-background-checked: var(--form-color-background);
+    --switch-color-background-hover: var(--form-color-background);
+    --switch-color-border: var(--form-color-border);
+    --switch-thumb-color: var(--form-color-accent);
+    --switch-thumb-color-checked: var(--form-color-background);
+    --switch-thumb-scale: 0.6;
+    --switch-track-color: var(--form-color-background);
+    --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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/grid.css */
+@layer config {
+  :root {
+    --columns: 12;
+    --gap: var(--spacing-md);
+    --span-full: 1 / -1;
+    --span-half: span calc(var(--columns) / 2);
+    --span-quarter: span calc(var(--columns) / 4);
+    --span-third: span calc(var(--columns) / 3);
+  }
+}

package/dist/css/semantic/icon.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/icon.css */
+@layer config {
+  :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>');
+    --icon-arrow-skip: 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=%2210%22 y2=%228%22/><polyline points=%226 4 10 8 6 12%22/><line x1=%2214%22 y1=%223%22 x2=%2214%22 y2=%2213%22/></svg>');
+    --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-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>');
+    --icon-share: 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=%22M8 1.3v8.7%22/><path d=%22m10.7 4-2.7-2.7-2.7 2.7%22/><path d=%22M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3%22/></svg>');
+    --icon-tick: 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=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>');
+    --icon-toc: 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.7 3.3H2%22/><path d=%22M10.7 8H2%22/><path d=%22M10.7 12.7H2%22/><path d=%22M14 3.3h.01%22/><path d=%22M14 8h.01%22/><path d=%22M14 12.7h.01%22/></svg>');
+  }
+}

package/dist/css/semantic/motion.css

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/motion.css */
+@layer config {
+  :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-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);
+    --transition-opacity: opacity var(--duration-normal) var(--easing);
+    --transition-transform: transform var(--duration-normal) var(--easing);
+    --transition-property-color: color, background-color, border-color, outline-color, fill, stroke, text-decoration;
+    --transition-color: color var(--duration-normal) var(--easing), background-color var(--duration-normal) var(--easing), border-color var(--duration-normal) var(--easing), outline-color var(--duration-normal) var(--easing), fill var(--duration-normal) var(--easing), stroke var(--duration-normal) var(--easing), text-decoration var(--duration-normal) var(--easing);
+  }
+}

package/dist/css/semantic/opacity.css

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/opacity.css */
+@layer config {
+  :root {
+    --opacity-backdrop: 0.5;
+    --opacity-disabled: 0.5;
+    --opacity-hover: 0.75;
+    --opacity-overlay: 0.75;
+    --opacity-shadow: 0.1;
+    --opacity-subtle: 0.35;
+  }
+}

package/dist/css/semantic/radius.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/radius.css */
+@layer config {
+  :root {
+    --radius-2xs: var(--size-2);
+    --radius-xs: var(--size-4);
+    --radius-sm: var(--size-8);
+    --radius-md: var(--size-12);
+    --radius-lg: var(--size-16);
+    --radius-xl: var(--size-24);
+    --radius-2xl: var(--size-32);
+    --radius-none: 0px;
+    --radius-control: var(--radius-sm);
+    --radius-surface: var(--radius-md);
+    --radius-pill: 9999px;
+  }
+}

package/dist/css/semantic/ratio.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/ratio.css */
+@layer config {
+  :root {
+    --ratio-cinema: 21 / 9;
+    --ratio-hero: 4 / 1;
+    --ratio-landscape: 4 / 3;
+    --ratio-photography: 3 / 2;
+    --ratio-portrait: 3 / 4;
+    --ratio-print: 5 / 4;
+    --ratio-square: 1 / 1;
+    --ratio-story: 9 / 16;
+    --ratio-video: 16 / 9;
+  }
+}

package/dist/css/semantic/shadow.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/shadow.css */
+@layer config {
+  :root {
+    --shadow-control: var(--shadow-none);
+    --shadow-control-hover: var(--shadow-none);
+    --shadow-surface: var(--shadow-sm);
+  }
+}

package/dist/css/semantic/size.css

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/size.css */
+@layer config {
+  :root {
+    --size-tablet: var(--size-768);
+    --size-tablet-wide: var(--size-1024);
+    --size-laptop: var(--size-1440);
+    --size-desktop: var(--size-1600);
+    --size-desktop-wide: var(--size-1920);
+  }
+}

package/dist/css/semantic/spacing.css

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/spacing.css */
+@layer config {
+  :root {
+    --spacing-2xs: var(--size-5);
+    --spacing-xs: var(--size-10);
+    --spacing-sm: var(--size-20);
+    --spacing-md: var(--size-30);
+    --spacing-lg: var(--size-40);
+    --spacing-xl: var(--size-60);
+    --spacing-2xl: var(--size-100);
+    --spacing-3xl: var(--size-150);
+    --spacing-fluid-2xs: clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem);
+    --spacing-fluid-xs: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
+    --spacing-fluid-sm: clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem);
+    --spacing-fluid-md: clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem);
+    --spacing-fluid-lg: clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem);
+    --spacing-fluid-xl: clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem);
+    --spacing-fluid-2xl: clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem);
+    --spacing-card: var(--spacing-sm);
+    --spacing-control: var(--spacing-xs);
+    --spacing-heading: var(--spacing-fluid-sm);
+    --spacing-section: var(--spacing-fluid-2xl);
+    --spacing-surface: var(--spacing-fluid-sm);
+    --spacing-typography: var(--spacing-fluid-xs);
+  }
+}

package/dist/css/semantic/typography.css

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/typography.css */
+@layer config {
+  :root {
+    --font-family-code: var(--font-family-mono);
+    --font-family-heading: var(--font-family-sans);
+    --font-family-text: var(--font-family-sans);
+    --font-weight-control: var(--font-weight-medium);
+    --font-weight-heading: var(--font-weight-bold);
+    --font-weight-text: var(--font-weight-normal);
+    --line-height-heading: var(--line-height-tight);
+    --line-height-text: var(--line-height-normal);
+    --font-size-2xs: var(--size-12);
+    --font-size-xs: var(--size-14);
+    --font-size-sm: var(--size-16);
+    --font-size-md: var(--size-18);
+    --font-size-lg: var(--size-24);
+    --font-size-xl: var(--size-48);
+    --font-size-2xl: var(--size-64);
+    --font-size-display: var(--size-96);
+    --font-size-fluid-2xs: clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem);
+    --font-size-fluid-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
+    --font-size-fluid-sm: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
+    --font-size-fluid-md: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
+    --font-size-fluid-lg: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
+    --font-size-fluid-xl: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
+    --font-size-fluid-2xl: clamp(3rem, 2.7143rem + 1.4286vw, 4rem);
+    --font-size-fluid-display: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);
+    --font-size-heading-01: var(--font-size-fluid-xl);
+    --font-size-heading-02: var(--font-size-fluid-lg);
+    --font-size-heading-03: var(--font-size-fluid-md);
+    --font-size-heading-04: var(--font-size-fluid-sm);
+    --font-size-heading-05: var(--font-size-fluid-sm);
+    --font-size-heading-06: var(--font-size-fluid-sm);
+    --font-size-small: var(--font-size-fluid-sm);
+    --font-size-text: var(--font-size-fluid-md);
+    --letter-spacing-none: 0em;
+    --letter-spacing-sm: 0.025em;
+    --letter-spacing-md: 0.05em;
+    --letter-spacing-lg: 0.1em;
+    --letter-spacing-xl: 0.2em;
+    --max-width-heading: 50ch;
+    --max-width-paragraph: 70ch;
+  }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* semantic/z-index.css */
+@layer config {
+  :root {
+    --z-index-below: -1;
+    --z-index-base: 0;
+    --z-index-raised: 10;
+    --z-index-dropdown: 100;
+    --z-index-sticky: 200;
+    --z-index-drawer: 300;
+    --z-index-modal: 400;
+    --z-index-toast: 500;
+    --z-index-tooltip: 600;
+  }
+}

package/{tokens → dist/css}/semantic.css

@@ -18,5 +18,3 @@
 @import 'semantic/spacing.css';
 @import 'semantic/typography.css';
 @import 'semantic/z-index.css';
-
-@import 'semantic/dark.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uncinq/design-tokens",
-  "version": "0.4.0",
-  "description": "Framework-agnostic CSS design tokens — primitive and semantic layers.",
+  "version": "1.0.0",
+  "description": "Framework-agnostic design tokens — JSON DTCG primitive and semantic — CSS custom properties.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,23 +13,34 @@
     "url": "https://uncinq.dev/"
   },
   "keywords": [
-    "design-tokens",
     "css",
     "custom-properties",
-    "design-system"
+    "design-system",
+    "design-tokens",
+    "dtcg",
+    "tokens"
   ],
   "files": [
+    "dist/css/",
     "tokens/"
   ],
   "exports": {
-    ".": "./tokens/index.css",
-    "./tokens/index.css": "./tokens/index.css",
-    "./tokens/primitive.css": "./tokens/primitive.css",
-    "./tokens/semantic.css": "./tokens/semantic.css",
-    "./tokens/primitive/*": "./tokens/primitive/*",
-    "./tokens/semantic/*": "./tokens/semantic/*"
+    ".": "./dist/css/index.css",
+    "./css/index.css": "./dist/css/index.css",
+    "./css/primitive.css": "./dist/css/primitive.css",
+    "./css/semantic.css": "./dist/css/semantic.css",
+    "./css/primitive/*": "./dist/css/primitive/*",
+    "./css/semantic/*": "./dist/css/semantic/*",
+    "./tokens/*": "./tokens/*"
+  },
+  "style": "./dist/css/index.css",
+  "type": "module",
+  "scripts": {
+    "build": "style-dictionary build --config style-dictionary.config.js"
+  },
+  "devDependencies": {
+    "style-dictionary": "^5.0.0"
   },
-  "style": "./tokens/index.css",
   "publishConfig": {
     "access": "public"
   }

package/tokens/primitive/blur.json

@@ -0,0 +1,24 @@
+{
+  "blur": {
+    "xs": {
+      "$value": "2px",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "32px",
+      "$type": "dimension"
+    }
+  }
+}