@xex/tailwind-preset 0.1.0 → 0.2.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/index.js +35 -4
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -8,19 +8,50 @@
|
|
|
8
8
|
* content: ['./index.html', './src/**\/*.{ts,tsx}', './node_modules/@xex/ui/dist/**\/*.js'],
|
|
9
9
|
* }
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
11
|
+
* Every colour below is a CSS variable defined in @xex/tokens/styles.css (light values, with dark
|
|
12
|
+
* values under html[data-mode="dark"]). That is what makes theming and dark mode work without a
|
|
13
|
+
* rebuild and without per-class overrides:
|
|
14
|
+
*
|
|
15
|
+
* brand-50…900 the active theme's scale, written onto <html> by <ThemeProvider>
|
|
16
|
+
* gray-50…900 remapped, so gray-* utilities flip automatically in dark mode
|
|
17
|
+
* canvas page background surface cards, panels, inputs
|
|
18
|
+
* accent brand-coloured text accent-strong, accent-soft, accent-softer, accent-line
|
|
19
|
+
* danger | success | warning | info | purple
|
|
20
|
+
* status tones: DEFAULT (solid), -soft (tinted bg), -line (border), -ink (text)
|
|
13
21
|
*/
|
|
14
22
|
const steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
|
|
15
23
|
|
|
16
|
-
const
|
|
24
|
+
const scale = (name) => Object.fromEntries(steps.map((s) => [s, `var(--${name}-${s})`]))
|
|
25
|
+
const tone = (name) => ({
|
|
26
|
+
DEFAULT: `var(--${name})`,
|
|
27
|
+
soft: `var(--${name}-soft)`,
|
|
28
|
+
line: `var(--${name}-line)`,
|
|
29
|
+
ink: `var(--${name}-ink)`,
|
|
30
|
+
})
|
|
17
31
|
|
|
18
32
|
/** @type {Partial<import('tailwindcss').Config>} */
|
|
19
33
|
const preset = {
|
|
20
34
|
darkMode: ['class', '[data-mode="dark"]'],
|
|
21
35
|
theme: {
|
|
22
36
|
extend: {
|
|
23
|
-
colors: {
|
|
37
|
+
colors: {
|
|
38
|
+
brand: scale('brand'),
|
|
39
|
+
gray: scale('gray'),
|
|
40
|
+
canvas: 'var(--canvas)',
|
|
41
|
+
surface: 'var(--surface)',
|
|
42
|
+
accent: {
|
|
43
|
+
DEFAULT: 'var(--accent)',
|
|
44
|
+
strong: 'var(--accent-strong)',
|
|
45
|
+
soft: 'var(--accent-soft)',
|
|
46
|
+
softer: 'var(--accent-softer)',
|
|
47
|
+
line: 'var(--accent-line)',
|
|
48
|
+
},
|
|
49
|
+
danger: tone('danger'),
|
|
50
|
+
success: tone('success'),
|
|
51
|
+
warning: tone('warning'),
|
|
52
|
+
info: tone('info'),
|
|
53
|
+
purple: tone('purple'),
|
|
54
|
+
},
|
|
24
55
|
fontFamily: {
|
|
25
56
|
// --font-sans is set at runtime by <ThemeProvider> (the user's chosen font).
|
|
26
57
|
sans: ['var(--font-sans)', 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
|