@nswds/tokens 4.0.0 → 4.2.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.
- package/dist/css/colors/semantic/hex.dark.css +1 -1
- package/dist/css/colors/semantic/hsl.dark.css +1 -1
- package/dist/css/colors/semantic/oklch.dark.css +1 -1
- package/dist/css/colors/semantic/rgb.dark.css +1 -1
- package/dist/css/shadow/global.css +4 -4
- package/dist/index.cjs +7 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/less/shadow/global.less +4 -4
- package/dist/scss/shadow/global.scss +4 -4
- package/dist/tokens/global/shadow/canonical.json +4 -4
- package/dist/tokens/motion.base.json +118 -0
- package/dist/tokens/primitives-global.light.json +1908 -0
- package/dist/tokens/primitives-semantic.dark.json +532 -0
- package/dist/tokens/primitives-semantic.light.json +147 -1525
- package/dist/tokens/z-index.base.json +132 -0
- package/package.json +9 -2
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@shadow-color-5: rgb(0 0 0 / 0.05); // Shadow black at 5% alpha — the faintest elevation tint. Step name is the alpha percentage.
|
|
5
5
|
@shadow-color-10: rgb(0 0 0 / 0.1); // Shadow black at 10% alpha — the standard elevation tint. Step name is the alpha percentage.
|
|
6
6
|
@shadow-color-25: rgb(0 0 0 / 0.25); // Shadow black at 25% alpha — strong elevation for overlays/modals. Step name is the alpha percentage.
|
|
7
|
-
@shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); // Small elevation — cards and raised controls (Tailwind shadow-sm geometry).
|
|
8
|
-
@shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); // Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).
|
|
9
|
-
@shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).
|
|
10
|
-
@shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); // Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).
|
|
7
|
+
@shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); // Small elevation — cards and raised controls (Tailwind shadow-sm geometry).
|
|
8
|
+
@shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); // Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).
|
|
9
|
+
@shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).
|
|
10
|
+
@shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); // Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).
|
|
@@ -4,7 +4,7 @@ $box-shadow-thicker: inset 0 0 0 0.25rem; // Thicker inset ring (inset 0 0 0 bor
|
|
|
4
4
|
$shadow-color-5: rgb(0 0 0 / 0.05); // Shadow black at 5% alpha — the faintest elevation tint. Step name is the alpha percentage.
|
|
5
5
|
$shadow-color-10: rgb(0 0 0 / 0.1); // Shadow black at 10% alpha — the standard elevation tint. Step name is the alpha percentage.
|
|
6
6
|
$shadow-color-25: rgb(0 0 0 / 0.25); // Shadow black at 25% alpha — strong elevation for overlays/modals. Step name is the alpha percentage.
|
|
7
|
-
$shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); // Small elevation — cards and raised controls (Tailwind shadow-sm geometry).
|
|
8
|
-
$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); // Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).
|
|
9
|
-
$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).
|
|
10
|
-
$shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); // Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).
|
|
7
|
+
$shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); // Small elevation — cards and raised controls (Tailwind shadow-sm geometry).
|
|
8
|
+
$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); // Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).
|
|
9
|
+
$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).
|
|
10
|
+
$shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); // Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"shadow": {
|
|
109
109
|
"sm": {
|
|
110
110
|
"$type": "shadow",
|
|
111
|
-
"$description": "Small elevation — cards and raised controls (Tailwind shadow-sm geometry).
|
|
111
|
+
"$description": "Small elevation — cards and raised controls (Tailwind shadow-sm geometry).",
|
|
112
112
|
"$value": [
|
|
113
113
|
{
|
|
114
114
|
"offsetX": {
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
},
|
|
153
153
|
"md": {
|
|
154
154
|
"$type": "shadow",
|
|
155
|
-
"$description": "Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).
|
|
155
|
+
"$description": "Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry).",
|
|
156
156
|
"$value": [
|
|
157
157
|
{
|
|
158
158
|
"offsetX": {
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
},
|
|
197
197
|
"lg": {
|
|
198
198
|
"$type": "shadow",
|
|
199
|
-
"$description": "Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).
|
|
199
|
+
"$description": "Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry).",
|
|
200
200
|
"$value": [
|
|
201
201
|
{
|
|
202
202
|
"offsetX": {
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
},
|
|
241
241
|
"xl": {
|
|
242
242
|
"$type": "shadow",
|
|
243
|
-
"$description": "Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).
|
|
243
|
+
"$description": "Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry).",
|
|
244
244
|
"$value": [
|
|
245
245
|
{
|
|
246
246
|
"offsetX": {
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
{
|
|
2
|
+
"duration": {
|
|
3
|
+
"none": {
|
|
4
|
+
"$type": "duration",
|
|
5
|
+
"$value": {
|
|
6
|
+
"value": 0,
|
|
7
|
+
"unit": "ms"
|
|
8
|
+
},
|
|
9
|
+
"$description": "No motion. Used as the reduced-motion target and the default transition delay.",
|
|
10
|
+
"$extensions": {
|
|
11
|
+
"com.figma": {
|
|
12
|
+
"hiddenFromPublishing": false,
|
|
13
|
+
"scopes": [
|
|
14
|
+
"ALL_SCOPES"
|
|
15
|
+
],
|
|
16
|
+
"codeSyntax": {
|
|
17
|
+
"WEB": "var(--duration-none)"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"instant": {
|
|
23
|
+
"$type": "duration",
|
|
24
|
+
"$value": {
|
|
25
|
+
"value": 100,
|
|
26
|
+
"unit": "ms"
|
|
27
|
+
},
|
|
28
|
+
"$description": "Micro-feedback on small elements — hover, focus rings, toggles, small fades.",
|
|
29
|
+
"$extensions": {
|
|
30
|
+
"com.figma": {
|
|
31
|
+
"hiddenFromPublishing": false,
|
|
32
|
+
"scopes": [
|
|
33
|
+
"ALL_SCOPES"
|
|
34
|
+
],
|
|
35
|
+
"codeSyntax": {
|
|
36
|
+
"WEB": "var(--duration-instant)"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"fast": {
|
|
42
|
+
"$type": "duration",
|
|
43
|
+
"$value": {
|
|
44
|
+
"value": 150,
|
|
45
|
+
"unit": "ms"
|
|
46
|
+
},
|
|
47
|
+
"$description": "Quick transitions over short distances — dropdowns, popovers, exits.",
|
|
48
|
+
"$extensions": {
|
|
49
|
+
"com.figma": {
|
|
50
|
+
"hiddenFromPublishing": false,
|
|
51
|
+
"scopes": [
|
|
52
|
+
"ALL_SCOPES"
|
|
53
|
+
],
|
|
54
|
+
"codeSyntax": {
|
|
55
|
+
"WEB": "var(--duration-fast)"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"base": {
|
|
61
|
+
"$type": "duration",
|
|
62
|
+
"$value": {
|
|
63
|
+
"value": 250,
|
|
64
|
+
"unit": "ms"
|
|
65
|
+
},
|
|
66
|
+
"$description": "Default duration for most UI transitions.",
|
|
67
|
+
"$extensions": {
|
|
68
|
+
"com.figma": {
|
|
69
|
+
"hiddenFromPublishing": false,
|
|
70
|
+
"scopes": [
|
|
71
|
+
"ALL_SCOPES"
|
|
72
|
+
],
|
|
73
|
+
"codeSyntax": {
|
|
74
|
+
"WEB": "var(--duration-base)"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
"slow": {
|
|
80
|
+
"$type": "duration",
|
|
81
|
+
"$value": {
|
|
82
|
+
"value": 400,
|
|
83
|
+
"unit": "ms"
|
|
84
|
+
},
|
|
85
|
+
"$description": "Larger surfaces entering or leaving — modals, drawers, sheets.",
|
|
86
|
+
"$extensions": {
|
|
87
|
+
"com.figma": {
|
|
88
|
+
"hiddenFromPublishing": false,
|
|
89
|
+
"scopes": [
|
|
90
|
+
"ALL_SCOPES"
|
|
91
|
+
],
|
|
92
|
+
"codeSyntax": {
|
|
93
|
+
"WEB": "var(--duration-slow)"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"slower": {
|
|
99
|
+
"$type": "duration",
|
|
100
|
+
"$value": {
|
|
101
|
+
"value": 600,
|
|
102
|
+
"unit": "ms"
|
|
103
|
+
},
|
|
104
|
+
"$description": "Full-screen transitions and background dimming behind overlays.",
|
|
105
|
+
"$extensions": {
|
|
106
|
+
"com.figma": {
|
|
107
|
+
"hiddenFromPublishing": false,
|
|
108
|
+
"scopes": [
|
|
109
|
+
"ALL_SCOPES"
|
|
110
|
+
],
|
|
111
|
+
"codeSyntax": {
|
|
112
|
+
"WEB": "var(--duration-slower)"
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|