npm - @snksergio/design-system - Versions diffs - 0.45.0 → 0.47.0 - Mend

@snksergio/design-system 0.45.0 → 0.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist-lib/src/components/ui/Spinner/spinner.styles.d.ts CHANGED Viewed

@@ -9,6 +9,9 @@ import { VariantProps } from '../../../utils/tv';
  *
  * Variantes:
  *   - size:  sm (size-icon-sm) | md (size-icon-md) | lg (size-icon-lg)
+ *            | xl (size-icon-xl, 32px) | 2xl (size-icon-2xl, 40px) — os dois
+ *            maiores existem pra loading de área/página (ScreenLoader), onde
+ *            os 24px do lg somem no espaço
  *   - color: current (herda o texto do pai) | default | muted | brand | on-brand
  */
 export declare const spinnerStyles: import('tailwind-variants').TVReturnType<{
@@ -16,6 +19,8 @@ export declare const spinnerStyles: import('tailwind-variants').TVReturnType<{
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+        "2xl": string;
     };
     color: {
         current: string;
@@ -29,6 +34,8 @@ export declare const spinnerStyles: import('tailwind-variants').TVReturnType<{
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+        "2xl": string;
     };
     color: {
         current: string;
@@ -42,6 +49,8 @@ export declare const spinnerStyles: import('tailwind-variants').TVReturnType<{
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+        "2xl": string;
     };
     color: {
         current: string;

package/dist-lib/src/components/ui/Spinner/spinner.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD~~;;;;;;;;;;;GAWG~~;AACH,eAAO,MAAM,aAAa~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAoBxB~~,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
1	+ {"version":3,"file":"spinner.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAsBxB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist-lib/theme/brand-blue.css CHANGED Viewed

@@ -1,110 +1,110 @@
-/**
- * brand-blue.css — Auto-gerado. Não editar manualmente.
- * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
- * Source (repo do DS): tokens/brands/blue/semantic/*.ts
- * Regenerar (só no repo do DS): npm run tokens:brand:blue
- *
- * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
- * data-theme="blue" no <html>. Sem o atributo nada casa — e não dá erro.
- * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
- * setAttribute/removeAttribute na mão ("default" = remover o atributo).
- *
- * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
- * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
- * omite o que já é idêntico à default.
- */
-/* ── Light (44 vars divergem da default) ─────────────────────────── */
-[data-theme="blue"]:not(.dark) {
-  --color-bg-canvas: oklch(0.982 0.008 264);
-  --color-bg-surface: oklch(0.995 0.004 264);
-  --color-bg-surface-elevated: oklch(0.998 0.003 264);
-  --color-bg-surface-panels: oklch(0.982 0.008 264);
-  --color-bg-sidebar: oklch(0.948 0.016 264);
-  --color-bg-subtle: oklch(0.973 0.004 264);
-  --color-bg-muted: oklch(0.973 0.004 264);
-  --color-bg-emphasis: oklch(0.94 0.007 264);
-  --color-bg-input: oklch(0.995 0.004 264);
-  --color-bg-accent: oklch(0.995 0.004 264);
-  --color-bg-brand: oklch(0.52 0.180 264);
-  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 14%, transparent);
-  --color-bg-brand-hover: color-mix(in oklch, oklch(0.52 0.180 264) 90%, black);
-  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
-  --color-bg-muted-hover: oklch(0.95 0.012 264);
-  --color-bg-input-hover: oklch(0.973 0.004 264);
-  --color-bg-accent-hover: oklch(0.84 0.024 264);
-  --color-bg-sidebar-accent: oklch(0.999 0.002 264);
-  --color-bg-sidebar-accent-hover: oklch(0.92 0.018 264);
-  --color-bg-table: oklch(0.995 0.004 264);
-  --color-bg-table-head: oklch(0.973 0.004 264);
-  --color-bg-table-row-hover: oklch(0.973 0.004 264);
-  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.52 0.180 264) 6%, transparent);
-  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.52 0.180 264) 10%, transparent);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.52 0.180 264) 6%, oklch(1 0 0));
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.52 0.180 264) 10%, oklch(1 0 0));
-  --color-fg-strong: oklch(0.15 0.012 264);
-  --color-fg-default: oklch(0.15 0.012 264);
-  --color-fg-muted: oklch(0.4997 0.028 264);
-  --color-fg-subtle: oklch(0.7025 0.024 264);
-  --color-fg-disabled: oklch(0.7025 0.024 264);
-  --color-fg-brand: oklch(0.52 0.180 264);
-  --color-border-default: oklch(0.9076 0.011 264);
-  --color-border-subtle: oklch(0.931 0.008 264);
-  --color-border-input: oklch(0.8761 0.015 264);
-  --color-border-sidebar: oklch(0.9076 0.016 264);
-  --color-border-brand: oklch(0.52 0.180 264);
-  --color-border-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 36%, transparent);
-  --color-border-table: oklch(0.931 0.008 264);
-  --color-ring-brand: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
-  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
-  --color-overlay-float: oklch(0.55 0.05 264 / 0.12);
-  --color-chart-1: oklch(0.58 0.175 264);
-  --color-chart-grid: oklch(0.9076 0.011 264);
-}
-/* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
-.dark[data-theme="blue"] {
-  --color-bg-canvas: oklch(0.205 0.014 264);
-  --color-bg-surface: oklch(0.225 0.014 264);
-  --color-bg-surface-elevated: oklch(0.225 0.014 264);
-  --color-bg-surface-panels: oklch(0.205 0.014 264);
-  --color-bg-sidebar: oklch(0.225 0.014 264);
-  --color-bg-subtle: oklch(0.92 0.035 264 / 0.01);
-  --color-bg-muted: oklch(0.92 0.035 264 / 0.03);
-  --color-bg-emphasis: oklch(0.92 0.035 264 / 0.12);
-  --color-bg-input: oklch(0.92 0.035 264 / 0.04);
-  --color-bg-accent: oklch(0.92 0.035 264 / 0.12);
-  --color-bg-brand: oklch(0.72 0.150 256);
-  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
-  --color-bg-brand-hover: color-mix(in oklch, oklch(0.72 0.150 256) 90%, black);
-  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
-  --color-bg-muted-hover: oklch(0.92 0.035 264 / 0.08);
-  --color-bg-input-hover: oklch(0.92 0.035 264 / 0.08);
-  --color-bg-accent-hover: oklch(0.92 0.035 264 / 0.16);
-  --color-bg-sidebar-accent: oklch(0.92 0.035 264 / 0.08);
-  --color-bg-sidebar-accent-hover: oklch(0.92 0.035 264 / 0.12);
-  --color-bg-table: oklch(0.225 0.014 264);
-  --color-bg-table-head: oklch(0.252 0.016 264);
-  --color-bg-table-row-hover: oklch(0.252 0.016 264);
-  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.72 0.150 256) 10%, transparent);
-  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.72 0.150 256) 10%, oklch(0.225 0.014 264));
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.72 0.150 256) 14%, oklch(0.225 0.014 264));
-  --color-fg-default: oklch(0.98 0.004 264);
-  --color-fg-muted: oklch(0.7025 0.024 264);
-  --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.024 264) 70%, transparent);
-  --color-fg-disabled: oklch(0.36 0.022 264);
-  --color-fg-brand: oklch(0.72 0.150 256);
-  --color-border-default: oklch(0.2645 0.016 264);
-  --color-border-subtle: oklch(0.92 0.035 264 / 0.04);
-  --color-border-input: oklch(0.92 0.035 264 / 0.08);
-  --color-border-sidebar: oklch(0.2645 0.016 264);
-  --color-border-brand: oklch(0.72 0.150 256);
-  --color-border-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 36%, transparent);
-  --color-border-table: oklch(0.2645 0.016 264);
-  --color-ring-brand: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
-  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
-  --color-overlay-float: oklch(0.92 0.035 264 / 0.08);
-  --color-chart-1: oklch(0.72 0.150 256);
-  --color-chart-grid: oklch(0.92 0.035 264 / 0.12);
-}
+/**
+ * brand-blue.css — Auto-gerado. Não editar manualmente.
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
+ * Source (repo do DS): tokens/brands/blue/semantic/*.ts
+ * Regenerar (só no repo do DS): npm run tokens:brand:blue
+ *
+ * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
+ * data-theme="blue" no <html>. Sem o atributo nada casa — e não dá erro.
+ * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
+ * setAttribute/removeAttribute na mão ("default" = remover o atributo).
+ *
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
+ * omite o que já é idêntico à default.
+ */
+/* ── Light (44 vars divergem da default) ─────────────────────────── */
+[data-theme="blue"]:not(.dark) {
+  --color-bg-canvas: oklch(0.982 0.008 264);
+  --color-bg-surface: oklch(0.995 0.004 264);
+  --color-bg-surface-elevated: oklch(0.998 0.003 264);
+  --color-bg-surface-panels: oklch(0.982 0.008 264);
+  --color-bg-sidebar: oklch(0.948 0.016 264);
+  --color-bg-subtle: oklch(0.973 0.004 264);
+  --color-bg-muted: oklch(0.973 0.004 264);
+  --color-bg-emphasis: oklch(0.94 0.007 264);
+  --color-bg-input: oklch(0.995 0.004 264);
+  --color-bg-accent: oklch(0.995 0.004 264);
+  --color-bg-brand: oklch(0.52 0.180 264);
+  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 14%, transparent);
+  --color-bg-brand-hover: color-mix(in oklch, oklch(0.52 0.180 264) 90%, black);
+  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
+  --color-bg-muted-hover: oklch(0.95 0.012 264);
+  --color-bg-input-hover: oklch(0.973 0.004 264);
+  --color-bg-accent-hover: oklch(0.84 0.024 264);
+  --color-bg-sidebar-accent: oklch(0.999 0.002 264);
+  --color-bg-sidebar-accent-hover: oklch(0.92 0.018 264);
+  --color-bg-table: oklch(0.995 0.004 264);
+  --color-bg-table-head: oklch(0.973 0.004 264);
+  --color-bg-table-row-hover: oklch(0.973 0.004 264);
+  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.52 0.180 264) 6%, transparent);
+  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.52 0.180 264) 10%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.52 0.180 264) 6%, oklch(1 0 0));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.52 0.180 264) 10%, oklch(1 0 0));
+  --color-fg-strong: oklch(0.15 0.012 264);
+  --color-fg-default: oklch(0.15 0.012 264);
+  --color-fg-muted: oklch(0.4997 0.028 264);
+  --color-fg-subtle: oklch(0.7025 0.024 264);
+  --color-fg-disabled: oklch(0.7025 0.024 264);
+  --color-fg-brand: oklch(0.52 0.180 264);
+  --color-border-default: oklch(0.9076 0.011 264);
+  --color-border-subtle: oklch(0.931 0.008 264);
+  --color-border-input: oklch(0.8761 0.015 264);
+  --color-border-sidebar: oklch(0.9076 0.016 264);
+  --color-border-brand: oklch(0.52 0.180 264);
+  --color-border-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 36%, transparent);
+  --color-border-table: oklch(0.931 0.008 264);
+  --color-ring-brand: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
+  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
+  --color-overlay-float: oklch(0.55 0.05 264 / 0.12);
+  --color-chart-1: oklch(0.58 0.175 264);
+  --color-chart-grid: oklch(0.9076 0.011 264);
+}
+/* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
+.dark[data-theme="blue"] {
+  --color-bg-canvas: oklch(0.205 0.014 264);
+  --color-bg-surface: oklch(0.225 0.014 264);
+  --color-bg-surface-elevated: oklch(0.225 0.014 264);
+  --color-bg-surface-panels: oklch(0.205 0.014 264);
+  --color-bg-sidebar: oklch(0.225 0.014 264);
+  --color-bg-subtle: oklch(0.92 0.035 264 / 0.01);
+  --color-bg-muted: oklch(0.92 0.035 264 / 0.03);
+  --color-bg-emphasis: oklch(0.92 0.035 264 / 0.12);
+  --color-bg-input: oklch(0.92 0.035 264 / 0.04);
+  --color-bg-accent: oklch(0.92 0.035 264 / 0.12);
+  --color-bg-brand: oklch(0.72 0.150 256);
+  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
+  --color-bg-brand-hover: color-mix(in oklch, oklch(0.72 0.150 256) 90%, black);
+  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
+  --color-bg-muted-hover: oklch(0.92 0.035 264 / 0.08);
+  --color-bg-input-hover: oklch(0.92 0.035 264 / 0.08);
+  --color-bg-accent-hover: oklch(0.92 0.035 264 / 0.16);
+  --color-bg-sidebar-accent: oklch(0.92 0.035 264 / 0.08);
+  --color-bg-sidebar-accent-hover: oklch(0.92 0.035 264 / 0.12);
+  --color-bg-table: oklch(0.225 0.014 264);
+  --color-bg-table-head: oklch(0.252 0.016 264);
+  --color-bg-table-row-hover: oklch(0.252 0.016 264);
+  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.72 0.150 256) 10%, transparent);
+  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.72 0.150 256) 10%, oklch(0.225 0.014 264));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.72 0.150 256) 14%, oklch(0.225 0.014 264));
+  --color-fg-default: oklch(0.98 0.004 264);
+  --color-fg-muted: oklch(0.7025 0.024 264);
+  --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.024 264) 70%, transparent);
+  --color-fg-disabled: oklch(0.36 0.022 264);
+  --color-fg-brand: oklch(0.72 0.150 256);
+  --color-border-default: oklch(0.2645 0.016 264);
+  --color-border-subtle: oklch(0.92 0.035 264 / 0.04);
+  --color-border-input: oklch(0.92 0.035 264 / 0.08);
+  --color-border-sidebar: oklch(0.2645 0.016 264);
+  --color-border-brand: oklch(0.72 0.150 256);
+  --color-border-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 36%, transparent);
+  --color-border-table: oklch(0.2645 0.016 264);
+  --color-ring-brand: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
+  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
+  --color-overlay-float: oklch(0.92 0.035 264 / 0.08);
+  --color-chart-1: oklch(0.72 0.150 256);
+  --color-chart-grid: oklch(0.92 0.035 264 / 0.12);
+}

package/dist-lib/theme/brand-green.css CHANGED Viewed

@@ -1,110 +1,110 @@
-/**
- * brand-green.css — Auto-gerado. Não editar manualmente.
- * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
- * Source (repo do DS): tokens/brands/green/semantic/*.ts
- * Regenerar (só no repo do DS): npm run tokens:brand:green
- *
- * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
- * data-theme="green" no <html>. Sem o atributo nada casa — e não dá erro.
- * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
- * setAttribute/removeAttribute na mão ("default" = remover o atributo).
- *
- * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
- * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
- * omite o que já é idêntico à default.
- */
-/* ── Light (44 vars divergem da default) ─────────────────────────── */
-[data-theme="green"]:not(.dark) {
-  --color-bg-canvas: oklch(0.986 0.005 142);
-  --color-bg-surface: oklch(0.996 0.003 142);
-  --color-bg-surface-elevated: oklch(0.998 0.002 142);
-  --color-bg-surface-panels: oklch(0.986 0.005 142);
-  --color-bg-sidebar: oklch(0.950 0.005 142);
-  --color-bg-subtle: oklch(0.973 0.004 142);
-  --color-bg-muted: oklch(0.973 0.004 142);
-  --color-bg-emphasis: oklch(0.94 0.006 142);
-  --color-bg-input: oklch(0.996 0.003 142);
-  --color-bg-accent: oklch(0.996 0.003 142);
-  --color-bg-brand: oklch(0.58 0.170 142);
-  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 14%, transparent);
-  --color-bg-brand-hover: color-mix(in oklch, oklch(0.58 0.170 142) 90%, black);
-  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
-  --color-bg-muted-hover: oklch(0.95 0.010 142);
-  --color-bg-input-hover: oklch(0.973 0.004 142);
-  --color-bg-accent-hover: oklch(0.84 0.022 142);
-  --color-bg-sidebar-accent: oklch(0.999 0.002 142);
-  --color-bg-sidebar-accent-hover: oklch(0.93 0.008 142);
-  --color-bg-table: oklch(0.996 0.003 142);
-  --color-bg-table-head: oklch(0.973 0.004 142);
-  --color-bg-table-row-hover: oklch(0.973 0.004 142);
-  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.58 0.170 142) 6%, transparent);
-  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.58 0.170 142) 10%, transparent);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.58 0.170 142) 6%, oklch(1 0 0));
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.58 0.170 142) 10%, oklch(1 0 0));
-  --color-fg-strong: oklch(0.15 0.010 142);
-  --color-fg-default: oklch(0.15 0.010 142);
-  --color-fg-muted: oklch(0.4997 0.028 142);
-  --color-fg-subtle: oklch(0.7025 0.022 142);
-  --color-fg-disabled: oklch(0.7025 0.022 142);
-  --color-fg-brand: oklch(0.58 0.170 142);
-  --color-border-default: oklch(0.9076 0.009 142);
-  --color-border-subtle: oklch(0.931 0.007 142);
-  --color-border-input: oklch(0.8761 0.012 142);
-  --color-border-sidebar: oklch(0.9076 0.008 142);
-  --color-border-brand: oklch(0.58 0.170 142);
-  --color-border-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 36%, transparent);
-  --color-border-table: oklch(0.931 0.007 142);
-  --color-ring-brand: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
-  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
-  --color-overlay-float: oklch(0.55 0.05 142 / 0.12);
-  --color-chart-1: oklch(0.62 0.170 142);
-  --color-chart-grid: oklch(0.9076 0.009 142);
-}
-/* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
-.dark[data-theme="green"] {
-  --color-bg-canvas: oklch(0.205 0.026 142);
-  --color-bg-surface: oklch(0.225 0.030 142);
-  --color-bg-surface-elevated: oklch(0.225 0.030 142);
-  --color-bg-surface-panels: oklch(0.205 0.026 142);
-  --color-bg-sidebar: oklch(0.225 0.030 142);
-  --color-bg-subtle: oklch(0.90 0.08 142 / 0.01);
-  --color-bg-muted: oklch(0.90 0.08 142 / 0.03);
-  --color-bg-emphasis: oklch(0.90 0.08 142 / 0.12);
-  --color-bg-input: oklch(0.90 0.08 142 / 0.04);
-  --color-bg-accent: oklch(0.90 0.08 142 / 0.12);
-  --color-bg-brand: oklch(0.81 0.190 145);
-  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
-  --color-bg-brand-hover: color-mix(in oklch, oklch(0.81 0.190 145) 90%, black);
-  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
-  --color-bg-muted-hover: oklch(0.90 0.08 142 / 0.08);
-  --color-bg-input-hover: oklch(0.90 0.08 142 / 0.08);
-  --color-bg-accent-hover: oklch(0.90 0.08 142 / 0.16);
-  --color-bg-sidebar-accent: oklch(0.90 0.08 142 / 0.08);
-  --color-bg-sidebar-accent-hover: oklch(0.90 0.08 142 / 0.12);
-  --color-bg-table: oklch(0.225 0.030 142);
-  --color-bg-table-head: oklch(0.252 0.034 142);
-  --color-bg-table-row-hover: oklch(0.252 0.034 142);
-  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.81 0.190 145) 10%, transparent);
-  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.81 0.190 145) 10%, oklch(0.225 0.030 142));
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.81 0.190 145) 14%, oklch(0.225 0.030 142));
-  --color-fg-default: oklch(0.98 0.012 142);
-  --color-fg-muted: oklch(0.7025 0.022 142);
-  --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.022 142) 70%, transparent);
-  --color-fg-disabled: oklch(0.36 0.036 142);
-  --color-fg-brand: oklch(0.81 0.190 145);
-  --color-border-default: oklch(0.2645 0.026 142);
-  --color-border-subtle: oklch(0.90 0.08 142 / 0.04);
-  --color-border-input: oklch(0.90 0.08 142 / 0.08);
-  --color-border-sidebar: oklch(0.2645 0.026 142);
-  --color-border-brand: oklch(0.81 0.190 145);
-  --color-border-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 36%, transparent);
-  --color-border-table: oklch(0.2645 0.026 142);
-  --color-ring-brand: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
-  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
-  --color-overlay-float: oklch(0.90 0.08 142 / 0.08);
-  --color-chart-1: oklch(0.81 0.190 145);
-  --color-chart-grid: oklch(0.90 0.08 142 / 0.12);
-}
+/**
+ * brand-green.css — Auto-gerado. Não editar manualmente.
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
+ * Source (repo do DS): tokens/brands/green/semantic/*.ts
+ * Regenerar (só no repo do DS): npm run tokens:brand:green
+ *
+ * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
+ * data-theme="green" no <html>. Sem o atributo nada casa — e não dá erro.
+ * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
+ * setAttribute/removeAttribute na mão ("default" = remover o atributo).
+ *
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
+ * omite o que já é idêntico à default.
+ */
+/* ── Light (44 vars divergem da default) ─────────────────────────── */
+[data-theme="green"]:not(.dark) {
+  --color-bg-canvas: oklch(0.986 0.005 142);
+  --color-bg-surface: oklch(0.996 0.003 142);
+  --color-bg-surface-elevated: oklch(0.998 0.002 142);
+  --color-bg-surface-panels: oklch(0.986 0.005 142);
+  --color-bg-sidebar: oklch(0.950 0.005 142);
+  --color-bg-subtle: oklch(0.973 0.004 142);
+  --color-bg-muted: oklch(0.973 0.004 142);
+  --color-bg-emphasis: oklch(0.94 0.006 142);
+  --color-bg-input: oklch(0.996 0.003 142);
+  --color-bg-accent: oklch(0.996 0.003 142);
+  --color-bg-brand: oklch(0.58 0.170 142);
+  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 14%, transparent);
+  --color-bg-brand-hover: color-mix(in oklch, oklch(0.58 0.170 142) 90%, black);
+  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
+  --color-bg-muted-hover: oklch(0.95 0.010 142);
+  --color-bg-input-hover: oklch(0.973 0.004 142);
+  --color-bg-accent-hover: oklch(0.84 0.022 142);
+  --color-bg-sidebar-accent: oklch(0.999 0.002 142);
+  --color-bg-sidebar-accent-hover: oklch(0.93 0.008 142);
+  --color-bg-table: oklch(0.996 0.003 142);
+  --color-bg-table-head: oklch(0.973 0.004 142);
+  --color-bg-table-row-hover: oklch(0.973 0.004 142);
+  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.58 0.170 142) 6%, transparent);
+  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.58 0.170 142) 10%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.58 0.170 142) 6%, oklch(1 0 0));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.58 0.170 142) 10%, oklch(1 0 0));
+  --color-fg-strong: oklch(0.15 0.010 142);
+  --color-fg-default: oklch(0.15 0.010 142);
+  --color-fg-muted: oklch(0.4997 0.028 142);
+  --color-fg-subtle: oklch(0.7025 0.022 142);
+  --color-fg-disabled: oklch(0.7025 0.022 142);
+  --color-fg-brand: oklch(0.58 0.170 142);
+  --color-border-default: oklch(0.9076 0.009 142);
+  --color-border-subtle: oklch(0.931 0.007 142);
+  --color-border-input: oklch(0.8761 0.012 142);
+  --color-border-sidebar: oklch(0.9076 0.008 142);
+  --color-border-brand: oklch(0.58 0.170 142);
+  --color-border-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 36%, transparent);
+  --color-border-table: oklch(0.931 0.007 142);
+  --color-ring-brand: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
+  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
+  --color-overlay-float: oklch(0.55 0.05 142 / 0.12);
+  --color-chart-1: oklch(0.62 0.170 142);
+  --color-chart-grid: oklch(0.9076 0.009 142);
+}
+/* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
+.dark[data-theme="green"] {
+  --color-bg-canvas: oklch(0.205 0.026 142);
+  --color-bg-surface: oklch(0.225 0.030 142);
+  --color-bg-surface-elevated: oklch(0.225 0.030 142);
+  --color-bg-surface-panels: oklch(0.205 0.026 142);
+  --color-bg-sidebar: oklch(0.225 0.030 142);
+  --color-bg-subtle: oklch(0.90 0.08 142 / 0.01);
+  --color-bg-muted: oklch(0.90 0.08 142 / 0.03);
+  --color-bg-emphasis: oklch(0.90 0.08 142 / 0.12);
+  --color-bg-input: oklch(0.90 0.08 142 / 0.04);
+  --color-bg-accent: oklch(0.90 0.08 142 / 0.12);
+  --color-bg-brand: oklch(0.81 0.190 145);
+  --color-bg-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
+  --color-bg-brand-hover: color-mix(in oklch, oklch(0.81 0.190 145) 90%, black);
+  --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
+  --color-bg-muted-hover: oklch(0.90 0.08 142 / 0.08);
+  --color-bg-input-hover: oklch(0.90 0.08 142 / 0.08);
+  --color-bg-accent-hover: oklch(0.90 0.08 142 / 0.16);
+  --color-bg-sidebar-accent: oklch(0.90 0.08 142 / 0.08);
+  --color-bg-sidebar-accent-hover: oklch(0.90 0.08 142 / 0.12);
+  --color-bg-table: oklch(0.225 0.030 142);
+  --color-bg-table-head: oklch(0.252 0.034 142);
+  --color-bg-table-row-hover: oklch(0.252 0.034 142);
+  --color-bg-table-row-selected: color-mix(in oklch, oklch(0.81 0.190 145) 10%, transparent);
+  --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.81 0.190 145) 10%, oklch(0.225 0.030 142));
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.81 0.190 145) 14%, oklch(0.225 0.030 142));
+  --color-fg-default: oklch(0.98 0.012 142);
+  --color-fg-muted: oklch(0.7025 0.022 142);
+  --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.022 142) 70%, transparent);
+  --color-fg-disabled: oklch(0.36 0.036 142);
+  --color-fg-brand: oklch(0.81 0.190 145);
+  --color-border-default: oklch(0.2645 0.026 142);
+  --color-border-subtle: oklch(0.90 0.08 142 / 0.04);
+  --color-border-input: oklch(0.90 0.08 142 / 0.08);
+  --color-border-sidebar: oklch(0.2645 0.026 142);
+  --color-border-brand: oklch(0.81 0.190 145);
+  --color-border-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 36%, transparent);
+  --color-border-table: oklch(0.2645 0.026 142);
+  --color-ring-brand: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
+  --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
+  --color-overlay-float: oklch(0.90 0.08 142 / 0.08);
+  --color-chart-1: oklch(0.81 0.190 145);
+  --color-chart-grid: oklch(0.90 0.08 142 / 0.12);
+}