@uncinq/component-tokens 1.6.2 → 1.6.4

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 (9) hide show
  1. package/dist/css/components/button.css +1 -1
  2. package/dist/css/components/drawer.css +4 -1
  3. package/dist/css/components/dropdown.css +2 -2
  4. package/dist/css/components/modal.css +8 -2
  5. package/package.json +1 -1
  6. package/tokens/components/button.json +1 -1
  7. package/tokens/components/drawer.json +18 -2
  8. package/tokens/components/dropdown.json +2 -2
  9. package/tokens/components/modal.json +51 -22
package/dist/css/components/button.css CHANGED
@@ -22,7 +22,7 @@
22
22
  --btn-control-color-border-hover: transparent;
23
23
  --btn-control-color-text: var(--color-text);
24
24
  --btn-control-color-text-hover: var(--color-text);
25
- --btn-font-size: var(--font-size-sm);
25
+ --btn-font-size: var(--font-size-fluid-sm);
26
26
  --btn-font-weight: var(--font-weight-control);
27
27
  --btn-gap: var(--spacing-xs);
28
28
  --btn-line-height: var(--line-height-snug);
package/dist/css/components/drawer.css CHANGED
@@ -7,13 +7,16 @@
7
7
  :root {
8
8
  --drawer-backdrop-blur: var(--blur-backdrop);
9
9
  --drawer-backdrop-color: var(--color-backdrop);
10
+ --drawer-border-style: var(--border-style-normal);
11
+ --drawer-border-width: var(--border-width-sm);
10
12
  --drawer-bottom: 0;
11
13
  --drawer-color-background: var(--color-background-surface);
12
14
  --drawer-color-border: var(--color-border);
13
15
  --drawer-color-text: var(--color-text-on-surface);
14
16
  --drawer-end: 0;
15
17
  --drawer-height: 50vh;
16
- --drawer-padding: var(--spacing-surface);
18
+ --drawer-padding-block: var(--spacing-surface);
19
+ --drawer-padding-inline: var(--spacing-surface);
17
20
  --drawer-shadow: var(--shadow-surface);
18
21
  --drawer-start: auto;
19
22
  --drawer-top: 0;
package/dist/css/components/dropdown.css CHANGED
@@ -17,8 +17,8 @@
17
17
  --dropdown-item-color-background: var(--color-background);
18
18
  --dropdown-item-color-background-hover: var(--color-background-muted);
19
19
  --dropdown-item-font-size: var(--font-size-xs);
20
- --dropdown-item-padding-inline: var(--spacing-2xs);
21
- --dropdown-item-padding-block: var(--spacing-2xs);
20
+ --dropdown-item-padding-inline: var(--spacing-xs);
21
+ --dropdown-item-padding-block: var(--spacing-xs);
22
22
  --dropdown-min-width: 12rem;
23
23
  --dropdown-padding: var(--size-4);
24
24
  --dropdown-shadow: var(--shadow-sm);
package/dist/css/components/modal.css CHANGED
@@ -7,16 +7,22 @@
7
7
  :root {
8
8
  --modal-backdrop-blur: var(--blur-backdrop);
9
9
  --modal-backdrop-color: var(--color-backdrop);
10
+ --modal-border-style: var(--border-style-normal);
11
+ --modal-border-width: var(--border-width-sm);
10
12
  --modal-color-background: var(--color-background-surface);
11
13
  --modal-color-border: var(--color-border);
12
14
  --modal-color-text: var(--color-text-on-surface);
13
- --modal-max-height: none;
15
+ --modal-margin: var(--spacing-sm);
16
+ --modal-max-height: 100dvh;
14
17
  --modal-max-width: 30rem;
15
- --modal-padding: var(--spacing-surface);
18
+ --modal-min-height: 0;
19
+ --modal-padding-block: var(--spacing-surface);
20
+ --modal-padding-inline: var(--spacing-surface);
16
21
  --modal-radius: var(--radius-surface);
17
22
  --modal-shadow: var(--shadow-surface);
18
23
  --modal-transition-duration: var(--duration-slow);
19
24
  --modal-transition-easing: var(--easing-out-expo);
25
+ --modal-translate: translateY(1rem);
20
26
  --modal-z-index: var(--z-index-modal);
21
27
  }
22
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "1.6.2",
3
+ "version": "1.6.4",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/components/button.json CHANGED
@@ -91,7 +91,7 @@
91
91
  }
92
92
  },
93
93
  "fontSize": {
94
- "$value": "{fontSize.sm}",
94
+ "$value": "{fontSize.fluid.sm}",
95
95
  "$type": "dimension"
96
96
  },
97
97
  "fontWeight": {
package/tokens/components/drawer.json CHANGED
@@ -10,6 +10,16 @@
10
10
  "$type": "color"
11
11
  }
12
12
  },
13
+ "border": {
14
+ "style": {
15
+ "$value": "{border.style.normal}",
16
+ "$type": "strokeStyle"
17
+ },
18
+ "width": {
19
+ "$value": "{border.width.sm}",
20
+ "$type": "dimension"
21
+ }
22
+ },
13
23
  "bottom": {
14
24
  "$value": "0",
15
25
  "$type": "dimension"
@@ -37,8 +47,14 @@
37
47
  "$type": "dimension"
38
48
  },
39
49
  "padding": {
40
- "$value": "{spacing.surface}",
41
- "$type": "dimension"
50
+ "block": {
51
+ "$value": "{spacing.surface}",
52
+ "$type": "dimension"
53
+ },
54
+ "inline": {
55
+ "$value": "{spacing.surface}",
56
+ "$type": "dimension"
57
+ }
42
58
  },
43
59
  "shadow": {
44
60
  "$value": "{shadow.surface}",
package/tokens/components/dropdown.json CHANGED
@@ -63,11 +63,11 @@
63
63
  },
64
64
  "padding": {
65
65
  "inline": {
66
- "$value": "{spacing.2xs}",
66
+ "$value": "{spacing.xs}",
67
67
  "$type": "dimension"
68
68
  },
69
69
  "block": {
70
- "$value": "{spacing.2xs}",
70
+ "$value": "{spacing.xs}",
71
71
  "$type": "dimension"
72
72
  }
73
73
  }
package/tokens/components/modal.json CHANGED
@@ -10,6 +10,16 @@
10
10
  "$type": "color"
11
11
  }
12
12
  },
13
+ "border": {
14
+ "style": {
15
+ "$value": "{border.style.normal}",
16
+ "$type": "strokeStyle"
17
+ },
18
+ "width": {
19
+ "$value": "{border.width.sm}",
20
+ "$type": "dimension"
21
+ }
22
+ },
13
23
  "color": {
14
24
  "background": {
15
25
  "$value": "{color.background.surface}",
@@ -24,39 +34,58 @@
24
34
  "$type": "color"
25
35
  }
26
36
  },
27
- "maxHeight": {
28
- "$value": "none",
29
- "$type": "string"
37
+ "margin": {
38
+ "$value": "{spacing.sm}",
39
+ "$type": "dimension"
30
40
  },
31
- "maxWidth": {
32
- "$value": "30rem",
33
- "$type": "dimension"
41
+ "maxHeight": {
42
+ "$value": "100dvh",
43
+ "$type": "dimension"
34
44
  },
35
- "padding": {
36
- "$value": "{spacing.surface}",
37
- "$type": "dimension"
45
+ "maxWidth": {
46
+ "$value": "30rem",
47
+ "$type": "dimension"
38
48
  },
39
- "radius": {
40
- "$value": "{radius.surface}",
41
- "$type": "dimension"
49
+ "minHeight": {
50
+ "$value": "0",
51
+ "$type": "dimension",
52
+ "$description": "Floor for the panel height; it otherwise shrinks to its content."
42
53
  },
43
- "shadow": {
44
- "$value": "{shadow.surface}",
45
- "$type": "shadow"
54
+ "padding": {
55
+ "block": {
56
+ "$value": "{spacing.surface}",
57
+ "$type": "dimension"
58
+ },
59
+ "inline": {
60
+ "$value": "{spacing.surface}",
61
+ "$type": "dimension"
62
+ }
63
+ },
64
+ "radius": {
65
+ "$value": "{radius.surface}",
66
+ "$type": "dimension"
67
+ },
68
+ "shadow": {
69
+ "$value": "{shadow.surface}",
70
+ "$type": "shadow"
46
71
  },
47
72
  "transition": {
48
- "duration": {
49
- "$value": "{duration.slow}",
50
- "$type": "duration"
73
+ "duration": {
74
+ "$value": "{duration.slow}",
75
+ "$type": "duration"
51
76
  },
52
77
  "easing": {
53
- "$value": "{easing.out-expo}",
54
- "$type": "string"
78
+ "$value": "{easing.out-expo}",
79
+ "$type": "string"
55
80
  }
56
81
  },
82
+ "translate": {
83
+ "$value": "translateY(1rem)",
84
+ "$type": "string"
85
+ },
57
86
  "zIndex": {
58
- "$value": "{zIndex.modal}",
59
- "$type": "number"
87
+ "$value": "{zIndex.modal}",
88
+ "$type": "number"
60
89
  }
61
90
  }
62
91
  }