@lerianstudio/sindarian-ui 1.3.0 → 1.4.0-beta.2

package/dist/globals.css

@@ -13,7 +13,8 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --font-sans: var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
 
   --shadow-sidebar: 5px 0px 15px -3px hsl(var(--shadow-color) / 0.05);
   --shadow-data-table:
@@ -211,6 +212,8 @@
 
 @layer base {
   :root {
+    color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
+
     /* Application tokens (from Figma ring-tokens) */
     --body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
     --body-text: 240 4% 46%; /* base/500 = #71717A */
@@ -319,6 +322,8 @@
   }
 
   .dark {
+    color-scheme: dark; /* native widgets (form controls, scrollbars) follow the theme */
+
     /* Custom — Layout */
     --link-hover: 240 5% 96%; /* #F4F4F5 80% (opacity via /80) */
     --link-mute: 240 5% 96%; /* #F4F4F5 40% (opacity via /40) */
@@ -358,6 +363,17 @@
     --accent-hover: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /70 */
     --accent-mute: 46 98% 57%; /* sunglow/400 = #FDCB28 - opacity via /50 */
 
+    /*
+      Shadcn — Destructive. Lifted to red/400 like every other red in this
+      block (--system-error, --credit, --chart-2): the light red/500 inherited
+      here before, which left `text-destructive` at 2.76:1 on a --card surface
+      and `bg-destructive`/`text-destructive-foreground` at 3.78:1. The
+      foreground inverts to red/950 — the deep end this theme already uses as
+      --system-error-surface — so the pair reads 5.94:1.
+    */
+    --destructive: 0 91% 71%; /* red/400 = #F87171 */
+    --destructive-foreground: 0 75% 15%; /* red/950 = #450A0A */
+
     /* Shadcn — System Error */
     --system-error: 0 91% 71%; /* red/400 = #F87171 */
     --system-error-surface: 0 75% 15%; /* red/950 = #450A0A */
@@ -396,9 +412,23 @@
     /* Shadow color for dark mode */
     --shadow-color: 0 0% 100%;
 
-    /* Ledger credit semantic — lifted for the dark canvas; foreground mirrors. */
-    --credit: 0 91% 71%; /* red/400 = #F87171 */
-    --credit-foreground: 0 91% 71%; /* mirrors --credit */
+    /*
+      Ledger credit semantic — lifted for the dark canvas; foreground mirrors.
+      Sized by the composite the mirror actually produces, not by the plain
+      pair: components write `bg-credit/10` + `text-credit`, so the real
+      measurement is credit-as-text over a 10% credit tint composited on
+      --card. red/400 read only 3.34:1 there. red/300 — the channel this block
+      already uses for --system-error-text — reaches 4.59:1, and 5.54:1 as
+      plain text on --card.
+
+      Credit stays one step further from the canvas than --destructive
+      (red/400 here), the way light keeps credit at red/700 against a red/500
+      destructive: on a dark ground "further from the canvas" means lighter,
+      so the direction inverts but the separation holds and the two never read
+      as the same signal.
+    */
+    --credit: 0 94% 82%; /* red/300 = #FCA5A5 */
+    --credit-foreground: 0 94% 82%; /* mirrors --credit */
 
     /* Reconciliation matte fills — raised surfaces over base/800, one step apart. */
     --matched-surface: 240 5% 26%; /* base/700 = #3F3F46 */
@@ -433,21 +463,41 @@
     0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
+/*
+  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.
+*/
 [data-sonner-toast][data-type='success'] {
-  --normal-bg: #22c55e;
-  --normal-text: #ffffff;
+  --normal-bg: hsl(var(--system-success));
+  --normal-text: hsl(var(--accent-foreground));
   --normal-border: transparent;
 }
 
 [data-sonner-toast][data-type='error'] {
-  --normal-bg: #ef4444;
-  --normal-text: #ffffff;
+  --normal-bg: hsl(var(--system-error));
+  --normal-text: hsl(var(--accent-foreground));
   --normal-border: transparent;
 }
 
 [data-sonner-toast][data-type='warning'] {
-  --normal-bg: #f59e0b;
-  --normal-text: #422006;
+  --normal-bg: hsl(var(--system-alert));
+  --normal-text: hsl(var(--accent-foreground));
   --normal-border: transparent;
 }
 
@@ -476,42 +526,35 @@
   display: none !important;
 }
 
+/*
+  The close button derives from the toast's own --normal-text, so it is legible
+  on every fill and in both themes by construction. That is what replaced the
+  six rules previously here: one per-theme pair plus one pair per coloured
+  type, each hardcoding the ink it assumed the fill needed.
+
+  Both rules keep !important. Sonner's own resting rule is
+  `[data-sonner-toast][data-styled='true'] [data-close-button]` (0,3,0,
+  color: var(--gray12)) and its dark rule adds a fourth compound, so a plain
+  descendant selector here cannot win the cascade against a stylesheet that is
+  injected at runtime — the fade this rule intends was previously decided by
+  source order rather than by the sheet.
+*/
 [data-sonner-toast] [data-close-button] {
-  color: hsl(var(--foreground) / 0.5);
+  color: color-mix(in srgb, var(--normal-text) 50%, transparent) !important;
 }
 
 [data-sonner-toast] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(var(--foreground)) !important;
-  border-color: hsl(var(--foreground)) !important;
-}
-
-.dark [data-sonner-toast] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(240 5% 26%) !important;
-  border-color: hsl(240 5% 26%) !important;
-}
-
-[data-sonner-toast][data-type='success'] [data-close-button],
-[data-sonner-toast][data-type='error'] [data-close-button] {
-  color: rgba(255, 255, 255, 0.6);
-}
-
-[data-sonner-toast][data-type='success'] [data-close-button]:hover,
-[data-sonner-toast][data-type='error'] [data-close-button]:hover {
-  color: #ffffff !important;
-  background-color: hsl(var(--foreground)) !important;
-  border-color: hsl(var(--foreground)) !important;
-}
-
-[data-sonner-toast][data-type='warning'] [data-close-button] {
-  color: rgba(66, 32, 6, 0.5);
-}
-
-[data-sonner-toast][data-type='warning'] [data-close-button]:hover {
-  color: #422006 !important;
-  background-color: rgba(66, 32, 6, 0.15) !important;
-  border-color: rgba(66, 32, 6, 0.15) !important;
+  color: var(--normal-text) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--normal-text) 15%,
+    transparent
+  ) !important;
+  border-color: color-mix(
+    in srgb,
+    var(--normal-text) 15%,
+    transparent
+  ) !important;
 }
 
 .dark [data-sonner-toast] {
@@ -557,22 +600,6 @@
   }
 }
 
-@keyframes caret-blink {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}
-
-@utility animate-caret-blink {
-  animation: caret-blink 1.25s ease-out infinite;
-}
-
 .ticket {
   mask: radial-gradient(21px 13px at 50% 102%, #0000 98%, #000) 50%
     calc(100% - 16px) / 64px 100% repeat-x;

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AA8B5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -3,6 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cn = cn;
 const clsx_1 = require("clsx");
 const tailwind_merge_1 = require("tailwind-merge");
+/**
+ * The kit's button variants are component classes in `@layer components`, not
+ * Tailwind utilities, so stock tailwind-merge has no group for them: it kept
+ * `button-primary button-destructive` together and let stylesheet source order
+ * pick the winner. Declaring the group makes the last one win, like every other
+ * conflict `cn` resolves.
+ *
+ * Variant classes only. `button-base`, `button-disabled`, `button-read-only`
+ * and `button-small` compose with a variant instead of conflicting with it, so
+ * they stay out of the group and are never merged away.
+ */
+const twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
+    extend: {
+        classGroups: {
+            'sindarian-button-variant': [
+                'button-plain',
+                'button-primary',
+                'button-secondary',
+                'button-tertiary',
+                'button-outline',
+                'button-link',
+                'button-destructive'
+            ]
+        }
+    }
+});
 function cn(...inputs) {
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+    return twMerge((0, clsx_1.clsx)(inputs));
 }

package/dist/theme/theme-provider.d.ts

@@ -34,5 +34,13 @@ export interface ThemeProviderProps {
 export declare function ThemeProvider({ children, storageKey, defaultTheme }: ThemeProviderProps): React.JSX.Element;
 /** Reads the theme context. Throws if used outside a ThemeProvider. */
 export declare function useTheme(): ThemeContextValue;
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+export declare function useOptionalTheme(): ThemeContextValue | undefined;
 export {};
 //# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgBzD,KAAK,iBAAiB,GAAG;IACvB,oEAAoE;IACpE,KAAK,EAAE,eAAe,CAAA;IACtB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,aAAa,EAAE,OAAO,GAAG,MAAM,CAAA;CAChC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,eAAe,CAAA;CAC/B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAA8B,EAC9B,YAAuB,EACxB,EAAE,kBAAkB,qBAwFpB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,iBAAiB,GAAG,SAAS,CAEhE"}

package/dist/theme/theme-provider.js

@@ -36,6 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;
+exports.useOptionalTheme = useOptionalTheme;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * ThemeProvider — owns theme preference ('light' | 'dark' | 'system'),
@@ -147,3 +148,13 @@ function useTheme() {
     }
     return context;
 }
+/**
+ * Reads the theme context without requiring a provider — `undefined` when
+ * there is none. For library components that should follow the theme when one
+ * exists but must not force every consumer to mount a ThemeProvider (Toaster).
+ * Not re-exported from the package barrel: consumers use `useTheme`, whose
+ * throw is the intended signal that the provider is missing.
+ */
+function useOptionalTheme() {
+    return React.useContext(ThemeContext) ?? undefined;
+}

package/package.json

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