svelte-comp 1.3.5 → 1.3.6

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 (46) hide show
  1. package/LICENSE.md +21 -21
  2. package/README.md +101 -101
  3. package/dist/App.svelte +1046 -1046
  4. package/dist/Container.svelte +59 -59
  5. package/dist/app.css +234 -234
  6. package/dist/app.d.ts +10 -10
  7. package/dist/lib/Accordion.svelte +155 -155
  8. package/dist/lib/Badge.svelte +44 -44
  9. package/dist/lib/Button.svelte +185 -185
  10. package/dist/lib/Calendar.svelte +384 -384
  11. package/dist/lib/Card.svelte +103 -103
  12. package/dist/lib/Carousel.svelte +293 -293
  13. package/dist/lib/CheckBox.svelte +210 -210
  14. package/dist/lib/CodeView.svelte +308 -308
  15. package/dist/lib/ColorPicker.svelte +159 -159
  16. package/dist/lib/ContextMenu.svelte +328 -328
  17. package/dist/lib/DatePicker.svelte +246 -246
  18. package/dist/lib/Dialog.svelte +233 -233
  19. package/dist/lib/Field.svelte +299 -299
  20. package/dist/lib/FilePicker.svelte +295 -295
  21. package/dist/lib/Form.svelte +438 -438
  22. package/dist/lib/Hamburger.svelte +217 -217
  23. package/dist/lib/InstallPWA.svelte +94 -94
  24. package/dist/lib/Menu.svelte +623 -623
  25. package/dist/lib/NoticeBase.svelte +140 -140
  26. package/dist/lib/PaginatedCard.svelte +73 -73
  27. package/dist/lib/Pagination.svelte +119 -119
  28. package/dist/lib/PrimaryColorSelect.svelte +111 -111
  29. package/dist/lib/ProgressBar.svelte +141 -141
  30. package/dist/lib/ProgressCircle.svelte +190 -190
  31. package/dist/lib/Radio.svelte +189 -189
  32. package/dist/lib/SearchInput.svelte +104 -104
  33. package/dist/lib/Select.svelte +524 -524
  34. package/dist/lib/Slider.svelte +253 -253
  35. package/dist/lib/Splitter.svelte +159 -159
  36. package/dist/lib/Switch.svelte +168 -168
  37. package/dist/lib/Table.svelte +299 -299
  38. package/dist/lib/Tabs.svelte +213 -213
  39. package/dist/lib/ThemeToggle.svelte +128 -128
  40. package/dist/lib/TimePicker.svelte +312 -312
  41. package/dist/lib/TimePickerNew.svelte +634 -634
  42. package/dist/lib/Toast.svelte +123 -123
  43. package/dist/lib/Tooltip.svelte +110 -110
  44. package/dist/lib/Topbar.svelte +112 -112
  45. package/dist/styles.css +234 -234
  46. package/package.json +52 -52
package/dist/Container.svelte CHANGED
@@ -1,60 +1,60 @@
1
- <!-- src/Container.svelte -->
2
- <script lang="ts">
3
- import type { Snippet } from "svelte";
4
- import { cx } from "./utils";
5
-
6
- type Props = {
7
- header?: Snippet;
8
- footer?: Snippet;
9
- left?: Snippet;
10
- right?: Snippet;
11
- children?: Snippet;
12
- class?: string;
13
- };
14
-
15
- let {
16
- header,
17
- footer,
18
- left,
19
- right,
20
- children,
21
- class: externalClass = "",
22
- }: Props = $props();
23
-
24
- const baseClass =
25
- "min-h-dvh w-full bg-[var(--color-bg-page,oklch(98%_0_0))] text-[var(--color-text-default,oklch(15%_0_0))] transition-colors duration-[var(--transition-normal,300ms)]";
26
-
27
- const rootClass = $derived(cx(baseClass, externalClass));
28
- </script>
29
-
30
- <div class={rootClass}>
31
- <div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
32
- {#if header}
33
- <header class="p-[var(--spacing-md,1rem)]">
34
- {@render header?.()}
35
- </header>
36
- {/if}
37
-
38
- {#if left}
39
- <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
40
- {@render left?.()}
41
- </aside>
42
- {/if}
43
-
44
- <main class="p-[var(--spacing-md,1rem)]">
45
- {@render children?.()}
46
- </main>
47
-
48
- {#if right}
49
- <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
50
- {@render right?.()}
51
- </aside>
52
- {/if}
53
-
54
- {#if footer}
55
- <footer class="p-[var(--spacing-md,1rem)]">
56
- {@render footer?.()}
57
- </footer>
58
- {/if}
59
- </div>
1
+ <!-- src/Container.svelte -->
2
+ <script lang="ts">
3
+ import type { Snippet } from "svelte";
4
+ import { cx } from "./utils";
5
+
6
+ type Props = {
7
+ header?: Snippet;
8
+ footer?: Snippet;
9
+ left?: Snippet;
10
+ right?: Snippet;
11
+ children?: Snippet;
12
+ class?: string;
13
+ };
14
+
15
+ let {
16
+ header,
17
+ footer,
18
+ left,
19
+ right,
20
+ children,
21
+ class: externalClass = "",
22
+ }: Props = $props();
23
+
24
+ const baseClass =
25
+ "min-h-dvh w-full bg-[var(--color-bg-page,oklch(98%_0_0))] text-[var(--color-text-default,oklch(15%_0_0))] transition-colors duration-[var(--transition-normal,300ms)]";
26
+
27
+ const rootClass = $derived(cx(baseClass, externalClass));
28
+ </script>
29
+
30
+ <div class={rootClass}>
31
+ <div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
32
+ {#if header}
33
+ <header class="p-[var(--spacing-md,1rem)]">
34
+ {@render header?.()}
35
+ </header>
36
+ {/if}
37
+
38
+ {#if left}
39
+ <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
40
+ {@render left?.()}
41
+ </aside>
42
+ {/if}
43
+
44
+ <main class="p-[var(--spacing-md,1rem)]">
45
+ {@render children?.()}
46
+ </main>
47
+
48
+ {#if right}
49
+ <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
50
+ {@render right?.()}
51
+ </aside>
52
+ {/if}
53
+
54
+ {#if footer}
55
+ <footer class="p-[var(--spacing-md,1rem)]">
56
+ {@render footer?.()}
57
+ </footer>
58
+ {/if}
59
+ </div>
60
60
  </div>
package/dist/app.css CHANGED
@@ -1,234 +1,234 @@
1
- /* src/app.css */
2
- @import "tailwindcss";
3
-
4
- @custom-variant dark (&:where(.dark, .dark *));
5
-
6
- @theme {
7
- /* COLORS — TEXT */
8
- --color-text-default: oklch(15% 0 0deg);
9
- --color-text-muted: oklch(60% 0 0deg);
10
- --color-text-danger: oklch(92% 0.05 25deg);
11
- --color-text-success: oklch(92% 0.05 150deg);
12
- --color-text-warning: oklch(95% 0.05 90deg);
13
- --color-text-link: oklch(35% 0.3 250deg);
14
- --color-text-red: oklch(50% 0.25 30deg);
15
- --color-text-inverse: oklch(100% 0 0deg);
16
-
17
- /* COLORS — BG */
18
- --color-bg-page: oklch(98% 0 0deg);
19
- --color-bg-surface: oklch(100% 0 0deg);
20
- --color-bg-primary: oklch(62.3% 0.214 259.8deg);
21
- --color-primary: var(--color-bg-primary);
22
- --color-bg-secondary: oklch(80% 0 0deg);
23
- --color-bg-danger: oklch(60% 0.25 30deg);
24
- --color-bg-success: oklch(55% 0.2 150deg);
25
- --color-bg-warning: oklch(75% 0.2 70deg);
26
- --color-bg-muted: oklch(90% 0 0deg);
27
-
28
- /* INTERACTION STATES */
29
- --color-bg-hover: oklch(94% 0 0deg);
30
- --color-bg-active: oklch(88% 0 0deg);
31
-
32
- /* BORDER */
33
- --border-color-default: oklch(85% 0 0deg);
34
- --border-color-primary: oklch(50% 0.19 259.8deg);
35
- --border-color-strong: oklch(75% 0 0deg);
36
- --border-color-focus: oklch(68.7% 0.14 237.5deg);
37
-
38
- /* SHADOW */
39
- --shadow-color: oklch(0% 0 0deg / 0.15);
40
-
41
- /* SPACING */
42
- --spacing-xs: 0.25rem;
43
- --spacing-sm: 0.5rem;
44
- --spacing-md: 1rem;
45
- --spacing-lg: 1.5rem;
46
- --spacing-xl: 2rem;
47
-
48
- /* TYPOGRAPHY */
49
- --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
50
- --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
51
-
52
- /* FONT WEIGHTS */
53
- --font-weight-normal: 400;
54
- --font-weight-medium: 500;
55
- --font-weight-semibold: 600;
56
- --font-weight-bold: 700;
57
-
58
- /* TEXT SIZES */
59
- --text-xs: 0.75rem;
60
- --text-sm: 0.875rem;
61
- --text-md: 1rem;
62
- --text-lg: 1.125rem;
63
- --text-xl: 1.25rem;
64
-
65
- /* LINE HEIGHT & LETTER SPACING */
66
- --line-height-tight: 1.1;
67
- --line-height-normal: 1.4;
68
- --line-height-relaxed: 1.6;
69
- --letter-spacing-tight: -0.01em;
70
- --letter-spacing-normal: 0;
71
- --letter-spacing-wide: 0.02em;
72
-
73
- /* RADIUS */
74
- --radius-sm: 0.125rem;
75
- --radius-md: 0.375rem;
76
- --radius-lg: 0.5rem;
77
- --radius-xl: 0.75rem;
78
- --radius-2xl: 1rem;
79
- --radius-full: 9999px;
80
-
81
- /* TRANSITIONS */
82
- --transition-fast: 150ms;
83
- --transition-normal: 300ms;
84
- --transition-slow: 500ms;
85
- --timing-default: ease-in-out;
86
-
87
- /* OPACITY */
88
- --opacity-disabled: 0.5;
89
- --opacity-hover: 0.9;
90
- --opacity-overlay: 0.7;
91
-
92
- /* Z-INDEX */
93
- --z-base: 0;
94
- --z-dropdown: 10;
95
- --z-overlay: 50;
96
- --z-modal: 100;
97
- --z-toast: 200;
98
- }
99
-
100
- .dark {
101
- /* COLORS — TEXT */
102
- --color-text-default: oklch(98% 0 0deg);
103
- --color-text-muted: oklch(60% 0 0deg);
104
- --color-text-danger: oklch(98% 0.02 25deg);
105
- --color-text-success: oklch(92% 0.05 150deg);
106
- --color-text-warning: oklch(95% 0.05 90deg);
107
- --color-text-link: oklch(65% 0.3 250deg);
108
- --color-text-red: oklch(50% 0.25 30deg);
109
- --color-text-inverse: oklch(100% 0 0deg);
110
-
111
- /* COLORS — BG */
112
- --color-bg-page: oklch(15% 0 0deg);
113
- --color-bg-surface: oklch(26% 0 0deg);
114
- --color-bg-primary: oklch(42% 0.19 259.8deg);
115
- --color-primary: var(--color-bg-primary);
116
- --color-bg-secondary: oklch(45% 0 0deg);
117
- --color-bg-danger: oklch(50% 0.25 30deg);
118
- --color-bg-success: oklch(45% 0.2 150deg);
119
- --color-bg-warning: oklch(65% 0.2 70deg);
120
- --color-bg-muted: oklch(30% 0 0deg);
121
-
122
- /* INTERACTION STATES */
123
- --color-bg-hover: oklch(25% 0 0deg);
124
- --color-bg-active: oklch(18% 0 0deg);
125
-
126
- /* BORDER */
127
- --border-color-default: oklch(35% 0 0deg);
128
- --border-color-primary: oklch(50% 0.17 259.8deg);
129
- --border-color-strong: oklch(45% 0 0deg);
130
- --border-color-focus: oklch(68.7% 0.14 237.5deg);
131
-
132
- /* SHADOW */
133
- --shadow-color: oklch(0% 0 0deg / 0.6);
134
-
135
- /* OPACITY */
136
- --opacity-disabled: 0.4;
137
- --opacity-hover: 0.85;
138
- --opacity-overlay: 0.6;
139
- }
140
-
141
- /* SCROLLBARS */
142
- ::-webkit-scrollbar {
143
- width: 4px;
144
- height: 4px;
145
- }
146
-
147
- ::-webkit-scrollbar-track {
148
- background: transparent;
149
- }
150
-
151
- ::-webkit-scrollbar-thumb {
152
- background: var(--color-bg-secondary);
153
- border-radius: 3px;
154
- }
155
-
156
- ::-webkit-scrollbar-thumb:hover {
157
- background: oklch(from var(--color-bg-secondary) l c h / 0.8);
158
- }
159
-
160
- @supports (scrollbar-width: thin) {
161
- * {
162
- scrollbar-width: thin;
163
- scrollbar-color: var(--color-bg-secondary) transparent;
164
- }
165
-
166
- .dark * {
167
- scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
168
- transparent;
169
- }
170
- }
171
-
172
- .dark ::-webkit-scrollbar-thumb {
173
- background: oklch(from var(--color-bg-secondary) l c h / 0.7);
174
- }
175
-
176
- /* ----------------------------- */
177
- /* 🎨 Primary color palettes */
178
- /* ----------------------------- */
179
-
180
- [data-primary="default"] {
181
- --color-primary: oklch(62.3% 0.214 259.8deg);
182
- --color-bg-primary: var(--color-primary);
183
- --border-color-primary: var(--color-primary);
184
- --border-color-focus: var(--color-primary);
185
- }
186
-
187
- [data-primary="cyan"] {
188
- --color-primary: oklch(86.5% 0.127 207.078);
189
- --color-bg-primary: var(--color-primary);
190
- --border-color-primary: var(--color-primary);
191
- --border-color-focus: var(--color-primary);
192
- }
193
-
194
- [data-primary="red"] {
195
- --color-primary: oklch(58% 0.24 30deg);
196
- --color-bg-primary: var(--color-primary);
197
- --border-color-primary: var(--color-primary);
198
- --border-color-focus: var(--color-primary);
199
- }
200
-
201
- [data-primary="green"] {
202
- --color-primary: oklch(65% 0.22 140deg);
203
- --color-bg-primary: var(--color-primary);
204
- --border-color-primary: var(--color-primary);
205
- --border-color-focus: var(--color-primary);
206
- }
207
-
208
- [data-primary="yellow"] {
209
- --color-primary: oklch(75% 0.18 90deg);
210
- --color-bg-primary: var(--color-primary);
211
- --border-color-primary: var(--color-primary);
212
- --border-color-focus: var(--color-primary);
213
- }
214
-
215
- [data-primary="pink"] {
216
- --color-primary: oklch(70% 0.25 350deg);
217
- --color-bg-primary: var(--color-primary);
218
- --border-color-primary: var(--color-primary);
219
- --border-color-focus: var(--color-primary);
220
- }
221
-
222
- [data-primary="orange"] {
223
- --color-primary: oklch(72% 0.22 60deg);
224
- --color-bg-primary: var(--color-primary);
225
- --border-color-primary: var(--color-primary);
226
- --border-color-focus: var(--color-primary);
227
- }
228
-
229
- [data-primary="purple"] {
230
- --color-primary: oklch(55% 0.22 290deg);
231
- --color-bg-primary: var(--color-primary);
232
- --border-color-primary: var(--color-primary);
233
- --border-color-focus: var(--color-primary);
234
- }
1
+ /* src/app.css */
2
+ @import "tailwindcss";
3
+
4
+ @custom-variant dark (&:where(.dark, .dark *));
5
+
6
+ @theme {
7
+ /* COLORS — TEXT */
8
+ --color-text-default: oklch(15% 0 0deg);
9
+ --color-text-muted: oklch(60% 0 0deg);
10
+ --color-text-danger: oklch(92% 0.05 25deg);
11
+ --color-text-success: oklch(92% 0.05 150deg);
12
+ --color-text-warning: oklch(95% 0.05 90deg);
13
+ --color-text-link: oklch(35% 0.3 250deg);
14
+ --color-text-red: oklch(50% 0.25 30deg);
15
+ --color-text-inverse: oklch(100% 0 0deg);
16
+
17
+ /* COLORS — BG */
18
+ --color-bg-page: oklch(98% 0 0deg);
19
+ --color-bg-surface: oklch(100% 0 0deg);
20
+ --color-bg-primary: oklch(62.3% 0.214 259.8deg);
21
+ --color-primary: var(--color-bg-primary);
22
+ --color-bg-secondary: oklch(80% 0 0deg);
23
+ --color-bg-danger: oklch(60% 0.25 30deg);
24
+ --color-bg-success: oklch(55% 0.2 150deg);
25
+ --color-bg-warning: oklch(75% 0.2 70deg);
26
+ --color-bg-muted: oklch(90% 0 0deg);
27
+
28
+ /* INTERACTION STATES */
29
+ --color-bg-hover: oklch(94% 0 0deg);
30
+ --color-bg-active: oklch(88% 0 0deg);
31
+
32
+ /* BORDER */
33
+ --border-color-default: oklch(85% 0 0deg);
34
+ --border-color-primary: oklch(50% 0.19 259.8deg);
35
+ --border-color-strong: oklch(75% 0 0deg);
36
+ --border-color-focus: oklch(68.7% 0.14 237.5deg);
37
+
38
+ /* SHADOW */
39
+ --shadow-color: oklch(0% 0 0deg / 0.15);
40
+
41
+ /* SPACING */
42
+ --spacing-xs: 0.25rem;
43
+ --spacing-sm: 0.5rem;
44
+ --spacing-md: 1rem;
45
+ --spacing-lg: 1.5rem;
46
+ --spacing-xl: 2rem;
47
+
48
+ /* TYPOGRAPHY */
49
+ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
50
+ --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
51
+
52
+ /* FONT WEIGHTS */
53
+ --font-weight-normal: 400;
54
+ --font-weight-medium: 500;
55
+ --font-weight-semibold: 600;
56
+ --font-weight-bold: 700;
57
+
58
+ /* TEXT SIZES */
59
+ --text-xs: 0.75rem;
60
+ --text-sm: 0.875rem;
61
+ --text-md: 1rem;
62
+ --text-lg: 1.125rem;
63
+ --text-xl: 1.25rem;
64
+
65
+ /* LINE HEIGHT & LETTER SPACING */
66
+ --line-height-tight: 1.1;
67
+ --line-height-normal: 1.4;
68
+ --line-height-relaxed: 1.6;
69
+ --letter-spacing-tight: -0.01em;
70
+ --letter-spacing-normal: 0;
71
+ --letter-spacing-wide: 0.02em;
72
+
73
+ /* RADIUS */
74
+ --radius-sm: 0.125rem;
75
+ --radius-md: 0.375rem;
76
+ --radius-lg: 0.5rem;
77
+ --radius-xl: 0.75rem;
78
+ --radius-2xl: 1rem;
79
+ --radius-full: 9999px;
80
+
81
+ /* TRANSITIONS */
82
+ --transition-fast: 150ms;
83
+ --transition-normal: 300ms;
84
+ --transition-slow: 500ms;
85
+ --timing-default: ease-in-out;
86
+
87
+ /* OPACITY */
88
+ --opacity-disabled: 0.5;
89
+ --opacity-hover: 0.9;
90
+ --opacity-overlay: 0.7;
91
+
92
+ /* Z-INDEX */
93
+ --z-base: 0;
94
+ --z-dropdown: 10;
95
+ --z-overlay: 50;
96
+ --z-modal: 100;
97
+ --z-toast: 200;
98
+ }
99
+
100
+ .dark {
101
+ /* COLORS — TEXT */
102
+ --color-text-default: oklch(98% 0 0deg);
103
+ --color-text-muted: oklch(60% 0 0deg);
104
+ --color-text-danger: oklch(98% 0.02 25deg);
105
+ --color-text-success: oklch(92% 0.05 150deg);
106
+ --color-text-warning: oklch(95% 0.05 90deg);
107
+ --color-text-link: oklch(65% 0.3 250deg);
108
+ --color-text-red: oklch(50% 0.25 30deg);
109
+ --color-text-inverse: oklch(100% 0 0deg);
110
+
111
+ /* COLORS — BG */
112
+ --color-bg-page: oklch(15% 0 0deg);
113
+ --color-bg-surface: oklch(26% 0 0deg);
114
+ --color-bg-primary: oklch(42% 0.19 259.8deg);
115
+ --color-primary: var(--color-bg-primary);
116
+ --color-bg-secondary: oklch(45% 0 0deg);
117
+ --color-bg-danger: oklch(50% 0.25 30deg);
118
+ --color-bg-success: oklch(45% 0.2 150deg);
119
+ --color-bg-warning: oklch(65% 0.2 70deg);
120
+ --color-bg-muted: oklch(30% 0 0deg);
121
+
122
+ /* INTERACTION STATES */
123
+ --color-bg-hover: oklch(25% 0 0deg);
124
+ --color-bg-active: oklch(18% 0 0deg);
125
+
126
+ /* BORDER */
127
+ --border-color-default: oklch(35% 0 0deg);
128
+ --border-color-primary: oklch(50% 0.17 259.8deg);
129
+ --border-color-strong: oklch(45% 0 0deg);
130
+ --border-color-focus: oklch(68.7% 0.14 237.5deg);
131
+
132
+ /* SHADOW */
133
+ --shadow-color: oklch(0% 0 0deg / 0.6);
134
+
135
+ /* OPACITY */
136
+ --opacity-disabled: 0.4;
137
+ --opacity-hover: 0.85;
138
+ --opacity-overlay: 0.6;
139
+ }
140
+
141
+ /* SCROLLBARS */
142
+ ::-webkit-scrollbar {
143
+ width: 4px;
144
+ height: 4px;
145
+ }
146
+
147
+ ::-webkit-scrollbar-track {
148
+ background: transparent;
149
+ }
150
+
151
+ ::-webkit-scrollbar-thumb {
152
+ background: var(--color-bg-secondary);
153
+ border-radius: 3px;
154
+ }
155
+
156
+ ::-webkit-scrollbar-thumb:hover {
157
+ background: oklch(from var(--color-bg-secondary) l c h / 0.8);
158
+ }
159
+
160
+ @supports (scrollbar-width: thin) {
161
+ * {
162
+ scrollbar-width: thin;
163
+ scrollbar-color: var(--color-bg-secondary) transparent;
164
+ }
165
+
166
+ .dark * {
167
+ scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
168
+ transparent;
169
+ }
170
+ }
171
+
172
+ .dark ::-webkit-scrollbar-thumb {
173
+ background: oklch(from var(--color-bg-secondary) l c h / 0.7);
174
+ }
175
+
176
+ /* ----------------------------- */
177
+ /* 🎨 Primary color palettes */
178
+ /* ----------------------------- */
179
+
180
+ [data-primary="default"] {
181
+ --color-primary: oklch(62.3% 0.214 259.8deg);
182
+ --color-bg-primary: var(--color-primary);
183
+ --border-color-primary: var(--color-primary);
184
+ --border-color-focus: var(--color-primary);
185
+ }
186
+
187
+ [data-primary="cyan"] {
188
+ --color-primary: oklch(86.5% 0.127 207.078);
189
+ --color-bg-primary: var(--color-primary);
190
+ --border-color-primary: var(--color-primary);
191
+ --border-color-focus: var(--color-primary);
192
+ }
193
+
194
+ [data-primary="red"] {
195
+ --color-primary: oklch(58% 0.24 30deg);
196
+ --color-bg-primary: var(--color-primary);
197
+ --border-color-primary: var(--color-primary);
198
+ --border-color-focus: var(--color-primary);
199
+ }
200
+
201
+ [data-primary="green"] {
202
+ --color-primary: oklch(65% 0.22 140deg);
203
+ --color-bg-primary: var(--color-primary);
204
+ --border-color-primary: var(--color-primary);
205
+ --border-color-focus: var(--color-primary);
206
+ }
207
+
208
+ [data-primary="yellow"] {
209
+ --color-primary: oklch(75% 0.18 90deg);
210
+ --color-bg-primary: var(--color-primary);
211
+ --border-color-primary: var(--color-primary);
212
+ --border-color-focus: var(--color-primary);
213
+ }
214
+
215
+ [data-primary="pink"] {
216
+ --color-primary: oklch(70% 0.25 350deg);
217
+ --color-bg-primary: var(--color-primary);
218
+ --border-color-primary: var(--color-primary);
219
+ --border-color-focus: var(--color-primary);
220
+ }
221
+
222
+ [data-primary="orange"] {
223
+ --color-primary: oklch(72% 0.22 60deg);
224
+ --color-bg-primary: var(--color-primary);
225
+ --border-color-primary: var(--color-primary);
226
+ --border-color-focus: var(--color-primary);
227
+ }
228
+
229
+ [data-primary="purple"] {
230
+ --color-primary: oklch(55% 0.22 290deg);
231
+ --color-bg-primary: var(--color-primary);
232
+ --border-color-primary: var(--color-primary);
233
+ --border-color-focus: var(--color-primary);
234
+ }
package/dist/app.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- // src/app.d.ts
2
- declare module "*.css" {
3
- const content: string;
4
- export default content;
5
- }
6
-
7
- declare module "prismjs/themes/*.css" {
8
- const content: string;
9
- export default content;
10
- }
1
+ // src/app.d.ts
2
+ declare module "*.css" {
3
+ const content: string;
4
+ export default content;
5
+ }
6
+
7
+ declare module "prismjs/themes/*.css" {
8
+ const content: string;
9
+ export default content;
10
+ }