@telus-uds/theme-koodo 8.0.0-alpha.0 → 8.0.0-alpha.2

package/build/rn/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:24:58 GMT
+ * Generated on Fri, 17 Apr 2026 23:52:41 GMT
  *
  */
 

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:24:58 GMT
+ * Generated on Fri, 17 Apr 2026 23:52:42 GMT
  *
  */
 
@@ -15,6 +15,7 @@ const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check'
 const PaletteIconPause = require('@telus-uds/palette-koodo/build/rn/icons/Pause')
 const PaletteIconPlay = require('@telus-uds/palette-koodo/build/rn/icons/Play')
 const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
+const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
 const PaletteIconAndroidEN = require('@telus-uds/palette-koodo/build/rn/icons/AndroidEN')
 const PaletteIconAndroidFR = require('@telus-uds/palette-koodo/build/rn/icons/AndroidFR')
 const PaletteIconIOSEN = require('@telus-uds/palette-koodo/build/rn/icons/IOSEN')
@@ -34,7 +35,6 @@ const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times'
 const PaletteIconTagFilled = require('@telus-uds/palette-koodo/build/rn/icons/TagFilled')
 const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
 const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
-const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
 const PaletteIconToolTipFilled = require('@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled')
 const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
 const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
@@ -1333,11 +1333,6 @@ module.exports = {
     },
     Card: {
       appearances: {
-        background: {
-          description: 'Defines background related attributes of Card',
-          type: 'variant',
-          values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
-        },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         focus: {
           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.",
@@ -1434,34 +1429,6 @@ module.exports = {
         { if: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
         { if: { borderRadius: 'small' }, tokens: { borderRadius: 4 } },
         { if: { borderRadius: 'large' }, tokens: { borderRadius: 8 } },
-        {
-          if: { background: 'alternative' },
-          tokens: {
-            backgroundColor: '#e0d8fc',
-            borderRadius: 8,
-            borderWidth: 0
-          }
-        },
-        {
-          if: { background: 'subtle' },
-          tokens: { backgroundColor: '#a1ed00', borderWidth: 0 }
-        },
-        {
-          if: { background: 'grid' },
-          tokens: { borderColor: '#000000', borderWidth: 1 }
-        },
-        {
-          if: { background: 'feature' },
-          tokens: {
-            backgroundColor: '#ffad00',
-            borderRadius: 8,
-            borderWidth: 0
-          }
-        },
-        {
-          if: { background: 'plain' },
-          tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
-        },
         {
           if: { style: 'grid' },
           tokens: { borderColor: '#000000', borderWidth: 1 }
@@ -2073,6 +2040,7 @@ module.exports = {
         containerPaddingTop: 24,
         margin: 4,
         padding: 8,
+        playIcon: PaletteIconPlaySolid,
         selectedBorderColor: '#000000',
         selectedBorderWidth: 2,
         size: 56
@@ -2386,7 +2354,6 @@ module.exports = {
     },
     ChevronLink: {
       appearances: {
-        alternative: { type: 'variant', values: [ true ] },
         focus: {
           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.",
           platforms: [ 'rn', 'web' ],
@@ -2399,7 +2366,6 @@ module.exports = {
           type: 'state',
           values: [ true, false ]
         },
-        inverse: { type: 'variant', values: [ true ] },
         pressed: {
           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.',
           type: 'state',
@@ -2434,40 +2400,6 @@ module.exports = {
           if: { focus: true, pressed: true },
           tokens: { color: '#666666', outerBorderColor: '#666666' }
         },
-        { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
-        {
-          if: { alternative: true, hover: true },
-          tokens: { color: '#5b2bc2' }
-        },
-        {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#666666' }
-        },
-        {
-          if: { alternative: true, focus: true },
-          tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
-        },
-        {
-          if: { alternative: true, focus: true, pressed: true },
-          tokens: { color: '#666666', outerBorderColor: '#666666' }
-        },
-        { if: { inverse: true }, tokens: { color: '#ffffff' } },
-        {
-          if: { hover: true, inverse: true },
-          tokens: { color: '#efefef' }
-        },
-        {
-          if: { inverse: true, pressed: true },
-          tokens: { color: '#c9c8c8' }
-        },
-        {
-          if: { focus: true, inverse: true },
-          tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
-        },
-        {
-          if: { focus: true, inverse: true, pressed: true },
-          tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
-        },
         {
           if: { size: 'large' },
           tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }
@@ -3186,36 +3118,27 @@ module.exports = {
     ExpandCollapseMini: { appearances: {}, rules: [], tokens: { borderWidth: 0 } },
     ExpandCollapseMiniControl: {
       appearances: {
-        alternative: {
-          description: 'Replaces the default green colour with black',
-          type: 'variant',
-          values: [ true ]
-        },
         expanded: {
           description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
           type: 'state',
           values: [ true, false ]
         },
-        inverse: {
-          description: 'Replaces the default green colour with white. Useful for dark backgrounds.',
-          type: 'variant',
-          values: [ true ]
-        },
         quiet: {
           description: 'When it is true, it does not show the decoration',
           type: 'state',
           values: [ true, false ]
         },
-        size: { type: 'variant', values: [ 'micro', 'small', 'large' ] }
+        size: { type: 'variant', values: [ 'micro', 'small', 'large' ] },
+        style: { type: 'variant', values: [ 'subtle', 'inverse' ] }
       },
       rules: [
         {
           if: { expanded: true },
           tokens: { icon: PaletteIconChevronUp }
         },
-        { if: { alternative: true }, tokens: { color: '#666666' } },
+        { if: { style: 'subtle' }, tokens: { color: '#666666' } },
         {
-          if: { inverse: true },
+          if: { style: 'inverse' },
           tokens: { color: '#ffffff', iconColor: '#ffffff' }
         },
         {
@@ -3232,11 +3155,11 @@ module.exports = {
         },
         { if: { quiet: true }, tokens: { textLine: 'none' } },
         {
-          if: { alternative: true, quiet: true },
+          if: { quiet: true, style: 'subtle' },
           tokens: { color: '#666666', textLine: 'none' }
         },
         {
-          if: { inverse: true, quiet: true },
+          if: { quiet: true, style: 'inverse' },
           tokens: { color: '#ffffff', iconColor: '#ffffff', textLine: 'none' }
         }
       ],
@@ -4669,7 +4592,6 @@ module.exports = {
     InputSupports: { appearances: {}, rules: [], tokens: { space: 1 } },
     Link: {
       appearances: {
-        alternative: { type: 'variant', values: [ true ] },
         focus: {
           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.",
           platforms: [ 'rn', 'web' ],
@@ -4687,7 +4609,6 @@ module.exports = {
           type: 'state',
           values: [ 'left', 'right', 'inline' ]
         },
-        inverse: { type: 'variant', values: [ true ] },
         pressed: {
           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.',
           type: 'state',
@@ -4731,40 +4652,6 @@ module.exports = {
           if: { pressed: true },
           tokens: { color: '#666666', textLine: 'none' }
         },
-        { if: { alternative: true }, tokens: { color: '#595959' } },
-        {
-          if: { alternative: true, focus: true },
-          tokens: { color: '#595959', outerBorderColor: '#595959' }
-        },
-        {
-          if: { alternative: true, hover: true },
-          tokens: { color: '#404040' }
-        },
-        {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#404040' }
-        },
-        {
-          if: { alternative: true, focus: true, pressed: true },
-          tokens: { color: '#404040', outerBorderColor: '#404040' }
-        },
-        { if: { inverse: true }, tokens: { color: '#ffffff' } },
-        {
-          if: { focus: true, inverse: true },
-          tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
-        },
-        {
-          if: { focus: true, inverse: true, pressed: true },
-          tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
-        },
-        {
-          if: { hover: true, inverse: true },
-          tokens: { color: '#efefef' }
-        },
-        {
-          if: { inverse: true, pressed: true },
-          tokens: { color: '#c9c8c8' }
-        },
         {
           if: { size: 'micro' },
           tokens: {
@@ -4804,14 +4691,6 @@ module.exports = {
           if: { focus: true, pressed: true, quiet: true },
           tokens: { color: '#595959', textLine: 'underline' }
         },
-        {
-          if: { alternative: true, hover: true, quiet: true },
-          tokens: { color: '#595959', textLine: 'underline' }
-        },
-        {
-          if: { hover: true, inverse: true, quiet: true },
-          tokens: { color: '#efefef', textLine: 'underline' }
-        },
         { if: { style: 'inline' }, tokens: { color: '#000000' } },
         {
           if: { focus: true, style: 'inline' },
@@ -6466,7 +6345,7 @@ module.exports = {
         }
       },
       rules: [
-        { if: { size: 'mini' }, tokens: { height: 8 } },
+        { if: { size: 'mini' }, tokens: { barHeight: 8, height: 8 } },
         {
           if: { style: 'inverse' },
           tokens: {
@@ -6485,6 +6364,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#fafafa',
+        barHeight: 16,
         borderColor: '#666666',
         borderRadius: 12,
         borderWidth: 1,
@@ -6501,12 +6381,6 @@ module.exports = {
     },
     ProgressBar: {
       appearances: {
-        inactive: {
-          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
-          type: 'state',
-          values: [ true ]
-        },
-        negative: { type: 'variant', values: [ true ] },
         style: {
           description: 'Configure `style` variant for `ProgressBar`',
           type: 'variant',
@@ -6514,14 +6388,6 @@ module.exports = {
         }
       },
       rules: [
-        {
-          if: { inactive: true },
-          tokens: { backgroundColor: '#c9c8c8', outlineColor: '#595959' }
-        },
-        {
-          if: { negative: true },
-          tokens: { backgroundColor: '#c9370b', outlineColor: '#595959' }
-        },
         {
           if: { style: 'subtle' },
           tokens: {
@@ -7335,6 +7201,26 @@ module.exports = {
         paddingTop: 6
       }
     },
+    Scroll: {
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        }
+      },
+      rules: [ { if: { hover: true }, tokens: { progressBarHeight: 16 } } ],
+      tokens: {
+        itemGap: 16,
+        progressBarColor: '#000000',
+        progressBarHeight: 8,
+        progressHitAreaHeight: 24,
+        progressSpacing: 8,
+        progressTrackColor: 'rgba(0, 0, 0, 0.1)',
+        progressTrackHeight: 8
+      }
+    },
     Search: {
       appearances: {
         focus: {
@@ -10171,5 +10057,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '5.0.0-alpha.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '5.0.0-alpha.2' }
 }

package/build/web/ActionCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/ActivityIndicator.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Autocomplete.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Badge.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/BlockQuote.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Box.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Breadcrumbs.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Button.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/ButtonDropdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/ButtonGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/ButtonGroupItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Callout.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Card.js

@@ -1,18 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 
 import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
 const theme = {
   appearances: {
-    background: {
-      description: 'Defines background related attributes of Card',
-      type: 'variant',
-      values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
-    },
     borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
     focus: {
       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.",
@@ -109,26 +104,6 @@ const theme = {
     { if: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
     { if: { borderRadius: 'small' }, tokens: { borderRadius: 4 } },
     { if: { borderRadius: 'large' }, tokens: { borderRadius: 8 } },
-    {
-      if: { background: 'alternative' },
-      tokens: { backgroundColor: '#e0d8fc', borderRadius: 8, borderWidth: 0 }
-    },
-    {
-      if: { background: 'subtle' },
-      tokens: { backgroundColor: '#a1ed00', borderWidth: 0 }
-    },
-    {
-      if: { background: 'grid' },
-      tokens: { borderColor: '#000000', borderWidth: 1 }
-    },
-    {
-      if: { background: 'feature' },
-      tokens: { backgroundColor: '#ffad00', borderRadius: 8, borderWidth: 0 }
-    },
-    {
-      if: { background: 'plain' },
-      tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
-    },
     {
       if: { style: 'grid' },
       tokens: { borderColor: '#000000', borderWidth: 1 }

package/build/web/CardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/Carousel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/CarouselTabsPanelItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/CarouselThumbnail.js

@@ -1,11 +1,11 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 
-
+import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 const theme = {
   appearances: {
     focus: {
@@ -54,6 +54,7 @@ const theme = {
     containerPaddingTop: 24,
     margin: 4,
     padding: 8,
+    playIcon: PaletteIconPlaySolid,
     selectedBorderColor: '#000000',
     selectedBorderWidth: 2,
     size: 56

package/build/web/Checkbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/CheckboxCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/CheckboxCardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 

package/build/web/ChevronLink.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:19 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:07 GMT
  *
  */
 
@@ -9,7 +9,6 @@ import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/Chev
 import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/ChevronRight'
 const theme = {
   appearances: {
-    alternative: { type: 'variant', values: [ true ] },
     focus: {
       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.",
       platforms: [ 'rn', 'web' ],
@@ -22,7 +21,6 @@ const theme = {
       type: 'state',
       values: [ true, false ]
     },
-    inverse: { type: 'variant', values: [ true ] },
     pressed: {
       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.',
       type: 'state',
@@ -57,40 +55,6 @@ const theme = {
       if: { focus: true, pressed: true },
       tokens: { color: '#666666', outerBorderColor: '#666666' }
     },
-    { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
-    {
-      if: { alternative: true, hover: true },
-      tokens: { color: '#5b2bc2' }
-    },
-    {
-      if: { alternative: true, pressed: true },
-      tokens: { color: '#666666' }
-    },
-    {
-      if: { alternative: true, focus: true },
-      tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
-    },
-    {
-      if: { alternative: true, focus: true, pressed: true },
-      tokens: { color: '#666666', outerBorderColor: '#666666' }
-    },
-    { if: { inverse: true }, tokens: { color: '#ffffff' } },
-    {
-      if: { hover: true, inverse: true },
-      tokens: { color: '#efefef' }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: { color: '#c9c8c8' }
-    },
-    {
-      if: { focus: true, inverse: true },
-      tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
-    },
-    {
-      if: { focus: true, inverse: true, pressed: true },
-      tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
-    },
     {
       if: { size: 'large' },
       tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }