@telus-uds/system-theme-tokens 0.0.2-prerelease.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/.ultra.cache.json +1 -0
- package/CHANGELOG.md +9 -0
- package/appearances.js +161 -0
- package/components.js +723 -0
- package/index.js +8 -0
- package/package.json +33 -0
- package/release-context.json +7 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"files":{"CHANGELOG.md":"e69de29bb2d1d6434b8b29ae775ad8c2e48c5391","appearances.js":"88e3931ba20e94df0d8bdcd06a65e6e92a26cc3c","components.js":"7013c45140e9b32ce7f76a01831140fd86511a34","index.js":"86648534105a25ec61f3b0d8f3603a9d6333a679","package.json":"f019e68519691f952058afa2dec675551970016b"},"deps":{"@telus-uds/system-constants":1642676493392.3472}}
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
### 0.0.2-prerelease.0 (2022-01-20)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **base:** validate theme token version ([#1067](https://github.com/telus/universal-design-system/issues/1067)) ([b853f78](https://github.com/telus/universal-design-system/commit/b853f7883543264ebd649f323f10bf714dbdea08))
|
package/appearances.js
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
const { viewports } = require('@telus-uds/system-constants')
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* shared appearances
|
|
5
|
+
*/
|
|
6
|
+
const focus = {
|
|
7
|
+
description:
|
|
8
|
+
"Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
9
|
+
values: [true],
|
|
10
|
+
type: 'state'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const hover = {
|
|
14
|
+
description:
|
|
15
|
+
"Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
16
|
+
values: [true],
|
|
17
|
+
type: 'state'
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const pressed = {
|
|
21
|
+
description:
|
|
22
|
+
'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
|
|
23
|
+
values: [true],
|
|
24
|
+
type: 'state'
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const inactive = {
|
|
28
|
+
description:
|
|
29
|
+
'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
|
|
30
|
+
values: [true],
|
|
31
|
+
type: 'state'
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const selected = {
|
|
35
|
+
description:
|
|
36
|
+
'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
|
|
37
|
+
values: [true],
|
|
38
|
+
type: 'state'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const expanded = {
|
|
42
|
+
description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
|
|
43
|
+
values: [true],
|
|
44
|
+
type: 'state'
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const validation = {
|
|
48
|
+
description: 'Validation states for form inputs',
|
|
49
|
+
values: ['error', 'success'],
|
|
50
|
+
type: 'state'
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// TODO this is used in radio and checkbox, should re-use validation state above?
|
|
54
|
+
const error = { values: [true], type: 'state' }
|
|
55
|
+
|
|
56
|
+
const checked = {
|
|
57
|
+
description: 'Corresponds to a selected state for a checkbox or radio',
|
|
58
|
+
values: [true],
|
|
59
|
+
type: 'state'
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
module.exports = {
|
|
63
|
+
// system-wide appearances
|
|
64
|
+
system: {
|
|
65
|
+
viewport: {
|
|
66
|
+
description:
|
|
67
|
+
'The size label for the current screen viewport based on the current screen width',
|
|
68
|
+
values: viewports.keys,
|
|
69
|
+
type: 'state'
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
Button: { focus, hover, pressed, inactive, selected },
|
|
73
|
+
ButtonGroupItem: { focus, hover, pressed, inactive, selected },
|
|
74
|
+
Checkbox: { checked, error, focus, hover, inactive },
|
|
75
|
+
ChevronLink: { hover },
|
|
76
|
+
ExpandCollapseControl: { pressed, hover, focus, expanded },
|
|
77
|
+
ExpandCollapsePanel: { expanded },
|
|
78
|
+
Feedback: { validation },
|
|
79
|
+
HorizontalScrollButton: { focus, hover, pressed },
|
|
80
|
+
IconButton: {
|
|
81
|
+
focus,
|
|
82
|
+
hover,
|
|
83
|
+
pressed
|
|
84
|
+
},
|
|
85
|
+
Link: {
|
|
86
|
+
focus,
|
|
87
|
+
hover,
|
|
88
|
+
pressed,
|
|
89
|
+
iconPosition: {
|
|
90
|
+
description:
|
|
91
|
+
'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
|
|
92
|
+
values: ['left', 'right'],
|
|
93
|
+
type: 'state'
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
Modal: {
|
|
97
|
+
maxWidth: {
|
|
98
|
+
description:
|
|
99
|
+
'Whether a modal should expand responsively to the maximum of 8 layout columns width',
|
|
100
|
+
values: [true],
|
|
101
|
+
type: 'state'
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
Notification: {
|
|
105
|
+
system: {
|
|
106
|
+
values: [true],
|
|
107
|
+
type: 'state'
|
|
108
|
+
},
|
|
109
|
+
style: {
|
|
110
|
+
values: ['success', 'warning', 'error'],
|
|
111
|
+
type: 'state'
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
PaginationPageButton: { focus, hover, pressed, selected },
|
|
115
|
+
PaginationSideButton: {
|
|
116
|
+
focus,
|
|
117
|
+
hover,
|
|
118
|
+
pressed,
|
|
119
|
+
selected,
|
|
120
|
+
direction: {
|
|
121
|
+
values: ['previous', 'next'],
|
|
122
|
+
description: "Determines which way does the button navigate in Pagination's context",
|
|
123
|
+
type: 'state'
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
ProgressBar: { inactive },
|
|
127
|
+
Radio: { checked, error, focus, hover, inactive },
|
|
128
|
+
RadioCard: { pressed, checked, error, focus, hover, inactive },
|
|
129
|
+
Search: { hover, focus, inactive },
|
|
130
|
+
SearchButton: { hover, focus, pressed, inactive },
|
|
131
|
+
Select: { validation, hover, focus, inactive },
|
|
132
|
+
SideNavItem: {
|
|
133
|
+
active: {
|
|
134
|
+
description:
|
|
135
|
+
'Used to mark currently active Item or and ItemGroup containing the currently active Item',
|
|
136
|
+
values: [true, false],
|
|
137
|
+
type: 'state'
|
|
138
|
+
},
|
|
139
|
+
type: {
|
|
140
|
+
description:
|
|
141
|
+
'`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
|
|
142
|
+
values: ['child', 'parent'],
|
|
143
|
+
type: 'state'
|
|
144
|
+
},
|
|
145
|
+
expanded,
|
|
146
|
+
hover
|
|
147
|
+
},
|
|
148
|
+
SideNavItemGroup: { expanded },
|
|
149
|
+
spacingScale: {
|
|
150
|
+
space: {
|
|
151
|
+
description: 'Index of the intended position on the spacing scale',
|
|
152
|
+
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
|
153
|
+
type: 'state'
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
TabsItem: { focus, hover, pressed, selected },
|
|
157
|
+
TagsItem: { focus, hover, pressed, inactive, selected },
|
|
158
|
+
TextInput: { validation, hover, focus, inactive },
|
|
159
|
+
ToggleSwitch: { focus, hover, pressed, inactive, selected },
|
|
160
|
+
TooltipButton: { focus, hover, pressed }
|
|
161
|
+
}
|
package/components.js
ADDED
|
@@ -0,0 +1,723 @@
|
|
|
1
|
+
// Define the required components and their supported tokens
|
|
2
|
+
module.exports = {
|
|
3
|
+
ActivityIndicator: ['size', 'thickness', 'color'],
|
|
4
|
+
Box: ['backgroundColor'],
|
|
5
|
+
Button: [
|
|
6
|
+
'borderColor',
|
|
7
|
+
'borderWidth',
|
|
8
|
+
'borderRadius',
|
|
9
|
+
'shadow',
|
|
10
|
+
|
|
11
|
+
'fontSize',
|
|
12
|
+
'color',
|
|
13
|
+
'lineHeight',
|
|
14
|
+
'textAlign',
|
|
15
|
+
'alignSelf',
|
|
16
|
+
'fontName',
|
|
17
|
+
'fontWeight',
|
|
18
|
+
|
|
19
|
+
'backgroundColor',
|
|
20
|
+
'opacity',
|
|
21
|
+
'paddingLeft',
|
|
22
|
+
'paddingRight',
|
|
23
|
+
'paddingTop',
|
|
24
|
+
'paddingBottom',
|
|
25
|
+
'width',
|
|
26
|
+
'minWidth',
|
|
27
|
+
|
|
28
|
+
'outerBorderColor',
|
|
29
|
+
'outerBorderWidth',
|
|
30
|
+
'outerBorderGap',
|
|
31
|
+
'outerBackgroundColor'
|
|
32
|
+
],
|
|
33
|
+
ButtonGroup: ['space', 'direction', 'alignItems', 'justifyContent', 'flexGrow', 'flexShrink'],
|
|
34
|
+
ButtonGroupItem: [
|
|
35
|
+
// These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
|
|
36
|
+
// https://github.com/telus/universal-design-system/issues/782
|
|
37
|
+
'borderColor',
|
|
38
|
+
'borderWidth',
|
|
39
|
+
'borderRadius',
|
|
40
|
+
'shadow',
|
|
41
|
+
'fontSize',
|
|
42
|
+
'color',
|
|
43
|
+
'lineHeight',
|
|
44
|
+
'textAlign',
|
|
45
|
+
'alignSelf',
|
|
46
|
+
'fontName',
|
|
47
|
+
'fontWeight',
|
|
48
|
+
'backgroundColor',
|
|
49
|
+
'opacity',
|
|
50
|
+
'paddingLeft',
|
|
51
|
+
'paddingRight',
|
|
52
|
+
'paddingTop',
|
|
53
|
+
'paddingBottom',
|
|
54
|
+
'width',
|
|
55
|
+
'minWidth',
|
|
56
|
+
'outerBorderColor',
|
|
57
|
+
'outerBorderWidth',
|
|
58
|
+
'outerBorderGap',
|
|
59
|
+
'outerBackgroundColor'
|
|
60
|
+
],
|
|
61
|
+
Card: [
|
|
62
|
+
'flex',
|
|
63
|
+
'backgroundColor',
|
|
64
|
+
'borderColor',
|
|
65
|
+
'borderRadius',
|
|
66
|
+
'borderWidth',
|
|
67
|
+
'paddingBottom',
|
|
68
|
+
'paddingLeft',
|
|
69
|
+
'paddingRight',
|
|
70
|
+
'paddingTop',
|
|
71
|
+
'minWidth',
|
|
72
|
+
'shadow'
|
|
73
|
+
],
|
|
74
|
+
Checkbox: [
|
|
75
|
+
'containerBackgroundColor',
|
|
76
|
+
'feedbackMarginBottom',
|
|
77
|
+
'feedbackMarginTop',
|
|
78
|
+
'feedbackPosition',
|
|
79
|
+
'icon',
|
|
80
|
+
'iconBackgroundColor',
|
|
81
|
+
'iconColor',
|
|
82
|
+
'iconSize',
|
|
83
|
+
'inputBackgroundColor',
|
|
84
|
+
'inputBorderColor',
|
|
85
|
+
'inputBorderRadius',
|
|
86
|
+
'inputBorderWidth',
|
|
87
|
+
'inputHeight',
|
|
88
|
+
'inputOutlineColor',
|
|
89
|
+
'inputOutlineWidth',
|
|
90
|
+
'inputShadow',
|
|
91
|
+
'inputWidth',
|
|
92
|
+
'labelColor',
|
|
93
|
+
'labelFontName',
|
|
94
|
+
'labelFontSize',
|
|
95
|
+
'labelFontWeight',
|
|
96
|
+
'labelLineHeight',
|
|
97
|
+
'labelMarginLeft'
|
|
98
|
+
],
|
|
99
|
+
ChevronLink: ['leftIcon', 'rightIcon', 'iconDisplace', 'iconSize', 'iconSpace'],
|
|
100
|
+
CheckboxGroup: ['space', 'fieldSpace'],
|
|
101
|
+
Divider: ['width', 'color'],
|
|
102
|
+
ExpandCollapse: ['borderColor', 'borderWidth', 'borderStyle'],
|
|
103
|
+
ExpandCollapseControl: [
|
|
104
|
+
'icon',
|
|
105
|
+
'iconColor',
|
|
106
|
+
'iconSize',
|
|
107
|
+
'iconGap',
|
|
108
|
+
'iconPosition',
|
|
109
|
+
'verticalAlign',
|
|
110
|
+
'justifyContent',
|
|
111
|
+
'paddingLeft',
|
|
112
|
+
'paddingRight',
|
|
113
|
+
'paddingTop',
|
|
114
|
+
'paddingBottom',
|
|
115
|
+
'borderWidth',
|
|
116
|
+
'borderColor',
|
|
117
|
+
'backgroundColor'
|
|
118
|
+
],
|
|
119
|
+
ExpandCollapsePanel: [
|
|
120
|
+
'expandDuration',
|
|
121
|
+
'collapseDuration',
|
|
122
|
+
'contentPaddingLeft',
|
|
123
|
+
'contentPaddingRight',
|
|
124
|
+
'contentPaddingTop',
|
|
125
|
+
'contentPaddingBottom'
|
|
126
|
+
],
|
|
127
|
+
Feedback: [
|
|
128
|
+
'backgroundColor',
|
|
129
|
+
'borderColor',
|
|
130
|
+
'borderWidth',
|
|
131
|
+
'borderRadius',
|
|
132
|
+
'paddingTop',
|
|
133
|
+
'paddingBottom',
|
|
134
|
+
'paddingLeft',
|
|
135
|
+
'paddingRight',
|
|
136
|
+
'space',
|
|
137
|
+
'color',
|
|
138
|
+
'fontName',
|
|
139
|
+
'fontWeight',
|
|
140
|
+
'lineHeight',
|
|
141
|
+
'titleFontSize',
|
|
142
|
+
'contentFontSize',
|
|
143
|
+
'icon',
|
|
144
|
+
'iconSize',
|
|
145
|
+
'iconColor',
|
|
146
|
+
'iconGap'
|
|
147
|
+
],
|
|
148
|
+
HorizontalScrollButton: [
|
|
149
|
+
'borderRadius',
|
|
150
|
+
'backgroundColor',
|
|
151
|
+
'borderColor',
|
|
152
|
+
'borderWidth',
|
|
153
|
+
'padding',
|
|
154
|
+
'shadow',
|
|
155
|
+
'iconSize',
|
|
156
|
+
'iconColor'
|
|
157
|
+
],
|
|
158
|
+
Icon: ['size', 'color', 'scale', 'translateX', 'translateY'],
|
|
159
|
+
InputLabel: [
|
|
160
|
+
'gap',
|
|
161
|
+
'color',
|
|
162
|
+
'fontName',
|
|
163
|
+
'fontWeight',
|
|
164
|
+
'fontSize',
|
|
165
|
+
'lineHeight',
|
|
166
|
+
'hintColor',
|
|
167
|
+
'hintFontName',
|
|
168
|
+
'hintFontWeight',
|
|
169
|
+
'hintFontSize',
|
|
170
|
+
'hintLineHeight'
|
|
171
|
+
],
|
|
172
|
+
InputSupports: ['space'],
|
|
173
|
+
IconButton: [
|
|
174
|
+
'backgroundColor',
|
|
175
|
+
'borderRadius',
|
|
176
|
+
'borderColor',
|
|
177
|
+
'borderWidth',
|
|
178
|
+
'outerBorderWidth',
|
|
179
|
+
'outerBorderColor',
|
|
180
|
+
'outerBorderGap',
|
|
181
|
+
'padding',
|
|
182
|
+
'shadow',
|
|
183
|
+
'iconColor',
|
|
184
|
+
'iconSize',
|
|
185
|
+
'iconScale',
|
|
186
|
+
'iconTranslateX',
|
|
187
|
+
'iconTranslateY'
|
|
188
|
+
],
|
|
189
|
+
Link: [
|
|
190
|
+
'color',
|
|
191
|
+
'textLine',
|
|
192
|
+
'textLineStyle',
|
|
193
|
+
'outerBorderColor',
|
|
194
|
+
'outerBorderWidth',
|
|
195
|
+
'outerBorderGap',
|
|
196
|
+
'outerBorderOutline',
|
|
197
|
+
'borderRadius',
|
|
198
|
+
'blockFontName',
|
|
199
|
+
'blockFontWeight',
|
|
200
|
+
'blockFontSize',
|
|
201
|
+
'blockLineHeight',
|
|
202
|
+
'icon',
|
|
203
|
+
'iconSize',
|
|
204
|
+
'iconSpace',
|
|
205
|
+
'iconTranslateX',
|
|
206
|
+
'iconTranslateY',
|
|
207
|
+
'alignSelf'
|
|
208
|
+
],
|
|
209
|
+
List: [
|
|
210
|
+
'itemFontWeight',
|
|
211
|
+
'itemFontSize',
|
|
212
|
+
'itemLineHeight',
|
|
213
|
+
'itemFontName',
|
|
214
|
+
'interItemMargin',
|
|
215
|
+
'interItemMarginWithDivider',
|
|
216
|
+
'dividerColor',
|
|
217
|
+
'dividerSize',
|
|
218
|
+
'itemBulletContainerWidth',
|
|
219
|
+
'itemBulletContainerAlign',
|
|
220
|
+
'itemBulletWidth',
|
|
221
|
+
'itemBulletHeight',
|
|
222
|
+
'itemBulletColor',
|
|
223
|
+
'itemIconSize',
|
|
224
|
+
'itemIconColor',
|
|
225
|
+
'listGutter'
|
|
226
|
+
],
|
|
227
|
+
Modal: [
|
|
228
|
+
'backdropColor',
|
|
229
|
+
'backdropOpacity',
|
|
230
|
+
'height',
|
|
231
|
+
'maxWidth',
|
|
232
|
+
'containerPaddingLeft',
|
|
233
|
+
'containerPaddingRight',
|
|
234
|
+
'containerPaddingTop',
|
|
235
|
+
'containerPaddingBottom',
|
|
236
|
+
'backgroundColor',
|
|
237
|
+
'borderRadius',
|
|
238
|
+
'shadow',
|
|
239
|
+
'paddingLeft',
|
|
240
|
+
'paddingRight',
|
|
241
|
+
'paddingTop',
|
|
242
|
+
'paddingBottom',
|
|
243
|
+
'closeIcon',
|
|
244
|
+
'closeIconColor',
|
|
245
|
+
'closeIconSize'
|
|
246
|
+
],
|
|
247
|
+
Notification: [
|
|
248
|
+
'backgroundColor',
|
|
249
|
+
'borderBottomWidth',
|
|
250
|
+
'borderTopWidth',
|
|
251
|
+
'borderLeftWidth',
|
|
252
|
+
'borderRightWidth',
|
|
253
|
+
'borderColor',
|
|
254
|
+
'borderRadius',
|
|
255
|
+
'paddingTop',
|
|
256
|
+
'paddingBottom',
|
|
257
|
+
'paddingLeft',
|
|
258
|
+
'paddingRight',
|
|
259
|
+
'color',
|
|
260
|
+
'fontSize',
|
|
261
|
+
'lineHeight',
|
|
262
|
+
'fontName',
|
|
263
|
+
'fontWeight',
|
|
264
|
+
'icon',
|
|
265
|
+
'iconColor',
|
|
266
|
+
'iconSize',
|
|
267
|
+
'iconGap',
|
|
268
|
+
'dismissIcon',
|
|
269
|
+
'dismissIconColor',
|
|
270
|
+
'dismissIconSize',
|
|
271
|
+
'dismissButtonGap'
|
|
272
|
+
],
|
|
273
|
+
Pagination: ['gap', 'truncateAbove', 'color', 'fontName', 'fontWeight', 'fontSize', 'lineHeight'],
|
|
274
|
+
PaginationPageButton: [
|
|
275
|
+
'borderColor',
|
|
276
|
+
'borderWidth',
|
|
277
|
+
'borderRadius',
|
|
278
|
+
'backgroundColor',
|
|
279
|
+
'paddingLeft',
|
|
280
|
+
'paddingRight',
|
|
281
|
+
'paddingTop',
|
|
282
|
+
'paddingBottom',
|
|
283
|
+
'width',
|
|
284
|
+
'outerBorderColor',
|
|
285
|
+
'outerBorderWidth',
|
|
286
|
+
'outerBorderGap',
|
|
287
|
+
'color',
|
|
288
|
+
'fontName',
|
|
289
|
+
'fontWeight',
|
|
290
|
+
'fontSize',
|
|
291
|
+
'lineHeight',
|
|
292
|
+
'textAlign',
|
|
293
|
+
'textLine'
|
|
294
|
+
],
|
|
295
|
+
PaginationSideButton: [
|
|
296
|
+
'borderColor',
|
|
297
|
+
'borderWidth',
|
|
298
|
+
'borderRadius',
|
|
299
|
+
'backgroundColor',
|
|
300
|
+
'paddingLeft',
|
|
301
|
+
'paddingRight',
|
|
302
|
+
'paddingTop',
|
|
303
|
+
'paddingBottom',
|
|
304
|
+
'outerBorderColor',
|
|
305
|
+
'color',
|
|
306
|
+
'fontName',
|
|
307
|
+
'fontWeight',
|
|
308
|
+
'fontSize',
|
|
309
|
+
'lineHeight',
|
|
310
|
+
'textLine',
|
|
311
|
+
'icon',
|
|
312
|
+
'iconSize',
|
|
313
|
+
'iconDisplace',
|
|
314
|
+
'width',
|
|
315
|
+
'textAlign'
|
|
316
|
+
],
|
|
317
|
+
Progress: ['backgroundColor', 'borderWidth', 'borderColor', 'borderRadius', 'height'],
|
|
318
|
+
ProgressBar: ['backgroundColor', 'borderRadius', 'gradient', 'outlineColor', 'outlineWidth'],
|
|
319
|
+
Radio: [
|
|
320
|
+
'checkedBackgroundColor',
|
|
321
|
+
'checkedSize',
|
|
322
|
+
'containerBackgroundColor',
|
|
323
|
+
'containerBorderRadius',
|
|
324
|
+
'containerOpacity',
|
|
325
|
+
'containerPaddingBottom',
|
|
326
|
+
'containerPaddingLeft',
|
|
327
|
+
'containerPaddingRight',
|
|
328
|
+
'containerPaddingTop',
|
|
329
|
+
'containerShadow',
|
|
330
|
+
'descriptionFontSize',
|
|
331
|
+
'descriptionLineHeight',
|
|
332
|
+
'descriptionMarginLeft',
|
|
333
|
+
'inputBackgroundColor',
|
|
334
|
+
'inputBorderColor',
|
|
335
|
+
'inputBorderWidth',
|
|
336
|
+
'inputOutlineColor',
|
|
337
|
+
'inputOutlineWidth',
|
|
338
|
+
'inputSize',
|
|
339
|
+
'outerBorderGap',
|
|
340
|
+
'outerBorderWidth',
|
|
341
|
+
'outerBorderColor',
|
|
342
|
+
'labelColor',
|
|
343
|
+
'labelFontName',
|
|
344
|
+
'labelFontSize',
|
|
345
|
+
'labelFontWeight',
|
|
346
|
+
'labelLineHeight',
|
|
347
|
+
'labelMarginLeft'
|
|
348
|
+
],
|
|
349
|
+
RadioCard: [
|
|
350
|
+
// Outer border
|
|
351
|
+
'outerBorderColor',
|
|
352
|
+
'outerBorderWidth',
|
|
353
|
+
'outerBorderGap',
|
|
354
|
+
|
|
355
|
+
// Card
|
|
356
|
+
'flex',
|
|
357
|
+
'backgroundColor',
|
|
358
|
+
'borderColor',
|
|
359
|
+
'borderRadius',
|
|
360
|
+
'borderWidth',
|
|
361
|
+
'paddingBottom',
|
|
362
|
+
'paddingLeft',
|
|
363
|
+
'paddingRight',
|
|
364
|
+
'paddingTop',
|
|
365
|
+
'minWidth',
|
|
366
|
+
'shadow',
|
|
367
|
+
|
|
368
|
+
// RadioButton
|
|
369
|
+
'radioCheckedBackgroundColor',
|
|
370
|
+
'radioCheckedSize',
|
|
371
|
+
'radioInputBackgroundColor',
|
|
372
|
+
'radioInputBorderColor',
|
|
373
|
+
'radioInputBorderWidth',
|
|
374
|
+
'radioInputOutlineColor',
|
|
375
|
+
'radioInputOutlineWidth',
|
|
376
|
+
'radioInputSize',
|
|
377
|
+
'radioOuterBorderColor',
|
|
378
|
+
'radioOuterBorderWidth',
|
|
379
|
+
'radioOuterBorderGap',
|
|
380
|
+
|
|
381
|
+
// Title text - duplicates Typography variant { size: 'h3' }
|
|
382
|
+
'fontSize',
|
|
383
|
+
'fontName',
|
|
384
|
+
'lineHeight',
|
|
385
|
+
'color',
|
|
386
|
+
'letterSpacing',
|
|
387
|
+
'textTransform',
|
|
388
|
+
'fontWeight',
|
|
389
|
+
|
|
390
|
+
// Spacing
|
|
391
|
+
'radioSpace',
|
|
392
|
+
'contentSpace'
|
|
393
|
+
],
|
|
394
|
+
RadioCardGroup: [
|
|
395
|
+
// Layout
|
|
396
|
+
'direction',
|
|
397
|
+
'space',
|
|
398
|
+
|
|
399
|
+
// Fieldset
|
|
400
|
+
'fieldSpace'
|
|
401
|
+
],
|
|
402
|
+
RadioGroup: ['space', 'fieldSpace'],
|
|
403
|
+
Search: [
|
|
404
|
+
'backgroundColor',
|
|
405
|
+
'color',
|
|
406
|
+
'borderWidth',
|
|
407
|
+
'borderColor',
|
|
408
|
+
'borderRadius',
|
|
409
|
+
'paddingTop',
|
|
410
|
+
'paddingBottom',
|
|
411
|
+
'paddingLeft',
|
|
412
|
+
'paddingRight',
|
|
413
|
+
'outerBackgroundColor',
|
|
414
|
+
'outerBorderWidth',
|
|
415
|
+
'outerBorderColor',
|
|
416
|
+
'outerBorderRadius',
|
|
417
|
+
'fontName',
|
|
418
|
+
'fontWeight',
|
|
419
|
+
'fontSize',
|
|
420
|
+
'lineHeight',
|
|
421
|
+
'placeholderColor',
|
|
422
|
+
'buttonsGap',
|
|
423
|
+
'clearButtonIcon',
|
|
424
|
+
'submitButtonIcon'
|
|
425
|
+
],
|
|
426
|
+
SearchButton: [
|
|
427
|
+
'borderColor',
|
|
428
|
+
'borderWidth',
|
|
429
|
+
'borderRadius',
|
|
430
|
+
'backgroundColor',
|
|
431
|
+
'opacity',
|
|
432
|
+
'paddingLeft',
|
|
433
|
+
'paddingRight',
|
|
434
|
+
'paddingBottom',
|
|
435
|
+
'paddingTop',
|
|
436
|
+
'iconSize',
|
|
437
|
+
'iconColor',
|
|
438
|
+
'shadow'
|
|
439
|
+
],
|
|
440
|
+
Select: [
|
|
441
|
+
'backgroundColor',
|
|
442
|
+
'color',
|
|
443
|
+
'borderWidth',
|
|
444
|
+
'borderColor',
|
|
445
|
+
'borderRadius',
|
|
446
|
+
'paddingTop',
|
|
447
|
+
'paddingBottom',
|
|
448
|
+
'paddingLeft',
|
|
449
|
+
'paddingRight',
|
|
450
|
+
'height',
|
|
451
|
+
'outerBackgroundColor',
|
|
452
|
+
'outerBorderWidth',
|
|
453
|
+
'outerBorderColor',
|
|
454
|
+
'fontSize',
|
|
455
|
+
'fontName',
|
|
456
|
+
'fontWeight',
|
|
457
|
+
'icon',
|
|
458
|
+
'iconSize',
|
|
459
|
+
'iconColor',
|
|
460
|
+
'validationIcon',
|
|
461
|
+
'validationIconSize',
|
|
462
|
+
'validationIconColor'
|
|
463
|
+
],
|
|
464
|
+
SideNav: ['borderColor', 'borderWidth', 'borderStyle'],
|
|
465
|
+
SideNavItem: [
|
|
466
|
+
'borderColor',
|
|
467
|
+
'borderWidth',
|
|
468
|
+
'borderStyle',
|
|
469
|
+
'paddingLeft',
|
|
470
|
+
'paddingRight',
|
|
471
|
+
'paddingTop',
|
|
472
|
+
'paddingBottom',
|
|
473
|
+
'justifyContent',
|
|
474
|
+
'color',
|
|
475
|
+
'accentOffset',
|
|
476
|
+
'accentPadding',
|
|
477
|
+
'accentWidth',
|
|
478
|
+
'accentBackgroundColor',
|
|
479
|
+
'fontWeight',
|
|
480
|
+
'fontName',
|
|
481
|
+
'fontSize',
|
|
482
|
+
'lineHeight',
|
|
483
|
+
'backgroundColor'
|
|
484
|
+
],
|
|
485
|
+
SideNavItemsGroup: [
|
|
486
|
+
'expandDuration',
|
|
487
|
+
'collapseDuration',
|
|
488
|
+
'contentPaddingLeft',
|
|
489
|
+
'contentPaddingRight',
|
|
490
|
+
'contentPaddingTop',
|
|
491
|
+
'contentPaddingBottom',
|
|
492
|
+
'icon',
|
|
493
|
+
'iconColor',
|
|
494
|
+
'iconGap',
|
|
495
|
+
'iconSize',
|
|
496
|
+
'iconPosition',
|
|
497
|
+
'verticalAlign',
|
|
498
|
+
'justifyContent'
|
|
499
|
+
],
|
|
500
|
+
spacingScale: ['size'],
|
|
501
|
+
StackView: ['alignItems', 'justifyContent', 'flexGrow', 'flexShrink'],
|
|
502
|
+
StepTracker: [
|
|
503
|
+
'completedIcon',
|
|
504
|
+
'completedIconColor',
|
|
505
|
+
'completedIconSize',
|
|
506
|
+
'connectorColor',
|
|
507
|
+
'connectorCompletedColor',
|
|
508
|
+
'connectorCompletedHeight',
|
|
509
|
+
'connectorHeight',
|
|
510
|
+
'connectorMinWidth',
|
|
511
|
+
'containerPaddingBottom',
|
|
512
|
+
'containerPaddingLeft',
|
|
513
|
+
'containerPaddingRight',
|
|
514
|
+
'containerPaddingTop',
|
|
515
|
+
'knobBackgroundColor',
|
|
516
|
+
'knobBorderColor',
|
|
517
|
+
'knobBorderWidth',
|
|
518
|
+
'knobCompletedBackgroundColor',
|
|
519
|
+
'knobCompletedBorderColor',
|
|
520
|
+
'knobCompletedPaddingLeft',
|
|
521
|
+
'knobCompletedPaddingTop',
|
|
522
|
+
'knobCurrentBackgroundColor',
|
|
523
|
+
'knobCurrentBorderColor',
|
|
524
|
+
'knobCurrentBorderWidth',
|
|
525
|
+
'knobCurrentInnerColor',
|
|
526
|
+
'knobCurrentInnerSize',
|
|
527
|
+
'knobCurrentPaddingLeft',
|
|
528
|
+
'knobCurrentPaddingTop',
|
|
529
|
+
'knobSize',
|
|
530
|
+
'labelColor',
|
|
531
|
+
'labelCurrentColor',
|
|
532
|
+
'labelCurrentFontWeight',
|
|
533
|
+
'labelCurrentFontName',
|
|
534
|
+
'labelDirection',
|
|
535
|
+
'labelFontSize',
|
|
536
|
+
'labelFontWeight',
|
|
537
|
+
'labelFontName',
|
|
538
|
+
'labelGap',
|
|
539
|
+
'labelLineHeight',
|
|
540
|
+
'labelMarginTop',
|
|
541
|
+
'labelPaddingLeft',
|
|
542
|
+
'labelPaddingRight',
|
|
543
|
+
'showStepLabel',
|
|
544
|
+
'showStepName',
|
|
545
|
+
'showStepTrackerLabel'
|
|
546
|
+
],
|
|
547
|
+
Tabs: [
|
|
548
|
+
'nextIcon',
|
|
549
|
+
'previousIcon',
|
|
550
|
+
'space',
|
|
551
|
+
'buttonClearance',
|
|
552
|
+
'gutter',
|
|
553
|
+
'borderBottomColor',
|
|
554
|
+
'borderBottomWidth'
|
|
555
|
+
],
|
|
556
|
+
TabsItem: [
|
|
557
|
+
'highlightColor',
|
|
558
|
+
'highlightBarHeight',
|
|
559
|
+
'highlightBarBorderRadius',
|
|
560
|
+
'highlightBarBorderWidth',
|
|
561
|
+
'highlightTriangleSize',
|
|
562
|
+
|
|
563
|
+
'backgroundColor',
|
|
564
|
+
'borderColor',
|
|
565
|
+
'borderWidth',
|
|
566
|
+
'borderRadius',
|
|
567
|
+
'maxWidth',
|
|
568
|
+
'paddingHorizontal',
|
|
569
|
+
'paddingVertical',
|
|
570
|
+
'space',
|
|
571
|
+
|
|
572
|
+
'textAlign',
|
|
573
|
+
'lineHeight',
|
|
574
|
+
'color',
|
|
575
|
+
'fontSize',
|
|
576
|
+
'letterSpacing',
|
|
577
|
+
'textTransform',
|
|
578
|
+
'fontScaleCap',
|
|
579
|
+
'fontName',
|
|
580
|
+
'fontWeight'
|
|
581
|
+
],
|
|
582
|
+
Tags: ['space', 'direction', 'alignItems', 'justifyContent', 'flexGrow', 'flexShrink'],
|
|
583
|
+
TagsItem: [
|
|
584
|
+
'icon',
|
|
585
|
+
'iconPosition',
|
|
586
|
+
'iconSpace',
|
|
587
|
+
'iconSize',
|
|
588
|
+
'iconColor',
|
|
589
|
+
'iconPadding',
|
|
590
|
+
'iconAlignSelf',
|
|
591
|
+
'iconTranslateX',
|
|
592
|
+
'iconTranslateY',
|
|
593
|
+
'iconBackground',
|
|
594
|
+
'iconBorderRadius',
|
|
595
|
+
// These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
|
|
596
|
+
// https://github.com/telus/universal-design-system/issues/782
|
|
597
|
+
'borderColor',
|
|
598
|
+
'borderWidth',
|
|
599
|
+
'borderRadius',
|
|
600
|
+
'shadow',
|
|
601
|
+
'fontSize',
|
|
602
|
+
'color',
|
|
603
|
+
'lineHeight',
|
|
604
|
+
'textAlign',
|
|
605
|
+
'alignSelf',
|
|
606
|
+
'fontName',
|
|
607
|
+
'fontWeight',
|
|
608
|
+
'backgroundColor',
|
|
609
|
+
'opacity',
|
|
610
|
+
'paddingLeft',
|
|
611
|
+
'paddingRight',
|
|
612
|
+
'paddingTop',
|
|
613
|
+
'paddingBottom',
|
|
614
|
+
'width',
|
|
615
|
+
'minWidth',
|
|
616
|
+
'outerBorderColor',
|
|
617
|
+
'outerBorderWidth',
|
|
618
|
+
'outerBorderGap',
|
|
619
|
+
'outerBackgroundColor'
|
|
620
|
+
],
|
|
621
|
+
TextArea: ['minLines', 'maxLines'],
|
|
622
|
+
TextInput: [
|
|
623
|
+
'backgroundColor',
|
|
624
|
+
'color',
|
|
625
|
+
'borderWidth',
|
|
626
|
+
'borderColor',
|
|
627
|
+
'borderRadius',
|
|
628
|
+
'paddingTop',
|
|
629
|
+
'paddingBottom',
|
|
630
|
+
'paddingLeft',
|
|
631
|
+
'paddingRight',
|
|
632
|
+
'outerBackgroundColor',
|
|
633
|
+
'outerBorderWidth',
|
|
634
|
+
'outerBorderColor',
|
|
635
|
+
'fontName',
|
|
636
|
+
'fontWeight',
|
|
637
|
+
'fontSize',
|
|
638
|
+
'lineHeight',
|
|
639
|
+
'icon',
|
|
640
|
+
'iconSize',
|
|
641
|
+
'iconColor'
|
|
642
|
+
],
|
|
643
|
+
ToggleSwitch: [
|
|
644
|
+
'borderColor',
|
|
645
|
+
'borderWidth',
|
|
646
|
+
'borderRadius',
|
|
647
|
+
'outerBorderColor',
|
|
648
|
+
'outerBorderWidth',
|
|
649
|
+
'outerBorderGap',
|
|
650
|
+
'outerBackgroundColor',
|
|
651
|
+
'backgroundColor',
|
|
652
|
+
'opacity',
|
|
653
|
+
'paddingLeft',
|
|
654
|
+
'paddingRight',
|
|
655
|
+
'paddingTop',
|
|
656
|
+
'paddingBottom',
|
|
657
|
+
'shadow',
|
|
658
|
+
'alignSelf',
|
|
659
|
+
'icon',
|
|
660
|
+
'width',
|
|
661
|
+
'trackBorderWidth',
|
|
662
|
+
'trackBorderColor',
|
|
663
|
+
'trackBorderRadius',
|
|
664
|
+
'iconSize',
|
|
665
|
+
'iconColor',
|
|
666
|
+
'switchSize',
|
|
667
|
+
'switchColor',
|
|
668
|
+
'switchBorderColor',
|
|
669
|
+
'switchBorderWidth',
|
|
670
|
+
'switchBorderRadius',
|
|
671
|
+
'switchShadow'
|
|
672
|
+
],
|
|
673
|
+
Tooltip: [
|
|
674
|
+
'backgroundColor',
|
|
675
|
+
'paddingTop',
|
|
676
|
+
'paddingBottom',
|
|
677
|
+
'paddingLeft',
|
|
678
|
+
'paddingRight',
|
|
679
|
+
'borderRadius',
|
|
680
|
+
'shadow',
|
|
681
|
+
|
|
682
|
+
'color',
|
|
683
|
+
'fontSize',
|
|
684
|
+
'lineHeight',
|
|
685
|
+
'fontName',
|
|
686
|
+
'fontWeight',
|
|
687
|
+
|
|
688
|
+
'arrowWidth',
|
|
689
|
+
'arrowBorderRadius',
|
|
690
|
+
'arrowOffset'
|
|
691
|
+
],
|
|
692
|
+
TooltipButton: [
|
|
693
|
+
'outerBorderColor',
|
|
694
|
+
'outerBorderWidth',
|
|
695
|
+
'outerBorderGap',
|
|
696
|
+
'borderRadius',
|
|
697
|
+
'width',
|
|
698
|
+
|
|
699
|
+
'icon',
|
|
700
|
+
'iconSize',
|
|
701
|
+
'iconColor',
|
|
702
|
+
'iconScale'
|
|
703
|
+
],
|
|
704
|
+
Typography: [
|
|
705
|
+
'fontName',
|
|
706
|
+
'fontWeight',
|
|
707
|
+
'fontSize',
|
|
708
|
+
'color',
|
|
709
|
+
'lineHeight',
|
|
710
|
+
'textTransform',
|
|
711
|
+
'fontScaleCap',
|
|
712
|
+
'letterSpacing'
|
|
713
|
+
],
|
|
714
|
+
Skeleton: [
|
|
715
|
+
'color',
|
|
716
|
+
'size',
|
|
717
|
+
'radius',
|
|
718
|
+
'baseWidth',
|
|
719
|
+
'characters',
|
|
720
|
+
'spaceBetweenLines',
|
|
721
|
+
'squareRadius'
|
|
722
|
+
]
|
|
723
|
+
}
|
package/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@telus-uds/system-theme-tokens",
|
|
3
|
+
"version": "0.0.2-prerelease.0",
|
|
4
|
+
"description": "Theme token schema",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"system"
|
|
7
|
+
],
|
|
8
|
+
"author": "TELUS Digital",
|
|
9
|
+
"homepage": "https://github.com/telus/universal-design-system#readme",
|
|
10
|
+
"license": "UNLICENSED",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/telus/universal-design-system.git"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"test": "jest",
|
|
17
|
+
"release": "standard-version",
|
|
18
|
+
"build": "echo 'Empty build script, refer to root README for why this exists...'",
|
|
19
|
+
"lint": "telus-standard --verbose",
|
|
20
|
+
"lint:fix": "telus-standard --verbose --fix",
|
|
21
|
+
"format": "prettier --write ."
|
|
22
|
+
},
|
|
23
|
+
"bugs": {
|
|
24
|
+
"url": "https://github.com/telus/universal-design-system/issues"
|
|
25
|
+
},
|
|
26
|
+
"main": "index.js",
|
|
27
|
+
"standard-engine": {
|
|
28
|
+
"skip": true
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@telus-uds/system-constants": "^0.0.2-prerelease.3"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"previousReleaseTag": "@telus-uds/system-theme-tokens/v0.0.1",
|
|
3
|
+
"changelog": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n### 0.0.2-prerelease.0 (2022-01-20)\n\n\n### Features\n\n* **base:** validate theme token version ([#1067](https://github.com/telus/universal-design-system/issues/1067)) ([b853f78](https://github.com/telus/universal-design-system/commit/b853f7883543264ebd649f323f10bf714dbdea08))",
|
|
4
|
+
"releaseTag": "@telus-uds/system-theme-tokens/v0.0.2-prerelease.0",
|
|
5
|
+
"newVersion": "0.0.2-prerelease.0",
|
|
6
|
+
"packageName": "@telus-uds/system-theme-tokens"
|
|
7
|
+
}
|