@flightlesslabs/dodo-ui 1.0.0--beta-3 → 1.0.0--beta-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 (5) hide show
  1. package/dist/styles/components.css +398 -0
  2. package/dist/styles/components.css.map +1 -0
  3. package/dist/styles/global.css +481 -0
  4. package/dist/styles/global.css.map +1 -0
  5. package/package.json +8 -8
package/dist/styles/components.css ADDED
@@ -0,0 +1,398 @@
1
+ :root {
2
+ --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
3
+ --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
4
+ --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-400);
5
+ --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-100);
6
+ --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-200);
7
+ --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-300);
8
+ --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-500);
9
+ --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-600);
10
+ --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-700);
11
+ --dodo-ui-Button-outline-primary: var(--dodo-color-primary-400);
12
+ --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-100);
13
+ --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-200);
14
+ --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-300);
15
+ --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
16
+ --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
17
+ --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
18
+ --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-400);
19
+ --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-100);
20
+ --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-200);
21
+ --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-300);
22
+ --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-500);
23
+ --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
24
+ --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-700);
25
+ --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
26
+ --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
27
+ --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
28
+ --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-300);
29
+ --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-500);
30
+ --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-600);
31
+ --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-700);
32
+ --dodo-ui-Button-outline-warning: var(--dodo-color-warning-400);
33
+ --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-100);
34
+ --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-200);
35
+ --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-300);
36
+ --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-500);
37
+ --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-600);
38
+ --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-700);
39
+ --dodo-ui-Button-outline-danger: var(--dodo-color-danger-400);
40
+ --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-100);
41
+ --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-200);
42
+ --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-300);
43
+ --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
44
+ --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
45
+ --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
46
+ }
47
+
48
+ .dodo-theme--dark {
49
+ --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
50
+ --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
51
+ --dodo-ui-Button-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
52
+ --dodo-ui-Button-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
53
+ --dodo-ui-Button-text-neutral-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
54
+ --dodo-ui-Button-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-200) 90%, #fff);
55
+ --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-400);
56
+ --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-300);
57
+ --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-200);
58
+ --dodo-ui-Button-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
59
+ --dodo-ui-Button-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
60
+ --dodo-ui-Button-text-primary-hover-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
61
+ --dodo-ui-Button-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-200) 90%, #fff);
62
+ --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-400);
63
+ --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-300);
64
+ --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-200);
65
+ --dodo-ui-Button-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
66
+ --dodo-ui-Button-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
67
+ --dodo-ui-Button-text-secondary-hover-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
68
+ --dodo-ui-Button-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-200) 90%, #fff);
69
+ --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-400);
70
+ --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-300);
71
+ --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-200);
72
+ --dodo-ui-Button-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
73
+ --dodo-ui-Button-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
74
+ --dodo-ui-Button-text-safe-hover-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
75
+ --dodo-ui-Button-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-200) 90%, #fff);
76
+ --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-400);
77
+ --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-300);
78
+ --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-200);
79
+ --dodo-ui-Button-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
80
+ --dodo-ui-Button-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
81
+ --dodo-ui-Button-text-warning-hover-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
82
+ --dodo-ui-Button-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-200) 90%, #fff);
83
+ --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-400);
84
+ --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-300);
85
+ --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-200);
86
+ --dodo-ui-Button-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
87
+ --dodo-ui-Button-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
88
+ --dodo-ui-Button-text-danger-hover-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
89
+ --dodo-ui-Button-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-200) 90%, #fff);
90
+ --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-400);
91
+ --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-300);
92
+ --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-200);
93
+ }
94
+
95
+ .dodo-ui-Button {
96
+ cursor: pointer;
97
+ transition: background-color 70ms, color 70ms, border-color 70ms;
98
+ text-decoration: none;
99
+ margin: 0;
100
+ display: inline-flex;
101
+ justify-content: center;
102
+ align-items: center;
103
+ font-family: inherit;
104
+ background-color: transparent;
105
+ border-style: solid;
106
+ border-width: var(--dodo-ui-element-border-width);
107
+ border-color: transparent;
108
+ color: inherit;
109
+ letter-spacing: 0.3px;
110
+ }
111
+ .dodo-ui-Button.size--normal {
112
+ height: var(--dodo-ui-element-height-normal);
113
+ font-size: 1rem;
114
+ padding: 0 calc(var(--dodo-ui-space-small) * 2);
115
+ min-width: 45px;
116
+ }
117
+ .dodo-ui-Button.size--small {
118
+ height: var(--dodo-ui-element-height-small);
119
+ padding: 0 var(--dodo-ui-space);
120
+ font-size: 0.9rem;
121
+ min-width: 35px;
122
+ }
123
+ .dodo-ui-Button.size--large {
124
+ height: var(--dodo-ui-element-height-large);
125
+ font-size: 1.1rem;
126
+ padding: 0 calc(var(--dodo-ui-space) * 2);
127
+ min-width: 85px;
128
+ }
129
+ .dodo-ui-Button.roundness--1 {
130
+ border-radius: var(--dodo-ui-element-roundness-1);
131
+ }
132
+ .dodo-ui-Button.roundness--2 {
133
+ border-radius: var(--dodo-ui-element-roundness-2);
134
+ }
135
+ .dodo-ui-Button.roundness--3 {
136
+ border-radius: var(--dodo-ui-element-roundness-3);
137
+ }
138
+ .dodo-ui-Button.roundness--pill {
139
+ border-radius: 999px;
140
+ }
141
+ .dodo-ui-Button.roundness--full {
142
+ border-radius: 50%;
143
+ }
144
+ .dodo-ui-Button.color--neutral.variant--text {
145
+ color: var(--dodo-color-neutral-800);
146
+ background-color: var(--dodo-ui-Button-text-neutral-bg);
147
+ }
148
+ .dodo-ui-Button.color--neutral.variant--text:hover {
149
+ background-color: var(--dodo-ui-Button-text-neutral-hover-bg);
150
+ }
151
+ .dodo-ui-Button.color--neutral.variant--text:active {
152
+ background-color: var(--dodo-ui-Button-text-neutral-active-bg);
153
+ }
154
+ .dodo-ui-Button.color--neutral.variant--text.outline {
155
+ border-color: var(--dodo-ui-Button-outline-neutral);
156
+ }
157
+ .dodo-ui-Button.color--neutral.variant--solid {
158
+ color: var(--dodo-color-constant-white);
159
+ background-color: var(--dodo-ui-Button-solid-neutral-bg);
160
+ }
161
+ .dodo-ui-Button.color--neutral.variant--solid:hover {
162
+ background-color: var(--dodo-ui-Button-solid-neutral-hover-bg);
163
+ }
164
+ .dodo-ui-Button.color--neutral.variant--solid:active {
165
+ background-color: var(--dodo-ui-Button-solid-neutral-active-bg);
166
+ }
167
+ .dodo-ui-Button.color--primary.variant--text {
168
+ color: var(--dodo-color-primary-800);
169
+ background-color: var(--dodo-ui-Button-text-primary-bg);
170
+ }
171
+ .dodo-ui-Button.color--primary.variant--text:hover {
172
+ background-color: var(--dodo-ui-Button-text-primary-hover-bg);
173
+ }
174
+ .dodo-ui-Button.color--primary.variant--text:active {
175
+ background-color: var(--dodo-ui-Button-text-primary-active-bg);
176
+ }
177
+ .dodo-ui-Button.color--primary.variant--text.outline {
178
+ border-color: var(--dodo-ui-Button-outline-primary);
179
+ }
180
+ .dodo-ui-Button.color--primary.variant--solid {
181
+ color: var(--dodo-color-constant-white);
182
+ background-color: var(--dodo-ui-Button-solid-primary-bg);
183
+ }
184
+ .dodo-ui-Button.color--primary.variant--solid:hover {
185
+ background-color: var(--dodo-ui-Button-solid-primary-hover-bg);
186
+ }
187
+ .dodo-ui-Button.color--primary.variant--solid:active {
188
+ background-color: var(--dodo-ui-Button-solid-primary-active-bg);
189
+ }
190
+ .dodo-ui-Button.color--secondary.variant--text {
191
+ color: var(--dodo-color-secondary-800);
192
+ background-color: var(--dodo-ui-Button-text-secondary-bg);
193
+ }
194
+ .dodo-ui-Button.color--secondary.variant--text:hover {
195
+ background-color: var(--dodo-ui-Button-text-secondary-hover-bg);
196
+ }
197
+ .dodo-ui-Button.color--secondary.variant--text:active {
198
+ background-color: var(--dodo-ui-Button-text-secondary-active-bg);
199
+ }
200
+ .dodo-ui-Button.color--secondary.variant--text.outline {
201
+ border-color: var(--dodo-ui-Button-outline-secondary);
202
+ }
203
+ .dodo-ui-Button.color--secondary.variant--solid {
204
+ color: var(--dodo-color-constant-white);
205
+ background-color: var(--dodo-ui-Button-solid-secondary-bg);
206
+ }
207
+ .dodo-ui-Button.color--secondary.variant--solid:hover {
208
+ background-color: var(--dodo-ui-Button-solid-secondary-hover-bg);
209
+ }
210
+ .dodo-ui-Button.color--secondary.variant--solid:active {
211
+ background-color: var(--dodo-ui-Button-solid-secondary-active-bg);
212
+ }
213
+ .dodo-ui-Button.color--safe.variant--text {
214
+ color: var(--dodo-color-safe-800);
215
+ background-color: var(--dodo-ui-Button-text-safe-bg);
216
+ }
217
+ .dodo-ui-Button.color--safe.variant--text:hover {
218
+ background-color: var(--dodo-ui-Button-text-safe-hover-bg);
219
+ }
220
+ .dodo-ui-Button.color--safe.variant--text:active {
221
+ background-color: var(--dodo-ui-Button-text-safe-active-bg);
222
+ }
223
+ .dodo-ui-Button.color--safe.variant--text.outline {
224
+ border-color: var(--dodo-ui-Button-outline-safe);
225
+ }
226
+ .dodo-ui-Button.color--safe.variant--solid {
227
+ color: var(--dodo-color-constant-white);
228
+ background-color: var(--dodo-ui-Button-solid-safe-bg);
229
+ }
230
+ .dodo-ui-Button.color--safe.variant--solid:hover {
231
+ background-color: var(--dodo-ui-Button-solid-safe-hover-bg);
232
+ }
233
+ .dodo-ui-Button.color--safe.variant--solid:active {
234
+ background-color: var(--dodo-ui-Button-solid-safe-active-bg);
235
+ }
236
+ .dodo-ui-Button.color--warning.variant--text {
237
+ color: var(--dodo-color-warning-800);
238
+ background-color: var(--dodo-ui-Button-text-warning-bg);
239
+ }
240
+ .dodo-ui-Button.color--warning.variant--text:hover {
241
+ background-color: var(--dodo-ui-Button-text-warning-hover-bg);
242
+ }
243
+ .dodo-ui-Button.color--warning.variant--text:active {
244
+ background-color: var(--dodo-ui-Button-text-warning-active-bg);
245
+ }
246
+ .dodo-ui-Button.color--warning.variant--text.outline {
247
+ border-color: var(--dodo-ui-Button-outline-warning);
248
+ }
249
+ .dodo-ui-Button.color--warning.variant--solid {
250
+ color: var(--dodo-color-constant-white);
251
+ background-color: var(--dodo-ui-Button-solid-warning-bg);
252
+ }
253
+ .dodo-ui-Button.color--warning.variant--solid:hover {
254
+ background-color: var(--dodo-ui-Button-solid-warning-hover-bg);
255
+ }
256
+ .dodo-ui-Button.color--warning.variant--solid:active {
257
+ background-color: var(--dodo-ui-Button-solid-warning-active-bg);
258
+ }
259
+ .dodo-ui-Button.color--danger.variant--text {
260
+ color: var(--dodo-color-danger-800);
261
+ background-color: var(--dodo-ui-Button-text-danger-bg);
262
+ }
263
+ .dodo-ui-Button.color--danger.variant--text:hover {
264
+ background-color: var(--dodo-ui-Button-text-danger-hover-bg);
265
+ }
266
+ .dodo-ui-Button.color--danger.variant--text:active {
267
+ background-color: var(--dodo-ui-Button-text-danger-active-bg);
268
+ }
269
+ .dodo-ui-Button.color--danger.variant--text.outline {
270
+ border-color: var(--dodo-ui-Button-outline-danger);
271
+ }
272
+ .dodo-ui-Button.color--danger.variant--solid {
273
+ color: var(--dodo-color-constant-white);
274
+ background-color: var(--dodo-ui-Button-solid-danger-bg);
275
+ }
276
+ .dodo-ui-Button.color--danger.variant--solid:hover {
277
+ background-color: var(--dodo-ui-Button-solid-danger-hover-bg);
278
+ }
279
+ .dodo-ui-Button.color--danger.variant--solid:active {
280
+ background-color: var(--dodo-ui-Button-solid-danger-active-bg);
281
+ }
282
+ .dodo-ui-Button[disabled] {
283
+ cursor: not-allowed;
284
+ pointer-events: none;
285
+ }
286
+ .dodo-ui-Button[disabled].variant--text, .dodo-ui-Button[disabled].variant--solid {
287
+ background-color: var(--dodo-ui-Button-disabled-bg);
288
+ color: var(--dodo-ui-Button-disabled-color);
289
+ }
290
+ .dodo-ui-Button[disabled].variant--text.outline, .dodo-ui-Button[disabled].variant--solid.outline {
291
+ border-color: transparent;
292
+ }
293
+ .dodo-ui-Button.compact.size--normal, .dodo-ui-Button.compact.size--small, .dodo-ui-Button.compact.size--large {
294
+ min-width: initial;
295
+ padding: 0;
296
+ }
297
+ .dodo-ui-Button.compact.size--normal {
298
+ width: var(--dodo-ui-element-height-normal);
299
+ }
300
+ .dodo-ui-Button.compact.size--small {
301
+ width: var(--dodo-ui-element-height-small);
302
+ }
303
+ .dodo-ui-Button.compact.size--large {
304
+ width: var(--dodo-ui-element-height-large);
305
+ }
306
+ .dodo-ui-Button.fullWidth {
307
+ width: 100%;
308
+ }
309
+
310
+ :root {
311
+ --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
312
+ --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
313
+ --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
314
+ --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-500);
315
+ --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
316
+ --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
317
+ }
318
+
319
+ .dodo-theme--dark {
320
+ --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
321
+ --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
322
+ --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
323
+ --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-600);
324
+ --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
325
+ --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
326
+ }
327
+
328
+ .dodo-ui-InputEnclosure {
329
+ display: flex;
330
+ overflow: hidden;
331
+ color: var(--dodo-color-neutral-800);
332
+ transition: border-color 150ms, background-color 150ms, color 150ms;
333
+ border: 0;
334
+ }
335
+ .dodo-ui-InputEnclosure.outline {
336
+ border-style: solid;
337
+ border-width: var(--dodo-ui-element-border-width);
338
+ border-color: var(--dodo-ui-InputEnclosure-border-color);
339
+ }
340
+ .dodo-ui-InputEnclosure.focused {
341
+ border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
342
+ }
343
+ .dodo-ui-InputEnclosure.error {
344
+ border-color: var(--dodo-ui-InputEnclosure-error-border-color);
345
+ }
346
+ .dodo-ui-InputEnclosure.disabled {
347
+ cursor: not-allowed;
348
+ background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
349
+ color: var(--dodo-ui-InputEnclosure-disabled-color);
350
+ border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
351
+ }
352
+ .dodo-ui-InputEnclosure.size--small {
353
+ height: var(--dodo-ui-element-height-small);
354
+ }
355
+ .dodo-ui-InputEnclosure.size--normal {
356
+ height: var(--dodo-ui-element-height-normal);
357
+ }
358
+ .dodo-ui-InputEnclosure.size--large {
359
+ height: var(--dodo-ui-element-height-large);
360
+ }
361
+ .dodo-ui-InputEnclosure.roundness--1 {
362
+ border-radius: var(--dodo-ui-element-roundness-1);
363
+ }
364
+ .dodo-ui-InputEnclosure.roundness--2 {
365
+ border-radius: var(--dodo-ui-element-roundness-2);
366
+ }
367
+ .dodo-ui-InputEnclosure.roundness--3 {
368
+ border-radius: var(--dodo-ui-element-roundness-3);
369
+ }
370
+ .dodo-ui-InputEnclosure.roundness--pill {
371
+ border-radius: 999px;
372
+ }
373
+
374
+ .dodo-ui-TextInput {
375
+ flex: 1;
376
+ border: 0;
377
+ outline: 0;
378
+ height: 100%;
379
+ background-color: transparent;
380
+ font-family: inherit;
381
+ color: inherit;
382
+ letter-spacing: 0.3px;
383
+ margin: 0;
384
+ }
385
+ .dodo-ui-TextInput.size--normal {
386
+ font-size: 1rem;
387
+ padding: 0 calc(var(--dodo-ui-space-small) * 2);
388
+ }
389
+ .dodo-ui-TextInput.size--small {
390
+ padding: 0 var(--dodo-ui-space);
391
+ font-size: 0.9rem;
392
+ }
393
+ .dodo-ui-TextInput.size--large {
394
+ font-size: 1.1rem;
395
+ padding: 0 calc(var(--dodo-ui-space) * 2);
396
+ }
397
+
398
+ /*# sourceMappingURL=components.css.map */
package/dist/styles/components.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/lib/components/Form/Button/Button.scss","../../src/lib/styles/scss/mixins/_button-color.scss","../../src/lib/components/Form/InputEnclosure/InputEnclosure.scss","../../src/lib/components/Form/TextInput/TextInput.scss"],"names":[],"mappings":"AAUA;EACE;EACA;EC6DA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;;;AD/EF;EACE;EACA;ECmDA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;EA1BA;EAKA;EAIA;EAIA;EAKA;EAIA;EAIA;;;ADtDF;EACE;EACA,YACE;EAGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAME;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AASA;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AA6DN;EACE,eA9DI;;AC0EN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AA1BJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;ADpBR;EACE;EACA;;AAGE;EAEE;EACA;;AAEA;EACE;;AAWJ;EAGE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAQN;EACE;;;AE9JJ;EACE;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;;;AA4BF;EACE;EACA;EACA;EACA,YACE;EAGF;;AAEA;EACE;EACA;EACA;;AAOA;EACE,cA7BG;;AA4BL;EACE,cA7BG;;AAoCP;EACE;EACA;EACA;EACA;;AAQE;EACE,QA/DA;;AA8DF;EACE,QA/DA;;AA8DF;EACE,QA/DA;;AAyEF;EACE,eApEI;;AAmEN;EACE,eApEI;;AAmEN;EACE,eApEI;;AAmEN;EACE,eApEI;;;AC7BZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAME;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA","file":"components.css"}
package/dist/styles/global.css ADDED
@@ -0,0 +1,481 @@
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ :root {
6
+ /* Tailwind CSS */
7
+ /* https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css */
8
+ --dodo-color-base-red-50: oklch(0.971 0.013 17.38);
9
+ --dodo-color-base-red-100: oklch(0.936 0.032 17.717);
10
+ --dodo-color-base-red-200: oklch(0.885 0.062 18.334);
11
+ --dodo-color-base-red-300: oklch(0.808 0.114 19.571);
12
+ --dodo-color-base-red-400: oklch(0.704 0.191 22.216);
13
+ --dodo-color-base-red-500: oklch(0.637 0.237 25.331);
14
+ --dodo-color-base-red-600: oklch(0.577 0.245 27.325);
15
+ --dodo-color-base-red-700: oklch(0.505 0.213 27.518);
16
+ --dodo-color-base-red-800: oklch(0.444 0.177 26.899);
17
+ --dodo-color-base-red-900: oklch(0.396 0.141 25.723);
18
+ --dodo-color-base-red-950: oklch(0.258 0.092 26.042);
19
+ --dodo-color-base-orange-50: oklch(0.98 0.016 73.684);
20
+ --dodo-color-base-orange-100: oklch(0.954 0.038 75.164);
21
+ --dodo-color-base-orange-200: oklch(0.901 0.076 70.697);
22
+ --dodo-color-base-orange-300: oklch(0.837 0.128 66.29);
23
+ --dodo-color-base-orange-400: oklch(0.75 0.183 55.934);
24
+ --dodo-color-base-orange-500: oklch(0.705 0.213 47.604);
25
+ --dodo-color-base-orange-600: oklch(0.646 0.222 41.116);
26
+ --dodo-color-base-orange-700: oklch(0.553 0.195 38.402);
27
+ --dodo-color-base-orange-800: oklch(0.47 0.157 37.304);
28
+ --dodo-color-base-orange-900: oklch(0.408 0.123 38.172);
29
+ --dodo-color-base-orange-950: oklch(0.266 0.079 36.259);
30
+ --dodo-color-base-amber-50: oklch(0.987 0.022 95.277);
31
+ --dodo-color-base-amber-100: oklch(0.962 0.059 95.617);
32
+ --dodo-color-base-amber-200: oklch(0.924 0.12 95.746);
33
+ --dodo-color-base-amber-300: oklch(0.879 0.169 91.605);
34
+ --dodo-color-base-amber-400: oklch(0.828 0.189 84.429);
35
+ --dodo-color-base-amber-500: oklch(0.769 0.188 70.08);
36
+ --dodo-color-base-amber-600: oklch(0.666 0.179 58.318);
37
+ --dodo-color-base-amber-700: oklch(0.555 0.163 48.998);
38
+ --dodo-color-base-amber-800: oklch(0.473 0.137 46.201);
39
+ --dodo-color-base-amber-900: oklch(0.414 0.112 45.904);
40
+ --dodo-color-base-amber-950: oklch(0.279 0.077 45.635);
41
+ --dodo-color-base-yellow-50: oklch(0.987 0.026 102.212);
42
+ --dodo-color-base-yellow-100: oklch(0.973 0.071 103.193);
43
+ --dodo-color-base-yellow-200: oklch(0.945 0.129 101.54);
44
+ --dodo-color-base-yellow-300: oklch(0.905 0.182 98.111);
45
+ --dodo-color-base-yellow-400: oklch(0.852 0.199 91.936);
46
+ --dodo-color-base-yellow-500: oklch(0.795 0.184 86.047);
47
+ --dodo-color-base-yellow-600: oklch(0.681 0.162 75.834);
48
+ --dodo-color-base-yellow-700: oklch(0.554 0.135 66.442);
49
+ --dodo-color-base-yellow-800: oklch(0.476 0.114 61.907);
50
+ --dodo-color-base-yellow-900: oklch(0.421 0.095 57.708);
51
+ --dodo-color-base-yellow-950: oklch(0.286 0.066 53.813);
52
+ --dodo-color-base-lime-50: oklch(0.986 0.031 120.757);
53
+ --dodo-color-base-lime-100: oklch(0.967 0.067 122.328);
54
+ --dodo-color-base-lime-200: oklch(0.938 0.127 124.321);
55
+ --dodo-color-base-lime-300: oklch(0.897 0.196 126.665);
56
+ --dodo-color-base-lime-400: oklch(0.841 0.238 128.85);
57
+ --dodo-color-base-lime-500: oklch(0.768 0.233 130.85);
58
+ --dodo-color-base-lime-600: oklch(0.648 0.2 131.684);
59
+ --dodo-color-base-lime-700: oklch(0.532 0.157 131.589);
60
+ --dodo-color-base-lime-800: oklch(0.453 0.124 130.933);
61
+ --dodo-color-base-lime-900: oklch(0.405 0.101 131.063);
62
+ --dodo-color-base-lime-950: oklch(0.274 0.072 132.109);
63
+ --dodo-color-base-green-50: oklch(0.982 0.018 155.826);
64
+ --dodo-color-base-green-100: oklch(0.962 0.044 156.743);
65
+ --dodo-color-base-green-200: oklch(0.925 0.084 155.995);
66
+ --dodo-color-base-green-300: oklch(0.871 0.15 154.449);
67
+ --dodo-color-base-green-400: oklch(0.792 0.209 151.711);
68
+ --dodo-color-base-green-500: oklch(0.723 0.219 149.579);
69
+ --dodo-color-base-green-600: oklch(0.627 0.194 149.214);
70
+ --dodo-color-base-green-700: oklch(0.527 0.154 150.069);
71
+ --dodo-color-base-green-800: oklch(0.448 0.119 151.328);
72
+ --dodo-color-base-green-900: oklch(0.393 0.095 152.535);
73
+ --dodo-color-base-green-950: oklch(0.266 0.065 152.934);
74
+ --dodo-color-base-emerald-50: oklch(0.979 0.021 166.113);
75
+ --dodo-color-base-emerald-100: oklch(0.95 0.052 163.051);
76
+ --dodo-color-base-emerald-200: oklch(0.905 0.093 164.15);
77
+ --dodo-color-base-emerald-300: oklch(0.845 0.143 164.978);
78
+ --dodo-color-base-emerald-400: oklch(0.765 0.177 163.223);
79
+ --dodo-color-base-emerald-500: oklch(0.696 0.17 162.48);
80
+ --dodo-color-base-emerald-600: oklch(0.596 0.145 163.225);
81
+ --dodo-color-base-emerald-700: oklch(0.508 0.118 165.612);
82
+ --dodo-color-base-emerald-800: oklch(0.432 0.095 166.913);
83
+ --dodo-color-base-emerald-900: oklch(0.378 0.077 168.94);
84
+ --dodo-color-base-emerald-950: oklch(0.262 0.051 172.552);
85
+ --dodo-color-base-teal-50: oklch(0.984 0.014 180.72);
86
+ --dodo-color-base-teal-100: oklch(0.953 0.051 180.801);
87
+ --dodo-color-base-teal-200: oklch(0.91 0.096 180.426);
88
+ --dodo-color-base-teal-300: oklch(0.855 0.138 181.071);
89
+ --dodo-color-base-teal-400: oklch(0.777 0.152 181.912);
90
+ --dodo-color-base-teal-500: oklch(0.704 0.14 182.503);
91
+ --dodo-color-base-teal-600: oklch(0.6 0.118 184.704);
92
+ --dodo-color-base-teal-700: oklch(0.511 0.096 186.391);
93
+ --dodo-color-base-teal-800: oklch(0.437 0.078 188.216);
94
+ --dodo-color-base-teal-900: oklch(0.386 0.063 188.416);
95
+ --dodo-color-base-teal-950: oklch(0.277 0.046 192.524);
96
+ --dodo-color-base-cyan-50: oklch(0.984 0.019 200.873);
97
+ --dodo-color-base-cyan-100: oklch(0.956 0.045 203.388);
98
+ --dodo-color-base-cyan-200: oklch(0.917 0.08 205.041);
99
+ --dodo-color-base-cyan-300: oklch(0.865 0.127 207.078);
100
+ --dodo-color-base-cyan-400: oklch(0.789 0.154 211.53);
101
+ --dodo-color-base-cyan-500: oklch(0.715 0.143 215.221);
102
+ --dodo-color-base-cyan-600: oklch(0.609 0.126 221.723);
103
+ --dodo-color-base-cyan-700: oklch(0.52 0.105 223.128);
104
+ --dodo-color-base-cyan-800: oklch(0.45 0.085 224.283);
105
+ --dodo-color-base-cyan-900: oklch(0.398 0.07 227.392);
106
+ --dodo-color-base-cyan-950: oklch(0.302 0.056 229.695);
107
+ --dodo-color-base-sky-50: oklch(0.977 0.013 236.62);
108
+ --dodo-color-base-sky-100: oklch(0.951 0.026 236.824);
109
+ --dodo-color-base-sky-200: oklch(0.901 0.058 230.902);
110
+ --dodo-color-base-sky-300: oklch(0.828 0.111 230.318);
111
+ --dodo-color-base-sky-400: oklch(0.746 0.16 232.661);
112
+ --dodo-color-base-sky-500: oklch(0.685 0.169 237.323);
113
+ --dodo-color-base-sky-600: oklch(0.588 0.158 241.966);
114
+ --dodo-color-base-sky-700: oklch(0.5 0.134 242.749);
115
+ --dodo-color-base-sky-800: oklch(0.443 0.11 240.79);
116
+ --dodo-color-base-sky-900: oklch(0.391 0.09 240.876);
117
+ --dodo-color-base-sky-950: oklch(0.293 0.066 243.157);
118
+ --dodo-color-base-blue-50: oklch(0.97 0.014 254.604);
119
+ --dodo-color-base-blue-100: oklch(0.932 0.032 255.585);
120
+ --dodo-color-base-blue-200: oklch(0.882 0.059 254.128);
121
+ --dodo-color-base-blue-300: oklch(0.809 0.105 251.813);
122
+ --dodo-color-base-blue-400: oklch(0.707 0.165 254.624);
123
+ --dodo-color-base-blue-500: oklch(0.623 0.214 259.815);
124
+ --dodo-color-base-blue-600: oklch(0.546 0.245 262.881);
125
+ --dodo-color-base-blue-700: oklch(0.488 0.243 264.376);
126
+ --dodo-color-base-blue-800: oklch(0.424 0.199 265.638);
127
+ --dodo-color-base-blue-900: oklch(0.379 0.146 265.522);
128
+ --dodo-color-base-blue-950: oklch(0.282 0.091 267.935);
129
+ --dodo-color-base-indigo-50: oklch(0.962 0.018 272.314);
130
+ --dodo-color-base-indigo-100: oklch(0.93 0.034 272.788);
131
+ --dodo-color-base-indigo-200: oklch(0.87 0.065 274.039);
132
+ --dodo-color-base-indigo-300: oklch(0.785 0.115 274.713);
133
+ --dodo-color-base-indigo-400: oklch(0.673 0.182 276.935);
134
+ --dodo-color-base-indigo-500: oklch(0.585 0.233 277.117);
135
+ --dodo-color-base-indigo-600: oklch(0.511 0.262 276.966);
136
+ --dodo-color-base-indigo-700: oklch(0.457 0.24 277.023);
137
+ --dodo-color-base-indigo-800: oklch(0.398 0.195 277.366);
138
+ --dodo-color-base-indigo-900: oklch(0.359 0.144 278.697);
139
+ --dodo-color-base-indigo-950: oklch(0.257 0.09 281.288);
140
+ --dodo-color-base-violet-50: oklch(0.969 0.016 293.756);
141
+ --dodo-color-base-violet-100: oklch(0.943 0.029 294.588);
142
+ --dodo-color-base-violet-200: oklch(0.894 0.057 293.283);
143
+ --dodo-color-base-violet-300: oklch(0.811 0.111 293.571);
144
+ --dodo-color-base-violet-400: oklch(0.702 0.183 293.541);
145
+ --dodo-color-base-violet-500: oklch(0.606 0.25 292.717);
146
+ --dodo-color-base-violet-600: oklch(0.541 0.281 293.009);
147
+ --dodo-color-base-violet-700: oklch(0.491 0.27 292.581);
148
+ --dodo-color-base-violet-800: oklch(0.432 0.232 292.759);
149
+ --dodo-color-base-violet-900: oklch(0.38 0.189 293.745);
150
+ --dodo-color-base-violet-950: oklch(0.283 0.141 291.089);
151
+ --dodo-color-base-purple-50: oklch(0.977 0.014 308.299);
152
+ --dodo-color-base-purple-100: oklch(0.946 0.033 307.174);
153
+ --dodo-color-base-purple-200: oklch(0.902 0.063 306.703);
154
+ --dodo-color-base-purple-300: oklch(0.827 0.119 306.383);
155
+ --dodo-color-base-purple-400: oklch(0.714 0.203 305.504);
156
+ --dodo-color-base-purple-500: oklch(0.627 0.265 303.9);
157
+ --dodo-color-base-purple-600: oklch(0.558 0.288 302.321);
158
+ --dodo-color-base-purple-700: oklch(0.496 0.265 301.924);
159
+ --dodo-color-base-purple-800: oklch(0.438 0.218 303.724);
160
+ --dodo-color-base-purple-900: oklch(0.381 0.176 304.987);
161
+ --dodo-color-base-purple-950: oklch(0.291 0.149 302.717);
162
+ --dodo-color-base-fuchsia-50: oklch(0.977 0.017 320.058);
163
+ --dodo-color-base-fuchsia-100: oklch(0.952 0.037 318.852);
164
+ --dodo-color-base-fuchsia-200: oklch(0.903 0.076 319.62);
165
+ --dodo-color-base-fuchsia-300: oklch(0.833 0.145 321.434);
166
+ --dodo-color-base-fuchsia-400: oklch(0.74 0.238 322.16);
167
+ --dodo-color-base-fuchsia-500: oklch(0.667 0.295 322.15);
168
+ --dodo-color-base-fuchsia-600: oklch(0.591 0.293 322.896);
169
+ --dodo-color-base-fuchsia-700: oklch(0.518 0.253 323.949);
170
+ --dodo-color-base-fuchsia-800: oklch(0.452 0.211 324.591);
171
+ --dodo-color-base-fuchsia-900: oklch(0.401 0.17 325.612);
172
+ --dodo-color-base-fuchsia-950: oklch(0.293 0.136 325.661);
173
+ --dodo-color-base-pink-50: oklch(0.971 0.014 343.198);
174
+ --dodo-color-base-pink-100: oklch(0.948 0.028 342.258);
175
+ --dodo-color-base-pink-200: oklch(0.899 0.061 343.231);
176
+ --dodo-color-base-pink-300: oklch(0.823 0.12 346.018);
177
+ --dodo-color-base-pink-400: oklch(0.718 0.202 349.761);
178
+ --dodo-color-base-pink-500: oklch(0.656 0.241 354.308);
179
+ --dodo-color-base-pink-600: oklch(0.592 0.249 0.584);
180
+ --dodo-color-base-pink-700: oklch(0.525 0.223 3.958);
181
+ --dodo-color-base-pink-800: oklch(0.459 0.187 3.815);
182
+ --dodo-color-base-pink-900: oklch(0.408 0.153 2.432);
183
+ --dodo-color-base-pink-950: oklch(0.284 0.109 3.907);
184
+ --dodo-color-base-rose-50: oklch(0.969 0.015 12.422);
185
+ --dodo-color-base-rose-100: oklch(0.941 0.03 12.58);
186
+ --dodo-color-base-rose-200: oklch(0.892 0.058 10.001);
187
+ --dodo-color-base-rose-300: oklch(0.81 0.117 11.638);
188
+ --dodo-color-base-rose-400: oklch(0.712 0.194 13.428);
189
+ --dodo-color-base-rose-500: oklch(0.645 0.246 16.439);
190
+ --dodo-color-base-rose-600: oklch(0.586 0.253 17.585);
191
+ --dodo-color-base-rose-700: oklch(0.514 0.222 16.935);
192
+ --dodo-color-base-rose-800: oklch(0.455 0.188 13.697);
193
+ --dodo-color-base-rose-900: oklch(0.41 0.159 10.272);
194
+ --dodo-color-base-rose-950: oklch(0.271 0.105 12.094);
195
+ --dodo-color-base-slate-50: oklch(0.984 0.003 247.858);
196
+ --dodo-color-base-slate-100: oklch(0.968 0.007 247.896);
197
+ --dodo-color-base-slate-200: oklch(0.929 0.013 255.508);
198
+ --dodo-color-base-slate-300: oklch(0.869 0.022 252.894);
199
+ --dodo-color-base-slate-400: oklch(0.704 0.04 256.788);
200
+ --dodo-color-base-slate-500: oklch(0.554 0.046 257.417);
201
+ --dodo-color-base-slate-600: oklch(0.446 0.043 257.281);
202
+ --dodo-color-base-slate-700: oklch(0.372 0.044 257.287);
203
+ --dodo-color-base-slate-800: oklch(0.279 0.041 260.031);
204
+ --dodo-color-base-slate-900: oklch(0.208 0.042 265.755);
205
+ --dodo-color-base-slate-950: oklch(0.129 0.042 264.695);
206
+ --dodo-color-base-gray-50: oklch(0.985 0.002 247.839);
207
+ --dodo-color-base-gray-100: oklch(0.967 0.003 264.542);
208
+ --dodo-color-base-gray-200: oklch(0.928 0.006 264.531);
209
+ --dodo-color-base-gray-300: oklch(0.872 0.01 258.338);
210
+ --dodo-color-base-gray-400: oklch(0.707 0.022 261.325);
211
+ --dodo-color-base-gray-500: oklch(0.551 0.027 264.364);
212
+ --dodo-color-base-gray-600: oklch(0.446 0.03 256.802);
213
+ --dodo-color-base-gray-700: oklch(0.373 0.034 259.733);
214
+ --dodo-color-base-gray-800: oklch(0.278 0.033 256.848);
215
+ --dodo-color-base-gray-900: oklch(0.21 0.034 264.665);
216
+ --dodo-color-base-gray-950: oklch(0.13 0.028 261.692);
217
+ --dodo-color-base-zinc-50: oklch(0.985 0 0);
218
+ --dodo-color-base-zinc-100: oklch(0.967 0.001 286.375);
219
+ --dodo-color-base-zinc-200: oklch(0.92 0.004 286.32);
220
+ --dodo-color-base-zinc-300: oklch(0.871 0.006 286.286);
221
+ --dodo-color-base-zinc-400: oklch(0.705 0.015 286.067);
222
+ --dodo-color-base-zinc-500: oklch(0.552 0.016 285.938);
223
+ --dodo-color-base-zinc-600: oklch(0.442 0.017 285.786);
224
+ --dodo-color-base-zinc-700: oklch(0.37 0.013 285.805);
225
+ --dodo-color-base-zinc-800: oklch(0.274 0.006 286.033);
226
+ --dodo-color-base-zinc-900: oklch(0.21 0.006 285.885);
227
+ --dodo-color-base-zinc-950: oklch(0.141 0.005 285.823);
228
+ --dodo-color-base-neutral-50: oklch(0.985 0 0);
229
+ --dodo-color-base-neutral-100: oklch(0.97 0 0);
230
+ --dodo-color-base-neutral-200: oklch(0.922 0 0);
231
+ --dodo-color-base-neutral-300: oklch(0.87 0 0);
232
+ --dodo-color-base-neutral-400: oklch(0.708 0 0);
233
+ --dodo-color-base-neutral-500: oklch(0.556 0 0);
234
+ --dodo-color-base-neutral-600: oklch(0.439 0 0);
235
+ --dodo-color-base-neutral-700: oklch(0.371 0 0);
236
+ --dodo-color-base-neutral-800: oklch(0.269 0 0);
237
+ --dodo-color-base-neutral-900: oklch(0.205 0 0);
238
+ --dodo-color-base-neutral-950: oklch(0.145 0 0);
239
+ --dodo-color-base-stone-50: oklch(0.985 0.001 106.423);
240
+ --dodo-color-base-stone-100: oklch(0.97 0.001 106.424);
241
+ --dodo-color-base-stone-200: oklch(0.923 0.003 48.717);
242
+ --dodo-color-base-stone-300: oklch(0.869 0.005 56.366);
243
+ --dodo-color-base-stone-400: oklch(0.709 0.01 56.259);
244
+ --dodo-color-base-stone-500: oklch(0.553 0.013 58.071);
245
+ --dodo-color-base-stone-600: oklch(0.444 0.011 73.639);
246
+ --dodo-color-base-stone-700: oklch(0.374 0.01 67.558);
247
+ --dodo-color-base-stone-800: oklch(0.268 0.007 34.298);
248
+ --dodo-color-base-stone-900: oklch(0.216 0.006 56.043);
249
+ --dodo-color-base-stone-950: oklch(0.147 0.004 49.25);
250
+ --dodo-color-base-black: #000;
251
+ --dodo-color-base-white: #fff;
252
+ }
253
+
254
+ :root {
255
+ /* Neutral colors */
256
+ --dodo-color-black: var(--dodo-color-base-black);
257
+ --dodo-color-white: var(--dodo-color-base-white);
258
+ /* Constants colors */
259
+ --dodo-color-constant-black: var(--dodo-color-base-black);
260
+ --dodo-color-constant-white: var(--dodo-color-base-white);
261
+ /* Neutral color */
262
+ --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
263
+ --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
264
+ --dodo-color-neutral-200: var(--dodo-color-base-gray-200);
265
+ --dodo-color-neutral-300: var(--dodo-color-base-gray-300);
266
+ --dodo-color-neutral-400: var(--dodo-color-base-gray-400);
267
+ --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
268
+ --dodo-color-neutral-600: var(--dodo-color-base-gray-600);
269
+ --dodo-color-neutral-700: var(--dodo-color-base-gray-700);
270
+ --dodo-color-neutral-800: var(--dodo-color-base-gray-800);
271
+ --dodo-color-neutral-900: var(--dodo-color-base-gray-900);
272
+ --dodo-color-neutral-950: var(--dodo-color-base-gray-950);
273
+ /* Primary color */
274
+ --dodo-color-primary-50: var(--dodo-color-base-violet-50);
275
+ --dodo-color-primary-100: var(--dodo-color-base-violet-100);
276
+ --dodo-color-primary-200: var(--dodo-color-base-violet-200);
277
+ --dodo-color-primary-300: var(--dodo-color-base-violet-300);
278
+ --dodo-color-primary-400: var(--dodo-color-base-violet-400);
279
+ --dodo-color-primary-500: var(--dodo-color-base-violet-500);
280
+ --dodo-color-primary-600: var(--dodo-color-base-violet-600);
281
+ --dodo-color-primary-700: var(--dodo-color-base-violet-700);
282
+ --dodo-color-primary-800: var(--dodo-color-base-violet-800);
283
+ --dodo-color-primary-900: var(--dodo-color-base-violet-900);
284
+ --dodo-color-primary-950: var(--dodo-color-base-violet-950);
285
+ /* Secondary color */
286
+ --dodo-color-secondary-50: var(--dodo-color-base-blue-50);
287
+ --dodo-color-secondary-100: var(--dodo-color-base-blue-100);
288
+ --dodo-color-secondary-200: var(--dodo-color-base-blue-200);
289
+ --dodo-color-secondary-300: var(--dodo-color-base-blue-300);
290
+ --dodo-color-secondary-400: var(--dodo-color-base-blue-400);
291
+ --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
292
+ --dodo-color-secondary-600: var(--dodo-color-base-blue-600);
293
+ --dodo-color-secondary-700: var(--dodo-color-base-blue-700);
294
+ --dodo-color-secondary-800: var(--dodo-color-base-blue-800);
295
+ --dodo-color-secondary-900: var(--dodo-color-base-blue-900);
296
+ --dodo-color-secondary-950: var(--dodo-color-base-blue-950);
297
+ /* Safe color */
298
+ --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
299
+ --dodo-color-safe-100: var(--dodo-color-base-emerald-100);
300
+ --dodo-color-safe-200: var(--dodo-color-base-emerald-200);
301
+ --dodo-color-safe-300: var(--dodo-color-base-emerald-300);
302
+ --dodo-color-safe-400: var(--dodo-color-base-emerald-400);
303
+ --dodo-color-safe-500: var(--dodo-color-base-emerald-500);
304
+ --dodo-color-safe-600: var(--dodo-color-base-emerald-600);
305
+ --dodo-color-safe-700: var(--dodo-color-base-emerald-700);
306
+ --dodo-color-safe-800: var(--dodo-color-base-emerald-800);
307
+ --dodo-color-safe-900: var(--dodo-color-base-emerald-900);
308
+ --dodo-color-safe-950: var(--dodo-color-base-emerald-950);
309
+ /* Warning color */
310
+ --dodo-color-warning-50: var(--dodo-color-base-amber-50);
311
+ --dodo-color-warning-100: var(--dodo-color-base-amber-100);
312
+ --dodo-color-warning-200: var(--dodo-color-base-amber-200);
313
+ --dodo-color-warning-300: var(--dodo-color-base-amber-300);
314
+ --dodo-color-warning-400: var(--dodo-color-base-amber-400);
315
+ --dodo-color-warning-500: var(--dodo-color-base-amber-500);
316
+ --dodo-color-warning-600: var(--dodo-color-base-amber-600);
317
+ --dodo-color-warning-700: var(--dodo-color-base-amber-700);
318
+ --dodo-color-warning-800: var(--dodo-color-base-amber-800);
319
+ --dodo-color-warning-900: var(--dodo-color-base-amber-900);
320
+ --dodo-color-warning-950: var(--dodo-color-base-amber-950);
321
+ /* Danger color */
322
+ --dodo-color-danger-50: var(--dodo-color-base-red-50);
323
+ --dodo-color-danger-100: var(--dodo-color-base-red-100);
324
+ --dodo-color-danger-200: var(--dodo-color-base-red-200);
325
+ --dodo-color-danger-300: var(--dodo-color-base-red-300);
326
+ --dodo-color-danger-400: var(--dodo-color-base-red-400);
327
+ --dodo-color-danger-500: var(--dodo-color-base-red-500);
328
+ --dodo-color-danger-600: var(--dodo-color-base-red-600);
329
+ --dodo-color-danger-700: var(--dodo-color-base-red-700);
330
+ --dodo-color-danger-800: var(--dodo-color-base-red-800);
331
+ --dodo-color-danger-900: var(--dodo-color-base-red-900);
332
+ --dodo-color-danger-950: var(--dodo-color-base-red-950);
333
+ }
334
+
335
+ .dodo-theme--dark {
336
+ /* Dark: Base colors */
337
+ --dodo-color-black: var(--dodo-color-base-white);
338
+ --dodo-color-white: var(--dodo-color-base-black);
339
+ /* Dark: Default color */
340
+ --dodo-color-neutral-50: var(--dodo-color-base-gray-950);
341
+ --dodo-color-neutral-100: var(--dodo-color-base-gray-900);
342
+ --dodo-color-neutral-200: var(--dodo-color-base-gray-800);
343
+ --dodo-color-neutral-300: var(--dodo-color-base-gray-700);
344
+ --dodo-color-neutral-400: var(--dodo-color-base-gray-600);
345
+ --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
346
+ --dodo-color-neutral-600: var(--dodo-color-base-gray-400);
347
+ --dodo-color-neutral-700: var(--dodo-color-base-gray-300);
348
+ --dodo-color-neutral-800: var(--dodo-color-base-gray-200);
349
+ --dodo-color-neutral-900: var(--dodo-color-base-gray-100);
350
+ --dodo-color-neutral-950: var(--dodo-color-base-gray-50);
351
+ /* Dark: Primary color */
352
+ --dodo-color-primary-50: var(--dodo-color-base-violet-950);
353
+ --dodo-color-primary-100: var(--dodo-color-base-violet-900);
354
+ --dodo-color-primary-200: var(--dodo-color-base-violet-800);
355
+ --dodo-color-primary-300: var(--dodo-color-base-violet-700);
356
+ --dodo-color-primary-400: var(--dodo-color-base-violet-600);
357
+ --dodo-color-primary-500: var(--dodo-color-base-violet-500);
358
+ --dodo-color-primary-600: var(--dodo-color-base-violet-400);
359
+ --dodo-color-primary-700: var(--dodo-color-base-violet-300);
360
+ --dodo-color-primary-800: var(--dodo-color-base-violet-200);
361
+ --dodo-color-primary-900: var(--dodo-color-base-violet-100);
362
+ --dodo-color-primary-950: var(--dodo-color-base-violet-50);
363
+ /* Dark: Secondary color */
364
+ --dodo-color-secondary-50: var(--dodo-color-base-blue-950);
365
+ --dodo-color-secondary-100: var(--dodo-color-base-blue-900);
366
+ --dodo-color-secondary-200: var(--dodo-color-base-blue-800);
367
+ --dodo-color-secondary-300: var(--dodo-color-base-blue-700);
368
+ --dodo-color-secondary-400: var(--dodo-color-base-blue-600);
369
+ --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
370
+ --dodo-color-secondary-600: var(--dodo-color-base-blue-400);
371
+ --dodo-color-secondary-700: var(--dodo-color-base-blue-300);
372
+ --dodo-color-secondary-800: var(--dodo-color-base-blue-200);
373
+ --dodo-color-secondary-900: var(--dodo-color-base-blue-100);
374
+ --dodo-color-secondary-950: var(--dodo-color-base-blue-50);
375
+ /* Dark: Safe color */
376
+ --dodo-color-safe-50: var(--dodo-color-base-emerald-950);
377
+ --dodo-color-safe-100: var(--dodo-color-base-emerald-900);
378
+ --dodo-color-safe-200: var(--dodo-color-base-emerald-800);
379
+ --dodo-color-safe-300: var(--dodo-color-base-emerald-700);
380
+ --dodo-color-safe-400: var(--dodo-color-base-emerald-600);
381
+ --dodo-color-safe-500: var(--dodo-color-base-emerald-500);
382
+ --dodo-color-safe-600: var(--dodo-color-base-emerald-400);
383
+ --dodo-color-safe-700: var(--dodo-color-base-emerald-300);
384
+ --dodo-color-safe-800: var(--dodo-color-base-emerald-200);
385
+ --dodo-color-safe-900: var(--dodo-color-base-emerald-100);
386
+ --dodo-color-safe-950: var(--dodo-color-base-emerald-50);
387
+ /* Dark: Warning color */
388
+ --dodo-color-warning-50: var(--dodo-color-base-amber-950);
389
+ --dodo-color-warning-100: var(--dodo-color-base-amber-900);
390
+ --dodo-color-warning-200: var(--dodo-color-base-amber-800);
391
+ --dodo-color-warning-300: var(--dodo-color-base-amber-700);
392
+ --dodo-color-warning-400: var(--dodo-color-base-amber-600);
393
+ --dodo-color-warning-500: var(--dodo-color-base-amber-500);
394
+ --dodo-color-warning-600: var(--dodo-color-base-amber-400);
395
+ --dodo-color-warning-700: var(--dodo-color-base-amber-300);
396
+ --dodo-color-warning-800: var(--dodo-color-base-amber-200);
397
+ --dodo-color-warning-900: var(--dodo-color-base-amber-100);
398
+ --dodo-color-warning-950: var(--dodo-color-base-amber-50);
399
+ /* Dark: Danger color */
400
+ --dodo-color-danger-50: var(--dodo-color-base-red-950);
401
+ --dodo-color-danger-100: var(--dodo-color-base-red-900);
402
+ --dodo-color-danger-200: var(--dodo-color-base-red-800);
403
+ --dodo-color-danger-300: var(--dodo-color-base-red-700);
404
+ --dodo-color-danger-400: var(--dodo-color-base-red-600);
405
+ --dodo-color-danger-500: var(--dodo-color-base-red-500);
406
+ --dodo-color-danger-600: var(--dodo-color-base-red-400);
407
+ --dodo-color-danger-700: var(--dodo-color-base-red-300);
408
+ --dodo-color-danger-800: var(--dodo-color-base-red-200);
409
+ --dodo-color-danger-900: var(--dodo-color-base-red-100);
410
+ --dodo-color-danger-950: var(--dodo-color-base-red-50);
411
+ }
412
+
413
+ :root {
414
+ /* Space */
415
+ /* Example: calc(var(--dodo-ui-space) * 2), calc(var(--dodo-ui-space) / 2) */
416
+ --dodo-ui-space-small: 6px;
417
+ --dodo-ui-space: 8px;
418
+ --dodo-ui-space-large: 10px;
419
+ }
420
+
421
+ :root {
422
+ /* zIndex */
423
+ --dodo-ui-z-index-0: 0;
424
+ --dodo-ui-z-index-1: 1;
425
+ --dodo-ui-z-index-2: 100;
426
+ --dodo-ui-z-index-3: 1000;
427
+ --dodo-ui-z-index-4: 5000;
428
+ --dodo-ui-z-index-5: 5001;
429
+ }
430
+
431
+ :root {
432
+ --dodo-shadow-color: rgba(0, 0, 0, 0.11);
433
+ }
434
+
435
+ .dodo-theme--dark {
436
+ --dodo-shadow-color: rgba(0, 0, 0, 0.09);
437
+ }
438
+
439
+ .dodo-shadow-1 {
440
+ --dodo-shadow: 0 1px 3px var(--dodo-shadow-color), 0 1px 2px var(--dodo-shadow-color);
441
+ box-shadow: var(--dodo-shadow);
442
+ }
443
+
444
+ .dodo-shadow-2 {
445
+ --dodo-shadow: 0 3px 6px var(--dodo-shadow-color), 0 3px 6px var(--dodo-shadow-color);
446
+ box-shadow: var(--dodo-shadow);
447
+ }
448
+
449
+ .dodo-shadow-3 {
450
+ --dodo-shadow: 0 6px 10px var(--dodo-shadow-color), 0 5px 17px var(--dodo-shadow-color);
451
+ box-shadow: var(--dodo-shadow);
452
+ }
453
+
454
+ .dodo-shadow-4 {
455
+ --dodo-shadow: 0 10px 18px var(--dodo-shadow-color), 0 6px 10px var(--dodo-shadow-color);
456
+ box-shadow: var(--dodo-shadow);
457
+ }
458
+
459
+ .dodo-shadow-5 {
460
+ --dodo-shadow: 0 14px 28px var(--dodo-shadow-color), 0 10px 10px var(--dodo-shadow-color);
461
+ box-shadow: var(--dodo-shadow);
462
+ }
463
+
464
+ :root {
465
+ /* Size */
466
+ --dodo-ui-element-height-small: 34px;
467
+ --dodo-ui-element-height-normal: 40px;
468
+ --dodo-ui-element-height-large: 50px;
469
+ /* Size Thin elements */
470
+ --dodo-ui-track-element-height-small: 6px;
471
+ --dodo-ui-track-element-height-normal: 8px;
472
+ --dodo-ui-track-element-height-large: 10px;
473
+ /* Roundness */
474
+ --dodo-ui-element-roundness-1: 0.4375em;
475
+ --dodo-ui-element-roundness-2: 0.8125em;
476
+ --dodo-ui-element-roundness-3: 1.9375em;
477
+ /* Border */
478
+ --dodo-ui-element-border-width: 1px;
479
+ }
480
+
481
+ /*# sourceMappingURL=global.css.map */
package/dist/styles/global.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/lib/styles/global/_minimal-reset.scss","../../src/lib/styles/global/_colors-base.scss","../../src/lib/styles/global/_colors.scss","../../src/lib/styles/global/_space.scss","../../src/lib/styles/global/_z-index.scss","../../src/lib/styles/global/_shadow.scss","../../src/lib/styles/global/_components.scss"],"names":[],"mappings":"AAAA;EACE;;;ACDF;AACE;AACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AC7QF;AACE;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzKF;AACE;AACA;EACA;EACA;EACA;;;ACLF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACPF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC9BF;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA","file":"global.css"}
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@flightlesslabs/dodo-ui",
3
- "version": "1.0.0--beta-3",
3
+ "version": "1.0.0--beta-4",
4
4
  "scripts": {
5
- "scss:global": "sass src/lib/styles/global/index.scss dist/styles/global.css",
6
- "scss:components": "sass src/lib/styles/components.scss dist/styles/components.css",
5
+ "scss:global": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/global/index.scss dist/styles/global.css\"",
6
+ "scss:components": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/components.scss dist/styles/components.css\"",
7
7
  "scss": "pnpm scss:global && pnpm scss:components",
8
- "build": "vite build && pnpm run prepack && pnpm run scss",
8
+ "build": "vite build && pnpm run prepack",
9
9
  "preview": "vite preview",
10
10
  "prepare": "svelte-kit sync || echo ''",
11
- "prepack": "svelte-kit sync && svelte-package && publint",
11
+ "prepack": "svelte-kit sync && svelte-package && pnpm run scss && publint",
12
12
  "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
13
  "format": "prettier --write .",
14
14
  "lint": "prettier --check . && eslint .",
@@ -46,10 +46,10 @@
46
46
  ".": {
47
47
  "types": "./dist/index.d.ts",
48
48
  "svelte": "./dist/index.js"
49
- }
49
+ },
50
+ "./styles/global.css": "./dist/styles/global.css",
51
+ "./styles/components.css": "./dist/styles/components.css"
50
52
  },
51
- "./styles/global.css": "./dist/styles/global.css",
52
- "./styles/components.css": "./dist/styles/components.css",
53
53
  "peerDependencies": {
54
54
  "bits-ui": "^2.0.0",
55
55
  "svelte": "^5.0.0"