@phcdevworks/spectre-tokens 2.8.0 → 3.0.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/README.md +97 -58
- package/dist/index.cjs +317 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +98 -2
- package/dist/index.d.cts +281 -3
- package/dist/index.d.ts +281 -3
- package/dist/index.js +317 -11
- package/dist/index.js.map +1 -1
- package/dist/tokens.dtcg.json +690 -6
- package/package.json +17 -9
- package/tokens/components.json +167 -0
- package/tokens/modes.json +408 -4
- package/tokens/primitives.json +45 -0
- package/tokens/semantic-roles.json +37 -0
package/tokens/primitives.json
CHANGED
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
"transitions": {
|
|
63
63
|
"duration": {
|
|
64
|
+
"reduced": "0.01ms",
|
|
64
65
|
"instant": "75ms",
|
|
65
66
|
"fast": "150ms",
|
|
66
67
|
"base": "200ms",
|
|
@@ -120,6 +121,48 @@
|
|
|
120
121
|
"duration": "{transitions.duration.slowest}",
|
|
121
122
|
"easing": "{transitions.easing.spring}",
|
|
122
123
|
"keyframes": "pulse"
|
|
124
|
+
},
|
|
125
|
+
"reducedMotion": {
|
|
126
|
+
"fadeIn": {
|
|
127
|
+
"duration": "{transitions.duration.reduced}",
|
|
128
|
+
"easing": "{transitions.easing.linear}",
|
|
129
|
+
"keyframes": "fade-in"
|
|
130
|
+
},
|
|
131
|
+
"fadeOut": {
|
|
132
|
+
"duration": "{transitions.duration.reduced}",
|
|
133
|
+
"easing": "{transitions.easing.linear}",
|
|
134
|
+
"keyframes": "fade-out"
|
|
135
|
+
},
|
|
136
|
+
"slideUp": {
|
|
137
|
+
"duration": "{transitions.duration.reduced}",
|
|
138
|
+
"easing": "{transitions.easing.linear}",
|
|
139
|
+
"keyframes": "slide-up"
|
|
140
|
+
},
|
|
141
|
+
"slideDown": {
|
|
142
|
+
"duration": "{transitions.duration.reduced}",
|
|
143
|
+
"easing": "{transitions.easing.linear}",
|
|
144
|
+
"keyframes": "slide-down"
|
|
145
|
+
},
|
|
146
|
+
"scaleIn": {
|
|
147
|
+
"duration": "{transitions.duration.reduced}",
|
|
148
|
+
"easing": "{transitions.easing.linear}",
|
|
149
|
+
"keyframes": "scale-in"
|
|
150
|
+
},
|
|
151
|
+
"bounce": {
|
|
152
|
+
"duration": "{transitions.duration.reduced}",
|
|
153
|
+
"easing": "{transitions.easing.linear}",
|
|
154
|
+
"keyframes": "bounce"
|
|
155
|
+
},
|
|
156
|
+
"shake": {
|
|
157
|
+
"duration": "{transitions.duration.reduced}",
|
|
158
|
+
"easing": "{transitions.easing.linear}",
|
|
159
|
+
"keyframes": "shake"
|
|
160
|
+
},
|
|
161
|
+
"pulse": {
|
|
162
|
+
"duration": "{transitions.duration.reduced}",
|
|
163
|
+
"easing": "{transitions.easing.linear}",
|
|
164
|
+
"keyframes": "pulse"
|
|
165
|
+
}
|
|
123
166
|
}
|
|
124
167
|
},
|
|
125
168
|
"opacity": {
|
|
@@ -155,6 +198,8 @@
|
|
|
155
198
|
"offset": "2px",
|
|
156
199
|
"style": "solid"
|
|
157
200
|
},
|
|
201
|
+
"reducedMotion": "{transitions.duration.reduced}",
|
|
202
|
+
"forcedColors": "auto",
|
|
158
203
|
"minTouchTarget": "44px",
|
|
159
204
|
"minTextSize": "16px"
|
|
160
205
|
},
|
|
@@ -24,6 +24,43 @@
|
|
|
24
24
|
"overlay": {
|
|
25
25
|
"value": "{colors.black} / 0.6",
|
|
26
26
|
"description": "modals, dropdowns, flyouts"
|
|
27
|
+
},
|
|
28
|
+
"hover": {
|
|
29
|
+
"value": "{colors.neutral.100}",
|
|
30
|
+
"description": "background for hovered clickable rows, items, and menu entries"
|
|
31
|
+
},
|
|
32
|
+
"selected": {
|
|
33
|
+
"value": "{colors.info.50}",
|
|
34
|
+
"description": "background for selected list items, rows, and menu entries"
|
|
35
|
+
},
|
|
36
|
+
"active": {
|
|
37
|
+
"value": "{colors.neutral.200}",
|
|
38
|
+
"description": "background for pressed/active clickable rows, items, and menu entries"
|
|
39
|
+
},
|
|
40
|
+
"divider": {
|
|
41
|
+
"value": "{colors.neutral.200}",
|
|
42
|
+
"description": "hairline color for <hr>, table borders, and section separators"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"link": {
|
|
46
|
+
"default": {
|
|
47
|
+
"value": "{colors.brand.600}",
|
|
48
|
+
"description": "default inline link color",
|
|
49
|
+
"metadata": {
|
|
50
|
+
"pair": "surface.page"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"hover": {
|
|
54
|
+
"value": "{colors.brand.700}",
|
|
55
|
+
"description": "link color on hover"
|
|
56
|
+
},
|
|
57
|
+
"active": {
|
|
58
|
+
"value": "{colors.brand.800}",
|
|
59
|
+
"description": "link color while pressed"
|
|
60
|
+
},
|
|
61
|
+
"visited": {
|
|
62
|
+
"value": "{colors.accent.700}",
|
|
63
|
+
"description": "link color after the destination has been visited"
|
|
27
64
|
}
|
|
28
65
|
},
|
|
29
66
|
"text": {
|