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

package/dist/css/accordion.css

@@ -1,7 +1,85 @@
 @layer flx.components {
-/* Accordion */
-:where([role='region']) {
-  padding-bottom: var(--flx-ui-space-3);
+/* ----------------------------------------------------------------------------
+ * Accordion — a bordered stack of collapsible sections. The trigger is a full
+ * width header row with a chevron that rotates on open; content reveals with a
+ * gentle slide.
+ * ------------------------------------------------------------------------- */
+:where([data-accordion]) {
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  overflow: hidden;
+}
+:where([data-accordion-item]:not(:last-child)) {
+  border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+}
+
+:where([data-accordion-trigger]) {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--flx-ui-space-3);
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  border: none;
+  background: none;
+  font: inherit;
+  font-weight: var(--flx-ui-font-weight-medium);
+  color: var(--flx-ui-color-fg);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-accordion-trigger]:hover:not([data-disabled])) {
+  background: var(--flx-ui-color-bg-subtle);
+}
+:where([data-accordion-trigger]:focus-visible) {
+  outline: 2px solid var(--flx-ui-color-focus-ring);
+  outline-offset: -2px;
+}
+:where([data-accordion-trigger][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
+/* Chevron: a crisp masked glyph, centred, that flips 180° when open. */
+:where([data-accordion-trigger])::after {
+  content: '';
+  width: 1em;
+  height: 1em;
+  flex: none;
+  background: currentColor;
+  opacity: 0.55;
+  -webkit-mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  mask: var(--flx-ui-chevron-down) center / contain no-repeat;
+  transition: transform var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+:where([data-accordion-trigger][data-state='open'])::after {
+  transform: rotate(180deg);
+}
+
+:where([data-accordion-content]) {
+  padding: 0 var(--flx-ui-space-4) var(--flx-ui-space-3);
   color: var(--flx-ui-color-fg-muted);
 }
+:where([data-accordion-content][data-state='open']) {
+  animation: flx-ui-accordion-in var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
+}
+
+@keyframes flx-ui-accordion-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-accordion-trigger])::after,
+  :where([data-accordion-content][data-state='open']) {
+    transition: none;
+    animation: none;
+  }
+}
 }

package/dist/css/alert.css

@@ -1,42 +1,71 @@
 @layer flx.components {
 /* ----------------------------------------------------------------------------
- * Alert
+ * Alert — a tinted callout with an optional leading icon. The icon column spans
+ * the title + description rows; without an icon the content sits flush left.
  * ------------------------------------------------------------------------- */
 :where([data-alert]) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--flx-ui-space-1);
-  text-align: left;
-  padding-block: var(--flx-ui-space-4);
-  padding-inline: var(--flx-ui-space-4);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: var(--flx-ui-space-1);
+  align-items: start;
+  padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
   border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
-  border-left-width: 3px;
   border-radius: var(--flx-ui-radius-md);
   background: var(--flx-ui-color-bg-subtle);
   color: var(--flx-ui-color-fg);
 }
-:where([data-alert][data-variant='info']) {
-  border-color: var(--flx-ui-color-primary);
-  background: var(--flx-ui-color-primary-subtle);
+:where([data-alert]) > * {
+  grid-column: 2;
+  min-width: 0;
 }
-:where([data-alert][data-variant='success']) {
-  border-color: var(--flx-ui-color-success);
-  background: var(--flx-ui-color-success-subtle);
+:where([data-alert-icon]) {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  margin-right: var(--flx-ui-space-3);
+  display: inline-flex;
+  flex: none;
+  color: var(--flx-ui-color-fg-muted);
 }
-:where([data-alert][data-variant='warning']) {
-  border-color: var(--flx-ui-color-warning);
-  background: var(--flx-ui-color-warning-subtle);
-}
-:where([data-alert][data-variant='danger']) {
-  border-color: var(--flx-ui-color-danger);
-  background: var(--flx-ui-color-danger-subtle);
+:where([data-alert-icon]) > svg {
+  width: 1.15em;
+  height: 1.15em;
 }
 :where([data-alert-title]) {
   font-weight: var(--flx-ui-font-weight-semibold);
+  line-height: var(--flx-ui-line-height-tight);
 }
 :where([data-alert-description]) {
   font-size: var(--flx-ui-font-size-sm);
-  opacity: 0.9;
+  color: var(--flx-ui-color-fg-muted);
+}
+
+/* Variants tint the surface, border and icon with the matching semantic hue. */
+:where([data-alert][data-alert-variant='info']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-primary) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-primary-subtle);
+}
+:where([data-alert][data-alert-variant='info']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-primary);
+}
+:where([data-alert][data-alert-variant='success']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-success) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-success-subtle);
+}
+:where([data-alert][data-alert-variant='success']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-success);
+}
+:where([data-alert][data-alert-variant='warning']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-warning) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-warning-subtle);
+}
+:where([data-alert][data-alert-variant='warning']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-warning);
+}
+:where([data-alert][data-alert-variant='danger']) {
+  border-color: color-mix(in oklab, var(--flx-ui-color-danger) 35%, var(--flx-ui-color-border));
+  background: var(--flx-ui-color-danger-subtle);
+}
+:where([data-alert][data-alert-variant='danger']) :where([data-alert-icon]) {
+  color: var(--flx-ui-color-danger);
 }
 }

package/dist/css/avatar.css

@@ -33,4 +33,23 @@
   width: 100%;
   height: 100%;
 }
+
+/* ----------------------------------------------------------------------------
+ * Avatar group — overlapping cluster
+ * ------------------------------------------------------------------------- */
+:where([data-avatar-group]) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+:where([data-avatar-group]) > * {
+  /* A ring in the page background so the overlap reads as separate discs. */
+  box-shadow: 0 0 0 2px var(--flx-ui-color-bg);
+}
+:where([data-avatar-group]) > * + * {
+  margin-inline-start: calc(-1 * var(--flx-ui-avatar-group-spacing, 8px));
+}
+:where([data-avatar-group-overflow]) {
+  font-size: var(--flx-ui-font-size-xs);
+}
 }

package/dist/css/badge.css

@@ -1,12 +1,136 @@
 @layer flx.components {
-/* Badge */
-:where([data-variant].flx-ui-badge, .flx-ui-badge[data-variant]) {
-  height: auto;
-  padding: 2px var(--flx-ui-space-2);
+/* Badge (from @fluixi-ui/badge). A small status/label pill: a `data-variant` fill
+   style (soft/solid/outline) crossed with a semantic `data-tone`. Each tone sets
+   three custom props — the strong colour, the soft background, and the on-solid
+   foreground — and the variants consume them, so tone × variant needs no per-combo
+   rules. */
+:where([data-badge]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  min-width: 0;
+  /* A compact chip, not a button: tight vertical padding + line-height so the
+     height tracks the text, no wide tracking. */
+  padding: 1px var(--flx-ui-space-2);
   border-radius: var(--flx-ui-radius-full);
   font-size: var(--flx-ui-font-size-xs);
   font-weight: var(--flx-ui-font-weight-semibold);
-  letter-spacing: var(--flx-ui-letter-spacing-wide);
+  line-height: 1.35;
+  white-space: nowrap;
+  border: var(--flx-ui-border-width-thin) solid transparent;
   box-shadow: none;
+  /* Each tone sets four props: `color` (strong — solid fill / outline border),
+     `text` (a legible-on-tint shade — soft/outline label), `bg` (soft fill) and
+     `on` (label on the solid fill). neutral defaults: */
+  --flx-ui-badge-color: var(--flx-ui-color-fg-muted);
+  --flx-ui-badge-text: var(--flx-ui-color-fg-muted);
+  --flx-ui-badge-bg: var(--flx-ui-color-bg-muted);
+  --flx-ui-badge-on: var(--flx-ui-color-bg);
+}
+
+:where([data-badge][data-tone='primary']),
+:where([data-badge][data-tone='info']) {
+  --flx-ui-badge-color: var(--flx-ui-color-primary);
+  --flx-ui-badge-text: var(--flx-ui-color-primary-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-primary-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-primary-fg);
+}
+:where([data-badge][data-tone='success']) {
+  --flx-ui-badge-color: var(--flx-ui-color-success);
+  --flx-ui-badge-text: var(--flx-ui-color-success-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-success-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-success-fg);
+}
+:where([data-badge][data-tone='warning']) {
+  --flx-ui-badge-color: var(--flx-ui-color-warning);
+  --flx-ui-badge-text: var(--flx-ui-color-warning-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-warning-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-warning-fg);
+}
+:where([data-badge][data-tone='danger']) {
+  --flx-ui-badge-color: var(--flx-ui-color-danger);
+  --flx-ui-badge-text: var(--flx-ui-color-danger-text);
+  --flx-ui-badge-bg: var(--flx-ui-color-danger-subtle);
+  --flx-ui-badge-on: var(--flx-ui-color-danger-fg);
+}
+
+:where([data-badge][data-variant='soft']) {
+  background: var(--flx-ui-badge-bg);
+  color: var(--flx-ui-badge-text);
+}
+:where([data-badge][data-variant='solid']) {
+  background: var(--flx-ui-badge-color);
+  color: var(--flx-ui-badge-on);
+}
+:where([data-badge][data-variant='outline']) {
+  color: var(--flx-ui-badge-text);
+  border-color: var(--flx-ui-badge-color);
+}
+
+/* ----------------------------------------------------------------------------
+ * Overlay badge (BadgeAnchor) — a count / dot pinned to a corner of a wrapped
+ * element (a Material-style notification badge). Reuses the [data-badge] fill.
+ * ------------------------------------------------------------------------- */
+:where([data-badge-anchor]) {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+:where([data-badge][data-overlay]) {
+  position: absolute;
+  z-index: 1;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 var(--flx-ui-space-1);
+  justify-content: center;
+  font-size: var(--flx-ui-font-size-2xs, 0.6875rem);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  /* A surface-coloured ring so the badge reads as floating above the element. */
+  box-shadow: 0 0 0 2px var(--flx-ui-color-bg);
+}
+:where([data-badge][data-overlay][data-dot]) {
+  min-width: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+:where([data-badge-anchor][data-placement='top-end']) > [data-overlay] {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+:where([data-badge-anchor][data-placement='top-start']) > [data-overlay] {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+:where([data-badge-anchor][data-placement='bottom-end']) > [data-overlay] {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+:where([data-badge-anchor][data-placement='bottom-start']) > [data-overlay] {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+}
+/* Circular anchor (avatar / circle): nudge the badge in along the diagonal so it
+   sits on the round edge instead of the bounding-box corner. */
+:where([data-badge-anchor][data-overlap='circular'][data-placement='top-end']) > [data-overlay] {
+  top: 14%;
+  right: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='top-start']) > [data-overlay] {
+  top: 14%;
+  left: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='bottom-end']) > [data-overlay] {
+  bottom: 14%;
+  right: 14%;
+}
+:where([data-badge-anchor][data-overlap='circular'][data-placement='bottom-start']) > [data-overlay] {
+  bottom: 14%;
+  left: 14%;
 }
 }

package/dist/css/base.css

@@ -1,4 +1,4 @@
-@layer flx.tokens, flx.components, flx.skin;
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin;
 
 @layer flx.components {
 
@@ -6,5 +6,7 @@
 :where(:root) {
   --flx-ui-ctl-ring: 0 0 0 2px var(--flx-ui-color-bg), 0 0 0 4px var(--flx-ui-color-focus-ring);
   --flx-ui-ctl-font: var(--flx-ui-font-weight-medium);
+  /* Shared chevron glyph (mask source) — colour comes from the consuming rule. */
+  --flx-ui-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 }
 }

package/dist/css/bottom-sheet.css

@@ -74,13 +74,13 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--flx-ui-space-3);
-  padding: var(--flx-ui-space-2) var(--flx-ui-space-5) var(--flx-ui-space-4);
+  padding: var(--flx-ui-space-2) var(--flx-ui-space-4) var(--flx-ui-space-4);
 }
 :where([data-bottom-sheet-title]) {
   margin: 0;
   font-size: var(--flx-ui-font-size-lg);
   font-weight: var(--flx-ui-font-weight-semibold);
-  line-height: var(--flx-ui-leading-tight);
+  line-height: var(--flx-ui-line-height-tight);
   color: var(--flx-ui-color-fg);
 }
 :where([data-bottom-sheet-description]) {
@@ -92,14 +92,14 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 var(--flx-ui-space-5) var(--flx-ui-space-5);
+  padding: 0 var(--flx-ui-space-4) var(--flx-ui-space-4);
 }
 :where([data-bottom-sheet-footer]) {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--flx-ui-space-2);
-  padding: var(--flx-ui-space-4) var(--flx-ui-space-5);
+  padding: var(--flx-ui-space-4) var(--flx-ui-space-4);
   border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
 }
 

package/dist/css/breadcrumb.css

@@ -21,7 +21,7 @@
   color: var(--flx-ui-color-fg-muted);
   text-decoration: none;
   border-radius: var(--flx-ui-radius-sm);
-  transition: color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-breadcrumb-link]:hover) {
   color: var(--flx-ui-color-fg);

package/dist/css/bulk-editor.css

@@ -183,12 +183,8 @@
   align-items: center;
   justify-content: center;
 }
-:where(.flx-ui-be-check) {
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-  accent-color: var(--flx-ui-color-primary);
-}
+/* Selection checkboxes render the <Checkbox> component ([role='checkbox']),
+   which styles itself; the wrap just centres it in the cell. */
 
 /* Fill handle on the active cell */
 :where(.flx-ui-be-fill-handle) {
@@ -406,17 +402,6 @@
   text-align: left;
 }
 
-/* Bulk editor — column header select-all checkbox */
-:where(.flx-ui-be-head-check) {
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  accent-color: var(--flx-ui-color-primary);
-  flex-shrink: 0;
-}
-:where(.flx-ui-be-check:disabled) {
-  cursor: not-allowed;
-}
 
 /* Bulk editor — column resize grip */
 :where(.flx-ui-be-col-resize) {

package/dist/css/button.css

@@ -1,8 +1,43 @@
 @layer flx.components {
 /* ----------------------------------------------------------------------------
- * Button (and any [data-variant] control, e.g. dialog triggers)
+ * Button (and any [data-variant] control, e.g. dialog triggers). Badges also
+ * carry [data-variant], so every rule here excludes [data-badge] — a badge must
+ * never pick up button sizing/colour.
  * ------------------------------------------------------------------------- */
-:where([data-variant]) {
+
+/* Tone (data-tone) is orthogonal to variant: it remaps the button's own
+ * `--flx-ui-color-primary*` to a semantic colour, so every variant (solid/outline/
+ * ghost/soft) renders in that tone AND skins follow (they read color-primary). The
+ * hover/active steps are derived (the semantic tokens only ship solid/subtle/fg). */
+:where([data-tone='danger']) {
+  --flx-ui-color-primary: var(--flx-ui-color-danger);
+  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-danger) 88%, #000);
+  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-danger) 78%, #000);
+  --flx-ui-color-primary-fg: var(--flx-ui-color-danger-fg);
+  --flx-ui-color-primary-subtle: var(--flx-ui-color-danger-subtle);
+}
+:where([data-tone='success']) {
+  --flx-ui-color-primary: var(--flx-ui-color-success);
+  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-success) 88%, #000);
+  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-success) 78%, #000);
+  --flx-ui-color-primary-fg: var(--flx-ui-color-success-fg);
+  --flx-ui-color-primary-subtle: var(--flx-ui-color-success-subtle);
+}
+:where([data-tone='warning']) {
+  --flx-ui-color-primary: var(--flx-ui-color-warning);
+  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-warning) 88%, #000);
+  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-warning) 78%, #000);
+  --flx-ui-color-primary-fg: var(--flx-ui-color-warning-fg);
+  --flx-ui-color-primary-subtle: var(--flx-ui-color-warning-subtle);
+}
+:where([data-tone='neutral']) {
+  --flx-ui-color-primary: var(--flx-ui-color-fg-muted);
+  --flx-ui-color-primary-hover: var(--flx-ui-color-fg);
+  --flx-ui-color-primary-active: var(--flx-ui-color-fg);
+  --flx-ui-color-primary-fg: var(--flx-ui-color-bg);
+  --flx-ui-color-primary-subtle: var(--flx-ui-color-bg-muted);
+}
+:where([data-variant]:not([data-badge])) {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -20,6 +55,9 @@
   border: var(--flx-ui-border-width-thin) solid transparent;
   border-radius: var(--flx-ui-radius-md);
   height: var(--flx-ui-size-md);
+  /* Never narrower than tall, so an icon-only button (a close ×, a chevron)
+     stays square instead of collapsing to its glyph width. */
+  min-width: var(--flx-ui-size-md);
   padding: 0 var(--flx-ui-space-4);
   color: var(--flx-ui-color-fg);
   transition:
@@ -27,54 +65,57 @@
     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-variant][data-size='sm']) {
+:where([data-variant]:not([data-badge])[data-size='sm']) {
   height: var(--flx-ui-size-sm);
+  min-width: var(--flx-ui-size-sm);
   padding: 0 var(--flx-ui-space-3);
   font-size: var(--flx-ui-font-size-sm);
 }
-:where([data-variant][data-size='lg']) {
+:where([data-variant]:not([data-badge])[data-size='lg']) {
   height: var(--flx-ui-size-lg);
+  min-width: var(--flx-ui-size-lg);
   padding: 0 var(--flx-ui-space-5);
   font-size: var(--flx-ui-font-size-lg);
 }
 
 /* Solid: the primary action — a flat, confident accent. Depth comes from the
    color step change on interaction, not from shadow or sheen. */
-:where([data-variant='solid']) {
+:where([data-variant='solid']:not([data-badge])) {
   background: var(--flx-ui-color-primary);
   color: var(--flx-ui-color-primary-fg);
 }
-:where([data-variant='solid']:hover:not([data-disabled])) {
+:where([data-variant='solid']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-primary-hover);
 }
-:where([data-variant='solid']:active:not([data-disabled])) {
+:where([data-variant='solid']:not([data-badge]):active:not([data-disabled])) {
   background: var(--flx-ui-color-primary-active);
 }
 
-/* Soft: a tinted, low-key primary. */
-:where([data-variant='soft']) {
-  background: var(--flx-ui-color-primary-subtle);
+/* Soft: a tinted, low-key primary. Deepened a touch over the bare subtle tint so
+   it carries enough weight to read as a control, then steps up on hover. */
+:where([data-variant='soft']:not([data-badge])) {
+  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 10%);
   color: var(--flx-ui-color-primary-active);
 }
-:where([data-variant='soft']:hover:not([data-disabled])) {
-  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 12%);
+:where([data-variant='soft']:not([data-badge]):hover:not([data-disabled])) {
+  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 20%);
 }
 
 /* Outline: a flat hairline-bordered control. */
-:where([data-variant='outline']) {
+:where([data-variant='outline']:not([data-badge])) {
   border-color: var(--flx-ui-color-border-strong);
   background: var(--flx-ui-color-bg);
 }
-:where([data-variant='outline']:hover:not([data-disabled])) {
+:where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-bg-subtle);
   border-color: var(--flx-ui-color-fg-muted);
 }
 
 /* Ghost: text-only until hovered. */
-:where([data-variant='ghost']) {
+:where([data-variant='ghost']:not([data-badge])) {
   color: var(--flx-ui-color-fg);
 }
-:where([data-variant='ghost']:hover:not([data-disabled])) {
+:where([data-variant='ghost']:not([data-badge]):hover:not([data-disabled])) {
   background: var(--flx-ui-color-bg-muted);
 }
 
@@ -83,6 +124,25 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+/* Buttons get a flat, neutral disabled instead of a dimmed accent (which reads
+   muddy). Filled variants drop to a grey fill; outline/ghost stay flat. */
+:where([data-variant]:not([data-badge])[data-disabled]) {
+  opacity: 1;
+  box-shadow: none;
+  color: var(--flx-ui-color-fg-muted);
+}
+:where([data-variant='solid']:not([data-badge])[data-disabled]),
+:where([data-variant='soft']:not([data-badge])[data-disabled]) {
+  background: var(--flx-ui-color-bg-muted);
+  border-color: transparent;
+}
+:where([data-variant='outline']:not([data-badge])[data-disabled]) {
+  background: transparent;
+  border-color: var(--flx-ui-color-border);
+}
+:where([data-variant='ghost']:not([data-badge])[data-disabled]) {
+  background: transparent;
+}
 
 /* The signature focus ring: a surface-colored gap then an accent halo. */
 :where(:focus-visible) {

package/dist/css/calendar.css

@@ -34,11 +34,12 @@
   background: transparent;
   color: var(--flx-ui-color-fg-muted);
   cursor: pointer;
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
 :where([data-calendar-nav]:hover:not([disabled])) {
-  background: var(--flx-ui-color-bg-subtle);
+  background: var(--flx-ui-color-bg-muted);
+  border-color: var(--flx-ui-color-border-strong);
   color: var(--flx-ui-color-fg);
 }
 :where([data-calendar-nav]:focus-visible) {
@@ -77,11 +78,12 @@
   font-size: var(--flx-ui-font-size-sm);
   color: var(--flx-ui-color-fg);
   cursor: pointer;
-  transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
-              color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
+  transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+              color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
 }
-:where([data-calendar-day]:hover:not([data-disabled]):not([data-unavailable])) {
-  background: var(--flx-ui-color-bg-subtle);
+:where([data-calendar-day]:hover:not([data-disabled]):not([data-unavailable]):not([data-selected])) {
+  background: var(--flx-ui-color-primary-subtle);
+  color: var(--flx-ui-color-primary-active);
 }
 :where([data-calendar-day]:focus-visible) {
   outline: none;

package/dist/css/card.css

@@ -12,6 +12,10 @@
   box-shadow: var(--flx-ui-shadow-sm);
   overflow: hidden;
 }
+/* Tonal elevation in dark — a card lifts by lightening, not by an unseen shadow. */
+[data-theme='dark'] :where([data-card]) {
+  background: var(--flx-ui-gray-2);
+}
 :where([data-card-header]) {
   display: flex;
   flex-direction: column;
@@ -22,7 +26,7 @@
   margin: 0;
   font-size: var(--flx-ui-font-size-lg);
   font-weight: var(--flx-ui-font-weight-semibold);
-  line-height: var(--flx-ui-leading-tight);
+  line-height: var(--flx-ui-line-height-tight);
   color: var(--flx-ui-color-fg);
 }
 :where([data-card-description]) {