@snksergio/design-system 0.31.0 → 0.31.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.
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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.1652 0.0010 250);
|
|
86
|
+
--color-bg-surface: oklch(0.2103 0.0012 250);
|
|
87
|
+
--color-bg-surface-elevated: oklch(0.2739 0.0018 250);
|
|
88
|
+
--color-bg-surface-panels: oklch(0.1652 0.0010 250);
|
|
89
|
+
--color-bg-sidebar: oklch(0.2103 0.0012 250);
|
|
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.2103 0.0012 250);
|
|
112
|
+
--color-bg-table-head: oklch(0.2739 0.0018 250);
|
|
113
|
+
--color-bg-table-row-hover: oklch(0.2739 0.0018 250);
|
|
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.2103 0.0012 250));
|
|
117
|
+
--color-bg-table-row-selected-hover-solid: color-mix(in srgb, oklch(0.866993 0.294055 142.3546) 14%, oklch(0.2103 0.0012 250));
|
|
118
|
+
--color-fg-default: oklch(0.9674 0.0007 250);
|
|
119
|
+
--color-fg-muted: oklch(0.7118 0.0060 250);
|
|
120
|
+
--color-fg-subtle: oklch(0.5517 0.0062 250);
|
|
121
|
+
--color-fg-disabled: oklch(0.4419 0.0055 250);
|
|
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.290 0.0024 250);
|
|
128
|
+
--color-border-subtle: oklch(0.259 0.0016 250);
|
|
129
|
+
--color-border-input: oklch(0.325 0.0030 250);
|
|
130
|
+
--color-border-sidebar: oklch(0.259 0.0016 250);
|
|
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.259 0.0016 250);
|
|
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.5517 0.0062 250) 22%, transparent);
|
|
144
|
+
--color-chart-1: oklch(0.866993 0.294055 142.3546);
|
|
145
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@snksergio/design-system",
|
|
3
|
-
"version": "0.31.
|
|
3
|
+
"version": "0.31.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",
|