do-ui-design-system 0.1.4 → 0.1.6

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 (12) hide show
  1. package/dist/atoms/Button/Button.svelte +4 -2
  2. package/dist/atoms/Button/Button.svelte.d.ts.map +1 -1
  3. package/dist/atoms/Icons/Icon.svelte +2 -2
  4. package/dist/atoms/Icons/Icon.svelte.d.ts +2 -2
  5. package/dist/do-theme/button.css +35 -21
  6. package/dist/do-theme/var-light.css +21 -17
  7. package/dist/molecules/IconButton/IconButton.svelte +3 -3
  8. package/dist/molecules/IconButton/IconButton.svelte.d.ts +3 -3
  9. package/dist/molecules/IconButton/iProps.d.ts +2 -2
  10. package/dist/molecules/IconButton/iProps.d.ts.map +1 -1
  11. package/package.json +2 -2
  12. package/dist/do-theme/post-compiled.css +0 -1661
package/dist/atoms/Button/Button.svelte CHANGED
@@ -32,6 +32,8 @@
32
32
  on:click
33
33
  >
34
34
  <slot />
35
- {label}
36
- <i class="icon-loading do-loader" style="{loading ? 'display:inline;' : 'display:none;'}"></i>
35
+ {#if label}
36
+ <span>{label}</span>
37
+ {/if}
38
+ <i class="icon-loading do-loader" style="{loading ? 'display:inline-block;' : 'display:none;'}"></i>
37
39
  </button>
package/dist/atoms/Button/Button.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AA0BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Button/Button.svelte.ts"],"names":[],"mappings":"AA4BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;cAA4G,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
package/dist/atoms/Icons/Icon.svelte CHANGED
@@ -12,8 +12,8 @@
12
12
  <Icon name={icon} color?={color} size?={size}/>
13
13
  ```
14
14
  - `name`: one of the .icon classes suggested by the component.
15
- - `color?`: Any tailwind color class.
16
- - `size?`: Any tailwind size class.
15
+ - `color?`: Any color style (ex. #000).
16
+ - `size?`: Any size style (ex. 1rem).
17
17
  -->
18
18
 
19
19
  <i
package/dist/atoms/Icons/Icon.svelte.d.ts CHANGED
@@ -17,8 +17,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
17
17
  * <Icon name={icon} color?={color} size?={size}/>
18
18
  * ```
19
19
  * - `name`: one of the .icon classes suggested by the component.
20
- * - `color?`: Any tailwind color class.
21
- * - `size?`: Any tailwind size class.
20
+ * - `color?`: Any color style (ex. #000).
21
+ * - `size?`: Any size style (ex. 1rem).
22
22
  */
23
23
  declare const Icon: $$__sveltets_2_IsomorphicComponent<{
24
24
  [x: string]: any;
package/dist/do-theme/button.css CHANGED
@@ -11,6 +11,15 @@
11
11
  transition: all 0.2s;
12
12
  }
13
13
 
14
+ .do-btn .do-btn__icon {
15
+ display: inline-flex;
16
+ transform: scale(130%);
17
+ }
18
+
19
+ .do-btn .do-btn__icon i {
20
+ line-height: 140%;
21
+ }
22
+
14
23
  .do-btn-sm {
15
24
  font-size: 0.75rem;
16
25
  }
@@ -29,25 +38,25 @@
29
38
 
30
39
  .do-btn-primary {
31
40
  background-color: var(--do-color-primary);
32
- border-color: var(--do-color-border-primary);
41
+ border-color: var(--do-color-primary-border);
33
42
  color: var(--do-text-contrast);
34
43
  }
35
44
 
36
45
  .do-btn-primary:hover {
37
46
  background-color: var(--do-color-primary-hover);
38
- border-color: var(--do-color-border-primary-hover);
39
- color: var(--color-primary);
47
+ border-color: var(--do-color-primary-border-hover);
48
+ color: var(--do-color-primary);
40
49
  }
41
50
 
42
51
  .do-btn-primary:disabled {
43
52
  background-color: var(--do-color-primary-disabled);
44
53
  border-color: var(--do-transparent);
45
- color: var(--color-primary-content);
54
+ color: var(--do-color-primary-content);
46
55
  }
47
56
 
48
57
  .do-btn-secondary {
49
58
  background-color: var(--do-color-secondary);
50
- border-color: var(--do-color-border-secondary);
59
+ border-color: var(--do-color-secondary-border);
51
60
  color: var(--do-text-base);
52
61
  }
53
62
 
@@ -62,35 +71,30 @@
62
71
  background-color: var(--do-transparent);
63
72
  }
64
73
 
65
- .do-btn-neutral {
74
+ .do-btn-link {
66
75
  border-color: var(--do-transparent);
67
76
  background-color: var(--do-transparent);
77
+ }
78
+
79
+ .do-btn-link span {
68
80
  text-decoration: underline;
69
81
  }
70
82
 
71
- .do-btn-neutral:hover {
72
- color: var(--color-primary-content);
83
+ .do-btn-link:hover, .do-btn-link:focus {
84
+ color: var(--do-color-primary-content);
73
85
  border-color: var(--do-transparent);
74
86
  background-color: var(--color-primary);
75
87
  }
76
88
 
77
- .do-btn-neutral:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
89
+ .do-btn-link:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
78
90
  border-color: var(--do-transparent);
79
91
  background-color: var(--do-transparent);
80
92
  /* text-decoration: underline; */
81
93
  }
82
94
 
83
- .do-btn-neutral:not(i){
84
- text-decoration: underline;
85
- }
86
- /* .do-btn-neutral i{
87
- text-decoration: none;
88
- display: inline-block;
89
- } */
90
-
91
95
  .do-btn-accent {
92
96
  background-color: var(--do-color-accent);
93
- border-color: var(--do-color-border-accent);
97
+ border-color: var(--do-color-accent-border);
94
98
  color: var(--do-text-contrast);
95
99
  }
96
100
  .do-btn-accent:is(:disabled, [disabled], .do-btn-disabled):is(:disabled, [disabled], .do-btn-disabled) {
@@ -98,13 +102,23 @@
98
102
  border: 1px solid var(--do-transparent);
99
103
  background-color: var(--do-color-accent-disabled);
100
104
  }
101
-
102
- .do-btn-accent:hover {
103
- color: var(--color-accent);
105
+ .do-btn-accent:hover, .do-btn-accent:focus {
106
+ color: var(--do-color-accent);
104
107
  border: 1px solid #dbeafe;
105
108
  background-color: var(--color-accent-content);
106
109
  }
107
110
 
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);
120
+ }
121
+
108
122
  .do-loader {
109
123
  animation: rotation 1s linear infinite;
110
124
  }
package/dist/do-theme/var-light.css CHANGED
@@ -1,12 +1,29 @@
1
1
  :root {
2
2
  --do-color-primary: #27272A;
3
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
+
4
9
  --do-color-secondary: #FAFAFA;
5
10
  --do-color-secondary-content: #27272A;
6
- --do-color-neutral: #FAFAFA;
7
- --do-color-neutral-content: none;
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
+
8
22
  --do-color-accent: #1D4ED8;
9
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;
10
27
 
11
28
 
12
29
  /* base sizes */
@@ -17,22 +34,9 @@
17
34
  --radius-selector: 0.25rem;
18
35
  --radius-field: 0.25rem;
19
36
  --radius-box: 0.25rem;
20
-
21
- /*hover color*/
22
- --do-color-primary-hover: #f5f5f5;
23
- --do-color-secondary-hover: #3e3e45;
24
- /*disabled color*/
25
- --do-color-primary-disabled: #a4a4a6;
26
- --do-color-accent-disabled: #a4b6ed;
27
- /*border color*/
28
- --do-color-border-primary: #52525B;
29
- --do-color-border-primary-hover: #E4E4E7;
30
- --do-color-border-secondary: #F4F4F5;
31
- --do-color-border-secondary-hover: #71717A;
32
- --do-color-border-accent: #2563EB;
33
- --do-color-border-accent-hover: #3B82F6;
37
+
34
38
  /*styles*/
35
- --do-transparent: transparent;
36
39
  --do-text-base: #27272A;
37
40
  --do-text-contrast: #fff;
41
+ --do-transparent: transparent;
38
42
  }
package/dist/molecules/IconButton/IconButton.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { Button, Icon } from '../../atoms';
2
+ import { Button, Icon } from '../../atoms/index.js';
3
3
  import type { iProps } from './iProps.ts';
4
4
 
5
5
  export let variant: iProps['variant'] = 'do-btn-primary';
@@ -18,7 +18,7 @@
18
18
  ```Svelte
19
19
  <IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
20
20
  ```
21
- - `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
21
+ - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
22
22
  - `size?`: rem units
23
23
  - `label?`: string
24
24
  - `disabled?`: boolean
@@ -35,7 +35,7 @@
35
35
  {#if loading}
36
36
  <i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}></i>
37
37
  {:else}
38
- <div style="display: inline-flex; transform:scale(130%); {`${iconPosition === 'start' ? 'order:1;' : 'order:2;'}`}">
38
+ <div class="do-btn__icon" style="{`${iconPosition === 'start' ? 'order:1;' : 'order:2;'}`}">
39
39
  <Icon name={iconName} size={iconSize} color={iconColor}/>
40
40
  </div>
41
41
  {/if}
package/dist/molecules/IconButton/IconButton.svelte.d.ts CHANGED
@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
16
16
  * ```Svelte
17
17
  * <IconButton label?={'text'} variant?={'variant'} size?={'size'} on:click={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} />
18
18
  * ```
19
- * - `variant?`: 'btn-primary' | 'btn-secondary' | 'do-btn-tertiary' | 'btn-accent' | 'btn-neutral'
19
+ * - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
20
20
  * - `size?`: rem units
21
21
  * - `label?`: string
22
22
  * - `disabled?`: boolean
@@ -30,8 +30,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
30
30
  */
31
31
  declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
32
32
  [x: string]: any;
33
- variant?: string | undefined;
34
- size?: string | undefined;
33
+ variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | undefined;
34
+ size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
35
35
  label?: string | undefined;
36
36
  disabled?: boolean | undefined;
37
37
  loading?: boolean | undefined;
package/dist/molecules/IconButton/iProps.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type { IconNames } from '../../do-theme/icomoon/iconList.ts';
2
2
  import type { HTMLButtonAttributes } from 'svelte/elements';
3
3
  export interface iProps extends HTMLButtonAttributes {
4
- variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent' | string;
5
- size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg' | string;
4
+ variant?: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-link' | 'do-btn-accent';
5
+ size?: 'do-btn-sm' | 'do-btn-md' | 'do-btn-lg';
6
6
  label?: string;
7
7
  disabled?: boolean;
8
8
  loading?: boolean;
package/dist/molecules/IconButton/iProps.d.ts.map CHANGED
@@ -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,GAAG,MAAM,CAAC;IAC/G,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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;CAClB"}
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,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;CAClB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",
@@ -46,7 +46,7 @@
46
46
  "./molecules": {
47
47
  "svelte": "./dist/molecules/index.js"
48
48
  },
49
- "./dist/do-theme/index.css": "./dist/do-theme/index.css"
49
+ "./do-theme": "./dist/do-theme/index.css"
50
50
  },
51
51
  "type": "module",
52
52
  "peerDependencies": {