sveltacular 1.0.0 → 1.0.4
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 +44 -2
- package/dist/forms/check-box/check-box-group.svelte +16 -12
- package/dist/forms/combo-box/combo-box.svelte +31 -43
- package/dist/forms/combo-box/combo-box.svelte.d.ts +2 -22
- package/dist/forms/date-box/date-box.svelte +7 -7
- package/dist/forms/file-box/file-box.svelte +1 -5
- package/dist/forms/form-field.svelte +58 -0
- package/dist/forms/form-field.svelte.d.ts +7 -0
- package/dist/forms/form-row.svelte +29 -0
- package/dist/forms/form-row.svelte.d.ts +7 -0
- package/dist/forms/form.svelte +6 -0
- package/dist/forms/info-box/info-box.svelte +1 -5
- package/dist/forms/list-box/list-box.svelte +1 -5
- package/dist/forms/money-box/money-box.svelte +6 -7
- package/dist/forms/number-box/number-box.svelte +1 -5
- package/dist/forms/phone-box/phone-box.svelte +9 -7
- package/dist/forms/radio-group/radio-group.svelte +1 -5
- package/dist/forms/slider/slider.svelte +1 -5
- package/dist/forms/text-area/text-area.svelte +18 -15
- package/dist/forms/text-box/text-box.svelte +40 -53
- package/dist/forms/time-box/time-box.svelte +1 -5
- package/dist/generic/avatar/avatar.svelte +2 -0
- package/dist/generic/chip/chip.svelte +2 -0
- package/dist/navigation/context-menu/README.md +2 -0
- package/dist/navigation/context-menu/context-menu-divider.svelte +2 -0
- package/dist/sveltacular.css +518 -0
- package/package.json +11 -5
|
@@ -0,0 +1,518 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Sveltacular Default Styles
|
|
3
|
+
*
|
|
4
|
+
* This file bundles all default theme variables and base styles.
|
|
5
|
+
* Import this file (or the compiled CSS) to get default styling for all components.
|
|
6
|
+
*
|
|
7
|
+
* Usage: import 'sveltacular/styles.css' in your app
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
* Sveltacular Design Token System
|
|
11
|
+
*
|
|
12
|
+
* This file contains all design tokens used across the component library.
|
|
13
|
+
* Tokens are organized into logical categories for easy maintenance and theming.
|
|
14
|
+
*/
|
|
15
|
+
:root {
|
|
16
|
+
/* ============================================
|
|
17
|
+
DESIGN TOKENS - Foundation
|
|
18
|
+
============================================ */
|
|
19
|
+
/* Spacing Scale */
|
|
20
|
+
--spacing-xs: 0.25rem; /* 4px */
|
|
21
|
+
--spacing-sm: 0.5rem; /* 8px */
|
|
22
|
+
--spacing-md: 0.75rem; /* 12px */
|
|
23
|
+
--spacing-base: 1rem; /* 16px */
|
|
24
|
+
--spacing-lg: 1.5rem; /* 24px */
|
|
25
|
+
--spacing-xl: 2rem; /* 32px */
|
|
26
|
+
--spacing-2xl: 3rem; /* 48px */
|
|
27
|
+
/* Border Radius Scale */
|
|
28
|
+
--radius-xs: 0.125rem; /* 2px */
|
|
29
|
+
--radius-sm: 0.25rem; /* 4px */
|
|
30
|
+
--radius-md: 0.5rem; /* 8px */
|
|
31
|
+
--radius-lg: 0.75rem; /* 12px */
|
|
32
|
+
--radius-xl: 1rem; /* 16px */
|
|
33
|
+
--radius-full: 50%; /* Circular elements */
|
|
34
|
+
--radius-pill: 1.5rem; /* 24px - Pill-shaped elements */
|
|
35
|
+
/* Font Size Scale */
|
|
36
|
+
--font-xs: 0.625rem; /* 10px */
|
|
37
|
+
--font-sm: 0.75rem; /* 12px */
|
|
38
|
+
--font-base: 0.875rem; /* 14px */
|
|
39
|
+
--font-md: 1rem; /* 16px */
|
|
40
|
+
--font-lg: 1.125rem; /* 18px */
|
|
41
|
+
--font-xl: 1.25rem; /* 20px */
|
|
42
|
+
--font-2xl: 1.5rem; /* 24px */
|
|
43
|
+
/* Border Width Scale */
|
|
44
|
+
--border-thin: 1px;
|
|
45
|
+
--border-base: 2px;
|
|
46
|
+
--border-thick: 3px;
|
|
47
|
+
/* Shadow Scale - Layered for depth */
|
|
48
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
49
|
+
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.08);
|
|
50
|
+
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07), 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
51
|
+
--shadow-xl: 0 8px 10px rgba(0, 0, 0, 0.08), 0 16px 25px rgba(0, 0, 0, 0.12);
|
|
52
|
+
--shadow-2xl: 0 12px 20px rgba(0, 0, 0, 0.1), 0 24px 40px rgba(0, 0, 0, 0.15);
|
|
53
|
+
/* Focus Ring - Modern offset style */
|
|
54
|
+
--focus-ring-color: var(--color-info);
|
|
55
|
+
--focus-ring-width: 2px;
|
|
56
|
+
--focus-ring-offset: 2px;
|
|
57
|
+
--focus-ring:
|
|
58
|
+
0 0 0 var(--focus-ring-offset) transparent,
|
|
59
|
+
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
60
|
+
/* Glassmorphism Effects */
|
|
61
|
+
--glass-bg: rgba(255, 255, 255, 0.8);
|
|
62
|
+
--glass-border: rgba(255, 255, 255, 0.18);
|
|
63
|
+
--glass-blur: 12px;
|
|
64
|
+
/* Transition Durations */
|
|
65
|
+
--transition-fast: 0.15s;
|
|
66
|
+
--transition-base: 0.2s;
|
|
67
|
+
--transition-slow: 0.3s;
|
|
68
|
+
--transition-slower: 0.5s;
|
|
69
|
+
/* Transition Easing */
|
|
70
|
+
--ease-in-out: ease-in-out;
|
|
71
|
+
--ease-out: ease-out;
|
|
72
|
+
--ease-in: ease-in;
|
|
73
|
+
/* ============================================
|
|
74
|
+
COLOR PALETTE - Modernized & Friendly
|
|
75
|
+
============================================ */
|
|
76
|
+
/* Base Colors - Warmer, Softer Tones */
|
|
77
|
+
--base-color-bg: #fafafa; /* Soft off-white instead of stark white */
|
|
78
|
+
--base-color-fg: #2d3748; /* Warm dark gray instead of harsh black */
|
|
79
|
+
--base-link-fg: #4a90e2; /* Warm blue instead of #543fd7 */
|
|
80
|
+
--base-link-hover-fg: #3182ce; /* Darker warm blue */
|
|
81
|
+
--base-accent-fg: #4a5568; /* Medium warm gray */
|
|
82
|
+
--base-accent-bg: #e2e8f0; /* Light warm gray */
|
|
83
|
+
/* Neutral Grays - Warm Tones */
|
|
84
|
+
--gray-50: #f7fafc;
|
|
85
|
+
--gray-100: #edf2f7;
|
|
86
|
+
--gray-200: #e2e8f0;
|
|
87
|
+
--gray-300: #cbd5e0;
|
|
88
|
+
--gray-400: #a0aec0;
|
|
89
|
+
--gray-500: #718096;
|
|
90
|
+
--gray-600: #4a5568;
|
|
91
|
+
--gray-700: #2d3748;
|
|
92
|
+
--gray-800: #1a202c;
|
|
93
|
+
--gray-900: #171923;
|
|
94
|
+
/* Semantic Colors - Friendlier, Softer */
|
|
95
|
+
--color-success: #48bb78; /* Softer green */
|
|
96
|
+
--color-success-hover: #38a169; /* Darker green */
|
|
97
|
+
--color-error: #f56565; /* Softer red */
|
|
98
|
+
--color-error-hover: #e53e3e; /* Darker red */
|
|
99
|
+
--color-warning: #ed8936; /* Warm orange */
|
|
100
|
+
--color-warning-hover: #dd6b20; /* Darker orange */
|
|
101
|
+
--color-info: #4299e1; /* Soft blue */
|
|
102
|
+
--color-info-hover: #3182ce; /* Darker blue */
|
|
103
|
+
/* Typography */
|
|
104
|
+
--base-font-family: 'Roboto', sans-serif;
|
|
105
|
+
--base-headline-font-family: 'Roboto', sans-serif;
|
|
106
|
+
--base-mono-font-family: 'Roboto Mono', monospace;
|
|
107
|
+
/* ============================================
|
|
108
|
+
COMPONENT-SPECIFIC VARIABLES
|
|
109
|
+
============================================ */
|
|
110
|
+
/* Button Components */
|
|
111
|
+
--button-primary-bg: var(--color-info);
|
|
112
|
+
--button-primary-fg: #fff;
|
|
113
|
+
--button-primary-border: var(--color-info);
|
|
114
|
+
--button-primary-hover-bg: var(--color-info-hover);
|
|
115
|
+
--button-primary-hover-fg: #fff;
|
|
116
|
+
--button-secondary-bg: var(--gray-600);
|
|
117
|
+
--button-secondary-fg: #fff;
|
|
118
|
+
--button-secondary-border: var(--gray-600);
|
|
119
|
+
--button-secondary-hover-bg: var(--gray-700);
|
|
120
|
+
--button-secondary-hover-fg: #fff;
|
|
121
|
+
--button-positive-bg: var(--color-success);
|
|
122
|
+
--button-positive-fg: #fff;
|
|
123
|
+
--button-positive-border: var(--color-success);
|
|
124
|
+
--button-positive-hover-bg: var(--color-success-hover);
|
|
125
|
+
--button-positive-hover-fg: #fff;
|
|
126
|
+
--button-danger-bg: var(--color-error);
|
|
127
|
+
--button-danger-fg: #fff;
|
|
128
|
+
--button-danger-border: var(--color-error);
|
|
129
|
+
--button-danger-hover-bg: var(--color-error-hover);
|
|
130
|
+
--button-danger-hover-fg: #fff;
|
|
131
|
+
--button-ghost-hover-bg: var(--gray-200);
|
|
132
|
+
--button-ghost-hover-fg: var(--base-color-fg);
|
|
133
|
+
--button-outline-fg: var(--base-color-fg);
|
|
134
|
+
--button-outline-border: var(--gray-400);
|
|
135
|
+
--button-outline-hover-bg: var(--gray-200);
|
|
136
|
+
--button-outline-hover-fg: var(--base-color-fg);
|
|
137
|
+
/* Form Input Components */
|
|
138
|
+
--form-input-bg: #fff;
|
|
139
|
+
--form-input-fg: var(--base-color-fg);
|
|
140
|
+
--form-input-border: var(--gray-300);
|
|
141
|
+
--form-input-border-focus: var(--color-info);
|
|
142
|
+
--form-input-border-error: var(--color-error);
|
|
143
|
+
--form-input-border-error-focus: var(--color-error-hover);
|
|
144
|
+
--form-input-placeholder: var(--gray-500);
|
|
145
|
+
--form-input-checked-bg: var(--color-info);
|
|
146
|
+
--form-input-checked-fg: #fff;
|
|
147
|
+
--form-input-selected-bg: var(--color-info);
|
|
148
|
+
--form-input-selected-fg: #fff;
|
|
149
|
+
--form-input-accent-bg: var(--gray-200);
|
|
150
|
+
--form-input-accent-fg: var(--base-color-fg);
|
|
151
|
+
--form-input-helper-text-fg: var(--gray-600);
|
|
152
|
+
--form-input-error-fg: var(--color-error);
|
|
153
|
+
/* Form Switch Components */
|
|
154
|
+
--form-switch-unchecked-bg: var(--gray-500);
|
|
155
|
+
--form-switch-unchecked-fg: #fff;
|
|
156
|
+
--form-switch-checked-bg: var(--color-info);
|
|
157
|
+
--form-switch-checked-fg: #fff;
|
|
158
|
+
/* Navigation Components */
|
|
159
|
+
--nav-bg: #fff;
|
|
160
|
+
--nav-fg: var(--base-color-fg);
|
|
161
|
+
--nav-link-fg: var(--base-color-fg);
|
|
162
|
+
--nav-link-hover-fg: var(--base-link-fg);
|
|
163
|
+
--nav-font-family: var(--base-font-family);
|
|
164
|
+
/* Breadcrumbs */
|
|
165
|
+
--breadcrumbs-fg: var(--base-color-fg);
|
|
166
|
+
--breadcrumbs-link-fg: var(--base-link-fg);
|
|
167
|
+
--breadcrumbs-link-hover-fg: var(--base-link-hover-fg);
|
|
168
|
+
--breadcrumbs-font-family: var(--base-font-family);
|
|
169
|
+
/* Sidebar */
|
|
170
|
+
--sidebar-bg: #fff;
|
|
171
|
+
--sidebar-fg: var(--base-color-fg);
|
|
172
|
+
--sidebar-link-fg: var(--base-link-fg);
|
|
173
|
+
--sidebar-link-hover-fg: var(--base-link-hover-fg);
|
|
174
|
+
--sidebar-link-active-fg: var(--base-color-fg);
|
|
175
|
+
--sidebar-link-active-hover-fg: var(--base-color-fg);
|
|
176
|
+
--sidebar-font-family: var(--base-font-family);
|
|
177
|
+
/* Tabs */
|
|
178
|
+
--tab-traditional-inactive-bg: transparent;
|
|
179
|
+
--tab-traditional-inactive-fg: var(--gray-500);
|
|
180
|
+
--tab-traditional-hover-bg: transparent;
|
|
181
|
+
--tab-traditional-hover-fg: var(--gray-700);
|
|
182
|
+
--tab-traditional-active-bg: var(--gray-200);
|
|
183
|
+
--tab-traditional-active-fg: var(--base-color-fg);
|
|
184
|
+
--tab-traditional-border: var(--gray-300);
|
|
185
|
+
--tab-underline-inactive-bg: transparent;
|
|
186
|
+
--tab-underline-inactive-fg: var(--gray-500);
|
|
187
|
+
--tab-underline-hover-bg: transparent;
|
|
188
|
+
--tab-underline-hover-fg: var(--gray-700);
|
|
189
|
+
--tab-underline-active-bg: var(--gray-800);
|
|
190
|
+
--tab-underline-active-fg: var(--color-warning);
|
|
191
|
+
--tab-outline-border: var(--gray-300);
|
|
192
|
+
--tab-outline-inactive-fg: var(--gray-500);
|
|
193
|
+
--tab-overline-bg: var(--gray-600);
|
|
194
|
+
--tab-overline-active-bg: var(--gray-800);
|
|
195
|
+
--tab-overline-active-fg: var(--color-warning);
|
|
196
|
+
--tab-overline-fg: var(--gray-300);
|
|
197
|
+
/* Table Components */
|
|
198
|
+
--table-bg: #fff;
|
|
199
|
+
--table-fg: var(--base-color-fg);
|
|
200
|
+
--table-border: var(--gray-300);
|
|
201
|
+
--table-header-bg: var(--gray-100);
|
|
202
|
+
--table-header-fg: var(--base-color-fg);
|
|
203
|
+
--table-header-border: var(--gray-300);
|
|
204
|
+
--table-row-even-bg: #fff;
|
|
205
|
+
--table-row-even-fg: var(--base-color-fg);
|
|
206
|
+
--table-row-even-border: var(--gray-200);
|
|
207
|
+
--table-row-odd-bg: var(--gray-50);
|
|
208
|
+
--table-row-odd-fg: var(--base-color-fg);
|
|
209
|
+
--table-row-odd-border: var(--gray-200);
|
|
210
|
+
--table-footer-bg: var(--gray-100);
|
|
211
|
+
--table-footer-fg: var(--base-color-fg);
|
|
212
|
+
--table-footer-border: var(--gray-300);
|
|
213
|
+
/* Modal Components */
|
|
214
|
+
--modal-bg: #fff;
|
|
215
|
+
--modal-fg: var(--base-color-fg);
|
|
216
|
+
--modal-header-bg: #fff;
|
|
217
|
+
--modal-header-fg: var(--base-color-fg);
|
|
218
|
+
--modal-header-border: var(--gray-300);
|
|
219
|
+
--modal-body-bg: #fff;
|
|
220
|
+
--modal-body-fg: var(--base-color-fg);
|
|
221
|
+
--modal-body-border: var(--gray-300);
|
|
222
|
+
--modal-footer-bg: #fff;
|
|
223
|
+
--modal-footer-fg: var(--base-color-fg);
|
|
224
|
+
--modal-footer-border: var(--gray-300);
|
|
225
|
+
/* Card Components */
|
|
226
|
+
--card-bg: #fff;
|
|
227
|
+
--card-fg: var(--base-color-fg);
|
|
228
|
+
--card-link-fg: var(--base-link-fg);
|
|
229
|
+
--card-link-hover-fg: var(--base-link-hover-fg);
|
|
230
|
+
/* Footer */
|
|
231
|
+
--footer-bg: #fff;
|
|
232
|
+
--footer-fg: var(--base-color-fg);
|
|
233
|
+
--footer-link-fg: var(--base-link-fg);
|
|
234
|
+
--footer-link-hover-fg: var(--base-link-hover-fg);
|
|
235
|
+
--footer-font-family: var(--base-font-family);
|
|
236
|
+
/* Tooltip */
|
|
237
|
+
--tooltip-bg: var(--gray-800);
|
|
238
|
+
--tooltip-fg: #fff;
|
|
239
|
+
/* Popover */
|
|
240
|
+
--popover-bg: #fff;
|
|
241
|
+
--popover-border: var(--gray-300);
|
|
242
|
+
/* Badge */
|
|
243
|
+
--badge-bg: var(--color-error);
|
|
244
|
+
--badge-fg: #fff;
|
|
245
|
+
--badge-standard-bg: var(--gray-600);
|
|
246
|
+
--badge-standard-fg: #fff;
|
|
247
|
+
--badge-positive-bg: var(--color-success);
|
|
248
|
+
--badge-positive-fg: #fff;
|
|
249
|
+
--badge-negative-bg: var(--color-error);
|
|
250
|
+
--badge-negative-fg: #fff;
|
|
251
|
+
--badge-warning-bg: var(--color-warning);
|
|
252
|
+
--badge-warning-fg: #fff;
|
|
253
|
+
/* Spinner */
|
|
254
|
+
--spinner-border: rgba(0, 0, 0, 0.1);
|
|
255
|
+
--spinner-primary-color: var(--color-info);
|
|
256
|
+
--spinner-secondary-color: var(--gray-600);
|
|
257
|
+
/* Body */
|
|
258
|
+
--body-bg: var(--base-color-bg);
|
|
259
|
+
--body-fg: var(--base-color-fg);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* ============================================
|
|
263
|
+
DARK MODE THEME
|
|
264
|
+
============================================ */
|
|
265
|
+
[data-theme=dark] {
|
|
266
|
+
/* Base Colors - Dark Mode */
|
|
267
|
+
--base-color-bg: #0f1419; /* Deep dark background */
|
|
268
|
+
--base-color-fg: #e6edf3; /* Light gray text */
|
|
269
|
+
--base-link-fg: #58a6ff; /* Bright blue for links */
|
|
270
|
+
--base-link-hover-fg: #79c0ff; /* Lighter blue on hover */
|
|
271
|
+
--base-accent-fg: #8b949e; /* Muted gray for accents */
|
|
272
|
+
--base-accent-bg: #21262d; /* Dark gray background accent */
|
|
273
|
+
/* Neutral Grays - Dark Mode (inverted) */
|
|
274
|
+
--gray-50: #0d1117;
|
|
275
|
+
--gray-100: #161b22;
|
|
276
|
+
--gray-200: #21262d;
|
|
277
|
+
--gray-300: #30363d;
|
|
278
|
+
--gray-400: #484f58;
|
|
279
|
+
--gray-500: #6e7681;
|
|
280
|
+
--gray-600: #8b949e;
|
|
281
|
+
--gray-700: #b1bac4;
|
|
282
|
+
--gray-800: #c9d1d9;
|
|
283
|
+
--gray-900: #e6edf3;
|
|
284
|
+
/* Semantic Colors - Dark Mode (brighter for visibility) */
|
|
285
|
+
--color-success: #3fb950; /* Brighter green */
|
|
286
|
+
--color-success-hover: #56d364; /* Even brighter on hover */
|
|
287
|
+
--color-error: #f85149; /* Bright red */
|
|
288
|
+
--color-error-hover: #ff7b72; /* Lighter red on hover */
|
|
289
|
+
--color-warning: #d29922; /* Warm amber */
|
|
290
|
+
--color-warning-hover: #e3b341; /* Lighter amber on hover */
|
|
291
|
+
--color-info: #58a6ff; /* Bright blue */
|
|
292
|
+
--color-info-hover: #79c0ff; /* Lighter blue on hover */
|
|
293
|
+
/* Shadows - Dark Mode (layered, stronger for visibility on dark bg) */
|
|
294
|
+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
295
|
+
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.5);
|
|
296
|
+
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.5), 0 8px 15px rgba(0, 0, 0, 0.6);
|
|
297
|
+
--shadow-xl: 0 8px 10px rgba(0, 0, 0, 0.6), 0 16px 25px rgba(0, 0, 0, 0.7);
|
|
298
|
+
--shadow-2xl: 0 12px 20px rgba(0, 0, 0, 0.7), 0 24px 40px rgba(0, 0, 0, 0.8);
|
|
299
|
+
/* Focus Ring - Dark Mode */
|
|
300
|
+
--focus-ring-color: var(--color-info);
|
|
301
|
+
--focus-ring:
|
|
302
|
+
0 0 0 var(--focus-ring-offset) transparent,
|
|
303
|
+
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
304
|
+
/* Glassmorphism Effects - Dark Mode */
|
|
305
|
+
--glass-bg: rgba(22, 27, 34, 0.8);
|
|
306
|
+
--glass-border: rgba(255, 255, 255, 0.08);
|
|
307
|
+
--glass-blur: 12px;
|
|
308
|
+
/* Button Components - Dark Mode */
|
|
309
|
+
--button-primary-bg: var(--color-info);
|
|
310
|
+
--button-primary-fg: #0d1117;
|
|
311
|
+
--button-primary-border: var(--color-info);
|
|
312
|
+
--button-primary-hover-bg: var(--color-info-hover);
|
|
313
|
+
--button-primary-hover-fg: #0d1117;
|
|
314
|
+
--button-secondary-bg: var(--gray-600);
|
|
315
|
+
--button-secondary-fg: #0d1117;
|
|
316
|
+
--button-secondary-border: var(--gray-600);
|
|
317
|
+
--button-secondary-hover-bg: var(--gray-700);
|
|
318
|
+
--button-secondary-hover-fg: #0d1117;
|
|
319
|
+
--button-positive-bg: var(--color-success);
|
|
320
|
+
--button-positive-fg: #0d1117;
|
|
321
|
+
--button-positive-border: var(--color-success);
|
|
322
|
+
--button-positive-hover-bg: var(--color-success-hover);
|
|
323
|
+
--button-positive-hover-fg: #0d1117;
|
|
324
|
+
--button-danger-bg: var(--color-error);
|
|
325
|
+
--button-danger-fg: #0d1117;
|
|
326
|
+
--button-danger-border: var(--color-error);
|
|
327
|
+
--button-danger-hover-bg: var(--color-error-hover);
|
|
328
|
+
--button-danger-hover-fg: #0d1117;
|
|
329
|
+
--button-ghost-hover-bg: var(--gray-200);
|
|
330
|
+
--button-ghost-hover-fg: var(--base-color-fg);
|
|
331
|
+
--button-outline-fg: var(--base-color-fg);
|
|
332
|
+
--button-outline-border: var(--gray-400);
|
|
333
|
+
--button-outline-hover-bg: var(--gray-200);
|
|
334
|
+
--button-outline-hover-fg: var(--base-color-fg);
|
|
335
|
+
/* Form Input Components - Dark Mode */
|
|
336
|
+
--form-input-bg: #0d1117;
|
|
337
|
+
--form-input-fg: var(--base-color-fg);
|
|
338
|
+
--form-input-border: var(--gray-400);
|
|
339
|
+
--form-input-border-focus: var(--color-info);
|
|
340
|
+
--form-input-border-error: var(--color-error);
|
|
341
|
+
--form-input-border-error-focus: var(--color-error-hover);
|
|
342
|
+
--form-input-placeholder: var(--gray-500);
|
|
343
|
+
--form-input-checked-bg: var(--color-info);
|
|
344
|
+
--form-input-checked-fg: #0d1117;
|
|
345
|
+
--form-input-selected-bg: var(--color-info);
|
|
346
|
+
--form-input-selected-fg: #0d1117;
|
|
347
|
+
--form-input-accent-bg: var(--gray-200);
|
|
348
|
+
--form-input-accent-fg: var(--base-color-fg);
|
|
349
|
+
--form-input-helper-text-fg: var(--gray-600);
|
|
350
|
+
--form-input-error-fg: var(--color-error);
|
|
351
|
+
/* Form Switch Components - Dark Mode */
|
|
352
|
+
--form-switch-unchecked-bg: var(--gray-500);
|
|
353
|
+
--form-switch-unchecked-fg: #0d1117;
|
|
354
|
+
--form-switch-checked-bg: var(--color-info);
|
|
355
|
+
--form-switch-checked-fg: #0d1117;
|
|
356
|
+
/* Navigation Components - Dark Mode */
|
|
357
|
+
--nav-bg: #161b22;
|
|
358
|
+
--nav-fg: var(--base-color-fg);
|
|
359
|
+
--nav-link-fg: var(--base-color-fg);
|
|
360
|
+
--nav-link-hover-fg: var(--base-link-fg);
|
|
361
|
+
--nav-font-family: var(--base-font-family);
|
|
362
|
+
/* Breadcrumbs - Dark Mode */
|
|
363
|
+
--breadcrumbs-fg: var(--base-color-fg);
|
|
364
|
+
--breadcrumbs-link-fg: var(--base-link-fg);
|
|
365
|
+
--breadcrumbs-link-hover-fg: var(--base-link-hover-fg);
|
|
366
|
+
--breadcrumbs-font-family: var(--base-font-family);
|
|
367
|
+
/* Sidebar - Dark Mode */
|
|
368
|
+
--sidebar-bg: #161b22;
|
|
369
|
+
--sidebar-fg: var(--base-color-fg);
|
|
370
|
+
--sidebar-link-fg: var(--base-link-fg);
|
|
371
|
+
--sidebar-link-hover-fg: var(--base-link-hover-fg);
|
|
372
|
+
--sidebar-link-active-fg: var(--base-color-fg);
|
|
373
|
+
--sidebar-link-active-hover-fg: var(--base-color-fg);
|
|
374
|
+
--sidebar-font-family: var(--base-font-family);
|
|
375
|
+
/* Tabs - Dark Mode */
|
|
376
|
+
--tab-traditional-inactive-bg: transparent;
|
|
377
|
+
--tab-traditional-inactive-fg: var(--gray-500);
|
|
378
|
+
--tab-traditional-hover-bg: transparent;
|
|
379
|
+
--tab-traditional-hover-fg: var(--gray-700);
|
|
380
|
+
--tab-traditional-active-bg: var(--gray-200);
|
|
381
|
+
--tab-traditional-active-fg: var(--base-color-fg);
|
|
382
|
+
--tab-traditional-border: var(--gray-300);
|
|
383
|
+
--tab-underline-inactive-bg: transparent;
|
|
384
|
+
--tab-underline-inactive-fg: var(--gray-500);
|
|
385
|
+
--tab-underline-hover-bg: transparent;
|
|
386
|
+
--tab-underline-hover-fg: var(--gray-700);
|
|
387
|
+
--tab-underline-active-bg: var(--gray-800);
|
|
388
|
+
--tab-underline-active-fg: var(--color-warning);
|
|
389
|
+
--tab-outline-border: var(--gray-300);
|
|
390
|
+
--tab-outline-inactive-fg: var(--gray-500);
|
|
391
|
+
--tab-overline-bg: var(--gray-600);
|
|
392
|
+
--tab-overline-active-bg: var(--gray-800);
|
|
393
|
+
--tab-overline-active-fg: var(--color-warning);
|
|
394
|
+
--tab-overline-fg: var(--gray-300);
|
|
395
|
+
/* Table Components - Dark Mode */
|
|
396
|
+
--table-bg: #0d1117;
|
|
397
|
+
--table-fg: var(--base-color-fg);
|
|
398
|
+
--table-border: var(--gray-300);
|
|
399
|
+
--table-header-bg: #161b22;
|
|
400
|
+
--table-header-fg: var(--base-color-fg);
|
|
401
|
+
--table-header-border: var(--gray-300);
|
|
402
|
+
--table-row-even-bg: #0d1117;
|
|
403
|
+
--table-row-even-fg: var(--base-color-fg);
|
|
404
|
+
--table-row-even-border: var(--gray-200);
|
|
405
|
+
--table-row-odd-bg: #161b22;
|
|
406
|
+
--table-row-odd-fg: var(--base-color-fg);
|
|
407
|
+
--table-row-odd-border: var(--gray-200);
|
|
408
|
+
--table-footer-bg: #161b22;
|
|
409
|
+
--table-footer-fg: var(--base-color-fg);
|
|
410
|
+
--table-footer-border: var(--gray-300);
|
|
411
|
+
/* Modal Components - Dark Mode */
|
|
412
|
+
--modal-bg: #161b22;
|
|
413
|
+
--modal-fg: var(--base-color-fg);
|
|
414
|
+
--modal-header-bg: #161b22;
|
|
415
|
+
--modal-header-fg: var(--base-color-fg);
|
|
416
|
+
--modal-header-border: var(--gray-300);
|
|
417
|
+
--modal-body-bg: #161b22;
|
|
418
|
+
--modal-body-fg: var(--base-color-fg);
|
|
419
|
+
--modal-body-border: var(--gray-300);
|
|
420
|
+
--modal-footer-bg: #161b22;
|
|
421
|
+
--modal-footer-fg: var(--base-color-fg);
|
|
422
|
+
--modal-footer-border: var(--gray-300);
|
|
423
|
+
/* Card Components - Dark Mode */
|
|
424
|
+
--card-bg: #161b22;
|
|
425
|
+
--card-fg: var(--base-color-fg);
|
|
426
|
+
--card-link-fg: var(--base-link-fg);
|
|
427
|
+
--card-link-hover-fg: var(--base-link-hover-fg);
|
|
428
|
+
/* Footer - Dark Mode */
|
|
429
|
+
--footer-bg: #161b22;
|
|
430
|
+
--footer-fg: var(--base-color-fg);
|
|
431
|
+
--footer-link-fg: var(--base-link-fg);
|
|
432
|
+
--footer-link-hover-fg: var(--base-link-hover-fg);
|
|
433
|
+
--footer-font-family: var(--base-font-family);
|
|
434
|
+
/* Tooltip - Dark Mode */
|
|
435
|
+
--tooltip-bg: #c9d1d9;
|
|
436
|
+
--tooltip-fg: #0d1117;
|
|
437
|
+
/* Popover - Dark Mode */
|
|
438
|
+
--popover-bg: #161b22;
|
|
439
|
+
--popover-border: var(--gray-300);
|
|
440
|
+
/* Badge - Dark Mode */
|
|
441
|
+
--badge-bg: var(--color-error);
|
|
442
|
+
--badge-fg: #0d1117;
|
|
443
|
+
--badge-standard-bg: var(--gray-600);
|
|
444
|
+
--badge-standard-fg: #0d1117;
|
|
445
|
+
--badge-positive-bg: var(--color-success);
|
|
446
|
+
--badge-positive-fg: #0d1117;
|
|
447
|
+
--badge-negative-bg: var(--color-error);
|
|
448
|
+
--badge-negative-fg: #0d1117;
|
|
449
|
+
--badge-warning-bg: var(--color-warning);
|
|
450
|
+
--badge-warning-fg: #0d1117;
|
|
451
|
+
/* Spinner - Dark Mode */
|
|
452
|
+
--spinner-border: rgba(255, 255, 255, 0.1);
|
|
453
|
+
--spinner-primary-color: var(--color-info);
|
|
454
|
+
--spinner-secondary-color: var(--gray-600);
|
|
455
|
+
/* Body - Dark Mode */
|
|
456
|
+
--body-bg: var(--base-color-bg);
|
|
457
|
+
--body-fg: var(--base-color-fg);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
/**
|
|
461
|
+
* Focus Ring Utilities
|
|
462
|
+
*
|
|
463
|
+
* Modern focus styles with offset rings similar to GitHub, Linear, etc.
|
|
464
|
+
* Automatically respects prefers-reduced-motion
|
|
465
|
+
*/
|
|
466
|
+
/* Base focus-visible styles - apply to any interactive element */
|
|
467
|
+
.focus-ring, .focus-ring-lg, .focus-ring-sm {
|
|
468
|
+
outline: none;
|
|
469
|
+
transition: box-shadow var(--transition-fast) var(--ease-out);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.focus-ring:focus-visible, .focus-ring-lg:focus-visible, .focus-ring-sm:focus-visible {
|
|
473
|
+
box-shadow: var(--focus-ring);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
/* Focus ring variants */
|
|
477
|
+
.focus-ring-sm {
|
|
478
|
+
--focus-ring-offset: 1px;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.focus-ring-lg {
|
|
482
|
+
--focus-ring-offset: 3px;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* Apply to all interactive elements by default */
|
|
486
|
+
button:focus-visible,
|
|
487
|
+
a:focus-visible,
|
|
488
|
+
input:focus-visible,
|
|
489
|
+
textarea:focus-visible,
|
|
490
|
+
select:focus-visible,
|
|
491
|
+
[tabindex]:not([tabindex="-1"]):focus-visible {
|
|
492
|
+
outline: none;
|
|
493
|
+
box-shadow: var(--focus-ring);
|
|
494
|
+
transition: box-shadow var(--transition-fast) var(--ease-out);
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
/* Respect prefers-reduced-motion */
|
|
498
|
+
@media (prefers-reduced-motion: reduce) {
|
|
499
|
+
button:focus-visible,
|
|
500
|
+
a:focus-visible,
|
|
501
|
+
input:focus-visible,
|
|
502
|
+
textarea:focus-visible,
|
|
503
|
+
select:focus-visible,
|
|
504
|
+
[tabindex]:not([tabindex="-1"]):focus-visible {
|
|
505
|
+
transition: none;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
* {
|
|
509
|
+
box-sizing: border-box;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
body {
|
|
513
|
+
background: var(--body-bg, var(--base-color-bg));
|
|
514
|
+
color: var(--body-fg, var(--base-color-fg));
|
|
515
|
+
font-family: var(--base-font-family);
|
|
516
|
+
font-size: var(--font-md);
|
|
517
|
+
line-height: 1.5;
|
|
518
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sveltacular",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "A Svelte component library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
"dev": "vite dev",
|
|
36
36
|
"build": "vite build && npm run package",
|
|
37
37
|
"preview": "vite preview",
|
|
38
|
-
"
|
|
38
|
+
"build:css": "sass src/styles/sveltacular.scss dist/sveltacular.css --style=expanded --no-source-map",
|
|
39
|
+
"package": "npm run build:css && svelte-kit sync && svelte-package --preserve-output && publint",
|
|
39
40
|
"prepublishOnly": "npm run package",
|
|
40
41
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
41
42
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
@@ -49,13 +50,17 @@
|
|
|
49
50
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
|
50
51
|
"format": "prettier --plugin-search-dir . --write .",
|
|
51
52
|
"storybook": "storybook dev -p 6006",
|
|
52
|
-
"build-storybook": "storybook build"
|
|
53
|
+
"build-storybook": "storybook build",
|
|
54
|
+
"release:patch": "npm version patch --no-git-tag-version=false && npm publish && git push && git push --tags",
|
|
55
|
+
"release:minor": "npm version minor --no-git-tag-version=false && npm publish && git push && git push --tags",
|
|
56
|
+
"release:major": "npm version major --no-git-tag-version=false && npm publish && git push && git push --tags"
|
|
53
57
|
},
|
|
54
58
|
"exports": {
|
|
55
59
|
".": {
|
|
56
60
|
"types": "./dist/index.d.ts",
|
|
57
61
|
"svelte": "./dist/index.js"
|
|
58
|
-
}
|
|
62
|
+
},
|
|
63
|
+
"./styles.css": "./dist/sveltacular.css"
|
|
59
64
|
},
|
|
60
65
|
"files": [
|
|
61
66
|
"dist",
|
|
@@ -64,7 +69,8 @@
|
|
|
64
69
|
"!dist/**/*.stories.*"
|
|
65
70
|
],
|
|
66
71
|
"peerDependencies": {
|
|
67
|
-
"svelte": "^5.0.0"
|
|
72
|
+
"svelte": "^5.0.0",
|
|
73
|
+
"@sveltejs/kit": "^2.0.0"
|
|
68
74
|
},
|
|
69
75
|
"devDependencies": {
|
|
70
76
|
"@playwright/test": "^1.57.0",
|