@uncinq/component-tokens 0.2.1 → 0.4.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.
Files changed (17) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/tokens/component/alert.css +1 -1
  4. package/tokens/component/breadcrumb.css +11 -2
  5. package/tokens/component/button.css +24 -5
  6. package/tokens/component/card.css +10 -7
  7. package/tokens/component/container.css +4 -4
  8. package/tokens/component/details.css +4 -2
  9. package/tokens/component/dropdown.css +2 -1
  10. package/tokens/component/embed.css +11 -3
  11. package/tokens/component/figure.css +1 -1
  12. package/tokens/component/item.css +17 -3
  13. package/tokens/component/items.css +4 -2
  14. package/tokens/component/link.css +1 -0
  15. package/tokens/component/nav.css +3 -1
  16. package/tokens/component/pagination.css +8 -1
  17. package/tokens/component/surtitle.css +1 -0
package/README.md CHANGED
@@ -57,7 +57,7 @@ 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: var(--spacing-sm);
60
+ --btn-gap: var(--spacing-xs);
61
61
  --btn-padding-x: var(--spacing-control);
62
62
  --btn-padding-y: var(--spacing-control);
63
63
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "0.2.1",
3
+ "version": "0.4.0",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/component/alert.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @layer config {
3
3
  :root {
4
4
  --alert-border-radius: var(--radius-none);
5
- --alert-font-size: var(--font-size-text);
5
+ --alert-font-size: var(--font-size-small);
6
6
  --alert-gap: var(--spacing-sm);
7
7
  --alert-margin: 0;
8
8
  --alert-padding: var(--spacing-sm);
package/tokens/component/breadcrumb.css CHANGED
@@ -1,14 +1,23 @@
1
1
  /* tokens/component/breadcrumb.css */
2
2
  @layer config {
3
3
  :root {
4
- --breadcrumb-color-border: var(--color-border);
4
+ /* Border */
5
+ --breadcrumb-border: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
6
+ --breadcrumb-border-style: var(--border-style-solid);
5
7
  --breadcrumb-border-width: var(--border-width-normal);
8
+ --breadcrumb-color-border: var(--color-border);
9
+
10
+ /* Text */
6
11
  --breadcrumb-color-text: var(--color-text-muted);
7
12
  --breadcrumb-color-text-active: var(--color-text);
8
13
  --breadcrumb-color-separator: var(--color-text-muted);
9
14
  --breadcrumb-font-size: var(--font-size-xs);
15
+
16
+ /* Spacing */
10
17
  --breadcrumb-gap: var(--spacing-xs);
11
- --breadcrumb-separator: "/";
12
18
  --breadcrumb-padding: var(--spacing-xs);
19
+
20
+ /* Visual */
21
+ --breadcrumb-separator: "/";
13
22
  }
14
23
  }
package/tokens/component/button.css CHANGED
@@ -15,12 +15,12 @@
15
15
  --btn-color-text: var(--color-text-on-brand);
16
16
  --btn-color-text-hover: var(--color-text-on-brand);
17
17
 
18
- /* Typography */
19
- --btn-font-size: var(--font-size-sm);
20
- --btn-font-weight: var(--font-weight-control);
18
+ /* Shadow */
19
+ --btn-shadow: var(--shadow-control);
20
+ --btn-shadow-hover: var(--shadow-control-hover);
21
21
 
22
22
  /* Spacing */
23
- --btn-gap: var(--spacing-sm);
23
+ --btn-gap: var(--spacing-xs);
24
24
  --btn-padding-x: var(--spacing-control);
25
25
  --btn-padding-y: var(--spacing-control);
26
26
 
@@ -28,8 +28,27 @@
28
28
  --btn-color-text-decoration: transparent;
29
29
  --btn-color-text-decoration-hover: transparent;
30
30
  --btn-text-decoration-line: underline;
31
+ --btn-text-transform: none;
31
32
 
32
33
  /* Transitions */
33
- --btn-transition: var(--transition-normal);
34
+ --btn-transition: var(--transition-color);
35
+
36
+ /* Typography */
37
+ --btn-font-size: var(--font-size-sm);
38
+ --btn-font-weight: var(--font-weight-control);
39
+ }
40
+ }
41
+
42
+ /* Control buttons — icon-only UI controls: btn-menu, btn-close, btn-search.
43
+ * Transparent by default. Use --btn-menu-*, --btn-close-*, --btn-search-*
44
+ * at project level to customise per-button. */
45
+ @layer config {
46
+ :root {
47
+ --btn-control-color-bg: var(--color-bg-muted);
48
+ --btn-control-color-bg-hover: var(--color-bg-muted-hover);
49
+ --btn-control-color-border: transparent;
50
+ --btn-control-color-border-hover: transparent;
51
+ --btn-control-color-text: var(--color-text);
52
+ --btn-control-color-text-hover: var(--color-text);
34
53
  }
35
54
  }
package/tokens/component/card.css CHANGED
@@ -4,15 +4,11 @@
4
4
  :root {
5
5
 
6
6
  /* Border */
7
+ --card-border: var(--card-border-width) var(--card-border-style) var(--card-color-border);
7
8
  --card-border-radius: var(--item-border-radius);
8
9
  --card-border-style: var(--item-border-style);
9
10
  --card-border-width: var(--item-border-width);
10
11
 
11
- /* Button */
12
- --card-btn-color-bg: var(--item-btn-color-bg);
13
- --card-btn-border-width: var(--item-btn-border-width);
14
- --card-btn-color-text: var(--item-btn-color-text);
15
-
16
12
  /* Color */
17
13
  --card-color-bg: var(--item-color-bg);
18
14
  --card-color-border: var(--item-color-border);
@@ -25,15 +21,22 @@
25
21
  --card-font-weight-title: var(--item-font-weight-title);
26
22
  --card-line-height-title: var(--item-line-height-title);
27
23
 
28
- /* Spacing */
24
+ /* Content */
29
25
  --card-gap: var(--item-gap);
30
- --card-padding: var(--item-padding);
26
+ --card-order: var(--item-order);
27
+ --card-padding-x: var(--item-padding-x);
28
+ --card-padding-y: var(--item-padding-y);
31
29
 
32
30
  /* Media */
33
31
  --card-media-color-bg: var(--item-media-color-bg);
32
+ --card-media-order: var(--item-media-order);
34
33
  --card-media-ratio: var(--item-media-ratio);
35
34
 
36
35
  /* Shadow */
37
36
  --card-shadow: var(--item-shadow);
37
+ --card-shadow-hover: var(--item-shadow-hover);
38
+
39
+ /* Transition */
40
+ --item-transition: box-shadow var(--duration-normal) var(--easing-default);
38
41
  }
39
42
  }
package/tokens/component/container.css CHANGED
@@ -4,15 +4,15 @@
4
4
 
5
5
  /* Container */
6
6
  --container-max-width-mobile: 100%;
7
- --container-max-width-tablet: var(--size-tablet);
8
- --container-max-width-tablet-wide: var(--size-tablet-wide);
9
- --container-max-width-laptop: var(--size-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 */
package/tokens/component/details.css CHANGED
@@ -4,14 +4,16 @@
4
4
  --details-border: var(--border-width-normal) var(--border-style-solid) var(--details-color-border);
5
5
  --details-border-radius: var(--radius-surface);
6
6
  --details-box-shadow: var(--shadow-sm);
7
- --details-box-shadow-hover: var(--shadow-center-md);
7
+ --details-box-shadow-hover: var(--shadow-md);
8
8
  --details-color-bg: var(--color-bg);
9
9
  --details-color-border: var(--color-border);
10
- --details-color-border-open: var(--color-active);
10
+ --details-color-border-open: var(--color-border-hover);
11
+ --details-color-text: var(--color-text);
11
12
  --details-icon: var(--icon-chevron);
12
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
  }
package/tokens/component/dropdown.css CHANGED
@@ -23,7 +23,8 @@
23
23
  --dropdown-item-color-bg-hover: var(--color-bg-muted);
24
24
  --dropdown-item-border-radius: var(--radius-xs);
25
25
  --dropdown-item-font-size: var(--font-size-xs);
26
- --dropdown-item-padding: var(--spacing-2xs);
26
+ --dropdown-item-padding-x: var(--spacing-2xs);
27
+ --dropdown-item-padding-y: var(--spacing-2xs);
27
28
 
28
29
  /* Icon */
29
30
  --dropdown-icon: var(--icon-chevron);
package/tokens/component/embed.css CHANGED
@@ -1,12 +1,20 @@
1
1
  /* tokens/component/embed.css */
2
2
  @layer config {
3
3
  :root {
4
- --embed-ratio: var(--ratio-16-9);
4
+ /* Border */
5
+ --embed-border: var(--embed-border-width) var(--embed-border-style) var(--embed-color-border);
6
+ --embed-border-width: var(--border-width-normal);
7
+ --embed-border-style: var(--border-style-solid);
5
8
  --embed-color-border: var(--color-border);
9
+
10
+ /* Ratio */
11
+ --embed-ratio: var(--ratio-16-9);
12
+
13
+ /* Visual */
6
14
  --embed-border-radius: var(--radius-none);
7
- --embed-border-style: var(--border-style-solid);
8
- --embed-border-width: 0;
9
15
  --embed-box-shadow: none;
16
+
17
+ /* Layout */
10
18
  --embed-max-width: 100%;
11
19
  }
12
20
  }
package/tokens/component/figure.css CHANGED
@@ -3,7 +3,7 @@
3
3
  :root {
4
4
  --figure-gap: var(--spacing-xs);
5
5
  --figure-figcaption-gap: var(--spacing-xs);
6
- --figure-figcaption-font-size: var(--font-size-xs);
6
+ --figure-figcaption-font-size: var(--font-size-small);
7
7
  --figure-margin-block: var(--spacing-md);
8
8
  }
9
9
  }
package/tokens/component/item.css CHANGED
@@ -27,18 +27,32 @@
27
27
  --item-font-weight-title: var(--font-weight-heading);
28
28
  --item-line-height-title: var(--line-height-heading);
29
29
 
30
- /* Spacing */
30
+ /* Content */
31
31
  --item-gap: var(--spacing-sm);
32
- --item-padding: var(--spacing-surface);
32
+ --item-order: none;
33
+ --item-padding-x: var(--spacing-card);
34
+ --item-padding-y: var(--spacing-card);
33
35
 
34
36
  /* Media */
35
37
  --item-media-color-bg: var(--media-color-bg);
38
+ --item-media-order: -2;
36
39
  --item-media-ratio: var(--media-ratio);
37
40
 
41
+ /* Metas */
42
+ --item-metas-color-bg: var(--item-color-bg);
43
+ --item-metas-border: var(--border-width-normal) var(--border-style-solid) var(--color-border);
44
+ --item-metas-border-end: 0;
45
+ --item-metas-border-start: 0;
46
+ --item-metas-font-size: var(--font-size-2xs);
47
+ --item-metas-order: -1;
48
+ --item-metas-padding-x: var(--spacing-card);
49
+ --item-metas-padding-y: var(--spacing-card) 0;
50
+
38
51
  /* Shadow */
39
52
  --item-shadow: var(--shadow-sm);
40
53
  --item-shadow-hover: var(--shadow-md);
41
54
 
42
- --item-transition: box-shadow var(--duration-normal) var(--easing-default)
55
+ /* Transition */
56
+ --item-transition: box-shadow var(--duration-normal) var(--easing-default);
43
57
  }
44
58
  }
package/tokens/component/items.css CHANGED
@@ -1,7 +1,9 @@
1
1
  /* tokens/component/items.css */
2
2
  @layer config {
3
3
  :root {
4
- --items-cols: 1;
5
- --items-gap: var(--gap);
4
+ --items-cols: auto-fill;
5
+ --items-gap: var(--gap);
6
+ --items-max-width: 100%;
7
+ --items-min-width: 30ch;
6
8
  }
7
9
  }
package/tokens/component/link.css CHANGED
@@ -4,5 +4,6 @@
4
4
  --link-color-text-decoration: initial;
5
5
  --link-color-text-decoration-hover: transparent;
6
6
  --link-text-decoration-line: underline;
7
+ --link-transition: var( --transition-color) ;
7
8
  }
8
9
  }
package/tokens/component/nav.css CHANGED
@@ -8,7 +8,9 @@
8
8
  --nav-color-text-muted: var(--color-text-muted);
9
9
 
10
10
  /* Layout */
11
- --nav-gap: 0px;
11
+ --nav-gap: 0;
12
+ --nav-margin-x: 0;
13
+ --nav-margin-y: 0;
12
14
  --nav-padding-x: var(--spacing-xs);
13
15
  --nav-padding-y: var(--spacing-xs);
14
16
 
package/tokens/component/pagination.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @layer config {
3
3
  :root {
4
4
  /* Layout */
5
- --pagination-gap: var(--spacing-3xs);
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
  }
package/tokens/component/surtitle.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --surtitle-font-weight: var(--font-weight-bold);
11
11
  --surtitle-letter-spacing: var(--letter-spacing-large);
12
12
  --surtitle-line-height: var(--line-height-normal);
13
+ --surtitle-margin-block: 0 var(--spacing-2xs);
13
14
  --surtitle-padding: 0;
14
15
  --surtitle-text-transform: uppercase;
15
16
  }