do-ui-design-system 1.0.0 → 1.0.1

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 (8) hide show
  1. package/dist/atoms/Button/Button.svelte +1 -1
  2. package/dist/atoms/Button/Button.svelte.d.ts +2 -2
  3. package/dist/atoms/Button/iProps.d.ts +1 -1
  4. package/dist/atoms/Button/iProps.d.ts.map +1 -1
  5. package/dist/do-theme/button.css +58 -51
  6. package/dist/do-theme/var-dark.css +56 -43
  7. package/dist/do-theme/var-light.css +57 -42
  8. package/package.json +4 -3
package/dist/atoms/Button/Button.svelte CHANGED
@@ -14,7 +14,7 @@
14
14
  ```Svelte
15
15
  <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
16
16
  ```
17
- - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-link' | 'do-btn-tertiary' | 'do-btn-accent'
17
+ - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
18
18
  - `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
19
19
  - `label?`: string
20
20
  - `disabled?`: boolean
package/dist/atoms/Button/Button.svelte.d.ts CHANGED
@@ -20,7 +20,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
20
20
  * ```Svelte
21
21
  * <Button variant?={variant} size?={size} label?={label} disabled?={disabled} loading?={loading} type?={type}/>
22
22
  * ```
23
- * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-link' | 'do-btn-tertiary' | 'do-btn-accent'
23
+ * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-link' | 'do-btn-link-accent'
24
24
  * - `size?`: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg'
25
25
  * - `label?`: string
26
26
  * - `disabled?`: boolean
@@ -30,7 +30,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
30
30
  */
31
31
  declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
32
32
  [x: string]: any;
33
- variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | undefined;
33
+ variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | "do-btn-link-accent" | undefined;
34
34
  size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
35
35
  rounded?: boolean | undefined;
36
36
  label?: string | undefined;
package/dist/atoms/Button/iProps.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { HTMLButtonAttributes } from 'svelte/elements';
2
2
  export interface iProps extends HTMLButtonAttributes {
3
- variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent';
3
+ variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | 'do-btn-link-accent';
4
4
  type?: 'button' | 'submit' | 'reset';
5
5
  size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
6
6
  rounded?: boolean;
package/dist/atoms/Button/iProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;CACxB"}
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,oBAAoB,CAAC;IAC7H,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;CACxB"}
package/dist/do-theme/button.css CHANGED
@@ -5,14 +5,14 @@
5
5
  font-weight: 500;
6
6
  padding: 0.375rem 1rem;
7
7
  border: 1px solid;
8
- border-radius: 0.25rem;
8
+ border-radius: 0.25rem;
9
9
  line-height: 140%;
10
10
  cursor: pointer;
11
11
  transition: all 0.2s;
12
12
  }
13
13
 
14
14
  .do-btn .do-btn__icon {
15
- display: inline-flex;
15
+ display: inline-flex;
16
16
  transform: scale(130%);
17
17
  }
18
18
 
@@ -36,87 +36,94 @@
36
36
  border-radius: 3rem;
37
37
  }
38
38
 
39
+ .do-btn:disabled {
40
+ opacity: 40%;
41
+ }
42
+
39
43
  .do-btn-primary {
40
44
  background-color: var(--do-color-primary);
41
45
  border-color: var(--do-color-primary-border);
42
- color: var(--do-text-contrast);
46
+ color: var(--do-color-primary-content);
43
47
  }
44
48
 
45
49
  .do-btn-primary:hover {
46
50
  background-color: var(--do-color-primary-hover);
47
51
  border-color: var(--do-color-primary-border-hover);
48
- color: var(--do-color-primary);
49
- }
50
-
51
- .do-btn-primary:disabled {
52
- background-color: var(--do-color-primary-disabled);
53
- border-color: var(--do-transparent);
54
- color: var(--do-color-primary-content);
52
+ color: var(--do-color-primary-content-hover);
55
53
  }
56
54
 
57
55
  .do-btn-secondary {
58
56
  background-color: var(--do-color-secondary);
59
57
  border-color: var(--do-color-secondary-border);
60
- color: var(--do-text-base);
58
+ color: var(--do-color-secondary-content);
61
59
  }
62
60
 
63
61
  .do-btn-secondary:hover {
64
- color: var(--color-primary-content);
62
+ color: var(--do-color-secondary-content-hover);
65
63
  border-color: var(--do-transparent);
66
64
  background-color: var(--do-color-secondary-hover);
67
65
  }
68
66
 
69
- .do-btn-secondary:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
70
- border-color: var(--do-transparent);
71
- background-color: var(--do-transparent);
67
+ .do-btn-tertiary {
68
+ background-color: var(--do-color-tertiary);
69
+ border-color: var(--do-color-tertiary-border);
70
+ color: var(--do-color-tertiary-content);
71
+ }
72
+
73
+ .do-btn-tertiary:hover,
74
+ .do-btn-tertiary:focus {
75
+ background-color: var(--do-color-tertiary-content);
76
+ border-color: var(--do-color-tertiary-content);
77
+ color: var(--do-color-tertiary-hover-content);
78
+ }
79
+
80
+ .do-btn-accent {
81
+ background-color: var(--do-color-accent);
82
+ border-color: var(--do-color-accent-border);
83
+ color: var(--do-color-accent-content);
84
+ }
85
+
86
+ .do-btn-accent:hover,
87
+ .do-btn-accent:focus {
88
+ color: var(--do-color-accent-hover-content);
89
+ border: 1px solid var(--do-color-accent-hover-border);
90
+ background-color: var(--do-color-accent-hover);
72
91
  }
73
92
 
74
93
  .do-btn-link {
75
94
  border-color: var(--do-transparent);
76
95
  background-color: var(--do-transparent);
96
+ color: var(--do-color-link);
97
+ text-underline-offset: 4px;
77
98
  }
78
99
 
79
100
  .do-btn-link span {
80
101
  text-decoration: underline;
81
102
  }
82
103
 
83
- .do-btn-link:hover, .do-btn-link:focus {
84
- color: var(--do-color-primary-content);
85
- border-color: var(--do-transparent);
86
- background-color: var(--color-primary);
104
+ .do-btn-link:hover,
105
+ .do-btn-link:focus {
106
+ color: var(--do-color-link-hover-content);
107
+ border-color: 1px solid var(--do-color-link-hover-border);
108
+ background-color: var(--do-transparent);
87
109
  }
88
110
 
89
- .do-btn-link:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
111
+ .do-btn-link-accent {
90
112
  border-color: var(--do-transparent);
91
113
  background-color: var(--do-transparent);
92
- /* text-decoration: underline; */
114
+ color: var(--do-color-link-secondary);
115
+ text-underline-offset: 4px;
93
116
  }
94
117
 
95
- .do-btn-accent {
96
- background-color: var(--do-color-accent);
97
- border-color: var(--do-color-accent-border);
98
- color: var(--do-text-contrast);
99
- }
100
- .do-btn-accent:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
101
- color: var(--color-neutral);
102
- border: 1px solid var(--do-transparent);
103
- background-color: var(--do-color-accent-disabled);
104
- }
105
- .do-btn-accent:hover, .do-btn-accent:focus {
106
- color: var(--do-color-accent);
107
- border: 1px solid #dbeafe;
108
- background-color: var(--color-accent-content);
118
+ .do-btn-link-accent span {
119
+ text-decoration: underline;
109
120
  }
110
121
 
111
- .do-btn-tertiary {
112
- background-color: var(--do-color-tertiary);
113
- border-color: var(--do-color-tertiary-border);
114
- color: var(--do-color-tertiary-content);
115
- }
116
- .do-btn-tertiary:hover, .do-btn-tertiary:focus {
117
- background-color: var(--do-color-tertiary-content);
118
- border-color: var(--do-color-tertiary-content);
119
- color: var(--do-text-contrast);
122
+ .do-btn-link-accent:hover,
123
+ .do-btn-link-accent:focus {
124
+ color: var(--do-color-primary-content);
125
+ border-color: var(--do-color-primary-border);
126
+ background-color: var(--do-color-link-secondary-hover);
120
127
  }
121
128
 
122
129
  .do-loader {
@@ -124,10 +131,10 @@
124
131
  }
125
132
 
126
133
  @keyframes rotation {
127
- 0% {
128
- transform: rotate(0deg);
129
- }
130
- 100% {
131
- transform: rotate(360deg);
132
- }
133
- }
134
+ 0% {
135
+ transform: rotate(0deg);
136
+ }
137
+ 100% {
138
+ transform: rotate(360deg);
139
+ }
140
+ }
package/dist/do-theme/var-dark.css CHANGED
@@ -1,43 +1,56 @@
1
- :root {
2
- --color-primary:#27272A;
3
- --color-primary-content: #FAFAFA;
4
- --color-secondary: #FAFAFA;
5
- --color-secondary-content: #27272A;
6
- --color-neutral: #FAFAFA;
7
- --color-neutral-content: none;
8
- --color-accent: #1D4ED8;
9
- --color-accent-content: #EFF6FF;
10
- --color-info: oklch(70% 0.2 220);
11
- --color-info-content: oklch(98% 0.01 220);
12
- --color-success: oklch(65% 0.25 140);
13
- --color-success-content: oklch(98% 0.01 140);
14
- --color-warning: oklch(80% 0.25 80);
15
- --color-warning-content: oklch(20% 0.05 80);
16
- --color-error: oklch(65% 0.3 30);
17
- --color-error-content: oklch(98% 0.01 30);
18
-
19
-
20
- /* base sizes */
21
- --size-selector: 0.25rem;
22
- --size-field: 0.25rem;
23
-
24
- /* border radius */
25
- --radius-selector: 0.25rem;
26
- --radius-field: 0.25rem;
27
- --radius-box: 0.25rem;
28
-
29
- /*variables DO*/
30
- /*hover color*/
31
- --do-color-primary-hover: #f5f5f5;
32
- --do-color-secondary-hover: #3e3e45;
33
- /*disabled color*/
34
- --do-color-primary-disabled: #a4a4a6;
35
- --do-color-accent-disabled: #a4b6ed;
36
- /*buttons border color*/
37
- --do-color-border-primary: #3F3F46;
38
- --do-color-border-secondary: #F4F4F5;
39
- --do-color-border-accent: #2563EB;
40
- --do-color-border-accent-hover: #3B82F6;
41
- /*styles*/
42
- --do-transparent: transparent;
43
- }
1
+ [data-do-theme='dark'] {
2
+ --color-primary: #27272a;
3
+ --color-secondary: #fafafa;
4
+ --color-tertiary: #eff6ff;
5
+ --color-accent: #1d4ed8;
6
+
7
+ --do-color-primary: #27272a;
8
+ --do-color-primary-content: #fafafa;
9
+ --do-color-primary-hover: #F4F4F5;
10
+ --do-color-primary-content-hover: #27272a;
11
+ --do-color-primary-border: #52525b;
12
+ --do-color-primary-border-hover: #e4e4e7;
13
+
14
+ --do-color-secondary: #fafafa;
15
+ --do-color-secondary-content: #27272a;
16
+ --do-color-secondary-hover: #71717A;
17
+ --do-color-secondary-border: #f4f4f5;
18
+ --do-color-secondary-border-hover: #71717a;
19
+
20
+ --do-color-tertiary: #eff6ff;
21
+ --do-color-tertiary-content: #1d4ed8;
22
+ --do-color-tertiary-border: #dbeafe;
23
+ --do-color-tertiary-hover: #1D4ED8;
24
+ --do-color-tertiary-hover-content: #FAFAFA;
25
+ --do-color-tertiary-hover-border: #1D4ED8;
26
+
27
+ --do-color-accent: #1d4ed8;
28
+ --do-color-accent-content: #eff6ff;
29
+ --do-color-accent-border: #2563eb;
30
+ --do-color-accent-hover-border: #3b82f6;
31
+ --do-color-accent-hover-content: #1D4ED8;
32
+
33
+ --do-color-link: #fafafa;
34
+ --do-color-link-content: none;
35
+ --do-color-link-hover-content: #fafafa;
36
+ --do-color-link-hover-border: #52525B;
37
+
38
+ --do-color-link-secondary: #1d4ed8;
39
+ --do-color-link-secondary-content: none;
40
+ --do-color-link-secondary-hover: #1D4ED8;
41
+
42
+
43
+ /* base sizes */
44
+ --size-selector: 0.25rem;
45
+ --size-field: 0.25rem;
46
+
47
+ /* border radius */
48
+ --radius-selector: 0.25rem;
49
+ --radius-field: 0.25rem;
50
+ --radius-box: 0.25rem;
51
+
52
+ /*styles*/
53
+ --do-text-base: #27272a;
54
+ --do-text-contrast: #fff;
55
+ --do-transparent: transparent;
56
+ }
package/dist/do-theme/var-light.css CHANGED
@@ -1,42 +1,57 @@
1
- :root {
2
- --do-color-primary: #27272A;
3
- --do-color-primary-content: #FAFAFA;
4
- --do-color-primary-content-hover: #f5f5f5;
5
- --do-color-primary-border: #52525B;
6
- --do-color-primary-border-hover: #E4E4E7;
7
- --do-color-primary-disabled: #a4a4a6;
8
-
9
- --do-color-secondary: #FAFAFA;
10
- --do-color-secondary-content: #27272A;
11
- --do-color-secondary-content-hover: #3e3e45;
12
- --do-color-secondary-border: #F4F4F5;
13
- --do-color-secondary-border-hover: #71717A;
14
-
15
- --do-color-tertiary: #EFF6FF;
16
- --do-color-tertiary-content: #1D4ED8;
17
- --do-color-tertiary-border: #DBEAFE;
18
-
19
- --do-color-link: #FAFAFA;
20
- --do-color-link-content: none;
21
-
22
- --do-color-accent: #1D4ED8;
23
- --do-color-accent-content: #EFF6FF;
24
- --do-color-accent-border: #2563EB;
25
- --do-color-accent-border-hover: #3B82F6;
26
- --do-color-accent-disabled: #a4b6ed;
27
-
28
-
29
- /* base sizes */
30
- --size-selector: 0.25rem;
31
- --size-field: 0.25rem;
32
-
33
- /* border radius */
34
- --radius-selector: 0.25rem;
35
- --radius-field: 0.25rem;
36
- --radius-box: 0.25rem;
37
-
38
- /*styles*/
39
- --do-text-base: #27272A;
40
- --do-text-contrast: #fff;
41
- --do-transparent: transparent;
42
- }
1
+ :root, [data-do-theme='light'] {
2
+ --color-primary: #fafafa;
3
+ --color-secondary: #27272a;
4
+ --color-accent: #DBEAFE;
5
+ --color-tertiary: #1d4ed8;
6
+
7
+ --do-color-primary: #fafafa;
8
+ --do-color-primary-content: #18181B;
9
+ --do-color-primary-border: #F4F4F5;
10
+ --do-color-primary-hover: #D4D4D8;
11
+ --do-color-primary-content-hover: #27272a;
12
+ --do-color-primary-border-hover: #e4e4e7;
13
+
14
+ --do-color-secondary: #27272a;
15
+ --do-color-secondary-content: #fafafa;
16
+ --do-color-secondary-border: #52525B;
17
+ --do-color-secondary-hover: #52525B;
18
+ --do-color-secondary-content-hover: #fafafa;
19
+ --do-color-secondary-border-hover: #71717a;
20
+
21
+ --do-color-tertiary: #1E40AF;
22
+ --do-color-tertiary-content: #eff6ff;
23
+ --do-color-tertiary-border: #1D4ED8;
24
+ --do-color-tertiary-hover: #EFF6FF;
25
+ --do-color-tertiary-hover-content: #1E40AF;
26
+ --do-color-tertiary-hover-border: #DBEAFE;
27
+
28
+ --do-color-accent: #eff6ff;
29
+ --do-color-accent-content: #1d4ed8;
30
+ --do-color-accent-border: #DBEAFE;
31
+ --do-color-accent-hover: #DBEAFE;
32
+ --do-color-accent-hover-content: #1E40AF;
33
+ --do-color-accent-hover-border: #DBEAFE;
34
+
35
+ --do-color-link: #27272A;
36
+ --do-color-link-content: none;
37
+ --do-color-link-hover-content: #18181B;
38
+ --do-color-link-hover-border: rgba(0, 0, 0, 0.2);
39
+
40
+ --do-color-link-secondary: #1d4ed8;
41
+ --do-color-link-secondary-content: none;
42
+ --do-color-link-secondary-hover: #EFF6FF;
43
+
44
+ /* base sizes */
45
+ --size-selector: 0.25rem;
46
+ --size-field: 0.25rem;
47
+
48
+ /* border radius */
49
+ --radius-selector: 0.25rem;
50
+ --radius-field: 0.25rem;
51
+ --radius-box: 0.25rem;
52
+
53
+ /*styles*/
54
+ --do-text-base: #27272a;
55
+ --do-text-contrast: #fff;
56
+ --do-transparent: transparent;
57
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",
@@ -59,6 +59,7 @@
59
59
  "@storybook/addon-docs": "^8.6.12",
60
60
  "@storybook/addon-essentials": "^8.6.11",
61
61
  "@storybook/addon-svelte-csf": "^5.0.0-next.0",
62
+ "@storybook/addons": "^7.6.17",
62
63
  "@storybook/blocks": "^8.6.11",
63
64
  "@storybook/experimental-addon-test": "^8.6.11",
64
65
  "@storybook/svelte": "^8.6.12",
@@ -68,8 +69,8 @@
68
69
  "@sveltejs/kit": "^2.16.0",
69
70
  "@sveltejs/package": "^2.0.0",
70
71
  "@sveltejs/vite-plugin-svelte": "^5.0.0",
71
- "@tailwindcss/vite": "^4.0.0",
72
72
  "@tailwindcss/postcss": "^4.1.4",
73
+ "@tailwindcss/vite": "^4.0.0",
73
74
  "@testing-library/jest-dom": "^6.6.3",
74
75
  "@testing-library/svelte": "^5.2.4",
75
76
  "@vitest/browser": "^3.1.1",
@@ -88,7 +89,7 @@
88
89
  "prettier-plugin-svelte": "^3.3.3",
89
90
  "prettier-plugin-tailwindcss": "^0.6.11",
90
91
  "publint": "^0.3.2",
91
- "storybook": "^8.6.11",
92
+ "storybook": "^8.6.14",
92
93
  "svelte": "^5.25.10",
93
94
  "svelte-check": "^4.0.0",
94
95
  "tailwindcss": "^4.1.4",