@uncinq/design-tokens 1.1.6 → 1.3.0

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/primitive/shadow.css +6 -6
  2. package/dist/css/semantic/color.css +3 -1
  3. package/dist/css/semantic/spacing.css +7 -7
  4. package/dist/css/semantic/typography.css +8 -8
  5. package/package.json +1 -1
  6. package/tokens/primitive/shadow.json +9 -9
  7. package/tokens/semantic/color.json +9 -1
  8. package/tokens/semantic/spacing.json +7 -7
  9. package/tokens/semantic/typography.json +8 -8
package/dist/css/primitive/shadow.css CHANGED
@@ -6,11 +6,11 @@
6
6
  @layer tokens {
7
7
  :root {
8
8
  --shadow-none: 0 0 0 0 transparent;
9
- --shadow-sm: 0 1px 2px 0 var(--color-shadow-normal), 0 1px 1px -1px var(--color-shadow-normal);
10
- --shadow-md: 0 4px 6px -1px var(--color-shadow-normal), 0 2px 4px -2px var(--color-shadow-normal);
11
- --shadow-lg: 0 10px 15px -3px var(--color-shadow-normal), 0 4px 6px -4px var(--color-shadow-normal);
12
- --shadow-center-sm: 0 0 2px 2px var(--color-shadow-normal);
13
- --shadow-center-md: 0 0 4px 4px var(--color-shadow-normal);
14
- --shadow-center-lg: 0 0 8px 8px var(--color-shadow-normal);
9
+ --shadow-sm: 0 1px 2px 0 var(--color-shadow-light), 0 1px 1px -1px var(--color-shadow-light);
10
+ --shadow-md: 0 4px 6px -1px var(--color-shadow-light), 0 2px 4px -2px var(--color-shadow-light);
11
+ --shadow-lg: 0 10px 15px -3px var(--color-shadow-light), 0 4px 6px -4px var(--color-shadow-light);
12
+ --shadow-center-sm: 0 0 2px 2px var(--color-shadow-light);
13
+ --shadow-center-md: 0 0 4px 4px var(--color-shadow-light);
14
+ --shadow-center-lg: 0 0 8px 8px var(--color-shadow-light);
15
15
  }
16
16
  }
package/dist/css/semantic/color.css CHANGED
@@ -57,7 +57,9 @@
57
57
  --color-secondary-muted: var(--color-gray-100);
58
58
  --color-secondary-strong: var(--color-gray-800);
59
59
  --color-shadow: var(--color-black);
60
- --color-shadow-normal: oklch(from var(--color-shadow) l c h / var(--opacity-shadow));
60
+ --color-shadow-light: oklch(from var(--color-shadow) l c h / var(--opacity-shadow));
61
+ --color-shadow-medium: oklch(from var(--color-shadow) l c h / var(--opacity-backdrop));
62
+ --color-shadow-strong: oklch(from var(--color-shadow) l c h / var(--opacity-overlay));
61
63
  --color-success: var(--color-green-600);
62
64
  --color-success-hover: var(--color-green-700);
63
65
  --color-success-muted: var(--color-green-100);
package/dist/css/semantic/spacing.css CHANGED
@@ -13,13 +13,13 @@
13
13
  --spacing-xl: var(--size-60);
14
14
  --spacing-2xl: var(--size-100);
15
15
  --spacing-3xl: var(--size-150);
16
- --spacing-fluid-2xs: clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem);
17
- --spacing-fluid-xs: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
18
- --spacing-fluid-sm: clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem);
19
- --spacing-fluid-md: clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem);
20
- --spacing-fluid-lg: clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem);
21
- --spacing-fluid-xl: clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem);
22
- --spacing-fluid-2xl: clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem);
16
+ --spacing-fluid-2xs: clamp(0.3125rem, 0.2025rem + 0.4695vw, 0.625rem);
17
+ --spacing-fluid-xs: clamp(0.625rem, 0.4049rem + 0.9390vw, 1.25rem);
18
+ --spacing-fluid-sm: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);
19
+ --spacing-fluid-md: clamp(1.875rem, 1.2148rem + 2.8169vw, 3.75rem);
20
+ --spacing-fluid-lg: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
21
+ --spacing-fluid-xl: clamp(3.125rem, 2.0246rem + 4.6948vw, 6.25rem);
22
+ --spacing-fluid-2xl: clamp(3.75rem, 2.4296rem + 5.6338vw, 7.5rem);
23
23
  --spacing-card: var(--spacing-sm);
24
24
  --spacing-control: var(--spacing-xs);
25
25
  --spacing-heading: var(--spacing-fluid-sm);
package/dist/css/semantic/typography.css CHANGED
@@ -21,14 +21,14 @@
21
21
  --font-size-xl: var(--size-48);
22
22
  --font-size-2xl: var(--size-64);
23
23
  --font-size-display: var(--size-96);
24
- --font-size-fluid-2xs: clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem);
25
- --font-size-fluid-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
26
- --font-size-fluid-sm: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
27
- --font-size-fluid-md: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
28
- --font-size-fluid-lg: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
29
- --font-size-fluid-xl: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
30
- --font-size-fluid-2xl: clamp(3rem, 2.7143rem + 1.4286vw, 4rem);
31
- --font-size-fluid-display: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);
24
+ --font-size-fluid-2xs: clamp(0.625rem, 0.5810rem + 0.1878vw, 0.75rem);
25
+ --font-size-fluid-xs: clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem);
26
+ --font-size-fluid-sm: clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem);
27
+ --font-size-fluid-md: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);
28
+ --font-size-fluid-lg: clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem);
29
+ --font-size-fluid-xl: clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem);
30
+ --font-size-fluid-2xl: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
31
+ --font-size-fluid-display: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
32
32
  --font-size-heading-01: var(--font-size-fluid-xl);
33
33
  --font-size-heading-02: var(--font-size-fluid-lg);
34
34
  --font-size-heading-03: var(--font-size-fluid-md);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "1.1.6",
3
+ "version": "1.3.0",
4
4
  "description": "Framework-agnostic design tokens — JSON DTCG primitive and semantic — CSS custom properties.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/primitive/shadow.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "offsetY": "1px",
20
20
  "blur": "2px",
21
21
  "spread": "0",
22
- "color": "{color.shadow.normal}",
22
+ "color": "{color.shadow.light}",
23
23
  "inset": false
24
24
  },
25
25
  {
@@ -27,7 +27,7 @@
27
27
  "offsetY": "1px",
28
28
  "blur": "1px",
29
29
  "spread": "-1px",
30
- "color": "{color.shadow.normal}",
30
+ "color": "{color.shadow.light}",
31
31
  "inset": false
32
32
  }
33
33
  ]
@@ -40,7 +40,7 @@
40
40
  "offsetY": "4px",
41
41
  "blur": "6px",
42
42
  "spread": "-1px",
43
- "color": "{color.shadow.normal}",
43
+ "color": "{color.shadow.light}",
44
44
  "inset": false
45
45
  },
46
46
  {
@@ -48,7 +48,7 @@
48
48
  "offsetY": "2px",
49
49
  "blur": "4px",
50
50
  "spread": "-2px",
51
- "color": "{color.shadow.normal}",
51
+ "color": "{color.shadow.light}",
52
52
  "inset": false
53
53
  }
54
54
  ]
@@ -61,7 +61,7 @@
61
61
  "offsetY": "10px",
62
62
  "blur": "15px",
63
63
  "spread": "-3px",
64
- "color": "{color.shadow.normal}",
64
+ "color": "{color.shadow.light}",
65
65
  "inset": false
66
66
  },
67
67
  {
@@ -69,7 +69,7 @@
69
69
  "offsetY": "4px",
70
70
  "blur": "6px",
71
71
  "spread": "-4px",
72
- "color": "{color.shadow.normal}",
72
+ "color": "{color.shadow.light}",
73
73
  "inset": false
74
74
  }
75
75
  ]
@@ -82,7 +82,7 @@
82
82
  "offsetY": "0",
83
83
  "blur": "2px",
84
84
  "spread": "2px",
85
- "color": "{color.shadow.normal}",
85
+ "color": "{color.shadow.light}",
86
86
  "inset": false
87
87
  }
88
88
  },
@@ -93,7 +93,7 @@
93
93
  "offsetY": "0",
94
94
  "blur": "4px",
95
95
  "spread": "4px",
96
- "color": "{color.shadow.normal}",
96
+ "color": "{color.shadow.light}",
97
97
  "inset": false
98
98
  }
99
99
  },
@@ -104,7 +104,7 @@
104
104
  "offsetY": "0",
105
105
  "blur": "8px",
106
106
  "spread": "8px",
107
- "color": "{color.shadow.normal}",
107
+ "color": "{color.shadow.light}",
108
108
  "inset": false
109
109
  }
110
110
  }
package/tokens/semantic/color.json CHANGED
@@ -235,9 +235,17 @@
235
235
  "$value": "{color.black}",
236
236
  "$type": "color"
237
237
  },
238
- "normal": {
238
+ "light": {
239
239
  "$value": "oklch(from {color.shadow.default} l c h / {opacity.shadow})",
240
240
  "$type": "color"
241
+ },
242
+ "medium": {
243
+ "$value": "oklch(from {color.shadow.default} l c h / {opacity.backdrop})",
244
+ "$type": "color"
245
+ },
246
+ "strong": {
247
+ "$value": "oklch(from {color.shadow.default} l c h / {opacity.overlay})",
248
+ "$type": "color"
241
249
  }
242
250
  },
243
251
  "success": {
package/tokens/semantic/spacing.json CHANGED
@@ -34,31 +34,31 @@
34
34
  },
35
35
  "fluid": {
36
36
  "2xs": {
37
- "$value": "clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem)",
37
+ "$value": "clamp(0.3125rem, 0.2025rem + 0.4695vw, 0.625rem)",
38
38
  "$type": "dimension"
39
39
  },
40
40
  "xs": {
41
- "$value": "clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem)",
41
+ "$value": "clamp(0.625rem, 0.4049rem + 0.9390vw, 1.25rem)",
42
42
  "$type": "dimension"
43
43
  },
44
44
  "sm": {
45
- "$value": "clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem)",
45
+ "$value": "clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem)",
46
46
  "$type": "dimension"
47
47
  },
48
48
  "md": {
49
- "$value": "clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem)",
49
+ "$value": "clamp(1.875rem, 1.2148rem + 2.8169vw, 3.75rem)",
50
50
  "$type": "dimension"
51
51
  },
52
52
  "lg": {
53
- "$value": "clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem)",
53
+ "$value": "clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem)",
54
54
  "$type": "dimension"
55
55
  },
56
56
  "xl": {
57
- "$value": "clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem)",
57
+ "$value": "clamp(3.125rem, 2.0246rem + 4.6948vw, 6.25rem)",
58
58
  "$type": "dimension"
59
59
  },
60
60
  "2xl": {
61
- "$value": "clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem)",
61
+ "$value": "clamp(3.75rem, 2.4296rem + 5.6338vw, 7.5rem)",
62
62
  "$type": "dimension"
63
63
  }
64
64
  },
package/tokens/semantic/typography.json CHANGED
@@ -49,35 +49,35 @@
49
49
  "fluid": {
50
50
  "2xs": {
51
51
  "$type": "dimension",
52
- "$value": "clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem)"
52
+ "$value": "clamp(0.625rem, 0.5810rem + 0.1878vw, 0.75rem)"
53
53
  },
54
54
  "xs": {
55
55
  "$type": "dimension",
56
- "$value": "clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem)"
56
+ "$value": "clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem)"
57
57
  },
58
58
  "sm": {
59
59
  "$type": "dimension",
60
- "$value": "clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem)"
60
+ "$value": "clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem)"
61
61
  },
62
62
  "md": {
63
63
  "$type": "dimension",
64
- "$value": "clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)"
64
+ "$value": "clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem)"
65
65
  },
66
66
  "lg": {
67
67
  "$type": "dimension",
68
- "$value": "clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem)"
68
+ "$value": "clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem)"
69
69
  },
70
70
  "xl": {
71
71
  "$type": "dimension",
72
- "$value": "clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)"
72
+ "$value": "clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem)"
73
73
  },
74
74
  "2xl": {
75
75
  "$type": "dimension",
76
- "$value": "clamp(3rem, 2.7143rem + 1.4286vw, 4rem)"
76
+ "$value": "clamp(3rem, 2.6479rem + 1.5023vw, 4rem)"
77
77
  },
78
78
  "display": {
79
79
  "$type": "dimension",
80
- "$value": "clamp(4rem, 3.4286rem + 2.8571vw, 6rem)"
80
+ "$value": "clamp(4rem, 3.2958rem + 3.0047vw, 6rem)"
81
81
  }
82
82
  },
83
83
  "heading": {