@jcdecor/vue 0.1.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/README.md +68 -0
- package/dist/brand/Brand.d.ts +83 -0
- package/dist/brand/index.d.ts +2 -0
- package/dist/brand/paths.d.ts +43 -0
- package/dist/brand-CeSffe5P.js +320 -0
- package/dist/brand-CeSffe5P.js.map +1 -0
- package/dist/brand.d.ts +1 -0
- package/dist/brand.js +2 -0
- package/dist/charts/ChartCard.d.ts +32 -0
- package/dist/charts/charts.d.ts +124 -0
- package/dist/charts/echartsTheme.d.ts +19 -0
- package/dist/charts/index.d.ts +8 -0
- package/dist/charts/palette.d.ts +59 -0
- package/dist/charts.d.ts +1 -0
- package/dist/charts.js +473 -0
- package/dist/charts.js.map +1 -0
- package/dist/chat/ChatComposer.d.ts +34 -0
- package/dist/chat/ChatLayout.d.ts +53 -0
- package/dist/chat/ChatMessage.d.ts +26 -0
- package/dist/chat/ChatThread.d.ts +36 -0
- package/dist/chat/ConversationList.d.ts +22 -0
- package/dist/chat/TypingIndicator.d.ts +8 -0
- package/dist/chat/index.d.ts +9 -0
- package/dist/chat/node.d.ts +12 -0
- package/dist/chat/types.d.ts +38 -0
- package/dist/chat/utils.d.ts +25 -0
- package/dist/chat.d.ts +1 -0
- package/dist/chat.js +661 -0
- package/dist/chat.js.map +1 -0
- package/dist/colors-DUSEhAuo.js +32 -0
- package/dist/colors-DUSEhAuo.js.map +1 -0
- package/dist/components/ContentCard/ContentCard.d.ts +8 -0
- package/dist/components/ContentCard/ContentCard.types.d.ts +34 -0
- package/dist/components/ContentCard/ContentCard.vue.d.ts +35 -0
- package/dist/components/ContentCard/index.d.ts +1 -0
- package/dist/components/CouponCode/CouponCode.d.ts +20 -0
- package/dist/components/CouponCode/index.d.ts +1 -0
- package/dist/components/DataTable/DataTable.d.ts +95 -0
- package/dist/components/DataTable/index.d.ts +1 -0
- package/dist/components/KpiCard/KpiCard.d.ts +12 -0
- package/dist/components/KpiCard/KpiCard.types.d.ts +44 -0
- package/dist/components/KpiCard/KpiCard.vars.d.ts +3 -0
- package/dist/components/KpiCard/KpiCard.vue.d.ts +42 -0
- package/dist/components/KpiCard/KpiGroup.d.ts +10 -0
- package/dist/components/KpiCard/index.d.ts +1 -0
- package/dist/components/PageHeader/PageHeader.d.ts +29 -0
- package/dist/components/PageHeader/index.d.ts +1 -0
- package/dist/components/PriceTag/PriceTag.d.ts +21 -0
- package/dist/components/PriceTag/index.d.ts +1 -0
- package/dist/components/ProductCard/ProductCard.d.ts +12 -0
- package/dist/components/ProductCard/ProductCard.types.d.ts +53 -0
- package/dist/components/ProductCard/ProductCard.vue.d.ts +45 -0
- package/dist/components/ProductCard/index.d.ts +1 -0
- package/dist/components/PromoBanner/PromoBanner.d.ts +12 -0
- package/dist/components/PromoBanner/PromoBanner.types.d.ts +50 -0
- package/dist/components/PromoBanner/PromoBanner.vars.d.ts +2 -0
- package/dist/components/PromoBanner/PromoBanner.vue.d.ts +41 -0
- package/dist/components/PromoBanner/index.d.ts +1 -0
- package/dist/components/Tag/Tag.d.ts +18 -0
- package/dist/components/Tag/index.d.ts +1 -0
- package/dist/components/ThemeToggle/ThemeToggle.d.ts +10 -0
- package/dist/components/ThemeToggle/index.d.ts +1 -0
- package/dist/components/TokenSwatch/TokenSwatch.d.ts +21 -0
- package/dist/components/TokenSwatch/index.d.ts +1 -0
- package/dist/components/TopNav/TopNav.d.ts +9 -0
- package/dist/components/TopNav/TopNav.types.d.ts +50 -0
- package/dist/components/TopNav/TopNav.vue.d.ts +33 -0
- package/dist/components/TopNav/index.d.ts +1 -0
- package/dist/components/Typography/Typography.d.ts +41 -0
- package/dist/components/Typography/index.d.ts +1 -0
- package/dist/components/index.d.ts +13 -0
- package/dist/format-D40SMATK.js +108 -0
- package/dist/format-D40SMATK.js.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +2239 -0
- package/dist/index.js.map +1 -0
- package/dist/provider/JcProvider.d.ts +285 -0
- package/dist/styles.css +2 -0
- package/dist/theme/colors.d.ts +26 -0
- package/dist/theme/components/buttons.d.ts +2 -0
- package/dist/theme/components/combobox.d.ts +2 -0
- package/dist/theme/components/dataDisplay.d.ts +2 -0
- package/dist/theme/components/feedback.d.ts +2 -0
- package/dist/theme/components/index.d.ts +3 -0
- package/dist/theme/components/inputs.d.ts +2 -0
- package/dist/theme/components/layout.d.ts +2 -0
- package/dist/theme/components/misc.d.ts +2 -0
- package/dist/theme/components/navigation.d.ts +2 -0
- package/dist/theme/components/overlays.d.ts +2 -0
- package/dist/theme/components/types.d.ts +11 -0
- package/dist/theme/components/typography.d.ts +2 -0
- package/dist/theme/controls.d.ts +44 -0
- package/dist/theme/cssVariablesResolver.d.ts +2 -0
- package/dist/theme/theme.d.ts +3 -0
- package/dist/theme/themeDefaults.d.ts +18 -0
- package/dist/theme/tokens.d.ts +457 -0
- package/dist/theme/variantColorResolver.d.ts +9 -0
- package/dist/themeDefaults-Ckd05FUY.js +29 -0
- package/dist/themeDefaults-Ckd05FUY.js.map +1 -0
- package/dist/tokens-CDSk_JkY.js +315 -0
- package/dist/tokens-CDSk_JkY.js.map +1 -0
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +3 -0
- package/dist/utils/format.d.ts +14 -0
- package/dist/utils/styles-api.d.ts +15 -0
- package/dist/utils/vue.d.ts +27 -0
- package/package.json +109 -0
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tokens do Design System JC Decor — fonte da verdade do tema.
|
|
3
|
+
*
|
|
4
|
+
* v0.2 (out/2026): paleta e tipografia recalibradas a partir do site
|
|
5
|
+
* jcdecor.com.br (azul #2663EB, Poppins em tamanhos fixos) com:
|
|
6
|
+
* - rampas perceptuais em OKLCH (50 → 900, 600 = tom "cheio" de cada cor)
|
|
7
|
+
* - neutros frios tingidos no matiz do azul (substituem o LightGray bege)
|
|
8
|
+
* - todos os pares texto/fundo validados em WCAG AA (≥ 4,5:1; UI ≥ 3:1)
|
|
9
|
+
* - proporção 60-30-10: neutros · azul/navy · amarelo de destaque
|
|
10
|
+
* Nunca hard-code hex/px que estes tokens já carregam.
|
|
11
|
+
*/
|
|
12
|
+
/** Cores-âncora da marca. */
|
|
13
|
+
export declare const brand: {
|
|
14
|
+
/** Azul de ação (botões, links, preços) — 5,2:1 com branco */
|
|
15
|
+
readonly horizon: "#2663EB";
|
|
16
|
+
/** Navy institucional (barra superior, hero, textos de marca) */
|
|
17
|
+
readonly obsidian: "#08154B";
|
|
18
|
+
/** Amarelo de destaque — usar só como FUNDO com texto navy (12:1), nunca como texto */
|
|
19
|
+
readonly electric: "#F7D759";
|
|
20
|
+
/** Verde de sucesso / Pix — 4,7:1 com branco */
|
|
21
|
+
readonly evergreen: "#1E8540";
|
|
22
|
+
/** Vermelho de erro / desconto — 4,8:1 com branco */
|
|
23
|
+
readonly danger: "#D92D20";
|
|
24
|
+
readonly white: "#FFFFFF";
|
|
25
|
+
};
|
|
26
|
+
export type RampStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
27
|
+
type Ramp = Record<RampStep, string>;
|
|
28
|
+
/** Rampas OKLCH. O tom 600 é a âncora de cada cor (exceto electric: âncora em 300). */
|
|
29
|
+
export declare const ramps: Record<'horizon' | 'obsidian' | 'electric' | 'evergreen' | 'danger' | 'gray', Ramp>;
|
|
30
|
+
/** Neutros do tema escuro (mesmo matiz, croma baixo — evita "azul neon" no escuro). */
|
|
31
|
+
export declare const darkNeutrals: readonly ["#E4E8EF", "#BFC4CE", "#9398A4", "#636975", "#373D49", "#262B36", "#1A1E27", "#10141B", "#0A0D13", "#04060A"];
|
|
32
|
+
export declare const feedback: {
|
|
33
|
+
readonly success: string;
|
|
34
|
+
readonly successBg: string;
|
|
35
|
+
readonly warn: string;
|
|
36
|
+
readonly warnBg: string;
|
|
37
|
+
readonly warnText: string;
|
|
38
|
+
readonly error: string;
|
|
39
|
+
readonly errorBg: string;
|
|
40
|
+
};
|
|
41
|
+
/** Tokens semânticos por tema (equivalentes às variáveis `--ds-*`). Contrastes medidos contra `surface`. */
|
|
42
|
+
export declare const semantic: {
|
|
43
|
+
readonly light: {
|
|
44
|
+
readonly bg: string;
|
|
45
|
+
readonly surface: "#FFFFFF";
|
|
46
|
+
readonly surface2: string;
|
|
47
|
+
readonly text: string;
|
|
48
|
+
readonly text2: string;
|
|
49
|
+
readonly text3: string;
|
|
50
|
+
readonly border: "#8B9099";
|
|
51
|
+
readonly borderSoft: string;
|
|
52
|
+
readonly primary: string;
|
|
53
|
+
readonly primaryHover: string;
|
|
54
|
+
readonly primarySoft: string;
|
|
55
|
+
readonly accent: "#F7D759";
|
|
56
|
+
readonly link: string;
|
|
57
|
+
readonly successBg: string;
|
|
58
|
+
readonly warnBg: string;
|
|
59
|
+
readonly errorBg: string;
|
|
60
|
+
readonly shadowSm: "0 1px 2px rgba(31,34,40,.06), 0 1px 3px rgba(31,34,40,.08)";
|
|
61
|
+
readonly shadowMd: "0 4px 12px rgba(31,34,40,.08), 0 2px 4px rgba(31,34,40,.04)";
|
|
62
|
+
readonly shadowLg: "0 16px 40px rgba(31,34,40,.12), 0 4px 12px rgba(31,34,40,.06)";
|
|
63
|
+
};
|
|
64
|
+
readonly dark: {
|
|
65
|
+
readonly bg: "#10141B";
|
|
66
|
+
readonly surface: "#1A1E27";
|
|
67
|
+
readonly surface2: "#262B36";
|
|
68
|
+
readonly text: "#E4E8EF";
|
|
69
|
+
readonly text2: "#BFC4CE";
|
|
70
|
+
readonly text3: "#9398A4";
|
|
71
|
+
readonly border: "#636975";
|
|
72
|
+
readonly borderSoft: "#262B36";
|
|
73
|
+
readonly primary: string;
|
|
74
|
+
readonly primaryHover: string;
|
|
75
|
+
readonly primarySoft: "rgba(110,159,255,.14)";
|
|
76
|
+
readonly accent: "#F7D759";
|
|
77
|
+
readonly link: string;
|
|
78
|
+
readonly successBg: "rgba(97,184,117,.14)";
|
|
79
|
+
readonly warnBg: "rgba(247,215,89,.12)";
|
|
80
|
+
readonly errorBg: "rgba(255,108,90,.14)";
|
|
81
|
+
readonly shadowSm: "0 1px 3px rgba(0,0,0,.4)";
|
|
82
|
+
readonly shadowMd: "0 4px 14px rgba(0,0,0,.45)";
|
|
83
|
+
readonly shadowLg: "0 16px 40px rgba(0,0,0,.55)";
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
export declare const fontFamily = "'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif";
|
|
87
|
+
/**
|
|
88
|
+
* Escala tipográfica — razão ~1,25 (terça maior) sobre base 16px.
|
|
89
|
+
* Texto de leitura e de UI tem tamanho FIXO (legibilidade e alinhamento consistentes);
|
|
90
|
+
* só títulos de destaque (display, h1) são fluidos entre mobile e desktop.
|
|
91
|
+
* Poppins tem x-height alto: entrelinha 1,5 no corpo e 1,2–1,3 nos títulos.
|
|
92
|
+
*/
|
|
93
|
+
export declare const typography: {
|
|
94
|
+
readonly displayLg: {
|
|
95
|
+
readonly size: "clamp(40px, 2.4vw + 26px, 56px)";
|
|
96
|
+
readonly weight: 700;
|
|
97
|
+
readonly lineHeight: 1.1;
|
|
98
|
+
readonly letterSpacing: "-0.02em";
|
|
99
|
+
readonly px: "56/40";
|
|
100
|
+
readonly label: "display-large";
|
|
101
|
+
};
|
|
102
|
+
readonly displayMd: {
|
|
103
|
+
readonly size: "clamp(36px, 1.8vw + 25px, 48px)";
|
|
104
|
+
readonly weight: 700;
|
|
105
|
+
readonly lineHeight: 1.15;
|
|
106
|
+
readonly letterSpacing: "-0.02em";
|
|
107
|
+
readonly px: "48/36";
|
|
108
|
+
readonly label: "display-medium";
|
|
109
|
+
};
|
|
110
|
+
readonly displaySm: {
|
|
111
|
+
readonly size: "clamp(32px, 1.2vw + 25px, 40px)";
|
|
112
|
+
readonly weight: 700;
|
|
113
|
+
readonly lineHeight: 1.2;
|
|
114
|
+
readonly letterSpacing: "-0.015em";
|
|
115
|
+
readonly px: "40/32";
|
|
116
|
+
readonly label: "display-small";
|
|
117
|
+
};
|
|
118
|
+
readonly headlineLg: {
|
|
119
|
+
readonly size: "clamp(26px, 0.9vw + 21px, 32px)";
|
|
120
|
+
readonly weight: 600;
|
|
121
|
+
readonly lineHeight: 1.25;
|
|
122
|
+
readonly letterSpacing: "-0.01em";
|
|
123
|
+
readonly px: "32/26";
|
|
124
|
+
readonly label: "headline-large";
|
|
125
|
+
};
|
|
126
|
+
readonly headlineMd: {
|
|
127
|
+
readonly size: "24px";
|
|
128
|
+
readonly weight: 600;
|
|
129
|
+
readonly lineHeight: 1.33;
|
|
130
|
+
readonly letterSpacing: "-0.005em";
|
|
131
|
+
readonly px: "24";
|
|
132
|
+
readonly label: "headline-medium";
|
|
133
|
+
};
|
|
134
|
+
readonly headlineSm: {
|
|
135
|
+
readonly size: "20px";
|
|
136
|
+
readonly weight: 600;
|
|
137
|
+
readonly lineHeight: 1.4;
|
|
138
|
+
readonly letterSpacing: "0";
|
|
139
|
+
readonly px: "20";
|
|
140
|
+
readonly label: "headline-small";
|
|
141
|
+
};
|
|
142
|
+
readonly subheadlineLg: {
|
|
143
|
+
readonly size: "18px";
|
|
144
|
+
readonly weight: 400;
|
|
145
|
+
readonly lineHeight: 1.55;
|
|
146
|
+
readonly letterSpacing: "0";
|
|
147
|
+
readonly px: "18";
|
|
148
|
+
readonly label: "body-large";
|
|
149
|
+
};
|
|
150
|
+
readonly subheadlineRg: {
|
|
151
|
+
readonly size: "16px";
|
|
152
|
+
readonly weight: 400;
|
|
153
|
+
readonly lineHeight: 1.5;
|
|
154
|
+
readonly letterSpacing: "0";
|
|
155
|
+
readonly px: "16";
|
|
156
|
+
readonly label: "body";
|
|
157
|
+
};
|
|
158
|
+
readonly subheadlineSm: {
|
|
159
|
+
readonly size: "14px";
|
|
160
|
+
readonly weight: 400;
|
|
161
|
+
readonly lineHeight: 1.43;
|
|
162
|
+
readonly letterSpacing: "0";
|
|
163
|
+
readonly px: "14";
|
|
164
|
+
readonly label: "body-small";
|
|
165
|
+
};
|
|
166
|
+
readonly button: {
|
|
167
|
+
readonly size: "14px";
|
|
168
|
+
readonly weight: 600;
|
|
169
|
+
readonly lineHeight: 1.43;
|
|
170
|
+
readonly letterSpacing: "0.01em";
|
|
171
|
+
readonly px: "14";
|
|
172
|
+
readonly label: "button";
|
|
173
|
+
};
|
|
174
|
+
readonly disclaimer: {
|
|
175
|
+
readonly size: "12px";
|
|
176
|
+
readonly weight: 500;
|
|
177
|
+
readonly lineHeight: 1.33;
|
|
178
|
+
readonly letterSpacing: "0.01em";
|
|
179
|
+
readonly px: "12";
|
|
180
|
+
readonly label: "caption";
|
|
181
|
+
};
|
|
182
|
+
};
|
|
183
|
+
export type TypographyToken = keyof typeof typography;
|
|
184
|
+
/** Spacing — passos de 4px de 0 a 100. */
|
|
185
|
+
export declare const spacing: {
|
|
186
|
+
readonly 0: "0px";
|
|
187
|
+
readonly 4: "4px";
|
|
188
|
+
readonly 8: "8px";
|
|
189
|
+
readonly 12: "12px";
|
|
190
|
+
readonly 16: "16px";
|
|
191
|
+
readonly 20: "20px";
|
|
192
|
+
readonly 24: "24px";
|
|
193
|
+
readonly 28: "28px";
|
|
194
|
+
readonly 32: "32px";
|
|
195
|
+
readonly 36: "36px";
|
|
196
|
+
readonly 40: "40px";
|
|
197
|
+
readonly 44: "44px";
|
|
198
|
+
readonly 48: "48px";
|
|
199
|
+
readonly 52: "52px";
|
|
200
|
+
readonly 56: "56px";
|
|
201
|
+
readonly 60: "60px";
|
|
202
|
+
readonly 64: "64px";
|
|
203
|
+
readonly 68: "68px";
|
|
204
|
+
readonly 72: "72px";
|
|
205
|
+
readonly 80: "80px";
|
|
206
|
+
readonly 100: "100px";
|
|
207
|
+
};
|
|
208
|
+
/** Raios: controles 8px, cards 12px (como os cards de produto do site), seções 16px. */
|
|
209
|
+
export declare const radius: {
|
|
210
|
+
readonly sm: "8px";
|
|
211
|
+
readonly md: "12px";
|
|
212
|
+
readonly lg: "16px";
|
|
213
|
+
};
|
|
214
|
+
/** Grid: mobile 4col/16/20 · tablet 8col/24/32 · desktop 12col/24/64. */
|
|
215
|
+
export declare const grid: {
|
|
216
|
+
readonly max: "1224px";
|
|
217
|
+
readonly gap: "24px";
|
|
218
|
+
readonly margin: {
|
|
219
|
+
readonly mobile: "20px";
|
|
220
|
+
readonly tablet: "32px";
|
|
221
|
+
readonly desktop: "64px";
|
|
222
|
+
};
|
|
223
|
+
readonly columns: {
|
|
224
|
+
readonly mobile: 4;
|
|
225
|
+
readonly tablet: 8;
|
|
226
|
+
readonly desktop: 12;
|
|
227
|
+
};
|
|
228
|
+
readonly breakpoints: {
|
|
229
|
+
readonly mobile: 360;
|
|
230
|
+
readonly tablet: 768;
|
|
231
|
+
readonly desktop: 1366;
|
|
232
|
+
};
|
|
233
|
+
};
|
|
234
|
+
/** Cores das séries em gráficos por tema — vizinhos contrastantes e ≥ 3:1 contra o fundo. */
|
|
235
|
+
export declare const chartColors: {
|
|
236
|
+
readonly light: readonly ["#2663EB", "#1E8540", "#D5A700", "#08154B", "#6E9FFF", "#D92D20", "#61B875", "#84888F"];
|
|
237
|
+
readonly dark: readonly ["#6E9FFF", "#61B875", "#F7D759", "#BFC4CE", "#A1C1FF", "#FF6C5A", "#A8EDB5", "#9398A4"];
|
|
238
|
+
};
|
|
239
|
+
/**
|
|
240
|
+
* Ordem das séries em gráficos. São variáveis CSS (`--jc-chart-N`) que trocam
|
|
241
|
+
* de valor entre claro/escuro — use como qualquer cor: `color={chartPalette[0]}`.
|
|
242
|
+
*/
|
|
243
|
+
export declare const chartPalette: string[];
|
|
244
|
+
export declare const tokens: {
|
|
245
|
+
brand: {
|
|
246
|
+
/** Azul de ação (botões, links, preços) — 5,2:1 com branco */
|
|
247
|
+
readonly horizon: "#2663EB";
|
|
248
|
+
/** Navy institucional (barra superior, hero, textos de marca) */
|
|
249
|
+
readonly obsidian: "#08154B";
|
|
250
|
+
/** Amarelo de destaque — usar só como FUNDO com texto navy (12:1), nunca como texto */
|
|
251
|
+
readonly electric: "#F7D759";
|
|
252
|
+
/** Verde de sucesso / Pix — 4,7:1 com branco */
|
|
253
|
+
readonly evergreen: "#1E8540";
|
|
254
|
+
/** Vermelho de erro / desconto — 4,8:1 com branco */
|
|
255
|
+
readonly danger: "#D92D20";
|
|
256
|
+
readonly white: "#FFFFFF";
|
|
257
|
+
};
|
|
258
|
+
ramps: Record<"gray" | "horizon" | "obsidian" | "electric" | "evergreen" | "danger", Ramp>;
|
|
259
|
+
darkNeutrals: readonly ["#E4E8EF", "#BFC4CE", "#9398A4", "#636975", "#373D49", "#262B36", "#1A1E27", "#10141B", "#0A0D13", "#04060A"];
|
|
260
|
+
feedback: {
|
|
261
|
+
readonly success: string;
|
|
262
|
+
readonly successBg: string;
|
|
263
|
+
readonly warn: string;
|
|
264
|
+
readonly warnBg: string;
|
|
265
|
+
readonly warnText: string;
|
|
266
|
+
readonly error: string;
|
|
267
|
+
readonly errorBg: string;
|
|
268
|
+
};
|
|
269
|
+
semantic: {
|
|
270
|
+
readonly light: {
|
|
271
|
+
readonly bg: string;
|
|
272
|
+
readonly surface: "#FFFFFF";
|
|
273
|
+
readonly surface2: string;
|
|
274
|
+
readonly text: string;
|
|
275
|
+
readonly text2: string;
|
|
276
|
+
readonly text3: string;
|
|
277
|
+
readonly border: "#8B9099";
|
|
278
|
+
readonly borderSoft: string;
|
|
279
|
+
readonly primary: string;
|
|
280
|
+
readonly primaryHover: string;
|
|
281
|
+
readonly primarySoft: string;
|
|
282
|
+
readonly accent: "#F7D759";
|
|
283
|
+
readonly link: string;
|
|
284
|
+
readonly successBg: string;
|
|
285
|
+
readonly warnBg: string;
|
|
286
|
+
readonly errorBg: string;
|
|
287
|
+
readonly shadowSm: "0 1px 2px rgba(31,34,40,.06), 0 1px 3px rgba(31,34,40,.08)";
|
|
288
|
+
readonly shadowMd: "0 4px 12px rgba(31,34,40,.08), 0 2px 4px rgba(31,34,40,.04)";
|
|
289
|
+
readonly shadowLg: "0 16px 40px rgba(31,34,40,.12), 0 4px 12px rgba(31,34,40,.06)";
|
|
290
|
+
};
|
|
291
|
+
readonly dark: {
|
|
292
|
+
readonly bg: "#10141B";
|
|
293
|
+
readonly surface: "#1A1E27";
|
|
294
|
+
readonly surface2: "#262B36";
|
|
295
|
+
readonly text: "#E4E8EF";
|
|
296
|
+
readonly text2: "#BFC4CE";
|
|
297
|
+
readonly text3: "#9398A4";
|
|
298
|
+
readonly border: "#636975";
|
|
299
|
+
readonly borderSoft: "#262B36";
|
|
300
|
+
readonly primary: string;
|
|
301
|
+
readonly primaryHover: string;
|
|
302
|
+
readonly primarySoft: "rgba(110,159,255,.14)";
|
|
303
|
+
readonly accent: "#F7D759";
|
|
304
|
+
readonly link: string;
|
|
305
|
+
readonly successBg: "rgba(97,184,117,.14)";
|
|
306
|
+
readonly warnBg: "rgba(247,215,89,.12)";
|
|
307
|
+
readonly errorBg: "rgba(255,108,90,.14)";
|
|
308
|
+
readonly shadowSm: "0 1px 3px rgba(0,0,0,.4)";
|
|
309
|
+
readonly shadowMd: "0 4px 14px rgba(0,0,0,.45)";
|
|
310
|
+
readonly shadowLg: "0 16px 40px rgba(0,0,0,.55)";
|
|
311
|
+
};
|
|
312
|
+
};
|
|
313
|
+
fontFamily: string;
|
|
314
|
+
typography: {
|
|
315
|
+
readonly displayLg: {
|
|
316
|
+
readonly size: "clamp(40px, 2.4vw + 26px, 56px)";
|
|
317
|
+
readonly weight: 700;
|
|
318
|
+
readonly lineHeight: 1.1;
|
|
319
|
+
readonly letterSpacing: "-0.02em";
|
|
320
|
+
readonly px: "56/40";
|
|
321
|
+
readonly label: "display-large";
|
|
322
|
+
};
|
|
323
|
+
readonly displayMd: {
|
|
324
|
+
readonly size: "clamp(36px, 1.8vw + 25px, 48px)";
|
|
325
|
+
readonly weight: 700;
|
|
326
|
+
readonly lineHeight: 1.15;
|
|
327
|
+
readonly letterSpacing: "-0.02em";
|
|
328
|
+
readonly px: "48/36";
|
|
329
|
+
readonly label: "display-medium";
|
|
330
|
+
};
|
|
331
|
+
readonly displaySm: {
|
|
332
|
+
readonly size: "clamp(32px, 1.2vw + 25px, 40px)";
|
|
333
|
+
readonly weight: 700;
|
|
334
|
+
readonly lineHeight: 1.2;
|
|
335
|
+
readonly letterSpacing: "-0.015em";
|
|
336
|
+
readonly px: "40/32";
|
|
337
|
+
readonly label: "display-small";
|
|
338
|
+
};
|
|
339
|
+
readonly headlineLg: {
|
|
340
|
+
readonly size: "clamp(26px, 0.9vw + 21px, 32px)";
|
|
341
|
+
readonly weight: 600;
|
|
342
|
+
readonly lineHeight: 1.25;
|
|
343
|
+
readonly letterSpacing: "-0.01em";
|
|
344
|
+
readonly px: "32/26";
|
|
345
|
+
readonly label: "headline-large";
|
|
346
|
+
};
|
|
347
|
+
readonly headlineMd: {
|
|
348
|
+
readonly size: "24px";
|
|
349
|
+
readonly weight: 600;
|
|
350
|
+
readonly lineHeight: 1.33;
|
|
351
|
+
readonly letterSpacing: "-0.005em";
|
|
352
|
+
readonly px: "24";
|
|
353
|
+
readonly label: "headline-medium";
|
|
354
|
+
};
|
|
355
|
+
readonly headlineSm: {
|
|
356
|
+
readonly size: "20px";
|
|
357
|
+
readonly weight: 600;
|
|
358
|
+
readonly lineHeight: 1.4;
|
|
359
|
+
readonly letterSpacing: "0";
|
|
360
|
+
readonly px: "20";
|
|
361
|
+
readonly label: "headline-small";
|
|
362
|
+
};
|
|
363
|
+
readonly subheadlineLg: {
|
|
364
|
+
readonly size: "18px";
|
|
365
|
+
readonly weight: 400;
|
|
366
|
+
readonly lineHeight: 1.55;
|
|
367
|
+
readonly letterSpacing: "0";
|
|
368
|
+
readonly px: "18";
|
|
369
|
+
readonly label: "body-large";
|
|
370
|
+
};
|
|
371
|
+
readonly subheadlineRg: {
|
|
372
|
+
readonly size: "16px";
|
|
373
|
+
readonly weight: 400;
|
|
374
|
+
readonly lineHeight: 1.5;
|
|
375
|
+
readonly letterSpacing: "0";
|
|
376
|
+
readonly px: "16";
|
|
377
|
+
readonly label: "body";
|
|
378
|
+
};
|
|
379
|
+
readonly subheadlineSm: {
|
|
380
|
+
readonly size: "14px";
|
|
381
|
+
readonly weight: 400;
|
|
382
|
+
readonly lineHeight: 1.43;
|
|
383
|
+
readonly letterSpacing: "0";
|
|
384
|
+
readonly px: "14";
|
|
385
|
+
readonly label: "body-small";
|
|
386
|
+
};
|
|
387
|
+
readonly button: {
|
|
388
|
+
readonly size: "14px";
|
|
389
|
+
readonly weight: 600;
|
|
390
|
+
readonly lineHeight: 1.43;
|
|
391
|
+
readonly letterSpacing: "0.01em";
|
|
392
|
+
readonly px: "14";
|
|
393
|
+
readonly label: "button";
|
|
394
|
+
};
|
|
395
|
+
readonly disclaimer: {
|
|
396
|
+
readonly size: "12px";
|
|
397
|
+
readonly weight: 500;
|
|
398
|
+
readonly lineHeight: 1.33;
|
|
399
|
+
readonly letterSpacing: "0.01em";
|
|
400
|
+
readonly px: "12";
|
|
401
|
+
readonly label: "caption";
|
|
402
|
+
};
|
|
403
|
+
};
|
|
404
|
+
spacing: {
|
|
405
|
+
readonly 0: "0px";
|
|
406
|
+
readonly 4: "4px";
|
|
407
|
+
readonly 8: "8px";
|
|
408
|
+
readonly 12: "12px";
|
|
409
|
+
readonly 16: "16px";
|
|
410
|
+
readonly 20: "20px";
|
|
411
|
+
readonly 24: "24px";
|
|
412
|
+
readonly 28: "28px";
|
|
413
|
+
readonly 32: "32px";
|
|
414
|
+
readonly 36: "36px";
|
|
415
|
+
readonly 40: "40px";
|
|
416
|
+
readonly 44: "44px";
|
|
417
|
+
readonly 48: "48px";
|
|
418
|
+
readonly 52: "52px";
|
|
419
|
+
readonly 56: "56px";
|
|
420
|
+
readonly 60: "60px";
|
|
421
|
+
readonly 64: "64px";
|
|
422
|
+
readonly 68: "68px";
|
|
423
|
+
readonly 72: "72px";
|
|
424
|
+
readonly 80: "80px";
|
|
425
|
+
readonly 100: "100px";
|
|
426
|
+
};
|
|
427
|
+
radius: {
|
|
428
|
+
readonly sm: "8px";
|
|
429
|
+
readonly md: "12px";
|
|
430
|
+
readonly lg: "16px";
|
|
431
|
+
};
|
|
432
|
+
grid: {
|
|
433
|
+
readonly max: "1224px";
|
|
434
|
+
readonly gap: "24px";
|
|
435
|
+
readonly margin: {
|
|
436
|
+
readonly mobile: "20px";
|
|
437
|
+
readonly tablet: "32px";
|
|
438
|
+
readonly desktop: "64px";
|
|
439
|
+
};
|
|
440
|
+
readonly columns: {
|
|
441
|
+
readonly mobile: 4;
|
|
442
|
+
readonly tablet: 8;
|
|
443
|
+
readonly desktop: 12;
|
|
444
|
+
};
|
|
445
|
+
readonly breakpoints: {
|
|
446
|
+
readonly mobile: 360;
|
|
447
|
+
readonly tablet: 768;
|
|
448
|
+
readonly desktop: 1366;
|
|
449
|
+
};
|
|
450
|
+
};
|
|
451
|
+
chartColors: {
|
|
452
|
+
readonly light: readonly ["#2663EB", "#1E8540", "#D5A700", "#08154B", "#6E9FFF", "#D92D20", "#61B875", "#84888F"];
|
|
453
|
+
readonly dark: readonly ["#6E9FFF", "#61B875", "#F7D759", "#BFC4CE", "#A1C1FF", "#FF6C5A", "#A8EDB5", "#9398A4"];
|
|
454
|
+
};
|
|
455
|
+
chartPalette: string[];
|
|
456
|
+
};
|
|
457
|
+
export default tokens;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type VariantColorsResolver } from '@mantine-vue/core';
|
|
2
|
+
/**
|
|
3
|
+
* Resolver de variantes da marca:
|
|
4
|
+
* - `accent` → botão Destaque (fundo Electric, texto Obsidian)
|
|
5
|
+
* - `outline` → hover usa o fundo suave da própria cor (ds-btn-secondary)
|
|
6
|
+
* - `subtle` sem cor → Ghost (texto-2, hover surface-2)
|
|
7
|
+
* - `light` → selos/tags com as cores semânticas do ds.css
|
|
8
|
+
*/
|
|
9
|
+
export declare const jcVariantColorResolver: VariantColorsResolver;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Card as e, Cascader as t, CheckboxIndicator as n, Combobox as r, FileInput as i, FloatingWindow as a, NumberFormatter as o, NumberInput as s, PillsInput as c, Table as l, Tooltip as u, useMantineTheme as d } from "@mantine-vue/core";
|
|
2
|
+
import { defineComponent as f, h as p } from "vue";
|
|
3
|
+
//#region src/theme/themeDefaults.ts
|
|
4
|
+
var m = (e) => /^[A-Z]/.test(e) || [
|
|
5
|
+
"classes",
|
|
6
|
+
"varsResolver",
|
|
7
|
+
"extend",
|
|
8
|
+
"withProps"
|
|
9
|
+
].includes(e);
|
|
10
|
+
function h(e, t) {
|
|
11
|
+
let n = f({
|
|
12
|
+
name: t,
|
|
13
|
+
inheritAttrs: !1,
|
|
14
|
+
setup(n, { attrs: r, slots: i }) {
|
|
15
|
+
let a = d();
|
|
16
|
+
return () => p(e, {
|
|
17
|
+
...a.value.components[t]?.defaultProps,
|
|
18
|
+
...r
|
|
19
|
+
}, i);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
for (let [t, r] of Object.entries(e)) m(t) && (n[t] = r);
|
|
23
|
+
return n;
|
|
24
|
+
}
|
|
25
|
+
var g = h(e, "Card"), _ = h(t, "Cascader"), v = h(n, "CheckboxIndicator"), y = h(r, "Combobox"), b = h(i, "FileInput"), x = h(a, "FloatingWindow"), S = h(o, "NumberFormatter"), C = h(s, "NumberInput"), w = h(c, "PillsInput"), T = h(l, "Table"), E = h(u, "Tooltip");
|
|
26
|
+
//#endregion
|
|
27
|
+
export { b as a, C as c, E as d, h as f, y as i, w as l, _ as n, x as o, v as r, S as s, g as t, T as u };
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=themeDefaults-Ckd05FUY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeDefaults-Ckd05FUY.js","names":["Card","MCard","Cascader","MCascader","CheckboxIndicator","MCheckboxIndicator","Combobox","MCombobox","FileInput","MFileInput","FloatingWindow","MFloatingWindow","NumberFormatter","MNumberFormatter","NumberInput","MNumberInput","PillsInput","MPillsInput","Table","MTable","Tooltip","MTooltip","isStatic","key","withThemeDefaults","Wrapped","defineComponent","theme","useMantineTheme","h","component","name","attrs","slots","value","Card$1","Card","Cascader$1","Cascader","CheckboxIndicator$1","CheckboxIndicator","Combobox$1","Combobox","FileInput$1","FileInput","FloatingWindow$1","FloatingWindow","NumberFormatter$1","NumberFormatter","NumberInput$1","NumberInput","PillsInput$1","PillsInput","Table$1","Table","Tooltip$1","Tooltip"],"sources":["../src/theme/themeDefaults.ts"],"sourcesContent":["import { defineComponent, h } from 'vue';\nimport {\n Card as MCard,\n Cascader as MCascader,\n CheckboxIndicator as MCheckboxIndicator,\n Combobox as MCombobox,\n FileInput as MFileInput,\n FloatingWindow as MFloatingWindow,\n NumberFormatter as MNumberFormatter,\n NumberInput as MNumberInput,\n PillsInput as MPillsInput,\n Table as MTable,\n Tooltip as MTooltip,\n useMantineTheme,\n} from '@mantine-vue/core';\n\n/** Estáticos do Mantine que o wrapper precisa manter (`Card.Section`, `Table.Thead`, `extend`, `classes`…). */\nconst isStatic = (key: string) => /^[A-Z]/.test(key) || ['classes', 'varsResolver', 'extend', 'withProps'].includes(key);\n\n/**\n * No Mantine Vue 3.5 alguns componentes fixam padrões no `withDefaults` (ex.: `size: 'sm'` no NumberInput,\n * `withBorder: false` no Card), e esses valores vencem o `defaultProps` do tema — no React o tema vence.\n * O wrapper aplica `theme.components[name].defaultProps` antes das props do usuário, que continuam com prioridade.\n */\nexport function withThemeDefaults<C>(component: C, name: string): C {\n const Wrapped = defineComponent({\n name,\n inheritAttrs: false,\n setup(_props, { attrs, slots }) {\n const theme = useMantineTheme();\n return () => h(component as any, { ...theme.value.components[name]?.defaultProps, ...attrs }, slots);\n },\n });\n for (const [key, value] of Object.entries(component as object)) if (isStatic(key)) (Wrapped as any)[key] = value;\n return Wrapped as unknown as C;\n}\n\nexport const Card: typeof MCard = withThemeDefaults(MCard, 'Card');\nexport const Cascader: typeof MCascader = withThemeDefaults(MCascader, 'Cascader');\nexport const CheckboxIndicator: typeof MCheckboxIndicator = withThemeDefaults(MCheckboxIndicator, 'CheckboxIndicator');\nexport const Combobox: typeof MCombobox = withThemeDefaults(MCombobox, 'Combobox');\nexport const FileInput: typeof MFileInput = withThemeDefaults(MFileInput, 'FileInput');\nexport const FloatingWindow: typeof MFloatingWindow = withThemeDefaults(MFloatingWindow, 'FloatingWindow');\nexport const NumberFormatter: typeof MNumberFormatter = withThemeDefaults(MNumberFormatter, 'NumberFormatter');\nexport const NumberInput: typeof MNumberInput = withThemeDefaults(MNumberInput, 'NumberInput');\nexport const PillsInput: typeof MPillsInput = withThemeDefaults(MPillsInput, 'PillsInput');\nexport const Table: typeof MTable = withThemeDefaults(MTable, 'Table');\nexport const Tooltip: typeof MTooltip = withThemeDefaults(MTooltip, 'Tooltip');\n"],"mappings":";;;AAiBA,IAAMsB,KAAY,MAAgB,SAAS,KAAKC,CAAG,KAAK;CAAC;CAAW;CAAgB;CAAU;AAAW,CAAC,CAAC,SAASA,CAAG;AAOvH,SAAgBC,EAAqB,GAAc,GAAiB;CAClE,IAAMC,IAAUC,EAAgB;EAC9B;EACA,cAAc;EACd,MAAM,GAAQ,EAAE,UAAO,YAAS;GAC9B,IAAMC,IAAQC,EAAgB;GAC9B,aAAaC,EAAEC,GAAkB;IAAE,GAAGH,EAAM,MAAM,WAAWI,EAAK,EAAE;IAAc,GAAGC;GAAM,GAAGC,CAAK;EACrG;CACF,CAAC;CACD,KAAK,IAAM,CAACV,GAAKW,MAAU,OAAO,QAAQJ,CAAmB,GAAG,AAAIR,EAASC,CAAG,MAAG,EAAiBA,KAAOW;CAC3G,OAAOT;AACT;AAEA,IAAazB,IAAqBwB,EAAkBvB,GAAO,MAAM,GACpDC,IAA6BsB,EAAkBrB,GAAW,UAAU,GACpEC,IAA+CoB,EAAkBnB,GAAoB,mBAAmB,GACxGC,IAA6BkB,EAAkBjB,GAAW,UAAU,GACpEC,IAA+BgB,EAAkBf,GAAY,WAAW,GACxEC,IAAyCc,EAAkBb,GAAiB,gBAAgB,GAC5FC,IAA2CY,EAAkBX,GAAkB,iBAAiB,GAChGC,IAAmCU,EAAkBT,GAAc,aAAa,GAChFC,IAAiCQ,EAAkBP,GAAa,YAAY,GAC5EC,IAAuBM,EAAkBL,GAAQ,OAAO,GACxDC,IAA2BI,EAAkBH,GAAU,SAAS"}
|