@fluixi-ui/tokens 0.4.0-alpha.0 → 0.4.0-alpha.10

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,16 @@
 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.
+ * 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;";
 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;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,sEAAsE,CAAC;AAE/F,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,15 @@ 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.
+ * 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;';
 export function cssVar(name) {
     return `--${TOKEN_PREFIX}-${name}`;
 }
@@ -105,6 +107,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 +129,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 = {

package/dist/preset.css

@@ -7,10 +7,15 @@
  * non-bundler consumers get every component's CSS in one import.
  */
 
-@layer flx.tokens, flx.components, flx.skin;
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin;
 
 @import './css/base.css';
+@import './css/layout.css';
+@import './css/scroll-area.css';
 @import './css/button.css';
+@import './css/icon-button.css';
+@import './css/fab.css';
+@import './css/speed-dial.css';
 @import './css/badge.css';
 @import './css/toggle.css';
 @import './css/toolbar.css';
@@ -18,13 +23,21 @@
 @import './css/field.css';
 @import './css/input.css';
 @import './css/number-field.css';
+@import './css/pin-input.css';
+@import './css/tags-input.css';
+@import './css/image.css';
+@import './css/file-upload.css';
 @import './css/slider.css';
 @import './css/hover-card.css';
 @import './css/alert.css';
 @import './css/skeleton.css';
 @import './css/kbd.css';
+@import './css/empty.css';
+@import './css/statistic.css';
+@import './css/descriptions.css';
 @import './css/switch.css';
 @import './css/checkbox-radio.css';
+@import './css/rating.css';
 @import './css/tabs.css';
 @import './css/accordion.css';
 @import './css/progress.css';
@@ -32,10 +45,15 @@
 @import './css/separator.css';
 @import './css/breadcrumb.css';
 @import './css/pagination.css';
+@import './css/timeline.css';
+@import './css/surface.css';
 @import './css/card.css';
+@import './css/glow.css';
 @import './css/aspect-ratio.css';
+@import './css/carousel.css';
 @import './css/stepper.css';
 @import './css/select-combobox.css';
+@import './css/field-variants.css';
 @import './css/parts/listbox.css';
 @import './css/parts/overlays.css';
 @import './css/drawer.css';
@@ -44,6 +62,7 @@
 @import './css/menubar.css';
 @import './css/navigation-menu.css';
 @import './css/sidenav.css';
+@import './css/tree-view.css';
 @import './css/toast.css';
 @import './css/command.css';
 @import './css/tooltip.css';