@snksergio/design-system 0.43.3 → 0.45.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.
- package/dist-lib/chunks/app-shell-mocks-kWIVSzLs.mjs.map +1 -1
- package/dist-lib/chunks/app-shell-mocks-oO_IV3Gw.cjs.map +1 -1
- package/dist-lib/chunks/avatar-DFWEwBKu.mjs.map +1 -1
- package/dist-lib/chunks/avatar-eM5txRFZ.cjs.map +1 -1
- package/dist-lib/chunks/chat-v2-mocks-BV9Wha_Z.cjs.map +1 -1
- package/dist-lib/chunks/chat-v2-mocks-DvZRkhmz.mjs.map +1 -1
- package/dist-lib/chunks/page-header--cPS_Z-a.mjs.map +1 -1
- package/dist-lib/chunks/page-header-DvAJoEfb.cjs.map +1 -1
- package/dist-lib/chunks/{panel-CvfP8eP1.cjs → panel-4aMDou7z.cjs} +17 -6
- package/dist-lib/chunks/panel-4aMDou7z.cjs.map +1 -0
- package/dist-lib/chunks/{panel-CCPe1H70.mjs → panel-DtQi10ps.mjs} +17 -6
- package/dist-lib/chunks/panel-DtQi10ps.mjs.map +1 -0
- package/dist-lib/chunks/sheet-D1vQth7X.mjs.map +1 -1
- package/dist-lib/chunks/sheet-j-d_UX7R.cjs.map +1 -1
- package/dist-lib/chunks/{toggle-group-BEPs3e0Y.cjs → toggle-group-BC4eS3Gt.cjs} +85 -26
- package/dist-lib/chunks/toggle-group-BC4eS3Gt.cjs.map +1 -0
- package/dist-lib/chunks/{toggle-group-XMO6ReVo.mjs → toggle-group-CFiAGdm7.mjs} +85 -26
- package/dist-lib/chunks/toggle-group-CFiAGdm7.mjs.map +1 -0
- package/dist-lib/chunks/useTheme-C9Y6vxTf.cjs.map +1 -1
- package/dist-lib/chunks/useTheme-DCmzLBUR.mjs.map +1 -1
- package/dist-lib/index.cjs +162 -94
- package/dist-lib/index.cjs.map +1 -1
- package/dist-lib/index.mjs +165 -97
- package/dist-lib/index.mjs.map +1 -1
- package/dist-lib/preview/chat.cjs.map +1 -1
- package/dist-lib/preview/chat.mjs.map +1 -1
- package/dist-lib/preview/clientes.cjs +1 -1
- package/dist-lib/preview/clientes.mjs +1 -1
- package/dist-lib/shadcn.cjs +1 -1
- package/dist-lib/shadcn.mjs +1 -1
- package/dist-lib/src/components/shadcn/card.d.ts +55 -2
- package/dist-lib/src/components/shadcn/card.d.ts.map +1 -1
- package/dist-lib/src/components/ui/ChoroplethMap/choropleth-map.d.ts.map +1 -1
- package/dist-lib/src/components/ui/ChoroplethMap/choropleth-map.styles.d.ts +24 -6
- package/dist-lib/src/components/ui/ChoroplethMap/choropleth-map.styles.d.ts.map +1 -1
- package/dist-lib/src/components/ui/ChoroplethMap/choropleth-map.types.d.ts +11 -2
- package/dist-lib/src/components/ui/ChoroplethMap/choropleth-map.types.d.ts.map +1 -1
- package/dist-lib/src/components/ui/FormField/form-field-select.d.ts.map +1 -1
- package/dist-lib/src/components/ui/MessageBubble/message-bubble.d.ts.map +1 -1
- package/dist-lib/src/components/ui/MessageBubble/message-bubble.styles.d.ts.map +1 -1
- package/dist-lib/src/components/ui/MessageComposer/message-composer.styles.d.ts +9 -3
- package/dist-lib/src/components/ui/MessageComposer/message-composer.styles.d.ts.map +1 -1
- package/dist-lib/theme/brand-blue.css +110 -110
- package/dist-lib/theme/brand-green.css +110 -110
- package/dist-lib/theme/brand-pay.css +189 -189
- package/dist-lib/theme/brand-vibrant.css +148 -148
- package/dist-lib/theme.css +3 -1
- package/dist-lib/tokens/brands/default/components/spacing.d.ts +41 -2
- package/dist-lib/tokens/brands/default/components/spacing.d.ts.map +1 -1
- package/dist-lib/tokens.cjs.map +1 -1
- package/dist-lib/tokens.mjs.map +1 -1
- package/package.json +4 -2
- package/dist-lib/chunks/panel-CCPe1H70.mjs.map +0 -1
- package/dist-lib/chunks/panel-CvfP8eP1.cjs.map +0 -1
- package/dist-lib/chunks/toggle-group-BEPs3e0Y.cjs.map +0 -1
- package/dist-lib/chunks/toggle-group-XMO6ReVo.mjs.map +0 -1
|
@@ -1,148 +1,148 @@
|
|
|
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 (repo do DS): tokens/brands/vibrant/semantic/*.ts
|
|
5
|
-
* Regenerar (só no repo do DS): npm run tokens:brand:vibrant
|
|
6
|
-
*
|
|
7
|
-
* ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
|
|
8
|
-
* data-theme="vibrant" no <html>. Sem o atributo nada casa — e não dá erro.
|
|
9
|
-
* Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
|
|
10
|
-
* setAttribute/removeAttribute na mão ("default" = remover o atributo).
|
|
11
|
-
*
|
|
12
|
-
* Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
|
|
13
|
-
* token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
|
|
14
|
-
* omite o que já é idêntico à default.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
/* ── Light (65 vars divergem da default) ─────────────────────────── */
|
|
18
|
-
[data-theme="vibrant"]:not(.dark) {
|
|
19
|
-
--color-bg-surface-elevated: oklch(0.9851 0 0);
|
|
20
|
-
--color-bg-sidebar: oklch(0.9516 0.0012 250);
|
|
21
|
-
--color-bg-subtle: oklch(0.9851 0 0);
|
|
22
|
-
--color-bg-muted: oklch(0.9674 0.0007 250);
|
|
23
|
-
--color-bg-emphasis: oklch(0.9197 0.0020 250);
|
|
24
|
-
--color-bg-brand: oklch(0.4645 0.1539 142.59);
|
|
25
|
-
--color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
26
|
-
--color-bg-brand-hover: oklch(0.4138 0.1317 142.94);
|
|
27
|
-
--color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
28
|
-
--color-bg-danger: oklch(0.58 0.235 25);
|
|
29
|
-
--color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 14%, transparent);
|
|
30
|
-
--color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, black);
|
|
31
|
-
--color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
32
|
-
--color-bg-success: oklch(0.4645 0.1539 142.59);
|
|
33
|
-
--color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
34
|
-
--color-bg-success-hover: oklch(0.4138 0.1317 142.94);
|
|
35
|
-
--color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
36
|
-
--color-bg-warning: oklch(0.825 0.170 81);
|
|
37
|
-
--color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 14%, transparent);
|
|
38
|
-
--color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, black);
|
|
39
|
-
--color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
40
|
-
--color-bg-info: oklch(0.55 0.293 300);
|
|
41
|
-
--color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 14%, transparent);
|
|
42
|
-
--color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, black);
|
|
43
|
-
--color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
44
|
-
--color-bg-muted-hover: oklch(0.95 0.0012 250);
|
|
45
|
-
--color-bg-input-hover: oklch(0.9851 0 0);
|
|
46
|
-
--color-bg-accent-hover: oklch(0.84 0.0032 250);
|
|
47
|
-
--color-bg-sidebar-accent-hover: oklch(0.92 0.0020 250);
|
|
48
|
-
--color-bg-table-head: oklch(0.9674 0.0007 250);
|
|
49
|
-
--color-bg-table-row-hover: oklch(0.9851 0 0);
|
|
50
|
-
--color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 6%, transparent);
|
|
51
|
-
--color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
52
|
-
--color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 6%, oklch(1 0 0));
|
|
53
|
-
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(1 0 0));
|
|
54
|
-
--color-fg-strong: oklch(0.1652 0.0010 250);
|
|
55
|
-
--color-fg-default: oklch(0.1652 0.0010 250);
|
|
56
|
-
--color-fg-muted: oklch(0.5517 0.0062 250);
|
|
57
|
-
--color-fg-subtle: oklch(0.7118 0.0060 250);
|
|
58
|
-
--color-fg-disabled: oklch(0.7118 0.0060 250);
|
|
59
|
-
--color-fg-brand: oklch(0.4645 0.1539 142.59);
|
|
60
|
-
--color-fg-danger: oklch(0.58 0.235 25);
|
|
61
|
-
--color-fg-success: oklch(0.4645 0.1539 142.59);
|
|
62
|
-
--color-fg-warning: oklch(0.825 0.170 81);
|
|
63
|
-
--color-fg-info: oklch(0.55 0.293 300);
|
|
64
|
-
--color-border-default: oklch(0.906 0.0024 250);
|
|
65
|
-
--color-border-subtle: oklch(0.9325 0.0016 250);
|
|
66
|
-
--color-border-input: oklch(0.7118 0.0060 250);
|
|
67
|
-
--color-border-sidebar: oklch(0.906 0.0024 250);
|
|
68
|
-
--color-border-brand: oklch(0.4645 0.1539 142.59);
|
|
69
|
-
--color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
70
|
-
--color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
|
|
71
|
-
--color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
72
|
-
--color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
|
|
73
|
-
--color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
|
|
74
|
-
--color-border-table: oklch(0.9325 0.0016 250);
|
|
75
|
-
--color-ring-brand: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
|
|
76
|
-
--color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
77
|
-
--color-ring-success: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
|
|
78
|
-
--color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
79
|
-
--color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
80
|
-
--color-ring-secondary: color-mix(in oklch, oklch(0.5517 0.0062 250) 22%, transparent);
|
|
81
|
-
--color-overlay-float: oklch(0.5517 0.0062 250 / 0.12);
|
|
82
|
-
--color-chart-1: oklch(0.6783 0.2304 142.42);
|
|
83
|
-
--color-chart-grid: oklch(0.9197 0.0020 250);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/* ── Dark (60 vars — .dark[data-theme] vence o .dark base) ────────── */
|
|
87
|
-
.dark[data-theme="vibrant"] {
|
|
88
|
-
--color-bg-canvas: oklch(0.2050 0 0);
|
|
89
|
-
--color-bg-surface: oklch(0.2603 0 0);
|
|
90
|
-
--color-bg-surface-elevated: oklch(0.2873 0 0);
|
|
91
|
-
--color-bg-surface-panels: oklch(0.2050 0 0);
|
|
92
|
-
--color-bg-sidebar: oklch(0.2603 0 0);
|
|
93
|
-
--color-bg-muted: oklch(1 0 0 / 0.05);
|
|
94
|
-
--color-bg-brand: oklch(0.866993 0.294055 142.3546);
|
|
95
|
-
--color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
96
|
-
--color-bg-brand-hover: oklch(0.8018 0.2721 142.38);
|
|
97
|
-
--color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
|
|
98
|
-
--color-bg-danger: oklch(0.58 0.235 25);
|
|
99
|
-
--color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 10%, transparent);
|
|
100
|
-
--color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, white);
|
|
101
|
-
--color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 16%, transparent);
|
|
102
|
-
--color-bg-success: oklch(0.866993 0.294055 142.3546);
|
|
103
|
-
--color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
104
|
-
--color-bg-success-hover: oklch(0.8018 0.2721 142.38);
|
|
105
|
-
--color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
|
|
106
|
-
--color-bg-warning: oklch(0.825 0.170 81);
|
|
107
|
-
--color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 10%, transparent);
|
|
108
|
-
--color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, white);
|
|
109
|
-
--color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 16%, transparent);
|
|
110
|
-
--color-bg-info: oklch(0.55 0.293 300);
|
|
111
|
-
--color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 10%, transparent);
|
|
112
|
-
--color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, white);
|
|
113
|
-
--color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 16%, transparent);
|
|
114
|
-
--color-bg-table: oklch(0.2603 0 0);
|
|
115
|
-
--color-bg-table-head: oklch(0.2873 0 0);
|
|
116
|
-
--color-bg-table-row-hover: oklch(0.2873 0 0);
|
|
117
|
-
--color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
118
|
-
--color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
119
|
-
--color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2603 0 0));
|
|
120
|
-
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2603 0 0));
|
|
121
|
-
--color-fg-default: oklch(0.9670 0 0);
|
|
122
|
-
--color-fg-muted: oklch(0.7120 0 0);
|
|
123
|
-
--color-fg-subtle: oklch(0.5520 0 0);
|
|
124
|
-
--color-fg-disabled: oklch(0.4420 0 0);
|
|
125
|
-
--color-fg-brand: oklch(0.866993 0.294055 142.3546);
|
|
126
|
-
--color-fg-danger: oklch(0.68 0.208 25);
|
|
127
|
-
--color-fg-success: oklch(0.866993 0.294055 142.3546);
|
|
128
|
-
--color-fg-warning: oklch(0.825 0.170 81);
|
|
129
|
-
--color-fg-info: oklch(0.72 0.172 300);
|
|
130
|
-
--color-border-default: oklch(0.3400 0 0);
|
|
131
|
-
--color-border-subtle: oklch(0.3090 0 0);
|
|
132
|
-
--color-border-input: oklch(0.3750 0 0);
|
|
133
|
-
--color-border-sidebar: oklch(0.3090 0 0);
|
|
134
|
-
--color-border-brand: oklch(0.8018 0.2721 142.38);
|
|
135
|
-
--color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
136
|
-
--color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
|
|
137
|
-
--color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
138
|
-
--color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
|
|
139
|
-
--color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
|
|
140
|
-
--color-border-table: oklch(0.3090 0 0);
|
|
141
|
-
--color-ring-brand: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
142
|
-
--color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
143
|
-
--color-ring-success: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
144
|
-
--color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
145
|
-
--color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
146
|
-
--color-ring-secondary: color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent);
|
|
147
|
-
--color-chart-1: oklch(0.866993 0.294055 142.3546);
|
|
148
|
-
}
|
|
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 (repo do DS): tokens/brands/vibrant/semantic/*.ts
|
|
5
|
+
* Regenerar (só no repo do DS): npm run tokens:brand:vibrant
|
|
6
|
+
*
|
|
7
|
+
* ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
|
|
8
|
+
* data-theme="vibrant" no <html>. Sem o atributo nada casa — e não dá erro.
|
|
9
|
+
* Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
|
|
10
|
+
* setAttribute/removeAttribute na mão ("default" = remover o atributo).
|
|
11
|
+
*
|
|
12
|
+
* Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
|
|
13
|
+
* token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
|
|
14
|
+
* omite o que já é idêntico à default.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/* ── Light (65 vars divergem da default) ─────────────────────────── */
|
|
18
|
+
[data-theme="vibrant"]:not(.dark) {
|
|
19
|
+
--color-bg-surface-elevated: oklch(0.9851 0 0);
|
|
20
|
+
--color-bg-sidebar: oklch(0.9516 0.0012 250);
|
|
21
|
+
--color-bg-subtle: oklch(0.9851 0 0);
|
|
22
|
+
--color-bg-muted: oklch(0.9674 0.0007 250);
|
|
23
|
+
--color-bg-emphasis: oklch(0.9197 0.0020 250);
|
|
24
|
+
--color-bg-brand: oklch(0.4645 0.1539 142.59);
|
|
25
|
+
--color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
26
|
+
--color-bg-brand-hover: oklch(0.4138 0.1317 142.94);
|
|
27
|
+
--color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
28
|
+
--color-bg-danger: oklch(0.58 0.235 25);
|
|
29
|
+
--color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 14%, transparent);
|
|
30
|
+
--color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, black);
|
|
31
|
+
--color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
32
|
+
--color-bg-success: oklch(0.4645 0.1539 142.59);
|
|
33
|
+
--color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
34
|
+
--color-bg-success-hover: oklch(0.4138 0.1317 142.94);
|
|
35
|
+
--color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
36
|
+
--color-bg-warning: oklch(0.825 0.170 81);
|
|
37
|
+
--color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 14%, transparent);
|
|
38
|
+
--color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, black);
|
|
39
|
+
--color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
40
|
+
--color-bg-info: oklch(0.55 0.293 300);
|
|
41
|
+
--color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 14%, transparent);
|
|
42
|
+
--color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, black);
|
|
43
|
+
--color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
44
|
+
--color-bg-muted-hover: oklch(0.95 0.0012 250);
|
|
45
|
+
--color-bg-input-hover: oklch(0.9851 0 0);
|
|
46
|
+
--color-bg-accent-hover: oklch(0.84 0.0032 250);
|
|
47
|
+
--color-bg-sidebar-accent-hover: oklch(0.92 0.0020 250);
|
|
48
|
+
--color-bg-table-head: oklch(0.9674 0.0007 250);
|
|
49
|
+
--color-bg-table-row-hover: oklch(0.9851 0 0);
|
|
50
|
+
--color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 6%, transparent);
|
|
51
|
+
--color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
52
|
+
--color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 6%, oklch(1 0 0));
|
|
53
|
+
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(1 0 0));
|
|
54
|
+
--color-fg-strong: oklch(0.1652 0.0010 250);
|
|
55
|
+
--color-fg-default: oklch(0.1652 0.0010 250);
|
|
56
|
+
--color-fg-muted: oklch(0.5517 0.0062 250);
|
|
57
|
+
--color-fg-subtle: oklch(0.7118 0.0060 250);
|
|
58
|
+
--color-fg-disabled: oklch(0.7118 0.0060 250);
|
|
59
|
+
--color-fg-brand: oklch(0.4645 0.1539 142.59);
|
|
60
|
+
--color-fg-danger: oklch(0.58 0.235 25);
|
|
61
|
+
--color-fg-success: oklch(0.4645 0.1539 142.59);
|
|
62
|
+
--color-fg-warning: oklch(0.825 0.170 81);
|
|
63
|
+
--color-fg-info: oklch(0.55 0.293 300);
|
|
64
|
+
--color-border-default: oklch(0.906 0.0024 250);
|
|
65
|
+
--color-border-subtle: oklch(0.9325 0.0016 250);
|
|
66
|
+
--color-border-input: oklch(0.7118 0.0060 250);
|
|
67
|
+
--color-border-sidebar: oklch(0.906 0.0024 250);
|
|
68
|
+
--color-border-brand: oklch(0.4645 0.1539 142.59);
|
|
69
|
+
--color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
70
|
+
--color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
|
|
71
|
+
--color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
72
|
+
--color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
|
|
73
|
+
--color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
|
|
74
|
+
--color-border-table: oklch(0.9325 0.0016 250);
|
|
75
|
+
--color-ring-brand: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
|
|
76
|
+
--color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
77
|
+
--color-ring-success: color-mix(in oklch, oklch(0.8018 0.2721 142.38) 22%, transparent);
|
|
78
|
+
--color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
79
|
+
--color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
80
|
+
--color-ring-secondary: color-mix(in oklch, oklch(0.5517 0.0062 250) 22%, transparent);
|
|
81
|
+
--color-overlay-float: oklch(0.5517 0.0062 250 / 0.12);
|
|
82
|
+
--color-chart-1: oklch(0.6783 0.2304 142.42);
|
|
83
|
+
--color-chart-grid: oklch(0.9197 0.0020 250);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ── Dark (60 vars — .dark[data-theme] vence o .dark base) ────────── */
|
|
87
|
+
.dark[data-theme="vibrant"] {
|
|
88
|
+
--color-bg-canvas: oklch(0.2050 0 0);
|
|
89
|
+
--color-bg-surface: oklch(0.2603 0 0);
|
|
90
|
+
--color-bg-surface-elevated: oklch(0.2873 0 0);
|
|
91
|
+
--color-bg-surface-panels: oklch(0.2050 0 0);
|
|
92
|
+
--color-bg-sidebar: oklch(0.2603 0 0);
|
|
93
|
+
--color-bg-muted: oklch(1 0 0 / 0.05);
|
|
94
|
+
--color-bg-brand: oklch(0.866993 0.294055 142.3546);
|
|
95
|
+
--color-bg-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
96
|
+
--color-bg-brand-hover: oklch(0.8018 0.2721 142.38);
|
|
97
|
+
--color-bg-brand-subtle-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
|
|
98
|
+
--color-bg-danger: oklch(0.58 0.235 25);
|
|
99
|
+
--color-bg-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 10%, transparent);
|
|
100
|
+
--color-bg-danger-hover: color-mix(in oklch, oklch(0.58 0.235 25) 90%, white);
|
|
101
|
+
--color-bg-danger-muted-hover: color-mix(in oklch, oklch(0.58 0.235 25) 16%, transparent);
|
|
102
|
+
--color-bg-success: oklch(0.866993 0.294055 142.3546);
|
|
103
|
+
--color-bg-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
104
|
+
--color-bg-success-hover: oklch(0.8018 0.2721 142.38);
|
|
105
|
+
--color-bg-success-muted-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 16%, transparent);
|
|
106
|
+
--color-bg-warning: oklch(0.825 0.170 81);
|
|
107
|
+
--color-bg-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 10%, transparent);
|
|
108
|
+
--color-bg-warning-hover: color-mix(in oklch, oklch(0.825 0.170 81) 90%, white);
|
|
109
|
+
--color-bg-warning-muted-hover: color-mix(in oklch, oklch(0.825 0.170 81) 16%, transparent);
|
|
110
|
+
--color-bg-info: oklch(0.55 0.293 300);
|
|
111
|
+
--color-bg-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 10%, transparent);
|
|
112
|
+
--color-bg-info-hover: color-mix(in oklch, oklch(0.55 0.293 300) 90%, white);
|
|
113
|
+
--color-bg-info-muted-hover: color-mix(in oklch, oklch(0.55 0.293 300) 16%, transparent);
|
|
114
|
+
--color-bg-table: oklch(0.2603 0 0);
|
|
115
|
+
--color-bg-table-head: oklch(0.2873 0 0);
|
|
116
|
+
--color-bg-table-row-hover: oklch(0.2873 0 0);
|
|
117
|
+
--color-bg-table-row-selected: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 10%, transparent);
|
|
118
|
+
--color-bg-table-row-selected-hover: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 14%, transparent);
|
|
119
|
+
--color-bg-table-row-selected-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 10%, oklch(0.2603 0 0));
|
|
120
|
+
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2603 0 0));
|
|
121
|
+
--color-fg-default: oklch(0.9670 0 0);
|
|
122
|
+
--color-fg-muted: oklch(0.7120 0 0);
|
|
123
|
+
--color-fg-subtle: oklch(0.5520 0 0);
|
|
124
|
+
--color-fg-disabled: oklch(0.4420 0 0);
|
|
125
|
+
--color-fg-brand: oklch(0.866993 0.294055 142.3546);
|
|
126
|
+
--color-fg-danger: oklch(0.68 0.208 25);
|
|
127
|
+
--color-fg-success: oklch(0.866993 0.294055 142.3546);
|
|
128
|
+
--color-fg-warning: oklch(0.825 0.170 81);
|
|
129
|
+
--color-fg-info: oklch(0.72 0.172 300);
|
|
130
|
+
--color-border-default: oklch(0.3400 0 0);
|
|
131
|
+
--color-border-subtle: oklch(0.3090 0 0);
|
|
132
|
+
--color-border-input: oklch(0.3750 0 0);
|
|
133
|
+
--color-border-sidebar: oklch(0.3090 0 0);
|
|
134
|
+
--color-border-brand: oklch(0.8018 0.2721 142.38);
|
|
135
|
+
--color-border-brand-subtle: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
136
|
+
--color-border-danger-muted: color-mix(in oklch, oklch(0.58 0.235 25) 36%, transparent);
|
|
137
|
+
--color-border-success-muted: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 36%, transparent);
|
|
138
|
+
--color-border-warning-muted: color-mix(in oklch, oklch(0.825 0.170 81) 36%, transparent);
|
|
139
|
+
--color-border-info-muted: color-mix(in oklch, oklch(0.55 0.293 300) 36%, transparent);
|
|
140
|
+
--color-border-table: oklch(0.3090 0 0);
|
|
141
|
+
--color-ring-brand: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
142
|
+
--color-ring-danger: color-mix(in oklch, oklch(0.58 0.235 25) 22%, transparent);
|
|
143
|
+
--color-ring-success: color-mix(in oklch, oklch(0.866993 0.294055 142.3546) 22%, transparent);
|
|
144
|
+
--color-ring-warning: color-mix(in oklch, oklch(0.825 0.170 81) 22%, transparent);
|
|
145
|
+
--color-ring-info: color-mix(in oklch, oklch(0.55 0.293 300) 22%, transparent);
|
|
146
|
+
--color-ring-secondary: color-mix(in oklch, oklch(0.5520 0 0) 22%, transparent);
|
|
147
|
+
--color-chart-1: oklch(0.866993 0.294055 142.3546);
|
|
148
|
+
}
|
package/dist-lib/theme.css
CHANGED
|
@@ -237,8 +237,10 @@ body {
|
|
|
237
237
|
--container-modal-sm: 480px;
|
|
238
238
|
--container-modal-md: 640px;
|
|
239
239
|
--container-modal-lg: 800px;
|
|
240
|
-
--spacing-pad-card-base: 24px;
|
|
241
240
|
--spacing-pad-card-sm: 16px;
|
|
241
|
+
--spacing-pad-card-md: 20px;
|
|
242
|
+
--spacing-pad-card-lg: 24px;
|
|
243
|
+
--spacing-pad-card-base: 20px;
|
|
242
244
|
--spacing-pad-page-base: 24px;
|
|
243
245
|
--spacing-pad-page-sm: 16px;
|
|
244
246
|
--spacing-pad-page-lg: 40px;
|
|
@@ -4,9 +4,45 @@
|
|
|
4
4
|
* Paddings recorrentes que múltiplos componentes compartilham.
|
|
5
5
|
* Componente usa: p-pad-card, px-pad-page, etc.
|
|
6
6
|
*/
|
|
7
|
+
/**
|
|
8
|
+
* ─── Pad Card (padding interno de cards) ────────────────────────────────────
|
|
9
|
+
*
|
|
10
|
+
* A escala de densidade do `Card`, consumida pela prop `size`:
|
|
11
|
+
*
|
|
12
|
+
* size="sm" → pad-card-sm 16px
|
|
13
|
+
* size="md" → pad-card-md 20px ← DEFAULT do componente
|
|
14
|
+
* size="lg" → pad-card-lg 24px
|
|
15
|
+
*
|
|
16
|
+
* ## `base` = `md` = 20px — e por que não foi removido nem virou 24
|
|
17
|
+
*
|
|
18
|
+
* Até 2026-08-19 a família era só `{ base: 24, sm: 16 }`, e `base` era o padding de
|
|
19
|
+
* card do DS. Ao ganhar a escala de 3, `base` virou um nome ruim: ele deveria
|
|
20
|
+
* significar "o default", e o default passou a ser 20.
|
|
21
|
+
*
|
|
22
|
+
* Três saídas foram medidas, e a escolha do mantenedor foi a terceira:
|
|
23
|
+
*
|
|
24
|
+
* (a) deixar `base` = 24 e mapear `size="lg"` → `base` → nome assimétrico pra sempre
|
|
25
|
+
* (b) remover `base` e migrar tudo pra `lg` → **quebra consumidor**: 2 usos
|
|
26
|
+
* vivem no embed do registry, ou seja, quem rodou `igreen:add hover-card` tem
|
|
27
|
+
* `p-pad-card-base` no código DELE. Remover faz a classe parar de emitir CSS —
|
|
28
|
+
* falha silenciosa, sem erro de build nem de `tsc` (L-019)
|
|
29
|
+
* (c) **`base` = `md` = 20px** → a classe continua existindo (nada quebra), e quem já
|
|
30
|
+
* consumia `base` recebe o novo default. Só muda pixel, nunca quebra.
|
|
31
|
+
*
|
|
32
|
+
* Alcance medido de `pad-card-base` antes da decisão: 20 em `src/`, 5 em
|
|
33
|
+
* `cli/templates/`, 4 em `.claude/`, 5 em `.ai/`, **2 no embed do registry**.
|
|
34
|
+
*
|
|
35
|
+
* ⚠️ Consequência aceita: tudo que usava `base` foi de 24 → **20px**. Novo código usa
|
|
36
|
+
* `sm`/`md`/`lg`; `base` fica como compatibilidade e não deve ser usado em código novo.
|
|
37
|
+
*
|
|
38
|
+
* `sm` é 16 e não 18 porque a escala não tem 18 (vai 16 → 20 → 24).
|
|
39
|
+
*/
|
|
7
40
|
export declare const padCard: {
|
|
8
|
-
readonly base: string;
|
|
9
41
|
readonly sm: string;
|
|
42
|
+
readonly md: string;
|
|
43
|
+
readonly lg: string;
|
|
44
|
+
/** @deprecated Alias de `md` (20px). Existe só pra não quebrar quem já consome. */
|
|
45
|
+
readonly base: string;
|
|
10
46
|
};
|
|
11
47
|
export declare const padPage: {
|
|
12
48
|
readonly base: string;
|
|
@@ -36,8 +72,11 @@ export declare const padPage: {
|
|
|
36
72
|
export declare const formGap: string;
|
|
37
73
|
export declare const componentSpacing: {
|
|
38
74
|
readonly padCard: {
|
|
39
|
-
readonly base: string;
|
|
40
75
|
readonly sm: string;
|
|
76
|
+
readonly md: string;
|
|
77
|
+
readonly lg: string;
|
|
78
|
+
/** @deprecated Alias de `md` (20px). Existe só pra não quebrar quem já consome. */
|
|
79
|
+
readonly base: string;
|
|
41
80
|
};
|
|
42
81
|
readonly padPage: {
|
|
43
82
|
readonly base: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/components/spacing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;
|
|
1
|
+
{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/components/spacing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,OAAO;;;;IAIlB,mFAAmF;;CAE3E,CAAC;AAGX,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,QAAW,CAAC;AAEhC,eAAO,MAAM,gBAAgB;;;;;QAjC3B,mFAAmF;;;;;;;;;CAiCf,CAAC;AACvE,MAAM,MAAM,qBAAqB,GAAG,OAAO,gBAAgB,CAAC"}
|