@snksergio/design-system 0.31.1 → 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.
- package/README.md +32 -0
- package/dist-lib/theme/brand-vibrant.css +20 -20
- package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts +26 -0
- package/dist-lib/tokens/brands/vibrant/primitives/color-palette.d.ts.map +1 -1
- package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts +50 -45
- package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts.map +1 -1
- package/package.json +1 -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)
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
|
|
83
83
|
/* ── Dark (60 vars — .dark[data-theme] vence o .dark base) ────────── */
|
|
84
84
|
.dark[data-theme="vibrant"] {
|
|
85
|
-
--color-bg-canvas: oklch(0.
|
|
86
|
-
--color-bg-surface: oklch(0.
|
|
87
|
-
--color-bg-surface-elevated: oklch(0.
|
|
88
|
-
--color-bg-surface-panels: oklch(0.
|
|
89
|
-
--color-bg-sidebar: oklch(0.
|
|
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
90
|
--color-bg-muted: oklch(1 0 0 / 0.05);
|
|
91
91
|
--color-bg-brand: oklch(0.866993 0.294055 142.3546);
|
|
92
92
|
--color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
@@ -108,38 +108,38 @@
|
|
|
108
108
|
--color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 10%, transparent);
|
|
109
109
|
--color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, white);
|
|
110
110
|
--color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 16%, transparent);
|
|
111
|
-
--color-bg-table: oklch(0.
|
|
112
|
-
--color-bg-table-head: oklch(0.
|
|
113
|
-
--color-bg-table-row-hover: oklch(0.
|
|
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
114
|
--color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
115
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.
|
|
117
|
-
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.
|
|
118
|
-
--color-fg-default: oklch(0.
|
|
119
|
-
--color-fg-muted: oklch(0.
|
|
120
|
-
--color-fg-subtle: oklch(0.
|
|
121
|
-
--color-fg-disabled: oklch(0.
|
|
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
122
|
--color-fg-brand: oklch(0.866993 0.294055 142.3546);
|
|
123
123
|
--color-fg-danger: oklch(0.68 0.208 25);
|
|
124
124
|
--color-fg-success: oklch(0.866993 0.294055 142.3546);
|
|
125
125
|
--color-fg-warning: oklch(0.825 0.170 81);
|
|
126
126
|
--color-fg-info: oklch(0.72 0.172 300);
|
|
127
|
-
--color-border-default: oklch(0.
|
|
128
|
-
--color-border-subtle: oklch(0.
|
|
129
|
-
--color-border-input: oklch(0.
|
|
130
|
-
--color-border-sidebar: oklch(0.
|
|
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
131
|
--color-border-brand: oklch(0.8018 0.2721 142.38);
|
|
132
132
|
--color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
133
133
|
--color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
|
|
134
134
|
--color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
135
135
|
--color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
|
|
136
136
|
--color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
|
|
137
|
-
--color-border-table: oklch(0.
|
|
137
|
+
--color-border-table: oklch(0.3090 0 0);
|
|
138
138
|
--color-ring-brand: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
139
139
|
--color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
140
140
|
--color-ring-success: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
141
141
|
--color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
142
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.
|
|
143
|
+
--color-ring-secondary: color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent);
|
|
144
144
|
--color-chart-1: oklch(0.866993 0.294055 142.3546);
|
|
145
145
|
}
|
|
@@ -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)";
|
|
@@ -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;
|
|
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"}
|
|
@@ -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
|
|
7
|
+
* Escopo: brand + STATUS re-medidos + neutra ACROMÁTICA própria do dark.
|
|
8
8
|
*
|
|
9
|
-
* ⚠️
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
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.
|
|
32
|
-
readonly surface: "oklch(0.
|
|
33
|
-
readonly "surface-elevated": "oklch(0.
|
|
34
|
-
readonly "surface-panels": "oklch(0.
|
|
35
|
-
readonly sidebar: "oklch(0.
|
|
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.
|
|
67
|
-
readonly "table-head": "oklch(0.
|
|
68
|
-
readonly "table-row-hover": "oklch(0.
|
|
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.
|
|
72
|
-
readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.
|
|
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.
|
|
78
|
-
readonly muted: "oklch(0.
|
|
79
|
-
readonly subtle: "oklch(0.
|
|
80
|
-
readonly disabled: "oklch(0.
|
|
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.
|
|
94
|
-
readonly subtle: "oklch(0.
|
|
95
|
-
readonly input: "oklch(0.
|
|
96
|
-
readonly sidebar: "oklch(0.
|
|
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.
|
|
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.
|
|
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.
|
|
128
|
-
readonly surface: "oklch(0.
|
|
129
|
-
readonly "surface-elevated": "oklch(0.
|
|
130
|
-
readonly "surface-panels": "oklch(0.
|
|
131
|
-
readonly sidebar: "oklch(0.
|
|
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.
|
|
163
|
-
readonly "table-head": "oklch(0.
|
|
164
|
-
readonly "table-row-hover": "oklch(0.
|
|
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.
|
|
168
|
-
readonly "table-row-selected-hover-solid": "color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.
|
|
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.
|
|
174
|
-
readonly muted: "oklch(0.
|
|
175
|
-
readonly subtle: "oklch(0.
|
|
176
|
-
readonly disabled: "oklch(0.
|
|
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.
|
|
190
|
-
readonly subtle: "oklch(0.
|
|
191
|
-
readonly input: "oklch(0.
|
|
192
|
-
readonly sidebar: "oklch(0.
|
|
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.
|
|
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.
|
|
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)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-dark.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/vibrant/semantic/color-dark.ts"],"names":[],"mappings":"AAAA
|
|
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.
|
|
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",
|