@uncinq/component-tokens 1.0.0 → 1.0.2

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.
@@ -6,6 +6,8 @@
6
6
  @layer config {
7
7
  :root {
8
8
  --alert-border-radius: var(--radius-none);
9
+ --alert-border-style: var(--border-style-normal);
10
+ --alert-border-width: var(--border-width-sm);
9
11
  --alert-font-size: var(--font-size-small);
10
12
  --alert-gap: var(--spacing-sm);
11
13
  --alert-margin: 0;
@@ -5,7 +5,6 @@
5
5
  /* components/breadcrumb.css */
6
6
  @layer config {
7
7
  :root {
8
- --breadcrumb-border: var(--breadcrumb-border-width) var(--breadcrumb-border-style) var(--breadcrumb-color-border);
9
8
  --breadcrumb-border-style: var(--border-style-normal);
10
9
  --breadcrumb-border-width: var(--border-width-sm);
11
10
  --breadcrumb-color-border: var(--color-border);
@@ -5,7 +5,6 @@
5
5
  /* components/card.css */
6
6
  @layer config {
7
7
  :root {
8
- --card-border: var(--card-border-width) var(--card-border-style) var(--card-color-border);
9
8
  --card-border-radius: var(--item-border-radius);
10
9
  --card-border-style: var(--item-border-style);
11
10
  --card-border-width: var(--item-border-width);
@@ -26,6 +25,6 @@
26
25
  --card-title-font-size: var(--item-title-font-size);
27
26
  --card-title-font-weight: var(--item-title-font-weight);
28
27
  --card-title-line-height: var(--item-title-line-height);
29
- --card-transition: box-shadow var(--duration-normal) var(--easing-default);
28
+ --card-transition: var(--transition-box-shadow);
30
29
  }
31
30
  }
@@ -5,7 +5,6 @@
5
5
  /* components/embed.css */
6
6
  @layer config {
7
7
  :root {
8
- --embed-border: var(--embed-border-width) var(--embed-border-style) var(--embed-color-border);
9
8
  --embed-border-radius: var(--radius-none);
10
9
  --embed-border-style: var(--border-style-normal);
11
10
  --embed-border-width: var(--border-width-sm);
@@ -22,14 +22,14 @@
22
22
  --item-media-color-background: var(--media-color-background);
23
23
  --item-media-order: -2;
24
24
  --item-media-ratio: var(--media-ratio);
25
- --item-metas-border: var(--border-width-sm) var(--border-style-normal) var(--color-border);
26
25
  --item-metas-border-end: 0;
27
26
  --item-metas-border-start: 0;
28
27
  --item-metas-color-background: var(--item-color-background);
29
28
  --item-metas-font-size: var(--font-size-2xs);
30
29
  --item-metas-order: -1;
31
30
  --item-metas-padding-inline: var(--spacing-card);
32
- --item-metas-padding-block: var(--spacing-card) 0;
31
+ --item-metas-padding-block-start: var(--spacing-card);
32
+ --item-metas-padding-block-end: 0;
33
33
  --item-order: none;
34
34
  --item-padding-inline: var(--spacing-card);
35
35
  --item-padding-block: var(--spacing-card);
@@ -39,6 +39,6 @@
39
39
  --item-title-font-size: var(--font-size-md);
40
40
  --item-title-font-weight: var(--font-weight-heading);
41
41
  --item-title-line-height: var(--line-height-heading);
42
- --item-transition: box-shadow var(--duration-normal) var(--easing-default);
42
+ --item-transition: var(--transition-box-shadow);
43
43
  }
44
44
  }
@@ -1,26 +1,26 @@
1
1
  /* tokens/index.css */
2
- @import 'component/alert.css';
3
- @import 'component/badge.css';
4
- @import 'component/breadcrumb.css';
5
- @import 'component/button.css';
6
- @import 'component/card.css';
7
- @import 'component/container.css';
8
- @import 'component/details.css';
9
- @import 'component/drawer.css';
10
- @import 'component/dropdown.css';
11
- @import 'component/embed.css';
12
- @import 'component/figure.css';
13
- @import 'component/heading.css';
14
- @import 'component/hero.css';
15
- @import 'component/item.css';
16
- @import 'component/items.css';
17
- @import 'component/link.css';
18
- @import 'component/list.css';
19
- @import 'component/logo.css';
20
- @import 'component/map.css';
21
- @import 'component/media.css';
22
- @import 'component/modal.css';
23
- @import 'component/nav.css';
24
- @import 'component/pagination.css';
25
- @import 'component/surtitle.css';
26
- @import 'component/table.css';
2
+ @import 'components/alert.css';
3
+ @import 'components/badge.css';
4
+ @import 'components/breadcrumb.css';
5
+ @import 'components/button.css';
6
+ @import 'components/card.css';
7
+ @import 'components/container.css';
8
+ @import 'components/details.css';
9
+ @import 'components/drawer.css';
10
+ @import 'components/dropdown.css';
11
+ @import 'components/embed.css';
12
+ @import 'components/figure.css';
13
+ @import 'components/heading.css';
14
+ @import 'components/hero.css';
15
+ @import 'components/item.css';
16
+ @import 'components/items.css';
17
+ @import 'components/link.css';
18
+ @import 'components/list.css';
19
+ @import 'components/logo.css';
20
+ @import 'components/map.css';
21
+ @import 'components/media.css';
22
+ @import 'components/modal.css';
23
+ @import 'components/nav.css';
24
+ @import 'components/pagination.css';
25
+ @import 'components/surtitle.css';
26
+ @import 'components/table.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -4,6 +4,14 @@
4
4
  "radius": {
5
5
  "$value": "{radius.none}",
6
6
  "$type": "dimension"
7
+ },
8
+ "style": {
9
+ "$value": "{border.style.normal}",
10
+ "$type": "strokeStyle"
11
+ },
12
+ "width": {
13
+ "$value": "{border.width.sm}",
14
+ "$type": "dimension"
7
15
  }
8
16
  },
9
17
  "fontSize": {
@@ -1,10 +1,6 @@
1
1
  {
2
2
  "breadcrumb": {
3
3
  "border": {
4
- "default": {
5
- "$value": "{breadcrumb.border.width} {breadcrumb.border.style} {breadcrumb.color.border}",
6
- "$type": "string"
7
- },
8
4
  "style": {
9
5
  "$value": "{border.style.normal}",
10
6
  "$type": "strokeStyle"
@@ -1,10 +1,6 @@
1
1
  {
2
2
  "card": {
3
3
  "border": {
4
- "default": {
5
- "$value": "{card.border.width} {card.border.style} {card.color.border}",
6
- "$type": "string"
7
- },
8
4
  "radius": {
9
5
  "$value": "{item.border.radius}",
10
6
  "$type": "dimension"
@@ -101,7 +97,7 @@
101
97
  }
102
98
  },
103
99
  "transition": {
104
- "$value": "box-shadow var(--duration-normal) var(--easing-default)",
100
+ "$value": "{transition.boxShadow}",
105
101
  "$type": "string"
106
102
  }
107
103
  }
@@ -1,10 +1,6 @@
1
1
  {
2
2
  "embed": {
3
3
  "border": {
4
- "default": {
5
- "$value": "{embed.border.width} {embed.border.style} {embed.color.border}",
6
- "$type": "string"
7
- },
8
4
  "radius": {
9
5
  "$value": "{radius.none}",
10
6
  "$type": "dimension"
@@ -88,10 +88,6 @@
88
88
  },
89
89
  "metas": {
90
90
  "border": {
91
- "default": {
92
- "$value": "{border.width.sm} {border.style.normal} {color.border.default}",
93
- "$type": "string"
94
- },
95
91
  "end": {
96
92
  "$value": "0",
97
93
  "$type": "dimension"
@@ -121,8 +117,14 @@
121
117
  "$type": "dimension"
122
118
  },
123
119
  "block": {
124
- "$value": "{spacing.card} 0",
125
- "$type": "string"
120
+ "start": {
121
+ "$value": "{spacing.card}",
122
+ "$type": "dimension"
123
+ },
124
+ "end": {
125
+ "$value": "0",
126
+ "$type": "dimension"
127
+ }
126
128
  }
127
129
  }
128
130
  },
@@ -169,7 +171,7 @@
169
171
  }
170
172
  },
171
173
  "transition": {
172
- "$value": "box-shadow var(--duration-normal) var(--easing-default)",
174
+ "$value": "{transition.boxShadow}",
173
175
  "$type": "string"
174
176
  }
175
177
  }