@uncinq/component-tokens 0.3.0 → 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 (12) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/tokens/component/breadcrumb.css +11 -2
  4. package/tokens/component/button.css +23 -5
  5. package/tokens/component/card.css +10 -7
  6. package/tokens/component/details.css +2 -2
  7. package/tokens/component/dropdown.css +2 -1
  8. package/tokens/component/embed.css +11 -3
  9. package/tokens/component/item.css +17 -13
  10. package/tokens/component/items.css +4 -3
  11. package/tokens/component/link.css +1 -0
  12. 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.3.0",
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/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
 
@@ -31,6 +31,24 @@
31
31
  --btn-text-transform: none;
32
32
 
33
33
  /* Transitions */
34
- --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);
35
53
  }
36
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/details.css CHANGED
@@ -4,10 +4,10 @@
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
11
  --details-color-text: var(--color-text);
12
12
  --details-icon: var(--icon-chevron);
13
13
  --details-icon-size: var(--icon-size);
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/item.css CHANGED
@@ -27,28 +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-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);
32
+ --item-order: none;
33
+ --item-padding-x: var(--spacing-card);
34
+ --item-padding-y: var(--spacing-card);
43
35
 
44
36
  /* Media */
45
37
  --item-media-color-bg: var(--media-color-bg);
38
+ --item-media-order: -2;
46
39
  --item-media-ratio: var(--media-ratio);
47
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
+
48
51
  /* Shadow */
49
52
  --item-shadow: var(--shadow-sm);
50
53
  --item-shadow-hover: var(--shadow-md);
51
54
 
52
- --item-transition: box-shadow var(--duration-normal) var(--easing-default)
55
+ /* Transition */
56
+ --item-transition: box-shadow var(--duration-normal) var(--easing-default);
53
57
  }
54
58
  }
package/tokens/component/items.css CHANGED
@@ -1,8 +1,9 @@
1
1
  /* tokens/component/items.css */
2
2
  @layer config {
3
3
  :root {
4
- --items-cols: 1;
5
- --items-gap: var(--gap);
6
- --items-margin-nav: var(--spacing-fluid-md);
4
+ --items-cols: auto-fill;
5
+ --items-gap: var(--gap);
6
+ --items-max-width: 100%;
7
+ --items-min-width: 30ch;
7
8
  }
8
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/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
  }