@telus-uds/theme-koodo 7.18.2 → 7.20.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 (271) hide show
  1. package/build/android/Button.json +4 -4
  2. package/build/android/Card.json +4 -0
  3. package/build/android/CheckboxCard.json +4 -0
  4. package/build/android/IconButton.json +28 -1
  5. package/build/android/Listbox.json +162 -136
  6. package/build/android/RadioCard.json +4 -0
  7. package/build/android/Shortcuts.json +44 -0
  8. package/build/android/ShortcutsItem.json +77 -0
  9. package/build/android/Table.json +4 -0
  10. package/build/android/schema.json +1601 -885
  11. package/build/android/spacingScale.json +1 -1
  12. package/build/android/theme.json +333 -143
  13. package/build/ios/Button.json +4 -4
  14. package/build/ios/Card.json +4 -0
  15. package/build/ios/CheckboxCard.json +4 -0
  16. package/build/ios/IconButton.json +28 -1
  17. package/build/ios/Listbox.json +162 -136
  18. package/build/ios/RadioCard.json +4 -0
  19. package/build/ios/Shortcuts.json +44 -0
  20. package/build/ios/ShortcutsItem.json +77 -0
  21. package/build/ios/Table.json +4 -0
  22. package/build/ios/schema.json +1601 -885
  23. package/build/ios/spacingScale.json +1 -1
  24. package/build/ios/theme.json +333 -143
  25. package/build/rn/ActionCard.js +1 -1
  26. package/build/rn/ActivityIndicator.js +1 -1
  27. package/build/rn/Autocomplete.js +1 -1
  28. package/build/rn/Badge.js +1 -1
  29. package/build/rn/BlockQuote.js +1 -1
  30. package/build/rn/Box.js +1 -1
  31. package/build/rn/Breadcrumbs.js +1 -1
  32. package/build/rn/Button.js +2 -2
  33. package/build/rn/ButtonDropdown.js +1 -1
  34. package/build/rn/ButtonGroup.js +1 -1
  35. package/build/rn/ButtonGroupItem.js +1 -1
  36. package/build/rn/Callout.js +1 -1
  37. package/build/rn/Card.js +5 -1
  38. package/build/rn/CardGroup.js +1 -1
  39. package/build/rn/Carousel.js +1 -1
  40. package/build/rn/CarouselTabsPanelItem.js +1 -1
  41. package/build/rn/CarouselThumbnail.js +1 -1
  42. package/build/rn/Checkbox.js +1 -1
  43. package/build/rn/CheckboxCard.js +5 -1
  44. package/build/rn/CheckboxCardGroup.js +1 -1
  45. package/build/rn/CheckboxGroup.js +1 -1
  46. package/build/rn/ChevronLink.js +1 -1
  47. package/build/rn/ColourToggle.js +1 -1
  48. package/build/rn/Countdown.js +1 -1
  49. package/build/rn/DatePicker.js +1 -1
  50. package/build/rn/Disclaimer.js +1 -1
  51. package/build/rn/Divider.js +1 -1
  52. package/build/rn/DownloadApp.js +1 -1
  53. package/build/rn/ExpandCollapse.js +1 -1
  54. package/build/rn/ExpandCollapseControl.js +1 -1
  55. package/build/rn/ExpandCollapseMini.js +1 -1
  56. package/build/rn/ExpandCollapseMiniControl.js +1 -1
  57. package/build/rn/ExpandCollapsePanel.js +1 -1
  58. package/build/rn/Feedback.js +1 -1
  59. package/build/rn/Fieldset.js +1 -1
  60. package/build/rn/FileUpload.js +1 -1
  61. package/build/rn/Footnote.js +1 -1
  62. package/build/rn/FootnoteLink.js +1 -1
  63. package/build/rn/HorizontalScrollButton.js +1 -1
  64. package/build/rn/Icon.js +1 -1
  65. package/build/rn/IconButton.js +12 -2
  66. package/build/rn/Image.js +1 -1
  67. package/build/rn/InputLabel.js +1 -1
  68. package/build/rn/InputSupports.js +1 -1
  69. package/build/rn/Link.js +1 -1
  70. package/build/rn/List.js +1 -1
  71. package/build/rn/Listbox.js +121 -113
  72. package/build/rn/Modal.js +1 -1
  73. package/build/rn/MultiSelectFilter.js +1 -1
  74. package/build/rn/NavigationBar.js +1 -1
  75. package/build/rn/Notification.js +1 -1
  76. package/build/rn/OrderedList.js +1 -1
  77. package/build/rn/Pagination.js +1 -1
  78. package/build/rn/PaginationPageButton.js +1 -1
  79. package/build/rn/PaginationSideButton.js +1 -1
  80. package/build/rn/PreviewCard.js +1 -1
  81. package/build/rn/PriceLockup.js +1 -1
  82. package/build/rn/ProductCard.js +1 -1
  83. package/build/rn/Progress.js +1 -1
  84. package/build/rn/ProgressBar.js +1 -1
  85. package/build/rn/QuantitySelector.js +1 -1
  86. package/build/rn/QuantitySelectorSideButton.js +1 -1
  87. package/build/rn/QuickLinks.js +1 -1
  88. package/build/rn/QuickLinksButton.js +1 -1
  89. package/build/rn/QuickLinksCard.js +1 -1
  90. package/build/rn/QuickLinksFeature.js +1 -1
  91. package/build/rn/QuickLinksFeatureItem.js +1 -1
  92. package/build/rn/QuickLinksList.js +1 -1
  93. package/build/rn/Radio.js +1 -1
  94. package/build/rn/RadioCard.js +5 -1
  95. package/build/rn/RadioCardGroup.js +1 -1
  96. package/build/rn/RadioGroup.js +1 -1
  97. package/build/rn/Ribbon.js +1 -1
  98. package/build/rn/Search.js +1 -1
  99. package/build/rn/SearchButton.js +1 -1
  100. package/build/rn/Select.js +1 -1
  101. package/build/rn/Shortcuts.js +33 -0
  102. package/build/rn/ShortcutsItem.js +68 -0
  103. package/build/rn/SideNav.js +1 -1
  104. package/build/rn/SideNavItem.js +1 -1
  105. package/build/rn/SideNavItemsGroup.js +1 -1
  106. package/build/rn/Skeleton.js +1 -1
  107. package/build/rn/SkipLink.js +1 -1
  108. package/build/rn/Spinner.js +1 -1
  109. package/build/rn/SplashButton.js +1 -1
  110. package/build/rn/SplashButtonWithDetails.js +1 -1
  111. package/build/rn/StackView.js +1 -1
  112. package/build/rn/Status.js +1 -1
  113. package/build/rn/StepTracker.js +1 -1
  114. package/build/rn/StoryCard.js +1 -1
  115. package/build/rn/TabBar.js +1 -1
  116. package/build/rn/TabBarItem.js +1 -1
  117. package/build/rn/Table.js +5 -1
  118. package/build/rn/Tabs.js +1 -1
  119. package/build/rn/TabsItem.js +1 -1
  120. package/build/rn/Tags.js +1 -1
  121. package/build/rn/TagsItem.js +1 -1
  122. package/build/rn/TermsAndConditions.js +1 -1
  123. package/build/rn/Testimonial.js +1 -1
  124. package/build/rn/TextArea.js +1 -1
  125. package/build/rn/TextInput.js +1 -1
  126. package/build/rn/Timeline.js +1 -1
  127. package/build/rn/Toast.js +1 -1
  128. package/build/rn/ToggleSwitch.js +1 -1
  129. package/build/rn/ToggleSwitchGroup.js +1 -1
  130. package/build/rn/Tooltip.js +1 -1
  131. package/build/rn/TooltipButton.js +1 -1
  132. package/build/rn/Typography.js +1 -1
  133. package/build/rn/Video.js +1 -1
  134. package/build/rn/VideoButton.js +1 -1
  135. package/build/rn/VideoControlBar.js +1 -1
  136. package/build/rn/VideoMenu.js +1 -1
  137. package/build/rn/VideoMiddleControlButton.js +1 -1
  138. package/build/rn/VideoPicker.js +1 -1
  139. package/build/rn/VideoPickerSlider.js +1 -1
  140. package/build/rn/VideoPickerThumbnail.js +1 -1
  141. package/build/rn/VideoProgressBar.js +1 -1
  142. package/build/rn/VideoVolumeSlider.js +1 -1
  143. package/build/rn/WaffleGrid.js +1 -1
  144. package/build/rn/schema.json +1601 -885
  145. package/build/rn/spacingScale.js +2 -2
  146. package/build/rn/theme.js +239 -118
  147. package/build/web/ActionCard.js +1 -1
  148. package/build/web/ActivityIndicator.js +1 -1
  149. package/build/web/Autocomplete.js +1 -1
  150. package/build/web/Badge.js +1 -1
  151. package/build/web/BlockQuote.js +1 -1
  152. package/build/web/Box.js +1 -1
  153. package/build/web/Breadcrumbs.js +1 -1
  154. package/build/web/Button.js +2 -2
  155. package/build/web/ButtonDropdown.js +1 -1
  156. package/build/web/ButtonGroup.js +1 -1
  157. package/build/web/ButtonGroupItem.js +1 -1
  158. package/build/web/Callout.js +1 -1
  159. package/build/web/Card.js +5 -1
  160. package/build/web/CardGroup.js +1 -1
  161. package/build/web/Carousel.js +1 -1
  162. package/build/web/CarouselTabsPanelItem.js +1 -1
  163. package/build/web/CarouselThumbnail.js +1 -1
  164. package/build/web/Checkbox.js +1 -1
  165. package/build/web/CheckboxCard.js +5 -1
  166. package/build/web/CheckboxCardGroup.js +1 -1
  167. package/build/web/CheckboxGroup.js +1 -1
  168. package/build/web/ChevronLink.js +1 -1
  169. package/build/web/ColourToggle.js +1 -1
  170. package/build/web/Countdown.js +1 -1
  171. package/build/web/DatePicker.js +1 -1
  172. package/build/web/Disclaimer.js +1 -1
  173. package/build/web/Divider.js +1 -1
  174. package/build/web/DownloadApp.js +1 -1
  175. package/build/web/ExpandCollapse.js +1 -1
  176. package/build/web/ExpandCollapseControl.js +1 -1
  177. package/build/web/ExpandCollapseMini.js +1 -1
  178. package/build/web/ExpandCollapseMiniControl.js +1 -1
  179. package/build/web/ExpandCollapsePanel.js +1 -1
  180. package/build/web/Feedback.js +1 -1
  181. package/build/web/Fieldset.js +1 -1
  182. package/build/web/FileUpload.js +1 -1
  183. package/build/web/Footnote.js +1 -1
  184. package/build/web/FootnoteLink.js +1 -1
  185. package/build/web/HorizontalScrollButton.js +1 -1
  186. package/build/web/Icon.js +1 -1
  187. package/build/web/IconButton.js +12 -2
  188. package/build/web/Image.js +1 -1
  189. package/build/web/InputLabel.js +1 -1
  190. package/build/web/InputSupports.js +1 -1
  191. package/build/web/Link.js +1 -1
  192. package/build/web/List.js +1 -1
  193. package/build/web/Listbox.js +121 -113
  194. package/build/web/Modal.js +1 -1
  195. package/build/web/MultiSelectFilter.js +1 -1
  196. package/build/web/NavigationBar.js +1 -1
  197. package/build/web/Notification.js +1 -1
  198. package/build/web/OrderedList.js +1 -1
  199. package/build/web/Pagination.js +1 -1
  200. package/build/web/PaginationPageButton.js +1 -1
  201. package/build/web/PaginationSideButton.js +1 -1
  202. package/build/web/PreviewCard.js +1 -1
  203. package/build/web/PriceLockup.js +1 -1
  204. package/build/web/ProductCard.js +1 -1
  205. package/build/web/Progress.js +1 -1
  206. package/build/web/ProgressBar.js +1 -1
  207. package/build/web/QuantitySelector.js +1 -1
  208. package/build/web/QuantitySelectorSideButton.js +1 -1
  209. package/build/web/QuickLinks.js +1 -1
  210. package/build/web/QuickLinksButton.js +1 -1
  211. package/build/web/QuickLinksCard.js +1 -1
  212. package/build/web/QuickLinksFeature.js +1 -1
  213. package/build/web/QuickLinksFeatureItem.js +1 -1
  214. package/build/web/QuickLinksList.js +1 -1
  215. package/build/web/Radio.js +1 -1
  216. package/build/web/RadioCard.js +5 -1
  217. package/build/web/RadioCardGroup.js +1 -1
  218. package/build/web/RadioGroup.js +1 -1
  219. package/build/web/Ribbon.js +1 -1
  220. package/build/web/Search.js +1 -1
  221. package/build/web/SearchButton.js +1 -1
  222. package/build/web/Select.js +1 -1
  223. package/build/web/Shortcuts.js +33 -0
  224. package/build/web/ShortcutsItem.js +68 -0
  225. package/build/web/SideNav.js +1 -1
  226. package/build/web/SideNavItem.js +1 -1
  227. package/build/web/SideNavItemsGroup.js +1 -1
  228. package/build/web/Skeleton.js +1 -1
  229. package/build/web/SkipLink.js +1 -1
  230. package/build/web/Spinner.js +1 -1
  231. package/build/web/SplashButton.js +1 -1
  232. package/build/web/SplashButtonWithDetails.js +1 -1
  233. package/build/web/StackView.js +1 -1
  234. package/build/web/Status.js +1 -1
  235. package/build/web/StepTracker.js +1 -1
  236. package/build/web/StoryCard.js +1 -1
  237. package/build/web/TabBar.js +1 -1
  238. package/build/web/TabBarItem.js +1 -1
  239. package/build/web/Table.js +5 -1
  240. package/build/web/Tabs.js +1 -1
  241. package/build/web/TabsItem.js +1 -1
  242. package/build/web/Tags.js +1 -1
  243. package/build/web/TagsItem.js +1 -1
  244. package/build/web/TermsAndConditions.js +1 -1
  245. package/build/web/Testimonial.js +1 -1
  246. package/build/web/TextArea.js +1 -1
  247. package/build/web/TextInput.js +1 -1
  248. package/build/web/Timeline.js +1 -1
  249. package/build/web/Toast.js +1 -1
  250. package/build/web/ToggleSwitch.js +1 -1
  251. package/build/web/ToggleSwitchGroup.js +1 -1
  252. package/build/web/Tooltip.js +1 -1
  253. package/build/web/TooltipButton.js +1 -1
  254. package/build/web/Typography.js +1 -1
  255. package/build/web/Video.js +1 -1
  256. package/build/web/VideoButton.js +1 -1
  257. package/build/web/VideoControlBar.js +1 -1
  258. package/build/web/VideoMenu.js +1 -1
  259. package/build/web/VideoMiddleControlButton.js +1 -1
  260. package/build/web/VideoPicker.js +1 -1
  261. package/build/web/VideoPickerSlider.js +1 -1
  262. package/build/web/VideoPickerThumbnail.js +1 -1
  263. package/build/web/VideoProgressBar.js +1 -1
  264. package/build/web/VideoVolumeSlider.js +1 -1
  265. package/build/web/WaffleGrid.js +1 -1
  266. package/build/web/index.js +3 -1
  267. package/build/web/schema.json +1601 -885
  268. package/build/web/spacingScale.js +2 -2
  269. package/build/web/theme.js +239 -118
  270. package/package.json +4 -4
  271. package/theme.json +279 -130
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:38:46 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:22 GMT
5
5
  *
6
6
  */
7
7
 
@@ -27,7 +27,7 @@ module.exports = {
27
27
  rules: [
28
28
  { if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
29
29
  { if: { space: 12 }, tokens: { size: 120 } },
30
- { if: { space: 11 }, tokens: { size: 120 } },
30
+ { if: { space: 11 }, tokens: { size: 96 } },
31
31
  { if: { space: 10 }, tokens: { size: 80 } },
32
32
  { if: { space: 9 }, tokens: { size: 64 } },
33
33
  { if: { space: 8 }, tokens: { size: 48 } },
package/build/rn/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:38:46 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:22 GMT
5
5
  *
6
6
  */
7
7
 
@@ -22,6 +22,9 @@ const PaletteIconIOSFR = require('@telus-uds/palette-koodo/build/rn/icons/IOSFR'
22
22
  const PaletteIconCheckCircleFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled')
23
23
  const PaletteIconClose = require('@telus-uds/palette-koodo/build/rn/icons/Close')
24
24
  const PaletteIconAdd = require('@telus-uds/palette-koodo/build/rn/icons/Add')
25
+ const PaletteIconHamburger = require('@telus-uds/palette-koodo/build/rn/icons/Hamburger')
26
+ const PaletteIconCart = require('@telus-uds/palette-koodo/build/rn/icons/Cart')
27
+ const PaletteIconUser = require('@telus-uds/palette-koodo/build/rn/icons/User')
25
28
  const PaletteIconSubtract = require('@telus-uds/palette-koodo/build/rn/icons/Subtract')
26
29
  const PaletteIconExpand = require('@telus-uds/palette-koodo/build/rn/icons/Expand')
27
30
  const PaletteIconPlayVideo = require('@telus-uds/palette-koodo/build/rn/icons/PlayVideo')
@@ -29,6 +32,7 @@ const PaletteIconBullet = require('@telus-uds/palette-koodo/build/rn/icons/Bulle
29
32
  const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
30
33
  const PaletteIconTagFilled = require('@telus-uds/palette-koodo/build/rn/icons/TagFilled')
31
34
  const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
35
+ const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
32
36
  const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
33
37
  const PaletteIconToolTipFilled = require('@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled')
34
38
  const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
@@ -47,7 +51,6 @@ const PaletteIconClosedCaptions = require('@telus-uds/palette-koodo/build/rn/ico
47
51
  const PaletteIconFullscreenExpand = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenExpand')
48
52
  const PaletteIconFullscreenMinimize = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenMinimize')
49
53
  const PaletteIconSettingsSolid = require('@telus-uds/palette-koodo/build/rn/icons/SettingsSolid')
50
- const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
51
54
  const PaletteIconMuted = require('@telus-uds/palette-koodo/build/rn/icons/Muted')
52
55
  const PaletteIconUnmuted = require('@telus-uds/palette-koodo/build/rn/icons/Unmuted')
53
56
 
@@ -539,7 +542,7 @@ module.exports = {
539
542
  {
540
543
  if: { priority: 'low' },
541
544
  tokens: {
542
- backgroundColor: '#ffffff',
545
+ backgroundColor: 'rgba(0, 0, 0, 0)',
543
546
  borderBottomWidth: 1,
544
547
  borderColor: '#000000',
545
548
  color: '#000000',
@@ -1759,6 +1762,10 @@ module.exports = {
1759
1762
  spread: 0
1760
1763
  },
1761
1764
  inputWidth: 32,
1765
+ marginBottom: 0,
1766
+ marginLeft: 0,
1767
+ marginRight: 0,
1768
+ marginTop: 0,
1762
1769
  maxHeight: '100%',
1763
1770
  minWidth: null,
1764
1771
  overflowY: 'visible',
@@ -2282,6 +2289,10 @@ module.exports = {
2282
2289
  fontWeight: '700',
2283
2290
  letterSpacing: 0,
2284
2291
  lineHeight: 1.4,
2292
+ marginBottom: 0,
2293
+ marginLeft: 0,
2294
+ marginRight: 0,
2295
+ marginTop: 0,
2285
2296
  minWidth: 288,
2286
2297
  outerBorderColor: 'transparent',
2287
2298
  outerBorderGap: 0,
@@ -3816,7 +3827,8 @@ module.exports = {
3816
3827
  'expand', 'moveDown',
3817
3828
  'moveLeft', 'moveRight',
3818
3829
  'moveUp', 'play',
3819
- 'subtract'
3830
+ 'subtract', 'menu',
3831
+ 'cart', 'profile'
3820
3832
  ]
3821
3833
  },
3822
3834
  compact: {
@@ -3864,6 +3876,15 @@ module.exports = {
3864
3876
  size: { type: 'variant', values: [ 'small', 'large' ] }
3865
3877
  },
3866
3878
  rules: [
3879
+ {
3880
+ if: { action: 'menu' },
3881
+ tokens: { icon: PaletteIconHamburger }
3882
+ },
3883
+ { if: { action: 'cart' }, tokens: { icon: PaletteIconCart } },
3884
+ {
3885
+ if: { action: 'profile' },
3886
+ tokens: { icon: PaletteIconUser }
3887
+ },
3867
3888
  { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
3868
3889
  {
3869
3890
  if: { action: 'subtract' },
@@ -4599,171 +4620,162 @@ module.exports = {
4599
4620
  description: '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.',
4600
4621
  type: 'state',
4601
4622
  values: [ true, false ]
4602
- }
4623
+ },
4624
+ secondLevel: { type: 'variant', values: [ true ] },
4625
+ style: { type: 'variant', values: [ 'default', 'lightest', 'light' ] }
4603
4626
  },
4604
4627
  rules: [
4605
4628
  {
4606
- if: { focus: false, hover: true, pressed: false },
4607
- tokens: {
4608
- groupBackgroundColor: '#efefef',
4609
- groupBorderColor: 'rgba(0, 0, 0, 0)',
4610
- itemBackgroundColor: '#efefef'
4611
- }
4612
- },
4613
- {
4614
- if: { focus: true, pressed: false },
4615
- tokens: {
4616
- groupBorderColor: '#7a3dfc',
4617
- groupColor: '#7a3dfc',
4618
- itemBorderBottomColor: '#7a3dfc',
4619
- itemBorderLeftColor: '#7a3dfc',
4620
- itemBorderRightColor: '#7a3dfc',
4621
- itemBorderTopColor: '#7a3dfc'
4622
- }
4629
+ if: { style: 'default' },
4630
+ tokens: { containerBackgroundColor: 'rgba(0, 0, 0, 0)' }
4623
4631
  },
4624
4632
  {
4625
- if: { current: true },
4626
- tokens: {
4627
- groupBackgroundColor: '#000000',
4628
- groupBorderColor: '#000000',
4629
- groupColor: '#ffffff',
4630
- itemBackgroundColor: '#000000',
4631
- itemColor: '#ffffff'
4632
- }
4633
+ if: { style: 'lightest' },
4634
+ tokens: { containerBackgroundColor: '#ffffff' }
4633
4635
  },
4634
4636
  {
4635
- if: { current: true, pressed: true },
4636
- tokens: { itemBackgroundColor: '#b5b4b4', itemColor: '#595959' }
4637
+ if: { style: 'light' },
4638
+ tokens: { containerBackgroundColor: '#efefef' }
4637
4639
  },
4638
4640
  {
4639
- if: { isChild: true },
4641
+ if: { hover: true },
4640
4642
  tokens: {
4641
- itemBorderBottomWidth: 1,
4643
+ groupBackgroundColor: 'rgba(0, 0, 0, 0.1)',
4644
+ groupBorderLeftColor: '#000000',
4645
+ groupBorderLeftWidth: 4,
4646
+ itemBackgroundColor: 'rgba(0, 0, 0, 0.1)',
4642
4647
  itemBorderLeftColor: '#000000',
4643
- itemBorderLeftWidth: 4,
4644
- itemBorderTopWidth: 1
4648
+ itemBorderLeftWidth: 4
4645
4649
  }
4646
4650
  },
4647
4651
  {
4648
- if: { isChild: true, pressed: true },
4652
+ if: { pressed: true },
4649
4653
  tokens: {
4650
- itemBorderBottomWidth: 1,
4651
- itemBorderLeftColor: '#595959',
4652
- itemBorderTopWidth: 1,
4653
- itemColor: '#595959'
4654
+ groupBackgroundColor: 'rgba(0, 0, 0, 0.2)',
4655
+ groupBorderLeftColor: '#000000',
4656
+ groupBorderLeftWidth: 4,
4657
+ itemBackgroundColor: 'rgba(0, 0, 0, 0.2)',
4658
+ itemBorderLeftColor: '#000000',
4659
+ itemBorderLeftWidth: 4
4654
4660
  }
4655
4661
  },
4656
4662
  {
4657
- if: { expanded: true },
4663
+ if: { current: true },
4658
4664
  tokens: {
4659
- groupBackgroundColor: 'rgba(0, 0, 0, 0)',
4660
- groupBorderColor: 'rgba(0, 0, 0, 0)',
4661
- groupColor: '#ffffff',
4662
- groupIcon: PaletteIconChevronUp,
4663
- itemColor: '#595959'
4665
+ groupBorderLeftColor: '#ff0076',
4666
+ groupBorderLeftWidth: 4,
4667
+ groupFontName: 'StagSans',
4668
+ groupFontWeight: '600',
4669
+ itemBorderLeftColor: '#ff0076',
4670
+ itemBorderLeftWidth: 4,
4671
+ itemFontName: 'StagSans',
4672
+ itemFontWeight: '600'
4664
4673
  }
4665
4674
  },
4666
4675
  {
4667
- if: { current: true, isChild: true },
4676
+ if: { current: false, focus: true, hover: false, pressed: false },
4668
4677
  tokens: {
4669
- itemBackgroundColor: '#000000',
4678
+ itemBorderBottomColor: '#000000',
4679
+ itemBorderBottomWidth: 1,
4670
4680
  itemBorderLeftColor: '#000000',
4671
- itemColor: '#ffffff'
4672
- }
4673
- },
4674
- {
4675
- if: { current: true, focus: false, hover: true },
4676
- tokens: {
4677
- itemBackgroundColor: '#efefef',
4678
- itemBorderLeftColor: '#efefef',
4679
- itemColor: '#666666'
4681
+ itemBorderLeftWidth: 4,
4682
+ itemBorderRightColor: '#000000',
4683
+ itemBorderRightWidth: 1,
4684
+ itemBorderTopColor: '#000000',
4685
+ itemBorderTopWidth: 1
4680
4686
  }
4681
4687
  },
4682
4688
  {
4683
- if: { current: true, focus: true, hover: true },
4689
+ if: {
4690
+ expanded: false,
4691
+ focus: true,
4692
+ hover: false,
4693
+ pressed: false
4694
+ },
4684
4695
  tokens: {
4685
- itemBackgroundColor: '#ffffff',
4686
- itemBorderLeftColor: '#7a3dfc'
4696
+ groupBorderBottomColor: '#000000',
4697
+ groupBorderBottomWidth: 1,
4698
+ groupBorderLeftColor: '#000000',
4699
+ groupBorderLeftWidth: 4,
4700
+ groupBorderRightColor: '#000000',
4701
+ groupBorderRightWidth: 1,
4702
+ groupBorderTopColor: '#000000',
4703
+ groupBorderTopWidth: 1
4687
4704
  }
4688
4705
  },
4689
4706
  {
4690
- if: { focus: true, isChild: true },
4707
+ if: { current: true, focus: true, hover: false, pressed: false },
4691
4708
  tokens: {
4692
- itemBackgroundColor: '#ffffff',
4693
- itemBorderBottomColor: '#7a3dfc',
4709
+ itemBorderBottomColor: '#000000',
4694
4710
  itemBorderBottomWidth: 1,
4695
- itemBorderLeftColor: '#7a3dfc',
4696
- itemBorderRightColor: '#7a3dfc',
4711
+ itemBorderLeftColor: '#ff0076',
4712
+ itemBorderLeftWidth: 4,
4713
+ itemBorderRightColor: '#000000',
4697
4714
  itemBorderRightWidth: 1,
4698
- itemBorderTopColor: '#7a3dfc',
4699
- itemBorderTopWidth: 1,
4700
- itemColor: '#666666'
4715
+ itemBorderTopColor: '#000000',
4716
+ itemBorderTopWidth: 1
4701
4717
  }
4702
4718
  },
4703
4719
  {
4704
- if: { hover: true, isChild: true },
4720
+ if: { expanded: true, focus: true, hover: false, pressed: false },
4705
4721
  tokens: {
4706
- itemBackgroundColor: '#efefef',
4707
- itemBorderBottomWidth: 1,
4708
- itemBorderLeftColor: '#666666',
4709
- itemBorderRightWidth: 1,
4710
- itemBorderTopWidth: 1,
4711
- itemColor: '#666666'
4722
+ groupBorderBottomColor: '#000000',
4723
+ groupBorderBottomWidth: 1,
4724
+ groupBorderLeftColor: '#ff0076',
4725
+ groupBorderLeftWidth: 4,
4726
+ groupBorderRightColor: '#000000',
4727
+ groupBorderRightWidth: 1,
4728
+ groupBorderTopColor: '#000000',
4729
+ groupBorderTopWidth: 1
4712
4730
  }
4713
4731
  },
4714
4732
  {
4715
- if: { current: true, expanded: true, focus: true },
4733
+ if: { expanded: true },
4716
4734
  tokens: {
4717
- groupBackgroundColor: '#000000',
4718
- groupBorderColor: '#7a3dfc',
4719
- itemBorderLeftColor: '#7a3dfc',
4720
- itemColor: '#666666'
4735
+ groupBorderLeftColor: '#ff0076',
4736
+ groupBorderLeftWidth: 4,
4737
+ groupFontName: 'StagSans',
4738
+ groupFontWeight: '600',
4739
+ groupIcon: PaletteIconChevronUp,
4740
+ itemBorderLeftColor: '#ff0076',
4741
+ itemBorderLeftWidth: 4,
4742
+ itemFontName: 'StagSans',
4743
+ itemFontWeight: '600'
4721
4744
  }
4722
4745
  },
4723
4746
  {
4724
- if: { current: true, expanded: true, hover: true },
4747
+ if: { secondLevel: true },
4725
4748
  tokens: {
4726
- groupBackgroundColor: '#efefef',
4727
- groupColor: '#666666',
4728
- itemBackgroundColor: '#efefef',
4729
- itemColor: '#666666'
4749
+ groupIcon: PaletteIconChevronRight,
4750
+ secondLevelParentIcon: PaletteIconChevronRight
4730
4751
  }
4731
4752
  },
4732
4753
  {
4733
- if: { focus: true },
4754
+ if: { secondLevel: true },
4734
4755
  tokens: {
4735
- groupBackgroundColor: '#ffffff',
4736
- groupBorderColor: '#7a3dfc',
4737
- groupColor: '#666666',
4738
- itemBackgroundColor: '#ffffff',
4739
- itemBorderBottomColor: '#7a3dfc',
4740
- itemBorderLeftColor: '#7a3dfc',
4741
- itemBorderRightColor: '#7a3dfc',
4742
- itemBorderTopColor: '#7a3dfc',
4743
- itemColor: '#666666'
4744
- }
4745
- },
4746
- {
4747
- if: { pressed: true },
4748
- tokens: {
4749
- groupBackgroundColor: '#404040',
4750
- groupColor: '#666666',
4751
- itemBackgroundColor: '#404040',
4752
- itemBorderLeftColor: '#404040',
4753
- itemColor: '#666666'
4756
+ groupIcon: PaletteIconChevronRight,
4757
+ secondLevelParentIcon: PaletteIconChevronRight
4754
4758
  }
4755
4759
  }
4756
4760
  ],
4757
4761
  tokens: {
4762
+ borderRadius: 4,
4763
+ containerBackgroundColor: 'rgba(0, 0, 0, 0)',
4758
4764
  groupBackgroundColor: 'rgba(0, 0, 0, 0)',
4759
- groupBorderColor: 'rgba(0, 0, 0, 0)',
4765
+ groupBorderBottomColor: 'rgba(0, 0, 0, 0)',
4766
+ groupBorderBottomWidth: 0,
4767
+ groupBorderLeftColor: 'rgba(0, 0, 0, 0)',
4768
+ groupBorderLeftWidth: 4,
4760
4769
  groupBorderRadius: 0,
4761
- groupBorderWidth: 1,
4762
- groupColor: '#666666',
4770
+ groupBorderRightColor: 'rgba(0, 0, 0, 0)',
4771
+ groupBorderRightWidth: 0,
4772
+ groupBorderTopColor: 'rgba(0, 0, 0, 0)',
4773
+ groupBorderTopWidth: 0,
4774
+ groupColor: '#000000',
4763
4775
  groupFontName: 'StagSans',
4764
4776
  groupFontSize: 16,
4765
4777
  groupFontWeight: '400',
4766
- groupHeight: 32,
4778
+ groupHeight: 40,
4767
4779
  groupIcon: PaletteIconChevronDown,
4768
4780
  groupPaddingBottom: 12,
4769
4781
  groupPaddingLeft: 16,
@@ -4771,21 +4783,21 @@ module.exports = {
4771
4783
  groupPaddingTop: 12,
4772
4784
  itemBackgroundColor: 'rgba(0, 0, 0, 0)',
4773
4785
  itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
4774
- itemBorderBottomWidth: 1,
4786
+ itemBorderBottomWidth: 0,
4775
4787
  itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
4776
- itemBorderLeftWidth: 1,
4788
+ itemBorderLeftWidth: 4,
4777
4789
  itemBorderRadius: 0,
4778
4790
  itemBorderRightColor: 'rgba(0, 0, 0, 0)',
4779
- itemBorderRightWidth: 1,
4791
+ itemBorderRightWidth: 0,
4780
4792
  itemBorderTopColor: 'rgba(0, 0, 0, 0)',
4781
- itemBorderTopWidth: 1,
4793
+ itemBorderTopWidth: 0,
4782
4794
  itemBorderWidth: 0,
4783
- itemColor: '#666666',
4795
+ itemColor: '#000000',
4784
4796
  itemDisplay: false,
4785
4797
  itemFontName: 'StagSans',
4786
4798
  itemFontSize: 16,
4787
4799
  itemFontWeight: '400',
4788
- itemHeight: 32,
4800
+ itemHeight: 40,
4789
4801
  itemOutline: 0,
4790
4802
  itemPaddingBottom: 8,
4791
4803
  itemPaddingLeft: 16,
@@ -4795,6 +4807,25 @@ module.exports = {
4795
4807
  lineHeight: 1.5,
4796
4808
  minHeight: '100%',
4797
4809
  minWidth: '100%',
4810
+ secondLevelBackIcon: PaletteIconChevronLeft,
4811
+ secondLevelBackIconColor: '#000000',
4812
+ secondLevelBackIconSize: 16,
4813
+ secondLevelBackLinkColor: '#000000',
4814
+ secondLevelBackLinkFontName: 'StagSans',
4815
+ secondLevelBackLinkFontSize: 16,
4816
+ secondLevelBackLinkFontWeight: '600',
4817
+ secondLevelCloseButtonBorderWidth: 0,
4818
+ secondLevelCloseButtonPadding: 8,
4819
+ secondLevelCloseIcon: PaletteIconClose,
4820
+ secondLevelCloseIconSize: 16,
4821
+ secondLevelDividerColor: '#c9c8c8',
4822
+ secondLevelDividerWidth: 1,
4823
+ secondLevelHeaderBackgroundColor: '#ffffff',
4824
+ secondLevelHeaderPaddingBottom: 4,
4825
+ secondLevelHeaderPaddingLeft: 16,
4826
+ secondLevelHeaderPaddingRight: 16,
4827
+ secondLevelHeaderPaddingTop: 4,
4828
+ secondLevelParentIcon: PaletteIconChevronRight,
4798
4829
  shadow: {
4799
4830
  blur: 2,
4800
4831
  color: 'rgba(0, 0, 0, 0.2)',
@@ -6603,6 +6634,10 @@ module.exports = {
6603
6634
  fontWeight: '700',
6604
6635
  letterSpacing: 0,
6605
6636
  lineHeight: 1.4,
6637
+ marginBottom: 0,
6638
+ marginLeft: 0,
6639
+ marginRight: 0,
6640
+ marginTop: 0,
6606
6641
  minWidth: 288,
6607
6642
  outerBorderColor: 'transparent',
6608
6643
  outerBorderGap: 0,
@@ -6975,6 +7010,88 @@ module.exports = {
6975
7010
  validationIconSize: 24
6976
7011
  }
6977
7012
  },
7013
+ Shortcuts: {
7014
+ appearances: {
7015
+ viewport: {
7016
+ description: 'The size label for the current screen viewport based on the current screen width',
7017
+ type: 'state',
7018
+ values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
7019
+ }
7020
+ },
7021
+ rules: [
7022
+ { if: { viewport: 'md' }, tokens: { mainContainerGap: 16 } },
7023
+ { if: { viewport: 'lg' }, tokens: { mainContainerGap: 16 } },
7024
+ { if: { viewport: 'xl' }, tokens: { mainContainerGap: 16 } }
7025
+ ],
7026
+ tokens: {
7027
+ mainContainerBottomPadding: 0,
7028
+ mainContainerGap: 8,
7029
+ mainContainerLeftPadding: 16,
7030
+ mainContainerRightPadding: 16,
7031
+ mainContainerTopPadding: 0,
7032
+ nextIcon: PaletteIconArrowRight,
7033
+ previousIcon: PaletteIconArrowLeft
7034
+ }
7035
+ },
7036
+ ShortcutsItem: {
7037
+ appearances: {
7038
+ focus: {
7039
+ description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
7040
+ platforms: [ 'rn', 'web' ],
7041
+ type: 'state',
7042
+ values: [ true, false ]
7043
+ },
7044
+ hover: {
7045
+ description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
7046
+ platforms: [ 'rn', 'web' ],
7047
+ type: 'state',
7048
+ values: [ true, false ]
7049
+ },
7050
+ pressed: {
7051
+ description: '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.',
7052
+ type: 'state',
7053
+ values: [ true, false ]
7054
+ }
7055
+ },
7056
+ rules: [
7057
+ {
7058
+ if: { hover: true },
7059
+ tokens: { borderColor: '#000000', labelUnderline: 'underline' }
7060
+ },
7061
+ { if: { focus: true }, tokens: { borderColor: '#000000' } },
7062
+ {
7063
+ if: { pressed: true },
7064
+ tokens: { iconColor: '#666666', labelFontColor: '#666666' }
7065
+ }
7066
+ ],
7067
+ tokens: {
7068
+ borderColor: 'transparent',
7069
+ borderRadius: 4,
7070
+ borderWidth: 1,
7071
+ iconBackgroundColor: '#efefef',
7072
+ iconColor: '#000000',
7073
+ iconContainerPaddingBottom: 8,
7074
+ iconContainerPaddingLeft: 8,
7075
+ iconContainerPaddingRight: 8,
7076
+ iconContainerPaddingTop: 8,
7077
+ iconSize: 24,
7078
+ iconWidth: 16,
7079
+ imageHeight: 56,
7080
+ imageWidth: 56,
7081
+ labelContainerPaddingBottom: 0,
7082
+ labelContainerPaddingLeft: 8,
7083
+ labelContainerPaddingRight: 8,
7084
+ labelContainerPaddingTop: 0,
7085
+ labelFontColor: '#000000',
7086
+ labelFontName: 'StagSans',
7087
+ labelFontSize: 14,
7088
+ labelFontWeight: '400',
7089
+ labelLineHeight: 1.42857142857,
7090
+ labelTextAlign: 'center',
7091
+ labelUnderline: 'none',
7092
+ width: 72
7093
+ }
7094
+ },
6978
7095
  SideNav: {
6979
7096
  appearances: {},
6980
7097
  rules: [],
@@ -7784,6 +7901,8 @@ module.exports = {
7784
7901
  cellBorderColor: 'rgba(0, 0, 0, 0)',
7785
7902
  cellBorderTopWidth: 0,
7786
7903
  cellBorderWidth: 0,
7904
+ cellBottomLeftBorderRadius: 0,
7905
+ cellBottomRightBorderRadius: 0,
7787
7906
  cellBoxShadowColor: '#efefef',
7788
7907
  cellMinWidth: 0,
7789
7908
  cellPaddingBottom: 16,
@@ -7798,6 +7917,8 @@ module.exports = {
7798
7917
  offsetY: 4,
7799
7918
  spread: 0
7800
7919
  },
7920
+ cellTopLeftBorderRadius: 0,
7921
+ cellTopRightBorderRadius: 0,
7801
7922
  display: null,
7802
7923
  fontColor: '#000000',
7803
7924
  fontName: 'StagSans',
@@ -9434,7 +9555,7 @@ module.exports = {
9434
9555
  rules: [
9435
9556
  { if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
9436
9557
  { if: { space: 12 }, tokens: { size: 120 } },
9437
- { if: { space: 11 }, tokens: { size: 120 } },
9558
+ { if: { space: 11 }, tokens: { size: 96 } },
9438
9559
  { if: { space: 10 }, tokens: { size: 80 } },
9439
9560
  { if: { space: 9 }, tokens: { size: 64 } },
9440
9561
  { if: { space: 8 }, tokens: { size: 48 } },
@@ -9474,5 +9595,5 @@ module.exports = {
9474
9595
  tokens: { size: 96 }
9475
9596
  }
9476
9597
  },
9477
- metadata: { name: 'theme-koodo', themeTokensVersion: '4.15.1' }
9598
+ metadata: { name: 'theme-koodo', themeTokensVersion: '4.17.0' }
9478
9599
  }
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
package/build/web/Box.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -91,7 +91,7 @@ const theme = {
91
91
  {
92
92
  if: { priority: 'low' },
93
93
  tokens: {
94
- backgroundColor: '#ffffff',
94
+ backgroundColor: 'rgba(0, 0, 0, 0)',
95
95
  borderBottomWidth: 1,
96
96
  borderColor: '#000000',
97
97
  color: '#000000',
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
4
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
5
5
  *
6
6
  */
7
7