@uncinq/component-tokens 0.1.4 → 0.2.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.
package/README.md
CHANGED
|
@@ -57,8 +57,9 @@ All component tokens follow the pattern: `--{component}-{category?}-{property}`
|
|
|
57
57
|
--btn-color-text: var(--color-text-on-brand);
|
|
58
58
|
|
|
59
59
|
/* Spacing */
|
|
60
|
-
--btn-gap:
|
|
61
|
-
--btn-padding: var(--spacing-control);
|
|
60
|
+
--btn-gap: var(--spacing-sm);
|
|
61
|
+
--btn-padding-x: var(--spacing-control);
|
|
62
|
+
--btn-padding-y: var(--spacing-control);
|
|
62
63
|
```
|
|
63
64
|
|
|
64
65
|
### Examples
|
|
@@ -67,7 +68,8 @@ All component tokens follow the pattern: `--{component}-{category?}-{property}`
|
|
|
67
68
|
--btn-color-bg: var(--color-brand);
|
|
68
69
|
--btn-color-text: var(--color-text-on-brand);
|
|
69
70
|
--btn-border-radius: var(--radius-control);
|
|
70
|
-
--btn-padding:
|
|
71
|
+
--btn-padding-x: var(--spacing-control);
|
|
72
|
+
--btn-padding-y: var(--spacing-control);
|
|
71
73
|
|
|
72
74
|
--badge-border-radius: var(--radius-sm);
|
|
73
75
|
--badge-color-bg: var(--color-bg-muted);
|
|
@@ -152,6 +154,7 @@ tokens/
|
|
|
152
154
|
card.css ← card (alias → item tokens)
|
|
153
155
|
container.css ← layout container + grid columns
|
|
154
156
|
details.css ← <details> / accordion
|
|
157
|
+
drawer.css ← off-canvas panel / drawer
|
|
155
158
|
dropdown.css ← dropdown menu
|
|
156
159
|
embed.css ← video / iframe embed wrapper
|
|
157
160
|
figure.css ← <figure> + <figcaption>
|
|
@@ -165,7 +168,6 @@ tokens/
|
|
|
165
168
|
map.css ← embedded map
|
|
166
169
|
media.css ← media object (image + text)
|
|
167
170
|
nav.css ← navigation bar
|
|
168
|
-
offcanvas.css ← off-canvas panel / drawer
|
|
169
171
|
pagination.css ← pagination control
|
|
170
172
|
surtitle.css ← small label above a heading
|
|
171
173
|
table.css ← data table
|
package/package.json
CHANGED
|
@@ -20,8 +20,9 @@
|
|
|
20
20
|
--btn-font-weight: var(--font-weight-control);
|
|
21
21
|
|
|
22
22
|
/* Spacing */
|
|
23
|
-
--btn-gap:
|
|
24
|
-
--btn-padding: var(--spacing-control);
|
|
23
|
+
--btn-gap: var(--spacing-sm);
|
|
24
|
+
--btn-padding-x: var(--spacing-control);
|
|
25
|
+
--btn-padding-y: var(--spacing-control);
|
|
25
26
|
|
|
26
27
|
/* Text decoration */
|
|
27
28
|
--btn-color-text-decoration: transparent;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--details-color-border: var(--color-border);
|
|
10
10
|
--details-color-border-open: var(--color-active);
|
|
11
11
|
--details-icon: var(--icon-chevron);
|
|
12
|
-
--details-icon-size: var(--size
|
|
12
|
+
--details-icon-size: var(--icon-size);
|
|
13
13
|
--details-margin: var(--spacing-sm);
|
|
14
14
|
--details-padding: var(--spacing-sm);
|
|
15
15
|
--details-summary-font-size: var(--font-size-md);
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* tokens/component/drawer.css */
|
|
2
|
+
@layer config {
|
|
3
|
+
:root {
|
|
4
|
+
/* Colors */
|
|
5
|
+
--drawer-color-bg: var(--color-bg-surface);
|
|
6
|
+
--drawer-color-text: var(--color-text-on-surface);
|
|
7
|
+
--drawer-color-border: var(--color-border);
|
|
8
|
+
|
|
9
|
+
/* Backdrop */
|
|
10
|
+
--drawer-backdrop-blur: var(--blur-backdrop);
|
|
11
|
+
--drawer-backdrop-color: var(--color-backdrop);
|
|
12
|
+
|
|
13
|
+
/* Position */
|
|
14
|
+
--drawer-bottom: 0;
|
|
15
|
+
--drawer-end: 0;
|
|
16
|
+
--drawer-start: auto;
|
|
17
|
+
--drawer-top: 0;
|
|
18
|
+
--drawer-translate: translateX(100%);
|
|
19
|
+
|
|
20
|
+
/* Layout */
|
|
21
|
+
--drawer-width: 320px;
|
|
22
|
+
--drawer-height: 50vh;
|
|
23
|
+
--drawer-padding: var(--spacing-surface);
|
|
24
|
+
--drawer-shadow: var(--shadow-surface);
|
|
25
|
+
--drawer-z-index: var(--z-index-drawer);
|
|
26
|
+
|
|
27
|
+
/* Transition — read by JS via getComputedStyle */
|
|
28
|
+
--drawer-transition-duration: var(--duration-slow);
|
|
29
|
+
--drawer-transition-easing: var(--easing-out-expo);
|
|
30
|
+
}
|
|
31
|
+
}
|
package/tokens/index.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@import 'component/card.css';
|
|
7
7
|
@import 'component/container.css';
|
|
8
8
|
@import 'component/details.css';
|
|
9
|
+
@import 'component/drawer.css';
|
|
9
10
|
@import 'component/dropdown.css';
|
|
10
11
|
@import 'component/embed.css';
|
|
11
12
|
@import 'component/figure.css';
|
|
@@ -20,7 +21,6 @@
|
|
|
20
21
|
@import 'component/media.css';
|
|
21
22
|
@import 'component/modal.css';
|
|
22
23
|
@import 'component/nav.css';
|
|
23
|
-
@import 'component/offcanvas.css';
|
|
24
24
|
@import 'component/pagination.css';
|
|
25
25
|
@import 'component/surtitle.css';
|
|
26
26
|
@import 'component/table.css';
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/* tokens/component/offcanvas.css */
|
|
2
|
-
@layer config {
|
|
3
|
-
:root {
|
|
4
|
-
/* Colors */
|
|
5
|
-
--offcanvas-color-bg: var(--color-bg-surface);
|
|
6
|
-
--offcanvas-color-text: var(--color-text-on-surface);
|
|
7
|
-
--offcanvas-color-border: var(--color-border);
|
|
8
|
-
|
|
9
|
-
/* Backdrop */
|
|
10
|
-
--offcanvas-backdrop-blur: var(--blur-backdrop);
|
|
11
|
-
--offcanvas-backdrop-color: var(--color-backdrop);
|
|
12
|
-
|
|
13
|
-
/* Position */
|
|
14
|
-
--offcanvas-bottom: 0;
|
|
15
|
-
--offcanvas-end: 0;
|
|
16
|
-
--offcanvas-start: auto;
|
|
17
|
-
--offcanvas-top: 0;
|
|
18
|
-
--offcanvas-translate: translateX(100%);
|
|
19
|
-
|
|
20
|
-
/* Layout */
|
|
21
|
-
--offcanvas-width: 320px;
|
|
22
|
-
--offcanvas-height: 50vh;
|
|
23
|
-
--offcanvas-padding: var(--spacing-surface);
|
|
24
|
-
--offcanvas-shadow: var(--shadow-surface);
|
|
25
|
-
--offcanvas-z-index: var(--z-index-offcanvas);
|
|
26
|
-
|
|
27
|
-
/* Transition — read by JS via getComputedStyle */
|
|
28
|
-
--offcanvas-transition-duration: var(--duration-slow);
|
|
29
|
-
--offcanvas-transition-easing: var(--easing-out-expo);
|
|
30
|
-
}
|
|
31
|
-
}
|