@telus-uds/system-theme-tokens 4.16.0 → 4.17.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +11 -1
  2. package/build/cjs/appearances.js +5 -0
  3. package/build/cjs/components.js +69 -1
  4. package/build/esm/appearances.js +5 -0
  5. package/build/esm/components.js +69 -1
  6. package/package.json +1 -1
  7. package/src/appearances.js +1 -0
  8. package/src/components.js +69 -1
package/CHANGELOG.md CHANGED
@@ -1,9 +1,19 @@
1
1
  # Change Log - @telus-uds/system-theme-tokens
2
2
 
3
- This log was last generated on Wed, 19 Nov 2025 05:51:40 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 12 Dec 2025 05:37:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 4.17.0
8
+
9
+ Fri, 12 Dec 2025 05:37:21 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - `Card`: new tokens added for interactive mode for FullBleedContent (35577399+JoshHC@users.noreply.github.com)
14
+ - `Shortcuts`: add component definition (guillermo.peitzner@telus.com)
15
+ - `Listbox & NavigationBar`: add `secondLevel` variant (sergio.ramirez@telus.com)
16
+
7
17
  ## 4.16.0
8
18
 
9
19
  Wed, 19 Nov 2025 05:51:40 GMT
package/build/cjs/appearances.js CHANGED
@@ -349,6 +349,11 @@ var _default = exports.default = {
349
349
  type: 'state'
350
350
  }
351
351
  },
352
+ ShortcutsItem: {
353
+ focus,
354
+ hover,
355
+ pressed
356
+ },
352
357
  SideNavItem: {
353
358
  active: {
354
359
  description: 'Used to mark currently active Item or and ItemGroup containing the currently active Item',
package/build/cjs/components.js CHANGED
@@ -137,6 +137,42 @@ var _default = exports.default = {
137
137
  notificationIconGap: 'size',
138
138
  notificationIconSize: 'size'
139
139
  },
140
+ Shortcuts: {
141
+ mainContainerBottomPadding: 'size',
142
+ mainContainerGap: 'size',
143
+ mainContainerLeftPadding: 'size',
144
+ mainContainerRightPadding: 'size',
145
+ mainContainerTopPadding: 'size',
146
+ nextIcon: 'icon',
147
+ previousIcon: 'icon'
148
+ },
149
+ ShortcutsItem: {
150
+ borderColor: 'color',
151
+ borderRadius: 'radius',
152
+ borderWidth: 'border',
153
+ iconBackgroundColor: 'color',
154
+ iconColor: 'color',
155
+ iconContainerPaddingBottom: 'size',
156
+ iconContainerPaddingLeft: 'size',
157
+ iconContainerPaddingRight: 'size',
158
+ iconContainerPaddingTop: 'size',
159
+ iconSize: 'size',
160
+ iconWidth: 'size',
161
+ imageHeight: 'size',
162
+ imageWidth: 'size',
163
+ labelContainerPaddingBottom: 'size',
164
+ labelContainerPaddingLeft: 'size',
165
+ labelContainerPaddingRight: 'size',
166
+ labelContainerPaddingTop: 'size',
167
+ labelFontColor: 'color',
168
+ labelFontName: 'fontName',
169
+ labelFontSize: 'fontSize',
170
+ labelFontWeight: 'fontWeight',
171
+ labelLineHeight: 'lineHeight',
172
+ labelTextAlign: 'flexJustifyContent',
173
+ labelUnderline: 'textLine',
174
+ width: 'size'
175
+ },
140
176
  Table: {
141
177
  borderColor: 'color',
142
178
  borderWidth: 'border',
@@ -622,6 +658,10 @@ var _default = exports.default = {
622
658
  paddingLeft: 'size',
623
659
  paddingRight: 'size',
624
660
  paddingTop: 'size',
661
+ marginTop: 'size',
662
+ marginBottom: 'size',
663
+ marginLeft: 'size',
664
+ marginRight: 'size',
625
665
  minWidth: 'size',
626
666
  shadow: 'shadow',
627
667
  contentAlignItems: 'flexAlign',
@@ -771,6 +811,10 @@ var _default = exports.default = {
771
811
  paddingLeft: 'size',
772
812
  paddingRight: 'size',
773
813
  paddingTop: 'size',
814
+ marginBottom: 'size',
815
+ marginLeft: 'size',
816
+ marginRight: 'size',
817
+ marginTop: 'size',
774
818
  minWidth: 'size',
775
819
  shadow: 'shadow',
776
820
  contentAlignItems: 'flexAlign',
@@ -1147,6 +1191,7 @@ var _default = exports.default = {
1147
1191
  },
1148
1192
  Listbox: {
1149
1193
  containerBackgroundColor: 'color',
1194
+ borderRadius: 'radius',
1150
1195
  groupBorderRadius: 'radius',
1151
1196
  groupBorderLeftWidth: 'border',
1152
1197
  groupBorderRightWidth: 'border',
@@ -1193,7 +1238,26 @@ var _default = exports.default = {
1193
1238
  minHeight: 'size',
1194
1239
  itemHeight: 'size',
1195
1240
  groupHeight: 'size',
1196
- lineHeight: 'lineHeight'
1241
+ lineHeight: 'lineHeight',
1242
+ secondLevelHeaderBackgroundColor: 'color',
1243
+ secondLevelHeaderPaddingTop: 'size',
1244
+ secondLevelHeaderPaddingBottom: 'size',
1245
+ secondLevelHeaderPaddingLeft: 'size',
1246
+ secondLevelHeaderPaddingRight: 'size',
1247
+ secondLevelBackIcon: 'icon',
1248
+ secondLevelBackIconColor: 'color',
1249
+ secondLevelBackIconSize: 'size',
1250
+ secondLevelBackLinkColor: 'color',
1251
+ secondLevelBackLinkFontSize: 'size',
1252
+ secondLevelBackLinkFontName: 'fontName',
1253
+ secondLevelBackLinkFontWeight: 'fontWeight',
1254
+ secondLevelCloseIcon: 'icon',
1255
+ secondLevelCloseIconSize: 'size',
1256
+ secondLevelCloseButtonBorderWidth: 'border',
1257
+ secondLevelCloseButtonPadding: 'size',
1258
+ secondLevelDividerColor: 'color',
1259
+ secondLevelDividerWidth: 'size',
1260
+ secondLevelParentIcon: 'icon'
1197
1261
  },
1198
1262
  OrderedList: {
1199
1263
  headerFontWeight: 'fontWeight',
@@ -1586,6 +1650,10 @@ var _default = exports.default = {
1586
1650
  paddingLeft: 'size',
1587
1651
  paddingRight: 'size',
1588
1652
  paddingTop: 'size',
1653
+ marginBottom: 'size',
1654
+ marginLeft: 'size',
1655
+ marginRight: 'size',
1656
+ marginTop: 'size',
1589
1657
  minWidth: 'size',
1590
1658
  shadow: 'shadow',
1591
1659
  contentAlignItems: 'flexAlign',
package/build/esm/appearances.js CHANGED
@@ -344,6 +344,11 @@ export default {
344
344
  type: 'state'
345
345
  }
346
346
  },
347
+ ShortcutsItem: {
348
+ focus,
349
+ hover,
350
+ pressed
351
+ },
347
352
  SideNavItem: {
348
353
  active: {
349
354
  description: 'Used to mark currently active Item or and ItemGroup containing the currently active Item',
package/build/esm/components.js CHANGED
@@ -131,6 +131,42 @@ export default {
131
131
  notificationIconGap: 'size',
132
132
  notificationIconSize: 'size'
133
133
  },
134
+ Shortcuts: {
135
+ mainContainerBottomPadding: 'size',
136
+ mainContainerGap: 'size',
137
+ mainContainerLeftPadding: 'size',
138
+ mainContainerRightPadding: 'size',
139
+ mainContainerTopPadding: 'size',
140
+ nextIcon: 'icon',
141
+ previousIcon: 'icon'
142
+ },
143
+ ShortcutsItem: {
144
+ borderColor: 'color',
145
+ borderRadius: 'radius',
146
+ borderWidth: 'border',
147
+ iconBackgroundColor: 'color',
148
+ iconColor: 'color',
149
+ iconContainerPaddingBottom: 'size',
150
+ iconContainerPaddingLeft: 'size',
151
+ iconContainerPaddingRight: 'size',
152
+ iconContainerPaddingTop: 'size',
153
+ iconSize: 'size',
154
+ iconWidth: 'size',
155
+ imageHeight: 'size',
156
+ imageWidth: 'size',
157
+ labelContainerPaddingBottom: 'size',
158
+ labelContainerPaddingLeft: 'size',
159
+ labelContainerPaddingRight: 'size',
160
+ labelContainerPaddingTop: 'size',
161
+ labelFontColor: 'color',
162
+ labelFontName: 'fontName',
163
+ labelFontSize: 'fontSize',
164
+ labelFontWeight: 'fontWeight',
165
+ labelLineHeight: 'lineHeight',
166
+ labelTextAlign: 'flexJustifyContent',
167
+ labelUnderline: 'textLine',
168
+ width: 'size'
169
+ },
134
170
  Table: {
135
171
  borderColor: 'color',
136
172
  borderWidth: 'border',
@@ -616,6 +652,10 @@ export default {
616
652
  paddingLeft: 'size',
617
653
  paddingRight: 'size',
618
654
  paddingTop: 'size',
655
+ marginTop: 'size',
656
+ marginBottom: 'size',
657
+ marginLeft: 'size',
658
+ marginRight: 'size',
619
659
  minWidth: 'size',
620
660
  shadow: 'shadow',
621
661
  contentAlignItems: 'flexAlign',
@@ -765,6 +805,10 @@ export default {
765
805
  paddingLeft: 'size',
766
806
  paddingRight: 'size',
767
807
  paddingTop: 'size',
808
+ marginBottom: 'size',
809
+ marginLeft: 'size',
810
+ marginRight: 'size',
811
+ marginTop: 'size',
768
812
  minWidth: 'size',
769
813
  shadow: 'shadow',
770
814
  contentAlignItems: 'flexAlign',
@@ -1141,6 +1185,7 @@ export default {
1141
1185
  },
1142
1186
  Listbox: {
1143
1187
  containerBackgroundColor: 'color',
1188
+ borderRadius: 'radius',
1144
1189
  groupBorderRadius: 'radius',
1145
1190
  groupBorderLeftWidth: 'border',
1146
1191
  groupBorderRightWidth: 'border',
@@ -1187,7 +1232,26 @@ export default {
1187
1232
  minHeight: 'size',
1188
1233
  itemHeight: 'size',
1189
1234
  groupHeight: 'size',
1190
- lineHeight: 'lineHeight'
1235
+ lineHeight: 'lineHeight',
1236
+ secondLevelHeaderBackgroundColor: 'color',
1237
+ secondLevelHeaderPaddingTop: 'size',
1238
+ secondLevelHeaderPaddingBottom: 'size',
1239
+ secondLevelHeaderPaddingLeft: 'size',
1240
+ secondLevelHeaderPaddingRight: 'size',
1241
+ secondLevelBackIcon: 'icon',
1242
+ secondLevelBackIconColor: 'color',
1243
+ secondLevelBackIconSize: 'size',
1244
+ secondLevelBackLinkColor: 'color',
1245
+ secondLevelBackLinkFontSize: 'size',
1246
+ secondLevelBackLinkFontName: 'fontName',
1247
+ secondLevelBackLinkFontWeight: 'fontWeight',
1248
+ secondLevelCloseIcon: 'icon',
1249
+ secondLevelCloseIconSize: 'size',
1250
+ secondLevelCloseButtonBorderWidth: 'border',
1251
+ secondLevelCloseButtonPadding: 'size',
1252
+ secondLevelDividerColor: 'color',
1253
+ secondLevelDividerWidth: 'size',
1254
+ secondLevelParentIcon: 'icon'
1191
1255
  },
1192
1256
  OrderedList: {
1193
1257
  headerFontWeight: 'fontWeight',
@@ -1580,6 +1644,10 @@ export default {
1580
1644
  paddingLeft: 'size',
1581
1645
  paddingRight: 'size',
1582
1646
  paddingTop: 'size',
1647
+ marginBottom: 'size',
1648
+ marginLeft: 'size',
1649
+ marginRight: 'size',
1650
+ marginTop: 'size',
1583
1651
  minWidth: 'size',
1584
1652
  shadow: 'shadow',
1585
1653
  contentAlignItems: 'flexAlign',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telus-uds/system-theme-tokens",
3
- "version": "4.16.0",
3
+ "version": "4.17.0",
4
4
  "description": "Theme token schema for UDS",
5
5
  "keywords": [
6
6
  "system"
package/src/appearances.js CHANGED
@@ -226,6 +226,7 @@ export default {
226
226
  type: 'state'
227
227
  }
228
228
  },
229
+ ShortcutsItem: { focus, hover, pressed },
229
230
  SideNavItem: {
230
231
  active: {
231
232
  description:
package/src/components.js CHANGED
@@ -131,6 +131,42 @@ export default {
131
131
  notificationIconGap: 'size',
132
132
  notificationIconSize: 'size'
133
133
  },
134
+ Shortcuts: {
135
+ mainContainerBottomPadding: 'size',
136
+ mainContainerGap: 'size',
137
+ mainContainerLeftPadding: 'size',
138
+ mainContainerRightPadding: 'size',
139
+ mainContainerTopPadding: 'size',
140
+ nextIcon: 'icon',
141
+ previousIcon: 'icon'
142
+ },
143
+ ShortcutsItem: {
144
+ borderColor: 'color',
145
+ borderRadius: 'radius',
146
+ borderWidth: 'border',
147
+ iconBackgroundColor: 'color',
148
+ iconColor: 'color',
149
+ iconContainerPaddingBottom: 'size',
150
+ iconContainerPaddingLeft: 'size',
151
+ iconContainerPaddingRight: 'size',
152
+ iconContainerPaddingTop: 'size',
153
+ iconSize: 'size',
154
+ iconWidth: 'size',
155
+ imageHeight: 'size',
156
+ imageWidth: 'size',
157
+ labelContainerPaddingBottom: 'size',
158
+ labelContainerPaddingLeft: 'size',
159
+ labelContainerPaddingRight: 'size',
160
+ labelContainerPaddingTop: 'size',
161
+ labelFontColor: 'color',
162
+ labelFontName: 'fontName',
163
+ labelFontSize: 'fontSize',
164
+ labelFontWeight: 'fontWeight',
165
+ labelLineHeight: 'lineHeight',
166
+ labelTextAlign: 'flexJustifyContent',
167
+ labelUnderline: 'textLine',
168
+ width: 'size'
169
+ },
134
170
  Table: {
135
171
  borderColor: 'color',
136
172
  borderWidth: 'border',
@@ -616,6 +652,10 @@ export default {
616
652
  paddingLeft: 'size',
617
653
  paddingRight: 'size',
618
654
  paddingTop: 'size',
655
+ marginTop: 'size',
656
+ marginBottom: 'size',
657
+ marginLeft: 'size',
658
+ marginRight: 'size',
619
659
  minWidth: 'size',
620
660
  shadow: 'shadow',
621
661
  contentAlignItems: 'flexAlign',
@@ -771,6 +811,10 @@ export default {
771
811
  paddingLeft: 'size',
772
812
  paddingRight: 'size',
773
813
  paddingTop: 'size',
814
+ marginBottom: 'size',
815
+ marginLeft: 'size',
816
+ marginRight: 'size',
817
+ marginTop: 'size',
774
818
  minWidth: 'size',
775
819
  shadow: 'shadow',
776
820
  contentAlignItems: 'flexAlign',
@@ -1149,6 +1193,7 @@ export default {
1149
1193
  },
1150
1194
  Listbox: {
1151
1195
  containerBackgroundColor: 'color',
1196
+ borderRadius: 'radius',
1152
1197
  groupBorderRadius: 'radius',
1153
1198
  groupBorderLeftWidth: 'border',
1154
1199
  groupBorderRightWidth: 'border',
@@ -1195,7 +1240,26 @@ export default {
1195
1240
  minHeight: 'size',
1196
1241
  itemHeight: 'size',
1197
1242
  groupHeight: 'size',
1198
- lineHeight: 'lineHeight'
1243
+ lineHeight: 'lineHeight',
1244
+ secondLevelHeaderBackgroundColor: 'color',
1245
+ secondLevelHeaderPaddingTop: 'size',
1246
+ secondLevelHeaderPaddingBottom: 'size',
1247
+ secondLevelHeaderPaddingLeft: 'size',
1248
+ secondLevelHeaderPaddingRight: 'size',
1249
+ secondLevelBackIcon: 'icon',
1250
+ secondLevelBackIconColor: 'color',
1251
+ secondLevelBackIconSize: 'size',
1252
+ secondLevelBackLinkColor: 'color',
1253
+ secondLevelBackLinkFontSize: 'size',
1254
+ secondLevelBackLinkFontName: 'fontName',
1255
+ secondLevelBackLinkFontWeight: 'fontWeight',
1256
+ secondLevelCloseIcon: 'icon',
1257
+ secondLevelCloseIconSize: 'size',
1258
+ secondLevelCloseButtonBorderWidth: 'border',
1259
+ secondLevelCloseButtonPadding: 'size',
1260
+ secondLevelDividerColor: 'color',
1261
+ secondLevelDividerWidth: 'size',
1262
+ secondLevelParentIcon: 'icon'
1199
1263
  },
1200
1264
  OrderedList: {
1201
1265
  headerFontWeight: 'fontWeight',
@@ -1591,6 +1655,10 @@ export default {
1591
1655
  paddingLeft: 'size',
1592
1656
  paddingRight: 'size',
1593
1657
  paddingTop: 'size',
1658
+ marginBottom: 'size',
1659
+ marginLeft: 'size',
1660
+ marginRight: 'size',
1661
+ marginTop: 'size',
1594
1662
  minWidth: 'size',
1595
1663
  shadow: 'shadow',
1596
1664
  contentAlignItems: 'flexAlign',