@pantheon-systems/pds-design-tokens 2.0.0-alpha.21 → 2.0.0-alpha.22

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 (5) hide show
  1. package/build/css/variables.global.css +7 -9
  2. package/build/js/variables.global.d.ts +0 -2
  3. package/build/js/variables.global.js +7 -9
  4. package/build/json/tokens.json +14 -58
  5. package/package.json +1 -1
package/build/css/variables.global.css CHANGED
@@ -1,16 +1,14 @@
1
1
  :root {
2
- --pds-animation-delay-default: 200ms;
3
2
  --pds-animation-duration-default: 200ms;
4
- --pds-animation-duration-dropdown: 300ms;
5
3
  --pds-animation-duration-reveal: 300ms;
6
4
  --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;
12
- --pds-animation-transition-reveal: height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1);
13
- --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1);
5
+ --pds-animation-transition-button: background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
6
+ --pds-animation-transition-default: all 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
7
+ --pds-animation-transition-focus: outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
8
+ --pds-animation-transition-input: border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
9
+ --pds-animation-transition-link: color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
10
+ --pds-animation-transition-reveal: height 300ms cubic-bezier(.2, 0, 0, 1) 0ms, opacity 300ms cubic-bezier(.2, 0, 0, 1) 0ms, padding 300ms cubic-bezier(.2, 0, 0, 1) 0ms, width 300ms cubic-bezier(.2, 0, 0, 1) 0ms;
11
+ --pds-animation-transition-rotation: transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms;
14
12
  --pds-border-width-stepper: 3px;
15
13
  --pds-border-width-default: 1px;
16
14
  --pds-border-width-thicker: 2px;
package/build/js/variables.global.d.ts CHANGED
@@ -2,9 +2,7 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ANIMATION_DELAY_DEFAULT: string;
6
5
  export const ANIMATION_DURATION_DEFAULT: string;
7
- export const ANIMATION_DURATION_DROPDOWN: string;
8
6
  export const ANIMATION_DURATION_REVEAL: string;
9
7
  export const ANIMATION_TIMING_FUNCTION_DEFAULT: string;
10
8
  export const ANIMATION_TRANSITION_BUTTON: string;
package/build/js/variables.global.js CHANGED
@@ -2,18 +2,16 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const ANIMATION_DELAY_DEFAULT = "200ms";
6
5
  export const ANIMATION_DURATION_DEFAULT = "200ms";
7
- export const ANIMATION_DURATION_DROPDOWN = "300ms";
8
6
  export const ANIMATION_DURATION_REVEAL = "300ms";
9
7
  export const ANIMATION_TIMING_FUNCTION_DEFAULT = "cubic-bezier(.2, 0, 0, 1)";
10
- export const ANIMATION_TRANSITION_BUTTON = "background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
11
- export const ANIMATION_TRANSITION_DEFAULT = "all 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
12
- export const ANIMATION_TRANSITION_FOCUS = "outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
13
- export const ANIMATION_TRANSITION_INPUT = "border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
14
- export const ANIMATION_TRANSITION_LINK = "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms";
15
- export const ANIMATION_TRANSITION_REVEAL = "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)";
16
- export const ANIMATION_TRANSITION_ROTATION = "transform 200ms cubic-bezier(.2, 0, 0, 1)";
8
+ export const ANIMATION_TRANSITION_BUTTON = "background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
9
+ export const ANIMATION_TRANSITION_DEFAULT = "all 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
10
+ export const ANIMATION_TRANSITION_FOCUS = "outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
11
+ export const ANIMATION_TRANSITION_INPUT = "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
12
+ export const ANIMATION_TRANSITION_LINK = "color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
13
+ export const ANIMATION_TRANSITION_REVEAL = "height 300ms cubic-bezier(.2, 0, 0, 1) 0ms, opacity 300ms cubic-bezier(.2, 0, 0, 1) 0ms, padding 300ms cubic-bezier(.2, 0, 0, 1) 0ms, width 300ms cubic-bezier(.2, 0, 0, 1) 0ms";
14
+ export const ANIMATION_TRANSITION_ROTATION = "transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms";
17
15
  export const BORDER_WIDTH_STEPPER = "3px";
18
16
  export const BORDER_WIDTH_DEFAULT = "1px";
19
17
  export const BORDER_WIDTH_THICKER = "2px";
package/build/json/tokens.json CHANGED
@@ -1,28 +1,5 @@
1
1
  {
2
2
  "animation": {
3
- "delay": {
4
- "default": {
5
- "value": "200ms",
6
- "filePath": "tokens/animation/primitive/primitive.json",
7
- "isSource": true,
8
- "original": {
9
- "value": "200ms",
10
- "public": true
11
- },
12
- "name": "AnimationDelayDefault",
13
- "attributes": {
14
- "category": "animation",
15
- "type": "delay",
16
- "item": "default"
17
- },
18
- "path": [
19
- "animation",
20
- "delay",
21
- "default"
22
- ],
23
- "public": true
24
- }
25
- },
26
3
  "duration": {
27
4
  "default": {
28
5
  "value": "200ms",
@@ -45,27 +22,6 @@
45
22
  ],
46
23
  "public": true
47
24
  },
48
- "dropdown": {
49
- "value": "300ms",
50
- "filePath": "tokens/animation/semantic/semantic.json",
51
- "isSource": true,
52
- "original": {
53
- "value": "300ms",
54
- "public": true
55
- },
56
- "name": "AnimationDurationDropdown",
57
- "attributes": {
58
- "category": "animation",
59
- "type": "duration",
60
- "item": "dropdown"
61
- },
62
- "path": [
63
- "animation",
64
- "duration",
65
- "dropdown"
66
- ],
67
- "public": true
68
- },
69
25
  "reveal": {
70
26
  "value": "300ms",
71
27
  "filePath": "tokens/animation/semantic/semantic.json",
@@ -113,11 +69,11 @@
113
69
  },
114
70
  "transition": {
115
71
  "button": {
116
- "value": "background-color, border-color, color, box-shadow, transform 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
72
+ "value": "background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
117
73
  "filePath": "tokens/animation/semantic/semantic.json",
118
74
  "isSource": true,
119
75
  "original": {
120
- "value": "background-color, border-color, color, box-shadow, transform {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
76
+ "value": "background-color {animation.duration.default} {animation.timing-function.default} 0ms, border-color {animation.duration.default} {animation.timing-function.default} 0ms, color {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms, transform {animation.duration.default} {animation.timing-function.default} 0ms",
121
77
  "public": true
122
78
  },
123
79
  "name": "AnimationTransitionButton",
@@ -134,11 +90,11 @@
134
90
  "public": true
135
91
  },
136
92
  "default": {
137
- "value": "all 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
93
+ "value": "all 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
138
94
  "filePath": "tokens/animation/semantic/semantic.json",
139
95
  "isSource": true,
140
96
  "original": {
141
- "value": "all {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
97
+ "value": "all {animation.duration.default} {animation.timing-function.default} 0ms",
142
98
  "public": true
143
99
  },
144
100
  "name": "AnimationTransitionDefault",
@@ -155,11 +111,11 @@
155
111
  "public": true
156
112
  },
157
113
  "focus": {
158
- "value": "outline, outline-offset, box-shadow, border-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
114
+ "value": "outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline-offset 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
159
115
  "filePath": "tokens/animation/semantic/semantic.json",
160
116
  "isSource": true,
161
117
  "original": {
162
- "value": "outline, outline-offset, box-shadow, border-color {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
118
+ "value": "outline {animation.duration.default} {animation.timing-function.default} 0ms, outline-offset {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms, border-color {animation.duration.default} {animation.timing-function.default} 0ms",
163
119
  "public": true
164
120
  },
165
121
  "name": "AnimationTransitionFocus",
@@ -176,11 +132,11 @@
176
132
  "public": true
177
133
  },
178
134
  "input": {
179
- "value": "border-color, background-color, box-shadow, outline 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
135
+ "value": "border-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, background-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, box-shadow 200ms cubic-bezier(.2, 0, 0, 1) 0ms, outline 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
180
136
  "filePath": "tokens/animation/semantic/semantic.json",
181
137
  "isSource": true,
182
138
  "original": {
183
- "value": "border-color, background-color, box-shadow, outline {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
139
+ "value": "border-color {animation.duration.default} {animation.timing-function.default} 0ms, background-color {animation.duration.default} {animation.timing-function.default} 0ms, box-shadow {animation.duration.default} {animation.timing-function.default} 0ms, outline {animation.duration.default} {animation.timing-function.default} 0ms",
184
140
  "public": true
185
141
  },
186
142
  "name": "AnimationTransitionInput",
@@ -197,11 +153,11 @@
197
153
  "public": true
198
154
  },
199
155
  "link": {
200
- "value": "color, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 200ms",
156
+ "value": "color 200ms cubic-bezier(.2, 0, 0, 1) 0ms, text-decoration-color 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
201
157
  "filePath": "tokens/animation/semantic/semantic.json",
202
158
  "isSource": true,
203
159
  "original": {
204
- "value": "color, text-decoration-color {animation.duration.default} {animation.timing-function.default} {animation.delay.default}",
160
+ "value": "color {animation.duration.default} {animation.timing-function.default} 0ms, text-decoration-color {animation.duration.default} {animation.timing-function.default} 0ms",
205
161
  "public": true
206
162
  },
207
163
  "name": "AnimationTransitionLink",
@@ -218,11 +174,11 @@
218
174
  "public": true
219
175
  },
220
176
  "reveal": {
221
- "value": "height, opacity, padding, width 300ms cubic-bezier(.2, 0, 0, 1)",
177
+ "value": "height 300ms cubic-bezier(.2, 0, 0, 1) 0ms, opacity 300ms cubic-bezier(.2, 0, 0, 1) 0ms, padding 300ms cubic-bezier(.2, 0, 0, 1) 0ms, width 300ms cubic-bezier(.2, 0, 0, 1) 0ms",
222
178
  "filePath": "tokens/animation/semantic/semantic.json",
223
179
  "isSource": true,
224
180
  "original": {
225
- "value": "height, opacity, padding, width {animation.duration.reveal} {animation.timing-function.default}",
181
+ "value": "height {animation.duration.reveal} {animation.timing-function.default} 0ms, opacity {animation.duration.reveal} {animation.timing-function.default} 0ms, padding {animation.duration.reveal} {animation.timing-function.default} 0ms, width {animation.duration.reveal} {animation.timing-function.default} 0ms",
226
182
  "public": true
227
183
  },
228
184
  "name": "AnimationTransitionReveal",
@@ -239,11 +195,11 @@
239
195
  "public": true
240
196
  },
241
197
  "rotation": {
242
- "value": "transform 200ms cubic-bezier(.2, 0, 0, 1)",
198
+ "value": "transform 200ms cubic-bezier(.2, 0, 0, 1) 0ms",
243
199
  "filePath": "tokens/animation/semantic/semantic.json",
244
200
  "isSource": true,
245
201
  "original": {
246
- "value": "transform {animation.duration.default} {animation.timing-function.default}",
202
+ "value": "transform {animation.duration.default} {animation.timing-function.default} 0ms",
247
203
  "public": true
248
204
  },
249
205
  "name": "AnimationTransitionRotation",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
3
  "description": "Design Tokens for the Pantheon Design System",
4
- "version": "2.0.0-alpha.21",
4
+ "version": "2.0.0-alpha.22",
5
5
  "publishConfig": {
6
6
  "access": "public",
7
7
  "registry": "https://registry.npmjs.org/",