@snksergio/design-system 0.5.1 → 0.17.0

package/dist-lib/src/preview/pages/ClientesShowcase/ClientesShowcase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientesShowcase.d.ts","sourceRoot":"","sources":["../../../../../src/preview/pages/ClientesShowcase/ClientesShowcase.tsx"],"names":[],"mappings":"AA4SA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CA0OvC"}
+{"version":3,"file":"ClientesShowcase.d.ts","sourceRoot":"","sources":["../../../../../src/preview/pages/ClientesShowcase/ClientesShowcase.tsx"],"names":[],"mappings":"AA+SA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CA0OvC"}

package/dist-lib/src/preview/pages/ClientesShowcase/clientes-showcase.styles.d.ts

@@ -1,13 +1,13 @@
 /**
  * Layout em grid de 2 colunas usado dentro do drawer pra pares de campos
  * (Email + WhatsApp, Cidade + Valor).
+ * `gap-form-gap` (20px) = token DS pra spacing entre FormField units (L-024).
  */
 export declare const drawerFormStyles: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
             statusDot?: import('tailwind-merge').ClassNameValue;
             twoCols?: import('tailwind-merge').ClassNameValue;
-            fieldLabel?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
@@ -15,28 +15,23 @@ export declare const drawerFormStyles: import('tailwind-variants').TVReturnType<
         [x: string]: import('tailwind-merge').ClassNameValue | {
             statusDot?: import('tailwind-merge').ClassNameValue;
             twoCols?: import('tailwind-merge').ClassNameValue;
-            fieldLabel?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     twoCols: string;
-    fieldLabel: string;
     statusDot: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
             statusDot?: import('tailwind-merge').ClassNameValue;
             twoCols?: import('tailwind-merge').ClassNameValue;
-            fieldLabel?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     twoCols: string;
-    fieldLabel: string;
     statusDot: string;
 }, import('tailwind-variants').TVReturnType<unknown, {
     twoCols: string;
-    fieldLabel: string;
     statusDot: string;
 }, undefined, unknown, unknown, undefined>>;
 //# sourceMappingURL=clientes-showcase.styles.d.ts.map

package/dist-lib/src/preview/pages/ClientesShowcase/clientes-showcase.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clientes-showcase.styles.d.ts","sourceRoot":"","sources":["../../../../../src/preview/pages/ClientesShowcase/clientes-showcase.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAO3B,CAAC"}
+{"version":3,"file":"clientes-showcase.styles.d.ts","sourceRoot":"","sources":["../../../../../src/preview/pages/ClientesShowcase/clientes-showcase.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAK3B,CAAC"}

package/dist-lib/src/preview/pages/ClientesShowcase/components/DetailDrawer/detail-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/preview/pages/ClientesShowcase/components/DetailDrawer/detail-drawer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAwE/D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE,iBAAiB,kDA2MnB"}
+{"version":3,"file":"detail-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/preview/pages/ClientesShowcase/components/DetailDrawer/detail-drawer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAwE/D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE,iBAAiB,kDA6MnB"}

package/dist-lib/src/preview/pages/ClientesShowcase/components/DetailDrawer/detail-drawer.styles.d.ts

@@ -9,10 +9,10 @@ export declare const detailDrawerStyles: import('tailwind-variants').TVReturnTyp
             section?: import('tailwind-merge').ClassNameValue;
             field?: import('tailwind-merge').ClassNameValue;
             fieldLabel?: import('tailwind-merge').ClassNameValue;
+            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionChev?: import('tailwind-merge').ClassNameValue;
             sectionChevOpen?: import('tailwind-merge').ClassNameValue;
             sectionBody?: import('tailwind-merge').ClassNameValue;
-            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionHead?: import('tailwind-merge').ClassNameValue;
         };
     };
@@ -22,10 +22,10 @@ export declare const detailDrawerStyles: import('tailwind-variants').TVReturnTyp
             section?: import('tailwind-merge').ClassNameValue;
             field?: import('tailwind-merge').ClassNameValue;
             fieldLabel?: import('tailwind-merge').ClassNameValue;
+            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionChev?: import('tailwind-merge').ClassNameValue;
             sectionChevOpen?: import('tailwind-merge').ClassNameValue;
             sectionBody?: import('tailwind-merge').ClassNameValue;
-            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionHead?: import('tailwind-merge').ClassNameValue;
         };
     };
@@ -44,10 +44,10 @@ export declare const detailDrawerStyles: import('tailwind-variants').TVReturnTyp
             section?: import('tailwind-merge').ClassNameValue;
             field?: import('tailwind-merge').ClassNameValue;
             fieldLabel?: import('tailwind-merge').ClassNameValue;
+            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionChev?: import('tailwind-merge').ClassNameValue;
             sectionChevOpen?: import('tailwind-merge').ClassNameValue;
             sectionBody?: import('tailwind-merge').ClassNameValue;
-            fieldValue?: import('tailwind-merge').ClassNameValue;
             sectionHead?: import('tailwind-merge').ClassNameValue;
         };
     };

package/dist-lib/src/utils/color-contrast.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Color contrast utilities — WCAG 2.x relative luminance.
+ *
+ * Used by components que aplicam bg arbitrário (hex/css color) e precisam
+ * escolher cor de texto que tenha contraste mínimo (white vs black).
+ *
+ * Caso real (v0.7.1): Avatar com `colorHex={bankColor}` antes aplicava
+ * `text-white` cego — quebra contraste em cores claras (BB amarelo #FAE128
+ * + branco = ratio 1.29:1, falha WCAG AA 4.5:1). Agora escolhe preto/branco
+ * baseado em luminância calculada.
+ */
+export type ContrastTextColor = "white" | "black";
+/**
+ * Escolhe a cor de texto (branco ou preto) com MAIOR contraste sobre um bg.
+ *
+ * Comportamento:
+ * - Compara `(white, bg)` vs `(black, bg)` via contrast ratio WCAG
+ * - Retorna o vencedor — sempre o que tem ratio mais alto
+ * - Default "white" pra cores escuras (luminância baixa), "black" pra cores
+ *   claras (luminância alta). Threshold dinâmico ~50% (não fixo)
+ *
+ * Fallback: hex inválido → "white" (preserva comportamento legado de
+ * `text-white` cego — caller deve garantir hex válido).
+ *
+ * Exemplos:
+ * - "#FAE128" (BB amarelo)  → "black" (white ratio 1.29, black ratio 16.3)
+ * - "#820AD1" (Nubank roxo) → "white" (white ratio 6.2, black ratio 3.4)
+ * - "#EC7000" (Itaú laranja)→ "black" (white ratio 2.7, black ratio 7.8)
+ * - "#FFFFFF" (branco)      → "black"
+ * - "#000000" (preto)       → "white"
+ *
+ * @param bgColor - hex string (#RGB, #RRGGBB ou #RRGGBBAA)
+ * @returns "white" | "black" — cor de texto recomendada
+ */
+export declare function getContrastTextColor(bgColor: string): ContrastTextColor;
+/**
+ * Retorna `true` se o contraste entre texto/bg passa WCAG AA pra texto
+ * normal (4.5:1) ou texto large (3:1).
+ *
+ * Útil pra validação em desenvolvimento (avisar quando alguém configurou
+ * `colorHex` com contraste insuficiente mesmo após auto-pick).
+ *
+ * @param textColor - hex do texto
+ * @param bgColor - hex do bg
+ * @param size - "normal" (4.5:1) | "large" (3:1, >=18pt ou >=14pt bold)
+ */
+export declare function meetsWCAG_AA(textColor: string, bgColor: string, size?: "normal" | "large"): boolean;
+//# sourceMappingURL=color-contrast.d.ts.map

package/dist-lib/src/utils/color-contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-contrast.d.ts","sourceRoot":"","sources":["../../../src/utils/color-contrast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAkDlD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAOvE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,IAAI,GAAE,QAAQ,GAAG,OAAkB,GAClC,OAAO,CAMT"}

package/dist-lib/theme.css

@@ -45,6 +45,8 @@
   --color-bg-table-row-hover: oklch(0.973 0 0);
   --color-bg-table-row-selected: color-mix(in oklch, oklch(0.5248 0.1415 150.9) 6%, transparent);
   --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.5248 0.1415 150.9) 10%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.5248 0.1415 150.9) 6%, oklch(1 0 0));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.5248 0.1415 150.9) 10%, oklch(1 0 0));
   --color-bg-dropdown: var(--color-bg-canvas);
   --color-fg-strong: oklch(0.15 0 0);
   --color-fg-default: oklch(0.15 0 0);
@@ -80,6 +82,12 @@
   --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0 0) 22%, transparent);
   --color-overlay-scrim: oklch(0 0 0 / 0.55);
   --color-overlay-float: oklch(0.55 0 0 / 0.12);
+  --color-chart-1: oklch(0.58 0.140 151);
+  --color-chart-2: oklch(0.66 0.12 195);
+  --color-chart-3: oklch(0.55 0.15 250);
+  --color-chart-4: oklch(0.76 0.15 80);
+  --color-chart-5: oklch(0.56 0.18 300);
+  --color-chart-grid: oklch(0.9076 0 0);
   --spacing-sp-0: 0px;
   --spacing-sp-base: 16px;
   --spacing-sp-px: 1px;
@@ -185,6 +193,7 @@
   --spacing-pad-page-base: 24px;
   --spacing-pad-page-sm: 16px;
   --spacing-pad-page-lg: 40px;
+  --spacing-form-gap: 20px;
   --radius: 0.625rem;
   --radius-radius-base: 0.625rem;
   --radius-radius-none: 0px;
@@ -201,18 +210,6 @@
   --border-width-xs: 1px;
   --border-width-sm: 2px;
   --border-width-md: 4px;
-  --shadow-sh-none: none;
-  --shadow-sh-sm: 0 1px 2px oklch(0 0 0 / 0.04);
-  --shadow-sh-md: rgba(145, 158, 171, 0.18) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
-  --shadow-sh-lg: 0 8px 24px oklch(0 0 0 / 0.08);
-  --shadow-sh-xl: 0 12px 32px oklch(0 0 0 / 0.08);
-  --shadow-sh-2xl: 0 24px 56px oklch(0 0 0 / 0.16);
-  --shadow-sh-aside: -8px 0 24px oklch(0 0 0 / 0.12);
-  --shadow-sh-ring: 0 0 0 3px color-mix(in oklch, oklch(0.5248 0.1415 150.9) 22%, transparent);
-  --shadow-sh-ring-danger: 0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent);
-  --shadow-sh-ring-warning: 0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent);
-  --shadow-sh-ring-success: 0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent);
-  --shadow-sh-ring-info: 0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent);
   --opacity-disabled: 0.38;
   --opacity-hover: 0.08;
   --opacity-focus: 0.12;
@@ -237,6 +234,38 @@
   --scrollbar-width-default: 8px;
 }
 
+/* ── Shadows: utilities apontam pra vars de indireção (dark-aware) ─────────── */
+
+@theme inline {
+  --shadow-sh-none: var(--ds-sh-none);
+  --shadow-sh-sm: var(--ds-sh-sm);
+  --shadow-sh-md: var(--ds-sh-md);
+  --shadow-sh-lg: var(--ds-sh-lg);
+  --shadow-sh-xl: var(--ds-sh-xl);
+  --shadow-sh-2xl: var(--ds-sh-2xl);
+  --shadow-sh-aside: var(--ds-sh-aside);
+  --shadow-sh-ring: var(--ds-sh-ring);
+  --shadow-sh-ring-danger: var(--ds-sh-ring-danger);
+  --shadow-sh-ring-warning: var(--ds-sh-ring-warning);
+  --shadow-sh-ring-success: var(--ds-sh-ring-success);
+  --shadow-sh-ring-info: var(--ds-sh-ring-info);
+}
+
+:root {
+  --ds-sh-none: none;
+  --ds-sh-sm: 0 1px 2px oklch(0 0 0 / 0.04);
+  --ds-sh-md: rgba(145, 158, 171, 0.18) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
+  --ds-sh-lg: 0 8px 24px oklch(0 0 0 / 0.08);
+  --ds-sh-xl: 0 12px 32px oklch(0 0 0 / 0.08);
+  --ds-sh-2xl: 0 24px 56px oklch(0 0 0 / 0.16);
+  --ds-sh-aside: -8px 0 24px oklch(0 0 0 / 0.12);
+  --ds-sh-ring: 0 0 0 3px color-mix(in oklch, oklch(0.5248 0.1415 150.9) 22%, transparent);
+  --ds-sh-ring-danger: 0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent);
+  --ds-sh-ring-warning: 0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent);
+  --ds-sh-ring-success: 0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent);
+  --ds-sh-ring-info: 0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent);
+}
+
 /* ── Dark mode overrides (via .dark class — toggle manual) ────────────────── */
 
 .dark {
@@ -280,6 +309,8 @@
   --color-bg-table-row-hover: oklch(0.252 0 0);
   --color-bg-table-row-selected: color-mix(in oklch, oklch(0.7289 0.1571 162.3) 10%, transparent);
   --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.7289 0.1571 162.3) 14%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.7289 0.1571 162.3) 10%, oklch(0.225 0 0));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.7289 0.1571 162.3) 14%, oklch(0.225 0 0));
   --color-bg-dropdown: color-mix(in oklab, var(--color-bg-canvas) 70%, transparent);
   --color-fg-strong: oklch(1 0 0);
   --color-fg-default: oklch(0.98 0 0);
@@ -315,18 +346,24 @@
   --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0 0) 22%, transparent);
   --color-overlay-scrim: oklch(0 0 0 / 0.55);
   --color-overlay-float: oklch(1 0 0 / 0.08);
-  --shadow-sh-none: none;
-  --shadow-sh-sm: none;
-  --shadow-sh-md: 0 0 0 1px oklch(0.2645 0 0);
-  --shadow-sh-lg: 0 8px 24px oklch(0 0 0 / 0.30);
-  --shadow-sh-xl: 0 12px 32px oklch(0 0 0 / 0.40);
-  --shadow-sh-2xl: 0 24px 56px oklch(0 0 0 / 0.45);
-  --shadow-sh-aside: -8px 0 24px oklch(0 0 0 / 0.40);
-  --shadow-sh-ring: 0 0 0 3px color-mix(in oklch, oklch(0.7289 0.1571 162.3) 22%, transparent);
-  --shadow-sh-ring-danger: 0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent);
-  --shadow-sh-ring-warning: 0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent);
-  --shadow-sh-ring-success: 0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent);
-  --shadow-sh-ring-info: 0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent);
+  --color-chart-1: oklch(0.7289 0.1571 162.3);
+  --color-chart-2: oklch(0.72 0.13 195);
+  --color-chart-3: oklch(0.68 0.15 250);
+  --color-chart-4: oklch(0.80 0.15 80);
+  --color-chart-5: oklch(0.70 0.17 300);
+  --color-chart-grid: oklch(1 0 0 / 0.12);
+  --ds-sh-none: none;
+  --ds-sh-sm: 0 1px 2px oklch(0 0 0 / 0.15);
+  --ds-sh-md: 0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42);
+  --ds-sh-lg: 0 8px 24px oklch(0 0 0 / 0.30);
+  --ds-sh-xl: 0 12px 32px oklch(0 0 0 / 0.40);
+  --ds-sh-2xl: 0 24px 56px oklch(0 0 0 / 0.45);
+  --ds-sh-aside: -8px 0 24px oklch(0 0 0 / 0.40);
+  --ds-sh-ring: 0 0 0 3px color-mix(in oklch, oklch(0.7289 0.1571 162.3) 22%, transparent);
+  --ds-sh-ring-danger: 0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent);
+  --ds-sh-ring-warning: 0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent);
+  --ds-sh-ring-success: 0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent);
+  --ds-sh-ring-info: 0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent);
 }
 
 /* ── Typography utilities (composite presets) ─────────────────────────────── */

package/dist-lib/tokens/brands/default/components/spacing.d.ts

@@ -13,6 +13,27 @@ export declare const padPage: {
     readonly sm: string;
     readonly lg: string;
 };
+/**
+ * ─── Form Gap (gap padrão entre fields de formulário) ───────────────────────
+ *
+ * REGRA DS: todo formulário deve usar `gap-form-gap` (20px) entre fields
+ * (label+input units). Não usar `gap-gp-*` semânticos avulsos em form layout.
+ *
+ * Por quê 20px: equilibra densidade (12px era apertado) vs respiro (24px ficou
+ * solto demais quando temos 5+ fields num drawer). Bench: NovoClienteDrawer,
+ * SacarDialog → 20px tem leitura confortável sem desperdiçar viewport.
+ *
+ * Uso:
+ *   <div className="flex flex-col gap-form-gap"> ← entre FormField units
+ *     <FormFieldInput ... />
+ *     <FormFieldSelect ... />
+ *     <FormFieldCheckbox ... />
+ *   </div>
+ *
+ * Pra grids 2-col dentro do form (ex: agência + conta lado a lado): também
+ * usar gap-form-gap pra manter consistência horizontal × vertical.
+ */
+export declare const formGap: string;
 export declare const componentSpacing: {
     readonly padCard: {
         readonly base: string;
@@ -23,6 +44,7 @@ export declare const componentSpacing: {
         readonly sm: string;
         readonly lg: string;
     };
+    readonly formGap: string;
 };
 export type ComponentSpacingToken = typeof componentSpacing;
 //# sourceMappingURL=spacing.d.ts.map

package/dist-lib/tokens/brands/default/components/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/components/spacing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;CAAgC,CAAC;AAC9D,MAAM,MAAM,qBAAqB,GAAG,OAAO,gBAAgB,CAAC"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/components/spacing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,QAAW,CAAC;AAEhC,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAAyC,CAAC;AACvE,MAAM,MAAM,qBAAqB,GAAG,OAAO,gBAAgB,CAAC"}

package/dist-lib/tokens/brands/default/semantic/color-dark.d.ts

@@ -53,6 +53,8 @@ export declare const bg: {
     readonly "table-row-hover": "oklch(0.252 0 0)";
     readonly "table-row-selected": "color-mix(in oklch, oklch(0.7289 0.1571 162.3) 10%, transparent)";
     readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.7289 0.1571 162.3) 14%, transparent)";
+    readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.7289 0.1571 162.3) 10%, oklch(0.225 0 0))";
+    readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.7289 0.1571 162.3) 14%, oklch(0.225 0 0))";
     readonly dropdown: "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)";
 };
 export declare const fg: {
@@ -97,6 +99,14 @@ export declare const overlay: {
     readonly scrim: "oklch(0 0 0 / 0.55)";
     readonly float: "oklch(1 0 0 / 0.08)";
 };
+export declare const chart: {
+    readonly "1": "oklch(0.7289 0.1571 162.3)";
+    readonly "2": "oklch(0.72 0.13 195)";
+    readonly "3": "oklch(0.68 0.15 250)";
+    readonly "4": "oklch(0.80 0.15 80)";
+    readonly "5": "oklch(0.70 0.17 300)";
+    readonly grid: "oklch(1 0 0 / 0.12)";
+};
 export declare const colorDark: {
     bg: {
         readonly canvas: "oklch(0.205 0 0)";
@@ -139,6 +149,8 @@ export declare const colorDark: {
         readonly "table-row-hover": "oklch(0.252 0 0)";
         readonly "table-row-selected": "color-mix(in oklch, oklch(0.7289 0.1571 162.3) 10%, transparent)";
         readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.7289 0.1571 162.3) 14%, transparent)";
+        readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.7289 0.1571 162.3) 10%, oklch(0.225 0 0))";
+        readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.7289 0.1571 162.3) 14%, oklch(0.225 0 0))";
         readonly dropdown: "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)";
     };
     fg: {
@@ -183,5 +195,13 @@ export declare const colorDark: {
         readonly scrim: "oklch(0 0 0 / 0.55)";
         readonly float: "oklch(1 0 0 / 0.08)";
     };
+    chart: {
+        readonly "1": "oklch(0.7289 0.1571 162.3)";
+        readonly "2": "oklch(0.72 0.13 195)";
+        readonly "3": "oklch(0.68 0.15 250)";
+        readonly "4": "oklch(0.80 0.15 80)";
+        readonly "5": "oklch(0.70 0.17 300)";
+        readonly grid: "oklch(1 0 0 / 0.12)";
+    };
 };
 //# sourceMappingURL=color-dark.d.ts.map

package/dist-lib/tokens/brands/default/semantic/color-dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-dark.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/color-dark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CAuBL,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAgBT,CAAC;AAIX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAQV,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAoC,CAAC"}
+{"version":3,"file":"color-dark.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/color-dark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CAuBL,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAgBT,CAAC;AAIX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAQV,CAAC;AAKX,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2C,CAAC"}

package/dist-lib/tokens/brands/default/semantic/color-light.d.ts

@@ -58,6 +58,8 @@ export declare const bg: {
     readonly "table-row-hover": "oklch(0.973 0 0)";
     readonly "table-row-selected": "color-mix(in oklch, oklch(0.5248 0.1415 150.9) 6%, transparent)";
     readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.5248 0.1415 150.9) 10%, transparent)";
+    readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.5248 0.1415 150.9) 6%, oklch(1 0 0))";
+    readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.5248 0.1415 150.9) 10%, oklch(1 0 0))";
     readonly dropdown: "var(--color-bg-canvas)";
 };
 export declare const fg: {
@@ -102,6 +104,14 @@ export declare const overlay: {
     readonly scrim: "oklch(0 0 0 / 0.55)";
     readonly float: "oklch(0.55 0 0 / 0.12)";
 };
+export declare const chart: {
+    readonly "1": "oklch(0.58 0.140 151)";
+    readonly "2": "oklch(0.66 0.12 195)";
+    readonly "3": "oklch(0.55 0.15 250)";
+    readonly "4": "oklch(0.76 0.15 80)";
+    readonly "5": "oklch(0.56 0.18 300)";
+    readonly grid: "oklch(0.9076 0 0)";
+};
 export declare const colorLight: {
     bg: {
         readonly canvas: "oklch(1 0 0)";
@@ -144,6 +154,8 @@ export declare const colorLight: {
         readonly "table-row-hover": "oklch(0.973 0 0)";
         readonly "table-row-selected": "color-mix(in oklch, oklch(0.5248 0.1415 150.9) 6%, transparent)";
         readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.5248 0.1415 150.9) 10%, transparent)";
+        readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.5248 0.1415 150.9) 6%, oklch(1 0 0))";
+        readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.5248 0.1415 150.9) 10%, oklch(1 0 0))";
         readonly dropdown: "var(--color-bg-canvas)";
     };
     fg: {
@@ -188,5 +200,13 @@ export declare const colorLight: {
         readonly scrim: "oklch(0 0 0 / 0.55)";
         readonly float: "oklch(0.55 0 0 / 0.12)";
     };
+    chart: {
+        readonly "1": "oklch(0.58 0.140 151)";
+        readonly "2": "oklch(0.66 0.12 195)";
+        readonly "3": "oklch(0.55 0.15 250)";
+        readonly "4": "oklch(0.76 0.15 80)";
+        readonly "5": "oklch(0.56 0.18 300)";
+        readonly grid: "oklch(0.9076 0 0)";
+    };
 };
 //# sourceMappingURL=color-light.d.ts.map

package/dist-lib/tokens/brands/default/semantic/color-light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-light.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/color-light.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CAuBL,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAgBT,CAAC;AAIX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAQV,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAoC,CAAC"}
+{"version":3,"file":"color-light.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/color-light.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CAuBL,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAgBT,CAAC;AAIX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAQV,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2C,CAAC"}

package/dist-lib/tokens/brands/default/semantic/elevation.d.ts

@@ -38,8 +38,8 @@ export declare const shadow: {
     };
     readonly dark: {
         readonly none: "none";
-        readonly sm: "none";
-        readonly md: "0 0 0 1px oklch(0.2645 0 0)";
+        readonly sm: "0 1px 2px oklch(0 0 0 / 0.15)";
+        readonly md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)";
         readonly lg: "0 8px 24px oklch(0 0 0 / 0.30)";
         readonly xl: "0 12px 32px oklch(0 0 0 / 0.40)";
         readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.45)";
@@ -99,8 +99,8 @@ export declare const elevation: {
         };
         readonly dark: {
             readonly none: "none";
-            readonly sm: "none";
-            readonly md: "0 0 0 1px oklch(0.2645 0 0)";
+            readonly sm: "0 1px 2px oklch(0 0 0 / 0.15)";
+            readonly md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)";
             readonly lg: "0 8px 24px oklch(0 0 0 / 0.30)";
             readonly xl: "0 12px 32px oklch(0 0 0 / 0.40)";
             readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.45)";

package/dist-lib/tokens/brands/default/semantic/elevation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/elevation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCT,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAiBV,CAAC;AAGX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA6C,CAAC;AACpE,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC"}
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/elevation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCT,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAiBV,CAAC;AAGX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA6C,CAAC;AACpE,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC"}

package/dist-lib/tokens.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const brand = {
+  500: "oklch(0.58 0.140 151)",
   600: "oklch(0.5248 0.1415 150.9)"
 };
 const brandContrast = {
@@ -93,6 +94,13 @@ const bg$1 = {
   // (não usar `bg-brand-subtle` 14% — forte demais como bg de row)
   "table-row-selected": `color-mix(in oklch, ${brand[600]} 6%, transparent)`,
   "table-row-selected-hover": `color-mix(in oklch, ${brand[600]} 10%, transparent)`,
+  // Versões OPACAS dos selected — pra sticky/pinned cells não vazarem o conteúdo
+  // de trás (color-mix com `transparent` deixa o conteúdo scrollado aparecer
+  // sob a coluna fixa). Mix em SRGB (não oklch): misturar em oklch com um bg
+  // achromático (hue 0) contamina o hue → tinge de vermelho. Em srgb o resultado
+  // é o mesmo alpha-over do token transparente sobre o bg da tabela (white).
+  "table-row-selected-solid": `color-mix(in srgb, ${brand[600]} 6%, ${white})`,
+  "table-row-selected-hover-solid": `color-mix(in srgb, ${brand[600]} 10%, ${white})`,
   // Dropdown/Popover — referencia bg-canvas (white no light)
   "dropdown": "var(--color-bg-canvas)"
 };
@@ -155,7 +163,21 @@ const overlay$1 = {
   // 12% mantém o efeito "halo sutil" mas com presença visual real.
   float: "oklch(0.55 0 0 / 0.12)"
 };
-const colorLight = { bg: bg$1, fg: fg$1, border: border$1, ring: ring$1, overlay: overlay$1 };
+const chart$1 = {
+  "1": brand[500],
+  // verde da marca (primitive — acompanha a brand)
+  "2": "oklch(0.66 0.12 195)",
+  // teal
+  "3": "oklch(0.55 0.15 250)",
+  // azul
+  "4": "oklch(0.76 0.15 80)",
+  // âmbar
+  "5": "oklch(0.56 0.18 300)",
+  // violeta
+  grid: gray[200]
+  // linhas-guia dos gráficos (CartesianGrid/PolarGrid)
+};
+const colorLight = { bg: bg$1, fg: fg$1, border: border$1, ring: ring$1, overlay: overlay$1, chart: chart$1 };
 const bg = {
   // Surfaces sólidas
   canvas: gray[900],
@@ -211,6 +233,12 @@ const bg = {
   // (no dark precisa de alpha levemente maior pra ficar visível sobre surface escuro)
   "table-row-selected": `color-mix(in oklch, ${brandContrast[400]} 10%, transparent)`,
   "table-row-selected-hover": `color-mix(in oklch, ${brandContrast[400]} 14%, transparent)`,
+  // Versões OPACAS dos selected — pra sticky/pinned cells não vazarem o conteúdo
+  // de trás. Mix em SRGB (não oklch): misturar em oklch com o bg achromático
+  // (hue 0) contamina o hue → tinge de vermelho. Em srgb dá o mesmo alpha-over
+  // do token transparente sobre o bg sólido da tabela (surface escuro).
+  "table-row-selected-solid": `color-mix(in srgb, ${brandContrast[400]} 10%, oklch(0.225 0 0))`,
+  "table-row-selected-hover-solid": `color-mix(in srgb, ${brandContrast[400]} 14%, oklch(0.225 0 0))`,
   // Dropdown/Popover — frosted-glass: bg-canvas com 70% opacidade
   // (combina com backdrop-blur no componente pra efeito vidro fosco)
   "dropdown": "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)"
@@ -272,7 +300,21 @@ const overlay = {
   // 8% mantém o efeito "halo sutil" mas com presença visual real.
   float: "oklch(1 0 0 / 0.08)"
 };
-const colorDark = { bg, fg, border, ring, overlay };
+const chart = {
+  "1": brandContrast[400],
+  // verde da marca (primitive dark — acompanha a brand)
+  "2": "oklch(0.72 0.13 195)",
+  // teal
+  "3": "oklch(0.68 0.15 250)",
+  // azul
+  "4": "oklch(0.80 0.15 80)",
+  // âmbar
+  "5": "oklch(0.70 0.17 300)",
+  // violeta
+  grid: "oklch(1 0 0 / 0.12)"
+  // linhas-guia dos gráficos — branco 12% (visível na surface escura)
+};
+const colorDark = { bg, fg, border, ring, overlay, chart };
 const BASE = 4;
 const sp = (n) => `${n * BASE}px`;
 const scale = {
@@ -445,8 +487,11 @@ const shadow = {
   // ── Dark mode ────────────────────────────────────────────────────────────────
   dark: {
     none: "none",
-    sm: "none",
-    md: `0 0 0 1px ${gray[800]}`,
+    // Drop shadows reais no dark (antes: sm=none, md=hairline cinza claro → parecia
+    // "mais claro" no hover). Agora sm = sombra sutil, md = elevação mais profunda
+    // (sempre mais escura que sm). L-011: dark ≥ 2× a opacidade do light.
+    sm: "0 1px 2px oklch(0 0 0 / 0.15)",
+    md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)",
     lg: "0 8px 24px oklch(0 0 0 / 0.30)",
     xl: "0 12px 32px oklch(0 0 0 / 0.40)",
     "2xl": "0 24px 56px oklch(0 0 0 / 0.45)",