@pantheon-systems/pds-design-tokens 2.0.0-alpha.1 → 2.0.0-alpha.3
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.d.ts +113 -0
- package/build/js/variables.js +12 -0
- package/build/json/tokens.json +126 -0
- package/package.json +2 -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;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const ANIMATION_DELAY_DEFAULT: string;
|
|
6
|
+
export const ANIMATION_DURATION_DEFAULT: string;
|
|
7
|
+
export const ANIMATION_DURATION_DROPDOWN: string;
|
|
8
|
+
export const ANIMATION_DURATION_REVEAL: string;
|
|
9
|
+
export const ANIMATION_TIMING_FUNCTION_DEFAULT: string;
|
|
10
|
+
export const ANIMATION_TRANSITION_BUTTON: string;
|
|
11
|
+
export const ANIMATION_TRANSITION_DEFAULT: string;
|
|
12
|
+
export const ANIMATION_TRANSITION_FOCUS: string;
|
|
13
|
+
export const ANIMATION_TRANSITION_INPUT: string;
|
|
14
|
+
export const ANIMATION_TRANSITION_LINK: string;
|
|
15
|
+
export const ANIMATION_TRANSITION_REVEAL: string;
|
|
16
|
+
export const ANIMATION_TRANSITION_ROTATION: string;
|
|
17
|
+
export const BORDER_WIDTH_STEPPER: string;
|
|
18
|
+
export const BORDER_WIDTH_DEFAULT: string;
|
|
19
|
+
export const BORDER_WIDTH_OUTLINE: string;
|
|
20
|
+
export const BORDER_RADIUS_DEFAULT: string;
|
|
21
|
+
export const BORDER_RADIUS_BAR: string;
|
|
22
|
+
export const BORDER_RADIUS_BUTTON: string;
|
|
23
|
+
export const BORDER_RADIUS_CONTAINER: string;
|
|
24
|
+
export const BORDER_RADIUS_INPUT: string;
|
|
25
|
+
export const CONTAINER_MODAL_WIDTH_SMALL: string;
|
|
26
|
+
export const CONTAINER_MODAL_WIDTH_MEDIUM: string;
|
|
27
|
+
export const CONTAINER_MODAL_WIDTH_LARGE: string;
|
|
28
|
+
export const CONTAINER_MODAL_WIDTH_XL: string;
|
|
29
|
+
export const CONTAINER_TOOLTIP_MAX_WIDTH: string;
|
|
30
|
+
export const CONTAINER_PADDING_BASE: string;
|
|
31
|
+
export const CONTAINER_PADDING_NARROW_BP_MD: string;
|
|
32
|
+
export const CONTAINER_PADDING_NARROW_BP_LG: string;
|
|
33
|
+
export const CONTAINER_PADDING_STANDARD_BP_MD: string;
|
|
34
|
+
export const CONTAINER_PADDING_STANDARD_BP_LG: string;
|
|
35
|
+
export const CONTAINER_PADDING_WIDE_BP_MD: string;
|
|
36
|
+
export const CONTAINER_PADDING_WIDE_BP_LG: string;
|
|
37
|
+
export const CONTAINER_MAX_WIDTH_NARROW: string;
|
|
38
|
+
export const CONTAINER_MAX_WIDTH_STANDARD: string;
|
|
39
|
+
export const CONTAINER_MAX_WIDTH_WIDE: string;
|
|
40
|
+
export const CONTAINER_MAX_WIDTH_X_WIDE: string;
|
|
41
|
+
export const GRID_COLUMNS_4_GAP: string;
|
|
42
|
+
export const GRID_COLUMNS_12_BP_MD_GAP_NARROW: string;
|
|
43
|
+
export const GRID_COLUMNS_12_BP_MD_GAP_STANDARD: string;
|
|
44
|
+
export const GRID_COLUMNS_12_BP_MD_GAP_WIDE: string;
|
|
45
|
+
export const GRID_COLUMNS_12_BP_LG_GAP_NARROW: string;
|
|
46
|
+
export const GRID_COLUMNS_12_BP_LG_GAP_STANDARD: string;
|
|
47
|
+
export const GRID_COLUMNS_12_BP_LG_GAP_WIDE: string;
|
|
48
|
+
export const GRID_MARKETING_COLUMN_SMALL: string;
|
|
49
|
+
export const GRID_MARKETING_COLUMN_MEDIUM_LARGE: string;
|
|
50
|
+
export const GRID_MARKETING_GAP_SMALL: string;
|
|
51
|
+
export const GRID_MARKETING_GAP_MEDIUM_LARGE: string;
|
|
52
|
+
export const SPACING_DASHBOARD_NAV_ITEM_HEIGHT: string;
|
|
53
|
+
export const SPACING_DASHBOARD_NAV_ITEM_PADDING: string;
|
|
54
|
+
export const SPACING_8XL: string;
|
|
55
|
+
export const SPACING_7XL: string;
|
|
56
|
+
export const SPACING_6XL: string;
|
|
57
|
+
export const SPACING_5XL: string;
|
|
58
|
+
export const SPACING_4XL: string;
|
|
59
|
+
export const SPACING_3XL: string;
|
|
60
|
+
export const SPACING_2XL: string;
|
|
61
|
+
export const SPACING_XL: string;
|
|
62
|
+
export const SPACING_L: string;
|
|
63
|
+
export const SPACING_M: string;
|
|
64
|
+
export const SPACING_S: string;
|
|
65
|
+
export const SPACING_XS: string;
|
|
66
|
+
export const SPACING_2XS: string;
|
|
67
|
+
export const SPACING_3XS: string;
|
|
68
|
+
export const SPACING_4XS: string;
|
|
69
|
+
export const SPACING_5XS: string;
|
|
70
|
+
export const SPACING_6XS: string;
|
|
71
|
+
export const SPACING_7XS: string;
|
|
72
|
+
export const SPACING_8XS: string;
|
|
73
|
+
export const TYPOGRAPHY_SIZE_CODE_BLOCK: string;
|
|
74
|
+
export const TYPOGRAPHY_SIZE_7XL: string;
|
|
75
|
+
export const TYPOGRAPHY_SIZE_6XL: string;
|
|
76
|
+
export const TYPOGRAPHY_SIZE_5XL: string;
|
|
77
|
+
export const TYPOGRAPHY_SIZE_4XL: string;
|
|
78
|
+
export const TYPOGRAPHY_SIZE_3XL: string;
|
|
79
|
+
export const TYPOGRAPHY_SIZE_2XL: string;
|
|
80
|
+
export const TYPOGRAPHY_SIZE_XL: string;
|
|
81
|
+
export const TYPOGRAPHY_SIZE_L: string;
|
|
82
|
+
export const TYPOGRAPHY_SIZE_M: string;
|
|
83
|
+
export const TYPOGRAPHY_SIZE_S: string;
|
|
84
|
+
export const TYPOGRAPHY_SIZE_XS: string;
|
|
85
|
+
export const TYPOGRAPHY_SIZE_2XS: string;
|
|
86
|
+
export const TYPOGRAPHY_SIZE_DEFAULT: string;
|
|
87
|
+
export const TYPOGRAPHY_SIZE_INPUT_LABEL: string;
|
|
88
|
+
export const TYPOGRAPHY_FF_SANS: string;
|
|
89
|
+
export const TYPOGRAPHY_FF_SERIF: string;
|
|
90
|
+
export const TYPOGRAPHY_FF_MONO: string;
|
|
91
|
+
export const TYPOGRAPHY_FW_LIGHT: number;
|
|
92
|
+
export const TYPOGRAPHY_FW_REGULAR: number;
|
|
93
|
+
export const TYPOGRAPHY_FW_MEDIUM: number;
|
|
94
|
+
export const TYPOGRAPHY_FW_SEMIBOLD: number;
|
|
95
|
+
export const TYPOGRAPHY_FW_BOLD: number;
|
|
96
|
+
export const TYPOGRAPHY_FONT_CSS_IMPORT: string;
|
|
97
|
+
export const TYPOGRAPHY_LS_XL: string;
|
|
98
|
+
export const TYPOGRAPHY_LS_L: string;
|
|
99
|
+
export const TYPOGRAPHY_LS_M: string;
|
|
100
|
+
export const TYPOGRAPHY_LS_S: string;
|
|
101
|
+
export const TYPOGRAPHY_LH_XL: string;
|
|
102
|
+
export const TYPOGRAPHY_LH_L: string;
|
|
103
|
+
export const TYPOGRAPHY_LH_M: string;
|
|
104
|
+
export const TYPOGRAPHY_LH_S: string;
|
|
105
|
+
export const TYPOGRAPHY_MULTIPLIER_SMALL: string;
|
|
106
|
+
export const TYPOGRAPHY_MULTIPLIER_MEDIUM: string;
|
|
107
|
+
export const Z_INDEX_NAVIGATION: number;
|
|
108
|
+
export const Z_INDEX_DROPDOWN: number;
|
|
109
|
+
export const Z_INDEX_NOTIFICATIONS: number;
|
|
110
|
+
export const Z_INDEX_OVERLAY: number;
|
|
111
|
+
export const Z_INDEX_MODAL: number;
|
|
112
|
+
export const Z_INDEX_MAX: number;
|
|
113
|
+
export const Z_INDEX_RESET: number;
|
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
|
@@ -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.
|
|
4
|
+
"version": "2.0.0-alpha.3",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"Design Tokens"
|
|
16
16
|
],
|
|
17
17
|
"main": "index.js",
|
|
18
|
+
"types": "build/js/variables.d.ts",
|
|
18
19
|
"files": [
|
|
19
20
|
"build"
|
|
20
21
|
],
|