@fusion.dev/helix-styles 0.0.0-dev

package/dist/primitives.css

@@ -0,0 +1,110 @@
+/* primitives.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
+:root,
+[data-helix-theme] {
+  --_helix-seed-brand: var(--helix-seed-brand, oklch(0.539 0.19 258));
+  --helix-seed-accent-hue: 180;
+  --_helix-seed-accent: var(
+    --helix-seed-accent,
+    oklch(from var(--_helix-seed-brand) l c calc(h + var(--helix-seed-accent-hue)))
+  );
+  --_helix-seed-chroma-scale: var(--helix-seed-chroma-scale, 1);
+  --_helix-seed-neutral-chroma: var(--helix-seed-neutral-chroma, 0);
+  --_helix-seed-neutral-hue: var(--helix-seed-neutral-hue, 258);
+  --_helix-neutral-cast: var(--_helix-seed-neutral-chroma) var(--_helix-seed-neutral-hue);
+  --_helix-seed-density: var(--helix-seed-density, 1);
+  --_helix-seed-radii: var(--helix-seed-radii, 0.5rem);
+  --_helix-neutral-0: oklch(1 0 0);
+  --_helix-neutral-1000: oklch(0 0 0);
+  --_helix-neutral-50: oklch(0.985 var(--_helix-neutral-cast));
+  --_helix-neutral-100: oklch(0.97 var(--_helix-neutral-cast));
+  --_helix-neutral-200: oklch(0.96 var(--_helix-neutral-cast));
+  --_helix-neutral-300: oklch(0.91 var(--_helix-neutral-cast));
+  --_helix-neutral-400: oklch(0.71 var(--_helix-neutral-cast));
+  --_helix-neutral-450: oklch(0.67 var(--_helix-neutral-cast));
+  --_helix-neutral-500: oklch(0.6 var(--_helix-neutral-cast));
+  --_helix-neutral-550: oklch(0.53 var(--_helix-neutral-cast));
+  --_helix-neutral-600: oklch(0.5 var(--_helix-neutral-cast));
+  --_helix-neutral-700: oklch(0.33 var(--_helix-neutral-cast));
+  --_helix-neutral-800: oklch(0.29 var(--_helix-neutral-cast));
+  --_helix-neutral-900: oklch(0.21 var(--_helix-neutral-cast));
+  --_helix-neutral-950: oklch(0.15 var(--_helix-neutral-cast));
+  --_helix-series-hue-1: 0;
+  --_helix-series-hue-2: 135;
+  --_helix-series-hue-3: 270;
+  --_helix-series-hue-4: 45;
+  --_helix-series-hue-5: 180;
+  --_helix-series-hue-6: 315;
+  --_helix-series-hue-7: 90;
+  --_helix-series-hue-8: 225;
+  --_helix-brand-500: var(--_helix-seed-brand);
+  --_helix-brand-600: oklch(from var(--_helix-seed-brand) calc(l - 0.05) c h);
+  --_helix-brand-700: oklch(from var(--_helix-seed-brand) calc(l - 0.1) c h);
+  --_helix-brand-400: oklch(from var(--_helix-seed-brand) calc(l + 0.13) c h);
+  --_helix-brand-300: oklch(from var(--_helix-seed-brand) calc(l + 0.18) c h);
+  --_helix-brand-200: oklch(from var(--_helix-seed-brand) calc(l + 0.23) c h);
+  --_helix-brand-50: oklch(from var(--_helix-seed-brand) 0.95 calc(c * 0.25) h);
+  --_helix-brand-900: oklch(from var(--_helix-seed-brand) 0.28 calc(c * 0.5) h);
+  --_helix-accent-500: var(--_helix-seed-accent);
+  --_helix-accent-600: oklch(from var(--_helix-seed-accent) calc(l - 0.05) c h);
+  --_helix-accent-700: oklch(from var(--_helix-seed-accent) calc(l - 0.1) c h);
+  --_helix-accent-400: oklch(from var(--_helix-seed-accent) calc(l + 0.12) c h);
+  --_helix-accent-50: oklch(from var(--_helix-seed-accent) 0.95 calc(c * 0.25) h);
+  --_helix-accent-900: oklch(from var(--_helix-seed-accent) 0.28 calc(c * 0.5) h);
+  --_helix-info-500: oklch(0.58 0.16 245);
+  --_helix-success-500: oklch(0.58 0.15 155);
+  --_helix-warning-500: oklch(0.7 0.185 75);
+  --_helix-danger-500: oklch(0.57 0.21 27);
+  --_helix-danger-600: oklch(from var(--_helix-danger-500) calc(l - 0.07) calc(c - 0.04) h);
+  --_helix-info-600: oklch(from var(--_helix-info-500) calc(l - 0.07) calc(c - 0.04) h);
+  --_helix-success-600: oklch(from var(--_helix-success-500) calc(l - 0.07) calc(c - 0.04) h);
+  --_helix-warning-600: oklch(from var(--_helix-warning-500) calc(l - 0.18) calc(c - 0.075) h);
+  --_helix-danger-700: oklch(from var(--_helix-danger-500) calc(l - 0.14) calc(c - 0.06) h);
+  --_helix-info-700: oklch(from var(--_helix-info-500) calc(l - 0.14) calc(c - 0.06) h);
+  --_helix-success-700: oklch(from var(--_helix-success-500) calc(l - 0.14) calc(c - 0.06) h);
+  --_helix-warning-700: oklch(from var(--_helix-warning-500) calc(l - 0.26) calc(c - 0.03) h);
+  --_helix-info-400: oklch(from var(--_helix-info-500) calc(l + 0.12) c h);
+  --_helix-success-400: oklch(from var(--_helix-success-500) calc(l + 0.12) c h);
+  --_helix-warning-400: oklch(from var(--_helix-warning-500) calc(l + 0.12) c h);
+  --_helix-danger-400: oklch(from var(--_helix-danger-500) calc(l + 0.12) c h);
+  --_helix-syntax-comment-light: oklch(from #6e7781 0.58 c h);
+  --_helix-syntax-comment-dark: #8b949e;
+  --_helix-syntax-keyword-light: oklch(from #cf222e 0.58 c h);
+  --_helix-syntax-keyword-dark: #ff7b72;
+  --_helix-syntax-string-light: oklch(from #0a3069 0.5 c h);
+  --_helix-syntax-string-dark: #a5d6ff;
+  --_helix-syntax-tag-light: oklch(from #116329 0.54 c h);
+  --_helix-syntax-tag-dark: #7ee787;
+  --_helix-syntax-name-light: oklch(from #0550ae 0.55 c h);
+  --_helix-syntax-name-dark: #79c0ff;
+  --_helix-syntax-callable-light: oklch(from #8250df 0.58 c h);
+  --_helix-syntax-callable-dark: #d2a8ff;
+  --_helix-syntax-constant-light: oklch(from #953800 0.56 c h);
+  --_helix-syntax-constant-dark: #ffa657;
+  --_helix-syntax-invalid-light: oklch(from #82071e 0.5 c h);
+  --_helix-syntax-invalid-dark: #ffa198;
+  --_helix-scale-0: 0rem;
+  --_helix-scale-1: calc(0.25rem * var(--_helix-seed-density));
+  --_helix-scale-2: calc(0.5rem * var(--_helix-seed-density));
+  --_helix-scale-3: calc(0.75rem * var(--_helix-seed-density));
+  --_helix-scale-4: calc(1rem * var(--_helix-seed-density));
+  --_helix-scale-5: calc(1.25rem * var(--_helix-seed-density));
+  --_helix-scale-6: calc(1.5rem * var(--_helix-seed-density));
+  --_helix-scale-8: calc(2rem * var(--_helix-seed-density));
+  --_helix-scale-10: calc(2.5rem * var(--_helix-seed-density));
+  --_helix-scale-12: calc(3rem * var(--_helix-seed-density));
+  --_helix-scale-16: calc(4rem * var(--_helix-seed-density));
+  --_helix-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --_helix-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --_helix-size-12: 0.75rem;
+  --_helix-size-13: 0.8125rem;
+  --_helix-size-14: 0.875rem;
+  --_helix-size-18: 1.125rem;
+  --_helix-size-24: 1.5rem;
+  --_helix-size-32: 2rem;
+  --_helix-size-44: 2.75rem;
+  --_helix-ms-120: 120ms;
+  --_helix-ms-200: 200ms;
+  --_helix-ms-320: 320ms;
+  --_helix-curve-standard: cubic-bezier(0.2, 0, 0, 1);
+  --_helix-curve-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
+}

package/dist/tokens.css

@@ -0,0 +1,493 @@
+/* tokens.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
+:root {
+  color-scheme: light dark;
+  --_helix-mode: light;
+  --_helix-mode-inverted: dark;
+  --_helix-shadow-ink-sm: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-950) 5%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-950) 8%, transparent)
+  );
+  --_helix-shadow-ink-md: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-950) 6%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-950) 10%, transparent)
+  );
+  --_helix-shadow-ink-lg: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-950) 9%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-950) 14%, transparent)
+  );
+}
+:root,
+[data-helix-theme] {
+  --helix-color-background: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-1000));
+  --helix-color-surface: light-dark(var(--_helix-neutral-50), var(--_helix-neutral-900));
+  --helix-color-surface-raised: light-dark(var(--_helix-neutral-100), var(--_helix-neutral-800));
+  --helix-color-surface-overlay: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-800));
+  --helix-color-surface-sunken: light-dark(var(--_helix-neutral-200), var(--_helix-neutral-950));
+  --helix-color-well: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
+  --helix-color-overlay: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-950) 40%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-950) 64%, transparent)
+  );
+  --helix-color-foreground: light-dark(var(--_helix-neutral-1000), var(--_helix-neutral-0));
+  --helix-color-foreground-muted: light-dark(var(--_helix-neutral-600), var(--_helix-neutral-400));
+  --helix-color-foreground-subtle: light-dark(var(--_helix-neutral-550), var(--_helix-neutral-450));
+  --helix-color-foreground-on-accent: var(--_helix-neutral-0);
+  --helix-color-surface-inverse: light-dark(var(--_helix-neutral-900), var(--_helix-neutral-100));
+  --helix-color-foreground-inverse: light-dark(var(--_helix-neutral-50), var(--_helix-neutral-900));
+  --helix-color-surface-media: light-dark(var(--_helix-neutral-1000), var(--_helix-neutral-1000));
+  --helix-color-foreground-media: light-dark(var(--_helix-neutral-0), var(--_helix-neutral-0));
+  --helix-color-border: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-300) 60%, var(--_helix-neutral-200)),
+    color-mix(in oklab, var(--_helix-neutral-800) 70%, var(--_helix-neutral-900))
+  );
+  --helix-color-primary: light-dark(var(--_helix-brand-500), var(--_helix-brand-400));
+  --helix-color-primary-hover: light-dark(var(--_helix-brand-600), var(--_helix-brand-300));
+  --helix-color-primary-active: light-dark(var(--_helix-brand-700), var(--_helix-brand-200));
+  --helix-color-primary-subtle: light-dark(var(--_helix-brand-50), var(--_helix-brand-900));
+  --helix-color-accent: light-dark(var(--_helix-accent-500), var(--_helix-accent-400));
+  --helix-color-accent-hover: var(--_helix-accent-600);
+  --helix-color-accent-active: var(--_helix-accent-700);
+  --helix-color-accent-subtle: light-dark(var(--_helix-accent-50), var(--_helix-accent-900));
+  --helix-color-accent-surface: var(--_helix-accent-600);
+  --helix-color-accent-surface-hover: var(--_helix-accent-700);
+  --helix-color-primary-surface: var(--_helix-brand-600);
+  --helix-color-primary-surface-hover: var(--_helix-brand-700);
+  --helix-color-focus-ring: var(--_helix-brand-500);
+  --helix-color-brand-mark: light-dark(var(--_helix-brand-500), var(--_helix-brand-400));
+  --helix-color-syntax-callable: light-dark(
+    var(--_helix-syntax-callable-light),
+    var(--_helix-syntax-callable-dark)
+  );
+  --helix-color-syntax-comment: light-dark(
+    var(--_helix-syntax-comment-light),
+    var(--_helix-syntax-comment-dark)
+  );
+  --helix-color-syntax-constant: light-dark(
+    var(--_helix-syntax-constant-light),
+    var(--_helix-syntax-constant-dark)
+  );
+  --helix-color-syntax-invalid: light-dark(
+    var(--_helix-syntax-invalid-light),
+    var(--_helix-syntax-invalid-dark)
+  );
+  --helix-color-syntax-keyword: light-dark(
+    var(--_helix-syntax-keyword-light),
+    var(--_helix-syntax-keyword-dark)
+  );
+  --helix-color-syntax-name: light-dark(
+    var(--_helix-syntax-name-light),
+    var(--_helix-syntax-name-dark)
+  );
+  --helix-color-syntax-string: light-dark(
+    var(--_helix-syntax-string-light),
+    var(--_helix-syntax-string-dark)
+  );
+  --helix-color-syntax-tag: light-dark(
+    var(--_helix-syntax-tag-light),
+    var(--_helix-syntax-tag-dark)
+  );
+  --helix-color-series-1: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.595 calc(0.221 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.62 calc(0.206 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    )
+  );
+  --helix-color-series-2: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.645 calc(0.238 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    )
+  );
+  --helix-color-series-3: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.625 calc(0.126 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.885 calc(0.179 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    )
+  );
+  --helix-color-series-4: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.565 calc(0.295 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.62 calc(0.252 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    )
+  );
+  --helix-color-series-5: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.64 calc(0.133 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.815 calc(0.17 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    )
+  );
+  --helix-color-series-6: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.63 calc(0.11 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.825 calc(0.144 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    )
+  );
+  --helix-color-series-7: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.66 calc(0.277 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.66 calc(0.277 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    )
+  );
+  --helix-color-series-8: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.63 calc(0.154 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.895 calc(0.219 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    )
+  );
+  --helix-color-series-9: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.145 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    )
+  );
+  --helix-color-series-10: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.145 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.129 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    )
+  );
+  --helix-color-series-11: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.105 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    )
+  );
+  --helix-color-series-12: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.145 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    )
+  );
+  --helix-color-series-13: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.108 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    )
+  );
+  --helix-color-series-14: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.105 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    )
+  );
+  --helix-color-series-15: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.145 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    )
+  );
+  --helix-color-series-16: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.145 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.135 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    )
+  );
+  --helix-color-series-17: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-1))
+    )
+  );
+  --helix-color-series-18: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-2))
+    )
+  );
+  --helix-color-series-19: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-3))
+    )
+  );
+  --helix-color-series-20: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-4))
+    )
+  );
+  --helix-color-series-21: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-5))
+    )
+  );
+  --helix-color-series-22: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-6))
+    )
+  );
+  --helix-color-series-23: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.52 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.7 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-7))
+    )
+  );
+  --helix-color-series-24: light-dark(
+    oklch(
+      from var(--_helix-seed-brand) 0.6 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    ),
+    oklch(
+      from var(--_helix-seed-brand) 0.78 calc(0.07 * var(--_helix-seed-chroma-scale))
+        calc(h + var(--_helix-series-hue-8))
+    )
+  );
+  --helix-color-info: light-dark(var(--_helix-info-600), var(--_helix-info-400));
+  --helix-color-success: light-dark(var(--_helix-success-600), var(--_helix-success-400));
+  --helix-color-warning: light-dark(var(--_helix-warning-600), var(--_helix-warning-400));
+  --helix-color-danger: light-dark(var(--_helix-danger-600), var(--_helix-danger-400));
+  --helix-color-danger-surface: var(--_helix-danger-600);
+  --helix-color-danger-surface-hover: var(--_helix-danger-700);
+  --helix-color-info-surface: var(--_helix-info-600);
+  --helix-color-info-surface-hover: var(--_helix-info-700);
+  --helix-color-success-surface: var(--_helix-success-600);
+  --helix-color-success-surface-hover: var(--_helix-success-700);
+  --helix-color-warning-surface: var(--_helix-warning-600);
+  --helix-color-warning-surface-hover: var(--_helix-warning-700);
+  --helix-space-none: var(--_helix-scale-0);
+  --helix-space-2xs: var(--_helix-scale-1);
+  --helix-space-xs: var(--_helix-scale-2);
+  --helix-space-sm: var(--_helix-scale-3);
+  --helix-space-md: var(--_helix-scale-4);
+  --helix-space-lg: var(--_helix-scale-6);
+  --helix-space-xl: var(--_helix-scale-8);
+  --helix-space-2xl: var(--_helix-scale-12);
+  --helix-space-3xl: var(--_helix-scale-16);
+  --helix-radii-none: 0;
+  --helix-radii-sm: calc(var(--_helix-seed-radii) * 0.5);
+  --helix-radii-md: var(--_helix-seed-radii);
+  --helix-radii-lg: calc(var(--_helix-seed-radii) * 1.5);
+  --helix-radii-full: 9999px;
+  --helix-font-sans: var(--_helix-family-sans);
+  --helix-font-mono: var(--_helix-family-mono);
+  --helix-font-display: var(--_helix-family-display, var(--_helix-family-sans));
+  --helix-text-xs: var(--_helix-size-12);
+  --helix-text-sm: var(--_helix-size-13);
+  --helix-text-md: var(--_helix-size-14);
+  --helix-text-lg: var(--_helix-size-18);
+  --helix-text-xl: var(--_helix-size-24);
+  --helix-text-2xl: var(--_helix-size-32);
+  --helix-text-3xl: var(--_helix-size-44);
+  --helix-weight-regular: 400;
+  --helix-weight-medium: 500;
+  --helix-weight-semibold: 600;
+  --helix-leading-tight: 1.2;
+  --helix-leading-normal: 1.5;
+  --helix-leading-loose: 1.7;
+  --helix-leading-heading: calc(0.99em + 0.5rem);
+  --helix-tracking-tight: -0.01em;
+  --helix-tracking-normal: 0;
+  --helix-tracking-wide: 0.02em;
+  --helix-tracking-wider: 0.12em;
+  --helix-border-thin: 1px;
+  --helix-border-thick: 2px;
+  --helix-border-surface: var(--helix-border-thin);
+  --helix-border-floating: 0;
+  --helix-shadow-none: none;
+  --helix-shadow-sm: 0 1px 2px var(--_helix-shadow-ink-sm);
+  --helix-shadow-md: 0 4px 12px var(--_helix-shadow-ink-md);
+  --helix-shadow-lg: 0 12px 32px var(--_helix-shadow-ink-lg);
+  --helix-shadow-surface: var(--helix-shadow-none);
+  --helix-shadow-floating: var(--helix-shadow-lg);
+  --helix-material-backdrop: blur(var(--helix-material-blur-md)) saturate(1.5);
+  --helix-material-opacity: 1;
+  --helix-material-blur-sm: 8px;
+  --helix-material-blur-md: 16px;
+  --helix-material-blur-lg: 32px;
+  --helix-material-translucent: color-mix(
+    in oklab,
+    light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 30%,
+    transparent
+  );
+  --helix-material-translucent-strong: color-mix(
+    in oklab,
+    light-dark(var(--_helix-neutral-0), var(--_helix-neutral-900)) 88%,
+    transparent
+  );
+  --helix-material-border: light-dark(
+    color-mix(in oklab, var(--_helix-neutral-950) 14%, transparent),
+    color-mix(in oklab, var(--_helix-neutral-0) 12%, transparent)
+  );
+  --helix-duration-instant: 0ms;
+  --helix-duration-fast: var(--_helix-ms-120);
+  --helix-duration-normal: var(--_helix-ms-200);
+  --helix-duration-slow: var(--_helix-ms-320);
+  --helix-easing-standard: var(--_helix-curve-standard);
+  --helix-easing-emphasized: var(--_helix-curve-emphasized);
+  --helix-easing-decelerate: cubic-bezier(0, 0, 0, 1);
+  --helix-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --helix-easing-spring: linear(
+    0,
+    0.006,
+    0.025,
+    0.101,
+    0.539,
+    0.826,
+    0.976,
+    1.037,
+    1.043,
+    1.026,
+    1.006,
+    0.997,
+    1
+  );
+  --helix-size-control-md: calc(2.5rem * var(--_helix-seed-density));
+  --helix-size-control-sm: calc(2rem * var(--_helix-seed-density));
+  --helix-size-control: var(--helix-size-control-md);
+  --helix-text-control: var(--helix-text-sm);
+  --helix-space-control: var(--helix-space-md);
+  --helix-size-control-lg: calc(3rem * var(--_helix-seed-density));
+  --helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
+  --helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
+  --helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
+  --helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
+  --helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
+  --helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
+  --helix-size-button: calc(12.5rem * var(--_helix-seed-density));
+  --helix-size-badge: calc(1rem * var(--_helix-seed-density));
+  --helix-size-avatar: var(--helix-size-avatar-md);
+  --helix-size-avatar-sm: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-avatar-md: calc(2rem * var(--_helix-seed-density));
+  --helix-size-avatar-lg: calc(2.5rem * var(--_helix-seed-density));
+  --helix-size-tag: var(--helix-size-tag-md);
+  --helix-size-tag-lg: calc(2rem * var(--_helix-seed-density));
+  --helix-size-tag-md: calc(1.75rem * var(--_helix-seed-density));
+  --helix-size-tag-sm: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-progress: calc(0.5rem * var(--_helix-seed-density));
+  --helix-size-meter: calc(1rem * var(--_helix-seed-density));
+  --helix-size-checkbox: var(--helix-size-checkbox-md);
+  --helix-size-checkbox-lg: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-checkbox-md: calc(1.25rem * var(--_helix-seed-density));
+  --helix-size-checkbox-sm: calc(1rem * var(--_helix-seed-density));
+  --helix-size-switch: var(--helix-size-switch-md);
+  --helix-size-switch-lg: calc(1.75rem * var(--_helix-seed-density));
+  --helix-size-switch-md: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-switch-sm: calc(1.25rem * var(--_helix-seed-density));
+  --helix-size-loader-md: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-loader-sm: calc(1rem * var(--_helix-seed-density));
+  --helix-size-loader-lg: calc(2rem * var(--_helix-seed-density));
+  --helix-size-header: calc(3.5rem * var(--_helix-seed-density));
+  --helix-size-icon: var(--helix-size-icon-md);
+  --helix-size-icon-lg: calc(1.5rem * var(--_helix-seed-density));
+  --helix-size-icon-md: calc(1.25rem * var(--_helix-seed-density));
+  --helix-size-icon-sm: calc(1rem * var(--_helix-seed-density));
+  --helix-size-focus-ring: var(--helix-border-thick);
+  --helix-size-focus-offset: 2px;
+  --helix-size-focus-reach: calc(var(--helix-size-focus-ring) + var(--helix-size-focus-offset));
+  --helix-layer-beneath: -1;
+  --helix-layer-base: 0;
+  --helix-layer-raised: 10;
+  --helix-layer-sticky: 100;
+  --helix-layer-overlay: 1000;
+  --helix-layer-toast: 1200;
+}
+[data-color-mode="light"] {
+  color-scheme: light;
+  --_helix-mode: light;
+  --_helix-mode-inverted: dark;
+}
+[data-color-mode="dark"] {
+  color-scheme: dark;
+  --_helix-mode: dark;
+  --_helix-mode-inverted: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --_helix-mode: dark;
+    --_helix-mode-inverted: light;
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@fusion.dev/helix-styles",
+  "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
+  "version": "0.0.0-dev",
+  "license": "MIT",
+  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
+  "repository": {
+    "directory": "helix/styles",
+    "type": "git",
+    "url": "git+https://github.com/project-fusion/fusion.git"
+  },
+  "type": "module",
+  "exports": {
+    "./all.css": "./dist/all.css",
+    "./base.css": "./dist/base.css",
+    "./primitives.css": "./dist/primitives.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./tokens.json"
+  },
+  "files": [
+    "dist",
+    "tokens.json"
+  ],
+  "sideEffects": true,
+  "scripts": {
+    "build": "node ../../tooling/scripts/build-styles-dist.mjs"
+  },
+  "bugs": "https://github.com/project-fusion/fusion/issues",
+  "homepage": "https://fusion.dev",
+  "keywords": [
+    "design-tokens",
+    "css",
+    "theming",
+    "design-system"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  }
+}