hamzus-ui 0.0.6 → 0.0.7

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
@@ -25,26 +25,26 @@
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',
@@ -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){
@@ -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
  }
@@ -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;
@@ -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>
@@ -24,26 +24,26 @@
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',
@@ -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>
@@ -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);
@@ -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>
@@ -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>
@@ -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>
@@ -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
 
@@ -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){
@@ -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;
@@ -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';
@@ -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';
@@ -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 {
@@ -17,9 +17,9 @@
17
17
  --white: #F6F6F6;
18
18
  --white-d: #d6dedf;
19
19
  /* font color */
20
- --font-u: #121212;
21
- --font-d: #666666;
22
- --font-t: #93939B;
20
+ --font-1: #121212;
21
+ --font-2: #666666;
22
+ --font-3: #93939B;
23
23
  /* background */
24
24
  --bg-1: #F6F6F6;
25
25
  --bg-2: #dddddd;
@@ -56,9 +56,9 @@
56
56
  @media (prefers-color-scheme: dark) {
57
57
  :root {
58
58
  /* font color */
59
- --font-u: #ECEBFF;
60
- --font-d: #899098;
61
- --font-t: #454545;
59
+ --font-1: #ECEBFF;
60
+ --font-2: #899098;
61
+ --font-3: #454545;
62
62
  /* background */
63
63
  --bg-1: #161616;
64
64
  --bg-2: #1F1F1F;