@telus-uds/theme-koodo 7.24.0 → 8.0.0-alpha.1

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 18 Feb 2026 02:48:29 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:48 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 18 Feb 2026 02:48:29 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:49 GMT
  *
  */
 
@@ -15,6 +15,7 @@ import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
 import PaletteIconPause from '@telus-uds/palette-koodo/build/rn/icons/Pause'
 import PaletteIconPlay from '@telus-uds/palette-koodo/build/rn/icons/Play'
 import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/ChevronLeft'
+import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 import PaletteIconAndroidEN from '@telus-uds/palette-koodo/build/rn/icons/AndroidEN'
 import PaletteIconAndroidFR from '@telus-uds/palette-koodo/build/rn/icons/AndroidFR'
 import PaletteIconIOSEN from '@telus-uds/palette-koodo/build/rn/icons/IOSEN'
@@ -34,7 +35,6 @@ import PaletteIconTimes from '@telus-uds/palette-koodo/build/rn/icons/Times'
 import PaletteIconTagFilled from '@telus-uds/palette-koodo/build/rn/icons/TagFilled'
 import PaletteIconSpyglass from '@telus-uds/palette-koodo/build/rn/icons/Spyglass'
 import PaletteIconArrowLeft from '@telus-uds/palette-koodo/build/rn/icons/ArrowLeft'
-import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 import PaletteIconToolTipFilled from '@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled'
 import PaletteIconTooltip from '@telus-uds/palette-koodo/build/rn/icons/Tooltip'
 import PaletteIconCheckCircledFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled'
@@ -1332,11 +1332,6 @@ const theme = {
     },
     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.",
@@ -1433,34 +1428,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 }
@@ -2072,6 +2039,7 @@ const theme = {
         containerPaddingTop: 24,
         margin: 4,
         padding: 8,
+        playIcon: PaletteIconPlaySolid,
         selectedBorderColor: '#000000',
         selectedBorderWidth: 2,
         size: 56
@@ -2385,7 +2353,6 @@ const theme = {
     },
     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' ],
@@ -2398,7 +2365,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',
@@ -2433,40 +2399,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 }
@@ -3185,36 +3117,27 @@ const theme = {
     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' }
         },
         {
@@ -3231,11 +3154,11 @@ const theme = {
         },
         { 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' }
         }
       ],
@@ -4668,7 +4591,6 @@ const theme = {
     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' ],
@@ -4686,7 +4608,6 @@ const theme = {
           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',
@@ -4730,40 +4651,6 @@ const theme = {
           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: {
@@ -4803,14 +4690,6 @@ const theme = {
           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' },
@@ -6500,12 +6379,6 @@ const theme = {
     },
     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',
@@ -6513,14 +6386,6 @@ const theme = {
         }
       },
       rules: [
-        {
-          if: { inactive: true },
-          tokens: { backgroundColor: '#c9c8c8', outlineColor: '#595959' }
-        },
-        {
-          if: { negative: true },
-          tokens: { backgroundColor: '#c9370b', outlineColor: '#595959' }
-        },
         {
           if: { style: 'subtle' },
           tokens: {
@@ -7288,8 +7153,7 @@ const theme = {
         purpose: {
           type: 'variant',
           values: [ 'offer', 'default', 'editorial', 'subtle' ]
-        },
-        wrap: { type: 'variant', values: [ true ] }
+        }
       },
       rules: [
         {
@@ -7303,10 +7167,6 @@ const theme = {
         {
           if: { purpose: 'subtle' },
           tokens: { backgroundColor: '#a1ed00' }
-        },
-        {
-          if: { wrap: true },
-          tokens: { paddingBottom: 6, paddingTop: 6 }
         }
       ],
       tokens: {
@@ -7333,10 +7193,10 @@ const theme = {
         fontWeight: '600',
         gradient: null,
         lineHeight: 1.42857142857,
-        paddingBottom: 2,
+        paddingBottom: 6,
         paddingLeft: 12,
         paddingRight: 12,
-        paddingTop: 2
+        paddingTop: 6
       }
     },
     Search: {
@@ -10175,6 +10035,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '4.20.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '5.0.0-alpha.1' }
 }
 export default theme

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^3.11.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0"
+    "@telus-uds/palette-koodo": "^4.0.0-alpha.1",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.1"
   },
   "files": [
     "build",
@@ -21,7 +21,7 @@
   "module": "build/web/index.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^3.11.0"
+    "@telus-uds/palette-koodo": "^4.0.0-alpha.1"
   },
   "repository": {
     "type": "git",
@@ -32,5 +32,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "7.24.0"
+  "version": "8.0.0-alpha.1"
 }