@uncinq/component-tokens 1.1.8 → 1.1.10

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 (5) hide show
  1. package/dist/css/components/card.css +14 -11
  2. package/dist/css/components/item.css +5 -2
  3. package/package.json +1 -1
  4. package/tokens/components/card.json +23 -11
  5. package/tokens/components/item.json +14 -2
package/dist/css/components/card.css CHANGED
@@ -13,18 +13,21 @@
13
13
  --card-color-text: var(--item-color-text);
14
14
  --card-color-text-muted: var(--item-color-text-muted);
15
15
  --card-gap: var(--item-gap);
16
- --card-media-border-radius: var(--item-border-radius);
17
- --card-media-border-style: var(--item-border-style);
18
- --card-media-border-width: var(--item-border-width);
16
+ --card-media-border-radius: var(--item-media-border-radius);
17
+ --card-media-border-style: var(--item-media-border-style);
18
+ --card-media-border-width: var(--item-media-border-width);
19
19
  --card-media-color-background: var(--item-media-color-background);
20
- --card-media-icon-border-radius: var(--item-media-border-radius);
21
- --card-media-icon-border-style: var(--item-media-border-style);
22
- --card-media-icon-border-width: var(--item-media-border-width);
23
- --card-media-icon-color: var(--item-title-color);
24
- --card-media-icon-color-background: var(--item-media-color-background);
25
- --card-media-icon-margin-inline: var(--item-padding-inline);
26
- --card-media-icon-margin-block: var(--item-padding-block);
27
- --card-media-icon-size: var(--font-size-fluid-md);
20
+ --card-media-icon-align: var(--item-media-icon-align);
21
+ --card-media-icon-border-radius: var(--item-media-icon-border-radius);
22
+ --card-media-icon-border-style: var(--item-media-icon-border-style);
23
+ --card-media-icon-border-width: var(--item-media-icon-border-width);
24
+ --card-media-icon-color: var(--item-media-icon-color);
25
+ --card-media-icon-color-background: var(--item-media-icon-color-background);
26
+ --card-media-icon-margin-inline: var(--item-media-icon-margin-inline);
27
+ --card-media-icon-margin-block: var(--item-media-icon-margin-block);
28
+ --card-media-icon-ratio: var(--item-media-icon-ratio);
29
+ --card-media-icon-size: var(--item-media-icon-size);
30
+ --card-media-icon-width: var(--item-media-icon-width);
28
31
  --card-media-order: var(--item-media-order);
29
32
  --card-media-ratio: var(--item-media-ratio);
30
33
  --card-order: var(--item-order);
package/dist/css/components/item.css CHANGED
@@ -18,18 +18,21 @@
18
18
  --item-color-border: var(--color-border);
19
19
  --item-color-text: var(--color-text-muted);
20
20
  --item-gap: var(--spacing-sm);
21
- --item-media-border-radius: var(--item-border-radius);
21
+ --item-media-border-radius: var(--radius-none);
22
22
  --item-media-border-style: var(--item-border-style);
23
23
  --item-media-border-width: var(--item-border-width);
24
24
  --item-media-color-background: var(--media-color-background);
25
+ --item-media-icon-align: start;
25
26
  --item-media-icon-border-radius: var(--item-media-border-radius);
26
27
  --item-media-icon-border-style: var(--item-media-border-style);
27
28
  --item-media-icon-border-width: var(--item-media-border-width);
28
29
  --item-media-icon-color: var(--item-title-color);
29
- --item-media-icon-color-background: var(--item-media-color-background);
30
+ --item-media-icon-color-background: transparent;
30
31
  --item-media-icon-margin-inline: var(--item-padding-inline);
31
32
  --item-media-icon-margin-block: var(--item-padding-block);
33
+ --item-media-icon-ratio: var(--ratio-square);
32
34
  --item-media-icon-size: var(--font-size-fluid-md);
35
+ --item-media-icon-width: var(--size-40);
33
36
  --item-media-order: -2;
34
37
  --item-media-ratio: var(--media-ratio);
35
38
  --item-metas-border-end: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "1.1.8",
3
+ "version": "1.1.10",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/components/card.json CHANGED
@@ -41,15 +41,15 @@
41
41
  "media": {
42
42
  "border": {
43
43
  "radius": {
44
- "$value": "{item.border.radius}",
44
+ "$value": "{item.media.border.radius}",
45
45
  "$type": "dimension"
46
46
  },
47
47
  "style": {
48
- "$value": "{item.border.style}",
48
+ "$value": "{item.media.border.style}",
49
49
  "$type": "strokeStyle"
50
50
  },
51
51
  "width": {
52
- "$value": "{item.border.width}",
52
+ "$value": "{item.media.border.width}",
53
53
  "$type": "dimension"
54
54
  }
55
55
  },
@@ -60,42 +60,54 @@
60
60
  }
61
61
  },
62
62
  "icon": {
63
+ "align": {
64
+ "$value": "{item.media.icon.align}",
65
+ "$type": "string"
66
+ },
63
67
  "border": {
64
68
  "radius": {
65
- "$value": "{item.media.border.radius}",
69
+ "$value": "{item.media.icon.border.radius}",
66
70
  "$type": "dimension"
67
71
  },
68
72
  "style": {
69
- "$value": "{item.media.border.style}",
73
+ "$value": "{item.media.icon.border.style}",
70
74
  "$type": "strokeStyle"
71
75
  },
72
76
  "width": {
73
- "$value": "{item.media.border.width}",
77
+ "$value": "{item.media.icon.border.width}",
74
78
  "$type": "dimension"
75
79
  }
76
80
  },
77
81
  "color": {
78
82
  "default": {
79
- "$value": "{item.title.color}",
83
+ "$value": "{item.media.icon.color.default}",
80
84
  "$type": "color"
81
85
  },
82
86
  "background": {
83
- "$value": "{item.media.color.background}",
87
+ "$value": "{item.media.icon.color.background}",
84
88
  "$type": "color"
85
89
  }
86
90
  },
87
91
  "margin": {
88
92
  "inline": {
89
- "$value": "{item.padding.inline}",
93
+ "$value": "{item.media.icon.margin.inline}",
90
94
  "$type": "dimension"
91
95
  },
92
96
  "block": {
93
- "$value": "{item.padding.block}",
97
+ "$value": "{item.media.icon.margin.block}",
94
98
  "$type": "dimension"
95
99
  }
96
100
  },
101
+ "ratio": {
102
+ "$value": "{item.media.icon.ratio}",
103
+ "$type": "string"
104
+ },
97
105
  "size": {
98
- "$value": "{fontSize.fluid.md}",
106
+ "$value": "{item.media.icon.size}",
107
+ "$type": "dimension"
108
+ },
109
+ "width": {
110
+ "$value": "{item.media.icon.width}",
99
111
  "$type": "dimension"
100
112
  }
101
113
  },
package/tokens/components/item.json CHANGED
@@ -69,7 +69,7 @@
69
69
  "media": {
70
70
  "border": {
71
71
  "radius": {
72
- "$value": "{item.border.radius}",
72
+ "$value": "{radius.none}",
73
73
  "$type": "dimension"
74
74
  },
75
75
  "style": {
@@ -88,6 +88,10 @@
88
88
  }
89
89
  },
90
90
  "icon": {
91
+ "align": {
92
+ "$value": "start",
93
+ "$type": "string"
94
+ },
91
95
  "border": {
92
96
  "radius": {
93
97
  "$value": "{item.media.border.radius}",
@@ -108,7 +112,7 @@
108
112
  "$type": "color"
109
113
  },
110
114
  "background": {
111
- "$value": "{item.media.color.background}",
115
+ "$value": "transparent",
112
116
  "$type": "color"
113
117
  }
114
118
  },
@@ -122,9 +126,17 @@
122
126
  "$type": "dimension"
123
127
  }
124
128
  },
129
+ "ratio": {
130
+ "$value": "{ratio.square}",
131
+ "$type": "string"
132
+ },
125
133
  "size": {
126
134
  "$value": "{fontSize.fluid.md}",
127
135
  "$type": "dimension"
136
+ },
137
+ "width": {
138
+ "$value": "{size.40}",
139
+ "$type": "dimension"
128
140
  }
129
141
  },
130
142
  "order": {