@fluixi-ui/tokens 0.3.0

package/dist/css/table.css

@@ -0,0 +1,173 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Table
+ * ------------------------------------------------------------------------- */
+:where([data-table]) {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  /* Hairline frame; individual row rules draw the horizontal grid. */
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+  /* border-radius needs the overflow clipped since cells are square. */
+  overflow: hidden;
+}
+
+:where([data-table-head]) {
+  position: relative;
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  text-align: start;
+  vertical-align: bottom;
+  font-weight: var(--flx-ui-font-weight-semibold);
+  font-size: var(--flx-ui-font-size-xs);
+  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--flx-ui-color-fg-muted);
+  background: var(--flx-ui-color-bg-subtle);
+  border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  white-space: nowrap;
+}
+
+:where([data-table-cell]) {
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  text-align: start;
+  vertical-align: middle;
+}
+
+/* Row separators; the last row's is dropped so it sits flush to the frame. */
+:where([data-table-body] > [data-table-row]) {
+  border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+:where([data-table-body] > [data-table-row]:first-child) {
+  border-top: none;
+}
+:where([data-table-body] > [data-table-row]:hover) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-table-row][data-selected]) {
+  background: var(--flx-ui-color-primary-subtle);
+}
+:where([data-table-row][data-selected]:hover) {
+  background: var(--flx-ui-color-primary-subtle);
+}
+
+/* Sortable header: a full-bleed button so the whole cell is the hit target. */
+:where([data-table-sort-button]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  width: 100%;
+  margin: calc(-1 * var(--flx-ui-space-2)) calc(-1 * var(--flx-ui-space-3));
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--flx-ui-radius-sm);
+  user-select: none;
+}
+:where([data-table-sort-button]:hover) {
+  color: var(--flx-ui-color-fg);
+}
+:where([data-table-sort-button]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+
+/* Neutral sort chevron; brightens and flips when the column is sorted. */
+:where([data-table-sort-indicator]) {
+  width: 0.6em;
+  height: 0.6em;
+  flex: none;
+  opacity: 0;
+  transition:
+    opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  background: currentcolor;
+  clip-path: polygon(50% 75%, 0 25%, 100% 25%);
+}
+:where([data-table-head][data-sortable]:hover [data-table-sort-indicator]) {
+  opacity: 0.4;
+}
+:where([data-table-sort-indicator][data-direction='asc']) {
+  opacity: 1;
+  transform: rotate(180deg);
+}
+:where([data-table-sort-indicator][data-direction='desc']) {
+  opacity: 1;
+}
+
+:where([data-table-footer]) {
+  color: var(--flx-ui-color-fg-muted);
+  border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+:where([data-table-footer] [data-table-cell]) {
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  font-size: var(--flx-ui-font-size-xs);
+}
+
+/* Header cell whose content is a right-click column menu trigger. */
+:where([data-table-column-menu-trigger]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  width: 100%;
+}
+:where([data-table-column-menu-trigger][data-sortable]) {
+  cursor: pointer;
+}
+:where([data-table-head]:hover [data-table-column-menu-trigger][data-sortable] [data-table-sort-indicator]) {
+  opacity: 0.4;
+}
+
+/* Leading check in the view menu; shown only for a currently-visible column. */
+:where([data-table-menu-check]) {
+  display: inline-block;
+  width: 1em;
+  opacity: 0;
+}
+:where([data-table-menu-check][data-checked]) {
+  opacity: 1;
+}
+
+/* Drag-to-resize grip on the trailing edge of a header cell. */
+:where([data-table-resize-handle]) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: var(--flx-ui-color-primary);
+  opacity: 0;
+  transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-table-head]:hover [data-table-resize-handle]) {
+  opacity: 0.4;
+}
+:where([data-table-resize-handle][data-resizing]) {
+  opacity: 1;
+}
+
+/* Pinned cells stay opaque while the center scrolls under them, with a hairline
+ * divider on the scrolling edge. */
+:where([data-table-cell][data-pinned]) {
+  background: var(--flx-ui-color-bg);
+}
+:where([data-table-head][data-pinned]) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-pinned='left']) {
+  box-shadow: inset -1px 0 0 var(--flx-ui-color-border);
+}
+:where([data-pinned='right']) {
+  box-shadow: inset 1px 0 0 var(--flx-ui-color-border);
+}
+}

package/dist/css/tabs.css

@@ -0,0 +1,32 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Tabs
+ * ------------------------------------------------------------------------- */
+:where([role='tablist']) {
+  display: flex;
+  gap: var(--flx-ui-space-1);
+  border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+:where([role='tab']) {
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--flx-ui-color-fg-muted);
+  font: inherit;
+  font-weight: var(--flx-ui-font-weight-medium);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([role='tab']:hover) {
+  color: var(--flx-ui-color-fg);
+}
+:where([role='tab'][data-state='active']) {
+  color: var(--flx-ui-color-primary-active);
+  border-bottom-color: var(--flx-ui-color-primary);
+}
+:where([role='tabpanel']) {
+  padding: var(--flx-ui-space-4) 0;
+}
+}

package/dist/css/toast.css

@@ -0,0 +1,154 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Toast — fixed corner stacks of notifications.
+ * ------------------------------------------------------------------------- */
+:where([data-toast-viewport]) {
+  position: fixed;
+  z-index: var(--flx-ui-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--flx-ui-space-3);
+  width: max-content;
+  max-width: min(380px, calc(100vw - var(--flx-ui-space-8)));
+  margin: 0;
+  padding: var(--flx-ui-space-4);
+  list-style: none;
+  /* The container spans a corner but only the toasts should catch pointer events. */
+  pointer-events: none;
+}
+:where([data-toast-viewport][data-placement^='top']) {
+  top: 0;
+  flex-direction: column-reverse; /* newest nearest the top edge */
+}
+:where([data-toast-viewport][data-placement^='bottom']) {
+  bottom: 0;
+}
+:where([data-toast-viewport][data-placement$='left']) {
+  left: 0;
+  align-items: flex-start;
+}
+:where([data-toast-viewport][data-placement$='right']) {
+  right: 0;
+  align-items: flex-end;
+}
+:where([data-toast-viewport][data-placement$='center']) {
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+:where([data-toast]) {
+  pointer-events: auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--flx-ui-space-3);
+  width: 100%;
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  /* A hairline accent stripe carries the type — restrained, no loud fills. */
+  border-left-width: 3px;
+  border-radius: var(--flx-ui-radius-lg);
+  box-shadow: var(--flx-ui-shadow-lg);
+  outline: none;
+  /* Swipe offset lives in a var the component drives during a drag. */
+  transform: translateX(var(--flx-ui-toast-swipe, 0px));
+  touch-action: pan-y;
+  animation: flx-ui-pop-in var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
+}
+/* Enter once: after the first play the row is latched so re-insertion (when
+   another toast is added) can't restart the animation. */
+:where([data-toast][data-entered]) {
+  animation: none;
+}
+:where([data-toast]:focus-visible) {
+  box-shadow: var(--flx-ui-shadow-lg), var(--flx-ui-ctl-ring);
+}
+/* Live tracking while dragging; smooth settle-back or fling-out on release. */
+:where([data-toast][data-swiping]) {
+  transition: none;
+  cursor: grab;
+  user-select: none;
+}
+:where([data-toast]:not([data-swiping])) {
+  transition:
+    transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-toast][data-swiped-out]) {
+  transition:
+    transform 150ms var(--flx-ui-ease-standard),
+    opacity 150ms var(--flx-ui-ease-standard);
+}
+:where([data-toast][data-type='success']) {
+  border-left-color: var(--flx-ui-color-success);
+}
+:where([data-toast][data-type='error']) {
+  border-left-color: var(--flx-ui-color-danger);
+}
+:where([data-toast][data-type='warning']) {
+  border-left-color: var(--flx-ui-color-warning);
+}
+:where([data-toast][data-type='info']),
+:where([data-toast][data-type='loading']) {
+  border-left-color: var(--flx-ui-color-primary);
+}
+:where([data-toast-content]) {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-toast-title]) {
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-medium);
+  line-height: var(--flx-ui-line-height-tight);
+}
+:where([data-toast-description]) {
+  font-size: var(--flx-ui-font-size-xs);
+  color: var(--flx-ui-color-fg-muted);
+  line-height: var(--flx-ui-line-height-normal);
+}
+:where([data-toast-close]) {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  margin: -2px -4px 0 0;
+  padding: 0;
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--flx-ui-radius-sm);
+  cursor: pointer;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-toast-close]:hover) {
+  background: var(--flx-ui-color-bg-muted);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-toast-action]) {
+  flex: none;
+  align-self: center;
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  font: inherit;
+  font-size: var(--flx-ui-font-size-xs);
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-primary-active);
+  background: var(--flx-ui-color-primary-subtle);
+  border: none;
+  border-radius: var(--flx-ui-radius-sm);
+  cursor: pointer;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-toast]) {
+    animation: none;
+  }
+}
+}

package/dist/css/toggle.css

@@ -0,0 +1,74 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Toggle & toggle group (segmented control)
+ * ------------------------------------------------------------------------- */
+:where([aria-pressed]) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--flx-ui-space-2);
+  height: var(--flx-ui-size-md);
+  min-width: var(--flx-ui-size-md);
+  padding: 0 var(--flx-ui-space-3);
+  font: inherit;
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg-muted);
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border-strong);
+  border-radius: var(--flx-ui-radius-md);
+  cursor: pointer;
+  transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([aria-pressed]:hover:not([data-disabled])) {
+  background: var(--flx-ui-color-bg-subtle);
+  color: var(--flx-ui-color-fg);
+}
+:where([aria-pressed][data-state='on']) {
+  position: relative;
+  z-index: 1;
+  background: var(--flx-ui-color-primary-subtle);
+  border-color: var(--flx-ui-color-primary);
+  color: var(--flx-ui-color-primary-active);
+}
+:where([aria-pressed][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  pointer-events: none;
+}
+
+:where([role='group'][data-orientation='horizontal']) {
+  display: inline-flex;
+}
+:where([role='group'][data-orientation='vertical']) {
+  display: inline-flex;
+  flex-direction: column;
+}
+:where([role='group'][data-orientation] > [aria-pressed]) {
+  border-radius: 0;
+}
+:where([role='group'][data-orientation='horizontal'] > [aria-pressed] + [aria-pressed]) {
+  margin-left: -1px;
+}
+:where([role='group'][data-orientation='vertical'] > [aria-pressed] + [aria-pressed]) {
+  margin-top: -1px;
+}
+:where([role='group'][data-orientation='horizontal'] > [aria-pressed]:first-child) {
+  border-top-left-radius: var(--flx-ui-radius-md);
+  border-bottom-left-radius: var(--flx-ui-radius-md);
+}
+:where([role='group'][data-orientation='horizontal'] > [aria-pressed]:last-child) {
+  border-top-right-radius: var(--flx-ui-radius-md);
+  border-bottom-right-radius: var(--flx-ui-radius-md);
+}
+:where([role='group'][data-orientation='vertical'] > [aria-pressed]:first-child) {
+  border-top-left-radius: var(--flx-ui-radius-md);
+  border-top-right-radius: var(--flx-ui-radius-md);
+}
+:where([role='group'][data-orientation='vertical'] > [aria-pressed]:last-child) {
+  border-bottom-left-radius: var(--flx-ui-radius-md);
+  border-bottom-right-radius: var(--flx-ui-radius-md);
+}
+}

package/dist/css/toolbar.css

@@ -0,0 +1,48 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Toolbar
+ * ------------------------------------------------------------------------- */
+:where([role='toolbar']) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: var(--flx-ui-space-1);
+  background: var(--flx-ui-color-bg);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-lg);
+}
+:where([role='toolbar'][data-orientation='vertical']) {
+  flex-direction: column;
+  align-items: stretch;
+}
+:where([role='toolbar'] > button:not([aria-pressed])) {
+  height: var(--flx-ui-size-sm);
+  min-width: var(--flx-ui-size-sm);
+  padding: 0 var(--flx-ui-space-3);
+  font: inherit;
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: var(--flx-ui-radius-sm);
+  cursor: pointer;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([role='toolbar'] > button:not([aria-pressed]):hover) {
+  background: var(--flx-ui-color-bg-muted);
+  color: var(--flx-ui-color-fg);
+}
+:where([role='toolbar'] > [role='separator']) {
+  flex: none;
+  align-self: stretch;
+  width: 1px;
+  height: auto;
+  margin: var(--flx-ui-space-1) var(--flx-ui-space-1);
+  background: var(--flx-ui-color-border);
+}
+:where([role='toolbar'][data-orientation='vertical'] > [role='separator']) {
+  width: auto;
+  height: 1px;
+  margin: var(--flx-ui-space-1) var(--flx-ui-space-1);
+}
+}

package/dist/css/tooltip.css

@@ -0,0 +1,13 @@
+@layer flx.components {
+/* Tooltip */
+:where([role='tooltip']) {
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-bg);
+  background: var(--flx-ui-color-fg);
+  border-radius: var(--flx-ui-radius-sm);
+  box-shadow: var(--flx-ui-shadow-md);
+  pointer-events: none;
+  animation: flx-ui-fade var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/reference/index.js';
+export * from './lib/reference/colors.js';
+export * from './lib/css/index.js';
+export * from './lib/vars/index.js';
+export * from './lib/theme/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './lib/reference/index.js';
+export * from './lib/reference/colors.js';
+export * from './lib/css/index.js';
+export * from './lib/vars/index.js';
+export * from './lib/theme/index.js';

package/dist/lib/css/index.d.ts

@@ -0,0 +1,20 @@
+export declare const TOKEN_PREFIX = "flx-ui";
+/**
+ * Cascade layer order (low → high): tokens (vars) → components (the default
+ * "fluixi" look, `preset.css`) → skin (an alternate skin's overrides, e.g.
+ * `@fluixi-ui/skin-material`). Consumer CSS stays unlayered, so it always wins.
+ * Declared first in every stylesheet we emit so ordering is deterministic
+ * regardless of load order; redeclarations are no-ops.
+ */
+export declare const LAYER_ORDER = "@layer flx.tokens, flx.components, flx.skin;";
+export declare function cssVar(name: string): string;
+export declare function cssVarRef(name: string): string;
+/**
+ * Generate the full token stylesheet: static reference tokens and the light
+ * scales plus semantic aliases on `:root`, with dark and high-contrast themes
+ * overriding only the scales (and a few semantics). Dark also applies
+ * automatically via `prefers-color-scheme` when no explicit theme is set.
+ */
+export declare function generateTokensCss(): string;
+export declare const tokensCss: string;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/css/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/css/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,iDAAiD,CAAC;AAE1E,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AA4FD;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAkC1C;AAED,eAAO,MAAM,SAAS,EAAE,MAA4B,CAAC"}

package/dist/lib/css/index.js

@@ -0,0 +1,135 @@
+import { staticTokens } from '../reference/index.js';
+import { accentPresets, colorScales, semanticColors, semanticOverrides, } from '../reference/colors.js';
+export const TOKEN_PREFIX = 'flx-ui';
+/**
+ * Cascade layer order (low → high): tokens (vars) → components (the default
+ * "fluixi" look, `preset.css`) → skin (an alternate skin's overrides, e.g.
+ * `@fluixi-ui/skin-material`). Consumer CSS stays unlayered, so it always wins.
+ * Declared first in every stylesheet we emit so ordering is deterministic
+ * regardless of load order; redeclarations are no-ops.
+ */
+export const LAYER_ORDER = '@layer flx.tokens, flx.components, flx.skin;';
+export function cssVar(name) {
+    return `--${TOKEN_PREFIX}-${name}`;
+}
+export function cssVarRef(name) {
+    return `var(${cssVar(name)})`;
+}
+function declarations(entries) {
+    return Object.entries(entries)
+        .map(([name, value]) => `  ${name}: ${value};`)
+        .join('\n');
+}
+function block(selector, entries) {
+    return `${selector} {\n${declarations(entries)}\n}`;
+}
+function staticVars() {
+    const out = {};
+    for (const { prefix, values } of Object.values(staticTokens)) {
+        for (const [key, value] of Object.entries(values)) {
+            out[cssVar(`${prefix}-${key}`)] = value;
+        }
+    }
+    return out;
+}
+function scaleVars(theme) {
+    const out = {};
+    for (const [name, value] of Object.entries(colorScales[theme])) {
+        out[cssVar(name)] = value;
+    }
+    return out;
+}
+function semanticVars() {
+    const out = {};
+    for (const [name, value] of Object.entries(semanticColors)) {
+        out[cssVar(name)] = value;
+    }
+    return out;
+}
+/**
+ * The accent-derived slice of the semantic layer (`color-primary`, focus ring,
+ * …). Custom properties resolve where they're declared, so a scoped `data-accent`
+ * subtree must re-declare these — otherwise the root's already-resolved color
+ * inherits down and the local `accent-*` override is ignored.
+ */
+function accentSemanticVars() {
+    const out = {};
+    for (const [name, value] of Object.entries(semanticColors)) {
+        if (value.includes('accent'))
+            out[cssVar(name)] = value;
+    }
+    return out;
+}
+function overrideVars(theme) {
+    const out = {};
+    for (const [name, value] of Object.entries(semanticOverrides[theme] ?? {})) {
+        out[cssVar(name)] = value;
+    }
+    return out;
+}
+function accentVars(scale, fg) {
+    const out = {};
+    for (const [step, value] of Object.entries(scale))
+        out[cssVar(`accent-${step}`)] = value;
+    if (fg)
+        out[cssVar('color-primary-fg')] = fg;
+    return out;
+}
+/**
+ * Accent-preset blocks (`data-accent`). Each preset overrides only the accent
+ * scale, in every scheme. The scheme-qualified selectors (0,2,0) outrank the
+ * base `[data-theme]` blocks (0,1,0), so dark/light stay correct; the plain
+ * `[data-accent]` block trails `:root` in source order to win in light mode.
+ */
+function accentBlocks(name, preset) {
+    const sel = `[data-accent='${name}']`;
+    const light = accentVars(preset.light, preset.fg);
+    const dark = accentVars(preset.dark, preset.fg);
+    const autoDark = `@media (prefers-color-scheme: dark) {\n${block(`:root:not([data-theme])${sel}`, {
+        ...dark,
+        ...accentSemanticVars(),
+    })
+        .split('\n')
+        .map((line) => `  ${line}`)
+        .join('\n')}\n}`;
+    return [
+        block(`:root${sel}, [data-theme='light']${sel}`, { ...light, ...accentSemanticVars() }),
+        block(`[data-theme='dark']${sel}`, { ...dark, ...accentSemanticVars() }),
+        block(`[data-theme='high-contrast']${sel}`, { ...light, ...accentSemanticVars() }),
+        autoDark,
+    ].join('\n\n');
+}
+/**
+ * Generate the full token stylesheet: static reference tokens and the light
+ * scales plus semantic aliases on `:root`, with dark and high-contrast themes
+ * overriding only the scales (and a few semantics). Dark also applies
+ * automatically via `prefers-color-scheme` when no explicit theme is set.
+ */
+export function generateTokensCss() {
+    const root = block(":root, [data-theme='light']", {
+        ...staticVars(),
+        ...scaleVars('light'),
+        ...semanticVars(),
+    });
+    // Re-emit the semantic layer in each scope: custom properties resolve where
+    // they're declared, so a scoped `[data-theme]` subtree must re-declare the
+    // semantics against its own scales (otherwise the root's resolved colors win).
+    const dark = block("[data-theme='dark']", {
+        ...scaleVars('dark'),
+        ...semanticVars(),
+        ...overrideVars('dark'),
+    });
+    const highContrast = block("[data-theme='high-contrast']", {
+        ...scaleVars('high-contrast'),
+        ...semanticVars(),
+        ...overrideVars('high-contrast'),
+    });
+    const autoDark = `@media (prefers-color-scheme: dark) {\n${block(':root:not([data-theme])', { ...scaleVars('dark'), ...semanticVars(), ...overrideVars('dark') })
+        .split('\n')
+        .map((line) => `  ${line}`)
+        .join('\n')}\n}`;
+    const accents = Object.entries(accentPresets).map(([name, preset]) => accentBlocks(name, preset));
+    const body = [root, dark, highContrast, autoDark, ...accents].join('\n\n');
+    return `${LAYER_ORDER}\n\n@layer flx.tokens {\n${body}\n}`;
+}
+export const tokensCss = generateTokensCss();