native-document 1.0.201 → 1.0.202

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/ui/components/drawer/drawer.css +17 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "native-document",
3
- "version": "1.0.201",
3
+ "version": "1.0.202",
4
4
  "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
5
5
  "author": "AfroCodeur <https://github.com/afrocodeur>",
6
6
  "license": "MIT",
package/src/ui/components/drawer/drawer.css CHANGED
@@ -1,6 +1,16 @@
1
+ :root {
2
+ --drawer-z-index: 1000;
3
+ --drawer-background-color: white;
4
+ --drawer-width: 400px;
5
+ --drawer-backdrop-color: rgba(0, 0, 0, var(--opacity-backdrop));
6
+ --drawer-panel-backdrop-color: hsl(from var(--gray-lite-1) h s l / .5);
7
+ --drawer-panel-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
8
+ --drawer-panel-body-background: #F9F9F9;
9
+ }
10
+
1
11
  .drawer-container {
2
12
  position: fixed;
3
- z-index: 1000;
13
+ z-index: var(--drawer-z-index);
4
14
  display: none;
5
15
  inset: 0;
6
16
  pointer-events: none
@@ -16,7 +26,7 @@
16
26
  .drawer-backdrop {
17
27
  position: absolute;
18
28
  inset: 0;
19
- background: rgba(0, 0, 0, var(--opacity-backdrop));
29
+ background: var(--drawer-backdrop-color);
20
30
  transition: opacity 0.25s ease;
21
31
  }
22
32
 
@@ -29,9 +39,9 @@
29
39
  max-width: 100%;
30
40
  max-height: 100%;
31
41
  display: flex;
32
- width: 450px;
42
+ width: var(--drawer-width);
33
43
  border-radius: var(--radius-large);
34
- background: hsl(from var(--gray-lite-1) h s l / .5);
44
+ background: var(--drawer-panel-backdrop-color);
35
45
  margin: var(--space-cozy)
36
46
  }
37
47
 
@@ -40,10 +50,10 @@
40
50
  justify-content: space-between;
41
51
  flex: 1;
42
52
  display: flex;
43
- background: var(--gray-lite-4);
53
+ background: var(--drawer-background-color);
44
54
  border-radius: var(--radius-large);
45
55
  margin: var(--space-cozy);
46
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
56
+ box-shadow: var(--drawer-panel-shadow);
47
57
  }
48
58
 
49
59
 
@@ -164,7 +174,7 @@
164
174
  flex: 1;
165
175
  overflow-y: auto;
166
176
  padding: 20px;
167
- background: var(--gray-lite-3);
177
+ background: var(--drawer-panel-body-background);
168
178
  margin: var(--space-cozy);
169
179
  border-radius: var(--radius-large);
170
180
  }