@uncinq/component-tokens 1.1.7 → 1.1.9

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