canny-ui 6.7.0 → 7.0.0

package/dist/table-resize.js

@@ -40,9 +40,24 @@
     if (!resizer) {
       resizer = document.createElement('span');
       resizer.className = 'th-resizer';
-      resizer.setAttribute('aria-hidden', 'true');
       th.appendChild(resizer);
     }
+    // keyboard-operable separator: Left / Right resize the column (Shift = bigger steps)
+    resizer.setAttribute('role', 'separator');
+    resizer.setAttribute('aria-orientation', 'vertical');
+    resizer.setAttribute('aria-label', 'Resize ' + (th.textContent || '').trim() + ' column');
+    resizer.setAttribute('aria-valuemin', String(MIN_WIDTH));
+    resizer.setAttribute('tabindex', '0');
+
+    function keyDown(e) {
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+      e.preventDefault();
+      var step = (e.shiftKey ? 40 : 10) * (e.key === 'ArrowRight' ? 1 : -1);
+      var next = Math.max(MIN_WIDTH, th.offsetWidth + step);
+      th.style.width = next + 'px';
+      resizer.setAttribute('aria-valuenow', String(next));
+    }
+    resizer.addEventListener('keydown', keyDown);
 
     function pointerDown(e) {
       e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canny-ui",
-  "version": "6.7.0",
+  "version": "7.0.0",
   "description": "Pure CSS foundation for the Canny-UI design system — tokens, layout utilities, and a battery of enterprise components, shipped as one flat stylesheet.",
   "main": "dist/canny-ui.min.css",
   "style": "dist/canny-ui.min.css",

package/src/_utilities.scss

@@ -123,10 +123,10 @@ $spaces: (
 .text-secondary { color: var(--text-secondary); }
 .text-muted     { color: var(--text-muted); }
 .text-accent    { color: var(--text-accent); }
-.text-danger    { color: var(--color-danger); }
-.text-success   { color: var(--color-success); }
-.text-warning   { color: var(--color-warning); }
-.text-info      { color: var(--color-info); }
+.text-danger    { color: var(--color-danger-text); }
+.text-success   { color: var(--color-success-text); }
+.text-warning   { color: var(--color-warning-text); }
+.text-info      { color: var(--color-info-text); }
 
 // ── Primitives ───────────────────────────────────────────────────────────
 .cny-label {

package/src/base/_motion.scss

@@ -0,0 +1,32 @@
+// ── Reduced motion ───────────────────────────────────────────────
+// One global opt-out for every Canny-UI surface. Durations collapse to ~0
+// (not `none`) so `transitionend` / `animationend` still fire and state
+// still lands on its final value. Component-level rules keep working.
+@media (prefers-reduced-motion: reduce) {
+  [class*='cny-'],
+  [class*='cny-']::before,
+  [class*='cny-']::after,
+  .btn,
+  .btn::before,
+  .btn::after,
+  .btn-ripple,
+  .checkbox,
+  .radio,
+  .switch,
+  .switch::before,
+  .switch-thumb,
+  .input {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  // Scrollbar thumb transitions (see scrollbar-mixin) — pseudo-elements
+  // on any scroll container, so they can't be matched by a class prefix.
+  *::-webkit-scrollbar-thumb {
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/base/_reset.scss

@@ -14,3 +14,10 @@ body {
   background: var(--bg-base);
   color: var(--text-primary);
 }
+
+// Themed text selection — readable in light and dark (the browser default is a
+// fixed blue that clashes with dark surfaces).
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 32%, transparent);
+  color: inherit;
+}

package/src/base/_scrollbar-mixin.scss

@@ -0,0 +1,84 @@
+// ── Expand-on-hover scrollbar ────────────────────────────────────
+// The one scrollbar look used across Canny-UI. A hairline pill at rest that
+// fades back while the container is idle, brightens when the container is
+// hovered, and swells to a chunky grab handle when the
+// pointer reaches the scrollbar itself.
+//
+// Built on ::-webkit-scrollbar, which Chromium ignores on any element whose
+// scrollbar-width / scrollbar-color is not `auto` — so both are reset here.
+// Firefox has no pseudo-element styling; it gets the standard thin scrollbar.
+//
+// Geometry: the 14px gutter is the grab target; the transparent border is
+// what's subtracted from it to get the visible pill. The pill is anchored to
+// the outer edge with a 2px margin: 14 − 8 − 2 = 4px at rest, and the inner
+// border shrinks to 2px on hover, so it grows inward to 14 − 2 − 2 = 10px.
+@mixin expand-scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  @supports (-moz-appearance: none) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-color-strong) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 0 solid transparent;
+    border-radius: var(--radius-full);
+    background-clip: content-box;
+    background-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
+    // Ease-out-quint: fast start, long soft landing — reads as a glide, not a snap.
+    transition:
+      border-width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+      background-color 0.24s ease-out;
+  }
+
+  // The pill hugs the outer edge (right for vertical, bottom for horizontal)
+  // and grows inward: only the inner border shrinks on hover.
+  &::-webkit-scrollbar-thumb:vertical {
+    border-width: 3px 2px 3px 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal {
+    border-width: 8px 3px 2px;
+  }
+
+  // Container is hovered or being keyboard-scrolled → the pill firms up.
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--text-muted) 65%, transparent);
+  }
+
+  // Pointer on the scrollbar → the thumb swells and darkens.
+  &::-webkit-scrollbar-thumb:vertical:hover,
+  &::-webkit-scrollbar-thumb:vertical:active {
+    border-left-width: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal:hover,
+  &::-webkit-scrollbar-thumb:horizontal:active {
+    border-top-width: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover,
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--text-muted);
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--text-secondary);
+  }
+}

package/src/base/_touch.scss

@@ -0,0 +1,60 @@
+// ── Touch targets ────────────────────────────────────────────────
+// Small controls get an invisible >=44px hit area on coarse pointers only;
+// visual size on desktop is untouched. Pseudo-element where the host allows
+// it, a min-size where the host clips overflow (.btn).
+@media (pointer: coarse) {
+  // Hit pseudo needs a positioned host.
+  .checkbox,
+  .radio,
+  .switch,
+  .cny-slider-thumb,
+  .cny-pagination-btn,
+  .cny-chip-delete,
+  .cny-chip-remove,
+  .cny-chip.is-interactive,
+  .cny-dialog-close,
+  .cny-drawer-close,
+  .alert-close,
+  .cny-select-clear,
+  .cny-ac-clear {
+    position: relative;
+  }
+
+  // .cny-input-action and .cny-toast-close are already positioned; they get only the pseudo below.
+
+  .checkbox,
+  .radio,
+  .switch,
+  .cny-slider-thumb,
+  .cny-pagination-btn,
+  .cny-chip-delete,
+  .cny-chip-remove,
+  .cny-chip.is-interactive,
+  .cny-input-action,
+  .cny-dialog-close,
+  .cny-drawer-close,
+  .alert-close,
+  .cny-toast-close,
+  .cny-select-clear,
+  .cny-multiselect-clear,
+  .cny-ac-clear {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 44px);
+      height: max(100%, 44px);
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  // .btn clips overflow for the ripple — grow the box instead. Link buttons are inline text.
+  .btn:not(.link) { min-height: 44px; }
+  .btn.icon,
+  .btn.circle { min-width: 44px; }
+
+  // Neighbouring cells/rows would fight over an overlapping hit pseudo — grow the box.
+  .cny-datepicker-cell { height: 44px; }
+  .cny-menu-item { min-height: 44px; }
+}

package/src/canny-ui.scss

@@ -3,6 +3,7 @@
 @use 'tokens/semantic';
 @use 'base/reset';
 @use 'base/typography';
+@use 'base/motion';
 @use 'components/buttons';
 @use 'components/inputs';
 @use 'components/cards';
@@ -35,6 +36,8 @@
 @use 'components/panels';
 @use 'components/datatable';
 @use 'components/charts';
+@use 'components/gantt';
+@use 'components/charts-extra';
 @use 'components/list';
 @use 'components/tabs';
 @use 'components/autocomplete';
@@ -43,4 +46,6 @@
 @use 'components/accordion';
 @use 'components/slider';
 @use 'components/stepper';
+// Touch targets override component sizes, so they load after every component.
+@use 'base/touch';
 @use 'utilities';

package/src/components/_accordion.scss

@@ -44,10 +44,19 @@
 
     &:hover { background: var(--bg-surface-low); }
     &:focus-visible {
-      outline: 2px solid var(--color-primary);
+      outline: 2px solid var(--border-focus);
       outline-offset: -2px;
     }
 
+    &:disabled,
+    &[data-disabled] {
+      color: var(--text-disabled);
+      cursor: not-allowed;
+      &:hover { background: transparent; }
+      .cny-accordion-trigger-icon,
+      .cny-accordion-trigger-chevron { color: var(--text-disabled); }
+    }
+
     &-icon {
       display: inline-flex;
       align-items: center;

package/src/components/_alerts.scss

@@ -8,6 +8,10 @@
   to   { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes alert-exit {
+  to { opacity: 0; transform: translateY(-4px) scale(0.98); }
+}
+
 .alert {
   --alert-accent: var(--color-info);
   --alert-accent-soft: var(--color-info-soft);
@@ -31,6 +35,12 @@
     animation: none;
   }
 
+  // dismiss: short fade-out before the consumer's onDismiss unmounts it
+  &.is-leaving {
+    animation: alert-exit 160ms ease-in forwards;
+    pointer-events: none;
+  }
+
   &-icon {
     flex: none;
     display: inline-flex;
@@ -91,7 +101,7 @@
       background: var(--bg-surface-low);
     }
     &:focus-visible {
-      outline: 2px solid var(--alert-accent);
+      outline: 2px solid var(--border-focus);
       outline-offset: 1px;
     }
   }
@@ -103,7 +113,7 @@
     --alert-accent-on: var(--color-info-on);
     background: var(--color-info-soft);
     border-color: color-mix(in srgb, var(--color-info) 22%, transparent);
-    .alert-title { color: var(--color-info); }
+    .alert-title { color: var(--color-info-text); }
   }
   &.success {
     --alert-accent: var(--color-success);
@@ -111,7 +121,7 @@
     --alert-accent-on: var(--color-success-on);
     background: var(--color-success-soft);
     border-color: color-mix(in srgb, var(--color-success) 22%, transparent);
-    .alert-title { color: var(--color-success); }
+    .alert-title { color: var(--color-success-text); }
   }
   &.warning {
     --alert-accent: var(--color-warning);
@@ -119,7 +129,7 @@
     --alert-accent-on: var(--color-warning-on);
     background: var(--color-warning-soft);
     border-color: color-mix(in srgb, var(--color-warning) 24%, transparent);
-    .alert-title { color: var(--color-warning); }
+    .alert-title { color: var(--color-warning-text); }
   }
   &.danger {
     --alert-accent: var(--color-danger);
@@ -127,7 +137,7 @@
     --alert-accent-on: var(--color-danger-on);
     background: var(--color-danger-soft);
     border-color: color-mix(in srgb, var(--color-danger) 26%, transparent);
-    .alert-title { color: var(--color-danger); }
+    .alert-title { color: var(--color-danger-text); }
   }
 
   // Solid variant — flat accent fill
@@ -140,15 +150,15 @@
     .alert-body  { color: var(--alert-accent-on); opacity: 0.88; }
 
     .alert-icon {
-      background: rgba(255, 255, 255, 0.18);
+      background: color-mix(in srgb, var(--alert-accent-on) 18%, transparent);
       color: var(--alert-accent-on);
     }
 
     .alert-close {
       color: var(--alert-accent-on);
       opacity: 0.78;
-      &:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
-      &:focus-visible { outline-color: rgba(255, 255, 255, 0.85); }
+      &:hover { opacity: 1; background: color-mix(in srgb, var(--alert-accent-on) 14%, transparent); }
+      &:focus-visible { outline-color: var(--alert-accent-on); }
     }
   }
 }

package/src/components/_autocomplete.scss

@@ -1,3 +1,4 @@
+@use '../base/scrollbar-mixin' as sb;
 @use '../tokens/primitives' as *;
 
 // Autocomplete — searchable combobox built on cmdk + Radix Popover.
@@ -18,7 +19,7 @@
   cursor: pointer;
   padding: 0 $space-3;
 
-  &.is-open { border-color: var(--border-focus); }
+  &.is-open { border-color: var(--border-input-focus); }
   &[disabled] { cursor: not-allowed; opacity: 0.6; }
 }
 
@@ -49,8 +50,8 @@
 
   &:hover { color: var(--text-primary); background: var(--bg-surface-low); }
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
   }
 }
 
@@ -61,13 +62,11 @@
 
 // ── Popover content ──────────────────────────────────────────
 .cny-ac-content {
-  z-index: 1010;
+  z-index: var(--z-popover, 1010);
   background: var(--bg-surface-lowest);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color-strong);
   border-radius: var(--radius-sm);
-  box-shadow:
-    0 1px 0 rgba(15, 23, 42, 0.04),
-    0 12px 28px -12px rgba(15, 23, 42, 0.22);
+  box-shadow: var(--shadow-popover);
   overflow: hidden;
   font-family: var(--font-body);
   animation: cny-ac-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -98,7 +97,7 @@
   overflow-y: auto;
   max-height: 280px;
   padding: 6px;
-  scrollbar-width: thin;
+  @include sb.expand-scrollbar;
 }
 
 .cny-ac-empty,
@@ -164,7 +163,7 @@
   justify-content: center;
   width: 16px;
   height: 16px;
-  color: var(--color-primary);
+  color: var(--text-accent);
 }
 
 .cny-ac-checkbox {
@@ -190,3 +189,10 @@
   .cny-ac-content { animation: none; }
   .cny-ac-loading-spinner { animation: none; }
 }
+
+// Matched substring inside an option label (`highlightMatch`)
+.cny-ac-mark {
+  background: transparent;
+  color: var(--text-accent);
+  font-weight: 600;
+}

package/src/components/_avatar.scss

@@ -11,7 +11,7 @@
   width: 32px;
   height: 32px;
   background: var(--color-primary-soft);
-  color: var(--color-primary);
+  color: var(--text-accent);
   border-radius: 50%;
   font-family: var(--font-body);
   font-size: 0.8125rem;
@@ -29,6 +29,21 @@
     border-radius: inherit;
   }
 
+  // Empty avatar (no image / name / children): a person glyph instead of a blank disc.
+  .avatar-fallback {
+    display: inline-flex;
+    width: 58%;
+    height: 58%;
+    color: inherit;
+    opacity: 0.8;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+    }
+  }
+
   // Presence dot — absolutely positioned, escapes the circle by ~15%
   // and is ringed in the page surface color so it reads on any background.
   &.online::after,
@@ -90,3 +105,9 @@
     box-shadow: 0 0 0 2px var(--bg-surface-lowest);
   }
 }
+
+// "+N" overflow avatar in an AvatarGroup
+.avatar.avatar-overflow {
+  background: var(--bg-surface-low);
+  color: var(--text-muted);
+}

package/src/components/_breadcrumb.scss

@@ -33,8 +33,24 @@
     transition: color 120ms ease, background-color 120ms ease;
     &:hover { color: var(--text-primary); background: var(--bg-surface-low); }
     &:focus-visible {
-      outline: 2px solid var(--color-primary);
-      outline-offset: 1px;
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  &-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 4px;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    &:hover { color: var(--text-primary); background: var(--bg-surface-low); }
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
     }
   }
 
@@ -54,3 +70,21 @@
     .cny-breadcrumb-list { gap: 4px; }
   }
 }
+
+// Coarse pointers: invisible >=44px hit area around the small link / ellipsis targets.
+@media (pointer: coarse) {
+  .cny-breadcrumb-link,
+  .cny-breadcrumb-ellipsis {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 44px);
+      height: 44px;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/src/components/_buttons.scss

@@ -30,6 +30,8 @@
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
+  max-width: 100%;
+  min-width: 0;
   -webkit-tap-highlight-color: transparent;
   transition:
     background-color var(--transition-fast),
@@ -45,8 +47,8 @@
   }
 
   &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--ring-width) var(--ring-color);
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
   }
 
   // ── Content wrapper — keeps children above the ripple layer ───────────
@@ -57,6 +59,15 @@
     align-items: center;
     justify-content: center;
     gap: inherit;
+    min-width: 0;
+    max-width: 100%;
+
+    // A long label truncates instead of overflowing the button.
+    > .btn-label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     // An icon is a flex item here, so it inherits flex-shrink: 1 and squashes
     // out of square as soon as the label needs the room — a 15px lucide icon
@@ -144,10 +155,10 @@
       box-shadow: inset 0 0 0 1px var(--border-color-strong), inset 0 1px 0 0 rgba(0, 0, 0, 0.04);
     }
 
-    &.danger  { color: var(--color-danger); }
-    &.warning { color: var(--color-warning); }
-    &.success { color: var(--color-success); }
-    &.info    { color: var(--color-info); }
+    &.danger  { color: var(--color-danger-text); }
+    &.warning { color: var(--color-warning-text); }
+    &.success { color: var(--color-success-text); }
+    &.info    { color: var(--color-info-text); }
   }
 
   // ── Dashed — Ant Design-style, border intent-colors on hover ───────────
@@ -164,17 +175,17 @@
     &:hover:not(:disabled) {
       background: var(--bg-surface-low);
       border-color: var(--color-primary);
-      color: var(--color-primary);
+      color: var(--text-accent);
     }
     &:active:not(:disabled) {
       background: var(--bg-surface-edge);
       border-color: var(--color-primary-active);
     }
 
-    &.danger  { &:hover:not(:disabled) { border-color: var(--color-danger);  color: var(--color-danger); } }
-    &.warning { &:hover:not(:disabled) { border-color: var(--color-warning); color: var(--color-warning); } }
-    &.success { &:hover:not(:disabled) { border-color: var(--color-success); color: var(--color-success); } }
-    &.info    { &:hover:not(:disabled) { border-color: var(--color-info);    color: var(--color-info); } }
+    &.danger  { &:hover:not(:disabled) { border-color: var(--color-danger);  color: var(--color-danger-text); } }
+    &.warning { &:hover:not(:disabled) { border-color: var(--color-warning); color: var(--color-warning-text); } }
+    &.success { &:hover:not(:disabled) { border-color: var(--color-success); color: var(--color-success-text); } }
+    &.info    { &:hover:not(:disabled) { border-color: var(--color-info);    color: var(--color-info-text); } }
   }
 
   // ── Ghost — text-only, tints on hover ──────────────────────────────────
@@ -185,23 +196,23 @@
     &:hover:not(:disabled)  { background: var(--bg-surface-low); }
     &:active:not(:disabled) { background: var(--bg-surface-edge); }
 
-    &.danger  { color: var(--color-danger);  &:hover:not(:disabled) { background: var(--color-danger-soft); } }
-    &.warning { color: var(--color-warning); &:hover:not(:disabled) { background: var(--color-warning-soft); } }
-    &.success { color: var(--color-success); &:hover:not(:disabled) { background: var(--color-success-soft); } }
-    &.info    { color: var(--color-info);    &:hover:not(:disabled) { background: var(--color-info-soft); } }
+    &.danger  { color: var(--color-danger-text);  &:hover:not(:disabled) { background: var(--color-danger-soft); } }
+    &.warning { color: var(--color-warning-text); &:hover:not(:disabled) { background: var(--color-warning-soft); } }
+    &.success { color: var(--color-success-text); &:hover:not(:disabled) { background: var(--color-success-soft); } }
+    &.info    { color: var(--color-info-text);    &:hover:not(:disabled) { background: var(--color-info-soft); } }
   }
 
   // ── Soft — tonal fill, gentle presence ─────────────────────────────────
   &.soft {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--text-accent);
 
     &:hover:not(:disabled) { background: var(--bg-surface-edge); }
 
-    &.danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
-    &.warning { background: var(--color-warning-soft); color: var(--color-warning); }
-    &.success { background: var(--color-success-soft); color: var(--color-success); }
-    &.info    { background: var(--color-info-soft);    color: var(--color-info); }
+    &.danger  { background: var(--color-danger-soft);  color: var(--color-danger-text); }
+    &.warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
+    &.success { background: var(--color-success-soft); color: var(--color-success-text); }
+    &.info    { background: var(--color-info-soft);    color: var(--color-info-text); }
   }
 
   // ── Link — inline text action (no ripple, no overflow clip) ────────────
@@ -216,7 +227,7 @@
     text-decoration-thickness: 1px;
     text-underline-offset: 0.2em;
 
-    &:hover:not(:disabled) { color: var(--color-primary-hover); }
+    &:hover:not(:disabled) { color: var(--color-primary-active); }
 
     .btn-ripple { display: none; }
   }
@@ -269,10 +280,10 @@
   // ── Toggle (pressed) state ─ aria-pressed="true" driven by Radix Toggle
   &[aria-pressed='true'],
   &[data-state='on'] {
-    &.ghost   { background: var(--color-primary-soft); color: var(--color-primary); }
-    &.outline { background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-xs); }
+    &.ghost   { background: var(--color-primary-soft); color: var(--text-accent); }
+    &.outline { background: var(--color-primary-soft); color: var(--text-accent); box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-xs); }
     &.soft    { background: var(--color-primary); color: var(--color-primary-on); }
-    &.dashed  { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
+    &.dashed  { background: var(--color-primary-soft); color: var(--text-accent); border-color: var(--color-primary); }
   }
 }