@flightlesslabs/dodo-ui 0.2.0 → 0.3.0

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 (64) hide show
  1. package/dist/index.d.ts +6 -0
  2. package/dist/index.js +4 -0
  3. package/dist/stories/Home.mdx +1 -1
  4. package/dist/stories/components/Form/Button/Button.stories.svelte +10 -5
  5. package/dist/stories/components/Form/Button/Button.svelte +213 -208
  6. package/dist/stories/components/Form/Button/Button.svelte.d.ts +4 -1
  7. package/dist/stories/components/Form/Button/Events/Events.stories.svelte +40 -0
  8. package/dist/stories/components/Form/Button/Events/Events.stories.svelte.d.ts +18 -0
  9. package/dist/stories/components/Form/Button/utils/scss/mixins.scss +21 -21
  10. package/dist/stories/components/Form/PasswordInput/Events/Events.stories.svelte +168 -0
  11. package/dist/stories/components/Form/PasswordInput/Events/Events.stories.svelte.d.ts +18 -0
  12. package/dist/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +37 -0
  13. package/dist/stories/components/Form/PasswordInput/PasswordInput.stories.svelte.d.ts +21 -0
  14. package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte +219 -0
  15. package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte.d.ts +59 -0
  16. package/dist/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +20 -0
  17. package/dist/stories/components/Form/{ExampleButton/ExampleButton.stories.svelte.d.ts → PasswordInput/Roundness/Roundness.stories.svelte.d.ts} +3 -4
  18. package/dist/stories/components/Form/PasswordInput/Size/Size.stories.svelte +16 -0
  19. package/dist/stories/components/Form/PasswordInput/Size/Size.stories.svelte.d.ts +26 -0
  20. package/dist/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +31 -0
  21. package/dist/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte.d.ts +26 -0
  22. package/dist/stories/components/Form/TextInput/Events/Events.stories.svelte +148 -0
  23. package/dist/stories/components/Form/TextInput/Events/Events.stories.svelte.d.ts +18 -0
  24. package/dist/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +21 -0
  25. package/dist/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte.d.ts +26 -0
  26. package/dist/stories/components/Form/TextInput/Size/Size.stories.svelte +17 -0
  27. package/dist/stories/components/Form/TextInput/Size/Size.stories.svelte.d.ts +26 -0
  28. package/dist/stories/components/Form/TextInput/TextInput.stories.svelte +35 -0
  29. package/dist/stories/components/Form/TextInput/TextInput.stories.svelte.d.ts +21 -0
  30. package/dist/stories/components/Form/TextInput/TextInput.svelte +166 -0
  31. package/dist/stories/components/Form/TextInput/TextInput.svelte.d.ts +56 -0
  32. package/dist/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +47 -0
  33. package/dist/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte.d.ts +26 -0
  34. package/dist/styles/_components.css +8 -7
  35. package/dist/styles/_minimal-reset.css +3 -0
  36. package/dist/styles/global.css +1 -0
  37. package/package.json +1 -1
  38. package/src/lib/index.ts +13 -0
  39. package/src/lib/stories/components/Form/Button/Button.stories.svelte +10 -5
  40. package/src/lib/stories/components/Form/Button/Button.svelte +32 -22
  41. package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +42 -0
  42. package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss +21 -21
  43. package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +174 -0
  44. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +41 -0
  45. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte +361 -0
  46. package/src/lib/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte +20 -0
  47. package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +16 -0
  48. package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +31 -0
  49. package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +153 -0
  50. package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +21 -0
  51. package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +17 -0
  52. package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +39 -0
  53. package/src/lib/stories/components/Form/TextInput/TextInput.svelte +293 -0
  54. package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +47 -0
  55. package/src/lib/styles/_components.css +8 -7
  56. package/src/lib/styles/_minimal-reset.css +3 -0
  57. package/src/lib/styles/global.css +1 -0
  58. package/dist/stories/components/Form/ExampleButton/ExampleButton.stories.svelte +0 -30
  59. package/dist/stories/components/Form/ExampleButton/ExampleButton.svelte +0 -14
  60. package/dist/stories/components/Form/ExampleButton/ExampleButton.svelte.d.ts +0 -16
  61. package/dist/stories/components/Form/ExampleButton/button.css +0 -30
  62. package/src/lib/stories/components/Form/ExampleButton/ExampleButton.stories.svelte +0 -30
  63. package/src/lib/stories/components/Form/ExampleButton/ExampleButton.svelte +0 -29
  64. package/src/lib/stories/components/Form/ExampleButton/button.css +0 -30
package/dist/index.d.ts CHANGED
@@ -3,3 +3,9 @@ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from '
3
3
  /** Form: Button */
4
4
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
5
5
  export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
6
+ /** Form: TextInput */
7
+ export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
8
+ export type { TextInputRoundness, TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
9
+ /** Form: PasswordInput */
10
+ export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
11
+ export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
package/dist/index.js CHANGED
@@ -1,3 +1,7 @@
1
1
  import './styles/global.css';
2
2
  /** Form: Button */
3
3
  export { default as Button } from './stories/components/Form/Button/Button.svelte';
4
+ /** Form: TextInput */
5
+ export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
6
+ /** Form: PasswordInput */
7
+ export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
package/dist/stories/Home.mdx CHANGED
@@ -37,7 +37,7 @@ npm i @flightlesslabs/dodo-ui
37
37
  `}
38
38
  />
39
39
 
40
- ## Use one of the components
40
+ ## Use it!
41
41
 
42
42
  Lets import [Button](?path=/docs/components-form-button--docs) component
43
43
 
package/dist/stories/components/Form/Button/Button.stories.svelte CHANGED
@@ -16,7 +16,7 @@ export const storyButtonArgTypes = {
16
16
  },
17
17
  roundness: {
18
18
  control: { type: 'select' },
19
- options: [false, 1, 2, 3, 'full'],
19
+ options: [false, '1x', '2x', '3x', 'full'],
20
20
  },
21
21
  size: {
22
22
  control: { type: 'select' },
@@ -50,20 +50,25 @@ const { Story } = defineMeta({
50
50
  <Button>Click me!</Button>
51
51
  </Story>
52
52
 
53
- <Story name="Disabled" args={{ disabled: true }}>
54
- <Button disabled>Click me!</Button>
55
- </Story>
56
-
57
53
  <!-- Button with border around it -->
58
54
  <Story name="Outline" args={{ outline: true }}>
59
55
  <Button outline>Click me!</Button>
60
56
  </Story>
61
57
 
58
+ <Story name="Disabled" args={{ disabled: true }}>
59
+ <Button disabled>Click me!</Button>
60
+ </Story>
61
+
62
62
  <!-- Form submit button -->
63
63
  <Story name="Sumbit Button" args={{ type: 'submit' }}>
64
64
  <Button type="submit">Submit Form</Button>
65
65
  </Story>
66
66
 
67
+ <!-- Form submit button -->
68
+ <Story name="Full width Button" args={{ fullWidth: true }}>
69
+ <Button fullWidth>Click me!</Button>
70
+ </Story>
71
+
67
72
  <!-- Anchor Link styled like a Button -->
68
73
  <Story
69
74
  name="Link Button"
package/dist/stories/components/Form/Button/Button.svelte CHANGED
@@ -1,13 +1,13 @@
1
1
  <script lang="ts" module>export {};
2
2
  </script>
3
3
 
4
- <script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', 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();
4
+ <script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', variant = 'text', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
5
5
  export {};
6
6
  </script>
7
7
 
8
8
  {#snippet buttonContent()}
9
9
  {#if before}
10
- <span class="button-content--before">
10
+ <span class="content--before">
11
11
  {@render before()}
12
12
  </span>
13
13
  {/if}
@@ -19,7 +19,7 @@ export {};
19
19
  {/if}
20
20
 
21
21
  {#if after}
22
- <span class="button-content--after">
22
+ <span class="content--after">
23
23
  {@render after()}
24
24
  </span>
25
25
  {/if}
@@ -41,8 +41,9 @@ export {};
41
41
  class:outline
42
42
  class:compact
43
43
  class:disabled
44
+ class:fullWidth
44
45
  class={[
45
- 'dodo-ui-button',
46
+ 'dodo-ui-Button',
46
47
  `size--${size}`,
47
48
  `color--${color}`,
48
49
  `variant--${variant}`,
@@ -56,8 +57,9 @@ export {};
56
57
  <button
57
58
  class:outline
58
59
  class:compact
60
+ class:fullWidth
59
61
  class={[
60
- 'dodo-ui-button',
62
+ 'dodo-ui-Button',
61
63
  `size--${size}`,
62
64
  `color--${color}`,
63
65
  `variant--${variant}`,
@@ -76,100 +78,100 @@ export {};
76
78
  {/if}
77
79
 
78
80
  <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);
81
+ --dodo-ui-Button-disabled-color: var(--dodo-color-default-400);
82
+ --dodo-ui-Button-disabled-bg: var(--dodo-color-default-200);
83
+ --dodo-ui-Button-outline-default: var(--dodo-color-default-400);
84
+ --dodo-ui-Button-text-default-bg: var(--dodo-color-default-100);
85
+ --dodo-ui-Button-text-default-hover-bg: var(--dodo-color-default-200);
86
+ --dodo-ui-Button-text-default-active-bg: var(--dodo-color-default-300);
87
+ --dodo-ui-Button-solid-default-bg: var(--dodo-color-default-500);
88
+ --dodo-ui-Button-solid-default-hover-bg: var(--dodo-color-default-600);
89
+ --dodo-ui-Button-solid-default-active-bg: var(--dodo-color-default-700);
90
+ --dodo-ui-Button-outline-primary: var(--dodo-color-primary-400);
91
+ --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-100);
92
+ --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-200);
93
+ --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-300);
94
+ --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
95
+ --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
96
+ --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
97
+ --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
98
+ --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
99
+ --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
100
+ --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-300);
101
+ --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-500);
102
+ --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-600);
103
+ --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-700);
104
+ --dodo-ui-Button-outline-warning: var(--dodo-color-warning-400);
105
+ --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-100);
106
+ --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-200);
107
+ --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-300);
108
+ --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-500);
109
+ --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-600);
110
+ --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-700);
111
+ --dodo-ui-Button-outline-danger: var(--dodo-color-danger-400);
112
+ --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-100);
113
+ --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-200);
114
+ --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-300);
115
+ --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
116
+ --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
117
+ --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
118
+ --dodo-ui-Button-outline-info: var(--dodo-color-info-400);
119
+ --dodo-ui-Button-text-info-bg: var(--dodo-color-info-100);
120
+ --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-200);
121
+ --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-300);
122
+ --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-500);
123
+ --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-600);
124
+ --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-700);
123
125
  }
124
126
 
125
127
  :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);
128
+ --dodo-ui-Button-disabled-bg: var(--dodo-color-default-100);
129
+ --dodo-ui-Button-disabled-color: var(--dodo-color-default-500);
130
+ --dodo-ui-Button-outline-default: var(--dodo-color-default-300);
131
+ --dodo-ui-Button-text-default-bg: var(--dodo-color-default-50);
132
+ --dodo-ui-Button-text-default-hover-bg: var(--dodo-color-default-100);
133
+ --dodo-ui-Button-text-default-active-bg: var(--dodo-color-default-200);
134
+ --dodo-ui-Button-solid-default-bg: var(--dodo-color-default-300);
135
+ --dodo-ui-Button-solid-default-hover-bg: var(--dodo-color-default-200);
136
+ --dodo-ui-Button-solid-default-active-bg: var(--dodo-color-default-100);
137
+ --dodo-ui-Button-outline-primary: var(--dodo-color-primary-300);
138
+ --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-50);
139
+ --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-100);
140
+ --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-200);
141
+ --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-300);
142
+ --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-200);
143
+ --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-100);
144
+ --dodo-ui-Button-outline-safe: var(--dodo-color-safe-300);
145
+ --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-50);
146
+ --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-100);
147
+ --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-200);
148
+ --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-300);
149
+ --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-200);
150
+ --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-100);
151
+ --dodo-ui-Button-outline-warning: var(--dodo-color-warning-300);
152
+ --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-50);
153
+ --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-100);
154
+ --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-200);
155
+ --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-300);
156
+ --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-200);
157
+ --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-100);
158
+ --dodo-ui-Button-outline-danger: var(--dodo-color-danger-300);
159
+ --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-50);
160
+ --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-100);
161
+ --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-200);
162
+ --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-300);
163
+ --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-200);
164
+ --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-100);
165
+ --dodo-ui-Button-outline-info: var(--dodo-color-info-300);
166
+ --dodo-ui-Button-text-info-bg: var(--dodo-color-info-50);
167
+ --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-100);
168
+ --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-200);
169
+ --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-300);
170
+ --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-200);
171
+ --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-100);
170
172
  }
171
173
 
172
- .dodo-ui-button {
174
+ .dodo-ui-Button {
173
175
  cursor: pointer;
174
176
  outline: none;
175
177
  transition: all 150ms;
@@ -179,221 +181,224 @@ export {};
179
181
  justify-content: center;
180
182
  align-items: center;
181
183
  font-family: inherit;
182
- font-weight: 500;
183
184
  background-color: transparent;
184
- border: 1px solid;
185
+ border-style: solid;
186
+ border-width: var(--dodo-ui-element-border-width);
185
187
  border-color: transparent;
186
188
  outline: 0;
187
189
  color: inherit;
188
190
  letter-spacing: 0.3px;
189
191
  }
190
- .dodo-ui-button.size--normal {
192
+ .dodo-ui-Button.size--normal {
191
193
  height: var(--dodo-ui-element-height-normal);
192
194
  font-size: 1rem;
193
195
  padding: 0 12px;
194
196
  min-width: 45px;
195
197
  }
196
- .dodo-ui-button.size--small {
198
+ .dodo-ui-Button.size--small {
197
199
  height: var(--dodo-ui-element-height-small);
198
200
  padding: 0 8px;
199
201
  font-size: 0.9rem;
200
202
  min-width: 35px;
201
203
  }
202
- .dodo-ui-button.size--large {
204
+ .dodo-ui-Button.size--large {
203
205
  height: var(--dodo-ui-element-height-large);
204
206
  font-size: 1.1rem;
205
207
  padding: 0 16px;
206
208
  min-width: 85px;
207
209
  }
208
- .dodo-ui-button.roundness--1x {
209
- border-radius: var(--dodo-ui-element-roundness-1);
210
+ .dodo-ui-Button.roundness--1x {
211
+ border-radius: var(--dodo-ui-element-roundness-1x);
210
212
  }
211
- .dodo-ui-button.roundness--2x {
212
- border-radius: var(--dodo-ui-element-roundness-2);
213
+ .dodo-ui-Button.roundness--2x {
214
+ border-radius: var(--dodo-ui-element-roundness-2x);
213
215
  }
214
- .dodo-ui-button.roundness--3x {
215
- border-radius: var(--dodo-ui-element-roundness-3);
216
+ .dodo-ui-Button.roundness--3x {
217
+ border-radius: var(--dodo-ui-element-roundness-3x);
216
218
  }
217
- .dodo-ui-button.roundness--full {
219
+ .dodo-ui-Button.roundness--full {
218
220
  border-radius: 50%;
219
221
  }
220
- .dodo-ui-button.color--default.variant--text {
222
+ .dodo-ui-Button.color--default.variant--text {
221
223
  color: var(--dodo-color-default-800);
222
- background-color: var(--dodo-ui-button-text-default-bg);
224
+ background-color: var(--dodo-ui-Button-text-default-bg);
223
225
  }
224
- .dodo-ui-button.color--default.variant--text:hover {
225
- background-color: var(--dodo-ui-button-text-default-hover-bg);
226
+ .dodo-ui-Button.color--default.variant--text:hover {
227
+ background-color: var(--dodo-ui-Button-text-default-hover-bg);
226
228
  }
227
- .dodo-ui-button.color--default.variant--text:active {
228
- background-color: var(--dodo-ui-button-text-default-active-bg);
229
+ .dodo-ui-Button.color--default.variant--text:active {
230
+ background-color: var(--dodo-ui-Button-text-default-active-bg);
229
231
  }
230
- .dodo-ui-button.color--default.variant--text.outline {
231
- border-color: var(--dodo-ui-button-outline-default);
232
+ .dodo-ui-Button.color--default.variant--text.outline {
233
+ border-color: var(--dodo-ui-Button-outline-default);
232
234
  }
233
- .dodo-ui-button.color--default.variant--solid {
235
+ .dodo-ui-Button.color--default.variant--solid {
234
236
  color: var(--dodo-color-constant-white);
235
- background-color: var(--dodo-ui-button-solid-default-bg);
237
+ background-color: var(--dodo-ui-Button-solid-default-bg);
236
238
  }
237
- .dodo-ui-button.color--default.variant--solid:hover {
238
- background-color: var(--dodo-ui-button-solid-default-hover-bg);
239
+ .dodo-ui-Button.color--default.variant--solid:hover {
240
+ background-color: var(--dodo-ui-Button-solid-default-hover-bg);
239
241
  }
240
- .dodo-ui-button.color--default.variant--solid:active {
241
- background-color: var(--dodo-ui-button-solid-default-active-bg);
242
+ .dodo-ui-Button.color--default.variant--solid:active {
243
+ background-color: var(--dodo-ui-Button-solid-default-active-bg);
242
244
  }
243
- .dodo-ui-button.color--primary.variant--text {
245
+ .dodo-ui-Button.color--primary.variant--text {
244
246
  color: var(--dodo-color-primary-800);
245
- background-color: var(--dodo-ui-button-text-primary-bg);
247
+ background-color: var(--dodo-ui-Button-text-primary-bg);
246
248
  }
247
- .dodo-ui-button.color--primary.variant--text:hover {
248
- background-color: var(--dodo-ui-button-text-primary-hover-bg);
249
+ .dodo-ui-Button.color--primary.variant--text:hover {
250
+ background-color: var(--dodo-ui-Button-text-primary-hover-bg);
249
251
  }
250
- .dodo-ui-button.color--primary.variant--text:active {
251
- background-color: var(--dodo-ui-button-text-primary-active-bg);
252
+ .dodo-ui-Button.color--primary.variant--text:active {
253
+ background-color: var(--dodo-ui-Button-text-primary-active-bg);
252
254
  }
253
- .dodo-ui-button.color--primary.variant--text.outline {
254
- border-color: var(--dodo-ui-button-outline-primary);
255
+ .dodo-ui-Button.color--primary.variant--text.outline {
256
+ border-color: var(--dodo-ui-Button-outline-primary);
255
257
  }
256
- .dodo-ui-button.color--primary.variant--solid {
258
+ .dodo-ui-Button.color--primary.variant--solid {
257
259
  color: var(--dodo-color-constant-white);
258
- background-color: var(--dodo-ui-button-solid-primary-bg);
260
+ background-color: var(--dodo-ui-Button-solid-primary-bg);
259
261
  }
260
- .dodo-ui-button.color--primary.variant--solid:hover {
261
- background-color: var(--dodo-ui-button-solid-primary-hover-bg);
262
+ .dodo-ui-Button.color--primary.variant--solid:hover {
263
+ background-color: var(--dodo-ui-Button-solid-primary-hover-bg);
262
264
  }
263
- .dodo-ui-button.color--primary.variant--solid:active {
264
- background-color: var(--dodo-ui-button-solid-primary-active-bg);
265
+ .dodo-ui-Button.color--primary.variant--solid:active {
266
+ background-color: var(--dodo-ui-Button-solid-primary-active-bg);
265
267
  }
266
- .dodo-ui-button.color--safe.variant--text {
268
+ .dodo-ui-Button.color--safe.variant--text {
267
269
  color: var(--dodo-color-safe-800);
268
- background-color: var(--dodo-ui-button-text-safe-bg);
270
+ background-color: var(--dodo-ui-Button-text-safe-bg);
269
271
  }
270
- .dodo-ui-button.color--safe.variant--text:hover {
271
- background-color: var(--dodo-ui-button-text-safe-hover-bg);
272
+ .dodo-ui-Button.color--safe.variant--text:hover {
273
+ background-color: var(--dodo-ui-Button-text-safe-hover-bg);
272
274
  }
273
- .dodo-ui-button.color--safe.variant--text:active {
274
- background-color: var(--dodo-ui-button-text-safe-active-bg);
275
+ .dodo-ui-Button.color--safe.variant--text:active {
276
+ background-color: var(--dodo-ui-Button-text-safe-active-bg);
275
277
  }
276
- .dodo-ui-button.color--safe.variant--text.outline {
277
- border-color: var(--dodo-ui-button-outline-safe);
278
+ .dodo-ui-Button.color--safe.variant--text.outline {
279
+ border-color: var(--dodo-ui-Button-outline-safe);
278
280
  }
279
- .dodo-ui-button.color--safe.variant--solid {
281
+ .dodo-ui-Button.color--safe.variant--solid {
280
282
  color: var(--dodo-color-constant-white);
281
- background-color: var(--dodo-ui-button-solid-safe-bg);
283
+ background-color: var(--dodo-ui-Button-solid-safe-bg);
282
284
  }
283
- .dodo-ui-button.color--safe.variant--solid:hover {
284
- background-color: var(--dodo-ui-button-solid-safe-hover-bg);
285
+ .dodo-ui-Button.color--safe.variant--solid:hover {
286
+ background-color: var(--dodo-ui-Button-solid-safe-hover-bg);
285
287
  }
286
- .dodo-ui-button.color--safe.variant--solid:active {
287
- background-color: var(--dodo-ui-button-solid-safe-active-bg);
288
+ .dodo-ui-Button.color--safe.variant--solid:active {
289
+ background-color: var(--dodo-ui-Button-solid-safe-active-bg);
288
290
  }
289
- .dodo-ui-button.color--warning.variant--text {
291
+ .dodo-ui-Button.color--warning.variant--text {
290
292
  color: var(--dodo-color-warning-800);
291
- background-color: var(--dodo-ui-button-text-warning-bg);
293
+ background-color: var(--dodo-ui-Button-text-warning-bg);
292
294
  }
293
- .dodo-ui-button.color--warning.variant--text:hover {
294
- background-color: var(--dodo-ui-button-text-warning-hover-bg);
295
+ .dodo-ui-Button.color--warning.variant--text:hover {
296
+ background-color: var(--dodo-ui-Button-text-warning-hover-bg);
295
297
  }
296
- .dodo-ui-button.color--warning.variant--text:active {
297
- background-color: var(--dodo-ui-button-text-warning-active-bg);
298
+ .dodo-ui-Button.color--warning.variant--text:active {
299
+ background-color: var(--dodo-ui-Button-text-warning-active-bg);
298
300
  }
299
- .dodo-ui-button.color--warning.variant--text.outline {
300
- border-color: var(--dodo-ui-button-outline-warning);
301
+ .dodo-ui-Button.color--warning.variant--text.outline {
302
+ border-color: var(--dodo-ui-Button-outline-warning);
301
303
  }
302
- .dodo-ui-button.color--warning.variant--solid {
304
+ .dodo-ui-Button.color--warning.variant--solid {
303
305
  color: var(--dodo-color-constant-white);
304
- background-color: var(--dodo-ui-button-solid-warning-bg);
306
+ background-color: var(--dodo-ui-Button-solid-warning-bg);
305
307
  }
306
- .dodo-ui-button.color--warning.variant--solid:hover {
307
- background-color: var(--dodo-ui-button-solid-warning-hover-bg);
308
+ .dodo-ui-Button.color--warning.variant--solid:hover {
309
+ background-color: var(--dodo-ui-Button-solid-warning-hover-bg);
308
310
  }
309
- .dodo-ui-button.color--warning.variant--solid:active {
310
- background-color: var(--dodo-ui-button-solid-warning-active-bg);
311
+ .dodo-ui-Button.color--warning.variant--solid:active {
312
+ background-color: var(--dodo-ui-Button-solid-warning-active-bg);
311
313
  }
312
- .dodo-ui-button.color--danger.variant--text {
314
+ .dodo-ui-Button.color--danger.variant--text {
313
315
  color: var(--dodo-color-danger-800);
314
- background-color: var(--dodo-ui-button-text-danger-bg);
316
+ background-color: var(--dodo-ui-Button-text-danger-bg);
315
317
  }
316
- .dodo-ui-button.color--danger.variant--text:hover {
317
- background-color: var(--dodo-ui-button-text-danger-hover-bg);
318
+ .dodo-ui-Button.color--danger.variant--text:hover {
319
+ background-color: var(--dodo-ui-Button-text-danger-hover-bg);
318
320
  }
319
- .dodo-ui-button.color--danger.variant--text:active {
320
- background-color: var(--dodo-ui-button-text-danger-active-bg);
321
+ .dodo-ui-Button.color--danger.variant--text:active {
322
+ background-color: var(--dodo-ui-Button-text-danger-active-bg);
321
323
  }
322
- .dodo-ui-button.color--danger.variant--text.outline {
323
- border-color: var(--dodo-ui-button-outline-danger);
324
+ .dodo-ui-Button.color--danger.variant--text.outline {
325
+ border-color: var(--dodo-ui-Button-outline-danger);
324
326
  }
325
- .dodo-ui-button.color--danger.variant--solid {
327
+ .dodo-ui-Button.color--danger.variant--solid {
326
328
  color: var(--dodo-color-constant-white);
327
- background-color: var(--dodo-ui-button-solid-danger-bg);
329
+ background-color: var(--dodo-ui-Button-solid-danger-bg);
328
330
  }
329
- .dodo-ui-button.color--danger.variant--solid:hover {
330
- background-color: var(--dodo-ui-button-solid-danger-hover-bg);
331
+ .dodo-ui-Button.color--danger.variant--solid:hover {
332
+ background-color: var(--dodo-ui-Button-solid-danger-hover-bg);
331
333
  }
332
- .dodo-ui-button.color--danger.variant--solid:active {
333
- background-color: var(--dodo-ui-button-solid-danger-active-bg);
334
+ .dodo-ui-Button.color--danger.variant--solid:active {
335
+ background-color: var(--dodo-ui-Button-solid-danger-active-bg);
334
336
  }
335
- .dodo-ui-button.color--info.variant--text {
337
+ .dodo-ui-Button.color--info.variant--text {
336
338
  color: var(--dodo-color-info-800);
337
- background-color: var(--dodo-ui-button-text-info-bg);
339
+ background-color: var(--dodo-ui-Button-text-info-bg);
338
340
  }
339
- .dodo-ui-button.color--info.variant--text:hover {
340
- background-color: var(--dodo-ui-button-text-info-hover-bg);
341
+ .dodo-ui-Button.color--info.variant--text:hover {
342
+ background-color: var(--dodo-ui-Button-text-info-hover-bg);
341
343
  }
342
- .dodo-ui-button.color--info.variant--text:active {
343
- background-color: var(--dodo-ui-button-text-info-active-bg);
344
+ .dodo-ui-Button.color--info.variant--text:active {
345
+ background-color: var(--dodo-ui-Button-text-info-active-bg);
344
346
  }
345
- .dodo-ui-button.color--info.variant--text.outline {
346
- border-color: var(--dodo-ui-button-outline-info);
347
+ .dodo-ui-Button.color--info.variant--text.outline {
348
+ border-color: var(--dodo-ui-Button-outline-info);
347
349
  }
348
- .dodo-ui-button.color--info.variant--solid {
350
+ .dodo-ui-Button.color--info.variant--solid {
349
351
  color: var(--dodo-color-constant-white);
350
- background-color: var(--dodo-ui-button-solid-info-bg);
352
+ background-color: var(--dodo-ui-Button-solid-info-bg);
351
353
  }
352
- .dodo-ui-button.color--info.variant--solid:hover {
353
- background-color: var(--dodo-ui-button-solid-info-hover-bg);
354
+ .dodo-ui-Button.color--info.variant--solid:hover {
355
+ background-color: var(--dodo-ui-Button-solid-info-hover-bg);
354
356
  }
355
- .dodo-ui-button.color--info.variant--solid:active {
356
- background-color: var(--dodo-ui-button-solid-info-active-bg);
357
+ .dodo-ui-Button.color--info.variant--solid:active {
358
+ background-color: var(--dodo-ui-Button-solid-info-active-bg);
357
359
  }
358
- .dodo-ui-button[disabled] {
360
+ .dodo-ui-Button[disabled] {
359
361
  cursor: initial;
360
362
  }
361
- .dodo-ui-button[disabled].variant--text, .dodo-ui-button[disabled].variant--solid {
362
- background-color: var(--dodo-ui-button-disabled-bg);
363
- color: var(--dodo-ui-button-disabled-color);
363
+ .dodo-ui-Button[disabled].variant--text, .dodo-ui-Button[disabled].variant--solid {
364
+ background-color: var(--dodo-ui-Button-disabled-bg);
365
+ color: var(--dodo-ui-Button-disabled-color);
364
366
  }
365
- .dodo-ui-button[disabled].variant--text:hover, .dodo-ui-button[disabled].variant--solid:hover {
366
- background-color: var(--dodo-ui-button-disabled-bg);
367
- color: var(--dodo-ui-button-disabled-color);
367
+ .dodo-ui-Button[disabled].variant--text:hover, .dodo-ui-Button[disabled].variant--solid:hover {
368
+ background-color: var(--dodo-ui-Button-disabled-bg);
369
+ color: var(--dodo-ui-Button-disabled-color);
368
370
  }
369
- .dodo-ui-button[disabled].variant--text:active, .dodo-ui-button[disabled].variant--solid:active {
370
- background-color: var(--dodo-ui-button-disabled-bg);
371
- color: var(--dodo-ui-button-disabled-color);
371
+ .dodo-ui-Button[disabled].variant--text:active, .dodo-ui-Button[disabled].variant--solid:active {
372
+ background-color: var(--dodo-ui-Button-disabled-bg);
373
+ color: var(--dodo-ui-Button-disabled-color);
372
374
  }
373
- .dodo-ui-button[disabled].variant--text.outline, .dodo-ui-button[disabled].variant--solid.outline {
375
+ .dodo-ui-Button[disabled].variant--text.outline, .dodo-ui-Button[disabled].variant--solid.outline {
374
376
  border-color: transparent;
375
377
  }
376
- .dodo-ui-button.compact.size--normal, .dodo-ui-button.compact.size--small, .dodo-ui-button.compact.size--large {
378
+ .dodo-ui-Button.compact.size--normal, .dodo-ui-Button.compact.size--small, .dodo-ui-Button.compact.size--large {
377
379
  min-width: initial;
378
380
  padding: 0;
379
381
  }
380
- .dodo-ui-button.compact.size--normal {
382
+ .dodo-ui-Button.compact.size--normal {
381
383
  width: var(--dodo-ui-element-height-normal);
382
384
  }
383
- .dodo-ui-button.compact.size--small {
385
+ .dodo-ui-Button.compact.size--small {
384
386
  width: var(--dodo-ui-element-height-small);
385
387
  }
386
- .dodo-ui-button.compact.size--large {
388
+ .dodo-ui-Button.compact.size--large {
387
389
  width: var(--dodo-ui-element-height-large);
388
390
  }
389
- .dodo-ui-button .button-content--after, .dodo-ui-button .button-content--before {
391
+ .dodo-ui-Button.fullWidth {
392
+ width: 100%;
393
+ }
394
+ .dodo-ui-Button .content--after, .dodo-ui-Button .content--before {
390
395
  display: inline-flex;
391
396
  height: 100%;
392
397
  align-items: center;
393
398
  }
394
- .dodo-ui-button .button-content--before {
399
+ .dodo-ui-Button .content--before {
395
400
  margin-right: 6px;
396
401
  }
397
- .dodo-ui-button .button-content--after {
402
+ .dodo-ui-Button .content--after {
398
403
  margin-left: 6px;
399
404
  }</style>