@flightlesslabs/dodo-ui 0.1.2 → 0.1.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.
Files changed (32) hide show
  1. package/dist/index.d.ts +3 -1
  2. package/dist/index.js +1 -0
  3. package/dist/stories/Getting Started.mdx +2 -2
  4. package/dist/stories/components/Form/Button/Button.stories.svelte +13 -4
  5. package/dist/stories/components/Form/Button/Button.stories.svelte.d.ts +2 -32
  6. package/dist/stories/components/Form/Button/Button.svelte +155 -56
  7. package/dist/stories/components/Form/Button/Button.svelte.d.ts +12 -6
  8. package/dist/stories/components/Form/Button/Color/Color.stories.svelte +1 -4
  9. package/dist/stories/components/Form/Button/IconButton/IconButton.stories.svelte +9 -5
  10. package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte +2 -4
  11. package/dist/stories/components/Form/Button/Size/Size.stories.svelte +1 -4
  12. package/dist/stories/components/Form/Button/Variant/Variant.stories.svelte +1 -4
  13. package/dist/stories/components/Form/Button/utils/scss/mixins.scss +70 -0
  14. package/dist/storybook-types.d.ts +129 -0
  15. package/dist/storybook-types.js +1 -0
  16. package/dist/styles/_colors.css +88 -0
  17. package/dist/styles/_components.css +4 -4
  18. package/dist/types.d.ts +3 -1
  19. package/package.json +1 -1
  20. package/src/lib/index.ts +8 -1
  21. package/src/lib/stories/components/Form/Button/Button.stories.svelte +15 -5
  22. package/src/lib/stories/components/Form/Button/Button.svelte +64 -215
  23. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +1 -4
  24. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +9 -5
  25. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +2 -4
  26. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +1 -4
  27. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +1 -4
  28. package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss +70 -0
  29. package/src/lib/storybook-types.ts +182 -0
  30. package/src/lib/styles/_colors.css +88 -0
  31. package/src/lib/styles/_components.css +4 -4
  32. package/src/lib/types.ts +3 -1
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import './styles/global.css';
2
- export type { ComponentSize } from './types.js';
2
+ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
3
+ /** Form: Button */
3
4
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
5
+ export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import './styles/global.css';
2
+ /** Form: Button */
2
3
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
package/dist/stories/Getting Started.mdx CHANGED
@@ -6,8 +6,8 @@ import { Source } from '@storybook/blocks';
6
6
 
7
7
  <Source dark language='bash' code={`
8
8
  // pnpm
9
- pnpm add @siddacoolpkg/dodo-ui
9
+ pnpm add @flightlesslabs/dodo-ui
10
10
 
11
11
  // npm
12
- npm i @siddacoolpkg/dodo-ui
12
+ npm i @flightlesslabs/dodo-ui
13
13
  `} />
package/dist/stories/components/Form/Button/Button.stories.svelte CHANGED
@@ -27,16 +27,25 @@ export const storyButtonArgTypes = {
27
27
  const { Story } = defineMeta({
28
28
  component: Button,
29
29
  tags: ['autodocs'],
30
- // @ts-ignore
31
- argTypes: {
32
- ...storyButtonArgTypes,
33
- },
30
+ argTypes: storyButtonArgTypes,
34
31
  args: {
35
32
  onclick: fn(),
36
33
  },
37
34
  });
38
35
  </script>
39
36
 
37
+ <!-- ⚠️ Test Button: Do not use! -->
38
+ <Story
39
+ name="Test Button"
40
+ args={{
41
+ outline: false,
42
+ disabled: false,
43
+ compact: false,
44
+ _unsafeChildrenStringForTesting: 'Click me!',
45
+ }}
46
+ />
47
+
48
+ <!-- Button with default style -->
40
49
  <Story name="Default" args={{ outline: false, disabled: false, compact: false }}>
41
50
  <Button>Click me!</Button>
42
51
  </Story>
package/dist/stories/components/Form/Button/Button.stories.svelte.d.ts CHANGED
@@ -1,36 +1,6 @@
1
1
  import Button from './Button.svelte';
2
- export declare const storyButtonArgTypes: {
3
- type: {
4
- control: {
5
- type: string;
6
- };
7
- options: string[];
8
- };
9
- color: {
10
- control: {
11
- type: string;
12
- };
13
- options: string[];
14
- };
15
- variant: {
16
- control: {
17
- type: string;
18
- };
19
- options: string[];
20
- };
21
- roundness: {
22
- control: {
23
- type: string;
24
- };
25
- options: (string | number | boolean)[];
26
- };
27
- size: {
28
- control: {
29
- type: string;
30
- };
31
- options: string[];
32
- };
33
- };
2
+ import type { StoryBookArgTypes } from '../../../../storybook-types.js';
3
+ export declare const storyButtonArgTypes: StoryBookArgTypes;
34
4
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
35
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
36
6
  $$bindings?: Bindings;
package/dist/stories/components/Form/Button/Button.svelte CHANGED
@@ -1,4 +1,7 @@
1
- <script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = 1, variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, } = $props();
1
+ <script lang="ts" module>export {};
2
+ </script>
3
+
4
+ <script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = 1, variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
2
5
  export {};
3
6
  </script>
4
7
 
@@ -11,6 +14,8 @@ export {};
11
14
 
12
15
  {#if children}
13
16
  {@render children()}
17
+ {:else if _unsafeChildrenStringForTesting}
18
+ {_unsafeChildrenStringForTesting}
14
19
  {/if}
15
20
 
16
21
  {#if after}
@@ -70,7 +75,101 @@ export {};
70
75
  </button>
71
76
  {/if}
72
77
 
73
- <style>.dodo-ui-button {
78
+ <style>:global(:root) {
79
+ --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
80
+ --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
81
+ --dodo-ui-button-outline-default: var(--dodo-color-default-400);
82
+ --dodo-ui-button-text-default-bg: var(--dodo-color-default-100);
83
+ --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-200);
84
+ --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-300);
85
+ --dodo-ui-button-solid-default-bg: var(--dodo-color-default-500);
86
+ --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-600);
87
+ --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-700);
88
+ --dodo-ui-button-outline-primary: var(--dodo-color-primary-400);
89
+ --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-100);
90
+ --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-200);
91
+ --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-300);
92
+ --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-500);
93
+ --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-600);
94
+ --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-700);
95
+ --dodo-ui-button-outline-safe: var(--dodo-color-safe-400);
96
+ --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-100);
97
+ --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-200);
98
+ --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-300);
99
+ --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-500);
100
+ --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-600);
101
+ --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-700);
102
+ --dodo-ui-button-outline-warning: var(--dodo-color-warning-400);
103
+ --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-100);
104
+ --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-200);
105
+ --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-300);
106
+ --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-500);
107
+ --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-600);
108
+ --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-700);
109
+ --dodo-ui-button-outline-danger: var(--dodo-color-danger-400);
110
+ --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-100);
111
+ --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-200);
112
+ --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-300);
113
+ --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-500);
114
+ --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-600);
115
+ --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-700);
116
+ --dodo-ui-button-outline-info: var(--dodo-color-info-400);
117
+ --dodo-ui-button-text-info-bg: var(--dodo-color-info-100);
118
+ --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-200);
119
+ --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-300);
120
+ --dodo-ui-button-solid-info-bg: var(--dodo-color-info-500);
121
+ --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-600);
122
+ --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-700);
123
+ }
124
+
125
+ :global(.dodo-theme--dark) {
126
+ --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
127
+ --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
128
+ --dodo-ui-button-outline-default: var(--dodo-color-default-300);
129
+ --dodo-ui-button-text-default-bg: var(--dodo-color-default-50);
130
+ --dodo-ui-button-text-default-hover-bg: var(--dodo-color-default-100);
131
+ --dodo-ui-button-text-default-active-bg: var(--dodo-color-default-200);
132
+ --dodo-ui-button-solid-default-bg: var(--dodo-color-default-300);
133
+ --dodo-ui-button-solid-default-hover-bg: var(--dodo-color-default-200);
134
+ --dodo-ui-button-solid-default-active-bg: var(--dodo-color-default-100);
135
+ --dodo-ui-button-outline-primary: var(--dodo-color-primary-300);
136
+ --dodo-ui-button-text-primary-bg: var(--dodo-color-primary-50);
137
+ --dodo-ui-button-text-primary-hover-bg: var(--dodo-color-primary-100);
138
+ --dodo-ui-button-text-primary-active-bg: var(--dodo-color-primary-200);
139
+ --dodo-ui-button-solid-primary-bg: var(--dodo-color-primary-300);
140
+ --dodo-ui-button-solid-primary-hover-bg: var(--dodo-color-primary-200);
141
+ --dodo-ui-button-solid-primary-active-bg: var(--dodo-color-primary-100);
142
+ --dodo-ui-button-outline-safe: var(--dodo-color-safe-300);
143
+ --dodo-ui-button-text-safe-bg: var(--dodo-color-safe-50);
144
+ --dodo-ui-button-text-safe-hover-bg: var(--dodo-color-safe-100);
145
+ --dodo-ui-button-text-safe-active-bg: var(--dodo-color-safe-200);
146
+ --dodo-ui-button-solid-safe-bg: var(--dodo-color-safe-300);
147
+ --dodo-ui-button-solid-safe-hover-bg: var(--dodo-color-safe-200);
148
+ --dodo-ui-button-solid-safe-active-bg: var(--dodo-color-safe-100);
149
+ --dodo-ui-button-outline-warning: var(--dodo-color-warning-300);
150
+ --dodo-ui-button-text-warning-bg: var(--dodo-color-warning-50);
151
+ --dodo-ui-button-text-warning-hover-bg: var(--dodo-color-warning-100);
152
+ --dodo-ui-button-text-warning-active-bg: var(--dodo-color-warning-200);
153
+ --dodo-ui-button-solid-warning-bg: var(--dodo-color-warning-300);
154
+ --dodo-ui-button-solid-warning-hover-bg: var(--dodo-color-warning-200);
155
+ --dodo-ui-button-solid-warning-active-bg: var(--dodo-color-warning-100);
156
+ --dodo-ui-button-outline-danger: var(--dodo-color-danger-300);
157
+ --dodo-ui-button-text-danger-bg: var(--dodo-color-danger-50);
158
+ --dodo-ui-button-text-danger-hover-bg: var(--dodo-color-danger-100);
159
+ --dodo-ui-button-text-danger-active-bg: var(--dodo-color-danger-200);
160
+ --dodo-ui-button-solid-danger-bg: var(--dodo-color-danger-300);
161
+ --dodo-ui-button-solid-danger-hover-bg: var(--dodo-color-danger-200);
162
+ --dodo-ui-button-solid-danger-active-bg: var(--dodo-color-danger-100);
163
+ --dodo-ui-button-outline-info: var(--dodo-color-info-300);
164
+ --dodo-ui-button-text-info-bg: var(--dodo-color-info-50);
165
+ --dodo-ui-button-text-info-hover-bg: var(--dodo-color-info-100);
166
+ --dodo-ui-button-text-info-active-bg: var(--dodo-color-info-200);
167
+ --dodo-ui-button-solid-info-bg: var(--dodo-color-info-300);
168
+ --dodo-ui-button-solid-info-hover-bg: var(--dodo-color-info-200);
169
+ --dodo-ui-button-solid-info-active-bg: var(--dodo-color-info-100);
170
+ }
171
+
172
+ .dodo-ui-button {
74
173
  cursor: pointer;
75
174
  outline: none;
76
175
  transition: all 150ms;
@@ -123,156 +222,156 @@ export {};
123
222
  }
124
223
  .dodo-ui-button.color--default.variant--text {
125
224
  color: var(--dodo-color-default-800);
126
- background-color: var(--dodo-color-default-100);
225
+ background-color: var(--dodo-ui-button-text-default-bg);
127
226
  }
128
227
  .dodo-ui-button.color--default.variant--text:hover {
129
- background-color: var(--dodo-color-default-200);
228
+ background-color: var(--dodo-ui-button-text-default-hover-bg);
130
229
  }
131
230
  .dodo-ui-button.color--default.variant--text:active {
132
- background-color: var(--dodo-color-default-300);
231
+ background-color: var(--dodo-ui-button-text-default-active-bg);
133
232
  }
134
233
  .dodo-ui-button.color--default.variant--text.outline {
135
- border-color: var(--dodo-color-default-400);
234
+ border-color: var(--dodo-ui-button-outline-default);
136
235
  }
137
236
  .dodo-ui-button.color--default.variant--solid {
138
- color: var(--dodo-color-white);
139
- background-color: var(--dodo-color-default-500);
237
+ color: var(--dodo-color-constant-white);
238
+ background-color: var(--dodo-ui-button-solid-default-bg);
140
239
  }
141
240
  .dodo-ui-button.color--default.variant--solid:hover {
142
- background-color: var(--dodo-color-default-600);
241
+ background-color: var(--dodo-ui-button-solid-default-hover-bg);
143
242
  }
144
243
  .dodo-ui-button.color--default.variant--solid:active {
145
- background-color: var(--dodo-color-default-700);
244
+ background-color: var(--dodo-ui-button-solid-default-active-bg);
146
245
  }
147
246
  .dodo-ui-button.color--primary.variant--text {
148
247
  color: var(--dodo-color-primary-800);
149
- background-color: var(--dodo-color-primary-100);
248
+ background-color: var(--dodo-ui-button-text-primary-bg);
150
249
  }
151
250
  .dodo-ui-button.color--primary.variant--text:hover {
152
- background-color: var(--dodo-color-primary-200);
251
+ background-color: var(--dodo-ui-button-text-primary-hover-bg);
153
252
  }
154
253
  .dodo-ui-button.color--primary.variant--text:active {
155
- background-color: var(--dodo-color-primary-300);
254
+ background-color: var(--dodo-ui-button-text-primary-active-bg);
156
255
  }
157
256
  .dodo-ui-button.color--primary.variant--text.outline {
158
- border-color: var(--dodo-color-primary-400);
257
+ border-color: var(--dodo-ui-button-outline-primary);
159
258
  }
160
259
  .dodo-ui-button.color--primary.variant--solid {
161
- color: var(--dodo-color-white);
162
- background-color: var(--dodo-color-primary-500);
260
+ color: var(--dodo-color-constant-white);
261
+ background-color: var(--dodo-ui-button-solid-primary-bg);
163
262
  }
164
263
  .dodo-ui-button.color--primary.variant--solid:hover {
165
- background-color: var(--dodo-color-primary-600);
264
+ background-color: var(--dodo-ui-button-solid-primary-hover-bg);
166
265
  }
167
266
  .dodo-ui-button.color--primary.variant--solid:active {
168
- background-color: var(--dodo-color-primary-700);
267
+ background-color: var(--dodo-ui-button-solid-primary-active-bg);
169
268
  }
170
269
  .dodo-ui-button.color--safe.variant--text {
171
270
  color: var(--dodo-color-safe-800);
172
- background-color: var(--dodo-color-safe-100);
271
+ background-color: var(--dodo-ui-button-text-safe-bg);
173
272
  }
174
273
  .dodo-ui-button.color--safe.variant--text:hover {
175
- background-color: var(--dodo-color-safe-200);
274
+ background-color: var(--dodo-ui-button-text-safe-hover-bg);
176
275
  }
177
276
  .dodo-ui-button.color--safe.variant--text:active {
178
- background-color: var(--dodo-color-safe-300);
277
+ background-color: var(--dodo-ui-button-text-safe-active-bg);
179
278
  }
180
279
  .dodo-ui-button.color--safe.variant--text.outline {
181
- border-color: var(--dodo-color-safe-400);
280
+ border-color: var(--dodo-ui-button-outline-safe);
182
281
  }
183
282
  .dodo-ui-button.color--safe.variant--solid {
184
- color: var(--dodo-color-white);
185
- background-color: var(--dodo-color-safe-500);
283
+ color: var(--dodo-color-constant-white);
284
+ background-color: var(--dodo-ui-button-solid-safe-bg);
186
285
  }
187
286
  .dodo-ui-button.color--safe.variant--solid:hover {
188
- background-color: var(--dodo-color-safe-600);
287
+ background-color: var(--dodo-ui-button-solid-safe-hover-bg);
189
288
  }
190
289
  .dodo-ui-button.color--safe.variant--solid:active {
191
- background-color: var(--dodo-color-safe-700);
290
+ background-color: var(--dodo-ui-button-solid-safe-active-bg);
192
291
  }
193
292
  .dodo-ui-button.color--warning.variant--text {
194
293
  color: var(--dodo-color-warning-800);
195
- background-color: var(--dodo-color-warning-100);
294
+ background-color: var(--dodo-ui-button-text-warning-bg);
196
295
  }
197
296
  .dodo-ui-button.color--warning.variant--text:hover {
198
- background-color: var(--dodo-color-warning-200);
297
+ background-color: var(--dodo-ui-button-text-warning-hover-bg);
199
298
  }
200
299
  .dodo-ui-button.color--warning.variant--text:active {
201
- background-color: var(--dodo-color-warning-300);
300
+ background-color: var(--dodo-ui-button-text-warning-active-bg);
202
301
  }
203
302
  .dodo-ui-button.color--warning.variant--text.outline {
204
- border-color: var(--dodo-color-warning-400);
303
+ border-color: var(--dodo-ui-button-outline-warning);
205
304
  }
206
305
  .dodo-ui-button.color--warning.variant--solid {
207
- color: var(--dodo-color-white);
208
- background-color: var(--dodo-color-warning-500);
306
+ color: var(--dodo-color-constant-white);
307
+ background-color: var(--dodo-ui-button-solid-warning-bg);
209
308
  }
210
309
  .dodo-ui-button.color--warning.variant--solid:hover {
211
- background-color: var(--dodo-color-warning-600);
310
+ background-color: var(--dodo-ui-button-solid-warning-hover-bg);
212
311
  }
213
312
  .dodo-ui-button.color--warning.variant--solid:active {
214
- background-color: var(--dodo-color-warning-700);
313
+ background-color: var(--dodo-ui-button-solid-warning-active-bg);
215
314
  }
216
315
  .dodo-ui-button.color--danger.variant--text {
217
316
  color: var(--dodo-color-danger-800);
218
- background-color: var(--dodo-color-danger-100);
317
+ background-color: var(--dodo-ui-button-text-danger-bg);
219
318
  }
220
319
  .dodo-ui-button.color--danger.variant--text:hover {
221
- background-color: var(--dodo-color-danger-200);
320
+ background-color: var(--dodo-ui-button-text-danger-hover-bg);
222
321
  }
223
322
  .dodo-ui-button.color--danger.variant--text:active {
224
- background-color: var(--dodo-color-danger-300);
323
+ background-color: var(--dodo-ui-button-text-danger-active-bg);
225
324
  }
226
325
  .dodo-ui-button.color--danger.variant--text.outline {
227
- border-color: var(--dodo-color-danger-400);
326
+ border-color: var(--dodo-ui-button-outline-danger);
228
327
  }
229
328
  .dodo-ui-button.color--danger.variant--solid {
230
- color: var(--dodo-color-white);
231
- background-color: var(--dodo-color-danger-500);
329
+ color: var(--dodo-color-constant-white);
330
+ background-color: var(--dodo-ui-button-solid-danger-bg);
232
331
  }
233
332
  .dodo-ui-button.color--danger.variant--solid:hover {
234
- background-color: var(--dodo-color-danger-600);
333
+ background-color: var(--dodo-ui-button-solid-danger-hover-bg);
235
334
  }
236
335
  .dodo-ui-button.color--danger.variant--solid:active {
237
- background-color: var(--dodo-color-danger-700);
336
+ background-color: var(--dodo-ui-button-solid-danger-active-bg);
238
337
  }
239
338
  .dodo-ui-button.color--info.variant--text {
240
339
  color: var(--dodo-color-info-800);
241
- background-color: var(--dodo-color-info-100);
340
+ background-color: var(--dodo-ui-button-text-info-bg);
242
341
  }
243
342
  .dodo-ui-button.color--info.variant--text:hover {
244
- background-color: var(--dodo-color-info-200);
343
+ background-color: var(--dodo-ui-button-text-info-hover-bg);
245
344
  }
246
345
  .dodo-ui-button.color--info.variant--text:active {
247
- background-color: var(--dodo-color-info-300);
346
+ background-color: var(--dodo-ui-button-text-info-active-bg);
248
347
  }
249
348
  .dodo-ui-button.color--info.variant--text.outline {
250
- border-color: var(--dodo-color-info-400);
349
+ border-color: var(--dodo-ui-button-outline-info);
251
350
  }
252
351
  .dodo-ui-button.color--info.variant--solid {
253
- color: var(--dodo-color-white);
254
- background-color: var(--dodo-color-info-500);
352
+ color: var(--dodo-color-constant-white);
353
+ background-color: var(--dodo-ui-button-solid-info-bg);
255
354
  }
256
355
  .dodo-ui-button.color--info.variant--solid:hover {
257
- background-color: var(--dodo-color-info-600);
356
+ background-color: var(--dodo-ui-button-solid-info-hover-bg);
258
357
  }
259
358
  .dodo-ui-button.color--info.variant--solid:active {
260
- background-color: var(--dodo-color-info-700);
359
+ background-color: var(--dodo-ui-button-solid-info-active-bg);
261
360
  }
262
361
  .dodo-ui-button[disabled] {
263
362
  cursor: initial;
264
363
  }
265
364
  .dodo-ui-button[disabled].variant--text, .dodo-ui-button[disabled].variant--solid {
266
- background-color: var(--dodo-color-default-200);
267
- color: var(--dodo-color-default-400);
365
+ background-color: var(--dodo-ui-button-disabled-bg);
366
+ color: var(--dodo-ui-button-disabled-color);
268
367
  }
269
368
  .dodo-ui-button[disabled].variant--text:hover, .dodo-ui-button[disabled].variant--solid:hover {
270
- background-color: var(--dodo-color-default-200);
271
- color: var(--dodo-color-default-400);
369
+ background-color: var(--dodo-ui-button-disabled-bg);
370
+ color: var(--dodo-ui-button-disabled-color);
272
371
  }
273
372
  .dodo-ui-button[disabled].variant--text:active, .dodo-ui-button[disabled].variant--solid:active {
274
- background-color: var(--dodo-color-default-200);
275
- color: var(--dodo-color-default-400);
373
+ background-color: var(--dodo-ui-button-disabled-bg);
374
+ color: var(--dodo-ui-button-disabled-color);
276
375
  }
277
376
  .dodo-ui-button[disabled].variant--text.outline, .dodo-ui-button[disabled].variant--solid.outline {
278
377
  border-color: transparent;
package/dist/stories/components/Form/Button/Button.svelte.d.ts CHANGED
@@ -1,4 +1,8 @@
1
- import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
1
+ export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
2
+ export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
3
+ export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
4
+ export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
5
+ import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '../../../../types.js';
2
6
  import type { Snippet } from 'svelte';
3
7
  interface ButtonProps {
4
8
  /** Button contents goes here*/
@@ -8,9 +12,9 @@ interface ButtonProps {
8
12
  /** How large should the button be? */
9
13
  size?: ComponentSize;
10
14
  /** What color to use? */
11
- color?: 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
15
+ color?: ButtonColor;
12
16
  /** How round should the border radius be? */
13
- roundness?: ComponentRoundness;
17
+ roundness?: ButtonRoundness;
14
18
  /** How should the button appear? */
15
19
  variant?: 'text' | 'solid';
16
20
  /** Add a border around the button */
@@ -34,7 +38,7 @@ interface ButtonProps {
34
38
  /** The onclick event handler */
35
39
  onclick?: (e: MouseEvent) => void;
36
40
  /** Turn Button into link */
37
- href?: string | undefined | null;
41
+ href?: string;
38
42
  /** Link button: download */
39
43
  download?: any;
40
44
  /** Link button: hreflang */
@@ -46,11 +50,13 @@ interface ButtonProps {
46
50
  /** Link button: rel */
47
51
  rel?: string | undefined | null;
48
52
  /** Link button: target */
49
- target?: '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
53
+ target?: ButtonLinkTarget;
50
54
  /** Link button: Type */
51
55
  anchorMediaType?: string | undefined | null;
52
56
  /** Link button: referrerpolicy */
53
- referrerpolicy?: ReferrerPolicy | undefined | null;
57
+ referrerpolicy?: ButtonLinkReferrerpolicy;
58
+ /** Test: ⚠️ Unsafe Children String. Do Not use*/
59
+ _unsafeChildrenStringForTesting?: string;
54
60
  }
55
61
  declare const Button: import("svelte").Component<ButtonProps, {}, "">;
56
62
  type Button = ReturnType<typeof Button>;
package/dist/stories/components/Form/Button/Color/Color.stories.svelte CHANGED
@@ -8,10 +8,7 @@
8
8
  const { Story } = defineMeta({
9
9
  component: Button,
10
10
  tags: ['autodocs'],
11
- // @ts-ignore
12
- argTypes: {
13
- ...storyButtonArgTypes,
14
- },
11
+ argTypes: storyButtonArgTypes,
15
12
  args: {
16
13
  onclick: fn(),
17
14
  },
package/dist/stories/components/Form/Button/IconButton/IconButton.stories.svelte CHANGED
@@ -9,10 +9,7 @@
9
9
  const { Story } = defineMeta({
10
10
  component: Button,
11
11
  tags: ['autodocs'],
12
- // @ts-ignore
13
- argTypes: {
14
- ...storyButtonArgTypes,
15
- },
12
+ argTypes: storyButtonArgTypes,
16
13
  args: {
17
14
  onclick: fn(),
18
15
  },
@@ -20,7 +17,14 @@
20
17
  </script>
21
18
 
22
19
  <!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
23
- <Story name="Icon Button" args={{ compact: true, roundness: 'full' }}>
20
+ <Story name="Icon Button" args={{ compact: true }}>
21
+ <Button compact>
22
+ <Icon icon="material-symbols:app-badging" width="18" height="18" />
23
+ </Button>
24
+ </Story>
25
+
26
+ <!-- Circualr Icon button. -->
27
+ <Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
24
28
  <Button roundness="full" compact>
25
29
  <Icon icon="material-symbols:app-badging" width="18" height="18" />
26
30
  </Button>
package/dist/stories/components/Form/Button/Roundness/Roundness.stories.svelte CHANGED
@@ -8,10 +8,7 @@
8
8
  const { Story } = defineMeta({
9
9
  component: Button,
10
10
  tags: ['autodocs'],
11
- // @ts-ignore
12
- argTypes: {
13
- ...storyButtonArgTypes,
14
- },
11
+ argTypes: storyButtonArgTypes,
15
12
  args: {
16
13
  onclick: fn(),
17
14
  },
@@ -40,6 +37,7 @@
40
37
  <Button roundness={false}>Click me!</Button>
41
38
  </Story>
42
39
 
40
+ <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
43
41
  <Story
44
42
  name="RoundnessFull"
45
43
  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
package/dist/stories/components/Form/Button/Size/Size.stories.svelte CHANGED
@@ -8,10 +8,7 @@
8
8
  const { Story } = defineMeta({
9
9
  component: Button,
10
10
  tags: ['autodocs'],
11
- // @ts-ignore
12
- argTypes: {
13
- ...storyButtonArgTypes,
14
- },
11
+ argTypes: storyButtonArgTypes,
15
12
  args: {
16
13
  onclick: fn(),
17
14
  },
package/dist/stories/components/Form/Button/Variant/Variant.stories.svelte CHANGED
@@ -8,10 +8,7 @@
8
8
  const { Story } = defineMeta({
9
9
  component: Button,
10
10
  tags: ['autodocs'],
11
- // @ts-ignore
12
- argTypes: {
13
- ...storyButtonArgTypes,
14
- },
11
+ argTypes: storyButtonArgTypes,
15
12
  args: {
16
13
  onclick: fn(),
17
14
  },
package/dist/stories/components/Form/Button/utils/scss/mixins.scss ADDED
@@ -0,0 +1,70 @@
1
+ /// Mixin: generate-dodo-ui-button-colors
2
+ /// Generates CSS custom properties for Dodo UI button styles (text & solid)
3
+ /// across different interaction states (default, hover, active).
4
+ /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
5
+ @mixin generate-dodo-ui-button-colors($color-name) {
6
+ --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
7
+
8
+ --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
9
+ --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
10
+ --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
11
+
12
+ --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
13
+ --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
14
+ --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
15
+ }
16
+
17
+ /// Mixin: generate-dodo-ui-button-colors
18
+ /// Generates CSS custom properties for Dodo UI button styles (text & solid)
19
+ /// across different interaction states (default, hover, active).
20
+ /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
21
+ @mixin generate-dodo-ui-button-colors-dark($color-name) {
22
+ --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
23
+
24
+ --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
25
+ --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
26
+ --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
27
+
28
+ --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
29
+ --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
30
+ --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
31
+ }
32
+
33
+ /// Mixin: generate-dodo-ui-button-color
34
+ /// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
35
+ /// @param {String} $theme - e.g., default, safe, danger, etc.
36
+ @mixin generate-dodo-ui-button-color($theme) {
37
+ &--#{$theme} {
38
+ &.variant {
39
+ &--text {
40
+ color: var(--dodo-color-#{$theme}-800);
41
+ background-color: var(--dodo-ui-button-text-#{$theme}-bg);
42
+
43
+ &:hover {
44
+ background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
45
+ }
46
+
47
+ &:active {
48
+ background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
49
+ }
50
+
51
+ &.outline {
52
+ border-color: var(--dodo-ui-button-outline-#{$theme});
53
+ }
54
+ }
55
+
56
+ &--solid {
57
+ color: var(--dodo-color-constant-white);
58
+ background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
59
+
60
+ &:hover {
61
+ background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
62
+ }
63
+
64
+ &:active {
65
+ background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }