@lerianstudio/sindarian-ui 2.0.0-beta.20 → 2.0.0-beta.22

package/dist/tokens.css

@@ -0,0 +1,367 @@
+@layer base {
+  :root {
+    color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
+
+    /*
+      Sidebar geometry. These were literals inside SidebarRoot's cva
+      (`w-[244px]` / `w-[72px]`), which a consumer could only override by
+      winning a specificity argument with `cn`. As custom properties the
+      default still ships with this sheet.
+
+      TWO places to re-point them, and only these two:
+        - on the rail, via `className="[--sidebar-width:280px]"`. SidebarRoot
+          copies exactly these two arbitrary-property classes onto the mobile
+          drawer's own element, so one class moves the rail AND the drawer.
+        - on `:root` or `html`, which every layout inherits from.
+
+      NOT on a React-tree wrapper above the rail: that reaches the rail, but
+      the mobile drawer is portalled into document.body, and custom properties
+      inherit down the DOM tree. A wrapper is not an ancestor of the portal;
+      `:root` is.
+
+      They are theme-independent on purpose: a rail is not wider in the dark.
+    */
+    --sidebar-width: 244px;
+    --sidebar-width-collapsed: 72px;
+
+    /* Application tokens (from Figma ring-tokens) */
+    --body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
+    /*
+      --body-text and --container-text below both step one notch off base/500.
+      base/500 clears AA on white (4.86:1) but not on --body-surface, the
+      recessed page ground, where it read 4.43:1. That ground is exactly where
+      the components carrying these two tokens sit: the resting tabs trigger
+      (text-sm font-medium, and its hover fill is --card precisely because the
+      resting ground is not white), the breadcrumb page and separator, the
+      stepper item text and description. An axe crawl of the br-sfn cockpit
+      flagged .text-body-text on 2026-09-06; the ratio it printed does not
+      reproduce here, and the measured pair on this token's own ground is
+      4.40:1 at 8-bit precision (4.43:1 in float).
+
+      45% is the smallest step that clears it: 4.59:1 on --body-surface, up
+      from 4.43:1, and 5.04:1 on white. Both stay eleven notches clear of
+      --container-title (base/600), so the text-versus-title step holds.
+
+      Deliberately not stepped far enough to clear --muted (#E4E4E7), which
+      would take base/500 minus five notches and visibly darken tabs,
+      breadcrumbs and steppers. No component in THIS kit paints either token on
+      that fill. A consumer that does is a call-site fix on its side, not a
+      clean bill from here: product-console's extract-table pairs bg-muted with
+      text-body-text and reads 3.98:1 in light.
+    */
+    --body-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
+    --body-title: 240 5% 26%; /* base/700 = #3F3F46 */
+    --container-surface: 0 0% 100%; /* base/white = #FFFFFF */
+    --container-text: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
+    --container-title: 240 5% 34%; /* base/600 = #52525B */
+    --container-border: 0 0% 100%; /* #FFFFFF */
+    --link: 240 4% 16%; /* base/800 = #27272A */
+    --link-hover: 240 4% 16%; /* #27272A with 80% opacity via /80 */
+    --link-mute: 240 4% 16%; /* #27272A with 40% opacity via /40 */
+    --button-primary-surface: 240 4% 16%; /* base/800 = #27272A */
+    --button-primary-text: 0 0% 100%; /* base/white */
+
+    /* Shadcn semantic tokens (aligned with Figma) */
+    --background: 0 0% 100%; /* base/white = #FFFFFF */
+    --foreground: 240 5% 26%; /* base/700 = #3F3F46 */
+    --card: 0 0% 100%; /* = container-surface (white) */
+    /* Held at base/500, the step --container-text just moved off: this token's
+       own ground is --card (white), where base/500 clears AA at 4.86:1. It
+       measures 3.84:1 over --muted, but no component in this kit renders it
+       there: the data table pins its own inks rather than inheriting this one
+       (`ui/table/index.tsx`: cells take text-foreground, heads take
+       text-muted-foreground), so the hovered-row ground never sits under this
+       token. */
+    --card-foreground: 240 4% 46%; /* base/500 = #71717A */
+    --popover: 0 0% 100%; /* base/white */
+    --popover-foreground: 240 5% 34%; /* base/600 = #52525B */
+    --primary: 240 4% 16%; /* base/800 = #27272A */
+    --primary-foreground: 0 0% 100%; /* base/white */
+    --secondary: 0 0% 100%; /* base/white */
+    --secondary-foreground: 240 5% 34%; /* base/600 = #52525B */
+    --muted: 240 5% 90%; /* base/200 = #E4E4E7 */
+    --muted-foreground: 240 5% 34%; /* base/600 = #52525B */
+    --accent: 56 99% 50%; /* #FEED02 (sunglow) */
+    --accent-foreground: 240 10% 4%; /* base/800 for contrast on yellow */
+    /*
+      Shadcn — Destructive. Darkened one step to red/600. red/500 under white
+      was 3.78:1, under AA, for both roles this token plays: the fill beneath
+      `--destructive-foreground` (the Critical badge, every destructive
+      button) and the plain body ink of a field/form error message on white.
+      red/600 lifts both to 4.80:1. The hue is unchanged; only the step moved.
+    */
+    --destructive: 0 72% 51%; /* red/600 = #DC2626 */
+    --destructive-foreground: 0 0% 100%; /* white */
+    --border: 240 5% 90%; /* base/200 = #E4E4E7 */
+    --input: 0 0% 100%; /* base/white */
+    /* Lighter than --muted-foreground, which is also the label colour: a
+       placeholder that matches its own label has no hierarchy left to give.
+       Stepped off base/500 with --body-text, and for the same reason. The
+       field paints no fill of its own (`input/styles.css`: .input-wrapper is
+       border-only, .input-base is bg-transparent), so the hint sits on
+       whatever ground contains the form, and on --body-surface base/500 read
+       4.40:1. 45% brings that to 4.59:1 and 5.04:1 on white. The retired note
+       here claimed 4.4:1 was acceptable "on the shadcn-100 field", which named
+       a fill the component never paints. */
+    --input-placeholder: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
+    /* Field boundary, held to the 3:1 non-text floor (SC 1.4.11) on every ground a
+       field sits on. base/400 read 2.56:1 on white and 2.34:1 on --body-surface. */
+    --input-border: 240 4% 46%; /* base/500 = #71717A, 4.86:1 on white, 4.43:1 on body-surface */
+    /*
+      Focus ring. base/400 read 2.55:1 on white and 2.33:1 on --body-surface,
+      under the 3:1 floor a focus indicator answers to (SC 1.4.11), and this is
+      the ring every input, button and trigger in the kit paints: the wrapper
+      border on :focus-within, and the ring itself at ring-offset-0, both of
+      which touch the page ground directly. base/500 clears it on every light
+      ground: 4.84:1 on white (which is also --card and --popover here) and
+      4.40:1 on --body-surface.
+
+      It does NOT serve both themes. On the dark container surface base/500
+      measures 2.16:1, so .dark keeps the old channel as its own declaration,
+      where it reads 5.81:1 on --background and 4.08:1 on --card.
+
+      No single value clears both themes with margin, and none is a palette
+      step: the best one channel does is an off-scale 240 5% 57%, which clears
+      3:1 on all four grounds but by 0.04 on two of them. The per-theme pair
+      sits at 4.4+ light and 4.0+ dark, each half gated in
+      `__tests__/tokens-contract.test.ts`.
+    */
+    --ring: 240 4% 46%; /* base/500 = #71717A */
+    --radius: 0.5rem;
+
+    /* Accent variants */
+    --accent-hover: 56 99% 50%; /* #FEED02 - opacity handled via /70 */
+    --accent-mute: 56 99% 50%; /* #FEED02 - opacity handled via /50 */
+
+    /* System tokens (light mode — dark overrides in .dark) */
+    --system-error: 0 84% 60%; /* red/500 = #EF4444 */
+    --system-error-surface: 0 86% 97%; /* red/50 = #FEF2F2 */
+    --system-error-h1a: 0 74% 35%; /* red/800 = #991B1B */
+    --system-error-border: 0 84% 60% / 0.5; /* #EF4444 50% */
+    --system-error-text: 0 74% 35%; /* #991B1B */
+    --system-success: 142 76% 36%; /* green/600 = #16A34A */
+    --system-success-surface: 139 76% 97%; /* green/50 = #F0FDF4 */
+    --system-success-h1a: 143 64% 24%; /* green/800 = #166534 */
+    --system-success-border: 142 76% 36% / 0.5; /* #16A34A 50% */
+    --system-success-text: 143 64% 24%; /* #166534 */
+    --system-info: 221 83% 53%; /* blue/600 = #2563EB */
+    --system-info-surface: 214 100% 97%; /* blue/50 = #EFF6FF */
+    --system-info-h1a: 224 76% 40%; /* blue/800 = #1E40AF */
+    --system-info-border: 221 83% 53% / 0.5; /* #2563EB 50% */
+    --system-info-text: 224 76% 40%; /* #1E40AF */
+    --system-alert: 48 96% 47%; /* yellow/500 = #EAB308 */
+    --system-alert-surface: 55 92% 95%; /* yellow/50 = #FEFCE8 */
+    --system-alert-h1a: 36 92% 29%; /* yellow/800 = #854D0E */
+    --system-alert-border: 48 96% 47% / 0.5; /* #EAB308 50% */
+    --system-alert-text: 36 92% 29%; /* #854D0E */
+    --system-purple: 271 81% 56%; /* purple/600 = #9333EA */
+    --system-purple-surface: 270 100% 98%; /* purple/50 = #FAF5FF */
+    --system-purple-h1a: 273 67% 39%; /* purple/800 = #6B21A8 */
+    --system-purple-border: 271 81% 56% / 0.5; /* #9333EA 50% */
+    --system-purple-text: 273 67% 39%; /* #6B21A8 */
+
+    /* Shadow color token for dark mode adaptation */
+    --shadow-color: 0 0% 0%;
+
+    /*
+      Ledger credit semantic — deliberately DISTINCT from --destructive, not an
+      alias: --destructive is an error/alarm, --credit is the accounting reading
+      of a credit amount. Deeper than --destructive (red/700 vs red/500) so the
+      two never read as the same signal. --credit-foreground mirrors --credit:
+      the red itself carries the role as text.
+    */
+    --credit: 0 74% 42%; /* red/700 = #B91C1C */
+    --credit-foreground: 0 74% 42%; /* mirrors --credit */
+
+    /*
+      Reconciliation matte fills — the recessed track behind a balance bar, one
+      neutral step apart. Deliberately hue-neutral: the matched/unmatched signal
+      is carried by the bar's leading edge, so a tinted wall would double-encode.
+    */
+    --matched-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --unmatched-surface: 240 5% 90%; /* base/200 = #E4E4E7 */
+
+    /*
+      Chart series palette — 8 categorical slots drawn from the brand scales
+      (de-york, sunglow, cod-gray) plus the system hues, ordered so no adjacent
+      pair shares a hue neighbourhood.
+    */
+    --chart-1: 143 59% 36%; /* de-york-600 = #26934F */
+    --chart-2: 0 72% 51%; /* red/600 = #DC2626 */
+    --chart-3: 39 98% 40%; /* sunglow-600 = #CC8402 */
+    --chart-4: 221 83% 53%; /* blue/600 = #2563EB */
+    --chart-5: 333 71% 51%; /* pink/600 = #DB2777 */
+    --chart-6: 193 82% 31%; /* cyan/700 = #0E7490 */
+    --chart-7: 272 72% 47%; /* purple/700 = #7E22CE */
+    --chart-8: 351 9% 43%; /* cod-gray-500 = #776366 */
+
+    /* Plain-CSS twins of the @theme font slots in globals.css, for pages without
+       Tailwind; each must equal its --font-* value there. */
+    --font-stack-sans:
+      var(--font-inter, 'Inter'), 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-stack-serif:
+      var(--font-plex-serif, ui-serif), ui-serif, Georgia, Cambria,
+      'Times New Roman', Times, serif;
+    --font-stack-mono:
+      var(--font-plex-mono, ui-monospace), ui-monospace, SFMono-Regular, Menlo,
+      Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
+
+  .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) */
+    --container-surface: 240 5% 26%; /* base/700 = #3F3F46 */
+    --container-text: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --container-title: 0 0% 100%; /* base/white */
+    --body-surface: 240 4% 16%; /* base/800 = #27272A */
+    --body-text: 240 5% 84%; /* base/300 = #D4D4D8 */
+    --body-title: 0 0% 100%; /* base/white */
+    --link: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --button-primary-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --button-primary-text: 240 4% 16%; /* base/800 = #27272A */
+    --container-border: var(--border); /* shadcn/--border */
+
+    /* Shadcn — Core */
+    --background: 240 4% 16%; /* base/800 = #27272A */
+    --foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --muted: 240 5% 34%; /* base/600 = #52525B */
+    /*
+      Lifted off the base scale. base/400 read 4.09:1 on --container-surface
+      (which --card aliases) and 3.01:1 on --muted, both under the 4.5 AA floor
+      for normal text, and this is the kit's universal secondary ink: every
+      TableHead column label (text-sm font-medium inside a text-sm Table),
+      every empty-state line, every form label through LABEL_VOICE_CLASS, every
+      MoneyText caption. An axe crawl of the br-sfn cockpit measured both pairs
+      on 2026-09-06; every console on this library inherited them.
+
+      80% is the smallest round step that clears both: 6.36:1 on
+      --container-surface and 4.68:1 on --muted. base/300 is the nearest scale
+      step that would also clear, but it is byte-identical to this theme's
+      --body-text, so adopting it would collapse the muted-versus-body step the
+      two tokens exist to express. Staying on the scale is worth less than
+      keeping that step, so the value leaves the scale instead.
+
+      That step is now thin, and the trade was made with eyes open: 80% sits at
+      L* 81 against --body-text at L* 85, so the two inks are 1.12:1 apart and
+      barely separable side by side. Legibility won because the weight is all
+      on one side: this token has 86 call sites and is read as prose on every
+      surface, while --body-text has one (an uppercase sidebar group label) plus
+      two derived theme keys. A reader who needs the step to be visible should
+      move --body-text, which is cheap to reposition, rather than push this one
+      back under the AA floor.
+
+      Repairs a fourth pair on the way: the disabled chip in autocomplete and
+      multiple-select paints text-muted on bg-muted-foreground, 3.01:1 before
+      and 4.68:1 now.
+    */
+    --muted-foreground: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on container-surface and muted */
+    --card: var(--container-surface);
+    --card-foreground: var(--container-text);
+    --popover: 240 4% 16%; /* base/800 = #27272A */
+    --popover-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --border: 240 5% 34%; /* base/600 = #52525B */
+    --input: 240 4% 16%; /* base/800 = #27272A */
+    /* Held at base/400 rather than stepped down with the light theme: on the
+       dark field that is already only 5.8:1, and going lighter here means
+       darker, which would push the hint under the AA floor. */
+    --input-placeholder: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on card (6.3:1); base/400 read 4.07:1 there */
+    --input-border: 240 5% 65%; /* base/400 = #A1A1AA, 4.09:1 on card; light's base/500 reads 2.15:1 there */
+    /* Held at base/400, which light had to leave: on this ground the two
+       directions disagree. base/400 reads 5.81:1 on --background and 4.08:1 on
+       --card here, while light's base/500 would read 2.16:1 on --card. */
+    --ring: 240 5% 65%; /* base/400 = #A1A1AA */
+    --primary: 240 5% 96%; /* base/100 = #F4F4F5 */
+    --primary-foreground: 240 4% 16%; /* base/800 = #27272A */
+    --secondary: 240 4% 16%; /* base/800 = #27272A */
+    --secondary-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
+
+    /* Shadcn — Accent (Brand Lerian) */
+    --accent: 46 98% 57%; /* sunglow/400 = #FDCB28 */
+    --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 */
+    --system-error-text: 0 94% 82%; /* red/300 = #FCA5A5 */
+    --system-error-h1a: 0 96% 89%; /* red/200 = #FECACA */
+    --system-error-border: 0 94% 82% / 0.3; /* #FCA5A5 30% */
+
+    /* Shadcn — System Success */
+    --system-success: 142 69% 58%; /* green/400 = #4ADE80 */
+    --system-success-surface: 145 80% 10%; /* green/950 = #052E16 */
+    --system-success-text: 142 77% 73%; /* green/300 = #86EFAC */
+    --system-success-h1a: 141 79% 85%; /* green/200 = #BBF7D0 */
+    --system-success-border: 142 69% 58% / 0.3; /* #4ADE80 30% */
+
+    /* Shadcn — System Info */
+    --system-info: 213 94% 68%; /* blue/400 = #60A5FA */
+    --system-info-surface: 226 57% 21%; /* blue/950 = #172554 */
+    --system-info-text: 212 96% 78%; /* blue/300 = #93C5FD */
+    --system-info-h1a: 213 97% 87%; /* blue/200 = #BFDBFE */
+    --system-info-border: 213 94% 68% / 0.3; /* #60A5FA 30% */
+
+    /* Shadcn — System Alert */
+    --system-alert: 48 96% 53%; /* yellow/400 = #FACC15 */
+    --system-alert-surface: 26 83% 14%; /* yellow/950 = #422006 */
+    --system-alert-text: 48 97% 77%; /* yellow/300 = #FDE68A */
+    --system-alert-h1a: 53 98% 77%; /* yellow/200 = #FEF08A */
+    --system-alert-border: 48 96% 53% / 0.3; /* #FACC15 30% */
+
+    /* Shadcn — System Purple */
+    --system-purple: 270 95% 75%; /* purple/400 = #C084FC */
+    --system-purple-surface: 266 86% 13%; /* purple/950 = #3B0764 */
+    --system-purple-text: 269 97% 85%; /* purple/300 = #D8B4FE */
+    --system-purple-h1a: 269 100% 92%; /* purple/200 = #E9D5FF */
+    --system-purple-border: 270 95% 75% / 0.3; /* #C084FC 30% */
+
+    /* Shadow color for dark mode */
+    --shadow-color: 0 0% 100%;
+
+    /*
+      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 */
+    --unmatched-surface: 240 5% 34%; /* base/600 = #52525B */
+
+    /* Chart series palette — same families, lifted for the dark canvas. */
+    --chart-1: 143 53% 58%; /* de-york-400 = #5BCD86 */
+    --chart-2: 0 91% 71%; /* red/400 = #F87171 */
+    --chart-3: 46 98% 57%; /* sunglow-400 = #FDCB28 */
+    --chart-4: 213 94% 68%; /* blue/400 = #60A5FA */
+    --chart-5: 329 86% 70%; /* pink/400 = #F472B6 */
+    --chart-6: 188 86% 53%; /* cyan/400 = #22D3EE */
+    --chart-7: 270 95% 75%; /* purple/400 = #C084FC */
+    --chart-8: 351 9% 69%; /* cod-gray-300 = #B7A9AB */
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.22",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "Elastic-2.0",
   "author": {
@@ -41,8 +41,8 @@
     "build": "npm run build:cjs && npm run build:esm && npm run copy:assets && npm run copy:styles",
     "build:cjs": "tsc && tsc-alias -p tsconfig.json && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist",
     "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json --resolve-full-paths && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist/esm && node -e \"require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({type:'module'}))\" && node scripts/check-esm-output.mjs",
-    "copy:assets": "copyfiles -f src/public/**/* dist/public",
-    "copy:styles": "copyfiles -u 1 src/**/*.css dist",
+    "copy:assets": "copyfiles -f \"src/public/**/*\" dist/public && copyfiles -u 1 \"src/fonts/*\" dist",
+    "copy:styles": "copyfiles -u 1 \"src/**/*.css\" dist",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6007",