@1001-digital/layers.base 0.0.5 → 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.
@@ -28,18 +28,20 @@ const dismiss = () => {
28
28
  </script>
29
29
 
30
30
  <style>
31
- :root {
32
- --alert-color: var(--color);
33
- --alert-background-color: transparent;
34
- --alert-border-color: var(--border-color);
31
+ @layer components {
32
+ :root {
33
+ --alert-color: var(--color);
34
+ --alert-background-color: transparent;
35
+ --alert-border-color: var(--border-color);
35
36
 
36
- --alert-info-color: var(--alert-color);
37
- --alert-info-background-color: var(--alert-background-color);
38
- --alert-info-border-color: var(--alert-border-color);
37
+ --alert-info-color: var(--alert-color);
38
+ --alert-info-background-color: var(--alert-background-color);
39
+ --alert-info-border-color: var(--alert-border-color);
39
40
 
40
- --alert-error-color: var(--error);
41
- --alert-error-background-color: color-mix(in srgb, var(--error) 10%, transparent);
42
- --alert-error-border-color: var(--error);
41
+ --alert-error-color: var(--error);
42
+ --alert-error-background-color: color-mix(in srgb, var(--error) 10%, transparent);
43
+ --alert-error-border-color: var(--error);
44
+ }
43
45
  }
44
46
  </style>
45
47
 
@@ -20,23 +20,25 @@ withDefaults(defineProps<{
20
20
  </script>
21
21
 
22
22
  <style>
23
- :root {
24
- --button-border-radius: var(--border-radius);
25
- --button-background: var(--background);
26
- --button-background-highlight: var(--gray-z-1);
27
- --button-border-color-highlight: var(--gray-z-3);
28
- --button-color: var(--color);
29
- --button-color-highlight: var(--color);
30
- --button-icon-color: var(--muted);
31
- --button-icon-color-highlight: var(--color);
32
-
33
- /* Primary Button Styles */
34
- --button-primary-background: var(--gray-z-10);
35
- --button-primary-border-color: var(--gray-z-8);
36
- --button-primary-color: var(--gray-z-0);
37
- --button-primary-background-highlight: var(--gray-z-8);
38
- --button-primary-border-color-highlight: var(--gray-z-6);
39
- --button-primary-color-highlight: var(--gray-z-0);
23
+ @layer components {
24
+ :root {
25
+ --button-border-radius: var(--border-radius);
26
+ --button-background: var(--background);
27
+ --button-background-highlight: var(--gray-z-1);
28
+ --button-border-color-highlight: var(--gray-z-3);
29
+ --button-color: var(--color);
30
+ --button-color-highlight: var(--color);
31
+ --button-icon-color: var(--muted);
32
+ --button-icon-color-highlight: var(--color);
33
+
34
+ /* Primary Button Styles */
35
+ --button-primary-background: var(--gray-z-10);
36
+ --button-primary-border-color: var(--gray-z-8);
37
+ --button-primary-color: var(--gray-z-0);
38
+ --button-primary-background-highlight: var(--gray-z-8);
39
+ --button-primary-border-color-highlight: var(--gray-z-6);
40
+ --button-primary-color-highlight: var(--gray-z-0);
41
+ }
40
42
  }
41
43
  </style>
42
44
 
@@ -5,12 +5,14 @@
5
5
  </template>
6
6
 
7
7
  <style>
8
- :root {
9
- --card-border-radius: var(--border-radius);
10
- --card-border: var(--border);
11
- --card-background: var(--background);
12
- --card-background-highlight: var(--gray-z-1);
13
- --card-border-color-highlight: var(--gray-z-3);
8
+ @layer components {
9
+ :root {
10
+ --card-border-radius: var(--border-radius);
11
+ --card-border: var(--border);
12
+ --card-background: var(--background);
13
+ --card-background-highlight: var(--gray-z-1);
14
+ --card-border-color-highlight: var(--gray-z-3);
15
+ }
14
16
  }
15
17
  </style>
16
18
 
@@ -88,12 +88,14 @@ watchEffect(() => (open.value ? show() : hide()))
88
88
  </script>
89
89
 
90
90
  <style>
91
- :root {
92
- --dialog-initial-x-offset: 0;
93
- --dialog-initial-y-offset: var(--spacer);
94
- --dialog-x-offset: 0;
95
- --dialog-y-offset: 0;
96
- --backdrop-background-color: transparent;
91
+ @layer components {
92
+ :root {
93
+ --dialog-initial-x-offset: 0;
94
+ --dialog-initial-y-offset: var(--spacer);
95
+ --dialog-x-offset: 0;
96
+ --dialog-y-offset: 0;
97
+ --backdrop-background-color: transparent;
98
+ }
97
99
  }
98
100
 
99
101
  .dialog {
@@ -11,9 +11,11 @@
11
11
  </template>
12
12
 
13
13
  <style>
14
- :root {
15
- --form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
16
- --form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
14
+ @layer components {
15
+ :root {
16
+ --form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
17
+ --form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
18
+ }
17
19
  }
18
20
  </style>
19
21
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@1001-digital/layers.base",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "main": "./nuxt.config.ts",
6
6
  "devDependencies": {
7
7
  "@iconify-json/lucide": "^1.2.81",
@@ -18,7 +18,7 @@
18
18
  "@types/luxon": "^3.6.2",
19
19
  "luxon": "^3.6.1",
20
20
  "modern-normalize": "^3.0.1",
21
- "reka-ui": "^2.6.1"
21
+ "reka-ui": "^2.7.0"
22
22
  },
23
23
  "scripts": {
24
24
  "dev": "nuxi dev .playground",