@umami/react-zen 0.233.0 → 0.235.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +141 -76
- package/dist/index.d.ts +141 -76
- package/dist/index.js +88 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +35 -36
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +13 -31
- package/styles.full.css +1 -1
- package/tailwind.preset.ts +5 -45
package/tailwind.preset.ts
CHANGED
|
@@ -19,40 +19,6 @@ import plugin from 'tailwindcss/plugin';
|
|
|
19
19
|
*/
|
|
20
20
|
const preset: Config = {
|
|
21
21
|
darkMode: ['selector', '[data-theme="dark"], .dark'],
|
|
22
|
-
// Safelist hover/focus/active variants of colors
|
|
23
|
-
// These are dynamically composed in mapStateStyles and need to be explicitly included
|
|
24
|
-
safelist: [
|
|
25
|
-
// Semantic surface backgrounds
|
|
26
|
-
{ pattern: /^(hover|focus|active):bg-surface-(base|raised|sunken|overlay|inverted|disabled)$/ },
|
|
27
|
-
// Semantic interactive backgrounds
|
|
28
|
-
{ pattern: /^(hover|focus|active):bg-interactive(-hover|-pressed|-selected)?$/ },
|
|
29
|
-
// Semantic text colors
|
|
30
|
-
{
|
|
31
|
-
pattern: /^(hover|focus|active):text-foreground-(primary|secondary|muted|disabled|inverted)$/,
|
|
32
|
-
},
|
|
33
|
-
// Semantic border colors
|
|
34
|
-
{ pattern: /^(hover|focus|active):border-edge(-muted|-strong|-inverted)?$/ },
|
|
35
|
-
// Opacity
|
|
36
|
-
{
|
|
37
|
-
pattern:
|
|
38
|
-
/^(hover|focus|active):opacity-(0|5|10|15|20|25|30|35|40|45|50|55|60|65|70|75|80|85|90|95|100)$/,
|
|
39
|
-
},
|
|
40
|
-
// Tailwind color palette for backgrounds
|
|
41
|
-
{
|
|
42
|
-
pattern:
|
|
43
|
-
/^(hover|focus|active):bg-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)$/,
|
|
44
|
-
},
|
|
45
|
-
// Tailwind color palette for text
|
|
46
|
-
{
|
|
47
|
-
pattern:
|
|
48
|
-
/^(hover|focus|active):text-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)$/,
|
|
49
|
-
},
|
|
50
|
-
// Tailwind color palette for borders
|
|
51
|
-
{
|
|
52
|
-
pattern:
|
|
53
|
-
/^(hover|focus|active):border-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)$/,
|
|
54
|
-
},
|
|
55
|
-
],
|
|
56
22
|
theme: {
|
|
57
23
|
extend: {
|
|
58
24
|
fontFamily: {
|
|
@@ -60,6 +26,11 @@ const preset: Config = {
|
|
|
60
26
|
mono: 'var(--font-family-mono)',
|
|
61
27
|
},
|
|
62
28
|
colors: {
|
|
29
|
+
// Primary accent/brand color
|
|
30
|
+
primary: {
|
|
31
|
+
DEFAULT: 'var(--primary)',
|
|
32
|
+
foreground: 'var(--primary-foreground)',
|
|
33
|
+
},
|
|
63
34
|
// Surface colors (backgrounds)
|
|
64
35
|
surface: {
|
|
65
36
|
base: 'var(--surface-base)',
|
|
@@ -73,37 +44,26 @@ const preset: Config = {
|
|
|
73
44
|
foreground: {
|
|
74
45
|
DEFAULT: 'var(--text-primary)',
|
|
75
46
|
primary: 'var(--text-primary)',
|
|
76
|
-
secondary: 'var(--text-secondary)',
|
|
77
47
|
muted: 'var(--text-muted)',
|
|
78
48
|
disabled: 'var(--text-disabled)',
|
|
79
|
-
inverted: 'var(--text-inverted)',
|
|
80
|
-
'on-primary': 'var(--text-on-primary)',
|
|
81
49
|
},
|
|
82
50
|
// Border colors
|
|
83
51
|
edge: {
|
|
84
52
|
DEFAULT: 'var(--border-default)',
|
|
85
53
|
muted: 'var(--border-muted)',
|
|
86
54
|
strong: 'var(--border-strong)',
|
|
87
|
-
inverted: 'var(--border-inverted)',
|
|
88
55
|
},
|
|
89
56
|
// Interactive state colors
|
|
90
57
|
interactive: {
|
|
91
58
|
DEFAULT: 'var(--interactive-bg)',
|
|
92
59
|
hover: 'var(--interactive-bg-hover)',
|
|
93
60
|
pressed: 'var(--interactive-bg-pressed)',
|
|
94
|
-
selected: 'var(--interactive-bg-selected)',
|
|
95
|
-
'text-selected': 'var(--interactive-text-selected)',
|
|
96
61
|
},
|
|
97
62
|
// Focus colors
|
|
98
63
|
focus: {
|
|
99
64
|
ring: 'var(--focus-ring)',
|
|
100
65
|
offset: 'var(--focus-ring-offset)',
|
|
101
66
|
},
|
|
102
|
-
// Track colors (sliders, progress bars)
|
|
103
|
-
track: {
|
|
104
|
-
DEFAULT: 'var(--track-bg)',
|
|
105
|
-
fill: 'var(--track-fill)',
|
|
106
|
-
},
|
|
107
67
|
// Status colors
|
|
108
68
|
status: {
|
|
109
69
|
info: 'var(--status-info)',
|