@snksergio/design-system 0.31.0 → 0.32.1

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 (10) hide show
  1. package/README.md +32 -0
  2. package/dist-lib/theme/brand-blue.css +107 -0
  3. package/dist-lib/theme/brand-green.css +107 -0
  4. package/dist-lib/theme/brand-pay.css +186 -0
  5. package/dist-lib/theme/brand-vibrant.css +145 -0
  6. package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts +26 -0
  7. package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts.map +1 -1
  8. package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts +50 -45
  9. package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts.map +1 -1
  10. package/package.json +7 -1
package/README.md CHANGED
@@ -133,6 +133,38 @@ Cria o projeto já conectado ao registry, com tema/`cn`/`tv` configurados, tela
133
133
 
134
134
  **O que NÃO vem no copy-in:** o pipeline interno do DS (`.claude/agents|skills|hooks`, `.ai/context`, lições) vive só neste repositório. O **kit do consumidor** (orquestrador `ds-kit` + skills de tela + `DESIGN.md` + proteção por hook) vem via CLI no scaffold.
135
135
 
136
+ ### Trocar o tema de marca
137
+
138
+ O DS tem 5 marcas (`default` · `blue` · `green` · `pay` · `vibrant`). Cada uma não-default
139
+ é um **overlay** escopado em `[data-theme="<id>"]` que sobrescreve só as cores que diferem
140
+ do tema-base. Marca e claro/escuro são eixos independentes e combinam livremente.
141
+
142
+ **Projeto novo:** o prompt **"Tema de cor?"** do scaffold já pergunta e aplica.
143
+
144
+ **Projeto em andamento** — 2 passos, qualquer canal:
145
+
146
+ ```bash
147
+ # copy-in (scaffold): o tema é um item do registry, igual a um componente
148
+ npm run igreen:add -- theme-vibrant
149
+ ```
150
+ ```css
151
+ /* 1. importar DEPOIS do tema-base */
152
+ @import "@snksergio/design-system/theme.css"; /* npm */
153
+ @import "@snksergio/design-system/theme/brand-vibrant.css";
154
+ /* ou, em copy-in / submódulo, o caminho local do arquivo */
155
+ ```
156
+ ```html
157
+ <!-- 2. ativar — sem isto o CSS fica INERTE, e não dá erro -->
158
+ <html data-theme="vibrant">
159
+ ```
160
+
161
+ Via **npm** exige `@snksergio/design-system` ≥ **0.31.1**. Via **submódulo** o arquivo já
162
+ está no disco: só importar e `git pull` traz temas novos.
163
+
164
+ Guia completo (trocar, criar tema novo, troca em runtime, armadilhas) na página
165
+ **Temas de marca** do catálogo, e a tabela de qual canal entrega o quê em
166
+ `DISTRIBUICAO.md` §2.1.
167
+
136
168
  ---
137
169
 
138
170
  ## Tutorial — produzir telas e CRUDs com IA (DS como subprojeto)
package/dist-lib/theme/brand-blue.css ADDED
@@ -0,0 +1,107 @@
1
+ /**
2
+ * brand-blue.css — Auto-gerado. Não editar manualmente.
3
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
4
+ * Source: tokens/brands/blue/semantic/*.ts
5
+ * Regenerar: npx tsx tokens/transforms/to-brand-overlay.ts blue > src/styles/theme/brand-blue.css
6
+ *
7
+ * Ative aplicando data-theme="blue" no <html> (ver src/hooks/useBrand.ts).
8
+ *
9
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
10
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
11
+ * omite o que já é idêntico à default.
12
+ */
13
+
14
+ /* ── Light (44 vars divergem da default) ─────────────────────────── */
15
+ [data-theme="blue"]:not(.dark) {
16
+ --color-bg-canvas: oklch(0.982 0.008 264);
17
+ --color-bg-surface: oklch(0.995 0.004 264);
18
+ --color-bg-surface-elevated: oklch(0.998 0.003 264);
19
+ --color-bg-surface-panels: oklch(0.982 0.008 264);
20
+ --color-bg-sidebar: oklch(0.948 0.016 264);
21
+ --color-bg-subtle: oklch(0.973 0.004 264);
22
+ --color-bg-muted: oklch(0.973 0.004 264);
23
+ --color-bg-emphasis: oklch(0.94 0.007 264);
24
+ --color-bg-input: oklch(0.995 0.004 264);
25
+ --color-bg-accent: oklch(0.995 0.004 264);
26
+ --color-bg-brand: oklch(0.52 0.180 264);
27
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 14%, transparent);
28
+ --color-bg-brand-hover: color-mix(in oklch, oklch(0.52 0.180 264) 90%, black);
29
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
30
+ --color-bg-muted-hover: oklch(0.95 0.012 264);
31
+ --color-bg-input-hover: oklch(0.973 0.004 264);
32
+ --color-bg-accent-hover: oklch(0.84 0.024 264);
33
+ --color-bg-sidebar-accent: oklch(0.999 0.002 264);
34
+ --color-bg-sidebar-accent-hover: oklch(0.92 0.018 264);
35
+ --color-bg-table: oklch(0.995 0.004 264);
36
+ --color-bg-table-head: oklch(0.973 0.004 264);
37
+ --color-bg-table-row-hover: oklch(0.973 0.004 264);
38
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.52 0.180 264) 6%, transparent);
39
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.52 0.180 264) 10%, transparent);
40
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.52 0.180 264) 6%, oklch(1 0 0));
41
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.52 0.180 264) 10%, oklch(1 0 0));
42
+ --color-fg-strong: oklch(0.15 0.012 264);
43
+ --color-fg-default: oklch(0.15 0.012 264);
44
+ --color-fg-muted: oklch(0.4997 0.028 264);
45
+ --color-fg-subtle: oklch(0.7025 0.024 264);
46
+ --color-fg-disabled: oklch(0.7025 0.024 264);
47
+ --color-fg-brand: oklch(0.52 0.180 264);
48
+ --color-border-default: oklch(0.9076 0.011 264);
49
+ --color-border-subtle: oklch(0.931 0.008 264);
50
+ --color-border-input: oklch(0.8761 0.015 264);
51
+ --color-border-sidebar: oklch(0.9076 0.016 264);
52
+ --color-border-brand: oklch(0.52 0.180 264);
53
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.52 0.180 264) 36%, transparent);
54
+ --color-border-table: oklch(0.931 0.008 264);
55
+ --color-ring-brand: color-mix(in oklch, oklch(0.52 0.180 264) 22%, transparent);
56
+ --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
57
+ --color-overlay-float: oklch(0.55 0.05 264 / 0.12);
58
+ --color-chart-1: oklch(0.58 0.175 264);
59
+ --color-chart-grid: oklch(0.9076 0.011 264);
60
+ }
61
+
62
+ /* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
63
+ .dark[data-theme="blue"] {
64
+ --color-bg-canvas: oklch(0.205 0.014 264);
65
+ --color-bg-surface: oklch(0.225 0.014 264);
66
+ --color-bg-surface-elevated: oklch(0.225 0.014 264);
67
+ --color-bg-surface-panels: oklch(0.205 0.014 264);
68
+ --color-bg-sidebar: oklch(0.225 0.014 264);
69
+ --color-bg-subtle: oklch(0.92 0.035 264 / 0.01);
70
+ --color-bg-muted: oklch(0.92 0.035 264 / 0.03);
71
+ --color-bg-emphasis: oklch(0.92 0.035 264 / 0.12);
72
+ --color-bg-input: oklch(0.92 0.035 264 / 0.04);
73
+ --color-bg-accent: oklch(0.92 0.035 264 / 0.12);
74
+ --color-bg-brand: oklch(0.72 0.150 256);
75
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
76
+ --color-bg-brand-hover: color-mix(in oklch, oklch(0.72 0.150 256) 90%, black);
77
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
78
+ --color-bg-muted-hover: oklch(0.92 0.035 264 / 0.08);
79
+ --color-bg-input-hover: oklch(0.92 0.035 264 / 0.08);
80
+ --color-bg-accent-hover: oklch(0.92 0.035 264 / 0.16);
81
+ --color-bg-sidebar-accent: oklch(0.92 0.035 264 / 0.08);
82
+ --color-bg-sidebar-accent-hover: oklch(0.92 0.035 264 / 0.12);
83
+ --color-bg-table: oklch(0.225 0.014 264);
84
+ --color-bg-table-head: oklch(0.252 0.016 264);
85
+ --color-bg-table-row-hover: oklch(0.252 0.016 264);
86
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.72 0.150 256) 10%, transparent);
87
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.72 0.150 256) 14%, transparent);
88
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.72 0.150 256) 10%, oklch(0.225 0.014 264));
89
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.72 0.150 256) 14%, oklch(0.225 0.014 264));
90
+ --color-fg-default: oklch(0.98 0.004 264);
91
+ --color-fg-muted: oklch(0.7025 0.024 264);
92
+ --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.024 264) 70%, transparent);
93
+ --color-fg-disabled: oklch(0.36 0.022 264);
94
+ --color-fg-brand: oklch(0.72 0.150 256);
95
+ --color-border-default: oklch(0.2645 0.016 264);
96
+ --color-border-subtle: oklch(0.92 0.035 264 / 0.04);
97
+ --color-border-input: oklch(0.92 0.035 264 / 0.08);
98
+ --color-border-sidebar: oklch(0.2645 0.016 264);
99
+ --color-border-brand: oklch(0.72 0.150 256);
100
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.72 0.150 256) 36%, transparent);
101
+ --color-border-table: oklch(0.2645 0.016 264);
102
+ --color-ring-brand: color-mix(in oklch, oklch(0.72 0.150 256) 22%, transparent);
103
+ --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 264) 22%, transparent);
104
+ --color-overlay-float: oklch(0.92 0.035 264 / 0.08);
105
+ --color-chart-1: oklch(0.72 0.150 256);
106
+ --color-chart-grid: oklch(0.92 0.035 264 / 0.12);
107
+ }
package/dist-lib/theme/brand-green.css ADDED
@@ -0,0 +1,107 @@
1
+ /**
2
+ * brand-green.css — Auto-gerado. Não editar manualmente.
3
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
4
+ * Source: tokens/brands/green/semantic/*.ts
5
+ * Regenerar: npx tsx tokens/transforms/to-brand-overlay.ts green > src/styles/theme/brand-green.css
6
+ *
7
+ * Ative aplicando data-theme="green" no <html> (ver src/hooks/useBrand.ts).
8
+ *
9
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
10
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
11
+ * omite o que já é idêntico à default.
12
+ */
13
+
14
+ /* ── Light (44 vars divergem da default) ─────────────────────────── */
15
+ [data-theme="green"]:not(.dark) {
16
+ --color-bg-canvas: oklch(0.986 0.005 142);
17
+ --color-bg-surface: oklch(0.996 0.003 142);
18
+ --color-bg-surface-elevated: oklch(0.998 0.002 142);
19
+ --color-bg-surface-panels: oklch(0.986 0.005 142);
20
+ --color-bg-sidebar: oklch(0.950 0.005 142);
21
+ --color-bg-subtle: oklch(0.973 0.004 142);
22
+ --color-bg-muted: oklch(0.973 0.004 142);
23
+ --color-bg-emphasis: oklch(0.94 0.006 142);
24
+ --color-bg-input: oklch(0.996 0.003 142);
25
+ --color-bg-accent: oklch(0.996 0.003 142);
26
+ --color-bg-brand: oklch(0.58 0.170 142);
27
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 14%, transparent);
28
+ --color-bg-brand-hover: color-mix(in oklch, oklch(0.58 0.170 142) 90%, black);
29
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
30
+ --color-bg-muted-hover: oklch(0.95 0.010 142);
31
+ --color-bg-input-hover: oklch(0.973 0.004 142);
32
+ --color-bg-accent-hover: oklch(0.84 0.022 142);
33
+ --color-bg-sidebar-accent: oklch(0.999 0.002 142);
34
+ --color-bg-sidebar-accent-hover: oklch(0.93 0.008 142);
35
+ --color-bg-table: oklch(0.996 0.003 142);
36
+ --color-bg-table-head: oklch(0.973 0.004 142);
37
+ --color-bg-table-row-hover: oklch(0.973 0.004 142);
38
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.58 0.170 142) 6%, transparent);
39
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.58 0.170 142) 10%, transparent);
40
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.58 0.170 142) 6%, oklch(1 0 0));
41
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.58 0.170 142) 10%, oklch(1 0 0));
42
+ --color-fg-strong: oklch(0.15 0.010 142);
43
+ --color-fg-default: oklch(0.15 0.010 142);
44
+ --color-fg-muted: oklch(0.4997 0.028 142);
45
+ --color-fg-subtle: oklch(0.7025 0.022 142);
46
+ --color-fg-disabled: oklch(0.7025 0.022 142);
47
+ --color-fg-brand: oklch(0.58 0.170 142);
48
+ --color-border-default: oklch(0.9076 0.009 142);
49
+ --color-border-subtle: oklch(0.931 0.007 142);
50
+ --color-border-input: oklch(0.8761 0.012 142);
51
+ --color-border-sidebar: oklch(0.9076 0.008 142);
52
+ --color-border-brand: oklch(0.58 0.170 142);
53
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.58 0.170 142) 36%, transparent);
54
+ --color-border-table: oklch(0.931 0.007 142);
55
+ --color-ring-brand: color-mix(in oklch, oklch(0.58 0.170 142) 22%, transparent);
56
+ --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
57
+ --color-overlay-float: oklch(0.55 0.05 142 / 0.12);
58
+ --color-chart-1: oklch(0.62 0.170 142);
59
+ --color-chart-grid: oklch(0.9076 0.009 142);
60
+ }
61
+
62
+ /* ── Dark (43 vars — .dark[data-theme] vence o .dark base) ────────── */
63
+ .dark[data-theme="green"] {
64
+ --color-bg-canvas: oklch(0.205 0.026 142);
65
+ --color-bg-surface: oklch(0.225 0.030 142);
66
+ --color-bg-surface-elevated: oklch(0.225 0.030 142);
67
+ --color-bg-surface-panels: oklch(0.205 0.026 142);
68
+ --color-bg-sidebar: oklch(0.225 0.030 142);
69
+ --color-bg-subtle: oklch(0.90 0.08 142 / 0.01);
70
+ --color-bg-muted: oklch(0.90 0.08 142 / 0.03);
71
+ --color-bg-emphasis: oklch(0.90 0.08 142 / 0.12);
72
+ --color-bg-input: oklch(0.90 0.08 142 / 0.04);
73
+ --color-bg-accent: oklch(0.90 0.08 142 / 0.12);
74
+ --color-bg-brand: oklch(0.81 0.190 145);
75
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
76
+ --color-bg-brand-hover: color-mix(in oklch, oklch(0.81 0.190 145) 90%, black);
77
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
78
+ --color-bg-muted-hover: oklch(0.90 0.08 142 / 0.08);
79
+ --color-bg-input-hover: oklch(0.90 0.08 142 / 0.08);
80
+ --color-bg-accent-hover: oklch(0.90 0.08 142 / 0.16);
81
+ --color-bg-sidebar-accent: oklch(0.90 0.08 142 / 0.08);
82
+ --color-bg-sidebar-accent-hover: oklch(0.90 0.08 142 / 0.12);
83
+ --color-bg-table: oklch(0.225 0.030 142);
84
+ --color-bg-table-head: oklch(0.252 0.034 142);
85
+ --color-bg-table-row-hover: oklch(0.252 0.034 142);
86
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.81 0.190 145) 10%, transparent);
87
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.81 0.190 145) 14%, transparent);
88
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.81 0.190 145) 10%, oklch(0.225 0.030 142));
89
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.81 0.190 145) 14%, oklch(0.225 0.030 142));
90
+ --color-fg-default: oklch(0.98 0.012 142);
91
+ --color-fg-muted: oklch(0.7025 0.022 142);
92
+ --color-fg-subtle: color-mix(in oklch, oklch(0.7025 0.022 142) 70%, transparent);
93
+ --color-fg-disabled: oklch(0.36 0.036 142);
94
+ --color-fg-brand: oklch(0.81 0.190 145);
95
+ --color-border-default: oklch(0.2645 0.026 142);
96
+ --color-border-subtle: oklch(0.90 0.08 142 / 0.04);
97
+ --color-border-input: oklch(0.90 0.08 142 / 0.08);
98
+ --color-border-sidebar: oklch(0.2645 0.026 142);
99
+ --color-border-brand: oklch(0.81 0.190 145);
100
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.81 0.190 145) 36%, transparent);
101
+ --color-border-table: oklch(0.2645 0.026 142);
102
+ --color-ring-brand: color-mix(in oklch, oklch(0.81 0.190 145) 22%, transparent);
103
+ --color-ring-secondary: color-mix(in oklch, oklch(0.4997 0.028 142) 22%, transparent);
104
+ --color-overlay-float: oklch(0.90 0.08 142 / 0.08);
105
+ --color-chart-1: oklch(0.81 0.190 145);
106
+ --color-chart-grid: oklch(0.90 0.08 142 / 0.12);
107
+ }
package/dist-lib/theme/brand-pay.css ADDED
@@ -0,0 +1,186 @@
1
+ /**
2
+ * brand-pay.css — Auto-gerado. Não editar manualmente.
3
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
4
+ * Source: tokens/brands/pay/semantic/*.ts
5
+ * Regenerar: npx tsx tokens/transforms/to-brand-overlay.ts pay > src/styles/theme/brand-pay.css
6
+ *
7
+ * Ative aplicando data-theme="pay" no <html> (ver src/hooks/useBrand.ts).
8
+ *
9
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
10
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
11
+ * omite o que já é idêntico à default.
12
+ */
13
+
14
+ /* ── Light (83 vars divergem da default) ─────────────────────────── */
15
+ [data-theme="pay"]:not(.dark) {
16
+ --color-bg-canvas: #f9fafb;
17
+ --color-bg-surface: #ffffff;
18
+ --color-bg-surface-elevated: #ffffff;
19
+ --color-bg-surface-panels: #f9fafb;
20
+ --color-bg-sidebar: #ffffff;
21
+ --color-bg-subtle: #f9fafb;
22
+ --color-bg-muted: #f3f4f6;
23
+ --color-bg-emphasis: #eceef1;
24
+ --color-bg-input: #ffffff;
25
+ --color-bg-accent: #f9fafb;
26
+ --color-bg-brand: #00a859;
27
+ --color-bg-brand-subtle: rgba(0,168,89,.10);
28
+ --color-bg-brand-hover: #008a4b;
29
+ --color-bg-brand-subtle-hover: rgba(0,168,89,.18);
30
+ --color-bg-danger: #f83b3b;
31
+ --color-bg-danger-muted: rgba(248,59,59,.10);
32
+ --color-bg-danger-hover: #e02e2e;
33
+ --color-bg-danger-muted-hover: rgba(248,59,59,.18);
34
+ --color-bg-success: #00a859;
35
+ --color-bg-success-muted: rgba(0,168,89,.11);
36
+ --color-bg-success-hover: #008a4b;
37
+ --color-bg-success-muted-hover: rgba(0,168,89,.18);
38
+ --color-bg-warning: #d97c02;
39
+ --color-bg-warning-muted: rgba(217,124,2,.12);
40
+ --color-bg-warning-hover: #b96702;
41
+ --color-bg-warning-muted-hover: rgba(217,124,2,.20);
42
+ --color-bg-info: #0058e6;
43
+ --color-bg-info-muted: rgba(0,88,230,.10);
44
+ --color-bg-info-hover: #0047bd;
45
+ --color-bg-info-muted-hover: rgba(0,88,230,.18);
46
+ --color-bg-muted-hover: #f3f4f6;
47
+ --color-bg-input-hover: #f9fafb;
48
+ --color-bg-accent-hover: #eceef1;
49
+ --color-bg-sidebar-accent: rgba(0,168,89,.10);
50
+ --color-bg-sidebar-accent-hover: #f3f4f6;
51
+ --color-bg-table: #ffffff;
52
+ --color-bg-table-head: #f9fafb;
53
+ --color-bg-table-row-hover: #f9fafb;
54
+ --color-bg-table-row-selected: rgba(0,168,89,.08);
55
+ --color-bg-table-row-selected-hover: rgba(0,168,89,.13);
56
+ --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 8%, #ffffff);
57
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 13%, #ffffff);
58
+ --color-bg-dropdown: var(--color-bg-surface);
59
+ --color-fg-strong: #0a0a0c;
60
+ --color-fg-default: #0a0a0c;
61
+ --color-fg-muted: #5f6b77;
62
+ --color-fg-subtle: #7e8994;
63
+ --color-fg-disabled: #a2acb6;
64
+ --color-fg-brand: #008a4b;
65
+ --color-fg-danger: #f83b3b;
66
+ --color-fg-success: #00a859;
67
+ --color-fg-warning: #d97c02;
68
+ --color-fg-info: #0058e6;
69
+ --color-fg-on-brand: #ffffff;
70
+ --color-fg-on-danger: #ffffff;
71
+ --color-fg-on-success: #ffffff;
72
+ --color-fg-on-warning: #ffffff;
73
+ --color-fg-on-info: #ffffff;
74
+ --color-border-default: rgba(17,17,17,.08);
75
+ --color-border-subtle: rgba(17,17,17,.06);
76
+ --color-border-input: rgba(17,17,17,.14);
77
+ --color-border-sidebar: rgba(17,17,17,.08);
78
+ --color-border-brand: #00a859;
79
+ --color-border-brand-subtle: rgba(0,168,89,.36);
80
+ --color-border-danger-muted: rgba(248,59,59,.36);
81
+ --color-border-success-muted: rgba(0,168,89,.36);
82
+ --color-border-warning-muted: rgba(217,124,2,.36);
83
+ --color-border-info-muted: rgba(0,88,230,.36);
84
+ --color-border-table: rgba(17,17,17,.08);
85
+ --color-ring-brand: rgba(0,168,89,.30);
86
+ --color-ring-danger: rgba(248,59,59,.30);
87
+ --color-ring-success: rgba(0,168,89,.30);
88
+ --color-ring-warning: rgba(217,124,2,.30);
89
+ --color-ring-info: rgba(0,88,230,.30);
90
+ --color-ring-secondary: rgba(17,17,17,.14);
91
+ --color-overlay-scrim: rgba(0,0,0,.55);
92
+ --color-overlay-float: rgba(16,24,40,.12);
93
+ --color-chart-1: #00a859;
94
+ --color-chart-2: #0058e6;
95
+ --color-chart-3: #65a30d;
96
+ --color-chart-4: #d97c02;
97
+ --color-chart-5: #7c3aed;
98
+ --color-chart-grid: rgba(17,17,17,.08);
99
+ }
100
+
101
+ /* ── Dark (83 vars — .dark[data-theme] vence o .dark base) ────────── */
102
+ .dark[data-theme="pay"] {
103
+ --color-bg-canvas: #050608;
104
+ --color-bg-surface: #0b0d10;
105
+ --color-bg-surface-elevated: #0f1116;
106
+ --color-bg-surface-panels: #0b0d10;
107
+ --color-bg-sidebar: #0b0d10;
108
+ --color-bg-subtle: #0f1116;
109
+ --color-bg-muted: #0f1116;
110
+ --color-bg-emphasis: #13161c;
111
+ --color-bg-input: #0b0d10;
112
+ --color-bg-accent: #0f1116;
113
+ --color-bg-brand: #00a859;
114
+ --color-bg-brand-subtle: rgba(0,168,89,.14);
115
+ --color-bg-brand-hover: #12b869;
116
+ --color-bg-brand-subtle-hover: rgba(0,168,89,.22);
117
+ --color-bg-danger: #ff6b6b;
118
+ --color-bg-danger-muted: rgba(255,107,107,.14);
119
+ --color-bg-danger-hover: #ff8585;
120
+ --color-bg-danger-muted-hover: rgba(255,107,107,.22);
121
+ --color-bg-success: #3bc882;
122
+ --color-bg-success-muted: rgba(59,200,130,.14);
123
+ --color-bg-success-hover: #57d195;
124
+ --color-bg-success-muted-hover: rgba(59,200,130,.22);
125
+ --color-bg-warning: #ffb620;
126
+ --color-bg-warning-muted: rgba(255,182,32,.14);
127
+ --color-bg-warning-hover: #ffc748;
128
+ --color-bg-warning-muted-hover: rgba(255,182,32,.22);
129
+ --color-bg-info: #3580ff;
130
+ --color-bg-info-muted: rgba(53,128,255,.15);
131
+ --color-bg-info-hover: #5a99ff;
132
+ --color-bg-info-muted-hover: rgba(53,128,255,.24);
133
+ --color-bg-muted-hover: #13161c;
134
+ --color-bg-input-hover: #13161c;
135
+ --color-bg-accent-hover: #13161c;
136
+ --color-bg-sidebar-accent: rgba(0,168,89,.14);
137
+ --color-bg-sidebar-accent-hover: #13161c;
138
+ --color-bg-table: #0b0d10;
139
+ --color-bg-table-head: #13161c;
140
+ --color-bg-table-row-hover: #13161c;
141
+ --color-bg-table-row-selected: rgba(0,168,89,.14);
142
+ --color-bg-table-row-selected-hover: rgba(0,168,89,.20);
143
+ --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 12%, #0b0d10);
144
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 18%, #0b0d10);
145
+ --color-bg-dropdown: #0b0d10;
146
+ --color-fg-strong: #ffffff;
147
+ --color-fg-default: #f5f7fa;
148
+ --color-fg-muted: #aeb4bd;
149
+ --color-fg-subtle: #7c8591;
150
+ --color-fg-disabled: #5b636b;
151
+ --color-fg-brand: #3bc882;
152
+ --color-fg-danger: #ff6b6b;
153
+ --color-fg-success: #3bc882;
154
+ --color-fg-warning: #ffb620;
155
+ --color-fg-info: #3580ff;
156
+ --color-fg-on-brand: #ffffff;
157
+ --color-fg-on-danger: #ffffff;
158
+ --color-fg-on-success: #000000;
159
+ --color-fg-on-warning: #000000;
160
+ --color-fg-on-info: #ffffff;
161
+ --color-border-default: rgba(255,255,255,.08);
162
+ --color-border-subtle: rgba(255,255,255,.06);
163
+ --color-border-input: rgba(255,255,255,.08);
164
+ --color-border-sidebar: rgba(255,255,255,.08);
165
+ --color-border-brand: #00a859;
166
+ --color-border-brand-subtle: rgba(0,168,89,.36);
167
+ --color-border-danger-muted: rgba(255,107,107,.36);
168
+ --color-border-success-muted: rgba(59,200,130,.36);
169
+ --color-border-warning-muted: rgba(255,182,32,.36);
170
+ --color-border-info-muted: rgba(53,128,255,.36);
171
+ --color-border-table: rgba(255,255,255,.08);
172
+ --color-ring-brand: rgba(0,168,89,.35);
173
+ --color-ring-danger: rgba(255,107,107,.35);
174
+ --color-ring-success: rgba(59,200,130,.35);
175
+ --color-ring-warning: rgba(255,182,32,.35);
176
+ --color-ring-info: rgba(53,128,255,.35);
177
+ --color-ring-secondary: rgba(255,255,255,.16);
178
+ --color-overlay-scrim: rgba(0,0,0,.6);
179
+ --color-overlay-float: rgba(255,255,255,.08);
180
+ --color-chart-1: #00a859;
181
+ --color-chart-2: #3580ff;
182
+ --color-chart-3: #a3e635;
183
+ --color-chart-4: #ffb620;
184
+ --color-chart-5: #a78bfa;
185
+ --color-chart-grid: rgba(255,255,255,.08);
186
+ }
package/dist-lib/theme/brand-vibrant.css ADDED
@@ -0,0 +1,145 @@
1
+ /**
2
+ * brand-vibrant.css — Auto-gerado. Não editar manualmente.
3
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
4
+ * Source: tokens/brands/vibrant/semantic/*.ts
5
+ * Regenerar: npx tsx tokens/transforms/to-brand-overlay.ts vibrant > src/styles/theme/brand-vibrant.css
6
+ *
7
+ * Ative aplicando data-theme="vibrant" no <html> (ver src/hooks/useBrand.ts).
8
+ *
9
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
10
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
11
+ * omite o que já é idêntico à default.
12
+ */
13
+
14
+ /* ── Light (65 vars divergem da default) ─────────────────────────── */
15
+ [data-theme="vibrant"]:not(.dark) {
16
+ --color-bg-surface-elevated: oklch(0.9851 0 0);
17
+ --color-bg-sidebar: oklch(0.9516 0.0012 250);
18
+ --color-bg-subtle: oklch(0.9851 0 0);
19
+ --color-bg-muted: oklch(0.9674 0.0007 250);
20
+ --color-bg-emphasis: oklch(0.9197 0.0020 250);
21
+ --color-bg-brand: oklch(0.4645 0.1539 142.59);
22
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
23
+ --color-bg-brand-hover: oklch(0.4138 0.1317 142.94);
24
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
25
+ --color-bg-danger: oklch(0.58 0.235 25);
26
+ --color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 14%, transparent);
27
+ --color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, black);
28
+ --color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
29
+ --color-bg-success: oklch(0.4645 0.1539 142.59);
30
+ --color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
31
+ --color-bg-success-hover: oklch(0.4138 0.1317 142.94);
32
+ --color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
33
+ --color-bg-warning: oklch(0.825 0.170 81);
34
+ --color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 14%, transparent);
35
+ --color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, black);
36
+ --color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
37
+ --color-bg-info: oklch(0.55 0.293 300);
38
+ --color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 14%, transparent);
39
+ --color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, black);
40
+ --color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
41
+ --color-bg-muted-hover: oklch(0.95 0.0012 250);
42
+ --color-bg-input-hover: oklch(0.9851 0 0);
43
+ --color-bg-accent-hover: oklch(0.84 0.0032 250);
44
+ --color-bg-sidebar-accent-hover: oklch(0.92 0.0020 250);
45
+ --color-bg-table-head: oklch(0.9674 0.0007 250);
46
+ --color-bg-table-row-hover: oklch(0.9851 0 0);
47
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 6%, transparent);
48
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
49
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 6%, oklch(1 0 0));
50
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(1 0 0));
51
+ --color-fg-strong: oklch(0.1652 0.0010 250);
52
+ --color-fg-default: oklch(0.1652 0.0010 250);
53
+ --color-fg-muted: oklch(0.5517 0.0062 250);
54
+ --color-fg-subtle: oklch(0.7118 0.0060 250);
55
+ --color-fg-disabled: oklch(0.7118 0.0060 250);
56
+ --color-fg-brand: oklch(0.4645 0.1539 142.59);
57
+ --color-fg-danger: oklch(0.58 0.235 25);
58
+ --color-fg-success: oklch(0.4645 0.1539 142.59);
59
+ --color-fg-warning: oklch(0.825 0.170 81);
60
+ --color-fg-info: oklch(0.55 0.293 300);
61
+ --color-border-default: oklch(0.906 0.0024 250);
62
+ --color-border-subtle: oklch(0.9325 0.0016 250);
63
+ --color-border-input: oklch(0.7118 0.0060 250);
64
+ --color-border-sidebar: oklch(0.906 0.0024 250);
65
+ --color-border-brand: oklch(0.4645 0.1539 142.59);
66
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
67
+ --color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
68
+ --color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
69
+ --color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
70
+ --color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
71
+ --color-border-table: oklch(0.9325 0.0016 250);
72
+ --color-ring-brand: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
73
+ --color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
74
+ --color-ring-success: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
75
+ --color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
76
+ --color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
77
+ --color-ring-secondary: color-mix(in oklch, oklch(0.5517 0.0062 250) 22%, transparent);
78
+ --color-overlay-float: oklch(0.5517 0.0062 250 / 0.12);
79
+ --color-chart-1: oklch(0.6783 0.2304 142.42);
80
+ --color-chart-grid: oklch(0.9197 0.0020 250);
81
+ }
82
+
83
+ /* ── Dark (60 vars — .dark[data-theme] vence o .dark base) ────────── */
84
+ .dark[data-theme="vibrant"] {
85
+ --color-bg-canvas: oklch(0.2050 0 0);
86
+ --color-bg-surface: oklch(0.2603 0 0);
87
+ --color-bg-surface-elevated: oklch(0.2873 0 0);
88
+ --color-bg-surface-panels: oklch(0.2050 0 0);
89
+ --color-bg-sidebar: oklch(0.2603 0 0);
90
+ --color-bg-muted: oklch(1 0 0 / 0.05);
91
+ --color-bg-brand: oklch(0.866993 0.294055 142.3546);
92
+ --color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
93
+ --color-bg-brand-hover: oklch(0.8018 0.2721 142.38);
94
+ --color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
95
+ --color-bg-danger: oklch(0.58 0.235 25);
96
+ --color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 10%, transparent);
97
+ --color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, white);
98
+ --color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 16%, transparent);
99
+ --color-bg-success: oklch(0.866993 0.294055 142.3546);
100
+ --color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
101
+ --color-bg-success-hover: oklch(0.8018 0.2721 142.38);
102
+ --color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
103
+ --color-bg-warning: oklch(0.825 0.170 81);
104
+ --color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 10%, transparent);
105
+ --color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, white);
106
+ --color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 16%, transparent);
107
+ --color-bg-info: oklch(0.55 0.293 300);
108
+ --color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 10%, transparent);
109
+ --color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, white);
110
+ --color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 16%, transparent);
111
+ --color-bg-table: oklch(0.2603 0 0);
112
+ --color-bg-table-head: oklch(0.2873 0 0);
113
+ --color-bg-table-row-hover: oklch(0.2873 0 0);
114
+ --color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
115
+ --color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
116
+ --color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2603 0 0));
117
+ --color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2603 0 0));
118
+ --color-fg-default: oklch(0.9670 0 0);
119
+ --color-fg-muted: oklch(0.7120 0 0);
120
+ --color-fg-subtle: oklch(0.5520 0 0);
121
+ --color-fg-disabled: oklch(0.4420 0 0);
122
+ --color-fg-brand: oklch(0.866993 0.294055 142.3546);
123
+ --color-fg-danger: oklch(0.68 0.208 25);
124
+ --color-fg-success: oklch(0.866993 0.294055 142.3546);
125
+ --color-fg-warning: oklch(0.825 0.170 81);
126
+ --color-fg-info: oklch(0.72 0.172 300);
127
+ --color-border-default: oklch(0.3400 0 0);
128
+ --color-border-subtle: oklch(0.3090 0 0);
129
+ --color-border-input: oklch(0.3750 0 0);
130
+ --color-border-sidebar: oklch(0.3090 0 0);
131
+ --color-border-brand: oklch(0.8018 0.2721 142.38);
132
+ --color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
133
+ --color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
134
+ --color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
135
+ --color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
136
+ --color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
137
+ --color-border-table: oklch(0.3090 0 0);
138
+ --color-ring-brand: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
139
+ --color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
140
+ --color-ring-success: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
141
+ --color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
142
+ --color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
143
+ --color-ring-secondary: color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent);
144
+ --color-chart-1: oklch(0.866993 0.294055 142.3546);
145
+ }
package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts CHANGED
@@ -68,6 +68,19 @@ export declare const gray: {
68
68
  readonly 900: "oklch(0.2103 0.0012 250)";
69
69
  readonly 950: "oklch(0.1652 0.0010 250)";
70
70
  };
71
+ export declare const grayDark: {
72
+ readonly 50: "oklch(0.9850 0 0)";
73
+ readonly 100: "oklch(0.9670 0 0)";
74
+ readonly 200: "oklch(0.9200 0 0)";
75
+ readonly 300: "oklch(0.8710 0 0)";
76
+ readonly 400: "oklch(0.7120 0 0)";
77
+ readonly 500: "oklch(0.5520 0 0)";
78
+ readonly 600: "oklch(0.4420 0 0)";
79
+ readonly 700: "oklch(0.3510 0 0)";
80
+ readonly 800: "oklch(0.2603 0 0)";
81
+ readonly 900: "oklch(0.2050 0 0)";
82
+ readonly 950: "oklch(0.1600 0 0)";
83
+ };
71
84
  export declare const danger: {
72
85
  readonly 50: "oklch(0.97 0.015 25)";
73
86
  readonly 100: "oklch(0.94 0.030 25)";
@@ -194,6 +207,19 @@ export declare const colorPalette: {
194
207
  readonly 900: "oklch(0.2103 0.0012 250)";
195
208
  readonly 950: "oklch(0.1652 0.0010 250)";
196
209
  };
210
+ grayDark: {
211
+ readonly 50: "oklch(0.9850 0 0)";
212
+ readonly 100: "oklch(0.9670 0 0)";
213
+ readonly 200: "oklch(0.9200 0 0)";
214
+ readonly 300: "oklch(0.8710 0 0)";
215
+ readonly 400: "oklch(0.7120 0 0)";
216
+ readonly 500: "oklch(0.5520 0 0)";
217
+ readonly 600: "oklch(0.4420 0 0)";
218
+ readonly 700: "oklch(0.3510 0 0)";
219
+ readonly 800: "oklch(0.2603 0 0)";
220
+ readonly 900: "oklch(0.2050 0 0)";
221
+ readonly 950: "oklch(0.1600 0 0)";
222
+ };
197
223
  success: {
198
224
  readonly 50: "oklch(0.9761 0.0429 141.03)";
199
225
  readonly 100: "oklch(0.9493 0.0945 141.72)";
package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/vibrant/primitives/color-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYR,CAAC;AASX,eAAO,MAAM,aAAa;;;;;;;;;;;;CAAQ,CAAC;AA0DnC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;CAeP,CAAC;AAkCX,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAC;AAOX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAAQ,CAAC;AAM7B,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAaV,CAAC;AAQX,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAaP,CAAC;AAGX,eAAO,MAAM,KAAK,iBAAiB,CAAC;AACpC,eAAO,MAAM,KAAK,iBAAiB,CAAC;AAGpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CAyBR,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKxB,CAAC"}
1
+ {"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/vibrant/primitives/color-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYR,CAAC;AASX,eAAO,MAAM,aAAa;;;;;;;;;;;;CAAQ,CAAC;AA0DnC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;CAeP,CAAC;AAyDX,eAAO,MAAM,QAAQ;;;;;;;;;;;;CAYX,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAC;AAOX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAAQ,CAAC;AAM7B,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAaV,CAAC;AAQX,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAaP,CAAC;AAGX,eAAO,MAAM,KAAK,iBAAiB,CAAC;AACpC,eAAO,MAAM,KAAK,iBAAiB,CAAC;AAGpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;CAyBR,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKxB,CAAC"}
package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts CHANGED
@@ -4,12 +4,17 @@
4
4
  *
5
5
  * Mesmo contrato de nomes que color-light.ts.
6
6
  *
7
- * Escopo: brand + STATUS re-medidos + neutra própria "graphite".
7
+ * Escopo: brand + STATUS re-medidos + neutra ACROMÁTICA própria do dark.
8
8
  *
9
- * ⚠️ A neutra NÃO é mais a Zinc do handoff — é desenhada pra esta marca (hue 250,
10
- * croma redistribuído por área de tela). Os shades vêm todos da rampa; os hex
11
- * ficam SÓ em `primitives/color-palette.ts`, que é a fonte única. Não duplicar hex
12
- * aqui: eles dessincronizam calado quando a rampa muda (já aconteceu).
9
+ * ⚠️ Este arquivo importa `grayDark`, NÃO a `gray` que o light usa — e o alias local
10
+ * é `gray` pra não poluir todas as chamadas. A divisão existe porque o light foi
11
+ * fechado com a neutra fria (hue 250) e o mantenedor pediu o dark "mais cinza mesmo,
12
+ * no estilo da iGreen default", com `#242424` como âncora. Uma rampa só não atende os
13
+ * dois. Ver o bloco da `grayDark` nos primitives pra escada e para o aviso do §4.1
14
+ * sobre o offset de um degrau no canvas (armadilha em que a 1ª leva desta marca caiu).
15
+ *
16
+ * Os hex nos comentários abaixo existem porque o dark é acromático e o hex é literal
17
+ * (R=G=B) — a fonte única segue sendo os primitives; se divergir, os primitives mandam.
13
18
  *
14
19
  * `brandContrast` aqui é ALIAS do próprio `brand` (ver primitives): o neon já
15
20
  * está em L 0.867, no teto do gamut sRGB, então não existe variante mais clara
@@ -28,11 +33,11 @@
28
33
  * o bloco `on-*` (irradiação sobre o neon; black é o que a iGreen default usa).
29
34
  */
30
35
  export declare const bg: {
31
- readonly canvas: "oklch(0.1652 0.0010 250)";
32
- readonly surface: "oklch(0.2103 0.0012 250)";
33
- readonly "surface-elevated": "oklch(0.2739 0.0018 250)";
34
- readonly "surface-panels": "oklch(0.1652 0.0010 250)";
35
- readonly sidebar: "oklch(0.2103 0.0012 250)";
36
+ readonly canvas: "oklch(0.2050 0 0)";
37
+ readonly surface: "oklch(0.2603 0 0)";
38
+ readonly "surface-elevated": "oklch(0.2873 0 0)";
39
+ readonly "surface-panels": "oklch(0.2050 0 0)";
40
+ readonly sidebar: "oklch(0.2603 0 0)";
36
41
  readonly subtle: "oklch(1 0 0 / 0.01)";
37
42
  readonly muted: "oklch(1 0 0 / 0.05)";
38
43
  readonly emphasis: "color-mix(in oklch, oklch(1 0 0) 12%, transparent)";
@@ -63,21 +68,21 @@ export declare const bg: {
63
68
  readonly "accent-hover": "oklch(1 0 0 / 0.16)";
64
69
  readonly "sidebar-accent": "oklch(1 0 0 / 0.08)";
65
70
  readonly "sidebar-accent-hover": "oklch(1 0 0 / 0.12)";
66
- readonly table: "oklch(0.2103 0.0012 250)";
67
- readonly "table-head": "oklch(0.2739 0.0018 250)";
68
- readonly "table-row-hover": "oklch(0.2739 0.0018 250)";
71
+ readonly table: "oklch(0.2603 0 0)";
72
+ readonly "table-head": "oklch(0.2873 0 0)";
73
+ readonly "table-row-hover": "oklch(0.2873 0 0)";
69
74
  readonly "table-row-selected": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent)";
70
75
  readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent)";
71
- readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2103 0.0012 250))";
72
- readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2103 0.0012 250))";
76
+ readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2603 0 0))";
77
+ readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2603 0 0))";
73
78
  readonly dropdown: "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)";
74
79
  };
75
80
  export declare const fg: {
76
81
  readonly strong: "oklch(1 0 0)";
77
- readonly default: "oklch(0.9674 0.0007 250)";
78
- readonly muted: "oklch(0.7118 0.0060 250)";
79
- readonly subtle: "oklch(0.5517 0.0062 250)";
80
- readonly disabled: "oklch(0.4419 0.0055 250)";
82
+ readonly default: "oklch(0.9670 0 0)";
83
+ readonly muted: "oklch(0.7120 0 0)";
84
+ readonly subtle: "oklch(0.5520 0 0)";
85
+ readonly disabled: "oklch(0.4420 0 0)";
81
86
  readonly brand: "oklch(0.866993 0.294055 142.3546)";
82
87
  readonly danger: "oklch(0.68 0.208 25)";
83
88
  readonly success: "oklch(0.866993 0.294055 142.3546)";
@@ -90,17 +95,17 @@ export declare const fg: {
90
95
  readonly "on-info": "oklch(1 0 0)";
91
96
  };
92
97
  export declare const border: {
93
- readonly default: "oklch(0.290 0.0024 250)";
94
- readonly subtle: "oklch(0.259 0.0016 250)";
95
- readonly input: "oklch(0.325 0.0030 250)";
96
- readonly sidebar: "oklch(0.259 0.0016 250)";
98
+ readonly default: "oklch(0.3400 0 0)";
99
+ readonly subtle: "oklch(0.3090 0 0)";
100
+ readonly input: "oklch(0.3750 0 0)";
101
+ readonly sidebar: "oklch(0.3090 0 0)";
97
102
  readonly brand: "oklch(0.8018 0.2721 142.38)";
98
103
  readonly "brand-subtle": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent)";
99
104
  readonly "danger-muted": "color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent)";
100
105
  readonly "success-muted": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent)";
101
106
  readonly "warning-muted": "color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent)";
102
107
  readonly "info-muted": "color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent)";
103
- readonly table: "oklch(0.259 0.0016 250)";
108
+ readonly table: "oklch(0.3090 0 0)";
104
109
  };
105
110
  export declare const ring: {
106
111
  readonly brand: "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent)";
@@ -108,7 +113,7 @@ export declare const ring: {
108
113
  readonly success: "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent)";
109
114
  readonly warning: "color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent)";
110
115
  readonly info: "color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent)";
111
- readonly secondary: "color-mix(in oklch, oklch(0.5517 0.0062 250) 22%, transparent)";
116
+ readonly secondary: "color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent)";
112
117
  };
113
118
  export declare const overlay: {
114
119
  readonly scrim: "oklch(0 0 0 / 0.55)";
@@ -124,11 +129,11 @@ export declare const chart: {
124
129
  };
125
130
  export declare const colorDark: {
126
131
  bg: {
127
- readonly canvas: "oklch(0.1652 0.0010 250)";
128
- readonly surface: "oklch(0.2103 0.0012 250)";
129
- readonly "surface-elevated": "oklch(0.2739 0.0018 250)";
130
- readonly "surface-panels": "oklch(0.1652 0.0010 250)";
131
- readonly sidebar: "oklch(0.2103 0.0012 250)";
132
+ readonly canvas: "oklch(0.2050 0 0)";
133
+ readonly surface: "oklch(0.2603 0 0)";
134
+ readonly "surface-elevated": "oklch(0.2873 0 0)";
135
+ readonly "surface-panels": "oklch(0.2050 0 0)";
136
+ readonly sidebar: "oklch(0.2603 0 0)";
132
137
  readonly subtle: "oklch(1 0 0 / 0.01)";
133
138
  readonly muted: "oklch(1 0 0 / 0.05)";
134
139
  readonly emphasis: "color-mix(in oklch, oklch(1 0 0) 12%, transparent)";
@@ -159,21 +164,21 @@ export declare const colorDark: {
159
164
  readonly "accent-hover": "oklch(1 0 0 / 0.16)";
160
165
  readonly "sidebar-accent": "oklch(1 0 0 / 0.08)";
161
166
  readonly "sidebar-accent-hover": "oklch(1 0 0 / 0.12)";
162
- readonly table: "oklch(0.2103 0.0012 250)";
163
- readonly "table-head": "oklch(0.2739 0.0018 250)";
164
- readonly "table-row-hover": "oklch(0.2739 0.0018 250)";
167
+ readonly table: "oklch(0.2603 0 0)";
168
+ readonly "table-head": "oklch(0.2873 0 0)";
169
+ readonly "table-row-hover": "oklch(0.2873 0 0)";
165
170
  readonly "table-row-selected": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent)";
166
171
  readonly "table-row-selected-hover": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent)";
167
- readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2103 0.0012 250))";
168
- readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2103 0.0012 250))";
172
+ readonly "table-row-selected-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2603 0 0))";
173
+ readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2603 0 0))";
169
174
  readonly dropdown: "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)";
170
175
  };
171
176
  fg: {
172
177
  readonly strong: "oklch(1 0 0)";
173
- readonly default: "oklch(0.9674 0.0007 250)";
174
- readonly muted: "oklch(0.7118 0.0060 250)";
175
- readonly subtle: "oklch(0.5517 0.0062 250)";
176
- readonly disabled: "oklch(0.4419 0.0055 250)";
178
+ readonly default: "oklch(0.9670 0 0)";
179
+ readonly muted: "oklch(0.7120 0 0)";
180
+ readonly subtle: "oklch(0.5520 0 0)";
181
+ readonly disabled: "oklch(0.4420 0 0)";
177
182
  readonly brand: "oklch(0.866993 0.294055 142.3546)";
178
183
  readonly danger: "oklch(0.68 0.208 25)";
179
184
  readonly success: "oklch(0.866993 0.294055 142.3546)";
@@ -186,17 +191,17 @@ export declare const colorDark: {
186
191
  readonly "on-info": "oklch(1 0 0)";
187
192
  };
188
193
  border: {
189
- readonly default: "oklch(0.290 0.0024 250)";
190
- readonly subtle: "oklch(0.259 0.0016 250)";
191
- readonly input: "oklch(0.325 0.0030 250)";
192
- readonly sidebar: "oklch(0.259 0.0016 250)";
194
+ readonly default: "oklch(0.3400 0 0)";
195
+ readonly subtle: "oklch(0.3090 0 0)";
196
+ readonly input: "oklch(0.3750 0 0)";
197
+ readonly sidebar: "oklch(0.3090 0 0)";
193
198
  readonly brand: "oklch(0.8018 0.2721 142.38)";
194
199
  readonly "brand-subtle": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent)";
195
200
  readonly "danger-muted": "color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent)";
196
201
  readonly "success-muted": "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent)";
197
202
  readonly "warning-muted": "color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent)";
198
203
  readonly "info-muted": "color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent)";
199
- readonly table: "oklch(0.259 0.0016 250)";
204
+ readonly table: "oklch(0.3090 0 0)";
200
205
  };
201
206
  ring: {
202
207
  readonly brand: "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent)";
@@ -204,7 +209,7 @@ export declare const colorDark: {
204
209
  readonly success: "color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent)";
205
210
  readonly warning: "color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent)";
206
211
  readonly info: "color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent)";
207
- readonly secondary: "color-mix(in oklch, oklch(0.5517 0.0062 250) 22%, transparent)";
212
+ readonly secondary: "color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent)";
208
213
  };
209
214
  overlay: {
210
215
  readonly scrim: "oklch(0 0 0 / 0.55)";
package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color-dark.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/vibrant/semantic/color-dark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CA6DL,CAAC;AAaX,eAAO,MAAM,MAAM;;;;;;;;;;;;CA6BT,CAAC;AAMX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAKX,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2C,CAAC"}
1
+ {"version":3,"file":"color-dark.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/vibrant/semantic/color-dark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AASH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqFL,CAAC;AAIX,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;CA6DL,CAAC;AAyBX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAiBT,CAAC;AAMX,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC;AAIX,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAKX,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snksergio/design-system",
3
- "version": "0.31.0",
3
+ "version": "0.32.1",
4
4
  "//distribuicao": "Canal PRIMARIO = registry shadcn (copy-in) + CLI @snksergio/create-design-system; sobe sozinho no merge (Vercel). Canal SECUNDARIO = este pacote npm (@snksergio/design-system), funcional (build:lib gera ESM+CJS+types+theme.css) e publicado por passo MANUAL do mantenedor, entao costuma ficar atras do registry. NAO e depreciado — o texto anterior dizia isso e estava errado. Publish so pelo Passo 7 do .claude/skills/ds-dev/release.md (valida com `npm run lib:verify`, pede o token, publica, revoga). Ver DISTRIBUICAO.md.",
5
5
  "description": "iGreen Design System — internal library for SaaS CRM, admin panels and dashboards. React 19 + Tailwind v4 + Shadcn + Radix.",
6
6
  "license": "UNLICENSED",
@@ -12,6 +12,7 @@
12
12
  "dist-lib/index.*",
13
13
  "dist-lib/tokens.*",
14
14
  "dist-lib/theme.css",
15
+ "dist-lib/theme/**",
15
16
  "dist-lib/preview/**",
16
17
  "dist-lib/chunks/**",
17
18
  "dist-lib/src/**",
@@ -29,6 +30,7 @@
29
30
  "url": "https://github.com/igreenlab/igreen-desingsystem-admin/issues"
30
31
  },
31
32
  "homepage": "https://github.com/igreenlab/igreen-desingsystem-admin#readme",
33
+ "//exports-theme-marcas": "Os overlays de marca (./theme/brand-*.css) são enumerados um por um DE PROPÓSITO, não por wildcard: o pack-contract extrai cada path prometido no exports e o lib-verify confere no disco — um './theme/*' prometeria nada e não seria verificado, que é justo o modo de falha da L-017. Marca nova exige entrada aqui, e o build:lib FALHA se achar brand-*.css sem export correspondente (gate no vite.lib.config.ts). Nunca colocar chave de comentário DENTRO de exports: lá toda chave é subpath e o Node/pack-contract tentam resolvê-la.",
32
34
  "exports": {
33
35
  ".": {
34
36
  "types": "./dist-lib/index.d.ts",
@@ -36,6 +38,10 @@
36
38
  "require": "./dist-lib/index.cjs"
37
39
  },
38
40
  "./theme.css": "./dist-lib/theme.css",
41
+ "./theme/brand-blue.css": "./dist-lib/theme/brand-blue.css",
42
+ "./theme/brand-green.css": "./dist-lib/theme/brand-green.css",
43
+ "./theme/brand-pay.css": "./dist-lib/theme/brand-pay.css",
44
+ "./theme/brand-vibrant.css": "./dist-lib/theme/brand-vibrant.css",
39
45
  "./tokens": {
40
46
  "types": "./dist-lib/tokens.d.ts",
41
47
  "import": "./dist-lib/tokens.mjs",