do-ui-design-system 0.0.11 → 0.0.13

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.
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import './do-theme/index.css';
1
+ import './do-theme/post-compiled.css';
2
2
  export * from './components/atoms';
3
3
  export * from './components/molecules';
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import './do-theme/index.css';
1
+ import './do-theme/post-compiled.css';
2
2
  export * from './components/atoms';
3
3
  export * from './components/molecules';
package/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "description": "Design system en Svelte + Tailwind + DaisyUI",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",
7
7
  "main": "./dist/index.js",
8
8
  "scripts": {
9
9
  "dev": "vite dev",
10
- "build": "postcss src/app.css -o src/lib/do-theme/post-compiled.css && npm run prepack",
10
+ "build": "npm run build:css && npm run prepack",
11
+ "build:css": "postcss src/app.css -o src/lib/do-theme/post-compiled.css",
12
+ "prepack": "svelte-kit sync && svelte-package && publint",
11
13
  "preview": "vite preview",
12
14
  "prepare": "svelte-kit sync || echo ''",
13
- "prepack": "svelte-kit sync && svelte-package && publint",
14
15
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
15
16
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
16
17
  "test:unit": "vitest",
@@ -26,10 +27,12 @@
26
27
  "files": [
27
28
  "dist",
28
29
  "src/lib/do-theme/index.css",
30
+ "src/lib/do-theme/post-compiled.css",
29
31
  "!src/lib/**/*.stories.svelte",
30
32
  "!src/lib/**/*.test.*",
31
33
  "!src/lib/**/*.spec.*",
32
- "!src/lib/**/*.mdx"
34
+ "!src/lib/**/*.mdx",
35
+ "package.json"
33
36
  ],
34
37
  "svelte": "./dist/index.js",
35
38
  "types": "./dist/index.d.ts",
@@ -42,7 +45,10 @@
42
45
  "default": "./dist/index.js"
43
46
  },
44
47
  "./styles.css": {
45
- "default": "./src/lib/do-theme/index.css"
48
+ "default": "./dist/do-theme/index.css"
49
+ },
50
+ "./theme.css": {
51
+ "default": "./dist/do-theme/post-compiled.css"
46
52
  },
47
53
  "./atoms": {
48
54
  "types": "./dist/components/atoms/index.d.ts",
@@ -76,8 +82,7 @@
76
82
  "@sveltejs/kit": "^2.16.0",
77
83
  "@sveltejs/package": "^2.0.0",
78
84
  "@sveltejs/vite-plugin-svelte": "^5.0.0",
79
- "@tailwindcss/postcss": "^4.1.4",
80
- "@tailwindcss/vite": "^4.0.0",
85
+ "@tailwindcss/vite": "^4.1.6",
81
86
  "@testing-library/jest-dom": "^6.6.3",
82
87
  "@testing-library/svelte": "^5.2.4",
83
88
  "@types/node": "^22.15.17",
@@ -100,7 +105,6 @@
100
105
  "storybook": "^8.6.11",
101
106
  "svelte": "^5.28.2",
102
107
  "svelte-check": "^4.0.0",
103
- "tailwindcss": "^4.1.4",
104
108
  "typescript": "^5.8.3",
105
109
  "typescript-eslint": "^8.20.0",
106
110
  "vite": "^6.0.0",
@@ -108,5 +112,9 @@
108
112
  },
109
113
  "keywords": [
110
114
  "svelte"
111
- ]
115
+ ],
116
+ "dependencies": {
117
+ "@tailwindcss/postcss": "^4.1.6",
118
+ "tailwindcss": "^4.1.6"
119
+ }
112
120
  }
@@ -1,5 +1,3 @@
1
- @plugin "daisyui";
2
-
3
1
  @import "./var-light.css";
4
2
  @import "./var-dark.css";
5
3
  @import "./button.css";
@@ -0,0 +1,482 @@
1
+ /*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
4
+ box-sizing: border-box;
5
+ margin: 0;
6
+ padding: 0;
7
+ border: 0 solid;
8
+ }
9
+ html, :host {
10
+ line-height: 1.5;
11
+ -webkit-text-size-adjust: 100%;
12
+ -moz-tab-size: 4;
13
+ -o-tab-size: 4;
14
+ tab-size: 4;
15
+ font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
16
+ font-feature-settings: normal;
17
+ font-variation-settings: normal;
18
+ -webkit-tap-highlight-color: transparent;
19
+ }
20
+ hr {
21
+ height: 0;
22
+ color: inherit;
23
+ border-top-width: 1px;
24
+ }
25
+ abbr:where([title]) {
26
+ -webkit-text-decoration: underline dotted;
27
+ text-decoration: underline dotted;
28
+ }
29
+ h1, h2, h3, h4, h5, h6 {
30
+ font-size: inherit;
31
+ font-weight: inherit;
32
+ }
33
+ a {
34
+ color: inherit;
35
+ -webkit-text-decoration: inherit;
36
+ text-decoration: inherit;
37
+ }
38
+ b, strong {
39
+ font-weight: bolder;
40
+ }
41
+ code, kbd, samp, pre {
42
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
43
+ font-feature-settings: normal;
44
+ font-variation-settings: normal;
45
+ font-size: 1em;
46
+ }
47
+ small {
48
+ font-size: 80%;
49
+ }
50
+ sub, sup {
51
+ font-size: 75%;
52
+ line-height: 0;
53
+ position: relative;
54
+ vertical-align: baseline;
55
+ }
56
+ sub {
57
+ bottom: -0.25em;
58
+ }
59
+ sup {
60
+ top: -0.5em;
61
+ }
62
+ table {
63
+ text-indent: 0;
64
+ border-color: inherit;
65
+ border-collapse: collapse;
66
+ }
67
+ :-moz-focusring {
68
+ outline: auto;
69
+ }
70
+ progress {
71
+ vertical-align: baseline;
72
+ }
73
+ summary {
74
+ display: list-item;
75
+ }
76
+ ol, ul, menu {
77
+ list-style: none;
78
+ }
79
+ img, svg, video, canvas, audio, iframe, embed, object {
80
+ display: block;
81
+ vertical-align: middle;
82
+ }
83
+ img, video {
84
+ max-width: 100%;
85
+ height: auto;
86
+ }
87
+ button, input, select, optgroup, textarea, ::file-selector-button {
88
+ font: inherit;
89
+ font-feature-settings: inherit;
90
+ font-variation-settings: inherit;
91
+ letter-spacing: inherit;
92
+ color: inherit;
93
+ border-radius: 0;
94
+ background-color: transparent;
95
+ opacity: 1;
96
+ }
97
+ :where(select:is([multiple], [size])) optgroup {
98
+ font-weight: bolder;
99
+ }
100
+ :where(select:is([multiple], [size])) optgroup option {
101
+ padding-inline-start: 20px;
102
+ }
103
+ ::file-selector-button {
104
+ margin-inline-end: 4px;
105
+ }
106
+ ::-moz-placeholder {
107
+ opacity: 1;
108
+ }
109
+ ::placeholder {
110
+ opacity: 1;
111
+ }
112
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
113
+ ::-moz-placeholder {
114
+ color: currentcolor;
115
+ @supports (color: color-mix(in lab, red, red)) {
116
+ color: color-mix(in oklab, currentcolor 50%, transparent);
117
+ }
118
+ }
119
+ ::placeholder {
120
+ color: currentcolor;
121
+ @supports (color: color-mix(in lab, red, red)) {
122
+ color: color-mix(in oklab, currentcolor 50%, transparent);
123
+ }
124
+ }
125
+ }
126
+ textarea {
127
+ resize: vertical;
128
+ }
129
+ ::-webkit-search-decoration {
130
+ -webkit-appearance: none;
131
+ }
132
+ ::-webkit-date-and-time-value {
133
+ min-height: 1lh;
134
+ text-align: inherit;
135
+ }
136
+ ::-webkit-datetime-edit {
137
+ display: inline-flex;
138
+ }
139
+ ::-webkit-datetime-edit-fields-wrapper {
140
+ padding: 0;
141
+ }
142
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
143
+ padding-block: 0;
144
+ }
145
+ :-moz-ui-invalid {
146
+ box-shadow: none;
147
+ }
148
+ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
149
+ -webkit-appearance: button;
150
+ -moz-appearance: button;
151
+ appearance: button;
152
+ }
153
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
154
+ height: auto;
155
+ }
156
+ [hidden]:where(:not([hidden='until-found'])) {
157
+ display: none !important;
158
+ }
159
+ .order-1 {
160
+ order: 1;
161
+ }
162
+ .order-2 {
163
+ order: 2;
164
+ }
165
+ .\!inline {
166
+ display: inline !important;
167
+ }
168
+ .contents {
169
+ display: contents;
170
+ }
171
+ .flex {
172
+ display: flex;
173
+ }
174
+ .grid {
175
+ display: grid;
176
+ }
177
+ .hidden {
178
+ display: none;
179
+ }
180
+ .table {
181
+ display: table;
182
+ }
183
+ .transform {
184
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
185
+ }
186
+ .flex-row {
187
+ flex-direction: row;
188
+ }
189
+ .flex-wrap {
190
+ flex-wrap: wrap;
191
+ }
192
+ .gap-\[2rem\] {
193
+ gap: 2rem;
194
+ }
195
+ .text-inherit {
196
+ color: inherit;
197
+ }
198
+ .underline {
199
+ text-decoration-line: underline;
200
+ }
201
+ .btn {
202
+ font-weight: 500;
203
+ padding: 6px 16px;
204
+ gap: 0.5rem;
205
+ }
206
+ .loading-spinner {
207
+ width: 1em;
208
+ height: 1em;
209
+ }
210
+ .btn-rounded {
211
+ border-radius: 3rem;
212
+ }
213
+ .btn-primary {
214
+ border-color: var(--do-color-border-primary);
215
+ }
216
+ .btn-primary:hover {
217
+ color: var(--color-primary);
218
+ border-color: var(--do-transparent);
219
+ background-color: var(--do-color-primary-hover);
220
+ }
221
+ .btn-primary:disabled {
222
+ color: var(--color-primary-content);
223
+ border-color: var(--do-transparent);
224
+ background-color: var(--do-color-primary-disabled);
225
+ }
226
+ .btn-secondary:hover {
227
+ color: var(--color-primary-content);
228
+ border-color: var(--do-transparent);
229
+ background-color: var(--do-color-secondary-hover);
230
+ }
231
+ .btn-secondary:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
232
+ border-color: var(--do-transparent);
233
+ background-color: var(--do-transparent);
234
+ }
235
+ .btn-neutral {
236
+ border-color: var(--do-transparent);
237
+ background-color: var(--do-transparent);
238
+ text-decoration: underline;
239
+ }
240
+ .btn-neutral:hover {
241
+ color: var(--color-primary-content);
242
+ border-color: var(--do-transparent);
243
+ background-color: var(--color-primary);
244
+ }
245
+ .btn-neutral:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
246
+ border-color: var(--do-transparent);
247
+ background-color: var(--do-transparent);
248
+ }
249
+ .btn-neutral:not(i) {
250
+ text-decoration: underline;
251
+ }
252
+ .btn-accent:is(:disabled, [disabled], .btn-disabled):is(:disabled, [disabled], .btn-disabled) {
253
+ color: var(--color-neutral);
254
+ border-color: var(--do-transparent);
255
+ background-color: var(--do-color-accent-disabled);
256
+ }
257
+ .btn-accent:hover {
258
+ color: var(--color-accent);
259
+ border-color: #dbeafe;
260
+ background-color: var(--color-accent-content);
261
+ }
262
+ @font-face {
263
+ font-family: 'icomoon';
264
+ src: url('./lib/do-theme/icomoon/icomoon.eot?98wrl4');
265
+ src: url('./lib/do-theme/icomoon/icomoon.eot?98wrl4#iefix') format('embedded-opentype'), url('./lib/do-theme/icomoon/icomoon.ttf?98wrl4') format('truetype'), url('./lib/do-theme/icomoon/icomoon.woff?98wrl4') format('woff'), url('./lib/do-theme/icomoon/icomoon.svg?98wrl4#icomoon') format('svg');
266
+ font-weight: normal;
267
+ font-style: normal;
268
+ font-display: block;
269
+ }
270
+ [class^="icon-"], [class*=" icon-"] {
271
+ font-family: 'icomoon' !important;
272
+ speak: never;
273
+ font-style: normal;
274
+ font-weight: normal;
275
+ font-variant: normal;
276
+ text-transform: none;
277
+ line-height: 1;
278
+ -webkit-font-smoothing: antialiased;
279
+ -moz-osx-font-smoothing: grayscale;
280
+ }
281
+ .icon-contrast:before {
282
+ content: "\e906";
283
+ }
284
+ .icon-arrow:before {
285
+ content: "\e907";
286
+ }
287
+ .icon-arrows-up-down:before {
288
+ content: "\e908";
289
+ }
290
+ .icon-chevron-down:before {
291
+ content: "\e909";
292
+ }
293
+ .icon-download:before {
294
+ content: "\e90a";
295
+ }
296
+ .icon-plus:before {
297
+ content: "\e90b";
298
+ }
299
+ .icon-trash:before {
300
+ content: "\e90c";
301
+ }
302
+ .icon-chain:before {
303
+ content: "\e900";
304
+ }
305
+ .icon-check:before {
306
+ content: "\e901";
307
+ }
308
+ .icon-copy:before {
309
+ content: "\e902";
310
+ }
311
+ .icon-database:before {
312
+ content: "\e903";
313
+ }
314
+ .icon-menu:before {
315
+ content: "\e904";
316
+ }
317
+ .icon-refresh:before {
318
+ content: "\e905";
319
+ }
320
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
321
+ body {
322
+ font-family: 'Inter', sans-serif;
323
+ }
324
+ @layer base {
325
+ :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] {
326
+ color-scheme: light;
327
+ --color-base-100: oklch(100% 0 0);
328
+ --color-base-200: oklch(98% 0 0);
329
+ --color-base-300: oklch(95% 0 0);
330
+ --color-base-content: oklch(21% 0.006 285.885);
331
+ --color-primary: #27272A;
332
+ --color-primary-content: #FAFAFA;
333
+ --color-secondary: #FAFAFA;
334
+ --color-secondary-content: #27272A;
335
+ --color-accent: #1D4ED8;
336
+ --color-accent-content: #EFF6FF;
337
+ --color-neutral: #FAFAFA;
338
+ --color-neutral-content: none;
339
+ --color-info: oklch(70% 0.2 220);
340
+ --color-info-content: oklch(98% 0.01 220);
341
+ --color-success: oklch(65% 0.25 140);
342
+ --color-success-content: oklch(98% 0.01 140);
343
+ --color-warning: oklch(80% 0.25 80);
344
+ --color-warning-content: oklch(20% 0.05 80);
345
+ --color-error: oklch(65% 0.3 30);
346
+ --color-error-content: oklch(98% 0.01 30);
347
+ --radius-selector: 0.25rem;
348
+ --radius-field: 0.25rem;
349
+ --radius-box: 0.25rem;
350
+ --size-selector: 0.25rem;
351
+ --size-field: 0.25rem;
352
+ --border: 1px;
353
+ --depth: 1;
354
+ --noise: 0;
355
+ --do-color-primary-hover: #f5f5f5;
356
+ --do-color-secondary-hover: #3e3e45;
357
+ --do-color-primary-disabled: #a4a4a6;
358
+ --do-color-accent-disabled: #a4b6ed;
359
+ --do-color-border-primary: #3F3F46;
360
+ --do-color-border-secondary: #F4F4F5;
361
+ --do-color-border-accent: #2563EB;
362
+ --do-color-border-accent-hover: #3B82F6;
363
+ --do-transparent: transparent;
364
+ }
365
+ }
366
+ @layer base {
367
+ @media (prefers-color-scheme: dark) {
368
+ :root {
369
+ color-scheme: dark;
370
+ --color-base-100: oklch(25.33% 0.016 252.42);
371
+ --color-base-200: oklch(23.26% 0.014 253.1);
372
+ --color-base-300: oklch(21.15% 0.012 254.09);
373
+ --color-base-content: oklch(97.807% 0.029 256.847);
374
+ --color-primary: #27272A;
375
+ --color-primary-content: #FAFAFA;
376
+ --color-secondary: #FAFAFA;
377
+ --color-secondary-content: #27272A;
378
+ --color-accent: #1D4ED8;
379
+ --color-accent-content: #EFF6FF;
380
+ --color-neutral: #FAFAFA;
381
+ --color-neutral-content: none;
382
+ --color-info: oklch(70% 0.2 220);
383
+ --color-info-content: oklch(98% 0.01 220);
384
+ --color-success: oklch(65% 0.25 140);
385
+ --color-success-content: oklch(98% 0.01 140);
386
+ --color-warning: oklch(80% 0.25 80);
387
+ --color-warning-content: oklch(20% 0.05 80);
388
+ --color-error: oklch(65% 0.3 30);
389
+ --color-error-content: oklch(98% 0.01 30);
390
+ --radius-selector: 0.25rem;
391
+ --radius-field: 0.25rem;
392
+ --radius-box: 0.25rem;
393
+ --size-selector: 0.25rem;
394
+ --size-field: 0.25rem;
395
+ --border: 1px;
396
+ --depth: 1;
397
+ --noise: 0;
398
+ --do-color-primary-hover: #f5f5f5;
399
+ --do-color-secondary-hover: #3e3e45;
400
+ --do-color-primary-disabled: #a4a4a6;
401
+ --do-color-accent-disabled: #a4b6ed;
402
+ --do-color-border-primary: #3F3F46;
403
+ --do-color-border-secondary: #F4F4F5;
404
+ --do-color-border-accent: #2563EB;
405
+ --do-color-border-accent-hover: #3B82F6;
406
+ --do-transparent: transparent;
407
+ }
408
+ }
409
+ }
410
+ @layer base {
411
+ :root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
412
+ color-scheme: dark;
413
+ --color-base-100: oklch(25.33% 0.016 252.42);
414
+ --color-base-200: oklch(23.26% 0.014 253.1);
415
+ --color-base-300: oklch(21.15% 0.012 254.09);
416
+ --color-base-content: oklch(97.807% 0.029 256.847);
417
+ --color-primary: #27272A;
418
+ --color-primary-content: #FAFAFA;
419
+ --color-secondary: #FAFAFA;
420
+ --color-secondary-content: #27272A;
421
+ --color-accent: #1D4ED8;
422
+ --color-accent-content: #EFF6FF;
423
+ --color-neutral: #FAFAFA;
424
+ --color-neutral-content: none;
425
+ --color-info: oklch(70% 0.2 220);
426
+ --color-info-content: oklch(98% 0.01 220);
427
+ --color-success: oklch(65% 0.25 140);
428
+ --color-success-content: oklch(98% 0.01 140);
429
+ --color-warning: oklch(80% 0.25 80);
430
+ --color-warning-content: oklch(20% 0.05 80);
431
+ --color-error: oklch(65% 0.3 30);
432
+ --color-error-content: oklch(98% 0.01 30);
433
+ --radius-selector: 0.25rem;
434
+ --radius-field: 0.25rem;
435
+ --radius-box: 0.25rem;
436
+ --size-selector: 0.25rem;
437
+ --size-field: 0.25rem;
438
+ --border: 1px;
439
+ --depth: 1;
440
+ --noise: 0;
441
+ --do-color-primary-hover: #f5f5f5;
442
+ --do-color-secondary-hover: #3e3e45;
443
+ --do-color-primary-disabled: #a4a4a6;
444
+ --do-color-accent-disabled: #a4b6ed;
445
+ --do-color-border-primary: #3F3F46;
446
+ --do-color-border-secondary: #F4F4F5;
447
+ --do-color-border-accent: #2563EB;
448
+ --do-color-border-accent-hover: #3B82F6;
449
+ --do-transparent: transparent;
450
+ }
451
+ }
452
+ @property --tw-rotate-x {
453
+ syntax: "*";
454
+ inherits: false;
455
+ }
456
+ @property --tw-rotate-y {
457
+ syntax: "*";
458
+ inherits: false;
459
+ }
460
+ @property --tw-rotate-z {
461
+ syntax: "*";
462
+ inherits: false;
463
+ }
464
+ @property --tw-skew-x {
465
+ syntax: "*";
466
+ inherits: false;
467
+ }
468
+ @property --tw-skew-y {
469
+ syntax: "*";
470
+ inherits: false;
471
+ }
472
+ @layer properties {
473
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
474
+ *, ::before, ::after, ::backdrop {
475
+ --tw-rotate-x: initial;
476
+ --tw-rotate-y: initial;
477
+ --tw-rotate-z: initial;
478
+ --tw-skew-x: initial;
479
+ --tw-skew-y: initial;
480
+ }
481
+ }
482
+ }