@uncinq/component-tokens 1.6.1 → 1.6.3

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 (7) hide show
  1. package/dist/css/components/alert.css +3 -1
  2. package/dist/css/components/drawer.css +4 -1
  3. package/dist/css/components/modal.css +7 -2
  4. package/package.json +1 -1
  5. package/tokens/components/alert.json +12 -2
  6. package/tokens/components/drawer.json +18 -2
  7. package/tokens/components/modal.json +46 -22
package/dist/css/components/alert.css CHANGED
@@ -5,12 +5,14 @@
5
5
  /* components/alert.css */
6
6
  @layer tokens {
7
7
  :root {
8
+ --alert-align: start;
8
9
  --alert-border-radius: var(--radius-none);
9
10
  --alert-border-style: var(--border-style-normal);
10
11
  --alert-border-width: var(--border-width-sm);
11
12
  --alert-font-size: var(--font-size-small);
12
13
  --alert-gap: var(--spacing-sm);
13
14
  --alert-margin: 0;
14
- --alert-padding: var(--spacing-sm);
15
+ --alert-padding-block: var(--spacing-sm);
16
+ --alert-padding-inline: 0;
15
17
  }
16
18
  }
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/modal.css CHANGED
@@ -7,16 +7,21 @@
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-padding-block: var(--spacing-surface);
19
+ --modal-padding-inline: var(--spacing-surface);
16
20
  --modal-radius: var(--radius-surface);
17
21
  --modal-shadow: var(--shadow-surface);
18
22
  --modal-transition-duration: var(--duration-slow);
19
23
  --modal-transition-easing: var(--easing-out-expo);
24
+ --modal-translate: translateY(1rem);
20
25
  --modal-z-index: var(--z-index-modal);
21
26
  }
22
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/component-tokens",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "description": "Framework-agnostic CSS design tokens — component layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/components/alert.json CHANGED
@@ -1,5 +1,9 @@
1
1
  {
2
2
  "alert": {
3
+ "align": {
4
+ "$value": "start",
5
+ "$type": "string"
6
+ },
3
7
  "border": {
4
8
  "radius": {
5
9
  "$value": "{radius.none}",
@@ -27,8 +31,14 @@
27
31
  "$type": "dimension"
28
32
  },
29
33
  "padding": {
30
- "$value": "{spacing.sm}",
31
- "$type": "dimension"
34
+ "block": {
35
+ "$value": "{spacing.sm}",
36
+ "$type": "dimension"
37
+ },
38
+ "inline": {
39
+ "$value": "0",
40
+ "$type": "dimension"
41
+ }
32
42
  }
33
43
  }
34
44
  }
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/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,53 @@
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
+ "padding": {
50
+ "block": {
51
+ "$value": "{spacing.surface}",
52
+ "$type": "dimension"
53
+ },
54
+ "inline": {
55
+ "$value": "{spacing.surface}",
56
+ "$type": "dimension"
57
+ }
42
58
  },
43
- "shadow": {
44
- "$value": "{shadow.surface}",
45
- "$type": "shadow"
59
+ "radius": {
60
+ "$value": "{radius.surface}",
61
+ "$type": "dimension"
62
+ },
63
+ "shadow": {
64
+ "$value": "{shadow.surface}",
65
+ "$type": "shadow"
46
66
  },
47
67
  "transition": {
48
- "duration": {
49
- "$value": "{duration.slow}",
50
- "$type": "duration"
68
+ "duration": {
69
+ "$value": "{duration.slow}",
70
+ "$type": "duration"
51
71
  },
52
72
  "easing": {
53
- "$value": "{easing.out-expo}",
54
- "$type": "string"
73
+ "$value": "{easing.out-expo}",
74
+ "$type": "string"
55
75
  }
56
76
  },
77
+ "translate": {
78
+ "$value": "translateY(1rem)",
79
+ "$type": "string"
80
+ },
57
81
  "zIndex": {
58
- "$value": "{zIndex.modal}",
59
- "$type": "number"
82
+ "$value": "{zIndex.modal}",
83
+ "$type": "number"
60
84
  }
61
85
  }
62
86
  }