@fluixi-ui/tokens 0.4.0-alpha.1 → 0.4.0-alpha.11

package/dist/css/surface.css

@@ -0,0 +1,71 @@
+@layer flx.components {
+/* ----------------------------------------------------------------------------
+ * Surface — an elevated container primitive. Background + radius are always set;
+ * elevation (shadow) and border are opt-in via data attributes, so it backs
+ * everything from a flat panel to a raised card or floating sheet.
+ * ------------------------------------------------------------------------- */
+:where([data-surface]) {
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  border-radius: var(--flx-ui-radius-lg);
+  transition:
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-surface][data-bordered]) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+
+:where([data-surface][data-radius='none']) {
+  border-radius: 0;
+}
+:where([data-surface][data-radius='sm']) {
+  border-radius: var(--flx-ui-radius-sm);
+}
+:where([data-surface][data-radius='md']) {
+  border-radius: var(--flx-ui-radius-md);
+}
+:where([data-surface][data-radius='lg']) {
+  border-radius: var(--flx-ui-radius-lg);
+}
+:where([data-surface][data-radius='xl']) {
+  border-radius: var(--flx-ui-radius-xl);
+}
+:where([data-surface][data-radius='full']) {
+  border-radius: var(--flx-ui-radius-full);
+}
+
+:where([data-surface][data-elevation='0']) {
+  box-shadow: none;
+}
+:where([data-surface][data-elevation='1']) {
+  box-shadow: var(--flx-ui-shadow-sm);
+}
+:where([data-surface][data-elevation='2']) {
+  box-shadow: var(--flx-ui-shadow-md);
+}
+:where([data-surface][data-elevation='3']) {
+  box-shadow: var(--flx-ui-shadow-lg);
+}
+:where([data-surface][data-elevation='4']) {
+  box-shadow: var(--flx-ui-shadow-xl);
+}
+
+/* In dark, shadows barely read on a near-black page, so elevation is tonal — the
+   surface lightens as it rises — with a hairline edge for definition. */
+[data-theme='dark'] :where([data-surface][data-elevation='1']) {
+  background: var(--flx-ui-gray-2);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='2']) {
+  background: var(--flx-ui-gray-3);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='3']) {
+  background: var(--flx-ui-gray-4);
+}
+[data-theme='dark'] :where([data-surface][data-elevation='4']) {
+  background: var(--flx-ui-gray-5);
+}
+[data-theme='dark'] :where([data-surface]:not([data-elevation='0']):not([data-bordered])) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+}

package/dist/css/switch.css

@@ -30,4 +30,16 @@
 :where([role='switch'][data-state='checked'])::after {
   transform: translateX(16px);
 }
+:where([role='switch']:hover:not([data-disabled])) {
+  background: var(--flx-ui-color-border-strong);
+  filter: brightness(0.97);
+}
+:where([role='switch']:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([role='switch'][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
 }

package/dist/css/table.css

@@ -170,4 +170,15 @@
 :where([data-pinned='right']) {
   box-shadow: inset 1px 0 0 var(--flx-ui-color-border);
 }
+
+/* Compact density — tighter padding + smaller type for dense data tables.
+ * Opt in with `data-density="compact"` on the table. */
+[data-table][data-density='compact'] [data-table-head],
+[data-table][data-density='compact'] [data-table-cell],
+[data-table][data-density='compact'] [data-table-footer] [data-table-cell] {
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+}
+[data-table][data-density='compact'] [data-table-cell] {
+  font-size: var(--flx-ui-font-size-xs);
+}
 }

package/dist/css/tabs.css

@@ -19,13 +19,22 @@
   margin-bottom: -1px;
   transition: color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where([role='tab']:hover) {
+:where([role='tab']:hover:not([data-disabled])) {
   color: var(--flx-ui-color-fg);
 }
+:where([role='tab']:focus-visible) {
+  outline: none;
+  border-radius: var(--flx-ui-radius-sm);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
 :where([role='tab'][data-state='active']) {
   color: var(--flx-ui-color-primary-active);
   border-bottom-color: var(--flx-ui-color-primary);
 }
+:where([role='tab'][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
 :where([role='tabpanel']) {
   padding: var(--flx-ui-space-4) 0;
 }

package/dist/css/tags-input.css

@@ -0,0 +1,91 @@
+@layer flx.components {
+/* Tags input (from @fluixi-ui/tags-input) — a chip field. The container owns the
+   frame + focus ring; the inner input is borderless and grows to fill the row. */
+:where([data-tags-input]) {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  width: 100%;
+  min-height: var(--flx-ui-size-md);
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  color: var(--flx-ui-color-fg);
+  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: text;
+  transition:
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-tags-input]:focus-within) {
+  border-color: var(--flx-ui-color-focus-ring);
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+:where([data-tags-input][data-invalid]) {
+  border-color: var(--flx-ui-color-danger);
+}
+:where([data-tags-input][data-disabled]) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* The editable input; borderless, inherits the field's type + colour. */
+:where([data-tags-input-field]) {
+  flex: 1 1 6ch;
+  min-width: 6ch;
+  min-height: 0;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  padding: var(--flx-ui-space-1);
+}
+:where([data-tags-input-field]::placeholder) {
+  color: var(--flx-ui-color-fg-muted);
+}
+
+/* A committed tag chip. */
+:where([data-tags-input-tag]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: 0 var(--flx-ui-space-1) 0 var(--flx-ui-space-2);
+  height: calc(var(--flx-ui-size-md) - 2 * var(--flx-ui-space-2));
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  background: var(--flx-ui-color-bg-subtle);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-sm);
+  white-space: nowrap;
+}
+:where([data-tags-input-tag-remove]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.3em;
+  height: 1.3em;
+  padding: 0;
+  font: inherit;
+  line-height: 1;
+  color: var(--flx-ui-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: var(--flx-ui-radius-sm);
+  cursor: pointer;
+  transition:
+    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-tags-input-tag-remove]:hover) {
+  color: var(--flx-ui-color-fg);
+  background: color-mix(in oklab, var(--flx-ui-color-fg) 10%, transparent);
+}
+:where([data-tags-input-tag-remove]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+}

package/dist/css/text.css

@@ -0,0 +1,124 @@
+@layer flx.components {
+  /*
+   * Type scale. Headings are fluid — they interpolate with the viewport between
+   * roughly 360px and 1280px — so a title doesn't have to be re-tuned per
+   * breakpoint. Body text is deliberately NOT fluid: shrinking running text on
+   * small screens is exactly where it hurts to read, and it is the one size a
+   * reader may have deliberately set.
+   */
+  :where([data-text]) {
+    --flx-ui-text-lines: 2;
+
+    margin: 0;
+    font-family: var(--flx-ui-font-family-sans);
+    color: var(--flx-ui-color-fg);
+    /* Long words (URLs, ids) break instead of forcing a scrollbar. */
+    overflow-wrap: break-word;
+  }
+
+  :where([data-text-variant='display']) {
+    font-size: clamp(1.875rem, 1.68rem + 0.87vw, 2.25rem);
+    font-weight: var(--flx-ui-font-weight-bold);
+    line-height: var(--flx-ui-line-height-none);
+    letter-spacing: var(--flx-ui-letter-spacing-tight);
+  }
+
+  :where([data-text-variant='h1']) {
+    font-size: clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem);
+    font-weight: var(--flx-ui-font-weight-semibold);
+    line-height: var(--flx-ui-line-height-tight);
+    letter-spacing: var(--flx-ui-letter-spacing-tight);
+  }
+
+  :where([data-text-variant='h2']) {
+    font-size: clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);
+    font-weight: var(--flx-ui-font-weight-semibold);
+    line-height: var(--flx-ui-line-height-tight);
+  }
+
+  :where([data-text-variant='h3']) {
+    font-size: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
+    font-weight: var(--flx-ui-font-weight-semibold);
+    line-height: var(--flx-ui-line-height-tight);
+  }
+
+  :where([data-text-variant='h4']) {
+    font-size: var(--flx-ui-font-size-lg);
+    font-weight: var(--flx-ui-font-weight-medium);
+    line-height: var(--flx-ui-line-height-tight);
+  }
+
+  :where([data-text-variant='body']) {
+    font-size: var(--flx-ui-font-size-md);
+    line-height: var(--flx-ui-line-height-normal);
+  }
+
+  :where([data-text-variant='bodySm']) {
+    font-size: var(--flx-ui-font-size-sm);
+    line-height: var(--flx-ui-line-height-normal);
+  }
+
+  :where([data-text-variant='caption']) {
+    font-size: var(--flx-ui-font-size-xs);
+    line-height: var(--flx-ui-line-height-normal);
+    color: var(--flx-ui-color-fg-muted);
+  }
+
+  :where([data-text-variant='overline']) {
+    font-size: var(--flx-ui-font-size-xs);
+    font-weight: var(--flx-ui-font-weight-medium);
+    line-height: var(--flx-ui-line-height-normal);
+    letter-spacing: var(--flx-ui-letter-spacing-wide);
+    text-transform: uppercase;
+    color: var(--flx-ui-color-fg-muted);
+  }
+
+  :where([data-text-variant='label']) {
+    font-size: var(--flx-ui-font-size-sm);
+    font-weight: var(--flx-ui-font-weight-medium);
+    line-height: var(--flx-ui-line-height-normal);
+  }
+
+  /* Tone — `inherit` is the escape hatch for text inside a coloured surface. */
+  :where([data-text-tone='muted']) { color: var(--flx-ui-color-fg-muted); }
+  :where([data-text-tone='primary']) { color: var(--flx-ui-color-primary-text); }
+  :where([data-text-tone='danger']) { color: var(--flx-ui-color-danger-text); }
+  :where([data-text-tone='success']) { color: var(--flx-ui-color-success-text); }
+  :where([data-text-tone='warning']) { color: var(--flx-ui-color-warning-text); }
+  :where([data-text-tone='inherit']) { color: inherit; }
+
+  :where([data-text-align='start']) { text-align: start; }
+  :where([data-text-align='center']) { text-align: center; }
+  :where([data-text-align='end']) { text-align: end; }
+  :where([data-text-align='justify']) { text-align: justify; }
+
+  :where([data-text-weight='normal']) { font-weight: var(--flx-ui-font-weight-normal); }
+  :where([data-text-weight='medium']) { font-weight: var(--flx-ui-font-weight-medium); }
+  :where([data-text-weight='semibold']) { font-weight: var(--flx-ui-font-weight-semibold); }
+  :where([data-text-weight='bold']) { font-weight: var(--flx-ui-font-weight-bold); }
+
+  :where([data-text-wrap='nowrap']) { white-space: nowrap; }
+  /* Headings read better balanced; running text better with `pretty`. */
+  :where([data-text-wrap='balance']) { text-wrap: balance; }
+  :where([data-text-wrap='pretty']) { text-wrap: pretty; }
+
+  /* Single-line truncation. */
+  :where([data-text-ellipsis='line']) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /*
+   * Multi-line truncation. `-webkit-line-clamp` is the only interoperable way to
+   * do this and is supported everywhere despite the prefix; the standard
+   * `line-clamp` is listed alongside so it takes over as engines ship it.
+   */
+  :where([data-text-ellipsis='clamp']) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--flx-ui-text-lines);
+    line-clamp: var(--flx-ui-text-lines);
+    overflow: hidden;
+  }
+}

package/dist/css/timeline.css

@@ -0,0 +1,59 @@
+@layer flx.components {
+/* Timeline (from @fluixi-ui/timeline). A vertical feed: each item is an indicator
+   column (dot) beside its content; a connector line threads between the dots. */
+:where([data-timeline]) {
+  display: flex;
+  flex-direction: column;
+}
+:where([data-timeline-item]) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--flx-ui-space-3);
+  --flx-timeline-dot: var(--flx-ui-color-border-strong);
+}
+:where([data-timeline-item][data-tone='primary']),
+:where([data-timeline-item][data-tone='info'])    { --flx-timeline-dot: var(--flx-ui-color-primary); }
+:where([data-timeline-item][data-tone='success'])  { --flx-timeline-dot: var(--flx-ui-color-success); }
+:where([data-timeline-item][data-tone='warning'])  { --flx-timeline-dot: var(--flx-ui-color-warning); }
+:where([data-timeline-item][data-tone='danger'])   { --flx-timeline-dot: var(--flx-ui-color-danger); }
+
+/* Indicator column: the dot, with the connector line drawn below it. */
+:where([data-timeline-indicator]) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  padding-top: 2px;
+  color: var(--flx-timeline-dot);
+}
+/* Default dot (when no custom `dot` content). */
+:where([data-timeline-indicator]:empty)::before {
+  content: "";
+  width: 9px;
+  height: 9px;
+  border-radius: var(--flx-ui-radius-full);
+  background: var(--flx-timeline-dot);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flx-timeline-dot) 18%, transparent);
+}
+/* Connector line — hidden on the last item. */
+:where([data-timeline-item]:not(:last-child) [data-timeline-indicator])::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  bottom: -6px;
+  left: 50%;
+  width: var(--flx-ui-border-width-thin);
+  transform: translateX(-50%);
+  background: var(--flx-ui-color-border);
+}
+:where([data-timeline-content]) {
+  min-width: 0;
+  padding-bottom: var(--flx-ui-space-4);
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+}
+:where([data-timeline-item]:last-child [data-timeline-content]) {
+  padding-bottom: 0;
+}
+}

package/dist/css/toggle.css

@@ -34,6 +34,12 @@
   border-color: var(--flx-ui-color-primary);
   color: var(--flx-ui-color-primary-active);
 }
+:where([aria-pressed]:focus-visible) {
+  outline: none;
+  position: relative;
+  z-index: 2;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
 :where([aria-pressed][data-disabled]) {
   opacity: var(--flx-ui-opacity-disabled);
   pointer-events: none;

package/dist/css/tree-view.css

@@ -0,0 +1,70 @@
+@layer flx.components {
+/* Tree view (from @fluixi-ui/tree-view). Rows indent by depth via the
+   `--flx-tree-depth` custom property the component sets per item. */
+:where([data-tree-view]),
+:where([data-tree-item-group]) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-tree-item]) {
+  outline: none;
+}
+:where([data-tree-item-row]) {
+  display: flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  padding-inline-start: calc(
+    var(--flx-ui-space-2) + var(--flx-tree-depth, 0) * var(--flx-ui-space-4)
+  );
+  border-radius: var(--flx-ui-radius-sm);
+  font-size: var(--flx-ui-font-size-sm);
+  color: var(--flx-ui-color-fg);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-tree-item-row]:hover) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-tree-item][data-selected] > [data-tree-item-row]) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary);
+}
+:where([data-tree-item][data-disabled] > [data-tree-item-row]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:where([data-tree-item]:focus-visible > [data-tree-item-row]) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+}
+
+/* Expand/collapse caret; points right, rotates down when the branch is open. */
+:where([data-tree-item-indicator]) {
+  flex: none;
+  width: 0.62em;
+  height: 0.62em;
+  background: currentcolor;
+  opacity: 0.55;
+  clip-path: polygon(30% 15%, 30% 85%, 80% 50%);
+  transition: transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-tree-item][data-state='expanded'] > [data-tree-item-row] [data-tree-item-indicator]) {
+  transform: rotate(90deg);
+}
+/* Keeps leaf labels aligned with branch labels. */
+:where([data-tree-item-spacer]) {
+  flex: none;
+  width: 0.62em;
+  height: 0.62em;
+}
+:where([data-tree-item-label]) {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+}

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

@@ -1,20 +1,18 @@
 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.
+ * Cascade layer order (low → high): reset (preflight — fluixi-css's reset lives
+ * here) → base (opinionated element defaults; also where a consumer's own reset/base
+ * belongs) → tokens (vars) → components (the default "fluixi" look, `preset.css`) →
+ * skin (an alternate skin's overrides, e.g. `@fluixi-ui/skin-material`). We reserve
+ * `reset`/`base` (never fill them) so a reset always sits below our components →
+ * fx (per-element `fx` rules from `@fluixi-ui/fx`, which must beat both the default
+ * look and any skin, since it's the local escape hatch).
+ * 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 const LAYER_ORDER = "@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;";
 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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/css/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,8EAA8E,CAAC;AAEvG,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AA4GD,wBAAgB,iBAAiB,IAAI,MAAM,CAmC1C;AAED,eAAO,MAAM,SAAS,EAAE,MAA4B,CAAC"}

package/dist/lib/css/index.js

@@ -2,13 +2,17 @@ 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.
+ * Cascade layer order (low → high): reset (preflight — fluixi-css's reset lives
+ * here) → base (opinionated element defaults; also where a consumer's own reset/base
+ * belongs) → tokens (vars) → components (the default "fluixi" look, `preset.css`) →
+ * skin (an alternate skin's overrides, e.g. `@fluixi-ui/skin-material`). We reserve
+ * `reset`/`base` (never fill them) so a reset always sits below our components →
+ * fx (per-element `fx` rules from `@fluixi-ui/fx`, which must beat both the default
+ * look and any skin, since it's the local escape hatch).
+ * 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 const LAYER_ORDER = '@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;';
 export function cssVar(name) {
     return `--${TOKEN_PREFIX}-${name}`;
 }
@@ -105,6 +109,15 @@ function accentBlocks(name, preset) {
  * overriding only the scales (and a few semantics). Dark also applies
  * automatically via `prefers-color-scheme` when no explicit theme is set.
  */
+// A dark shadow on a dark surface is nearly invisible, so dark mode needs its
+// own elevation: pure black at a much higher alpha with more spread, which reads
+// as a halo of shade around a raised surface instead of a faint drop.
+const darkShadows = {
+    [cssVar('shadow-sm')]: '0 1px 2px rgba(0, 0, 0, 0.4)',
+    [cssVar('shadow-md')]: '0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3)',
+    [cssVar('shadow-lg')]: '0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.36)',
+    [cssVar('shadow-xl')]: '0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.42)',
+};
 export function generateTokensCss() {
     const root = block(":root, [data-theme='light']", {
         ...staticVars(),
@@ -118,13 +131,14 @@ export function generateTokensCss() {
         ...scaleVars('dark'),
         ...semanticVars(),
         ...overrideVars('dark'),
+        ...darkShadows,
     });
     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') })
+    const autoDark = `@media (prefers-color-scheme: dark) {\n${block(':root:not([data-theme])', { ...scaleVars('dark'), ...semanticVars(), ...overrideVars('dark'), ...darkShadows })
         .split('\n')
         .map((line) => `  ${line}`)
         .join('\n')}\n}`;

package/dist/lib/reference/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/colors.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAE3D,4FAA4F;AAC5F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAsGpC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwBjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAUhF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,YAAY,CAc3E,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/colors.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAE3D,4FAA4F;AAC5F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA+GpC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6BjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAUhF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,YAAY,CAc3E,CAAC"}

package/dist/lib/reference/colors.js

@@ -66,23 +66,32 @@ const statusLight = {
     'danger-solid': '#e5484d',
     'danger-subtle': '#feebec',
     'danger-fg': '#ffffff',
+    // `-text`: a darker, saturated shade that stays legible ON the `-subtle`
+    // background (the solid shade is too light for text — notably amber).
+    'danger-text': '#cd2b31',
     'success-solid': '#30a46c',
     'success-subtle': '#e6f6ec',
     'success-fg': '#ffffff',
+    'success-text': '#18794e',
     'warning-solid': '#ffb224',
     'warning-subtle': '#fff4d5',
     'warning-fg': '#1c2024',
+    'warning-text': '#ad5700',
 };
 const statusDark = {
     'danger-solid': '#ff6369',
     'danger-subtle': '#3b1219',
     'danger-fg': '#ffffff',
+    // On dark, `-text` is a bright shade legible on the dark `-subtle` bg.
+    'danger-text': '#ff9592',
     'success-solid': '#3dd68c',
     'success-subtle': '#0f291e',
     'success-fg': '#ffffff',
+    'success-text': '#4cc38a',
     'warning-solid': '#ffca16',
     'warning-subtle': '#3a2e00',
     'warning-fg': '#1c2024',
+    'warning-text': '#ffca16',
 };
 function scaleRecord(gray, accent, status) {
     const out = {};
@@ -104,22 +113,27 @@ export const semanticColors = {
     'color-fg': 'var(--flx-ui-gray-12)',
     'color-fg-muted': 'var(--flx-ui-gray-11)',
     'color-border': 'var(--flx-ui-gray-6)',
-    'color-border-strong': 'var(--flx-ui-gray-8)',
+    'color-border-strong': 'var(--flx-ui-gray-7)',
     'color-focus-ring': 'var(--flx-ui-accent-8)',
     'color-primary': 'var(--flx-ui-accent-9)',
     'color-primary-hover': 'var(--flx-ui-accent-10)',
     'color-primary-active': 'var(--flx-ui-accent-11)',
     'color-primary-fg': '#ffffff',
     'color-primary-subtle': 'var(--flx-ui-accent-3)',
+    // Legible text shade for a tinted (subtle) background.
+    'color-primary-text': 'var(--flx-ui-accent-11)',
     'color-danger': 'var(--flx-ui-danger-solid)',
     'color-danger-fg': 'var(--flx-ui-danger-fg)',
     'color-danger-subtle': 'var(--flx-ui-danger-subtle)',
+    'color-danger-text': 'var(--flx-ui-danger-text)',
     'color-success': 'var(--flx-ui-success-solid)',
     'color-success-fg': 'var(--flx-ui-success-fg)',
     'color-success-subtle': 'var(--flx-ui-success-subtle)',
+    'color-success-text': 'var(--flx-ui-success-text)',
     'color-warning': 'var(--flx-ui-warning-solid)',
     'color-warning-fg': 'var(--flx-ui-warning-fg)',
     'color-warning-subtle': 'var(--flx-ui-warning-subtle)',
+    'color-warning-text': 'var(--flx-ui-warning-text)',
     'color-overlay': 'rgba(0, 0, 0, 0.4)',
 };
 export const semanticOverrides = {