do-ui-design-system 1.0.21 → 1.1.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 (50) hide show
  1. package/dist/atoms/Badge/Badge.svelte +5 -5
  2. package/dist/atoms/Badge/Badge.svelte.d.ts +3 -3
  3. package/dist/atoms/Badge/Badge.svelte.d.ts.map +1 -1
  4. package/dist/atoms/Badge/iProps.d.ts +1 -3
  5. package/dist/atoms/Badge/iProps.d.ts.map +1 -1
  6. package/dist/atoms/Button/Button.svelte +1 -0
  7. package/dist/atoms/Button/Button.svelte.d.ts.map +1 -1
  8. package/dist/atoms/Button/iProps.d.ts.map +1 -1
  9. package/dist/atoms/Card/Card.svelte +5 -5
  10. package/dist/atoms/Card/Card.svelte.d.ts +3 -3
  11. package/dist/atoms/Card/Card.svelte.d.ts.map +1 -1
  12. package/dist/atoms/Card/iProps.d.ts +1 -3
  13. package/dist/atoms/Card/iProps.d.ts.map +1 -1
  14. package/dist/atoms/Chip/Chip.svelte +5 -5
  15. package/dist/atoms/Chip/Chip.svelte.d.ts +3 -3
  16. package/dist/atoms/Chip/Chip.svelte.d.ts.map +1 -1
  17. package/dist/atoms/Chip/iProps.d.ts +1 -3
  18. package/dist/atoms/Chip/iProps.d.ts.map +1 -1
  19. package/dist/do-theme/button.css +48 -47
  20. package/dist/do-theme/color.css +32 -0
  21. package/dist/do-theme/font.css +141 -31
  22. package/dist/do-theme/fonts/grotesk/SpaceGrotesk-Bold.ttf +0 -0
  23. package/dist/do-theme/fonts/grotesk/SpaceGrotesk-Light.ttf +0 -0
  24. package/dist/do-theme/fonts/grotesk/SpaceGrotesk-Medium.ttf +0 -0
  25. package/dist/do-theme/fonts/grotesk/SpaceGrotesk-Regular.ttf +0 -0
  26. package/dist/do-theme/fonts/grotesk/SpaceGrotesk-SemiBold.ttf +0 -0
  27. package/dist/do-theme/fonts/inter/Inter-Bold.ttf +0 -0
  28. package/dist/do-theme/fonts/inter/Inter-Light.ttf +0 -0
  29. package/dist/do-theme/fonts/inter/Inter-Medium.ttf +0 -0
  30. package/dist/do-theme/fonts/inter/Inter-Regular.ttf +0 -0
  31. package/dist/do-theme/fonts/inter/Inter-SemiBold.ttf +0 -0
  32. package/dist/do-theme/icomoon/backup-icons.json +1 -1
  33. package/dist/do-theme/icomoon/fonts/icomoon.eot +0 -0
  34. package/dist/do-theme/icomoon/fonts/icomoon.svg +3 -5
  35. package/dist/do-theme/icomoon/fonts/icomoon.ttf +0 -0
  36. package/dist/do-theme/icomoon/fonts/icomoon.woff +0 -0
  37. package/dist/do-theme/icomoon/iconList.d.ts +1 -1
  38. package/dist/do-theme/icomoon/iconList.d.ts.map +1 -1
  39. package/dist/do-theme/icomoon/iconList.js +3 -5
  40. package/dist/do-theme/icomoon/icons.css +40 -16
  41. package/dist/do-theme/index.css +1 -3
  42. package/dist/do-theme/var-base.css +21 -0
  43. package/dist/do-theme/var-dark.css +51 -47
  44. package/dist/do-theme/var-light.css +44 -41
  45. package/dist/molecules/IconButton/IconButton.svelte +6 -5
  46. package/dist/molecules/IconButton/IconButton.svelte.d.ts +2 -1
  47. package/dist/molecules/IconButton/IconButton.svelte.d.ts.map +1 -1
  48. package/dist/molecules/IconButton/iProps.d.ts +1 -1
  49. package/dist/molecules/IconButton/iProps.d.ts.map +1 -1
  50. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- declare const iconList: readonly ["icon-download-outline", "icon-warning", "icon-not-repeat", "icon-repeat", "icon-navigate", "icon-search", "icon-map-outline", "icon-analytics-outline", "icon-chart", "icon-loading", "icon-close", "icon-copy", "icon-alert", "icon-eye", "icon-eye-closed", "icon-info", "icon-layers", "icon-marker", "icon-move", "icon-contrast", "icon-arrow", "icon-chevron-up-down", "icon-chevron-down", "icon-download", "icon-plus", "icon-trash", "icon-chain", "icon-check", "icon-frame", "icon-database", "icon-menu", "icon-refresh"];
1
+ declare const iconList: readonly ["icon-moon-o", "icon-sun-o", "icon-edit-o", "icon-search", "icon-map-outline", "icon-analytics-outline", "icon-chart", "icon-loading", "icon-close", "icon-copy", "icon-alert", "icon-eye", "icon-eye-closed", "icon-info", "icon-layers", "icon-marker", "icon-move", "icon-contrast", "icon-arrow", "icon-chevron-up-down", "icon-chevron-down", "icon-download", "icon-plus", "icon-trash", "icon-chain", "icon-check", "icon-frame", "icon-database", "icon-menu", "icon-refresh"];
2
2
  export default iconList;
3
3
  export type IconNames = typeof iconList[number];
4
4
  //# sourceMappingURL=iconList.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"iconList.d.ts","sourceRoot":"","sources":["../../../src/lib/do-theme/icomoon/iconList.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,khBAiCJ,CAAC;AAEX,eAAe,QAAQ,CAAC;AACxB,MAAM,MAAM,SAAS,GAAG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC"}
1
+ {"version":3,"file":"iconList.d.ts","sourceRoot":"","sources":["../../../src/lib/do-theme/icomoon/iconList.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,keA+BJ,CAAC;AAEX,eAAe,QAAQ,CAAC;AACxB,MAAM,MAAM,SAAS,GAAG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC"}
@@ -1,11 +1,9 @@
1
1
  // Auto-generated from $lib/do-theme/icomoon/icons.css by generate-icon-list.cjs
2
2
  // run [ node generate-icon-list.cjs ]
3
3
  const iconList = [
4
- "icon-download-outline",
5
- "icon-warning",
6
- "icon-not-repeat",
7
- "icon-repeat",
8
- "icon-navigate",
4
+ "icon-moon-o",
5
+ "icon-sun-o",
6
+ "icon-edit-o",
9
7
  "icon-search",
10
8
  "icon-map-outline",
11
9
  "icon-analytics-outline",
@@ -1,16 +1,17 @@
1
1
  @font-face {
2
2
  font-family: 'icomoon';
3
- src: url('./fonts/icomoon.eot?uto40f');
4
- src: url('./fonts/icomoon.eot?uto40f#iefix') format('embedded-opentype'),
5
- url('./fonts/icomoon.ttf?uto40f') format('truetype'),
6
- url('./fonts/icomoon.woff?uto40f') format('woff'),
7
- url('./fonts/icomoon.svg?uto40f#icomoon') format('svg');
3
+ src: url('./fonts/icomoon.eot?f1vabk');
4
+ src: url('./fonts/icomoon.eot?f1vabk#iefix') format('embedded-opentype'),
5
+ url('./fonts/icomoon.ttf?f1vabk') format('truetype'),
6
+ url('./fonts/icomoon.woff?f1vabk') format('woff'),
7
+ url('./fonts/icomoon.svg?f1vabk#icomoon') format('svg');
8
8
  font-weight: normal;
9
9
  font-style: normal;
10
10
  font-display: block;
11
11
  }
12
12
 
13
- [class^="icon-"], [class*=" icon-"] {
13
+ [class^="icon-"],
14
+ [class*=" icon-"] {
14
15
  /* use !important to prevent issues with browser extensions that change fonts */
15
16
  font-family: 'icomoon' !important;
16
17
  speak: never;
@@ -25,99 +26,122 @@
25
26
  -moz-osx-font-smoothing: grayscale;
26
27
  }
27
28
 
28
- .icon-download-outline:before {
29
+ .icon-moon-o:before {
29
30
  content: "\e91b";
30
31
  }
31
- .icon-warning:before {
32
+
33
+ .icon-sun-o:before {
32
34
  content: "\e91c";
33
35
  }
34
- .icon-not-repeat:before {
36
+
37
+ .icon-edit-o:before {
35
38
  content: "\e91d";
36
39
  }
37
- .icon-repeat:before {
38
- content: "\e91e";
39
- }
40
- .icon-navigate:before {
41
- content: "\e91f";
42
- }
40
+
43
41
  .icon-search:before {
44
42
  content: "\e918";
45
43
  }
44
+
46
45
  .icon-map-outline:before {
47
46
  content: "\e919";
48
47
  }
48
+
49
49
  .icon-analytics-outline:before {
50
50
  content: "\e91a";
51
51
  }
52
+
52
53
  .icon-chart:before {
53
54
  content: "\e917";
54
55
  }
56
+
55
57
  .icon-loading:before {
56
58
  content: "\e916";
57
59
  }
60
+
58
61
  .icon-close:before {
59
62
  content: "\e915";
60
63
  }
64
+
61
65
  .icon-copy:before {
62
66
  content: "\e914";
63
67
  }
68
+
64
69
  .icon-alert:before {
65
70
  content: "\e90d";
66
71
  }
72
+
67
73
  .icon-eye:before {
68
74
  content: "\e90e";
69
75
  }
76
+
70
77
  .icon-eye-closed:before {
71
78
  content: "\e90f";
72
79
  }
80
+
73
81
  .icon-info:before {
74
82
  content: "\e910";
75
83
  }
84
+
76
85
  .icon-layers:before {
77
86
  content: "\e911";
78
87
  }
88
+
79
89
  .icon-marker:before {
80
90
  content: "\e912";
81
91
  }
92
+
82
93
  .icon-move:before {
83
94
  content: "\e913";
84
95
  }
96
+
85
97
  .icon-contrast:before {
86
98
  content: "\e906";
87
99
  }
100
+
88
101
  .icon-arrow:before {
89
102
  content: "\e907";
90
103
  }
104
+
91
105
  .icon-chevron-up-down:before {
92
106
  content: "\e908";
93
107
  }
108
+
94
109
  .icon-chevron-down:before {
95
110
  content: "\e909";
96
111
  }
112
+
97
113
  .icon-download:before {
98
114
  content: "\e90a";
99
115
  }
116
+
100
117
  .icon-plus:before {
101
118
  content: "\e90b";
102
119
  }
120
+
103
121
  .icon-trash:before {
104
122
  content: "\e90c";
105
123
  }
124
+
106
125
  .icon-chain:before {
107
126
  content: "\e900";
108
127
  }
128
+
109
129
  .icon-check:before {
110
130
  content: "\e901";
111
131
  }
132
+
112
133
  .icon-frame:before {
113
134
  content: "\e902";
114
135
  }
136
+
115
137
  .icon-database:before {
116
138
  content: "\e903";
117
139
  }
140
+
118
141
  .icon-menu:before {
119
142
  content: "\e904";
120
143
  }
144
+
121
145
  .icon-refresh:before {
122
146
  content: "\e905";
123
- }
147
+ }
@@ -1,6 +1,4 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
3
-
1
+ @import "./var-base.css";
4
2
  @import "./var-light.css";
5
3
  @import "./var-dark.css";
6
4
  @import "./font.css";
@@ -0,0 +1,21 @@
1
+ :root {
2
+ /*color variables*/
3
+ --do-color-black-1: #000;
4
+ --do-color-black-2: #27272a;
5
+ --do-color-black-3: #18181B;
6
+ --do-color-white-1: #fff;
7
+ --do-color-white-2: #F4F4F5;
8
+ --do-color-white-3: #E4E4E7;
9
+ --do-color-white-4: #e8e8e8;
10
+ --do-color-white-5: #FAFAFA;
11
+ --do-color-white-6: #eff6ff;
12
+ --do-color-white-7: #d4d4d8;
13
+ --do-color-grey-1: #3F3F46;
14
+ --do-color-grey-2: #52525B;
15
+ --do-color-grey-3: #303030;
16
+ --do-color-grey-4: #71717A;
17
+ --do-color-blue-1: #1e40af;
18
+ --do-color-blue-2: #1d4ed8;
19
+ --do-color-blue-3: #2563eb;
20
+ --do-color-blue-4: #dbeafe;
21
+ }
@@ -1,63 +1,67 @@
1
- [data-do-theme='dark'] {
2
- /*color variables*/
3
- --do-color-primary: #27272a;
4
- --do-color-primary-content: #fafafa;
5
- --do-color-secondary: #fafafa;
6
- --do-color-secondary-content: var(--do-color-primary);
7
- --do-color-tertiary: #eff6ff;
8
- --do-color-tertiary-content: #1d4ed8;
9
- --do-color-accent: #1d4ed8;
10
- --do-color-accent-content: #eff6ff;
11
- --do-color-white: #fff;
12
- --do-color-black: #000;
13
- --do-color-grey-border: #303030;
14
- --do-color-grey: #3F3F46;
15
- --color-dark-grey: #18181B;
16
- --color-dark-grey-border: #303030;
17
-
1
+ [data-do-theme='dark'] {
2
+ /*background*/
3
+ --do-bg-primary: var(--do-color-black-2);
4
+ --do-bg-secondary: var(--do-color-black-3);
18
5
 
19
- /*buttons variables*/
20
- --do-color-primary-hover: #F4F4F5;
21
- --do-color-primary-content-hover: var(--do-color-primary);
22
- --do-color-primary-border: #52525b;
23
- --do-color-primary-border-hover: #e4e4e7;
6
+ /*box*/
7
+ --do-box-primary-bg: var(--do-color-black-1);
8
+ --do-box-primary-border: var(--do-color-grey-2);
9
+ --do-box-secondary-bg: var(--do-color-grey-1);
10
+ --do-box-secondary-border: var(--do-color-grey-2);
24
11
 
25
- --do-color-secondary-hover: #71717A;
26
- --do-color-secondary-border: #f4f4f5;
27
- --do-color-secondary-border-hover: #71717a;
12
+ /*buttons*/
13
+ --do-btn-primary: var(--do-color-black-2);
14
+ --do-btn-primary-hover: var(--do-color-white-2);
15
+ --do-btn-primary-content: var(--do-color-white-5);
16
+ --do-btn-primary-content-hover: var(--do-color-black-2);
17
+ --do-btn-primary-border: #52525b;
18
+ --do-btn-primary-border-hover: #e4e4e7;
28
19
 
29
- --do-color-tertiary-border: #dbeafe;
30
- --do-color-tertiary-hover: #1D4ED8;
31
- --do-color-tertiary-hover-content: #FAFAFA;
32
- --do-color-tertiary-hover-border: #1D4ED8;
20
+ --do-btn-secondary-bg: var(--do-color-white-5);
21
+ --do-btn-secondary-bg-hover: var(--do-color-grey-4);
22
+ --do-btn-secondary-content: var(--do-color-black-2);
23
+ --do-btn-secondary-content-hover: var(--do-color-white-5);
24
+ --do-btn-secondary-hover: var(--do-color-grey-4);
25
+ --do-btn-secondary-border: var(--do-color-white-2);
26
+ --do-btn-secondary-border-hover: var(--do-color-white-5);
33
27
 
34
- --do-color-accent-border: #2563eb;
35
- --do-color-accent-hover-border: #3b82f6;
36
- --do-color-accent-hover-content: #1D4ED8;
28
+ --do-btn-tertiary-bg: var(--do-color-white-6);
29
+ --do-btn-tertiary-content: var(--do-color-blue-2);
30
+ --do-btn-tertiary-border: #dbeafe;
31
+ --do-btn-tertiary-hover: #1D4ED8;
32
+ --do-btn-tertiary-hover-content: #FAFAFA;
33
+ --do-btn-tertiary-hover-border: #1D4ED8;
37
34
 
38
- --do-color-link: #fafafa;
39
- --do-color-link-content: none;
40
- --do-color-link-hover-content: #fafafa;
41
- --do-color-link-hover-border: #52525B;
35
+ --do-btn-accent-bg: var(--do-color-blue-3);
36
+ --do-btn-accent-content: var(--do-color-white-6);
37
+ --do-btn-accent-border: var(--do-color-blue-3);
38
+ --do-btn-accent-hover-bg: var(--do-color-blue-4);
39
+ --do-btn-accent-hover-border: #3b82f6;
40
+ --do-btn-accent-hover-content: #1D4ED8;
42
41
 
43
- --do-color-link-secondary: #1d4ed8;
44
- --do-color-link-secondary-content: none;
45
- --do-color-link-secondary-hover: #1D4ED8;
42
+ --do-btn-link: var(--do-color-white-5);
43
+ --do-btn-link-content: none;
44
+ --do-btn-link-hover-content: var(--do-color-white-5);
45
+ --do-btn-link-hover-border: var(--do-color-grey-2);
46
+
47
+ --do-btn-link-secondary: #1d4ed8;
48
+ --do-btn-link-secondary-content: none;
49
+ --do-btn-link-secondary-hover: #1D4ED8;
46
50
 
47
51
  /*chip colors*/
48
52
  --do-chip-content: #FAFAFA;
49
53
  --do-chip-bg: #71717A;
50
54
  --do-chip-content-hover: #FAFAFA;
51
55
  --do-chip-bg-hover: #27272A;
52
-
56
+
53
57
  /*chip colors*/
54
58
  --do-chip-primary-content: #FAFAFA;
55
59
  --do-chip-primary-bg: #52525B;
56
60
  --do-chip-primary-hover-content: #FAFAFA;
57
61
  --do-chip-primary-hover-bg: #27272A;
58
62
  --do-chip-primary-border: #71717A;
59
- --do-chip-tooltip-content:#FAFAFA;
60
- --do-chip-tooltip-bg:#71717A;
63
+ --do-chip-tooltip-content: #FAFAFA;
64
+ --do-chip-tooltip-bg: #71717A;
61
65
  --do-chip-accent-content: #FAFAFA;
62
66
  --do-chip-accent-bg: #3B82F6;
63
67
  --do-chip-accent-hover-content: #FAFAFA;
@@ -66,10 +70,10 @@
66
70
  --do-chip-accent-hover-border: #1E40AF;
67
71
 
68
72
  /*badge colors*/
69
- --do-badge-primary-content:#FAFAFA;
70
- --do-badge-primary-bg:#71717A;
71
- --do-badge-accent-content:#2563EB;
72
- --do-badge-accent-bg:#FAFAFA;
73
+ --do-badge-primary-content: #FAFAFA;
74
+ --do-badge-primary-bg: #71717A;
75
+ --do-badge-accent-content: #2563EB;
76
+ --do-badge-accent-bg: #FAFAFA;
73
77
 
74
78
  /* base sizes */
75
79
  --size-selector: 0.25rem;
@@ -97,4 +101,4 @@
97
101
  --color-secondary: #fafafa;
98
102
  --color-tertiary: #eff6ff;
99
103
  --color-accent: #1d4ed8;
100
- }
104
+ }
@@ -1,50 +1,53 @@
1
1
  :root,
2
2
  [data-do-theme='light'] {
3
- /*color variables*/
4
- --do-color-primary: #fafafa;
5
- --do-color-primary-content: #18181b;
6
- --do-color-secondary: #27272a;
7
- --do-color-secondary-content: #fafafa;
8
- --do-color-tertiary: #1e40af;
9
- --do-color-tertiary-content: #eff6ff;
10
- --do-color-accent: #eff6ff;
11
- --do-color-accent-content: #1d4ed8;
12
- --do-color-white: #fff;
13
- --do-color-black: #000;
14
- --do-color-grey-border: #e4e4e7;
15
- --do-color-grey: #f4f4f5;
16
- --color-dark-grey: #18181b;
17
- --color-dark-grey-border: #303030;
3
+ /*background*/
4
+ --do-bg--primary: var(--do-color-white-1);
5
+ --do-bg--secondary: var(--do-color-white-2);
18
6
 
19
- /*buttons variables*/
20
- --do-color-primary-border: var(--do-color-grey);
21
- --do-color-primary-hover: #d4d4d8;
22
- --do-color-primary-content-hover: #27272a;
23
- --do-color-primary-border-hover: var(--do-color-grey-border);
7
+ /*box*/
8
+ --do-box--primary-bg: var(--do-color-white-6);
9
+ --do-box--primary-border: var(--do-color-white-3);
10
+ --do-box--secondary-bg: var(--do-color-white-4);
11
+ --do-box--secondary-border: var(----do-color-white-3);
24
12
 
25
- --do-color-secondary-border: #52525b;
26
- --do-color-secondary-hover: #52525b;
27
- --do-color-secondary-content-hover: #fafafa;
28
- --do-color-secondary-border-hover: #71717a;
13
+ /*buttons*/
14
+ --do-btn-primary: var(--do-color-white-5);
15
+ --do-btn-primary-hover: var(--do-color-white-7);
16
+ --do-btn-primary-content: var(--do-color-black-2);
17
+ --do-btn-primary-content-hover: var(--do-color-black-2);
18
+ --do-btn-primary-border: var(--do-color-white-2);
19
+ --do-btn-primary-border-hover: var(--do-color-white-3);
29
20
 
30
- --do-color-tertiary-border: #1d4ed8;
31
- --do-color-tertiary-hover: #eff6ff;
32
- --do-color-tertiary-hover-content: #1e40af;
33
- --do-color-tertiary-hover-border: #dbeafe;
21
+ --do-btn-secondary-bg: var(--do-color-black-2);
22
+ --do-btn-secondary-bg-hover: var(--do-color-grey-4);
23
+ --do-btn-secondary-content: var(--do-color-white-5);
24
+ --do-btn-secondary-content-hover: var(--do-color-white-5);
25
+ --do-btn-secondary-hover: var(--do-color-grey-4);
26
+ --do-btn-secondary-border: var(--do-color-grey-2);
27
+ --do-btn-secondary-border-hover: transparent;
34
28
 
35
- --do-color-accent-border: #dbeafe;
36
- --do-color-accent-hover: #dbeafe;
37
- --do-color-accent-hover-content: #1e40af;
38
- --do-color-accent-hover-border: #dbeafe;
29
+ --do-btn-tertiary-bg: var(--do-color-blue-1);
30
+ --do-btn-tertiary-content: var(--do-color-white-6);
31
+ --do-btn-tertiary-border: #dbeafe;
32
+ --do-btn-tertiary-hover: #1D4ED8;
33
+ --do-btn-tertiary-hover-content: var(--do-color-blue-1);
34
+ --do-btn-tertiary-hover-border: var(--do-color-white-6);
39
35
 
40
- --do-color-link: #27272a;
41
- --do-color-link-content: none;
42
- --do-color-link-hover-content: #18181b;
43
- --do-color-link-hover-border: rgba(0, 0, 0, 0.2);
36
+ --do-btn-accent-bg: var(--do-color-white-6);
37
+ --do-btn-accent-content: var(--do-color-blue-2);
38
+ --do-btn-accent-border: var(--do-color-blue-4);
39
+ --do-btn-accent-hover-bg: var(--do-color-blue-4);
40
+ --do-btn-accent-hover-border: var(--do-color-blue-4);
41
+ --do-btn-accent-hover-content: #1D4ED8;
44
42
 
45
- --do-color-link-secondary: #1d4ed8;
46
- --do-color-link-secondary-content: none;
47
- --do-color-link-secondary-hover: #eff6ff;
43
+ --do-btn-link: var(--do-color-black-2);
44
+ --do-btn-link-content: none;
45
+ --do-btn-link-hover-content: var(--do-color-black-2);
46
+ --do-btn-link-hover-border: var(--do-color-grey-2);
47
+
48
+ --do-btn-link-secondary: #1d4ed8;
49
+ --do-btn-link-secondary-content: none;
50
+ --do-btn-link-secondary-hover: var(--do-color-white-6);
48
51
 
49
52
  /*chip variables*/
50
53
  --do-chip-content: #3f3f46;
@@ -95,8 +98,8 @@
95
98
  --do-transparent: transparent;
96
99
 
97
100
  /*daisy color variables*/
98
- --color-primary: var(--do-color-primary);
101
+ --color-primary: var(--do-color-white-5);
99
102
  --color-secondary: var(--do-color-secondary);
100
103
  --color-accent: var(--do-color-accent);
101
104
  --color-tertiary: var(--do-color-tertiary);
102
- }
105
+ }
@@ -8,6 +8,7 @@
8
8
  label,
9
9
  disabled,
10
10
  loading,
11
+ title,
11
12
  onClick,
12
13
  ariaLabel,
13
14
  ariaDisabled,
@@ -18,7 +19,6 @@
18
19
  rounded,
19
20
  circle,
20
21
  square,
21
- noBorder,
22
22
  btnCustomClass,
23
23
  iCustomClass,
24
24
  btnCustomStyles,
@@ -30,6 +30,7 @@
30
30
  label?: iProps['label'];
31
31
  disabled?: iProps['disabled'];
32
32
  loading?: iProps['loading'];
33
+ title?: iProps['title'];
33
34
  onClick: iProps['onClick'];
34
35
  ariaLabel: iProps['ariaLabel'];
35
36
  ariaDisabled?: iProps['ariaDisabled'];
@@ -40,7 +41,6 @@
40
41
  rounded?: iProps['rounded'];
41
42
  circle?: iProps['circle'];
42
43
  square?: iProps['square'];
43
- noBorder?: iProps['noBorder'];
44
44
  btnCustomClass?: iProps['btnCustomClass'];
45
45
  iCustomClass?: iProps['iCustomClass'];
46
46
  btnCustomStyles?: iProps['btnCustomStyles'];
@@ -61,6 +61,7 @@
61
61
  - `loading?`: boolean
62
62
  - `onClick`: () => void
63
63
  - `ariaLabel`: string
64
+ - `title`: string
64
65
  - `ariaDisabled`?: boolean
65
66
  - `iconName?`: any icon name from the Icon component
66
67
  - `iconSize?`: rem units
@@ -81,14 +82,14 @@
81
82
  {disabled}
82
83
  {rounded}
83
84
  {circle}
85
+ {title}
84
86
  {square}
85
- {noBorder}
86
87
  {ariaLabel}
87
88
  {ariaDisabled}
88
89
  customClass={btnCustomClass}
89
90
  customStyles={btnCustomStyles}
90
- onClick={onClick}
91
- data={{...data}}
91
+ {onClick}
92
+ data={{ ...data }}
92
93
  >
93
94
  {#if loading}
94
95
  <i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}
@@ -5,6 +5,7 @@ type $$ComponentProps = {
5
5
  label?: iProps['label'];
6
6
  disabled?: iProps['disabled'];
7
7
  loading?: iProps['loading'];
8
+ title?: iProps['title'];
8
9
  onClick: iProps['onClick'];
9
10
  ariaLabel: iProps['ariaLabel'];
10
11
  ariaDisabled?: iProps['ariaDisabled'];
@@ -15,7 +16,6 @@ type $$ComponentProps = {
15
16
  rounded?: iProps['rounded'];
16
17
  circle?: iProps['circle'];
17
18
  square?: iProps['square'];
18
- noBorder?: iProps['noBorder'];
19
19
  btnCustomClass?: iProps['btnCustomClass'];
20
20
  iCustomClass?: iProps['iCustomClass'];
21
21
  btnCustomStyles?: iProps['btnCustomStyles'];
@@ -34,6 +34,7 @@ type $$ComponentProps = {
34
34
  * - `loading?`: boolean
35
35
  * - `onClick`: () => void
36
36
  * - `ariaLabel`: string
37
+ * - `title`: string
37
38
  * - `ariaDisabled`?: boolean
38
39
  * - `iconName?`: any icon name from the Icon component
39
40
  * - `iconSize?`: rem units
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;CACtB,CAAC;AA+CH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;CACtB,CAAC;AA+CH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
@@ -16,11 +16,11 @@ export interface iProps extends HTMLButtonAttributes {
16
16
  rounded?: boolean;
17
17
  circle?: boolean;
18
18
  square?: boolean;
19
- noBorder?: boolean;
20
19
  customClass?: string;
21
20
  btnCustomClass?: string;
22
21
  iCustomClass?: string;
23
22
  btnCustomStyles?: string;
23
+ title?: string | undefined;
24
24
  iCustomStyles?: string;
25
25
  data?: {
26
26
  [key: string]: string;
@@ -1 +1 @@
1
- {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,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,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAC;CAC/B"}
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,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,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACjC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.0.21",
3
+ "version": "1.1.1",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",