zabi-components 5.0.14 → 5.0.17

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.
Files changed (33) hide show
  1. package/README.md +51 -0
  2. package/dist/atoms/Badge.svelte +14 -14
  3. package/dist/atoms/Button.svelte +8 -8
  4. package/dist/atoms/Card.svelte +2 -2
  5. package/dist/atoms/Checkbox.svelte +19 -16
  6. package/dist/atoms/CodeBlock.svelte +4 -4
  7. package/dist/atoms/ColorPicker.svelte +4 -4
  8. package/dist/atoms/FeatureCard.svelte +2 -2
  9. package/dist/atoms/Input.svelte +5 -5
  10. package/dist/atoms/Progress.svelte +1 -1
  11. package/dist/atoms/Select.svelte +37 -14
  12. package/dist/atoms/Skeleton.svelte +1 -1
  13. package/dist/atoms/Textarea.svelte +2 -2
  14. package/dist/atoms/ThemeToggle.svelte +5 -5
  15. package/dist/atoms/Toast.svelte +1 -1
  16. package/dist/atoms/Toggle.svelte +2 -4
  17. package/dist/atoms/Tooltip.svelte +128 -19
  18. package/dist/molecules/Alert.svelte +13 -7
  19. package/dist/molecules/ComponentDemo.svelte +57 -64
  20. package/dist/molecules/Dropdown.svelte +4 -2
  21. package/dist/molecules/ImageUpload.svelte +2 -2
  22. package/dist/molecules/Modal.svelte +2 -2
  23. package/dist/molecules/SlideUp.svelte +2 -2
  24. package/dist/molecules/Tabs.svelte +2 -2
  25. package/dist/organisms/Navbar.svelte +1 -1
  26. package/dist/routes/lib/variant-utils.ts +4 -4
  27. package/dist/zabi-components-colors.css +333 -0
  28. package/dist/zabi-components-theme-dark-only.css +149 -0
  29. package/dist/zabi-components-theme-dark.css +151 -0
  30. package/dist/zabi-components-theme-only.css +227 -0
  31. package/dist/zabi-components-theme.css +229 -0
  32. package/dist/zabi-components.css +2617 -509
  33. package/package.json +16 -5
package/dist/zabi-components-theme-only.css ADDED
@@ -0,0 +1,227 @@
1
+ @theme {
2
+ /* Typography - Nunito Sans font family */
3
+ --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
4
+
5
+ /* Brand Color Scale */
6
+ --color-brand-50: #f7faff;
7
+ --color-brand-100: #edf2fb; /* provided */
8
+ --color-brand-200: #dfe7fb;
9
+ --color-brand-300: #ccdbfd; /* provided */
10
+ --color-brand-400: #abc4ff; /* provided */
11
+ --color-brand-500: #8fa8ff;
12
+ --color-brand-600: #6e84fa;
13
+ --color-brand-700: #5366e2;
14
+ --color-brand-800: #3f4fc0;
15
+ --color-brand-900: #2f3c99;
16
+ --color-brand-950: #1f2866;
17
+
18
+ /* Citron Color Scale */
19
+ --color-citron-50: #f9faeb;
20
+ --color-citron-100: #f1f5cf;
21
+ --color-citron-200: #e4ecaa;
22
+ --color-citron-300: #d5e184;
23
+ --color-citron-400: #c7d460;
24
+ --color-citron-500: #bbbe64; /* provided */
25
+ --color-citron-600: #a3a852;
26
+ --color-citron-700: #848a43;
27
+ --color-citron-800: #666c35;
28
+ --color-citron-900: #4d5229;
29
+ --color-citron-950: #323518;
30
+
31
+ /* Pine Color Scale */
32
+ --color-pine-50: #e9f6f2;
33
+ --color-pine-100: #d2ece4;
34
+ --color-pine-200: #a7d9c9;
35
+ --color-pine-300: #78c4ad;
36
+ --color-pine-400: #49ad91;
37
+ --color-pine-500: #0C5D43; /* provided */
38
+ --color-pine-600: #0a513a;
39
+ --color-pine-700: #084532;
40
+ --color-pine-800: #063a2a;
41
+ --color-pine-900: #04231a;
42
+ --color-pine-950: #02160f;
43
+
44
+ /* Iris Color Scale */
45
+ --color-iris-50: #f4f4fa;
46
+ --color-iris-100: #e9e9f7;
47
+ --color-iris-200: #d6d6f0;
48
+ --color-iris-300: #bdbde6;
49
+ --color-iris-400: #a3a3d8;
50
+ --color-iris-500: #6969B3; /* provided */
51
+ --color-iris-600: #58589e;
52
+ --color-iris-700: #474788;
53
+ --color-iris-800: #38386f;
54
+ --color-iris-900: #2a2a56;
55
+ --color-iris-950: #1b1b37;
56
+
57
+ /* Base Color Scale - Maps to neutral palette */
58
+ --color-base-50: theme(colors.neutral.50);
59
+ --color-base-100: theme(colors.neutral.100);
60
+ --color-base-200: theme(colors.neutral.200);
61
+ --color-base-300: theme(colors.neutral.300);
62
+ --color-base-400: theme(colors.neutral.400);
63
+ --color-base-500: theme(colors.neutral.500);
64
+ --color-base-600: theme(colors.neutral.600);
65
+ --color-base-700: theme(colors.neutral.700);
66
+ --color-base-800: theme(colors.neutral.800);
67
+ --color-base-900: theme(colors.neutral.900);
68
+ --color-base-950: theme(colors.neutral.950);
69
+
70
+
71
+ /* Background Colors */
72
+ --color-background: var(--color-base-100);
73
+ --color-background-secondary: var(--color-base-50);
74
+ --color-background-tertiary: var(--color-base-100);
75
+
76
+ /* Page Colors */
77
+ --color-page: var(--color-base-100);
78
+ --color-page-secondary: var(--color-base-200);
79
+
80
+ /* Card Colors */
81
+ --color-card: theme(colors.white);
82
+ --color-card-hover: var(--color-base-100);
83
+ --color-card-active: var(--color-base-100);
84
+ --color-card-elevated: theme(colors.white);
85
+
86
+ /* Input Colors */
87
+ --color-input: var(--color-base-200);
88
+ --color-input-hover: var(--color-base-100);
89
+ --color-input-focus: var(--color-base-100);
90
+ --color-input-disabled: var(--color-base-100);
91
+
92
+ /* Text Colors */
93
+ --color-headline: var(--color-base-900);
94
+ --color-body: var(--color-base-800);
95
+ --color-description: var(--color-base-600);
96
+ --color-caption: var(--color-base-500);
97
+ --color-input-placeholder: var(--color-base-400);
98
+ --color-label: var(--color-base-700);
99
+ --color-link: theme(colors.brand.600);
100
+ --color-link-hover: theme(colors.brand.700);
101
+ --color-success-text: var(--color-success);
102
+ --color-warning-text: theme(colors.amber.700);
103
+ --color-neutral-text: var(--color-base-700);
104
+ --color-energetic-text: theme(colors.citron.700);
105
+ --color-error-text: theme(colors.red.700);
106
+ --color-inverse: theme(colors.white);
107
+ --color-disabled: var(--color-base-400);
108
+
109
+ /* Border Colors */
110
+ --color-border: var(--color-base-200);
111
+ --color-border-weak: var(--color-base-300);
112
+ --color-border-medium: var(--color-base-400);
113
+ --color-border-strong: var(--color-base-500);
114
+
115
+ /* Focus Colors */
116
+ --color-focus: theme(colors.brand.500);
117
+ --color-focus-weak: theme(colors.brand.600);
118
+ --color-focus-medium: theme(colors.brand.700);
119
+ --color-focus-strong: theme(colors.brand.800);
120
+
121
+ /* Primary Colors */
122
+ --color-primary: theme(colors.brand.600);
123
+ --color-primary-weak: theme(colors.brand.700);
124
+ --color-primary-medium: theme(colors.brand.800);
125
+ --color-primary-strong: theme(colors.brand.900);
126
+
127
+ /* Secondary Colors */
128
+ --color-secondary: var(--color-base-600);
129
+ --color-secondary-weak: var(--color-base-700);
130
+ --color-secondary-medium: var(--color-base-800);
131
+ --color-secondary-strong: var(--color-base-900);
132
+
133
+ /* Success Colors */
134
+ --color-success: theme(colors.pine.600);
135
+ --color-success-weak: theme(colors.pine.700);
136
+ --color-success-medium: theme(colors.pine.800);
137
+ --color-success-strong: theme(colors.pine.900);
138
+
139
+ /* Warning Colors */
140
+ --color-warning: theme(colors.amber.500);
141
+ --color-warning-weak: theme(colors.amber.600);
142
+ --color-warning-medium: theme(colors.amber.400);
143
+ --color-warning-strong: theme(colors.amber.300);
144
+
145
+ /* Error Colors */
146
+ --color-error: theme(colors.red.500);
147
+ --color-error-weak: theme(colors.red.600);
148
+ --color-error-medium: theme(colors.red.400);
149
+ --color-error-strong: theme(colors.red.300);
150
+
151
+ /* Energetic Colors (Citron) */
152
+ --color-energetic: theme(colors.citron.500);
153
+ --color-energetic-weak: theme(colors.citron.600);
154
+ --color-energetic-medium: theme(colors.citron.400);
155
+ --color-energetic-strong: theme(colors.citron.300);
156
+
157
+ /* Neutral Colors */
158
+ --color-neutral: var(--color-base-600);
159
+ --color-neutral-weak: var(--color-base-700);
160
+ --color-neutral-medium: var(--color-base-800);
161
+ --color-neutral-strong: var(--color-base-900);
162
+
163
+ /* Info Colors */
164
+ --color-info: theme(colors.iris.600);
165
+ --color-info-weak: theme(colors.iris.700);
166
+ --color-info-medium: theme(colors.iris.800);
167
+ --color-info-strong: theme(colors.iris.900);
168
+ /* Text alias */
169
+ --color-info-text: var(--color-info);
170
+
171
+ /* Action Colors - For interactive elements like buttons */
172
+ /* Primary Actions */
173
+ --color-action-primary: theme(colors.brand.800);
174
+ --color-action-primary-hover: theme(colors.brand.900);
175
+ --color-action-primary-active: theme(colors.brand.600);
176
+ --color-action-primary-disabled: theme(colors.brand.400);
177
+ --color-action-primary-subtle: theme(colors.brand.100);
178
+ --color-action-primary-subtle-hover: theme(colors.brand.200);
179
+
180
+ /* Secondary Actions */
181
+ --color-action-secondary: var(--color-base-600);
182
+ --color-action-secondary-hover: var(--color-base-700);
183
+ --color-action-secondary-active: var(--color-base-800);
184
+ --color-action-secondary-disabled: var(--color-base-300);
185
+ --color-action-secondary-subtle: var(--color-base-100);
186
+ --color-action-secondary-subtle-hover: var(--color-base-200);
187
+
188
+ /* Danger Actions */
189
+ --color-action-danger: theme(colors.red.600);
190
+ --color-action-danger-hover: theme(colors.red.700);
191
+ --color-action-danger-active: theme(colors.red.800);
192
+ --color-action-danger-disabled: theme(colors.red.300);
193
+ --color-action-danger-subtle: theme(colors.red.50);
194
+ --color-action-danger-subtle-hover: theme(colors.red.100);
195
+
196
+ /* Shadow Colors */
197
+ --shadow-color: 0 0 0;
198
+ --shadow-opacity: 0.1;
199
+ --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
200
+ --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
201
+ --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
202
+ --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
203
+
204
+ /* Spacing */
205
+ --spacing-xs: 0.25rem;
206
+ --spacing-sm: 0.5rem;
207
+ --spacing-md: 1rem;
208
+ --spacing-lg: 1.5rem;
209
+ --spacing-xl: 2rem;
210
+ --spacing-2xl: 3rem;
211
+
212
+ /* Border Radius */
213
+ --radius-sm: 0.25rem;
214
+ --radius-md: 0.375rem;
215
+ --radius-lg: 0.5rem;
216
+ --radius-xl: 0.75rem;
217
+
218
+ /* Z-index */
219
+ --z-dropdown: 1000;
220
+ --z-sticky: 1020;
221
+ --z-fixed: 1030;
222
+ --z-modal-backdrop: 1040;
223
+ --z-modal: 1050;
224
+ --z-popover: 1060;
225
+ --z-tooltip: 1070;
226
+ --z-toast: 1080;
227
+ }
package/dist/zabi-components-theme.css ADDED
@@ -0,0 +1,229 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ /* Typography - Nunito Sans font family */
5
+ --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
6
+
7
+ /* Brand Color Scale */
8
+ --color-brand-50: #f7faff;
9
+ --color-brand-100: #edf2fb; /* provided */
10
+ --color-brand-200: #dfe7fb;
11
+ --color-brand-300: #ccdbfd; /* provided */
12
+ --color-brand-400: #abc4ff; /* provided */
13
+ --color-brand-500: #8fa8ff;
14
+ --color-brand-600: #6e84fa;
15
+ --color-brand-700: #5366e2;
16
+ --color-brand-800: #3f4fc0;
17
+ --color-brand-900: #2f3c99;
18
+ --color-brand-950: #1f2866;
19
+
20
+ /* Citron Color Scale */
21
+ --color-citron-50: #f9faeb;
22
+ --color-citron-100: #f1f5cf;
23
+ --color-citron-200: #e4ecaa;
24
+ --color-citron-300: #d5e184;
25
+ --color-citron-400: #c7d460;
26
+ --color-citron-500: #bbbe64; /* provided */
27
+ --color-citron-600: #a3a852;
28
+ --color-citron-700: #848a43;
29
+ --color-citron-800: #666c35;
30
+ --color-citron-900: #4d5229;
31
+ --color-citron-950: #323518;
32
+
33
+ /* Pine Color Scale */
34
+ --color-pine-50: #e9f6f2;
35
+ --color-pine-100: #d2ece4;
36
+ --color-pine-200: #a7d9c9;
37
+ --color-pine-300: #78c4ad;
38
+ --color-pine-400: #49ad91;
39
+ --color-pine-500: #0C5D43; /* provided */
40
+ --color-pine-600: #0a513a;
41
+ --color-pine-700: #084532;
42
+ --color-pine-800: #063a2a;
43
+ --color-pine-900: #04231a;
44
+ --color-pine-950: #02160f;
45
+
46
+ /* Iris Color Scale */
47
+ --color-iris-50: #f4f4fa;
48
+ --color-iris-100: #e9e9f7;
49
+ --color-iris-200: #d6d6f0;
50
+ --color-iris-300: #bdbde6;
51
+ --color-iris-400: #a3a3d8;
52
+ --color-iris-500: #6969B3; /* provided */
53
+ --color-iris-600: #58589e;
54
+ --color-iris-700: #474788;
55
+ --color-iris-800: #38386f;
56
+ --color-iris-900: #2a2a56;
57
+ --color-iris-950: #1b1b37;
58
+
59
+ /* Base Color Scale - Maps to neutral palette */
60
+ --color-base-50: theme(colors.neutral.50);
61
+ --color-base-100: theme(colors.neutral.100);
62
+ --color-base-200: theme(colors.neutral.200);
63
+ --color-base-300: theme(colors.neutral.300);
64
+ --color-base-400: theme(colors.neutral.400);
65
+ --color-base-500: theme(colors.neutral.500);
66
+ --color-base-600: theme(colors.neutral.600);
67
+ --color-base-700: theme(colors.neutral.700);
68
+ --color-base-800: theme(colors.neutral.800);
69
+ --color-base-900: theme(colors.neutral.900);
70
+ --color-base-950: theme(colors.neutral.950);
71
+
72
+
73
+ /* Background Colors */
74
+ --color-background: var(--color-base-100);
75
+ --color-background-secondary: var(--color-base-50);
76
+ --color-background-tertiary: var(--color-base-100);
77
+
78
+ /* Page Colors */
79
+ --color-page: var(--color-base-100);
80
+ --color-page-secondary: var(--color-base-200);
81
+
82
+ /* Card Colors */
83
+ --color-card: theme(colors.white);
84
+ --color-card-hover: var(--color-base-100);
85
+ --color-card-active: var(--color-base-100);
86
+ --color-card-elevated: theme(colors.white);
87
+
88
+ /* Input Colors */
89
+ --color-input: var(--color-base-200);
90
+ --color-input-hover: var(--color-base-100);
91
+ --color-input-focus: var(--color-base-100);
92
+ --color-input-disabled: var(--color-base-100);
93
+
94
+ /* Text Colors */
95
+ --color-headline: var(--color-base-900);
96
+ --color-body: var(--color-base-800);
97
+ --color-description: var(--color-base-600);
98
+ --color-caption: var(--color-base-500);
99
+ --color-input-placeholder: var(--color-base-400);
100
+ --color-label: var(--color-base-700);
101
+ --color-link: theme(colors.brand.600);
102
+ --color-link-hover: theme(colors.brand.700);
103
+ --color-success-text: var(--color-success);
104
+ --color-warning-text: theme(colors.amber.700);
105
+ --color-neutral-text: var(--color-base-700);
106
+ --color-energetic-text: theme(colors.citron.700);
107
+ --color-error-text: theme(colors.red.700);
108
+ --color-inverse: theme(colors.white);
109
+ --color-disabled: var(--color-base-400);
110
+
111
+ /* Border Colors */
112
+ --color-border: var(--color-base-200);
113
+ --color-border-weak: var(--color-base-300);
114
+ --color-border-medium: var(--color-base-400);
115
+ --color-border-strong: var(--color-base-500);
116
+
117
+ /* Focus Colors */
118
+ --color-focus: theme(colors.brand.500);
119
+ --color-focus-weak: theme(colors.brand.600);
120
+ --color-focus-medium: theme(colors.brand.700);
121
+ --color-focus-strong: theme(colors.brand.800);
122
+
123
+ /* Primary Colors */
124
+ --color-primary: theme(colors.brand.600);
125
+ --color-primary-weak: theme(colors.brand.700);
126
+ --color-primary-medium: theme(colors.brand.800);
127
+ --color-primary-strong: theme(colors.brand.900);
128
+
129
+ /* Secondary Colors */
130
+ --color-secondary: var(--color-base-600);
131
+ --color-secondary-weak: var(--color-base-700);
132
+ --color-secondary-medium: var(--color-base-800);
133
+ --color-secondary-strong: var(--color-base-900);
134
+
135
+ /* Success Colors */
136
+ --color-success: theme(colors.pine.600);
137
+ --color-success-weak: theme(colors.pine.700);
138
+ --color-success-medium: theme(colors.pine.800);
139
+ --color-success-strong: theme(colors.pine.900);
140
+
141
+ /* Warning Colors */
142
+ --color-warning: theme(colors.amber.500);
143
+ --color-warning-weak: theme(colors.amber.600);
144
+ --color-warning-medium: theme(colors.amber.400);
145
+ --color-warning-strong: theme(colors.amber.300);
146
+
147
+ /* Error Colors */
148
+ --color-error: theme(colors.red.500);
149
+ --color-error-weak: theme(colors.red.600);
150
+ --color-error-medium: theme(colors.red.400);
151
+ --color-error-strong: theme(colors.red.300);
152
+
153
+ /* Energetic Colors (Citron) */
154
+ --color-energetic: theme(colors.citron.500);
155
+ --color-energetic-weak: theme(colors.citron.600);
156
+ --color-energetic-medium: theme(colors.citron.400);
157
+ --color-energetic-strong: theme(colors.citron.300);
158
+
159
+ /* Neutral Colors */
160
+ --color-neutral: var(--color-base-600);
161
+ --color-neutral-weak: var(--color-base-700);
162
+ --color-neutral-medium: var(--color-base-800);
163
+ --color-neutral-strong: var(--color-base-900);
164
+
165
+ /* Info Colors */
166
+ --color-info: theme(colors.iris.600);
167
+ --color-info-weak: theme(colors.iris.700);
168
+ --color-info-medium: theme(colors.iris.800);
169
+ --color-info-strong: theme(colors.iris.900);
170
+ /* Text alias */
171
+ --color-info-text: var(--color-info);
172
+
173
+ /* Action Colors - For interactive elements like buttons */
174
+ /* Primary Actions */
175
+ --color-action-primary: theme(colors.brand.800);
176
+ --color-action-primary-hover: theme(colors.brand.900);
177
+ --color-action-primary-active: theme(colors.brand.600);
178
+ --color-action-primary-disabled: theme(colors.brand.400);
179
+ --color-action-primary-subtle: theme(colors.brand.100);
180
+ --color-action-primary-subtle-hover: theme(colors.brand.200);
181
+
182
+ /* Secondary Actions */
183
+ --color-action-secondary: var(--color-base-600);
184
+ --color-action-secondary-hover: var(--color-base-700);
185
+ --color-action-secondary-active: var(--color-base-800);
186
+ --color-action-secondary-disabled: var(--color-base-300);
187
+ --color-action-secondary-subtle: var(--color-base-100);
188
+ --color-action-secondary-subtle-hover: var(--color-base-200);
189
+
190
+ /* Danger Actions */
191
+ --color-action-danger: theme(colors.red.600);
192
+ --color-action-danger-hover: theme(colors.red.700);
193
+ --color-action-danger-active: theme(colors.red.800);
194
+ --color-action-danger-disabled: theme(colors.red.300);
195
+ --color-action-danger-subtle: theme(colors.red.50);
196
+ --color-action-danger-subtle-hover: theme(colors.red.100);
197
+
198
+ /* Shadow Colors */
199
+ --shadow-color: 0 0 0;
200
+ --shadow-opacity: 0.1;
201
+ --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
202
+ --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
203
+ --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
204
+ --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
205
+
206
+ /* Spacing */
207
+ --spacing-xs: 0.25rem;
208
+ --spacing-sm: 0.5rem;
209
+ --spacing-md: 1rem;
210
+ --spacing-lg: 1.5rem;
211
+ --spacing-xl: 2rem;
212
+ --spacing-2xl: 3rem;
213
+
214
+ /* Border Radius */
215
+ --radius-sm: 0.25rem;
216
+ --radius-md: 0.375rem;
217
+ --radius-lg: 0.5rem;
218
+ --radius-xl: 0.75rem;
219
+
220
+ /* Z-index */
221
+ --z-dropdown: 1000;
222
+ --z-sticky: 1020;
223
+ --z-fixed: 1030;
224
+ --z-modal-backdrop: 1040;
225
+ --z-modal: 1050;
226
+ --z-popover: 1060;
227
+ --z-tooltip: 1070;
228
+ --z-toast: 1080;
229
+ }