@lerianstudio/sindarian-ui 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/globals.css

@@ -541,7 +541,7 @@
   }
 }
 
-/* Sonner toast overrides — solid bold backgrounds (Radix parity) */
+/* Sonner toast overrides — tinted surfaces from the system token families */
 [data-sonner-toaster] {
   --width: 420px;
   pointer-events: auto !important;
@@ -559,41 +559,41 @@
 }
 
 /*
-  Type fills come from the system token families, so a toast themes with the
-  rest of the app. All three coloured types take ONE ink, --accent-foreground:
-  a solid system fill is bright enough to need near-black ink in BOTH themes,
-  and that token is the only one in this sheet that is near-black in both.
-
-  It replaced the per-family reasoning that stood here, which routed success
-  and error through --primary-foreground because that token inverts (white in
-  light, base/800 in dark). Inverting was the bug: white ink on the LIGHT
-  fills measured 3.35:1 on --system-success and 3.78:1 on --system-error,
-  both under AA, and no token value can fix that from the white side — the
-  light green/600 and red/500 fills sit mid-luminance, so white caps at ~3.8
-  while near-black reaches 5.9 and 5.3. Ratios now, ink over fill:
-  light 5.93 / 5.25 / 11.17 and dark 11.39 / 7.23 / 13.00
-  (success / error / warning). The dark pairs were already passing at
-  8.51 / 5.41 / 13.00 and only gained. `toast ink` in
-  src/__tests__/tokens-contract.test.ts recomputes all six from these
-  declarations, so the next token edit that drops a pair under 4.5 fails
-  instead of shipping.
+  Each coloured type paints the `surface` + `text` + `border` trio of its own
+  family — the pairing every other tinted component in the kit already uses
+  (`components/ui/badge/index.tsx`, `enterprise/alert-banner/index.tsx`).
+  `surface` is the only slot in a system family built to sit BEHIND content: it
+  darkens on the dark canvas, while `base` and `h1a` are fill and ink slots
+  that INVERT between themes (`--system-success-h1a` is #166534 in light and
+  #BBF7D0 in dark). Grounding toast text on either of those forces a different
+  ink per theme, and the toast stops tracking the family it names.
+
+  Ink over ground, light / dark: success 6.81 / 10.62, error 7.60 / 8.51,
+  warning 6.62 / 11.70 — every half clear of the 4.5 floor by more than two
+  points. `system text tokens` in `src/__tests__/tokens-contract.test.ts`
+  already measures this pair for all five families, so the toast is covered by
+  the gate that guards the pills rather than by a rule written for it alone;
+  `sonner toast ink` there reads whichever pair these rules declare.
+
+  `info` stays neutral on `--card`: an informational toast is the unstyled
+  case, not a fourth colour.
 */
 [data-sonner-toast][data-type='success'] {
-  --normal-bg: hsl(var(--system-success));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-success-surface));
+  --normal-text: hsl(var(--system-success-text));
+  --normal-border: hsl(var(--system-success-border));
 }
 
 [data-sonner-toast][data-type='error'] {
-  --normal-bg: hsl(var(--system-error));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-error-surface));
+  --normal-text: hsl(var(--system-error-text));
+  --normal-border: hsl(var(--system-error-border));
 }
 
 [data-sonner-toast][data-type='warning'] {
-  --normal-bg: hsl(var(--system-alert));
-  --normal-text: hsl(var(--accent-foreground));
-  --normal-border: transparent;
+  --normal-bg: hsl(var(--system-alert-surface));
+  --normal-text: hsl(var(--system-alert-text));
+  --normal-border: hsl(var(--system-alert-border));
 }
 
 [data-sonner-toast][data-type='info'] {
@@ -602,8 +602,32 @@
   --normal-border: hsl(var(--border));
 }
 
-[data-sonner-toast] [data-title] {
-  font-weight: 600;
+/*
+  The title outranks the description, and both rules have to WIN the cascade
+  for that to mean anything. Sonner ships
+  `[data-sonner-toast][data-styled='true'] [data-title]` at font-weight 500 and
+  its description twin at 400 — both (0,3,0), both injected at runtime.
+  The title rule here was a plain `[data-sonner-toast] [data-title]` (0,2,0):
+  it declared 600 and rendered at 500, losing outright, while the description
+  carried `!important` and rendered at 600. The hierarchy came out inverted on
+  every toast in the kit, the long line heavier than the label naming it.
+
+  Both now take the compound selector plus !important — the shape the
+  close-button rules below already use against this same stylesheet, and for
+  the same reason: source order cannot settle a tie with a sheet that is
+  injected at runtime.
+
+  The description returns to 400. It is the running text of a toast, and 14px
+  semibold across a full sentence reads as emphasis with nothing left to
+  emphasise; the family ink already carries the severity. Its `color` override
+  keeps !important on its own merits — sonner hardcodes #3f3f3f there, plus a
+  dark-theme rule of its own on top.
+
+  `toast text weights` in src/__tests__/tokens-contract.test.ts holds the order
+  and the two properties that let it apply.
+*/
+[data-sonner-toast][data-styled='true'] [data-title] {
+  font-weight: 600 !important;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -611,7 +635,7 @@
 [data-sonner-toast] [data-description],
 [data-sonner-toast][data-styled='true'] [data-description] {
   font-size: 0.875rem;
-  font-weight: 600 !important;
+  font-weight: 400 !important;
   line-height: 1.25rem;
   color: var(--normal-text) !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {