elements-kit 0.5.2 → 0.6.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 (17) hide show
  1. package/README.md +0 -6
  2. package/dist/ui/badge/badge.css +1 -1
  3. package/dist/ui/button/button.css +50 -230
  4. package/dist/ui/card/card.css +129 -0
  5. package/dist/ui/marketing/marketing.css +624 -0
  6. package/dist/ui/styles/base/gray.css +30 -0
  7. package/dist/ui/styles/base/mauve.css +29 -29
  8. package/dist/ui/styles/base/olive.css +29 -29
  9. package/dist/ui/styles/base/sage.css +29 -29
  10. package/dist/ui/styles/base/sand.css +29 -29
  11. package/dist/ui/styles/base/slate.css +29 -29
  12. package/dist/ui/styles/colors/base.css +28 -28
  13. package/dist/ui/styles/material.css +2 -2
  14. package/dist/ui/styles/shadow.css +42 -42
  15. package/dist/ui/styles/theme.css +3 -3
  16. package/package.json +3 -3
  17. package/dist/ui/styles/colors/gray.css +0 -30
package/dist/ui/styles/base/olive.css CHANGED
@@ -1,30 +1,30 @@
1
- [data-gray-color="olive"] {
2
- --gray-1: var(--olive-1);
3
- --gray-2: var(--olive-2);
4
- --gray-3: var(--olive-3);
5
- --gray-4: var(--olive-4);
6
- --gray-5: var(--olive-5);
7
- --gray-6: var(--olive-6);
8
- --gray-7: var(--olive-7);
9
- --gray-8: var(--olive-8);
10
- --gray-9: var(--olive-9);
11
- --gray-10: var(--olive-10);
12
- --gray-11: var(--olive-11);
13
- --gray-12: var(--olive-12);
14
- --gray-a1: var(--olive-a1);
15
- --gray-a2: var(--olive-a2);
16
- --gray-a3: var(--olive-a3);
17
- --gray-a4: var(--olive-a4);
18
- --gray-a5: var(--olive-a5);
19
- --gray-a6: var(--olive-a6);
20
- --gray-a7: var(--olive-a7);
21
- --gray-a8: var(--olive-a8);
22
- --gray-a9: var(--olive-a9);
23
- --gray-a10: var(--olive-a10);
24
- --gray-a11: var(--olive-a11);
25
- --gray-a12: var(--olive-a12);
26
- --gray-contrast: var(--olive-contrast);
27
- --gray-surface: var(--olive-surface);
28
- --gray-indicator: var(--olive-indicator);
29
- --gray-track: var(--olive-track);
1
+ [data-base-color="olive"] {
2
+ --base-color-1: var(--olive-1);
3
+ --base-color-2: var(--olive-2);
4
+ --base-color-3: var(--olive-3);
5
+ --base-color-4: var(--olive-4);
6
+ --base-color-5: var(--olive-5);
7
+ --base-color-6: var(--olive-6);
8
+ --base-color-7: var(--olive-7);
9
+ --base-color-8: var(--olive-8);
10
+ --base-color-9: var(--olive-9);
11
+ --base-color-10: var(--olive-10);
12
+ --base-color-11: var(--olive-11);
13
+ --base-color-12: var(--olive-12);
14
+ --base-color-a1: var(--olive-a1);
15
+ --base-color-a2: var(--olive-a2);
16
+ --base-color-a3: var(--olive-a3);
17
+ --base-color-a4: var(--olive-a4);
18
+ --base-color-a5: var(--olive-a5);
19
+ --base-color-a6: var(--olive-a6);
20
+ --base-color-a7: var(--olive-a7);
21
+ --base-color-a8: var(--olive-a8);
22
+ --base-color-a9: var(--olive-a9);
23
+ --base-color-a10: var(--olive-a10);
24
+ --base-color-a11: var(--olive-a11);
25
+ --base-color-a12: var(--olive-a12);
26
+ --base-color-contrast: var(--olive-contrast);
27
+ --base-color-surface: var(--olive-surface);
28
+ --base-color-indicator: var(--olive-indicator);
29
+ --base-color-track: var(--olive-track);
30
30
  }
package/dist/ui/styles/base/sage.css CHANGED
@@ -1,30 +1,30 @@
1
- [data-gray-color="sage"] {
2
- --gray-1: var(--sage-1);
3
- --gray-2: var(--sage-2);
4
- --gray-3: var(--sage-3);
5
- --gray-4: var(--sage-4);
6
- --gray-5: var(--sage-5);
7
- --gray-6: var(--sage-6);
8
- --gray-7: var(--sage-7);
9
- --gray-8: var(--sage-8);
10
- --gray-9: var(--sage-9);
11
- --gray-10: var(--sage-10);
12
- --gray-11: var(--sage-11);
13
- --gray-12: var(--sage-12);
14
- --gray-a1: var(--sage-a1);
15
- --gray-a2: var(--sage-a2);
16
- --gray-a3: var(--sage-a3);
17
- --gray-a4: var(--sage-a4);
18
- --gray-a5: var(--sage-a5);
19
- --gray-a6: var(--sage-a6);
20
- --gray-a7: var(--sage-a7);
21
- --gray-a8: var(--sage-a8);
22
- --gray-a9: var(--sage-a9);
23
- --gray-a10: var(--sage-a10);
24
- --gray-a11: var(--sage-a11);
25
- --gray-a12: var(--sage-a12);
26
- --gray-contrast: var(--sage-contrast);
27
- --gray-surface: var(--sage-surface);
28
- --gray-indicator: var(--sage-indicator);
29
- --gray-track: var(--sage-track);
1
+ [data-base-color="sage"] {
2
+ --base-color-1: var(--sage-1);
3
+ --base-color-2: var(--sage-2);
4
+ --base-color-3: var(--sage-3);
5
+ --base-color-4: var(--sage-4);
6
+ --base-color-5: var(--sage-5);
7
+ --base-color-6: var(--sage-6);
8
+ --base-color-7: var(--sage-7);
9
+ --base-color-8: var(--sage-8);
10
+ --base-color-9: var(--sage-9);
11
+ --base-color-10: var(--sage-10);
12
+ --base-color-11: var(--sage-11);
13
+ --base-color-12: var(--sage-12);
14
+ --base-color-a1: var(--sage-a1);
15
+ --base-color-a2: var(--sage-a2);
16
+ --base-color-a3: var(--sage-a3);
17
+ --base-color-a4: var(--sage-a4);
18
+ --base-color-a5: var(--sage-a5);
19
+ --base-color-a6: var(--sage-a6);
20
+ --base-color-a7: var(--sage-a7);
21
+ --base-color-a8: var(--sage-a8);
22
+ --base-color-a9: var(--sage-a9);
23
+ --base-color-a10: var(--sage-a10);
24
+ --base-color-a11: var(--sage-a11);
25
+ --base-color-a12: var(--sage-a12);
26
+ --base-color-contrast: var(--sage-contrast);
27
+ --base-color-surface: var(--sage-surface);
28
+ --base-color-indicator: var(--sage-indicator);
29
+ --base-color-track: var(--sage-track);
30
30
  }
package/dist/ui/styles/base/sand.css CHANGED
@@ -1,30 +1,30 @@
1
- [data-gray-color="sand"] {
2
- --gray-1: var(--sand-1);
3
- --gray-2: var(--sand-2);
4
- --gray-3: var(--sand-3);
5
- --gray-4: var(--sand-4);
6
- --gray-5: var(--sand-5);
7
- --gray-6: var(--sand-6);
8
- --gray-7: var(--sand-7);
9
- --gray-8: var(--sand-8);
10
- --gray-9: var(--sand-9);
11
- --gray-10: var(--sand-10);
12
- --gray-11: var(--sand-11);
13
- --gray-12: var(--sand-12);
14
- --gray-a1: var(--sand-a1);
15
- --gray-a2: var(--sand-a2);
16
- --gray-a3: var(--sand-a3);
17
- --gray-a4: var(--sand-a4);
18
- --gray-a5: var(--sand-a5);
19
- --gray-a6: var(--sand-a6);
20
- --gray-a7: var(--sand-a7);
21
- --gray-a8: var(--sand-a8);
22
- --gray-a9: var(--sand-a9);
23
- --gray-a10: var(--sand-a10);
24
- --gray-a11: var(--sand-a11);
25
- --gray-a12: var(--sand-a12);
26
- --gray-contrast: var(--sand-contrast);
27
- --gray-surface: var(--sand-surface);
28
- --gray-indicator: var(--sand-indicator);
29
- --gray-track: var(--sand-track);
1
+ [data-base-color="sand"] {
2
+ --base-color-1: var(--sand-1);
3
+ --base-color-2: var(--sand-2);
4
+ --base-color-3: var(--sand-3);
5
+ --base-color-4: var(--sand-4);
6
+ --base-color-5: var(--sand-5);
7
+ --base-color-6: var(--sand-6);
8
+ --base-color-7: var(--sand-7);
9
+ --base-color-8: var(--sand-8);
10
+ --base-color-9: var(--sand-9);
11
+ --base-color-10: var(--sand-10);
12
+ --base-color-11: var(--sand-11);
13
+ --base-color-12: var(--sand-12);
14
+ --base-color-a1: var(--sand-a1);
15
+ --base-color-a2: var(--sand-a2);
16
+ --base-color-a3: var(--sand-a3);
17
+ --base-color-a4: var(--sand-a4);
18
+ --base-color-a5: var(--sand-a5);
19
+ --base-color-a6: var(--sand-a6);
20
+ --base-color-a7: var(--sand-a7);
21
+ --base-color-a8: var(--sand-a8);
22
+ --base-color-a9: var(--sand-a9);
23
+ --base-color-a10: var(--sand-a10);
24
+ --base-color-a11: var(--sand-a11);
25
+ --base-color-a12: var(--sand-a12);
26
+ --base-color-contrast: var(--sand-contrast);
27
+ --base-color-surface: var(--sand-surface);
28
+ --base-color-indicator: var(--sand-indicator);
29
+ --base-color-track: var(--sand-track);
30
30
  }
package/dist/ui/styles/base/slate.css CHANGED
@@ -1,30 +1,30 @@
1
- [data-gray-color="slate"] {
2
- --gray-1: var(--slate-1);
3
- --gray-2: var(--slate-2);
4
- --gray-3: var(--slate-3);
5
- --gray-4: var(--slate-4);
6
- --gray-5: var(--slate-5);
7
- --gray-6: var(--slate-6);
8
- --gray-7: var(--slate-7);
9
- --gray-8: var(--slate-8);
10
- --gray-9: var(--slate-9);
11
- --gray-10: var(--slate-10);
12
- --gray-11: var(--slate-11);
13
- --gray-12: var(--slate-12);
14
- --gray-a1: var(--slate-a1);
15
- --gray-a2: var(--slate-a2);
16
- --gray-a3: var(--slate-a3);
17
- --gray-a4: var(--slate-a4);
18
- --gray-a5: var(--slate-a5);
19
- --gray-a6: var(--slate-a6);
20
- --gray-a7: var(--slate-a7);
21
- --gray-a8: var(--slate-a8);
22
- --gray-a9: var(--slate-a9);
23
- --gray-a10: var(--slate-a10);
24
- --gray-a11: var(--slate-a11);
25
- --gray-a12: var(--slate-a12);
26
- --gray-contrast: var(--slate-contrast);
27
- --gray-surface: var(--slate-surface);
28
- --gray-indicator: var(--slate-indicator);
29
- --gray-track: var(--slate-track);
1
+ [data-base-color="slate"] {
2
+ --base-color-1: var(--slate-1);
3
+ --base-color-2: var(--slate-2);
4
+ --base-color-3: var(--slate-3);
5
+ --base-color-4: var(--slate-4);
6
+ --base-color-5: var(--slate-5);
7
+ --base-color-6: var(--slate-6);
8
+ --base-color-7: var(--slate-7);
9
+ --base-color-8: var(--slate-8);
10
+ --base-color-9: var(--slate-9);
11
+ --base-color-10: var(--slate-10);
12
+ --base-color-11: var(--slate-11);
13
+ --base-color-12: var(--slate-12);
14
+ --base-color-a1: var(--slate-a1);
15
+ --base-color-a2: var(--slate-a2);
16
+ --base-color-a3: var(--slate-a3);
17
+ --base-color-a4: var(--slate-a4);
18
+ --base-color-a5: var(--slate-a5);
19
+ --base-color-a6: var(--slate-a6);
20
+ --base-color-a7: var(--slate-a7);
21
+ --base-color-a8: var(--slate-a8);
22
+ --base-color-a9: var(--slate-a9);
23
+ --base-color-a10: var(--slate-a10);
24
+ --base-color-a11: var(--slate-a11);
25
+ --base-color-a12: var(--slate-a12);
26
+ --base-color-contrast: var(--slate-contrast);
27
+ --base-color-surface: var(--slate-surface);
28
+ --base-color-indicator: var(--slate-indicator);
29
+ --base-color-track: var(--slate-track);
30
30
  }
package/dist/ui/styles/colors/base.css CHANGED
@@ -1,30 +1,30 @@
1
1
  [data-color="base"] {
2
- --color-1: var(--gray-1);
3
- --color-2: var(--gray-2);
4
- --color-3: var(--gray-3);
5
- --color-4: var(--gray-4);
6
- --color-5: var(--gray-5);
7
- --color-6: var(--gray-6);
8
- --color-7: var(--gray-7);
9
- --color-8: var(--gray-8);
10
- --color-9: var(--gray-9);
11
- --color-10: var(--gray-10);
12
- --color-11: var(--gray-11);
13
- --color-12: var(--gray-12);
14
- --color-a1: var(--gray-a1);
15
- --color-a2: var(--gray-a2);
16
- --color-a3: var(--gray-a3);
17
- --color-a4: var(--gray-a4);
18
- --color-a5: var(--gray-a5);
19
- --color-a6: var(--gray-a6);
20
- --color-a7: var(--gray-a7);
21
- --color-a8: var(--gray-a8);
22
- --color-a9: var(--gray-a9);
23
- --color-a10: var(--gray-a10);
24
- --color-a11: var(--gray-a11);
25
- --color-a12: var(--gray-a12);
26
- --accent-contrast: var(--gray-contrast);
27
- --accent-surface: var(--gray-surface);
28
- --accent-indicator: var(--gray-indicator);
29
- --accent-track: var(--gray-track);
2
+ --color-1: var(--base-color-1);
3
+ --color-2: var(--base-color-2);
4
+ --color-3: var(--base-color-3);
5
+ --color-4: var(--base-color-4);
6
+ --color-5: var(--base-color-5);
7
+ --color-6: var(--base-color-6);
8
+ --color-7: var(--base-color-7);
9
+ --color-8: var(--base-color-8);
10
+ --color-9: var(--base-color-9);
11
+ --color-10: var(--base-color-10);
12
+ --color-11: var(--base-color-11);
13
+ --color-12: var(--base-color-12);
14
+ --color-a1: var(--base-color-a1);
15
+ --color-a2: var(--base-color-a2);
16
+ --color-a3: var(--base-color-a3);
17
+ --color-a4: var(--base-color-a4);
18
+ --color-a5: var(--base-color-a5);
19
+ --color-a6: var(--base-color-a6);
20
+ --color-a7: var(--base-color-a7);
21
+ --color-a8: var(--base-color-a8);
22
+ --color-a9: var(--base-color-a9);
23
+ --color-a10: var(--base-color-a10);
24
+ --color-a11: var(--base-color-a11);
25
+ --color-a12: var(--base-color-a12);
26
+ --accent-contrast: var(--base-color-contrast);
27
+ --accent-surface: var(--base-color-surface);
28
+ --accent-indicator: var(--base-color-indicator);
29
+ --accent-track: var(--base-color-track);
30
30
  }
package/dist/ui/styles/material.css CHANGED
@@ -4,8 +4,8 @@
4
4
  }
5
5
 
6
6
  :is(.dark, .dark-theme) {
7
- --color-material-solid: var(--gray-2);
8
- --color-material-translucent: var(--gray-a2);
7
+ --color-material-solid: var(--base-color-2);
8
+ --color-material-translucent: var(--base-color-a2);
9
9
  }
10
10
 
11
11
  :where([data-material-background="solid"]) {
package/dist/ui/styles/shadow.css CHANGED
@@ -1,76 +1,76 @@
1
1
  :where(:root) {
2
- --shadow-1: inset 0 0 0 1px var(--gray-a5),
3
- inset 0 1.5px 2px 0 var(--gray-a2),
2
+ --shadow-1: inset 0 0 0 1px var(--base-color-a5),
3
+ inset 0 1.5px 2px 0 var(--base-color-a2),
4
4
  inset 0 1.5px 2px 0 var(--black-a2);
5
- --shadow-2: 0 0 0 1px var(--gray-a3),
5
+ --shadow-2: 0 0 0 1px var(--base-color-a3),
6
6
  0 0 0 .5px var(--black-a1),
7
- 0 1px 1px 0 var(--gray-a2),
7
+ 0 1px 1px 0 var(--base-color-a2),
8
8
  0 2px 1px -1px var(--black-a1),
9
9
  0 1px 3px 0 var(--black-a1);
10
- --shadow-3: 0 0 0 1px var(--gray-a3),
11
- 0 2px 3px -2px var(--gray-a3),
10
+ --shadow-3: 0 0 0 1px var(--base-color-a3),
11
+ 0 2px 3px -2px var(--base-color-a3),
12
12
  0 3px 12px -4px var(--black-a2),
13
13
  0 4px 16px -8px var(--black-a2);
14
- --shadow-4: 0 0 0 1px var(--gray-a3),
14
+ --shadow-4: 0 0 0 1px var(--base-color-a3),
15
15
  0 8px 40px var(--black-a1),
16
- 0 12px 32px -16px var(--gray-a3);
17
- --shadow-5: 0 0 0 1px var(--gray-a3),
16
+ 0 12px 32px -16px var(--base-color-a3);
17
+ --shadow-5: 0 0 0 1px var(--base-color-a3),
18
18
  0 12px 60px var(--black-a3),
19
- 0 12px 32px -16px var(--gray-a5);
20
- --shadow-6: 0 0 0 1px var(--gray-a3),
19
+ 0 12px 32px -16px var(--base-color-a5);
20
+ --shadow-6: 0 0 0 1px var(--base-color-a3),
21
21
  0 12px 60px var(--black-a3),
22
- 0 16px 64px var(--gray-a2),
23
- 0 16px 36px -20px var(--gray-a7);
22
+ 0 16px 64px var(--base-color-a2),
23
+ 0 16px 36px -20px var(--base-color-a7);
24
24
  }
25
25
 
26
26
  @supports (color: color-mix(in oklab, white, black)) {
27
27
  :where(:root) {
28
- --shadow-1: inset 0 0 0 1px var(--gray-a5),
29
- inset 0 1.5px 2px 0 var(--gray-a2),
28
+ --shadow-1: inset 0 0 0 1px var(--base-color-a5),
29
+ inset 0 1.5px 2px 0 var(--base-color-a2),
30
30
  inset 0 1.5px 2px 0 var(--black-a2);
31
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
31
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
32
32
  0 0 0 .5px var(--black-a1),
33
- 0 1px 1px 0 var(--gray-a2),
33
+ 0 1px 1px 0 var(--base-color-a2),
34
34
  0 2px 1px -1px var(--black-a1),
35
35
  0 1px 3px 0 var(--black-a1);
36
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
37
- 0 2px 3px -2px var(--gray-a3),
36
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
37
+ 0 2px 3px -2px var(--base-color-a3),
38
38
  0 3px 12px -4px var(--black-a2),
39
39
  0 4px 16px -8px var(--black-a2);
40
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
40
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
41
41
  0 8px 40px var(--black-a1),
42
- 0 12px 32px -16px var(--gray-a3);
43
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
42
+ 0 12px 32px -16px var(--base-color-a3);
43
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
44
44
  0 12px 60px var(--black-a3),
45
- 0 12px 32px -16px var(--gray-a5);
46
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
45
+ 0 12px 32px -16px var(--base-color-a5);
46
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
47
47
  0 12px 60px var(--black-a3),
48
- 0 16px 64px var(--gray-a2),
49
- 0 16px 36px -20px var(--gray-a7);
48
+ 0 16px 64px var(--base-color-a2),
49
+ 0 16px 36px -20px var(--base-color-a7);
50
50
  }
51
51
  }
52
52
 
53
53
  :is(.dark, .dark-theme) {
54
- --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
55
- inset 0 0 0 1px var(--gray-a3),
54
+ --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
55
+ inset 0 0 0 1px var(--base-color-a3),
56
56
  inset 0 3px 4px 0 var(--black-a5),
57
- inset 0 0 0 1px var(--gray-a4);
58
- --shadow-2: 0 0 0 1px var(--gray-a6),
57
+ inset 0 0 0 1px var(--base-color-a4);
58
+ --shadow-2: 0 0 0 1px var(--base-color-a6),
59
59
  0 0 0 .5px var(--black-a3),
60
60
  0 1px 1px 0 var(--black-a6),
61
61
  0 2px 1px -1px var(--black-a6),
62
62
  0 1px 3px 0 var(--black-a5);
63
- --shadow-3: 0 0 0 1px var(--gray-a6),
63
+ --shadow-3: 0 0 0 1px var(--base-color-a6),
64
64
  0 2px 3px -2px var(--black-a3),
65
65
  0 3px 8px -2px var(--black-a6),
66
66
  0 4px 12px -4px var(--black-a7);
67
- --shadow-4: 0 0 0 1px var(--gray-a6),
67
+ --shadow-4: 0 0 0 1px var(--base-color-a6),
68
68
  0 8px 40px var(--black-a3),
69
69
  0 12px 32px -16px var(--black-a5);
70
- --shadow-5: 0 0 0 1px var(--gray-a6),
70
+ --shadow-5: 0 0 0 1px var(--base-color-a6),
71
71
  0 12px 60px var(--black-a5),
72
72
  0 12px 32px -16px var(--black-a7);
73
- --shadow-6: 0 0 0 1px var(--gray-a6),
73
+ --shadow-6: 0 0 0 1px var(--base-color-a6),
74
74
  0 12px 60px var(--black-a4),
75
75
  0 16px 64px var(--black-a6),
76
76
  0 16px 36px -20px var(--black-a11);
@@ -78,26 +78,26 @@
78
78
 
79
79
  @supports (color: color-mix(in oklab, white, black)) {
80
80
  :is(.dark, .dark-theme) {
81
- --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
82
- inset 0 0 0 1px var(--gray-a3),
81
+ --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
82
+ inset 0 0 0 1px var(--base-color-a3),
83
83
  inset 0 3px 4px 0 var(--black-a5),
84
- inset 0 0 0 1px var(--gray-a4);
85
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
84
+ inset 0 0 0 1px var(--base-color-a4);
85
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
86
86
  0 0 0 .5px var(--black-a3),
87
87
  0 1px 1px 0 var(--black-a6),
88
88
  0 2px 1px -1px var(--black-a6),
89
89
  0 1px 3px 0 var(--black-a5);
90
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
90
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
91
91
  0 2px 3px -2px var(--black-a3),
92
92
  0 3px 8px -2px var(--black-a6),
93
93
  0 4px 12px -4px var(--black-a7);
94
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
94
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
95
95
  0 8px 40px var(--black-a3),
96
96
  0 12px 32px -16px var(--black-a5);
97
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
97
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
98
98
  0 12px 60px var(--black-a5),
99
99
  0 12px 32px -16px var(--black-a7);
100
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
100
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
101
101
  0 12px 60px var(--black-a4),
102
102
  0 16px 64px var(--black-a6),
103
103
  0 16px 36px -20px var(--black-a11);
package/dist/ui/styles/theme.css CHANGED
@@ -73,7 +73,7 @@
73
73
  }
74
74
 
75
75
  :is(.dark, .dark-theme) {
76
- --color-background: var(--gray-1);
76
+ --color-background: var(--base-color-1);
77
77
  --color-overlay: var(--black-a8);
78
78
  --color-surface: #00000040;
79
79
  }
@@ -134,9 +134,9 @@
134
134
  }
135
135
 
136
136
  :root {
137
- color: var(--gray-12);
137
+ color: var(--base-color-12);
138
138
  }
139
139
 
140
- :where([data-has-background="true"]) {
140
+ :where([data-surface="page"]) {
141
141
  background-color: var(--color-background);
142
142
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "elements-kit",
3
3
  "type": "module",
4
- "version": "0.5.2",
4
+ "version": "0.6.1",
5
5
  "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
6
6
  "keywords": [
7
7
  "webcomponents",
@@ -23,10 +23,10 @@
23
23
  "homepage": "https://elements-kit.com/",
24
24
  "repository": {
25
25
  "type": "git",
26
- "url": "git+https://github.com/waelbettayeb/elements-kit.git"
26
+ "url": "git+https://github.com/elements-kit/elements-kit.git"
27
27
  },
28
28
  "bugs": {
29
- "url": "https://github.com/waelbettayeb/elements-kit/issues"
29
+ "url": "https://github.com/elements-kit/elements-kit/issues"
30
30
  },
31
31
  "main": "./dist/index.mjs",
32
32
  "types": "./dist/index.d.mts",
package/dist/ui/styles/colors/gray.css DELETED
@@ -1,30 +0,0 @@
1
- [data-color="gray"] {
2
- --color-1: var(--gray-1);
3
- --color-2: var(--gray-2);
4
- --color-3: var(--gray-3);
5
- --color-4: var(--gray-4);
6
- --color-5: var(--gray-5);
7
- --color-6: var(--gray-6);
8
- --color-7: var(--gray-7);
9
- --color-8: var(--gray-8);
10
- --color-9: var(--gray-9);
11
- --color-10: var(--gray-10);
12
- --color-11: var(--gray-11);
13
- --color-12: var(--gray-12);
14
- --color-a1: var(--gray-a1);
15
- --color-a2: var(--gray-a2);
16
- --color-a3: var(--gray-a3);
17
- --color-a4: var(--gray-a4);
18
- --color-a5: var(--gray-a5);
19
- --color-a6: var(--gray-a6);
20
- --color-a7: var(--gray-a7);
21
- --color-a8: var(--gray-a8);
22
- --color-a9: var(--gray-a9);
23
- --color-a10: var(--gray-a10);
24
- --color-a11: var(--gray-a11);
25
- --color-a12: var(--gray-a12);
26
- --accent-contrast: var(--gray-contrast);
27
- --accent-surface: var(--gray-surface);
28
- --accent-indicator: var(--gray-indicator);
29
- --accent-track: var(--gray-track);
30
- }