sveltacular 1.0.1 → 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/generic/avatar/avatar.svelte +1 -0
- package/dist/generic/chip/chip.svelte +1 -0
- package/dist/navigation/context-menu/README.md +1 -0
- package/dist/navigation/context-menu/context-menu-divider.svelte +1 -0
- package/dist/sveltacular.css +518 -0
- package/package.json +11 -5
package/README.md
CHANGED
|
@@ -12,17 +12,23 @@ npm i sveltacular
|
|
|
12
12
|
|
|
13
13
|
## Quick Start
|
|
14
14
|
|
|
15
|
+
First, import the default styles to get all CSS variables and base styles:
|
|
16
|
+
|
|
15
17
|
```svelte
|
|
16
18
|
<script lang="ts">
|
|
19
|
+
import 'sveltacular/styles.css';
|
|
17
20
|
import { Button } from 'sveltacular';
|
|
18
21
|
</script>
|
|
19
22
|
|
|
20
23
|
<Button variant="primary" label="Hello World" />
|
|
21
24
|
```
|
|
22
25
|
|
|
26
|
+
**Note**: The styles import is required for components to render with default styling. If you prefer to provide your own theme, you can skip this import and define your own CSS variables (see [Theming](#theming) below).
|
|
27
|
+
|
|
23
28
|
## Component Catalog
|
|
24
29
|
|
|
25
30
|
### Forms
|
|
31
|
+
|
|
26
32
|
- **Button** - Multiple variants (primary, secondary, positive, danger, outline)
|
|
27
33
|
- **TextBox** - Text input with validation and formatting options
|
|
28
34
|
- **NumberBox** - Number input with min/max/decimals
|
|
@@ -38,6 +44,7 @@ npm i sveltacular
|
|
|
38
44
|
- **Form** - Form container with validation
|
|
39
45
|
|
|
40
46
|
### Generic Components
|
|
47
|
+
|
|
41
48
|
- **Card** - Card container
|
|
42
49
|
- **Pill** - Badge/pill component
|
|
43
50
|
- **Badge** - Notification badge
|
|
@@ -52,6 +59,7 @@ npm i sveltacular
|
|
|
52
59
|
- **List** - Styled list component
|
|
53
60
|
|
|
54
61
|
### Navigation
|
|
62
|
+
|
|
55
63
|
- **AppBar** - Application bar
|
|
56
64
|
- **SideBar** - Side navigation
|
|
57
65
|
- **Breadcrumbs** - Breadcrumb navigation
|
|
@@ -62,16 +70,19 @@ npm i sveltacular
|
|
|
62
70
|
- **Drawer** - Slide-out drawer
|
|
63
71
|
|
|
64
72
|
### Modals
|
|
73
|
+
|
|
65
74
|
- **Modal** - Generic modal dialog
|
|
66
75
|
- **Alert** - Alert dialog
|
|
67
76
|
- **Confirm** - Confirmation dialog
|
|
68
77
|
- **Prompt** - Input prompt dialog
|
|
69
78
|
|
|
70
79
|
### Tables
|
|
80
|
+
|
|
71
81
|
- **Table** - Table component with header/body/footer
|
|
72
82
|
- **DataGrid** - Advanced data grid
|
|
73
83
|
|
|
74
84
|
### Typography
|
|
85
|
+
|
|
75
86
|
- **Headline** - Heading component
|
|
76
87
|
- **Subtitle** - Subtitle component
|
|
77
88
|
- **Text** - Text component
|
|
@@ -79,6 +90,7 @@ npm i sveltacular
|
|
|
79
90
|
- **CodeBlock** - Code block
|
|
80
91
|
|
|
81
92
|
### Layout
|
|
93
|
+
|
|
82
94
|
- **FlexRow** / **FlexCol** - Flexbox layout
|
|
83
95
|
- **Grid** - Grid layout
|
|
84
96
|
|
|
@@ -102,11 +114,19 @@ import { CheckBox, CheckBoxGroup } from 'sveltacular/forms/check-box';
|
|
|
102
114
|
|
|
103
115
|
## Theming
|
|
104
116
|
|
|
105
|
-
Sveltacular uses CSS variables for theming.
|
|
117
|
+
Sveltacular uses CSS variables for theming. When you import `sveltacular/styles.css`, all default CSS variables are included. You can override any of these variables to customize the appearance of components.
|
|
118
|
+
|
|
119
|
+
See [THEMING.md](./THEMING.md) for a complete list of available CSS variables.
|
|
120
|
+
|
|
121
|
+
### Customizing the Theme
|
|
106
122
|
|
|
107
|
-
|
|
123
|
+
Override CSS variables in your own stylesheet (after importing the default styles):
|
|
108
124
|
|
|
109
125
|
```css
|
|
126
|
+
/* Import default styles first */
|
|
127
|
+
@import 'sveltacular/styles.css';
|
|
128
|
+
|
|
129
|
+
/* Then override variables as needed */
|
|
110
130
|
:root {
|
|
111
131
|
--button-primary-bg: #1e88e5;
|
|
112
132
|
--form-input-border: #e0e0e0;
|
|
@@ -114,6 +134,27 @@ Example:
|
|
|
114
134
|
}
|
|
115
135
|
```
|
|
116
136
|
|
|
137
|
+
Or in a Svelte component:
|
|
138
|
+
|
|
139
|
+
```svelte
|
|
140
|
+
<script>
|
|
141
|
+
import 'sveltacular/styles.css';
|
|
142
|
+
import { Button } from 'sveltacular';
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<style>
|
|
146
|
+
:global(:root) {
|
|
147
|
+
--button-primary-bg: #1e88e5;
|
|
148
|
+
--form-input-border: #e0e0e0;
|
|
149
|
+
--base-color-bg: #ffffff;
|
|
150
|
+
}
|
|
151
|
+
</style>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Providing Your Own Theme
|
|
155
|
+
|
|
156
|
+
If you prefer not to use the default stylesheet, you can define all CSS variables yourself. See [THEMING.md](./THEMING.md) for the complete list of required variables.
|
|
157
|
+
|
|
117
158
|
## Form Validation
|
|
118
159
|
|
|
119
160
|
Sveltacular includes a validation system:
|
|
@@ -136,6 +177,7 @@ if (!result.isValid) {
|
|
|
136
177
|
## Accessibility
|
|
137
178
|
|
|
138
179
|
Sveltacular components include:
|
|
180
|
+
|
|
139
181
|
- ARIA attributes for screen readers
|
|
140
182
|
- Keyboard navigation support
|
|
141
183
|
- Focus management utilities
|
|
@@ -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",
|