zabi-components 5.0.17 → 5.0.18

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 (65) hide show
  1. package/README.md +124 -23
  2. package/dist/SSRSafe.svelte +0 -3
  3. package/dist/atoms/Badge.svelte +19 -34
  4. package/dist/atoms/Badge.svelte.d.ts +6 -5
  5. package/dist/atoms/Button.svelte +10 -9
  6. package/dist/atoms/Button.svelte.d.ts +3 -2
  7. package/dist/atoms/Card.svelte +74 -23
  8. package/dist/atoms/Card.svelte.d.ts +3 -1
  9. package/dist/atoms/CardContent.svelte +24 -0
  10. package/dist/atoms/CardContent.svelte.d.ts +8 -0
  11. package/dist/atoms/CardDescription.svelte +24 -0
  12. package/dist/atoms/CardDescription.svelte.d.ts +8 -0
  13. package/dist/atoms/CardFooter.svelte +24 -0
  14. package/dist/atoms/CardFooter.svelte.d.ts +8 -0
  15. package/dist/atoms/CardHeader.svelte +24 -0
  16. package/dist/atoms/CardHeader.svelte.d.ts +8 -0
  17. package/dist/atoms/CardTitle.svelte +33 -0
  18. package/dist/atoms/CardTitle.svelte.d.ts +9 -0
  19. package/dist/atoms/Checkbox.svelte +0 -4
  20. package/dist/atoms/CodeBlock.svelte +0 -3
  21. package/dist/atoms/ColorPicker.svelte +33 -65
  22. package/dist/atoms/FeatureCard.svelte +0 -10
  23. package/dist/atoms/FeatureCard.svelte.d.ts +0 -8
  24. package/dist/atoms/Heading.svelte +0 -2
  25. package/dist/atoms/Input.svelte +3 -12
  26. package/dist/atoms/Input.svelte.d.ts +3 -2
  27. package/dist/atoms/Progress.svelte +0 -3
  28. package/dist/atoms/Select.svelte +0 -14
  29. package/dist/atoms/Textarea.svelte +3 -9
  30. package/dist/atoms/Textarea.svelte.d.ts +3 -1
  31. package/dist/atoms/ThemeToggle.svelte +0 -7
  32. package/dist/atoms/Toast.svelte +0 -1
  33. package/dist/atoms/Toggle.svelte +0 -6
  34. package/dist/atoms/Tooltip.svelte +0 -12
  35. package/dist/atoms/index.d.ts +5 -0
  36. package/dist/atoms/index.js +5 -1
  37. package/dist/components/atoms/index.d.ts +5 -0
  38. package/dist/components/atoms/index.d.ts.map +1 -1
  39. package/dist/components/index.d.ts.map +1 -1
  40. package/dist/components/molecules/index.d.ts.map +1 -1
  41. package/dist/components/organisms/index.d.ts.map +1 -1
  42. package/dist/index.js +0 -23
  43. package/dist/molecules/Alert.svelte +3 -13
  44. package/dist/molecules/Alert.svelte.d.ts +2 -1
  45. package/dist/molecules/ComponentDemo.svelte +0 -2
  46. package/dist/molecules/ContactForm.svelte +21 -12
  47. package/dist/molecules/Dropdown.svelte +100 -6
  48. package/dist/molecules/Dropdown.svelte.d.ts +1 -0
  49. package/dist/molecules/Form.svelte +0 -1
  50. package/dist/molecules/ImageUpload.svelte +0 -4
  51. package/dist/molecules/Modal.svelte +29 -5
  52. package/dist/molecules/SlideUp.svelte +0 -2
  53. package/dist/molecules/Tabs.svelte +0 -2
  54. package/dist/molecules/index.js +0 -1
  55. package/dist/organisms/Navbar.svelte +0 -7
  56. package/dist/organisms/Navigation.svelte +0 -6
  57. package/dist/organisms/index.js +0 -1
  58. package/dist/routes/lib/variant-utils.ts +3 -1
  59. package/dist/zabi-components-colors.css +246 -178
  60. package/dist/zabi-components-theme-dark-only.css +11 -2
  61. package/dist/zabi-components-theme-dark.css +11 -2
  62. package/dist/zabi-components-theme-only.css +32 -24
  63. package/dist/zabi-components-theme.css +32 -24
  64. package/dist/zabi-components.css +259 -83
  65. package/package.json +2 -2
package/dist/zabi-components-theme-only.css CHANGED
@@ -4,10 +4,10 @@
4
4
 
5
5
  /* Brand Color Scale */
6
6
  --color-brand-50: #f7faff;
7
- --color-brand-100: #edf2fb; /* provided */
7
+ --color-brand-100: #edf2fb;
8
8
  --color-brand-200: #dfe7fb;
9
- --color-brand-300: #ccdbfd; /* provided */
10
- --color-brand-400: #abc4ff; /* provided */
9
+ --color-brand-300: #ccdbfd;
10
+ --color-brand-400: #abc4ff;
11
11
  --color-brand-500: #8fa8ff;
12
12
  --color-brand-600: #6e84fa;
13
13
  --color-brand-700: #5366e2;
@@ -21,7 +21,7 @@
21
21
  --color-citron-200: #e4ecaa;
22
22
  --color-citron-300: #d5e184;
23
23
  --color-citron-400: #c7d460;
24
- --color-citron-500: #bbbe64; /* provided */
24
+ --color-citron-500: #bbbe64;
25
25
  --color-citron-600: #a3a852;
26
26
  --color-citron-700: #848a43;
27
27
  --color-citron-800: #666c35;
@@ -34,7 +34,7 @@
34
34
  --color-pine-200: #a7d9c9;
35
35
  --color-pine-300: #78c4ad;
36
36
  --color-pine-400: #49ad91;
37
- --color-pine-500: #0C5D43; /* provided */
37
+ --color-pine-500: #0C5D43;
38
38
  --color-pine-600: #0a513a;
39
39
  --color-pine-700: #084532;
40
40
  --color-pine-800: #063a2a;
@@ -47,7 +47,7 @@
47
47
  --color-iris-200: #d6d6f0;
48
48
  --color-iris-300: #bdbde6;
49
49
  --color-iris-400: #a3a3d8;
50
- --color-iris-500: #6969B3; /* provided */
50
+ --color-iris-500: #6969B3;
51
51
  --color-iris-600: #58589e;
52
52
  --color-iris-700: #474788;
53
53
  --color-iris-800: #38386f;
@@ -83,6 +83,9 @@
83
83
  --color-card-active: var(--color-base-100);
84
84
  --color-card-elevated: theme(colors.white);
85
85
 
86
+ /* Overlay Colors */
87
+ --color-overlay: rgba(0, 0, 0, 0.5);
88
+
86
89
  /* Input Colors */
87
90
  --color-input: var(--color-base-200);
88
91
  --color-input-hover: var(--color-base-100);
@@ -168,24 +171,29 @@
168
171
  /* Text alias */
169
172
  --color-info-text: var(--color-info);
170
173
 
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 */
174
+ /* ========================================
175
+ ACTION COLORS - For interactive elements (buttons, links, etc.)
176
+ ======================================== */
177
+
178
+ /* Primary Actions - Used by bg-action-primary utility class */
179
+ /* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
180
+ --color-action-primary: var(--color-brand-950);
181
+ --color-action-primary-hover: var(--color-brand-900);
182
+ --color-action-primary-active: var(--color-brand-400);
183
+ --color-action-primary-disabled: var(--color-brand-500);
184
+ --color-action-primary-subtle: var(--color-brand-100);
185
+ --color-action-primary-subtle-hover: var(--color-brand-200);
186
+ --color-action-primary-text: var(--color-brand-50);
187
+
188
+ /* Secondary Actions - Used by bg-action-secondary utility class */
189
+ --color-action-secondary: var(--color-brand-200);
190
+ --color-action-secondary-hover: var(--color-brand-100);
191
+ --color-action-secondary-active: var(--color-brand-400);
192
+ --color-action-secondary-disabled: var(--color-brand-500);
193
+ --color-action-secondary-subtle: var(--color-brand-600);
194
+ --color-action-secondary-subtle-hover: var(--color-brand-700);
195
+
196
+ /* Danger Actions - Used by bg-action-danger utility class */
189
197
  --color-action-danger: theme(colors.red.600);
190
198
  --color-action-danger-hover: theme(colors.red.700);
191
199
  --color-action-danger-active: theme(colors.red.800);
package/dist/zabi-components-theme.css CHANGED
@@ -6,10 +6,10 @@
6
6
 
7
7
  /* Brand Color Scale */
8
8
  --color-brand-50: #f7faff;
9
- --color-brand-100: #edf2fb; /* provided */
9
+ --color-brand-100: #edf2fb;
10
10
  --color-brand-200: #dfe7fb;
11
- --color-brand-300: #ccdbfd; /* provided */
12
- --color-brand-400: #abc4ff; /* provided */
11
+ --color-brand-300: #ccdbfd;
12
+ --color-brand-400: #abc4ff;
13
13
  --color-brand-500: #8fa8ff;
14
14
  --color-brand-600: #6e84fa;
15
15
  --color-brand-700: #5366e2;
@@ -23,7 +23,7 @@
23
23
  --color-citron-200: #e4ecaa;
24
24
  --color-citron-300: #d5e184;
25
25
  --color-citron-400: #c7d460;
26
- --color-citron-500: #bbbe64; /* provided */
26
+ --color-citron-500: #bbbe64;
27
27
  --color-citron-600: #a3a852;
28
28
  --color-citron-700: #848a43;
29
29
  --color-citron-800: #666c35;
@@ -36,7 +36,7 @@
36
36
  --color-pine-200: #a7d9c9;
37
37
  --color-pine-300: #78c4ad;
38
38
  --color-pine-400: #49ad91;
39
- --color-pine-500: #0C5D43; /* provided */
39
+ --color-pine-500: #0C5D43;
40
40
  --color-pine-600: #0a513a;
41
41
  --color-pine-700: #084532;
42
42
  --color-pine-800: #063a2a;
@@ -49,7 +49,7 @@
49
49
  --color-iris-200: #d6d6f0;
50
50
  --color-iris-300: #bdbde6;
51
51
  --color-iris-400: #a3a3d8;
52
- --color-iris-500: #6969B3; /* provided */
52
+ --color-iris-500: #6969B3;
53
53
  --color-iris-600: #58589e;
54
54
  --color-iris-700: #474788;
55
55
  --color-iris-800: #38386f;
@@ -85,6 +85,9 @@
85
85
  --color-card-active: var(--color-base-100);
86
86
  --color-card-elevated: theme(colors.white);
87
87
 
88
+ /* Overlay Colors */
89
+ --color-overlay: rgba(0, 0, 0, 0.5);
90
+
88
91
  /* Input Colors */
89
92
  --color-input: var(--color-base-200);
90
93
  --color-input-hover: var(--color-base-100);
@@ -170,24 +173,29 @@
170
173
  /* Text alias */
171
174
  --color-info-text: var(--color-info);
172
175
 
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 */
176
+ /* ========================================
177
+ ACTION COLORS - For interactive elements (buttons, links, etc.)
178
+ ======================================== */
179
+
180
+ /* Primary Actions - Used by bg-action-primary utility class */
181
+ /* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
182
+ --color-action-primary: var(--color-brand-950);
183
+ --color-action-primary-hover: var(--color-brand-900);
184
+ --color-action-primary-active: var(--color-brand-400);
185
+ --color-action-primary-disabled: var(--color-brand-500);
186
+ --color-action-primary-subtle: var(--color-brand-100);
187
+ --color-action-primary-subtle-hover: var(--color-brand-200);
188
+ --color-action-primary-text: var(--color-brand-50);
189
+
190
+ /* Secondary Actions - Used by bg-action-secondary utility class */
191
+ --color-action-secondary: var(--color-brand-200);
192
+ --color-action-secondary-hover: var(--color-brand-100);
193
+ --color-action-secondary-active: var(--color-brand-400);
194
+ --color-action-secondary-disabled: var(--color-brand-500);
195
+ --color-action-secondary-subtle: var(--color-brand-600);
196
+ --color-action-secondary-subtle-hover: var(--color-brand-700);
197
+
198
+ /* Danger Actions - Used by bg-action-danger utility class */
191
199
  --color-action-danger: theme(colors.red.600);
192
200
  --color-action-danger-hover: theme(colors.red.700);
193
201
  --color-action-danger-active: theme(colors.red.800);