@structyl/styled 1.0.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/LICENSE +21 -0
- package/README.md +136 -0
- package/dist/index.cjs +8352 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +4301 -0
- package/dist/index.d.ts +4301 -0
- package/dist/index.mjs +8202 -0
- package/dist/index.mjs.map +1 -0
- package/dist/tailwind-preset.cjs +677 -0
- package/dist/tailwind-preset.cjs.map +1 -0
- package/dist/tailwind-preset.d.cts +843 -0
- package/dist/tailwind-preset.d.ts +843 -0
- package/dist/tailwind-preset.mjs +675 -0
- package/dist/tailwind-preset.mjs.map +1 -0
- package/package.json +80 -0
|
@@ -0,0 +1,675 @@
|
|
|
1
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
2
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
3
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
4
|
+
}) : x)(function(x) {
|
|
5
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
6
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
7
|
+
});
|
|
8
|
+
var __commonJS = (cb, mod) => function __require2() {
|
|
9
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// ../../node_modules/.pnpm/tailwindcss-animate@1.0.7_tailwindcss@4.3.0/node_modules/tailwindcss-animate/index.js
|
|
13
|
+
var require_tailwindcss_animate = __commonJS({
|
|
14
|
+
"../../node_modules/.pnpm/tailwindcss-animate@1.0.7_tailwindcss@4.3.0/node_modules/tailwindcss-animate/index.js"(exports, module) {
|
|
15
|
+
var plugin = __require("tailwindcss/plugin");
|
|
16
|
+
function filterDefault(values) {
|
|
17
|
+
return Object.fromEntries(
|
|
18
|
+
Object.entries(values).filter(([key]) => key !== "DEFAULT")
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
module.exports = plugin(
|
|
22
|
+
({ addUtilities, matchUtilities, theme }) => {
|
|
23
|
+
addUtilities({
|
|
24
|
+
"@keyframes enter": theme("keyframes.enter"),
|
|
25
|
+
"@keyframes exit": theme("keyframes.exit"),
|
|
26
|
+
".animate-in": {
|
|
27
|
+
animationName: "enter",
|
|
28
|
+
animationDuration: theme("animationDuration.DEFAULT"),
|
|
29
|
+
"--tw-enter-opacity": "initial",
|
|
30
|
+
"--tw-enter-scale": "initial",
|
|
31
|
+
"--tw-enter-rotate": "initial",
|
|
32
|
+
"--tw-enter-translate-x": "initial",
|
|
33
|
+
"--tw-enter-translate-y": "initial"
|
|
34
|
+
},
|
|
35
|
+
".animate-out": {
|
|
36
|
+
animationName: "exit",
|
|
37
|
+
animationDuration: theme("animationDuration.DEFAULT"),
|
|
38
|
+
"--tw-exit-opacity": "initial",
|
|
39
|
+
"--tw-exit-scale": "initial",
|
|
40
|
+
"--tw-exit-rotate": "initial",
|
|
41
|
+
"--tw-exit-translate-x": "initial",
|
|
42
|
+
"--tw-exit-translate-y": "initial"
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
matchUtilities(
|
|
46
|
+
{
|
|
47
|
+
"fade-in": (value) => ({ "--tw-enter-opacity": value }),
|
|
48
|
+
"fade-out": (value) => ({ "--tw-exit-opacity": value })
|
|
49
|
+
},
|
|
50
|
+
{ values: theme("animationOpacity") }
|
|
51
|
+
);
|
|
52
|
+
matchUtilities(
|
|
53
|
+
{
|
|
54
|
+
"zoom-in": (value) => ({ "--tw-enter-scale": value }),
|
|
55
|
+
"zoom-out": (value) => ({ "--tw-exit-scale": value })
|
|
56
|
+
},
|
|
57
|
+
{ values: theme("animationScale") }
|
|
58
|
+
);
|
|
59
|
+
matchUtilities(
|
|
60
|
+
{
|
|
61
|
+
"spin-in": (value) => ({ "--tw-enter-rotate": value }),
|
|
62
|
+
"spin-out": (value) => ({ "--tw-exit-rotate": value })
|
|
63
|
+
},
|
|
64
|
+
{ values: theme("animationRotate") }
|
|
65
|
+
);
|
|
66
|
+
matchUtilities(
|
|
67
|
+
{
|
|
68
|
+
"slide-in-from-top": (value) => ({
|
|
69
|
+
"--tw-enter-translate-y": `-${value}`
|
|
70
|
+
}),
|
|
71
|
+
"slide-in-from-bottom": (value) => ({
|
|
72
|
+
"--tw-enter-translate-y": value
|
|
73
|
+
}),
|
|
74
|
+
"slide-in-from-left": (value) => ({
|
|
75
|
+
"--tw-enter-translate-x": `-${value}`
|
|
76
|
+
}),
|
|
77
|
+
"slide-in-from-right": (value) => ({
|
|
78
|
+
"--tw-enter-translate-x": value
|
|
79
|
+
}),
|
|
80
|
+
"slide-out-to-top": (value) => ({
|
|
81
|
+
"--tw-exit-translate-y": `-${value}`
|
|
82
|
+
}),
|
|
83
|
+
"slide-out-to-bottom": (value) => ({
|
|
84
|
+
"--tw-exit-translate-y": value
|
|
85
|
+
}),
|
|
86
|
+
"slide-out-to-left": (value) => ({
|
|
87
|
+
"--tw-exit-translate-x": `-${value}`
|
|
88
|
+
}),
|
|
89
|
+
"slide-out-to-right": (value) => ({
|
|
90
|
+
"--tw-exit-translate-x": value
|
|
91
|
+
})
|
|
92
|
+
},
|
|
93
|
+
{ values: theme("animationTranslate") }
|
|
94
|
+
);
|
|
95
|
+
matchUtilities(
|
|
96
|
+
{ duration: (value) => ({ animationDuration: value }) },
|
|
97
|
+
{ values: filterDefault(theme("animationDuration")) }
|
|
98
|
+
);
|
|
99
|
+
matchUtilities(
|
|
100
|
+
{ delay: (value) => ({ animationDelay: value }) },
|
|
101
|
+
{ values: theme("animationDelay") }
|
|
102
|
+
);
|
|
103
|
+
matchUtilities(
|
|
104
|
+
{ ease: (value) => ({ animationTimingFunction: value }) },
|
|
105
|
+
{ values: filterDefault(theme("animationTimingFunction")) }
|
|
106
|
+
);
|
|
107
|
+
addUtilities({
|
|
108
|
+
".running": { animationPlayState: "running" },
|
|
109
|
+
".paused": { animationPlayState: "paused" }
|
|
110
|
+
});
|
|
111
|
+
matchUtilities(
|
|
112
|
+
{ "fill-mode": (value) => ({ animationFillMode: value }) },
|
|
113
|
+
{ values: theme("animationFillMode") }
|
|
114
|
+
);
|
|
115
|
+
matchUtilities(
|
|
116
|
+
{ direction: (value) => ({ animationDirection: value }) },
|
|
117
|
+
{ values: theme("animationDirection") }
|
|
118
|
+
);
|
|
119
|
+
matchUtilities(
|
|
120
|
+
{ repeat: (value) => ({ animationIterationCount: value }) },
|
|
121
|
+
{ values: theme("animationRepeat") }
|
|
122
|
+
);
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
theme: {
|
|
126
|
+
extend: {
|
|
127
|
+
animationDelay: ({ theme }) => ({
|
|
128
|
+
...theme("transitionDelay")
|
|
129
|
+
}),
|
|
130
|
+
animationDuration: ({ theme }) => ({
|
|
131
|
+
0: "0ms",
|
|
132
|
+
...theme("transitionDuration")
|
|
133
|
+
}),
|
|
134
|
+
animationTimingFunction: ({ theme }) => ({
|
|
135
|
+
...theme("transitionTimingFunction")
|
|
136
|
+
}),
|
|
137
|
+
animationFillMode: {
|
|
138
|
+
none: "none",
|
|
139
|
+
forwards: "forwards",
|
|
140
|
+
backwards: "backwards",
|
|
141
|
+
both: "both"
|
|
142
|
+
},
|
|
143
|
+
animationDirection: {
|
|
144
|
+
normal: "normal",
|
|
145
|
+
reverse: "reverse",
|
|
146
|
+
alternate: "alternate",
|
|
147
|
+
"alternate-reverse": "alternate-reverse"
|
|
148
|
+
},
|
|
149
|
+
animationOpacity: ({ theme }) => ({
|
|
150
|
+
DEFAULT: 0,
|
|
151
|
+
...theme("opacity")
|
|
152
|
+
}),
|
|
153
|
+
animationTranslate: ({ theme }) => ({
|
|
154
|
+
DEFAULT: "100%",
|
|
155
|
+
...theme("translate")
|
|
156
|
+
}),
|
|
157
|
+
animationScale: ({ theme }) => ({
|
|
158
|
+
DEFAULT: 0,
|
|
159
|
+
...theme("scale")
|
|
160
|
+
}),
|
|
161
|
+
animationRotate: ({ theme }) => ({
|
|
162
|
+
DEFAULT: "30deg",
|
|
163
|
+
...theme("rotate")
|
|
164
|
+
}),
|
|
165
|
+
animationRepeat: {
|
|
166
|
+
0: "0",
|
|
167
|
+
1: "1",
|
|
168
|
+
infinite: "infinite"
|
|
169
|
+
},
|
|
170
|
+
keyframes: {
|
|
171
|
+
enter: {
|
|
172
|
+
from: {
|
|
173
|
+
opacity: "var(--tw-enter-opacity, 1)",
|
|
174
|
+
transform: "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))"
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
exit: {
|
|
178
|
+
to: {
|
|
179
|
+
opacity: "var(--tw-exit-opacity, 1)",
|
|
180
|
+
transform: "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))"
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
// src/tailwind-preset.ts
|
|
192
|
+
var animate = require_tailwindcss_animate();
|
|
193
|
+
var twPlugin = __require("tailwindcss/plugin");
|
|
194
|
+
var preset = {
|
|
195
|
+
darkMode: ["class", '[data-mode="dark"]'],
|
|
196
|
+
content: [],
|
|
197
|
+
theme: {
|
|
198
|
+
extend: {
|
|
199
|
+
colors: {
|
|
200
|
+
// ── Existing base tokens (backwards-compatible) ─────────────────────
|
|
201
|
+
bg: "hsl(var(--color-bg) / <alpha-value>)",
|
|
202
|
+
fg: "hsl(var(--color-fg) / <alpha-value>)",
|
|
203
|
+
background: "hsl(var(--color-bg) / <alpha-value>)",
|
|
204
|
+
foreground: "hsl(var(--color-fg) / <alpha-value>)",
|
|
205
|
+
card: {
|
|
206
|
+
DEFAULT: "hsl(var(--color-card) / <alpha-value>)",
|
|
207
|
+
foreground: "hsl(var(--color-card-fg) / <alpha-value>)"
|
|
208
|
+
},
|
|
209
|
+
popover: {
|
|
210
|
+
DEFAULT: "hsl(var(--color-popover) / <alpha-value>)",
|
|
211
|
+
foreground: "hsl(var(--color-popover-fg) / <alpha-value>)"
|
|
212
|
+
},
|
|
213
|
+
// ── Primary — extended with palette sub-tokens ──────────────────────
|
|
214
|
+
primary: {
|
|
215
|
+
DEFAULT: "hsl(var(--color-primary) / <alpha-value>)",
|
|
216
|
+
foreground: "hsl(var(--color-primary-fg) / <alpha-value>)",
|
|
217
|
+
hover: "hsl(var(--color-primary-hover) / <alpha-value>)",
|
|
218
|
+
active: "hsl(var(--color-primary-active) / <alpha-value>)",
|
|
219
|
+
light: "rgb(var(--color-primary-light) / <alpha-value>)",
|
|
220
|
+
dark: "rgb(var(--color-primary-dark) / <alpha-value>)",
|
|
221
|
+
contrast: "rgb(var(--color-primary-contrast) / <alpha-value>)",
|
|
222
|
+
"dark-bg": "rgb(var(--color-primary-dark-bg) / <alpha-value>)",
|
|
223
|
+
"state-contained": "var(--color-primary-state-contained)",
|
|
224
|
+
"state-outlined": "var(--color-primary-state-outlined)",
|
|
225
|
+
"state-resting": "var(--color-primary-state-resting)",
|
|
226
|
+
"shade-12": "var(--color-primary-shade-12)",
|
|
227
|
+
"shade-16": "var(--color-primary-shade-16)"
|
|
228
|
+
},
|
|
229
|
+
// ── Secondary — extended ────────────────────────────────────────────
|
|
230
|
+
secondary: {
|
|
231
|
+
DEFAULT: "hsl(var(--color-secondary) / <alpha-value>)",
|
|
232
|
+
foreground: "hsl(var(--color-secondary-fg) / <alpha-value>)",
|
|
233
|
+
light: "rgb(var(--color-secondary-light) / <alpha-value>)",
|
|
234
|
+
dark: "rgb(var(--color-secondary-dark) / <alpha-value>)",
|
|
235
|
+
contrast: "rgb(var(--color-secondary-contrast) / <alpha-value>)",
|
|
236
|
+
"dark-bg": "rgb(var(--color-secondary-dark-bg) / <alpha-value>)",
|
|
237
|
+
"state-contained": "var(--color-secondary-state-contained)",
|
|
238
|
+
"state-outlined": "var(--color-secondary-state-outlined)",
|
|
239
|
+
"state-resting": "var(--color-secondary-state-resting)",
|
|
240
|
+
"shade-12": "var(--color-secondary-shade-12)",
|
|
241
|
+
"shade-16": "var(--color-secondary-shade-16)"
|
|
242
|
+
},
|
|
243
|
+
muted: {
|
|
244
|
+
DEFAULT: "hsl(var(--color-muted) / <alpha-value>)",
|
|
245
|
+
foreground: "hsl(var(--color-muted-fg) / <alpha-value>)"
|
|
246
|
+
},
|
|
247
|
+
accent: {
|
|
248
|
+
DEFAULT: "hsl(var(--color-accent) / <alpha-value>)",
|
|
249
|
+
foreground: "hsl(var(--color-accent-fg) / <alpha-value>)"
|
|
250
|
+
},
|
|
251
|
+
// ── Destructive — extended (alias for error) ────────────────────────
|
|
252
|
+
destructive: {
|
|
253
|
+
DEFAULT: "hsl(var(--color-destructive) / <alpha-value>)",
|
|
254
|
+
foreground: "hsl(var(--color-destructive-fg) / <alpha-value>)",
|
|
255
|
+
light: "rgb(var(--color-error-light) / <alpha-value>)",
|
|
256
|
+
dark: "rgb(var(--color-error-dark) / <alpha-value>)",
|
|
257
|
+
contrast: "rgb(var(--color-error-contrast) / <alpha-value>)",
|
|
258
|
+
"shade-12": "var(--color-error-shade-12)",
|
|
259
|
+
"shade-16": "var(--color-error-shade-16)",
|
|
260
|
+
"state-contained": "var(--color-error-state-contained)",
|
|
261
|
+
"state-outlined": "var(--color-error-state-outlined)",
|
|
262
|
+
"state-resting": "var(--color-error-state-resting)",
|
|
263
|
+
"alert-bg": "var(--color-error-alert-bg)",
|
|
264
|
+
"alert-content": "var(--color-error-alert-content)"
|
|
265
|
+
},
|
|
266
|
+
// ── Error — alias for destructive, for the new color prop ───────────
|
|
267
|
+
error: {
|
|
268
|
+
DEFAULT: "hsl(var(--color-destructive) / <alpha-value>)",
|
|
269
|
+
foreground: "hsl(var(--color-destructive-fg) / <alpha-value>)",
|
|
270
|
+
light: "rgb(var(--color-error-light) / <alpha-value>)",
|
|
271
|
+
dark: "rgb(var(--color-error-dark) / <alpha-value>)",
|
|
272
|
+
contrast: "rgb(var(--color-error-contrast) / <alpha-value>)",
|
|
273
|
+
"shade-12": "var(--color-error-shade-12)",
|
|
274
|
+
"shade-16": "var(--color-error-shade-16)",
|
|
275
|
+
"state-contained": "var(--color-error-state-contained)",
|
|
276
|
+
"state-outlined": "var(--color-error-state-outlined)",
|
|
277
|
+
"state-resting": "var(--color-error-state-resting)",
|
|
278
|
+
"alert-bg": "var(--color-error-alert-bg)",
|
|
279
|
+
"alert-content": "var(--color-error-alert-content)"
|
|
280
|
+
},
|
|
281
|
+
// ── Success — extended ──────────────────────────────────────────────
|
|
282
|
+
success: {
|
|
283
|
+
DEFAULT: "hsl(var(--color-success) / <alpha-value>)",
|
|
284
|
+
foreground: "hsl(var(--color-success-fg) / <alpha-value>)",
|
|
285
|
+
light: "rgb(var(--color-success-light) / <alpha-value>)",
|
|
286
|
+
dark: "rgb(var(--color-success-dark) / <alpha-value>)",
|
|
287
|
+
contrast: "rgb(var(--color-success-contrast) / <alpha-value>)",
|
|
288
|
+
"shade-12": "var(--color-success-shade-12)",
|
|
289
|
+
"shade-16": "var(--color-success-shade-16)",
|
|
290
|
+
"state-contained": "var(--color-success-state-contained)",
|
|
291
|
+
"state-outlined": "var(--color-success-state-outlined)",
|
|
292
|
+
"state-resting": "var(--color-success-state-resting)",
|
|
293
|
+
"alert-bg": "var(--color-success-alert-bg)",
|
|
294
|
+
"alert-content": "var(--color-success-alert-content)"
|
|
295
|
+
},
|
|
296
|
+
// ── Warning — extended ──────────────────────────────────────────────
|
|
297
|
+
warning: {
|
|
298
|
+
DEFAULT: "hsl(var(--color-warning) / <alpha-value>)",
|
|
299
|
+
foreground: "hsl(var(--color-warning-fg) / <alpha-value>)",
|
|
300
|
+
light: "rgb(var(--color-warning-light) / <alpha-value>)",
|
|
301
|
+
dark: "rgb(var(--color-warning-dark) / <alpha-value>)",
|
|
302
|
+
contrast: "rgb(var(--color-warning-contrast) / <alpha-value>)",
|
|
303
|
+
"shade-12": "var(--color-warning-shade-12)",
|
|
304
|
+
"shade-16": "var(--color-warning-shade-16)",
|
|
305
|
+
"state-contained": "var(--color-warning-state-contained)",
|
|
306
|
+
"state-outlined": "var(--color-warning-state-outlined)",
|
|
307
|
+
"state-resting": "var(--color-warning-state-resting)",
|
|
308
|
+
"alert-bg": "var(--color-warning-alert-bg)",
|
|
309
|
+
"alert-content": "var(--color-warning-alert-content)"
|
|
310
|
+
},
|
|
311
|
+
// ── Info — extended ─────────────────────────────────────────────────
|
|
312
|
+
info: {
|
|
313
|
+
DEFAULT: "hsl(var(--color-info) / <alpha-value>)",
|
|
314
|
+
foreground: "hsl(var(--color-info-fg) / <alpha-value>)",
|
|
315
|
+
light: "rgb(var(--color-info-light) / <alpha-value>)",
|
|
316
|
+
dark: "rgb(var(--color-info-dark) / <alpha-value>)",
|
|
317
|
+
contrast: "rgb(var(--color-info-contrast) / <alpha-value>)",
|
|
318
|
+
"shade-12": "var(--color-info-shade-12)",
|
|
319
|
+
"shade-16": "var(--color-info-shade-16)",
|
|
320
|
+
"state-contained": "var(--color-info-state-contained)",
|
|
321
|
+
"state-outlined": "var(--color-info-state-outlined)",
|
|
322
|
+
"state-resting": "var(--color-info-state-resting)",
|
|
323
|
+
"alert-bg": "var(--color-info-alert-bg)",
|
|
324
|
+
"alert-content": "var(--color-info-alert-content)"
|
|
325
|
+
},
|
|
326
|
+
// ── Existing misc tokens ────────────────────────────────────────────
|
|
327
|
+
border: "hsl(var(--color-border) / <alpha-value>)",
|
|
328
|
+
"border-strong": "hsl(var(--color-border-strong) / <alpha-value>)",
|
|
329
|
+
input: "hsl(var(--color-input) / <alpha-value>)",
|
|
330
|
+
ring: "hsl(var(--color-ring) / <alpha-value>)",
|
|
331
|
+
overlay: "hsl(var(--color-overlay) / <alpha-value>)",
|
|
332
|
+
// ── New: text sub-tokens ────────────────────────────────────────────
|
|
333
|
+
"fg-secondary": "var(--color-text-secondary)",
|
|
334
|
+
"fg-disabled": "var(--color-text-disabled)",
|
|
335
|
+
"fg-info": "rgb(var(--color-text-info) / <alpha-value>)",
|
|
336
|
+
"fg-fill": "rgb(var(--color-text-fill) / <alpha-value>)",
|
|
337
|
+
"fg-shade-12": "var(--color-text-shade-12)",
|
|
338
|
+
"fg-shade-16": "var(--color-text-shade-16)",
|
|
339
|
+
// ── New: surface ────────────────────────────────────────────────────
|
|
340
|
+
surface: {
|
|
341
|
+
DEFAULT: "rgb(var(--color-surface) / <alpha-value>)",
|
|
342
|
+
paper: "rgb(var(--color-surface-paper) / <alpha-value>)"
|
|
343
|
+
},
|
|
344
|
+
// ── New: divider / borders ──────────────────────────────────────────
|
|
345
|
+
divider: "var(--color-divider)",
|
|
346
|
+
"outlined-border": "var(--color-outlined-border)",
|
|
347
|
+
"input-line": "var(--color-input-line)",
|
|
348
|
+
// ── New: action tokens ──────────────────────────────────────────────
|
|
349
|
+
action: {
|
|
350
|
+
active: "var(--color-action-active)",
|
|
351
|
+
hover: "var(--color-action-hover)",
|
|
352
|
+
selected: "var(--color-action-selected)",
|
|
353
|
+
disabled: "var(--color-action-disabled)",
|
|
354
|
+
"disabled-bg": "var(--color-action-disabled-bg)",
|
|
355
|
+
focus: "var(--color-action-focus)"
|
|
356
|
+
},
|
|
357
|
+
// ── New: misc tokens ────────────────────────────────────────────────
|
|
358
|
+
backdrop: "var(--color-backdrop, rgba(0, 0, 0, 0.5))",
|
|
359
|
+
"rating-active": "rgb(var(--color-rating-active, 250 176 5) / <alpha-value>)",
|
|
360
|
+
"snackbar-bg": "rgb(var(--color-snackbar-bg) / <alpha-value>)",
|
|
361
|
+
// ── New: table tokens ───────────────────────────────────────────────
|
|
362
|
+
table: {
|
|
363
|
+
"top-header": "rgb(var(--color-table-top-header) / <alpha-value>)",
|
|
364
|
+
header: "rgb(var(--color-table-header) / <alpha-value>)",
|
|
365
|
+
row: "rgb(var(--color-table-row) / <alpha-value>)",
|
|
366
|
+
"col-border": "rgb(var(--color-table-col-border) / <alpha-value>)",
|
|
367
|
+
border: "var(--color-table-border)"
|
|
368
|
+
},
|
|
369
|
+
// ── General named colors (static rgba, no CSS var) ──────────────────
|
|
370
|
+
general: {
|
|
371
|
+
"yellow-golden": "rgba(255, 215, 0, 0.6)",
|
|
372
|
+
"yellow-pale": "rgba(255, 255, 153, 0.4)",
|
|
373
|
+
"yellow-amber": "rgba(255, 191, 0, 0.7)",
|
|
374
|
+
"yellow-sunshine": "rgba(255, 239, 0, 0.5)",
|
|
375
|
+
"yellow-light": "rgba(255, 255, 0, 0.5)",
|
|
376
|
+
"yellow-warm": "rgba(255, 204, 0, 0.8)",
|
|
377
|
+
"yellow-soft": "rgba(255, 229, 153, 0.7)",
|
|
378
|
+
"red-rose": "rgba(255, 51, 51, 0.5)",
|
|
379
|
+
"red-crimson": "rgba(220, 20, 60, 0.6)",
|
|
380
|
+
"red-light-coral": "rgba(240, 128, 128, 0.5)",
|
|
381
|
+
"red-fire-brick": "rgba(178, 34, 34, 0.8)",
|
|
382
|
+
"red-bright": "rgba(255, 0, 0, 0.7)",
|
|
383
|
+
"red-soft-coral": "rgba(255, 102, 102, 0.6)",
|
|
384
|
+
"red-dark": "rgba(204, 0, 0, 0.8)",
|
|
385
|
+
"blue-turquoise": "rgba(64, 224, 208, 0.6)",
|
|
386
|
+
"blue-dodger": "rgba(30, 144, 255, 0.5)",
|
|
387
|
+
"blue-navy": "rgba(0, 0, 128, 0.8)",
|
|
388
|
+
"blue-steel": "rgba(70, 130, 180, 0.7)",
|
|
389
|
+
"blue-sky": "rgba(0, 153, 255, 0.5)",
|
|
390
|
+
"blue-light": "rgba(51, 204, 255, 0.7)",
|
|
391
|
+
"blue-deep": "rgba(0, 51, 204, 0.8)",
|
|
392
|
+
"green-lime": "rgba(50, 205, 50, 0.5)",
|
|
393
|
+
"green-pale": "rgba(152, 251, 152, 0.4)",
|
|
394
|
+
"green-forest": "rgba(34, 139, 34, 0.7)",
|
|
395
|
+
"green-olive": "rgba(128, 128, 0, 0.6)",
|
|
396
|
+
"green-fresh": "rgba(0, 204, 0, 0.6)",
|
|
397
|
+
"green-soft-mint": "rgba(102, 255, 153, 0.7)",
|
|
398
|
+
"green-dark": "rgba(0, 153, 76, 0.8)",
|
|
399
|
+
"orange-tangerine": "rgba(255, 140, 0, 0.6)",
|
|
400
|
+
"orange-apricot": "rgba(251, 206, 177, 0.5)",
|
|
401
|
+
"orange-burnt": "rgba(204, 85, 0, 0.7)",
|
|
402
|
+
"orange-carrot": "rgba(237, 145, 33, 0.6)",
|
|
403
|
+
"orange-bright": "rgba(255, 102, 0, 0.7)",
|
|
404
|
+
"orange-soft-peach": "rgba(255, 178, 102, 0.6)",
|
|
405
|
+
"orange-deep": "rgba(204, 85, 0, 0.8)"
|
|
406
|
+
},
|
|
407
|
+
// ── Material palette scales (static hex, no CSS var) ─────────────────
|
|
408
|
+
palette: {
|
|
409
|
+
yellow: { "50": "#fffde7", "100": "#fff9c4", "200": "#fff59d", "300": "#fff176", "400": "#ffee58", "500": "#ffeb3b", "600": "#fdd835", "700": "#fbc02d", "800": "#f9a825", "900": "#f57f17", A100: "#ffff8d", A200: "#ffff00", A400: "#ffea00", A700: "#ffd600" },
|
|
410
|
+
amber: { "50": "#fff8e1", "100": "#ffecb3", "200": "#ffe082", "300": "#ffd54f", "400": "#ffca28", "500": "#ffc107", "600": "#ffb300", "700": "#ffa000", "800": "#ff8f00", "900": "#ff6f00", A100: "#ffe57f", A200: "#ffd740", A400: "#ffc400", A700: "#ffab00" },
|
|
411
|
+
blue: { "50": "#e3f2fd", "100": "#bbdefb", "200": "#90caf9", "300": "#64b5f6", "400": "#42a5f5", "500": "#2196f3", "600": "#1e88e5", "700": "#1976d2", "800": "#1565c0", "900": "#0d47a1", A100: "#82b1ff", A200: "#448aff", A400: "#2979ff", A700: "#2962ff" },
|
|
412
|
+
"blue-grey": { "50": "#eceff1", "100": "#cfd8dc", "200": "#b0bec5", "300": "#90a4ae", "400": "#78909c", "500": "#607d8b", "600": "#546e7a", "700": "#455a64", "800": "#37474f", "900": "#263238", A100: "#cfd8dc", A200: "#b0bec5", A400: "#78909c", A700: "#455a64" },
|
|
413
|
+
brown: { "50": "#efebe9", "100": "#d7ccc8", "200": "#bcaaa4", "300": "#a1887f", "400": "#8d6e63", "500": "#795548", "600": "#6d4c41", "700": "#5d4037", "800": "#4e342e", "900": "#3e2723", A100: "#d7ccc8", A200: "#bcaaa4", A400: "#8d6e63", A700: "#5d4037" },
|
|
414
|
+
teal: { "50": "#e0f2f1", "100": "#b2dfdb", "200": "#80cbc4", "300": "#4db6ac", "400": "#26a69a", "500": "#009688", "600": "#00897b", "700": "#00796b", "800": "#00695c", "900": "#004d40", A100: "#a7ffeb", A200: "#64ffda", A400: "#1de9b6", A700: "#00bfa5" },
|
|
415
|
+
red: { "50": "#ffebee", "100": "#ffcdd2", "200": "#ef9a9a", "300": "#e57373", "400": "#ef5350", "500": "#f44336", "600": "#e53935", "700": "#d32f2f", "800": "#c62828", "900": "#b71c1c", A100: "#ff8a80", A200: "#ff5252", A400: "#ff1744", A700: "#d50000" },
|
|
416
|
+
purple: { "50": "#f3e5f5", "100": "#e1bee7", "200": "#ce93d8", "300": "#ba68c8", "400": "#ab47bc", "500": "#9c27b0", "600": "#8e24aa", "700": "#7b1fa2", "800": "#6a1b9a", "900": "#4a148c", A100: "#ea80fc", A200: "#e040fb", A400: "#d500f9", A700: "#aa00ff" },
|
|
417
|
+
pink: { "50": "#fce4ec", "100": "#f8bbd0", "200": "#f48fb1", "300": "#f06292", "400": "#ec407a", "500": "#e91e63", "600": "#d81b60", "700": "#c2185b", "800": "#ad1457", "900": "#880e4f", A100: "#ff80ab", A200: "#ff4081", A400: "#f50057", A700: "#c51162" },
|
|
418
|
+
orange: { "50": "#fff3e0", "100": "#ffe0b2", "200": "#ffcc80", "300": "#ffb74d", "400": "#ffa726", "500": "#ff9800", "600": "#fb8c00", "700": "#f57c00", "800": "#ef6c00", "900": "#e65100", A100: "#ffd180", A200: "#ffab40", A400: "#ff9100", A700: "#ff6d00" },
|
|
419
|
+
lime: { "50": "#f9fbe7", "100": "#f0f4c3", "200": "#e6ee9c", "300": "#dce775", "400": "#d4e157", "500": "#cddc39", "600": "#c0ca33", "700": "#afb42b", "800": "#9e9d24", "900": "#827717", A100: "#f4ff81", A200: "#eeff41", A400: "#c6ff00", A700: "#aeea00" },
|
|
420
|
+
"light-green": { "50": "#f1f8e9", "100": "#dcedc8", "200": "#c5e1a5", "300": "#aed581", "400": "#9ccc65", "500": "#8bc34a", "600": "#7cb342", "700": "#689f38", "800": "#558b2f", "900": "#33691e", A100: "#ccff90", A200: "#b2ff59", A400: "#76ff03", A700: "#64dd17" },
|
|
421
|
+
cyan: { "50": "#e0f7fa", "100": "#b2ebf2", "200": "#80deea", "300": "#4dd0e1", "400": "#26c6da", "500": "#00bcd4", "600": "#00acc1", "700": "#0097a7", "800": "#00838f", "900": "#006064", A100: "#84ffff", A200: "#18ffff", A400: "#00e5ff", A700: "#00b8d4" },
|
|
422
|
+
"deep-orange": { "50": "#fbe9e7", "100": "#ffccbc", "200": "#ffab91", "300": "#ff8a65", "400": "#ff7043", "500": "#ff5722", "600": "#f4511e", "700": "#e64a19", "800": "#d84315", "900": "#bf360c", A100: "#ff9e80", A200: "#ff6e40", A400: "#ff3d00", A700: "#dd2c00" },
|
|
423
|
+
"deep-purple": { "50": "#ede7f6", "100": "#d1c4e9", "200": "#b39ddb", "300": "#9575cd", "400": "#7e57c2", "500": "#673ab7", "600": "#5e35b1", "700": "#512da8", "800": "#4527a0", "900": "#311b92", A100: "#b388ff", A200: "#7c4dff", A400: "#651fff", A700: "#6200ea" },
|
|
424
|
+
green: { "50": "#e8f5e9", "100": "#c8e6c9", "200": "#a5d6a7", "300": "#81c784", "400": "#66bb6a", "500": "#4caf50", "600": "#43a047", "700": "#388e3c", "800": "#2e7d32", "900": "#1b5e20", A100: "#b9f6ca", A200: "#69f0ae", A400: "#00e676", A700: "#00c853" },
|
|
425
|
+
grey: { "50": "#fafafa", "100": "#f5f5f5", "200": "#eeeeee", "300": "#e0e0e0", "400": "#bdbdbd", "500": "#9e9e9e", "600": "#757575", "700": "#616161", "800": "#424242", "900": "#212121", A100: "#f5f5f5", A200: "#eeeeee", A400: "#bdbdbd", A700: "#616161" },
|
|
426
|
+
indigo: { "50": "#e8eaf6", "100": "#c5cae9", "200": "#9fa8da", "300": "#7986cb", "400": "#5c6bc0", "500": "#3f51b5", "600": "#3949ab", "700": "#303f9f", "800": "#283593", "900": "#1a237e", A100: "#8c9eff", A200: "#536dfe", A400: "#3d5afe", A700: "#304ffe" },
|
|
427
|
+
"light-blue": { "50": "#e1f5fe", "100": "#b3e5fc", "200": "#81d4fa", "300": "#4fc3f7", "400": "#29b6f6", "500": "#03a9f4", "600": "#039be5", "700": "#0288d1", "800": "#0277bd", "900": "#01579b", A100: "#80d8ff", A200: "#40c4ff", A400: "#00b0ff", A700: "#0091ea" }
|
|
428
|
+
}
|
|
429
|
+
},
|
|
430
|
+
borderRadius: {
|
|
431
|
+
"2xl": "calc(var(--radius, 0.5rem) + 8px)",
|
|
432
|
+
xl: "calc(var(--radius, 0.5rem) + 4px)",
|
|
433
|
+
lg: "var(--radius, 0.5rem)",
|
|
434
|
+
md: "calc(var(--radius, 0.5rem) - 2px)",
|
|
435
|
+
sm: "calc(var(--radius, 0.5rem) - 4px)",
|
|
436
|
+
xs: "calc(var(--radius, 0.5rem) - 6px)"
|
|
437
|
+
},
|
|
438
|
+
boxShadow: {
|
|
439
|
+
xs: "var(--shadow-xs, 0 1px 2px 0 hsl(var(--color-shadow) / 0.04))",
|
|
440
|
+
sm: "var(--shadow-sm, 0 1px 2px 0 hsl(var(--color-shadow) / 0.05), 0 1px 3px 0 hsl(var(--color-shadow) / 0.06))",
|
|
441
|
+
DEFAULT: "var(--shadow, 0 1px 2px 0 hsl(var(--color-shadow) / 0.06), 0 4px 8px -2px hsl(var(--color-shadow) / 0.08))",
|
|
442
|
+
md: "var(--shadow-md, 0 4px 8px -1px hsl(var(--color-shadow) / 0.08), 0 2px 4px -2px hsl(var(--color-shadow) / 0.08))",
|
|
443
|
+
lg: "var(--shadow-lg, 0 10px 24px -3px hsl(var(--color-shadow) / 0.12), 0 4px 8px -4px hsl(var(--color-shadow) / 0.10))",
|
|
444
|
+
xl: "var(--shadow-xl, 0 20px 32px -5px hsl(var(--color-shadow) / 0.14), 0 8px 16px -6px hsl(var(--color-shadow) / 0.12))",
|
|
445
|
+
"2xl": "var(--shadow-2xl, 0 32px 64px -12px hsl(var(--color-shadow) / 0.22))",
|
|
446
|
+
inner: "var(--shadow-inner, inset 0 2px 4px 0 hsl(var(--color-shadow) / 0.05))",
|
|
447
|
+
button: "0 0.5px 1px 0 hsl(var(--color-shadow) / 0.10), 0 1px 2px 0 hsl(var(--color-shadow) / 0.08), inset 0 1px 0 0 hsl(0 0% 100% / 0.10)",
|
|
448
|
+
"button-active": "inset 0 1px 2px 0 hsl(var(--color-shadow) / 0.12)",
|
|
449
|
+
overlay: "0 10px 38px -10px hsl(var(--color-shadow) / 0.35), 0 10px 20px -15px hsl(var(--color-shadow) / 0.20)",
|
|
450
|
+
ring: "0 0 0 2px hsl(var(--color-bg)), 0 0 0 4px hsl(var(--color-ring) / 0.45)"
|
|
451
|
+
},
|
|
452
|
+
transitionTimingFunction: {
|
|
453
|
+
"ease-out-quint": "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
454
|
+
"ease-out-back": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
455
|
+
"ease-in-out-quad": "cubic-bezier(0.45, 0, 0.55, 1)",
|
|
456
|
+
spring: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
457
|
+
smooth: "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
458
|
+
},
|
|
459
|
+
transitionDuration: {
|
|
460
|
+
instant: "50ms",
|
|
461
|
+
snappy: "120ms",
|
|
462
|
+
smooth: "180ms",
|
|
463
|
+
comfortable: "240ms",
|
|
464
|
+
relaxed: "320ms"
|
|
465
|
+
},
|
|
466
|
+
backdropBlur: {
|
|
467
|
+
xs: "2px",
|
|
468
|
+
glass: "10px"
|
|
469
|
+
},
|
|
470
|
+
fontFamily: {
|
|
471
|
+
sans: ["var(--font-sans, -apple-system)", "BlinkMacSystemFont", "ui-sans-serif", "system-ui", "Segoe UI", "Roboto", "sans-serif"],
|
|
472
|
+
mono: ["var(--font-mono, ui-monospace)", "SFMono-Regular", "Menlo", "Consolas", "monospace"]
|
|
473
|
+
},
|
|
474
|
+
keyframes: {
|
|
475
|
+
"fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
|
|
476
|
+
"fade-out": { from: { opacity: "1" }, to: { opacity: "0" } },
|
|
477
|
+
"zoom-in": { from: { opacity: "0", transform: "scale(0.96)" }, to: { opacity: "1", transform: "scale(1)" } },
|
|
478
|
+
"zoom-out": { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.96)" } },
|
|
479
|
+
"slide-in-from-top": { from: { transform: "translateY(-12px)", opacity: "0" }, to: { transform: "translateY(0)", opacity: "1" } },
|
|
480
|
+
"slide-out-to-top": { from: { transform: "translateY(0)", opacity: "1" }, to: { transform: "translateY(-12px)", opacity: "0" } },
|
|
481
|
+
"slide-in-from-bottom": { from: { transform: "translateY(12px)", opacity: "0" }, to: { transform: "translateY(0)", opacity: "1" } },
|
|
482
|
+
"slide-out-to-bottom": { from: { transform: "translateY(0)", opacity: "1" }, to: { transform: "translateY(12px)", opacity: "0" } },
|
|
483
|
+
"slide-in-from-left": { from: { transform: "translateX(-12px)", opacity: "0" }, to: { transform: "translateX(0)", opacity: "1" } },
|
|
484
|
+
"slide-out-to-left": { from: { transform: "translateX(0)", opacity: "1" }, to: { transform: "translateX(-12px)", opacity: "0" } },
|
|
485
|
+
"slide-in-from-right": { from: { transform: "translateX(12px)", opacity: "0" }, to: { transform: "translateX(0)", opacity: "1" } },
|
|
486
|
+
"slide-out-to-right": { from: { transform: "translateX(0)", opacity: "1" }, to: { transform: "translateX(12px)", opacity: "0" } },
|
|
487
|
+
"sheet-in-from-top": { from: { transform: "translateY(-100%)" }, to: { transform: "translateY(0)" } },
|
|
488
|
+
"sheet-out-to-top": { from: { transform: "translateY(0)" }, to: { transform: "translateY(-100%)" } },
|
|
489
|
+
"sheet-in-from-bottom": { from: { transform: "translateY(100%)" }, to: { transform: "translateY(0)" } },
|
|
490
|
+
"sheet-out-to-bottom": { from: { transform: "translateY(0)" }, to: { transform: "translateY(100%)" } },
|
|
491
|
+
"sheet-in-from-left": { from: { transform: "translateX(-100%)" }, to: { transform: "translateX(0)" } },
|
|
492
|
+
"sheet-out-to-left": { from: { transform: "translateX(0)" }, to: { transform: "translateX(-100%)" } },
|
|
493
|
+
"sheet-in-from-right": { from: { transform: "translateX(100%)" }, to: { transform: "translateX(0)" } },
|
|
494
|
+
"sheet-out-to-right": { from: { transform: "translateX(0)" }, to: { transform: "translateX(100%)" } },
|
|
495
|
+
"collapsible-down": { from: { height: "0", opacity: "0" }, to: { height: "var(--structyl-collapsible-content-height)", opacity: "1" } },
|
|
496
|
+
"collapsible-up": { from: { height: "var(--structyl-collapsible-content-height)", opacity: "1" }, to: { height: "0", opacity: "0" } },
|
|
497
|
+
"progress-indeterminate": { "0%": { transform: "translateX(-100%)" }, "100%": { transform: "translateX(200%)" } },
|
|
498
|
+
"skeleton-pulse": { "0%, 100%": { opacity: "0.5" }, "50%": { opacity: "0.8" } },
|
|
499
|
+
"spring-press": { "0%": { transform: "scale(1)" }, "50%": { transform: "scale(0.97)" }, "100%": { transform: "scale(1)" } },
|
|
500
|
+
"toast-in": { from: { transform: "translateY(calc(100% + 1rem))", opacity: "0" }, to: { transform: "translateY(0)", opacity: "1" } },
|
|
501
|
+
"toast-out": { from: { transform: "translateX(0)", opacity: "1" }, to: { transform: "translateX(calc(100% + 1rem))", opacity: "0" } },
|
|
502
|
+
shimmer: { "0%": { transform: "translateX(-100%)" }, "100%": { transform: "translateX(100%)" } },
|
|
503
|
+
"progress-stripes": { "0%": { backgroundPosition: "1rem 0" }, "100%": { backgroundPosition: "0 0" } },
|
|
504
|
+
bars: { "0%": { transform: "scaleY(0.4)" }, "100%": { transform: "scaleY(1.0)" } }
|
|
505
|
+
},
|
|
506
|
+
animation: {
|
|
507
|
+
"fade-in": "fade-in 180ms cubic-bezier(0.22, 1, 0.36, 1)",
|
|
508
|
+
"fade-out": "fade-out 120ms cubic-bezier(0.4, 0, 1, 1)",
|
|
509
|
+
"zoom-in": "zoom-in 200ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
510
|
+
"zoom-out": "zoom-out 120ms cubic-bezier(0.4, 0, 1, 1)",
|
|
511
|
+
"collapsible-down": "collapsible-down 220ms cubic-bezier(0.22, 1, 0.36, 1)",
|
|
512
|
+
"collapsible-up": "collapsible-up 180ms cubic-bezier(0.4, 0, 0.2, 1)",
|
|
513
|
+
"progress-indeterminate": "progress-indeterminate 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
514
|
+
"progress-stripes": "progress-stripes 1s linear infinite",
|
|
515
|
+
"skeleton-pulse": "skeleton-pulse 1.5s ease-in-out infinite",
|
|
516
|
+
"spring-press": "spring-press 180ms cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
517
|
+
"toast-in": "toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
518
|
+
"toast-out": "toast-out 180ms cubic-bezier(0.4, 0, 1, 1)",
|
|
519
|
+
shimmer: "shimmer 1.5s ease-in-out infinite",
|
|
520
|
+
bars: "bars 1s ease-in-out infinite alternate"
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
},
|
|
524
|
+
plugins: [
|
|
525
|
+
animate,
|
|
526
|
+
twPlugin(({
|
|
527
|
+
addBase,
|
|
528
|
+
addUtilities
|
|
529
|
+
}) => {
|
|
530
|
+
addBase({
|
|
531
|
+
":root": {
|
|
532
|
+
// Headings
|
|
533
|
+
"--typography-h1-size": "3.5rem",
|
|
534
|
+
"--typography-h1-weight": "800",
|
|
535
|
+
"--typography-h1-line-height": "1.2",
|
|
536
|
+
"--typography-h1-letter-spacing": "-0.02em",
|
|
537
|
+
"--typography-h2-size": "2.75rem",
|
|
538
|
+
"--typography-h2-weight": "800",
|
|
539
|
+
"--typography-h2-line-height": "1.25",
|
|
540
|
+
"--typography-h2-letter-spacing": "-0.01em",
|
|
541
|
+
"--typography-h3-size": "2rem",
|
|
542
|
+
"--typography-h3-weight": "700",
|
|
543
|
+
"--typography-h3-line-height": "1.3",
|
|
544
|
+
"--typography-h4-size": "1.5rem",
|
|
545
|
+
"--typography-h4-weight": "700",
|
|
546
|
+
"--typography-h4-line-height": "1.35",
|
|
547
|
+
"--typography-h5-size": "1.25rem",
|
|
548
|
+
"--typography-h5-weight": "600",
|
|
549
|
+
"--typography-h5-line-height": "1.4",
|
|
550
|
+
"--typography-h6-size": "1rem",
|
|
551
|
+
"--typography-h6-weight": "600",
|
|
552
|
+
"--typography-h6-line-height": "1.5",
|
|
553
|
+
"--typography-h6-letter-spacing": "0.0075em",
|
|
554
|
+
// Subtitles
|
|
555
|
+
"--typography-subtitle1-size": "1rem",
|
|
556
|
+
"--typography-subtitle1-weight": "500",
|
|
557
|
+
"--typography-subtitle1-line-height": "1.75",
|
|
558
|
+
"--typography-subtitle1-letter-spacing": "0.009em",
|
|
559
|
+
"--typography-subtitle2-size": "0.875rem",
|
|
560
|
+
"--typography-subtitle2-weight": "500",
|
|
561
|
+
"--typography-subtitle2-line-height": "1.57",
|
|
562
|
+
"--typography-subtitle2-letter-spacing": "0.006em",
|
|
563
|
+
// Body
|
|
564
|
+
"--typography-body1-size": "1rem",
|
|
565
|
+
"--typography-body1-weight": "400",
|
|
566
|
+
"--typography-body1-line-height": "1.75",
|
|
567
|
+
"--typography-body2-size": "0.875rem",
|
|
568
|
+
"--typography-body2-weight": "400",
|
|
569
|
+
"--typography-body2-line-height": "1.43",
|
|
570
|
+
"--typography-body-bold-1-size": "1rem",
|
|
571
|
+
"--typography-body-bold-1-weight": "600",
|
|
572
|
+
"--typography-body-bold-1-line-height": "1.75",
|
|
573
|
+
"--typography-body-bold-2-size": "0.875rem",
|
|
574
|
+
"--typography-body-bold-2-weight": "600",
|
|
575
|
+
"--typography-body-bold-2-line-height": "1.43",
|
|
576
|
+
// Small scale
|
|
577
|
+
"--typography-caption-size": "0.75rem",
|
|
578
|
+
"--typography-caption-weight": "400",
|
|
579
|
+
"--typography-caption-line-height": "1.66",
|
|
580
|
+
"--typography-caption-letter-spacing": "0.033em",
|
|
581
|
+
"--typography-overline-size": "0.75rem",
|
|
582
|
+
"--typography-overline-weight": "400",
|
|
583
|
+
"--typography-overline-line-height": "2.66",
|
|
584
|
+
"--typography-overline-letter-spacing": "0.083em",
|
|
585
|
+
// Buttons
|
|
586
|
+
"--typography-button-lg-size": "0.9375rem",
|
|
587
|
+
"--typography-button-lg-weight": "500",
|
|
588
|
+
"--typography-button-lg-line-height": "1.73",
|
|
589
|
+
"--typography-button-lg-letter-spacing": "0.046em",
|
|
590
|
+
"--typography-button-md-size": "0.875rem",
|
|
591
|
+
"--typography-button-md-weight": "500",
|
|
592
|
+
"--typography-button-md-line-height": "1.71",
|
|
593
|
+
"--typography-button-md-letter-spacing": "0.046em",
|
|
594
|
+
"--typography-button-sm-size": "0.8125rem",
|
|
595
|
+
"--typography-button-sm-weight": "500",
|
|
596
|
+
"--typography-button-sm-line-height": "1.69",
|
|
597
|
+
"--typography-button-sm-letter-spacing": "0.046em",
|
|
598
|
+
// Form / UI chrome
|
|
599
|
+
"--typography-input-label-size": "0.75rem",
|
|
600
|
+
"--typography-input-label-weight": "400",
|
|
601
|
+
"--typography-input-label-line-height": "1.5",
|
|
602
|
+
"--typography-input-label-letter-spacing": "0.009em",
|
|
603
|
+
"--typography-helper-text-size": "0.75rem",
|
|
604
|
+
"--typography-helper-text-weight": "400",
|
|
605
|
+
"--typography-helper-text-line-height": "1.66",
|
|
606
|
+
"--typography-helper-text-letter-spacing": "0.033em",
|
|
607
|
+
"--typography-chip-size": "0.8125rem",
|
|
608
|
+
"--typography-chip-weight": "400",
|
|
609
|
+
"--typography-chip-line-height": "1.38",
|
|
610
|
+
"--typography-chip-letter-spacing": "0.016em",
|
|
611
|
+
"--typography-tooltip-size": "0.625rem",
|
|
612
|
+
"--typography-tooltip-weight": "500",
|
|
613
|
+
"--typography-tooltip-line-height": "1.4",
|
|
614
|
+
"--typography-alert-title-size": "1rem",
|
|
615
|
+
"--typography-alert-title-weight": "600",
|
|
616
|
+
"--typography-alert-title-line-height": "1.5",
|
|
617
|
+
"--typography-alert-title-letter-spacing": "0.009em",
|
|
618
|
+
"--typography-table-header-size": "0.875rem",
|
|
619
|
+
"--typography-table-header-weight": "500",
|
|
620
|
+
"--typography-table-header-line-height": "1.71",
|
|
621
|
+
"--typography-table-header-letter-spacing": "0.017em",
|
|
622
|
+
"--typography-badge-label-size": "0.75rem",
|
|
623
|
+
"--typography-badge-label-weight": "500",
|
|
624
|
+
"--typography-badge-label-line-height": "1.66",
|
|
625
|
+
"--typography-badge-label-letter-spacing": "0.014em"
|
|
626
|
+
}
|
|
627
|
+
});
|
|
628
|
+
addBase({
|
|
629
|
+
":root": {
|
|
630
|
+
"--color-primary-foreground": "var(--color-primary-fg)",
|
|
631
|
+
"--color-secondary-foreground": "var(--color-secondary-fg)",
|
|
632
|
+
"--color-destructive-foreground": "var(--color-destructive-fg)",
|
|
633
|
+
"--color-success-foreground": "var(--color-success-fg)",
|
|
634
|
+
"--color-warning-foreground": "var(--color-warning-fg)",
|
|
635
|
+
"--color-info-foreground": "var(--color-info-fg)",
|
|
636
|
+
"--color-muted-foreground": "var(--color-muted-fg)",
|
|
637
|
+
"--color-accent-foreground": "var(--color-accent-fg)",
|
|
638
|
+
"--color-card-foreground": "var(--color-card-fg)",
|
|
639
|
+
"--color-popover-foreground": "var(--color-popover-fg)"
|
|
640
|
+
}
|
|
641
|
+
});
|
|
642
|
+
addUtilities({
|
|
643
|
+
".text-variant-h1": { fontSize: "var(--typography-h1-size)", fontWeight: "var(--typography-h1-weight)", lineHeight: "var(--typography-h1-line-height)", letterSpacing: "var(--typography-h1-letter-spacing)" },
|
|
644
|
+
".text-variant-h2": { fontSize: "var(--typography-h2-size)", fontWeight: "var(--typography-h2-weight)", lineHeight: "var(--typography-h2-line-height)", letterSpacing: "var(--typography-h2-letter-spacing)" },
|
|
645
|
+
".text-variant-h3": { fontSize: "var(--typography-h3-size)", fontWeight: "var(--typography-h3-weight)", lineHeight: "var(--typography-h3-line-height)" },
|
|
646
|
+
".text-variant-h4": { fontSize: "var(--typography-h4-size)", fontWeight: "var(--typography-h4-weight)", lineHeight: "var(--typography-h4-line-height)" },
|
|
647
|
+
".text-variant-h5": { fontSize: "var(--typography-h5-size)", fontWeight: "var(--typography-h5-weight)", lineHeight: "var(--typography-h5-line-height)" },
|
|
648
|
+
".text-variant-h6": { fontSize: "var(--typography-h6-size)", fontWeight: "var(--typography-h6-weight)", lineHeight: "var(--typography-h6-line-height)", letterSpacing: "var(--typography-h6-letter-spacing)" },
|
|
649
|
+
".text-variant-subtitle1": { fontSize: "var(--typography-subtitle1-size)", fontWeight: "var(--typography-subtitle1-weight)", lineHeight: "var(--typography-subtitle1-line-height)", letterSpacing: "var(--typography-subtitle1-letter-spacing)" },
|
|
650
|
+
".text-variant-subtitle2": { fontSize: "var(--typography-subtitle2-size)", fontWeight: "var(--typography-subtitle2-weight)", lineHeight: "var(--typography-subtitle2-line-height)", letterSpacing: "var(--typography-subtitle2-letter-spacing)" },
|
|
651
|
+
".text-variant-body1": { fontSize: "var(--typography-body1-size)", fontWeight: "var(--typography-body1-weight)", lineHeight: "var(--typography-body1-line-height)" },
|
|
652
|
+
".text-variant-body2": { fontSize: "var(--typography-body2-size)", fontWeight: "var(--typography-body2-weight)", lineHeight: "var(--typography-body2-line-height)" },
|
|
653
|
+
".text-variant-body-bold-1": { fontSize: "var(--typography-body-bold-1-size)", fontWeight: "var(--typography-body-bold-1-weight)", lineHeight: "var(--typography-body-bold-1-line-height)" },
|
|
654
|
+
".text-variant-body-bold-2": { fontSize: "var(--typography-body-bold-2-size)", fontWeight: "var(--typography-body-bold-2-weight)", lineHeight: "var(--typography-body-bold-2-line-height)" },
|
|
655
|
+
".text-variant-caption": { fontSize: "var(--typography-caption-size)", fontWeight: "var(--typography-caption-weight)", lineHeight: "var(--typography-caption-line-height)", letterSpacing: "var(--typography-caption-letter-spacing)" },
|
|
656
|
+
".text-variant-overline": { fontSize: "var(--typography-overline-size)", fontWeight: "var(--typography-overline-weight)", lineHeight: "var(--typography-overline-line-height)", letterSpacing: "var(--typography-overline-letter-spacing)", textTransform: "uppercase" },
|
|
657
|
+
".text-variant-button-lg": { fontSize: "var(--typography-button-lg-size)", fontWeight: "var(--typography-button-lg-weight)", lineHeight: "var(--typography-button-lg-line-height)", letterSpacing: "var(--typography-button-lg-letter-spacing)" },
|
|
658
|
+
".text-variant-button-md": { fontSize: "var(--typography-button-md-size)", fontWeight: "var(--typography-button-md-weight)", lineHeight: "var(--typography-button-md-line-height)", letterSpacing: "var(--typography-button-md-letter-spacing)" },
|
|
659
|
+
".text-variant-button-sm": { fontSize: "var(--typography-button-sm-size)", fontWeight: "var(--typography-button-sm-weight)", lineHeight: "var(--typography-button-sm-line-height)", letterSpacing: "var(--typography-button-sm-letter-spacing)" },
|
|
660
|
+
".text-variant-input-label": { fontSize: "var(--typography-input-label-size)", fontWeight: "var(--typography-input-label-weight)", lineHeight: "var(--typography-input-label-line-height)", letterSpacing: "var(--typography-input-label-letter-spacing)" },
|
|
661
|
+
".text-variant-helper-text": { fontSize: "var(--typography-helper-text-size)", fontWeight: "var(--typography-helper-text-weight)", lineHeight: "var(--typography-helper-text-line-height)", letterSpacing: "var(--typography-helper-text-letter-spacing)" },
|
|
662
|
+
".text-variant-chip": { fontSize: "var(--typography-chip-size)", fontWeight: "var(--typography-chip-weight)", lineHeight: "var(--typography-chip-line-height)", letterSpacing: "var(--typography-chip-letter-spacing)" },
|
|
663
|
+
".text-variant-tooltip": { fontSize: "var(--typography-tooltip-size)", fontWeight: "var(--typography-tooltip-weight)", lineHeight: "var(--typography-tooltip-line-height)" },
|
|
664
|
+
".text-variant-alert-title": { fontSize: "var(--typography-alert-title-size)", fontWeight: "var(--typography-alert-title-weight)", lineHeight: "var(--typography-alert-title-line-height)", letterSpacing: "var(--typography-alert-title-letter-spacing)" },
|
|
665
|
+
".text-variant-table-header": { fontSize: "var(--typography-table-header-size)", fontWeight: "var(--typography-table-header-weight)", lineHeight: "var(--typography-table-header-line-height)", letterSpacing: "var(--typography-table-header-letter-spacing)" },
|
|
666
|
+
".text-variant-badge-label": { fontSize: "var(--typography-badge-label-size)", fontWeight: "var(--typography-badge-label-weight)", lineHeight: "var(--typography-badge-label-line-height)", letterSpacing: "var(--typography-badge-label-letter-spacing)" }
|
|
667
|
+
});
|
|
668
|
+
})
|
|
669
|
+
]
|
|
670
|
+
};
|
|
671
|
+
var tailwind_preset_default = preset;
|
|
672
|
+
|
|
673
|
+
export { tailwind_preset_default as default };
|
|
674
|
+
//# sourceMappingURL=tailwind-preset.mjs.map
|
|
675
|
+
//# sourceMappingURL=tailwind-preset.mjs.map
|