@pantheon-systems/pds-design-tokens 2.0.0-alpha.1 → 2.0.0-alpha.2
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/build/css/variables.global.css +6 -0
- package/build/js/variables.js +12 -0
- package/build/json/tokens.json +126 -0
- package/package.json +1 -1
|
@@ -4,7 +4,13 @@
|
|
|
4
4
|
--pds-animation-duration-dropdown: 300ms;
|
|
5
5
|
--pds-animation-duration-reveal: 300ms;
|
|
6
6
|
--pds-animation-timing-function-default: cubic-bezier(.2, 0, 0, 1);
|
|
7
|
+
--pds-animation-transition-button: background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
8
|
+
--pds-animation-transition-default: all 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
9
|
+
--pds-animation-transition-focus: outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
10
|
+
--pds-animation-transition-input: border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
11
|
+
--pds-animation-transition-link: color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
7
12
|
--pds-animation-transition-reveal: all 300ms cubic-bezier(.2, 0, 0, 1);
|
|
13
|
+
--pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms;
|
|
8
14
|
--pds-border-width-stepper: 3px;
|
|
9
15
|
--pds-border-width-default: 1px;
|
|
10
16
|
--pds-border-width-outline: 1px;
|
package/build/js/variables.js
CHANGED
|
@@ -7,8 +7,20 @@ export const ANIMATION_DURATION_DEFAULT = "200ms";
|
|
|
7
7
|
export const ANIMATION_DURATION_DROPDOWN = "300ms";
|
|
8
8
|
export const ANIMATION_DURATION_REVEAL = "300ms";
|
|
9
9
|
export const ANIMATION_TIMING_FUNCTION_DEFAULT = "cubic-bezier(.2, 0, 0, 1)";
|
|
10
|
+
export const ANIMATION_TRANSITION_BUTTON =
|
|
11
|
+
"background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
12
|
+
export const ANIMATION_TRANSITION_DEFAULT =
|
|
13
|
+
"all 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
14
|
+
export const ANIMATION_TRANSITION_FOCUS =
|
|
15
|
+
"outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
16
|
+
export const ANIMATION_TRANSITION_INPUT =
|
|
17
|
+
"border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
18
|
+
export const ANIMATION_TRANSITION_LINK =
|
|
19
|
+
"color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
10
20
|
export const ANIMATION_TRANSITION_REVEAL =
|
|
11
21
|
"all 300ms cubic-bezier(.2, 0, 0, 1)";
|
|
22
|
+
export const ANIMATION_TRANSITION_ROTATION =
|
|
23
|
+
"transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
|
|
12
24
|
export const BORDER_WIDTH_STEPPER = "3px";
|
|
13
25
|
export const BORDER_WIDTH_DEFAULT = "1px";
|
|
14
26
|
export const BORDER_WIDTH_OUTLINE = "1px";
|
package/build/json/tokens.json
CHANGED
|
@@ -112,6 +112,111 @@
|
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
114
|
"transition": {
|
|
115
|
+
"button": {
|
|
116
|
+
"value": "background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
117
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
118
|
+
"isSource": true,
|
|
119
|
+
"original": {
|
|
120
|
+
"value": "background-color, border-color, color, box-shadow, transform {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
121
|
+
"public": true
|
|
122
|
+
},
|
|
123
|
+
"name": "AnimationTransitionButton",
|
|
124
|
+
"attributes": {
|
|
125
|
+
"category": "animation",
|
|
126
|
+
"type": "transition",
|
|
127
|
+
"item": "button"
|
|
128
|
+
},
|
|
129
|
+
"path": [
|
|
130
|
+
"animation",
|
|
131
|
+
"transition",
|
|
132
|
+
"button"
|
|
133
|
+
],
|
|
134
|
+
"public": true
|
|
135
|
+
},
|
|
136
|
+
"default": {
|
|
137
|
+
"value": "all 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
138
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
139
|
+
"isSource": true,
|
|
140
|
+
"original": {
|
|
141
|
+
"value": "all {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
142
|
+
"public": true
|
|
143
|
+
},
|
|
144
|
+
"name": "AnimationTransitionDefault",
|
|
145
|
+
"attributes": {
|
|
146
|
+
"category": "animation",
|
|
147
|
+
"type": "transition",
|
|
148
|
+
"item": "default"
|
|
149
|
+
},
|
|
150
|
+
"path": [
|
|
151
|
+
"animation",
|
|
152
|
+
"transition",
|
|
153
|
+
"default"
|
|
154
|
+
],
|
|
155
|
+
"public": true
|
|
156
|
+
},
|
|
157
|
+
"focus": {
|
|
158
|
+
"value": "outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
159
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
160
|
+
"isSource": true,
|
|
161
|
+
"original": {
|
|
162
|
+
"value": "outline, outline-offset, box-shadow, border-color {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
163
|
+
"public": true
|
|
164
|
+
},
|
|
165
|
+
"name": "AnimationTransitionFocus",
|
|
166
|
+
"attributes": {
|
|
167
|
+
"category": "animation",
|
|
168
|
+
"type": "transition",
|
|
169
|
+
"item": "focus"
|
|
170
|
+
},
|
|
171
|
+
"path": [
|
|
172
|
+
"animation",
|
|
173
|
+
"transition",
|
|
174
|
+
"focus"
|
|
175
|
+
],
|
|
176
|
+
"public": true
|
|
177
|
+
},
|
|
178
|
+
"input": {
|
|
179
|
+
"value": "border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
180
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
181
|
+
"isSource": true,
|
|
182
|
+
"original": {
|
|
183
|
+
"value": "border-color, background-color, box-shadow, outline {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
184
|
+
"public": true
|
|
185
|
+
},
|
|
186
|
+
"name": "AnimationTransitionInput",
|
|
187
|
+
"attributes": {
|
|
188
|
+
"category": "animation",
|
|
189
|
+
"type": "transition",
|
|
190
|
+
"item": "input"
|
|
191
|
+
},
|
|
192
|
+
"path": [
|
|
193
|
+
"animation",
|
|
194
|
+
"transition",
|
|
195
|
+
"input"
|
|
196
|
+
],
|
|
197
|
+
"public": true
|
|
198
|
+
},
|
|
199
|
+
"link": {
|
|
200
|
+
"value": "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
201
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
202
|
+
"isSource": true,
|
|
203
|
+
"original": {
|
|
204
|
+
"value": "color, text-decoration-color {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
205
|
+
"public": true
|
|
206
|
+
},
|
|
207
|
+
"name": "AnimationTransitionLink",
|
|
208
|
+
"attributes": {
|
|
209
|
+
"category": "animation",
|
|
210
|
+
"type": "transition",
|
|
211
|
+
"item": "link"
|
|
212
|
+
},
|
|
213
|
+
"path": [
|
|
214
|
+
"animation",
|
|
215
|
+
"transition",
|
|
216
|
+
"link"
|
|
217
|
+
],
|
|
218
|
+
"public": true
|
|
219
|
+
},
|
|
115
220
|
"reveal": {
|
|
116
221
|
"value": "all 300ms cubic-bezier(.2, 0, 0, 1)",
|
|
117
222
|
"filePath": "tokens/animation/semantic/semantic.json",
|
|
@@ -132,6 +237,27 @@
|
|
|
132
237
|
"reveal"
|
|
133
238
|
],
|
|
134
239
|
"public": true
|
|
240
|
+
},
|
|
241
|
+
"rotation": {
|
|
242
|
+
"value": "transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
|
|
243
|
+
"filePath": "tokens/animation/semantic/semantic.json",
|
|
244
|
+
"isSource": true,
|
|
245
|
+
"original": {
|
|
246
|
+
"value": "transform {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
|
|
247
|
+
"public": true
|
|
248
|
+
},
|
|
249
|
+
"name": "AnimationTransitionRotation",
|
|
250
|
+
"attributes": {
|
|
251
|
+
"category": "animation",
|
|
252
|
+
"type": "transition",
|
|
253
|
+
"item": "rotation"
|
|
254
|
+
},
|
|
255
|
+
"path": [
|
|
256
|
+
"animation",
|
|
257
|
+
"transition",
|
|
258
|
+
"rotation"
|
|
259
|
+
],
|
|
260
|
+
"public": true
|
|
135
261
|
}
|
|
136
262
|
}
|
|
137
263
|
},
|
package/package.json
CHANGED