@uncinq/component-tokens 0.2.0 → 0.3.0
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 +5 -3
- package/package.json +1 -1
- package/tokens/component/alert.css +1 -1
- package/tokens/component/button.css +4 -2
- package/tokens/component/container.css +4 -4
- package/tokens/component/details.css +3 -1
- package/tokens/component/dropdown.css +1 -1
- package/tokens/component/figure.css +1 -1
- package/tokens/component/item.css +11 -1
- package/tokens/component/items.css +3 -2
- package/tokens/component/nav.css +3 -1
- package/tokens/component/pagination.css +8 -1
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);
|
package/package.json
CHANGED
|
@@ -20,13 +20,15 @@
|
|
|
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;
|
|
28
29
|
--btn-color-text-decoration-hover: transparent;
|
|
29
30
|
--btn-text-decoration-line: underline;
|
|
31
|
+
--btn-text-transform: none;
|
|
30
32
|
|
|
31
33
|
/* Transitions */
|
|
32
34
|
--btn-transition: var(--transition-normal);
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
/* Container */
|
|
6
6
|
--container-max-width-mobile: 100%;
|
|
7
|
-
--container-max-width-tablet:
|
|
8
|
-
--container-max-width-tablet-wide:
|
|
9
|
-
--container-max-width-laptop:
|
|
7
|
+
--container-max-width-tablet: 100%;
|
|
8
|
+
--container-max-width-tablet-wide: 100%;
|
|
9
|
+
--container-max-width-laptop: 100%;
|
|
10
10
|
--container-max-width-desktop: var(--size-desktop);
|
|
11
11
|
|
|
12
12
|
/* Grid */
|
|
13
13
|
--columns: 12;
|
|
14
14
|
--gap: var(--spacing-sm);
|
|
15
|
-
--gutter: var(--spacing-md);
|
|
15
|
+
--gutter: var(--spacing-fluid-md);
|
|
16
16
|
--grid-column: var(--grid-column-mobile);
|
|
17
17
|
|
|
18
18
|
/* Grid spans */
|
|
@@ -8,10 +8,12 @@
|
|
|
8
8
|
--details-color-bg: var(--color-bg);
|
|
9
9
|
--details-color-border: var(--color-border);
|
|
10
10
|
--details-color-border-open: var(--color-active);
|
|
11
|
+
--details-color-text: var(--color-text);
|
|
11
12
|
--details-icon: var(--icon-chevron);
|
|
12
|
-
--details-icon-size: var(--size
|
|
13
|
+
--details-icon-size: var(--icon-size);
|
|
13
14
|
--details-margin: var(--spacing-sm);
|
|
14
15
|
--details-padding: var(--spacing-sm);
|
|
16
|
+
--details-summary-font-family: var(--font-family-heading);
|
|
15
17
|
--details-summary-font-size: var(--font-size-md);
|
|
16
18
|
--details-summary-font-weight: var(--font-weight-heading);
|
|
17
19
|
}
|
|
@@ -29,7 +29,17 @@
|
|
|
29
29
|
|
|
30
30
|
/* Spacing */
|
|
31
31
|
--item-gap: var(--spacing-sm);
|
|
32
|
-
--item-padding:
|
|
32
|
+
--item-padding-x: var(--spacing-surface);
|
|
33
|
+
--item-padding-y: var(--spacing-surface);
|
|
34
|
+
|
|
35
|
+
/* Footer */
|
|
36
|
+
--item-footer-color-bg: var(--item-color-bg);
|
|
37
|
+
--item-footer-border-style: var(--border-style-solid);
|
|
38
|
+
--item-footer-border-width: var(--border-width-normal);
|
|
39
|
+
--item-footer-color-border: var(--color-border);
|
|
40
|
+
--item-footer-font-size: var(--font-size-xs);
|
|
41
|
+
--item-footer-padding-x: var(--spacing-surface);
|
|
42
|
+
--item-footer-padding-y: calc(var(--spacing-surface) / 2);
|
|
33
43
|
|
|
34
44
|
/* Media */
|
|
35
45
|
--item-media-color-bg: var(--media-color-bg);
|
package/tokens/component/nav.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@layer config {
|
|
3
3
|
:root {
|
|
4
4
|
/* Layout */
|
|
5
|
-
--pagination-gap:
|
|
5
|
+
--pagination-gap: var(--spacing-2xs);
|
|
6
6
|
|
|
7
7
|
/* Item (page number) */
|
|
8
8
|
--pagination-item-size: 2.25rem;
|
|
@@ -20,5 +20,12 @@
|
|
|
20
20
|
|
|
21
21
|
/* Disabled (nav controls) */
|
|
22
22
|
--pagination-disabled-opacity: var(--opacity-disabled);
|
|
23
|
+
|
|
24
|
+
/* Icons */
|
|
25
|
+
--pagination-icon-size: var(--icon-size);
|
|
26
|
+
--pagination-icon-first: var(--icon-arrow-skip);
|
|
27
|
+
--pagination-icon-last: var(--icon-arrow-skip);
|
|
28
|
+
--pagination-icon-next: var(--icon-arrow);
|
|
29
|
+
--pagination-icon-previous: var(--icon-arrow);
|
|
23
30
|
}
|
|
24
31
|
}
|