@fluixi-ui/tokens 0.4.0-alpha.7 → 0.4.0-alpha.9

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/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 = {};
@@ -111,15 +120,20 @@ export const semanticColors = {
     '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

@@ -10,7 +10,12 @@
 @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,12 +45,14 @@
 @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/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';
@@ -46,6 +61,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';

package/dist/tokens.css

@@ -117,12 +117,15 @@
   --flx-ui-danger-solid: #e5484d;
   --flx-ui-danger-subtle: #feebec;
   --flx-ui-danger-fg: #ffffff;
+  --flx-ui-danger-text: #cd2b31;
   --flx-ui-success-solid: #30a46c;
   --flx-ui-success-subtle: #e6f6ec;
   --flx-ui-success-fg: #ffffff;
+  --flx-ui-success-text: #18794e;
   --flx-ui-warning-solid: #ffb224;
   --flx-ui-warning-subtle: #fff4d5;
   --flx-ui-warning-fg: #1c2024;
+  --flx-ui-warning-text: #ad5700;
   --flx-ui-color-bg: var(--flx-ui-gray-1);
   --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
   --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
@@ -136,15 +139,19 @@
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-fg: #ffffff;
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   --flx-ui-color-danger: var(--flx-ui-danger-solid);
   --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
   --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-danger-text: var(--flx-ui-danger-text);
   --flx-ui-color-success: var(--flx-ui-success-solid);
   --flx-ui-color-success-fg: var(--flx-ui-success-fg);
   --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-success-text: var(--flx-ui-success-text);
   --flx-ui-color-warning: var(--flx-ui-warning-solid);
   --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
   --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-warning-text: var(--flx-ui-warning-text);
   --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
 }
 
@@ -176,12 +183,15 @@
   --flx-ui-danger-solid: #ff6369;
   --flx-ui-danger-subtle: #3b1219;
   --flx-ui-danger-fg: #ffffff;
+  --flx-ui-danger-text: #ff9592;
   --flx-ui-success-solid: #3dd68c;
   --flx-ui-success-subtle: #0f291e;
   --flx-ui-success-fg: #ffffff;
+  --flx-ui-success-text: #4cc38a;
   --flx-ui-warning-solid: #ffca16;
   --flx-ui-warning-subtle: #3a2e00;
   --flx-ui-warning-fg: #1c2024;
+  --flx-ui-warning-text: #ffca16;
   --flx-ui-color-bg: var(--flx-ui-gray-1);
   --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
   --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
@@ -195,15 +205,19 @@
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-fg: #ffffff;
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   --flx-ui-color-danger: var(--flx-ui-danger-solid);
   --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
   --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-danger-text: var(--flx-ui-danger-text);
   --flx-ui-color-success: var(--flx-ui-success-solid);
   --flx-ui-color-success-fg: var(--flx-ui-success-fg);
   --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-success-text: var(--flx-ui-success-text);
   --flx-ui-color-warning: var(--flx-ui-warning-solid);
   --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
   --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-warning-text: var(--flx-ui-warning-text);
   --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
   --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
   --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -239,12 +253,15 @@
   --flx-ui-danger-solid: #e5484d;
   --flx-ui-danger-subtle: #feebec;
   --flx-ui-danger-fg: #ffffff;
+  --flx-ui-danger-text: #cd2b31;
   --flx-ui-success-solid: #30a46c;
   --flx-ui-success-subtle: #e6f6ec;
   --flx-ui-success-fg: #ffffff;
+  --flx-ui-success-text: #18794e;
   --flx-ui-warning-solid: #ffb224;
   --flx-ui-warning-subtle: #fff4d5;
   --flx-ui-warning-fg: #1c2024;
+  --flx-ui-warning-text: #ad5700;
   --flx-ui-color-bg: var(--flx-ui-gray-1);
   --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
   --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
@@ -258,15 +275,19 @@
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-fg: #ffffff;
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   --flx-ui-color-danger: var(--flx-ui-danger-solid);
   --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
   --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+  --flx-ui-color-danger-text: var(--flx-ui-danger-text);
   --flx-ui-color-success: var(--flx-ui-success-solid);
   --flx-ui-color-success-fg: var(--flx-ui-success-fg);
   --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+  --flx-ui-color-success-text: var(--flx-ui-success-text);
   --flx-ui-color-warning: var(--flx-ui-warning-solid);
   --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
   --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+  --flx-ui-color-warning-text: var(--flx-ui-warning-text);
   --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
 }
 
@@ -299,12 +320,15 @@
     --flx-ui-danger-solid: #ff6369;
     --flx-ui-danger-subtle: #3b1219;
     --flx-ui-danger-fg: #ffffff;
+    --flx-ui-danger-text: #ff9592;
     --flx-ui-success-solid: #3dd68c;
     --flx-ui-success-subtle: #0f291e;
     --flx-ui-success-fg: #ffffff;
+    --flx-ui-success-text: #4cc38a;
     --flx-ui-warning-solid: #ffca16;
     --flx-ui-warning-subtle: #3a2e00;
     --flx-ui-warning-fg: #1c2024;
+    --flx-ui-warning-text: #ffca16;
     --flx-ui-color-bg: var(--flx-ui-gray-1);
     --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
     --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
@@ -318,15 +342,19 @@
     --flx-ui-color-primary-active: var(--flx-ui-accent-11);
     --flx-ui-color-primary-fg: #ffffff;
     --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+    --flx-ui-color-primary-text: var(--flx-ui-accent-11);
     --flx-ui-color-danger: var(--flx-ui-danger-solid);
     --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
     --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
+    --flx-ui-color-danger-text: var(--flx-ui-danger-text);
     --flx-ui-color-success: var(--flx-ui-success-solid);
     --flx-ui-color-success-fg: var(--flx-ui-success-fg);
     --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
+    --flx-ui-color-success-text: var(--flx-ui-success-text);
     --flx-ui-color-warning: var(--flx-ui-warning-solid);
     --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
     --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
+    --flx-ui-color-warning-text: var(--flx-ui-warning-text);
     --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
     --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
     --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -353,6 +381,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='dark'][data-accent='violet'] {
@@ -373,6 +402,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='high-contrast'][data-accent='violet'] {
@@ -393,6 +423,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -414,6 +445,7 @@
     --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
     --flx-ui-color-primary-active: var(--flx-ui-accent-11);
     --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+    --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   }
 }
 
@@ -435,6 +467,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='dark'][data-accent='rose'] {
@@ -455,6 +488,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='high-contrast'][data-accent='rose'] {
@@ -475,6 +509,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -496,6 +531,7 @@
     --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
     --flx-ui-color-primary-active: var(--flx-ui-accent-11);
     --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+    --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   }
 }
 
@@ -518,6 +554,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='dark'][data-accent='green'] {
@@ -539,6 +576,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 [data-theme='high-contrast'][data-accent='green'] {
@@ -560,6 +598,7 @@
   --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
   --flx-ui-color-primary-active: var(--flx-ui-accent-11);
   --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+  --flx-ui-color-primary-text: var(--flx-ui-accent-11);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -582,6 +621,7 @@
     --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
     --flx-ui-color-primary-active: var(--flx-ui-accent-11);
     --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
+    --flx-ui-color-primary-text: var(--flx-ui-accent-11);
   }
 }
 }