@salemcobalt/ui 0.2.0-rc.30 → 0.2.0-rc.32

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.30 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.32 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -20,6 +20,26 @@
     outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
     outline-offset: var(--sc-border-width-focus);
   }
+  /* Controls on an accent fill. The scope repoints the semantic tokens its descendants read, the way raised surfaces
+     repoint the washes (docs/adr/0003), so secondary and ghost Buttons, IconButtons, muted text and focus rings inside
+     need no rules of their own: text, strong borders and focus rings take text.on-accent; hover and pressed take
+     accent.hover and accent.active, the primary Button's states. The element's own focus ring is outside the fill, so it
+     keeps its colour by setting it again. Contrast: packages/tokens/test/contrast.test.ts. */
+  .sc-on-accent,
+  .sc-toast[data-tone='accent'] {
+    --sc-color-text-default: var(--sc-color-text-on-accent);
+    --sc-color-text-muted: var(--sc-color-text-on-accent);
+    --sc-color-border-strong: var(--sc-color-text-on-accent);
+    --sc-color-border-focus: var(--sc-color-text-on-accent);
+    --sc-color-surface-hover: var(--sc-color-accent-hover);
+    --sc-color-surface-active: var(--sc-color-accent-active);
+    background: var(--sc-color-accent-default);
+    color: var(--sc-color-text-on-accent);
+  }
+  .sc-on-accent:focus-visible,
+  .sc-toast[data-tone='accent']:focus-visible {
+    outline-color: var(--sc-color-accent-default);
+  }
   /* Keeps content for assistive tech only. */
   .sc-visually-hidden {
     position: absolute;
@@ -906,17 +926,20 @@
     font-weight: var(--sc-font-weight-semibold);
     letter-spacing: var(--sc-font-tracking-snug);
     padding-inline-end: var(--sc-spacing-xl);
+    text-wrap-style: balance;
   }
   .sc-dialog__description {
     margin: var(--sc-spacing-2xs) 0 0;
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-normal);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-dialog__body {
     margin-block-start: var(--sc-spacing-md);
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-normal);
+    text-wrap-style: pretty;
   }
   /* Content wraps instead of widening the popup: long URLs break, fields and media stay inside the box. */
   .sc-dialog__title,
@@ -1340,6 +1363,7 @@
     min-inline-size: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-menu__trailing {
     grid-column: 3;
@@ -1422,11 +1446,13 @@
     margin: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-field__error {
     margin: 0;
     color: var(--sc-color-danger-text);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   /* Input */
   .sc-input-wrap {
@@ -1765,6 +1791,7 @@
     grid-column: 2;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-choice[data-label-position='start'] > .sc-choice__description {
     grid-column: 1;
@@ -2335,6 +2362,7 @@
     font-size: var(--sc-font-size-md);
     line-height: var(--sc-font-line-height-snug);
     font-weight: var(--sc-font-weight-semibold);
+    text-wrap-style: balance;
   }
   .sc-popover__title:has(~ .sc-popover__close),
   .sc-popover__close ~ .sc-popover__title {
@@ -2343,6 +2371,7 @@
   .sc-popover__description {
     margin: var(--sc-spacing-2xs) 0 0;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-popover__close {
     position: absolute;
@@ -2839,6 +2868,7 @@
     font-size: var(--sc-font-size-xs);
     text-align: start;
     caption-side: top;
+    text-wrap-style: pretty;
   }
   .sc-table__header,
   .sc-table__cell {
@@ -3130,6 +3160,10 @@
   .sc-toast[data-tone='danger'] {
     border-inline-start-color: var(--sc-color-danger-solid);
   }
+  /* Filled; the fill, text and button states come from the .sc-on-accent scope (base.css). */
+  .sc-toast[data-tone='accent'] {
+    border-color: var(--sc-color-accent-default);
+  }
   .sc-toast[data-starting-style],
   .sc-toast[data-ending-style] {
     opacity: 0;
@@ -3143,11 +3177,13 @@
     margin: 0;
     font-size: inherit;
     font-weight: var(--sc-font-weight-medium);
+    text-wrap-style: balance;
   }
   .sc-toast__description {
     margin: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-toast__action,
   .sc-toast__close {
@@ -3252,6 +3288,7 @@
     grid-area: hint;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   
   /* ---- chip.css ---- */
@@ -5018,6 +5055,7 @@
   .sc-file-preview__note {
     margin: var(--sc-spacing-xs) 0 0;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-file-preview__tab > .sc-file-preview__note {
     margin: 0;
@@ -5258,6 +5296,7 @@
     background: var(--sc-color-surface-sunken);
     font-size: var(--sc-font-size-xs);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   @media (height <= 820px) {
     .sc-flow__rail-note {
@@ -5362,6 +5401,7 @@
   .sc-flow__step-description {
     max-inline-size: 60ch;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   
   /* Footer: back at the start, hint and primary action at the end, every button a 44px target. */
@@ -5615,6 +5655,7 @@
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-ui);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-reason-list[data-size='sm'] {
     --_m: 7px;
@@ -5752,6 +5793,7 @@
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-ui);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-quote__label {
     display: inline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.30",
+  "version": "0.2.0-rc.32",
   "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton, Score, ReasonList, WordDiff, Quote; TextEditor (CodeMirror 6, inline word diffs) at @salemcobalt/ui/editor.",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
     "diff": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.30"
+    "@salemcobalt/tokens": "^0.2.0-rc.32"
   },
   "peerDependenciesMeta": {
     "@codemirror/commands": {
@@ -109,7 +109,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.30"
+    "@salemcobalt/tokens": "^0.2.0-rc.32"
   },
   "publishConfig": {
     "access": "public"