@borisj74/bv-ds 0.1.0 → 0.1.2
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.cjs +194 -52
- package/dist/index.d.cts +58 -3
- package/dist/index.d.ts +58 -3
- package/dist/index.js +194 -54
- package/package.json +1 -1
- package/src/components/Button/Button.tsx +42 -22
- package/src/components/ButtonDestructive/ButtonDestructive.tsx +3 -3
- package/src/components/Modal/Modal.tsx +111 -0
- package/src/components/Modal/index.ts +2 -0
- package/src/components/ModalHeader/ModalHeader.tsx +4 -1
- package/src/components/NavAccountCard/NavAccountCard.tsx +41 -4
- package/src/components/NavAccountCard/index.ts +5 -1
- package/src/components/SidebarNavigation/SidebarNavigation.tsx +1 -1
- package/src/components/SlideoutMenu/SlideoutMenu.tsx +86 -0
- package/src/components/SlideoutMenu/index.ts +2 -0
- package/src/index.ts +2 -0
- package/tailwind-preset.js +223 -210
package/tailwind-preset.js
CHANGED
|
@@ -1,227 +1,238 @@
|
|
|
1
1
|
// Shareable Tailwind preset — token names traced from design.md, confirmed
|
|
2
2
|
// against the live Figma file via figma-map.md token pulls. Consumers extend
|
|
3
3
|
// their own tailwind.config.js with this preset so generated class names
|
|
4
|
-
//
|
|
5
|
-
// directly rather than arbitrary values.
|
|
4
|
+
// match the design tokens directly.
|
|
6
5
|
//
|
|
7
6
|
// Usage in a consuming app's tailwind.config.js:
|
|
8
7
|
// const dsPreset = require("@borisj74/bv-ds/tailwind-preset");
|
|
9
8
|
// module.exports = { presets: [dsPreset], content: [...] };
|
|
10
9
|
//
|
|
11
|
-
//
|
|
12
|
-
//
|
|
13
|
-
//
|
|
14
|
-
//
|
|
15
|
-
//
|
|
10
|
+
// KEY NAMING — v0.1.2 fix:
|
|
11
|
+
// Colors are nested under their category group (bg, text, border, fg).
|
|
12
|
+
// Tailwind joins group + key with a hyphen at class-generation time:
|
|
13
|
+
// colors.bg["brand-solid"] → bg-bg-brand-solid ✓
|
|
14
|
+
// colors.text["secondary"] → text-text-secondary ✓
|
|
15
|
+
// colors.border["primary"] → border-border-primary ✓
|
|
16
|
+
// This prevents cross-category collisions (text-secondary #404040 vs
|
|
17
|
+
// bg-secondary #fafafa) that caused the doubled-prefix bug in v0.1.1.
|
|
18
|
+
//
|
|
19
|
+
// Components must use the doubled-prefix form in className:
|
|
20
|
+
// bg-bg-brand-solid, text-text-secondary, border-border-primary, etc.
|
|
21
|
+
//
|
|
22
|
+
// PEER DEPENDENCY — Recharts requires `recharts` (>=2) in consuming app.
|
|
16
23
|
|
|
17
24
|
/** @type {import('tailwindcss').Config} */
|
|
18
25
|
module.exports = {
|
|
19
26
|
theme: {
|
|
20
27
|
extend: {
|
|
21
28
|
colors: {
|
|
22
|
-
// Text — design.md §2 "Color — Text"
|
|
23
|
-
"text-primary": "#171717",
|
|
24
|
-
"text-primary-on-brand": "#ffffff",
|
|
25
|
-
"text-secondary": "#404040",
|
|
26
|
-
"text-secondary-hover": "#262626",
|
|
27
|
-
"text-secondary-on-brand": "#e9d7fe",
|
|
28
|
-
"text-tertiary": "#525252",
|
|
29
|
-
"text-tertiary-hover": "#404040",
|
|
30
|
-
"text-tertiary-on-brand": "#e9d7fe",
|
|
31
|
-
"text-quaternary": "#737373",
|
|
32
|
-
"text-quaternary-on-brand": "#d6bbfb",
|
|
33
|
-
"text-white": "#ffffff",
|
|
34
|
-
"text-placeholder": "#737373",
|
|
35
|
-
"text-brand-primary": "#42307d",
|
|
36
|
-
"text-brand-secondary": "#6941c6",
|
|
37
|
-
"text-brand-secondary-hover": "#53389e",
|
|
38
|
-
"text-brand-tertiary": "#7f56d9",
|
|
39
|
-
"text-brand-tertiary-alt": "#7f56d9",
|
|
40
|
-
"text-error-primary": "#dc2626",
|
|
41
|
-
"text-warning-primary": "#ca8a04",
|
|
42
|
-
"text-success-primary": "#16a34a",
|
|
43
29
|
|
|
44
|
-
// Background
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
30
|
+
// ── Background tokens ─────────────────────────────────────────────
|
|
31
|
+
// Usage: bg-bg-primary, bg-bg-brand-solid, bg-bg-error-solid, etc.
|
|
32
|
+
bg: {
|
|
33
|
+
"primary": "#ffffff",
|
|
34
|
+
"primary-alt": "#ffffff",
|
|
35
|
+
"primary-hover": "#fafafa",
|
|
36
|
+
"primary-solid": "#0a0a0a",
|
|
37
|
+
"secondary": "#fafafa",
|
|
38
|
+
"secondary-alt": "#fafafa",
|
|
39
|
+
"secondary-hover": "#f5f5f5",
|
|
40
|
+
"secondary-solid": "#525252",
|
|
41
|
+
"tertiary": "#f5f5f5",
|
|
42
|
+
"quaternary": "#e5e5e5",
|
|
43
|
+
"overlay": "#0a0a0a",
|
|
44
|
+
"brand-primary": "#f9f5ff",
|
|
45
|
+
"brand-primary-alt": "#f9f5ff",
|
|
46
|
+
"brand-secondary": "#f4ebff",
|
|
47
|
+
"brand-solid": "#7f56d9",
|
|
48
|
+
"brand-solid-hover": "#6941c6",
|
|
49
|
+
"brand-section": "#53389e",
|
|
50
|
+
"brand-section-subtle": "#6941c6",
|
|
51
|
+
"error-primary": "#fef2f2",
|
|
52
|
+
"error-secondary": "#fee2e2",
|
|
53
|
+
"error-solid": "#dc2626",
|
|
54
|
+
"error-solid-hover": "#b91c1c",
|
|
55
|
+
"warning-primary": "#fefce8",
|
|
56
|
+
"warning-secondary": "#fef9c3",
|
|
57
|
+
"warning-solid": "#ca8a04",
|
|
58
|
+
"success-primary": "#f0fdf4",
|
|
59
|
+
"success-secondary": "#dcfce7",
|
|
60
|
+
"success-solid": "#16a34a",
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
// ── Text tokens ───────────────────────────────────────────────────
|
|
64
|
+
// Usage: text-text-primary, text-text-secondary, text-text-brand-secondary, etc.
|
|
65
|
+
text: {
|
|
66
|
+
"primary": "#171717",
|
|
67
|
+
"primary-on-brand": "#ffffff",
|
|
68
|
+
"secondary": "#404040",
|
|
69
|
+
"secondary-hover": "#262626",
|
|
70
|
+
"secondary-on-brand": "#e9d7fe",
|
|
71
|
+
"tertiary": "#525252",
|
|
72
|
+
"tertiary-hover": "#404040",
|
|
73
|
+
"tertiary-on-brand": "#e9d7fe",
|
|
74
|
+
"quaternary": "#737373",
|
|
75
|
+
"quaternary-on-brand": "#d6bbfb",
|
|
76
|
+
"white": "#ffffff",
|
|
77
|
+
"placeholder": "#737373",
|
|
78
|
+
"brand-primary": "#42307d",
|
|
79
|
+
"brand-secondary": "#6941c6",
|
|
80
|
+
"brand-secondary-hover": "#53389e",
|
|
81
|
+
"brand-tertiary": "#7f56d9",
|
|
82
|
+
"brand-tertiary-alt": "#7f56d9",
|
|
83
|
+
"error-primary": "#dc2626",
|
|
84
|
+
"warning-primary": "#ca8a04",
|
|
85
|
+
"success-primary": "#16a34a",
|
|
86
|
+
},
|
|
71
87
|
|
|
72
|
-
// Border
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
88
|
+
// ── Border tokens ─────────────────────────────────────────────────
|
|
89
|
+
// Usage: border-border-primary, border-border-brand, etc.
|
|
90
|
+
border: {
|
|
91
|
+
"primary": "#d4d4d4",
|
|
92
|
+
"secondary": "#e5e5e5",
|
|
93
|
+
"secondary-alt": "rgba(0,0,0,0.1)",
|
|
94
|
+
"tertiary": "#f5f5f5",
|
|
95
|
+
"brand": "#9e77ed",
|
|
96
|
+
"brand-alt": "#7f56d9",
|
|
97
|
+
"error": "#ef4444",
|
|
98
|
+
"error-subtle": "#fca5a5",
|
|
99
|
+
},
|
|
81
100
|
|
|
82
|
-
// Foreground
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
+
// ── Foreground / icon tokens ──────────────────────────────────────
|
|
102
|
+
// Usage: text-fg-primary, bg-fg-brand-primary, etc.
|
|
103
|
+
fg: {
|
|
104
|
+
"primary": "#171717",
|
|
105
|
+
"secondary": "#404040",
|
|
106
|
+
"secondary-hover": "#262626",
|
|
107
|
+
"tertiary": "#525252",
|
|
108
|
+
"tertiary-hover": "#404040",
|
|
109
|
+
"quaternary": "#a3a3a3",
|
|
110
|
+
"quaternary-hover": "#737373",
|
|
111
|
+
"white": "#ffffff",
|
|
112
|
+
"brand-primary": "#7f56d9",
|
|
113
|
+
"brand-primary-alt": "#7f56d9",
|
|
114
|
+
"brand-secondary": "#9e77ed",
|
|
115
|
+
"brand-secondary-alt": "#9e77ed",
|
|
116
|
+
"error-primary": "#dc2626",
|
|
117
|
+
"error-secondary": "#ef4444",
|
|
118
|
+
"warning-primary": "#ca8a04",
|
|
119
|
+
"warning-secondary": "#eab308",
|
|
120
|
+
"success-primary": "#16a34a",
|
|
121
|
+
"success-secondary": "#22c55e",
|
|
122
|
+
},
|
|
101
123
|
|
|
102
|
-
// Utility
|
|
103
|
-
//
|
|
104
|
-
//
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
"utility-
|
|
116
|
-
"utility-
|
|
117
|
-
"utility-
|
|
118
|
-
"utility-
|
|
119
|
-
"utility-
|
|
120
|
-
"utility-
|
|
121
|
-
"utility-
|
|
122
|
-
"utility-
|
|
123
|
-
"utility-
|
|
124
|
-
"utility-
|
|
125
|
-
"utility-
|
|
126
|
-
"utility-
|
|
127
|
-
"utility-
|
|
128
|
-
"utility-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
"utility-
|
|
132
|
-
"utility-
|
|
133
|
-
"utility-
|
|
134
|
-
"utility-
|
|
135
|
-
"utility-
|
|
136
|
-
"utility-
|
|
137
|
-
"utility-
|
|
138
|
-
"utility-
|
|
139
|
-
"utility-
|
|
140
|
-
"utility-
|
|
141
|
-
"utility-
|
|
142
|
-
"utility-
|
|
143
|
-
"utility-
|
|
144
|
-
"utility-
|
|
145
|
-
"utility-
|
|
146
|
-
"utility-
|
|
147
|
-
"utility-
|
|
148
|
-
"utility-
|
|
149
|
-
"utility-
|
|
150
|
-
"utility-
|
|
151
|
-
"utility-
|
|
152
|
-
"utility-
|
|
153
|
-
"utility-
|
|
154
|
-
"utility-
|
|
155
|
-
"utility-
|
|
156
|
-
"utility-
|
|
157
|
-
"utility-
|
|
158
|
-
"utility-
|
|
159
|
-
"utility-
|
|
160
|
-
"utility-
|
|
161
|
-
"utility-
|
|
162
|
-
"utility-
|
|
163
|
-
"utility-
|
|
164
|
-
"utility-
|
|
165
|
-
"utility-
|
|
166
|
-
"utility-
|
|
167
|
-
"utility-
|
|
168
|
-
"utility-
|
|
169
|
-
"utility-
|
|
170
|
-
"utility-
|
|
171
|
-
"utility-
|
|
172
|
-
"utility-
|
|
173
|
-
"utility-
|
|
174
|
-
"utility-
|
|
175
|
-
"utility-
|
|
176
|
-
"utility-
|
|
177
|
-
"utility-
|
|
178
|
-
"utility-
|
|
179
|
-
"utility-
|
|
180
|
-
"utility-
|
|
181
|
-
"utility-
|
|
182
|
-
"utility-
|
|
183
|
-
"utility-
|
|
184
|
-
"utility-
|
|
185
|
-
"utility-
|
|
186
|
-
"utility-
|
|
187
|
-
"utility-
|
|
188
|
-
"utility-
|
|
189
|
-
"utility-
|
|
190
|
-
"utility-
|
|
191
|
-
"utility-
|
|
192
|
-
"utility-
|
|
193
|
-
"utility-
|
|
194
|
-
"utility-
|
|
195
|
-
"utility-
|
|
196
|
-
"utility-
|
|
197
|
-
"utility-
|
|
198
|
-
"utility-
|
|
199
|
-
"utility-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
"
|
|
203
|
-
"
|
|
204
|
-
"
|
|
205
|
-
"
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
"
|
|
209
|
-
"
|
|
210
|
-
"
|
|
211
|
-
"utility-amber-700": "#b45309",
|
|
212
|
-
// Alpha overlays (Component colors/Alpha) — confirmed values
|
|
213
|
-
"alpha-white-10": "rgba(255,255,255,0.10)",
|
|
214
|
-
"alpha-white-90": "rgba(255,255,255,0.90)",
|
|
215
|
-
"alpha-black-10": "rgba(0,0,0,0.10)",
|
|
216
|
-
"alpha-black-100": "rgba(0,0,0,1.00)",
|
|
217
|
-
// Component colors/Components/Sliders — confirmed via get_variable_defs (node 1086:534)
|
|
218
|
-
"slider-handle-bg": "#ffffff",
|
|
219
|
-
"slider-handle-border": "#7f56d9",
|
|
220
|
-
// Component colors/Components/Toggles — confirmed via get_variable_defs (node 1102:4208).
|
|
221
|
-
// Slim toggle pressed track border; Default toggle uses bg-brand-solid/-hover.
|
|
222
|
-
"toggle-slim-border-pressed": "#7f56d9",
|
|
124
|
+
// ── Utility palette ───────────────────────────────────────────────
|
|
125
|
+
// Usage: bg-utility-brand-50, text-utility-neutral-700, etc.
|
|
126
|
+
// Flat — no collision risk since all keys share the "utility-" prefix.
|
|
127
|
+
"utility-brand-50": "#f9f5ff",
|
|
128
|
+
"utility-brand-100": "#f4ebff",
|
|
129
|
+
"utility-brand-200": "#e9d7fe",
|
|
130
|
+
"utility-brand-400": "#b692f6",
|
|
131
|
+
"utility-brand-500": "#9e77ed",
|
|
132
|
+
"utility-brand-600": "#7f56d9",
|
|
133
|
+
"utility-brand-700": "#6941c6",
|
|
134
|
+
"utility-yellow-50": "#fefce8",
|
|
135
|
+
"utility-yellow-100": "#fef9c3",
|
|
136
|
+
"utility-yellow-200": "#fef08a",
|
|
137
|
+
"utility-yellow-400": "#facc15",
|
|
138
|
+
"utility-yellow-500": "#eab308",
|
|
139
|
+
"utility-yellow-600": "#ca8a04",
|
|
140
|
+
"utility-yellow-700": "#a16207",
|
|
141
|
+
"utility-green-50": "#f0fdf4",
|
|
142
|
+
"utility-green-100": "#dcfce7",
|
|
143
|
+
"utility-green-200": "#bbf7d0",
|
|
144
|
+
"utility-green-400": "#4ade80",
|
|
145
|
+
"utility-green-500": "#22c55e",
|
|
146
|
+
"utility-green-600": "#16a34a",
|
|
147
|
+
"utility-green-700": "#15803d",
|
|
148
|
+
"utility-slate-50": "#f8fafc",
|
|
149
|
+
"utility-slate-100": "#f1f5f9",
|
|
150
|
+
"utility-slate-200": "#e2e8f0",
|
|
151
|
+
"utility-slate-400": "#94a3b8",
|
|
152
|
+
"utility-slate-500": "#64748b",
|
|
153
|
+
"utility-slate-700": "#334155",
|
|
154
|
+
"utility-sky-50": "#f0f9ff",
|
|
155
|
+
"utility-sky-100": "#e0f2fe",
|
|
156
|
+
"utility-sky-200": "#bae6fd",
|
|
157
|
+
"utility-sky-400": "#38bdf8",
|
|
158
|
+
"utility-sky-500": "#0ea5e9",
|
|
159
|
+
"utility-sky-700": "#0369a1",
|
|
160
|
+
"utility-indigo-50": "#eef2ff",
|
|
161
|
+
"utility-indigo-100": "#e0e7ff",
|
|
162
|
+
"utility-indigo-200": "#c7d2fe",
|
|
163
|
+
"utility-indigo-400": "#818cf8",
|
|
164
|
+
"utility-indigo-500": "#6366f1",
|
|
165
|
+
"utility-indigo-600": "#4f46e5",
|
|
166
|
+
"utility-indigo-700": "#4338ca",
|
|
167
|
+
"utility-purple-50": "#faf5ff",
|
|
168
|
+
"utility-purple-100": "#f3e8ff",
|
|
169
|
+
"utility-purple-200": "#e9d5ff",
|
|
170
|
+
"utility-purple-400": "#c084fc",
|
|
171
|
+
"utility-purple-500": "#a855f7",
|
|
172
|
+
"utility-purple-600": "#9333ea",
|
|
173
|
+
"utility-purple-700": "#7e22ce",
|
|
174
|
+
"utility-blue-50": "#eff6ff",
|
|
175
|
+
"utility-blue-100": "#dbeafe",
|
|
176
|
+
"utility-blue-200": "#bfdbfe",
|
|
177
|
+
"utility-blue-400": "#60a5fa",
|
|
178
|
+
"utility-blue-500": "#3b82f6",
|
|
179
|
+
"utility-blue-600": "#2563eb",
|
|
180
|
+
"utility-blue-700": "#1d4ed8",
|
|
181
|
+
"utility-pink-50": "#fdf2f8",
|
|
182
|
+
"utility-pink-100": "#fce7f3",
|
|
183
|
+
"utility-pink-200": "#fbcfe8",
|
|
184
|
+
"utility-pink-400": "#f472b6",
|
|
185
|
+
"utility-pink-500": "#ec4899",
|
|
186
|
+
"utility-pink-600": "#db2777",
|
|
187
|
+
"utility-pink-700": "#be185d",
|
|
188
|
+
"utility-orange-50": "#fff7ed",
|
|
189
|
+
"utility-orange-100": "#ffedd5",
|
|
190
|
+
"utility-orange-200": "#fed7aa",
|
|
191
|
+
"utility-orange-400": "#fb923c",
|
|
192
|
+
"utility-orange-500": "#f97316",
|
|
193
|
+
"utility-orange-600": "#ea580c",
|
|
194
|
+
"utility-orange-700": "#c2410c",
|
|
195
|
+
"utility-red-50": "#fef2f2",
|
|
196
|
+
"utility-red-100": "#fee2e2",
|
|
197
|
+
"utility-red-200": "#fecaca",
|
|
198
|
+
"utility-red-400": "#f87171",
|
|
199
|
+
"utility-red-500": "#ef4444",
|
|
200
|
+
"utility-red-600": "#dc2626",
|
|
201
|
+
"utility-red-700": "#b91c1c",
|
|
202
|
+
"utility-neutral-50": "#fafafa",
|
|
203
|
+
"utility-neutral-100": "#f5f5f5",
|
|
204
|
+
"utility-neutral-200": "#e5e5e5",
|
|
205
|
+
"utility-neutral-300": "#d4d4d4",
|
|
206
|
+
"utility-neutral-400": "#a3a3a3",
|
|
207
|
+
"utility-neutral-500": "#737373",
|
|
208
|
+
"utility-neutral-600": "#525252",
|
|
209
|
+
"utility-neutral-700": "#404040",
|
|
210
|
+
"utility-emerald-50": "#ecfdf5",
|
|
211
|
+
"utility-emerald-100": "#d1fae5",
|
|
212
|
+
"utility-emerald-200": "#a7f3d0",
|
|
213
|
+
"utility-emerald-500": "#10b981",
|
|
214
|
+
"utility-emerald-600": "#059669",
|
|
215
|
+
"utility-emerald-700": "#047857",
|
|
216
|
+
"utility-amber-50": "#fffbeb",
|
|
217
|
+
"utility-amber-100": "#fef3c7",
|
|
218
|
+
"utility-amber-200": "#fde68a",
|
|
219
|
+
"utility-amber-500": "#f59e0b",
|
|
220
|
+
"utility-amber-600": "#d97706",
|
|
221
|
+
"utility-amber-700": "#b45309",
|
|
222
|
+
|
|
223
|
+
// ── Alpha overlays ────────────────────────────────────────────────
|
|
224
|
+
"alpha-white-10": "rgba(255,255,255,0.10)",
|
|
225
|
+
"alpha-white-90": "rgba(255,255,255,0.90)",
|
|
226
|
+
"alpha-black-10": "rgba(0,0,0,0.10)",
|
|
227
|
+
"alpha-black-100": "rgba(0,0,0,1.00)",
|
|
228
|
+
|
|
229
|
+
// ── Component-specific tokens ─────────────────────────────────────
|
|
230
|
+
"slider-handle-bg": "#ffffff",
|
|
231
|
+
"slider-handle-border": "#7f56d9",
|
|
232
|
+
"toggle-slim-border-pressed": "#7f56d9",
|
|
223
233
|
"toggle-slim-border-pressed-hover": "#6941c6",
|
|
224
234
|
},
|
|
235
|
+
|
|
225
236
|
spacing: {
|
|
226
237
|
none: "0px",
|
|
227
238
|
xxs: "2px",
|
|
@@ -240,21 +251,23 @@ module.exports = {
|
|
|
240
251
|
"9xl": "96px",
|
|
241
252
|
"10xl": "128px",
|
|
242
253
|
"11xl": "160px",
|
|
243
|
-
// Layout container tokens (Alert / Header navigation / Page header)
|
|
244
254
|
"container-padding-desktop": "32px",
|
|
245
255
|
"container-padding-mobile": "16px",
|
|
246
256
|
},
|
|
257
|
+
|
|
247
258
|
maxWidth: {
|
|
248
259
|
"container-max-width-desktop": "1280px",
|
|
249
260
|
"width-lg": "640px",
|
|
250
261
|
},
|
|
262
|
+
|
|
251
263
|
boxShadow: {
|
|
252
|
-
// design.md §2 — base outer drop + the three-layer skeuomorphic stack
|
|
253
|
-
// (Shadows/shadow-xs-skeuomorphic).
|
|
254
264
|
xs: "0px 1px 2px 0px rgba(0,0,0,0.05)",
|
|
255
265
|
skeuomorphic:
|
|
256
266
|
"0px 1px 2px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 0px 0px 1px rgba(0,0,0,0.18)",
|
|
267
|
+
lg: "0px 12px 16px -4px rgba(0,0,0,0.08), 0px 4px 6px -2px rgba(0,0,0,0.03), 0px 2px 2px -1px rgba(0,0,0,0.04)",
|
|
268
|
+
xl: "0px 20px 24px -4px rgba(0,0,0,0.08), 0px 8px 8px -4px rgba(0,0,0,0.03), 0px 3px 1.5px -1.5px rgba(0,0,0,0.04)",
|
|
257
269
|
},
|
|
270
|
+
|
|
258
271
|
borderRadius: {
|
|
259
272
|
none: "0px",
|
|
260
273
|
xxs: "2px",
|
|
@@ -268,10 +281,12 @@ module.exports = {
|
|
|
268
281
|
"4xl": "24px",
|
|
269
282
|
full: "9999px",
|
|
270
283
|
},
|
|
284
|
+
|
|
271
285
|
fontFamily: {
|
|
272
286
|
body: ["Inter", "sans-serif"],
|
|
273
287
|
display: ["Inter", "sans-serif"],
|
|
274
288
|
},
|
|
289
|
+
|
|
275
290
|
fontSize: {
|
|
276
291
|
xs: ["12px", { lineHeight: "18px" }],
|
|
277
292
|
sm: ["14px", { lineHeight: "20px" }],
|
|
@@ -284,9 +299,7 @@ module.exports = {
|
|
|
284
299
|
"display-lg": ["48px", { lineHeight: "60px", letterSpacing: "-2px" }],
|
|
285
300
|
"display-xl": ["60px", { lineHeight: "72px", letterSpacing: "-2px" }],
|
|
286
301
|
},
|
|
287
|
-
|
|
288
|
-
// backdrop-blur-md is 12px). backdrop-blur-* are Tailwind v3 core utilities
|
|
289
|
-
// (enabled by default); this just aligns the md value to the design token.
|
|
302
|
+
|
|
290
303
|
backdropBlur: {
|
|
291
304
|
md: "16px",
|
|
292
305
|
},
|