hamzus-ui 0.0.6 → 0.0.8

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 (20) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/Button/Button.svelte +7 -7
  3. package/src/components/hamzus-ui/Checkboxes/CheckboxCard/index.css +1 -1
  4. package/src/components/hamzus-ui/Code/Code.svelte +1 -1
  5. package/src/components/hamzus-ui/DataList/DataList.svelte +1 -1
  6. package/src/components/hamzus-ui/DropdownMenu/Button.svelte +6 -6
  7. package/src/components/hamzus-ui/IconButton/IconButton.svelte +7 -7
  8. package/src/components/hamzus-ui/InfoCard/InfoCard.svelte +1 -1
  9. package/src/components/hamzus-ui/Input/Input.svelte +5 -5
  10. package/src/components/hamzus-ui/KBD/KBD.svelte +2 -2
  11. package/src/components/hamzus-ui/LoaderCircle/Loader.svelte +1 -1
  12. package/src/components/hamzus-ui/Popover/Button.svelte +6 -6
  13. package/src/components/hamzus-ui/Popover/Root.svelte +9 -5
  14. package/src/components/hamzus-ui/Radios/Radio/index.css +1 -1
  15. package/src/components/hamzus-ui/Radios/RadioCard/index.css +1 -1
  16. package/src/components/hamzus-ui/Swicth/index.css +4 -4
  17. package/src/components/hamzus-ui/Tabs/Tabs.svelte +1 -1
  18. package/src/components/hamzus-ui/TabsLink/Tabs.svelte +1 -1
  19. package/src/styles/font.css +7 -7
  20. package/src/styles/variables.css +8 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Button/Button.svelte CHANGED
@@ -20,31 +20,31 @@
20
20
  defaultColor: '--white',
21
21
  hoverBg: '--accent-b',
22
22
  hoverBorder:'',
23
- hoverColor: '--white-d'
23
+ hoverColor: '--white-2'
24
24
  },
25
25
  secondary: {
26
26
  defaultBg: '--bg-2',
27
27
  defaultBorder:'',
28
- defaultColor: '--font-u',
28
+ defaultColor: '--font-1',
29
29
  hoverBg: '--bg-3',
30
30
  hoverBorder:'',
31
- hoverColor: '--font-d'
31
+ hoverColor: '--font-2'
32
32
  },
33
33
  ghost: {
34
34
  defaultBg: '',
35
35
  defaultBorder:'',
36
- defaultColor: '--font-d',
36
+ defaultColor: '--font-2',
37
37
  hoverBg: '--bg-3',
38
38
  hoverBorder:'',
39
- hoverColor: '--font-u'
39
+ hoverColor: '--font-1'
40
40
  },
41
41
  outline: {
42
42
  defaultBg: '',
43
43
  defaultBorder:'--stroke',
44
- defaultColor: '--font-d',
44
+ defaultColor: '--font-2',
45
45
  hoverBg: '--bg-2',
46
46
  hoverBorder:'--stroke',
47
- hoverColor: '--font-u'
47
+ hoverColor: '--font-1'
48
48
  },
49
49
  destructive: {
50
50
  defaultBg: '--red',
package/src/components/hamzus-ui/Checkboxes/CheckboxCard/index.css CHANGED
@@ -36,7 +36,7 @@
36
36
  flex-shrink: 0;
37
37
  }
38
38
  .checkbox-card .checkbox-left-content svg path{
39
- fill: var(--font-d);
39
+ fill: var(--font-2);
40
40
  }
41
41
 
42
42
  .checkbox-card:has(input:checked){
package/src/components/hamzus-ui/Code/Code.svelte CHANGED
@@ -153,7 +153,7 @@
153
153
  .line-index {
154
154
  width: 50px;
155
155
  background-color: rgba(133, 133, 133, 0.068);
156
- color: var(--font-u);
156
+ color: var(--font-1);
157
157
  padding: var(--pad-xs) var(--pad-m);
158
158
  user-select: none;
159
159
  }
package/src/components/hamzus-ui/DataList/DataList.svelte CHANGED
@@ -74,7 +74,7 @@
74
74
  background-color: var(--bg-3);
75
75
  }
76
76
  .key{
77
- color: var(--font-u);
77
+ color: var(--font-1);
78
78
  }
79
79
  .value{
80
80
  text-align: right;
package/src/components/hamzus-ui/DropdownMenu/Button.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  column-gap: var(--pad-m);
25
25
  padding: var(--pad-s) var(--pad-m);
26
26
  border-radius: var(--radius-m);
27
- color: var(--font-d);
27
+ color: var(--font-2);
28
28
  cursor: pointer;
29
29
  transition: transform .2s ease-out;
30
30
  }
@@ -32,15 +32,15 @@
32
32
  transform: scale(.98);
33
33
  }
34
34
  .button :global(> *) {
35
- color: var(--font-d);
36
- fill: var(--font-d);
35
+ color: var(--font-2);
36
+ fill: var(--font-2);
37
37
  }
38
38
  .button:hover{
39
39
  background-color: var(--bg-3);
40
- color: var(--font-u);
40
+ color: var(--font-1);
41
41
  }
42
42
  .button:hover :global(> *) {
43
- color: var(--font-u);
44
- fill: var(--font-d);
43
+ color: var(--font-1);
44
+ fill: var(--font-2);
45
45
  }
46
46
  </style>
package/src/components/hamzus-ui/IconButton/IconButton.svelte CHANGED
@@ -19,31 +19,31 @@
19
19
  defaultColor: '--white',
20
20
  hoverBg: '--accent-b',
21
21
  hoverBorder:'',
22
- hoverColor: '--white-d'
22
+ hoverColor: '--white-2'
23
23
  },
24
24
  secondary: {
25
25
  defaultBg: '--bg-2',
26
26
  defaultBorder:'',
27
- defaultColor: '--font-u',
27
+ defaultColor: '--font-1',
28
28
  hoverBg: '--bg-3',
29
29
  hoverBorder:'',
30
- hoverColor: '--font-d'
30
+ hoverColor: '--font-2'
31
31
  },
32
32
  ghost: {
33
33
  defaultBg: '',
34
34
  defaultBorder:'',
35
- defaultColor: '--font-d',
35
+ defaultColor: '--font-2',
36
36
  hoverBg: '--bg-3',
37
37
  hoverBorder:'',
38
- hoverColor: '--font-u'
38
+ hoverColor: '--font-1'
39
39
  },
40
40
  outline: {
41
41
  defaultBg: '',
42
42
  defaultBorder:'--stroke',
43
- defaultColor: '--font-d',
43
+ defaultColor: '--font-2',
44
44
  hoverBg: '--bg-2',
45
45
  hoverBorder:'--stroke',
46
- hoverColor: '--font-u'
46
+ hoverColor: '--font-1'
47
47
  },
48
48
  destructive: {
49
49
  defaultBg: '--red-b',
package/src/components/hamzus-ui/InfoCard/InfoCard.svelte CHANGED
@@ -27,6 +27,6 @@
27
27
  flex-shrink: 0;
28
28
  }
29
29
  .info-card > svg > path {
30
- fill: var(--font-d);
30
+ fill: var(--font-2);
31
31
  }
32
32
  </style>
package/src/components/hamzus-ui/Input/Input.svelte CHANGED
@@ -201,7 +201,7 @@
201
201
  padding: 2px;
202
202
  }
203
203
  .input-container :global(svg path){
204
- fill: var(--font-d);
204
+ fill: var(--font-2);
205
205
  }
206
206
  .input-container input {
207
207
  text-align: left;
@@ -233,11 +233,11 @@
233
233
  /* border: 2px solid var(--accent); */
234
234
  }
235
235
  .input svg path {
236
- fill: var(--font-d);
236
+ fill: var(--font-2);
237
237
  }
238
238
 
239
239
  .input h6{
240
- color: var(--font-d);
240
+ color: var(--font-2);
241
241
  }
242
242
  .input .required{
243
243
  color: var(--red);
@@ -275,13 +275,13 @@
275
275
  column-gap: var(--pad-s);
276
276
  }
277
277
  .input input {
278
- color: var(--font-u);
278
+ color: var(--font-1);
279
279
  width: 100%;
280
280
  flex: 1;
281
281
  font-weight: 300;
282
282
  }
283
283
  .input input::placeholder{
284
- color: var(--font-t);
284
+ color: var(--font-3);
285
285
  }
286
286
  .input .input-line svg {
287
287
  height: var(--icon-size);
package/src/components/hamzus-ui/KBD/KBD.svelte CHANGED
@@ -16,9 +16,9 @@
16
16
  padding: var(--pad-xs) var(--pad-s);
17
17
  background-color: var(--bg-3);
18
18
  border: 1px solid var(--stroke);
19
- color: var(--font-d);
19
+ color: var(--font-2);
20
20
  border-radius: var(--radius-m);
21
21
  font-weight: 300;
22
- color: var(--font-u);
22
+ color: var(--font-1);
23
23
  }
24
24
  </style>
package/src/components/hamzus-ui/LoaderCircle/Loader.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let size = "50px"; // Taille par défaut en pixels
3
3
  export let width = "3px"; // Taille par défaut en pixels
4
- export let color = "var(--font-d)"; // Taille par défaut en pixels
4
+ export let color = "var(--font-2)"; // Taille par défaut en pixels
5
5
  </script>
6
6
 
7
7
  <div class="loader" style="--loader-color:{color};width: {size}; height: {size}; border-width: {width};"></div>
package/src/components/hamzus-ui/Popover/Button.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  column-gap: var(--pad-m);
25
25
  padding: var(--pad-s) var(--pad-m);
26
26
  border-radius: var(--radius-m);
27
- color: var(--font-d);
27
+ color: var(--font-2);
28
28
  cursor: pointer;
29
29
  transition: transform .2s ease-out;
30
30
  }
@@ -32,15 +32,15 @@
32
32
  transform: scale(.98);
33
33
  }
34
34
  .button :global(*) {
35
- color: var(--font-d);
36
- fill: var(--font-d);
35
+ color: var(--font-2);
36
+ fill: var(--font-2);
37
37
  }
38
38
  .button:hover{
39
39
  background-color: var(--bg-3);
40
- color: var(--font-u);
40
+ color: var(--font-1);
41
41
  }
42
42
  .button:hover :global(*) {
43
- color: var(--font-u);
44
- fill: var(--font-d);
43
+ color: var(--font-1);
44
+ fill: var(--font-2);
45
45
  }
46
46
  </style>
package/src/components/hamzus-ui/Popover/Root.svelte CHANGED
@@ -285,7 +285,7 @@ import { onDestroy, onMount } from 'svelte';
285
285
  >
286
286
  <slot name="content" />
287
287
  </content>
288
- <div class="dropdown-bg-exit"></div>
288
+ <!-- <div class="dropdown-bg-exit"></div> -->
289
289
  </content-container>
290
290
  </Portal>
291
291
  </dropdown>
@@ -340,14 +340,18 @@ import { onDestroy, onMount } from 'svelte';
340
340
  }
341
341
 
342
342
  @keyframes entry {
343
- from {
343
+ 0% {
344
344
  display: block;
345
345
  opacity: 0;
346
346
  user-select: none;
347
347
  pointer-events: none;
348
348
  transform: translate(var(--transform-x), var(--transform-y)) scale(0.9);
349
349
  }
350
- to {
350
+ 99% {
351
+ user-select: none;
352
+ pointer-events: none;
353
+ }
354
+ 100% {
351
355
  display: block;
352
356
  opacity: 1;
353
357
  user-select: initial;
@@ -359,8 +363,8 @@ import { onDestroy, onMount } from 'svelte';
359
363
  from {
360
364
  display: block;
361
365
  opacity: 1;
362
- user-select: initial;
363
- pointer-events: initial;
366
+ user-select: none;
367
+ pointer-events: none;
364
368
  transform: translate(0px, 0px) scale(1);
365
369
  }
366
370
  to {
package/src/components/hamzus-ui/Radios/Radio/index.css CHANGED
@@ -7,7 +7,7 @@
7
7
  transition: transform .2s ease-out;
8
8
  }
9
9
  .label-radio:hover:not(.disabled) > h4{
10
- color: var(--font-u);
10
+ color: var(--font-1);
11
11
  transition: color .2s ease-out;
12
12
  }
13
13
 
package/src/components/hamzus-ui/Radios/RadioCard/index.css CHANGED
@@ -33,7 +33,7 @@
33
33
  flex-shrink: 0;
34
34
  }
35
35
  .radio-card .radio-left-content svg path{
36
- fill: var(--font-d);
36
+ fill: var(--font-2);
37
37
  }
38
38
 
39
39
  .radio-card:has(input:checked){
package/src/components/hamzus-ui/Swicth/index.css CHANGED
@@ -66,7 +66,7 @@
66
66
  display:flex;
67
67
  align-items:center;
68
68
  justify-content:center;
69
- color: var(--font-t);
69
+ color: var(--font-3);
70
70
  transform: scale(.6) translateX(5px);
71
71
  opacity: 0;
72
72
  transition-property:transform, opacity ;
@@ -93,7 +93,7 @@
93
93
  display:flex;
94
94
  align-items:center;
95
95
  justify-content:center;
96
- color: var(--font-t);
96
+ color: var(--font-3);
97
97
  transform: scale(.6) translateX(-5px);
98
98
  opacity: 0;
99
99
  transition-property:transform, opacity ;
@@ -111,8 +111,8 @@
111
111
  opacity: 1;
112
112
  }
113
113
  .switch:not(.active) .state .not-active *{
114
- color: var(--font-u);
115
- fill: var(--font-u);
114
+ color: var(--font-1);
115
+ fill: var(--font-1);
116
116
  }
117
117
  .label-switch:has(.switch.disabled), .switch.disabled{
118
118
  opacity: .9;
package/src/components/hamzus-ui/Tabs/Tabs.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let links = [];
3
3
 
4
- let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
4
+ let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
5
5
 
6
6
  import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
7
7
  import Button from '@hamzus-ui/Button/Button.svelte';
package/src/components/hamzus-ui/TabsLink/Tabs.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  export let links = [];
3
3
 
4
- let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
4
+ let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
5
5
 
6
6
  import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
7
7
  import Button from '@hamzus-ui/Button/Button.svelte';
package/src/styles/font.css CHANGED
@@ -16,7 +16,7 @@
16
16
  font-size: var(--text-1);
17
17
  font-family: 'Geist', 'Inter', sans-serif;
18
18
  font-weight: bold;
19
- color: var(--font-u);
19
+ color: var(--font-1);
20
20
  }
21
21
 
22
22
  .h2, h2 {
@@ -24,7 +24,7 @@
24
24
  line-height: 2rem;
25
25
  font-family: 'Geist', 'Inter', sans-serif;
26
26
  font-weight: bold;
27
- color: var(--font-u);
27
+ color: var(--font-1);
28
28
  }
29
29
 
30
30
  .h3, h3 {
@@ -32,7 +32,7 @@
32
32
  line-height: 1.75rem;
33
33
  font-family: 'Geist', 'Inter', sans-serif;
34
34
  font-weight: bold;
35
- color: var(--font-u);
35
+ color: var(--font-1);
36
36
  }
37
37
 
38
38
  .h4, h4 {
@@ -40,7 +40,7 @@
40
40
  line-height: 1.5rem;
41
41
  font-family: 'Geist', 'Inter', sans-serif;
42
42
  font-weight: 500;
43
- color: var(--font-d);
43
+ color: var(--font-2);
44
44
  }
45
45
 
46
46
  .h5, h5 {
@@ -48,7 +48,7 @@
48
48
  line-height: 1.25rem;
49
49
  font-family: 'Geist', 'Inter', sans-serif;
50
50
  font-weight: 400;
51
- color: var(--font-d);
51
+ color: var(--font-2);
52
52
  }
53
53
 
54
54
  .h6, h6 {
@@ -56,14 +56,14 @@
56
56
  line-height: 1rem;
57
57
  font-family: 'Geist', 'Inter', sans-serif;
58
58
  font-weight: 300;
59
- color: var(--font-u);
59
+ color: var(--font-1);
60
60
  }
61
61
 
62
62
  .p, p {
63
63
  font-size: var(--text-p);
64
64
  font-family: 'Geist', 'Inter', sans-serif;
65
65
  font-weight: 300;
66
- color: var(--font-d);
66
+ color: var(--font-2);
67
67
  }
68
68
 
69
69
  .mono {
package/src/styles/variables.css CHANGED
@@ -15,11 +15,12 @@
15
15
  --violet: #FA8DE2;
16
16
  --violet-b: #fa8de22d;
17
17
  --white: #F6F6F6;
18
- --white-d: #d6dedf;
18
+ --white-b: #ffffff4d;
19
+ --white-2: #d6dedf;
19
20
  /* font color */
20
- --font-u: #121212;
21
- --font-d: #666666;
22
- --font-t: #93939B;
21
+ --font-1: #121212;
22
+ --font-2: #666666;
23
+ --font-3: #93939B;
23
24
  /* background */
24
25
  --bg-1: #F6F6F6;
25
26
  --bg-2: #dddddd;
@@ -56,9 +57,9 @@
56
57
  @media (prefers-color-scheme: dark) {
57
58
  :root {
58
59
  /* font color */
59
- --font-u: #ECEBFF;
60
- --font-d: #899098;
61
- --font-t: #454545;
60
+ --font-1: #ECEBFF;
61
+ --font-2: #899098;
62
+ --font-3: #454545;
62
63
  /* background */
63
64
  --bg-1: #161616;
64
65
  --bg-2: #1F1F1F;