@telus-uds/theme-allium 8.0.0 → 8.2.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jun 2026 19:49:52 GMT
+ * Generated on Mon, 10 Aug 2026 18:48:23 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jun 2026 19:49:52 GMT
+ * Generated on Mon, 10 Aug 2026 18:48:23 GMT
  *
  */
 
@@ -361,7 +361,7 @@ const theme = {
     Box: {
       appearances: {
         background: {
-          description: 'Background colour of box. Transparent if not specified.',
+          description: 'Background color of box. Transparent if not specified.',
           type: 'variant',
           values: [
             'lightest',         'lighter',
@@ -1898,6 +1898,7 @@ const theme = {
         showPanelNavigation: true,
         showPanelTabs: true,
         showPreviousNextNavigation: true,
+        showStepTrackerLabel: true,
         spaceBetweenSlideAndPanelNavigation: 32,
         spaceBetweenSlideAndPreviousNextNavigation: 24,
         stepTrackerCurrentBackgroundColor: null
@@ -2406,6 +2407,7 @@ const theme = {
     },
     ChevronLink: {
       appearances: {
+        disabled: { type: 'state', 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' ],
@@ -2680,7 +2682,8 @@ const theme = {
         {
           if: { focus: true, pressed: true, quiet: true, style: 'inverse' },
           tokens: { outerBorderColor: '#b2b9bf' }
-        }
+        },
+        { if: { disabled: true }, tokens: { color: '#676e73' } }
       ],
       tokens: {
         blockLineHeight: 1.5,
@@ -2695,7 +2698,7 @@ const theme = {
         textLine: 'none'
       }
     },
-    ColourToggle: {
+    ColorToggle: {
       appearances: {
         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.",
@@ -2819,6 +2822,7 @@ const theme = {
         {
           if: { feature: true },
           tokens: {
+            containerBorderColor: '#4b286d',
             labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
@@ -3882,7 +3886,7 @@ const theme = {
           values: [ true, false ]
         },
         raised: {
-          description: 'Uses shadow and background colour to appear raised above the page',
+          description: 'Uses shadow and background color to appear raised above the page',
           type: 'variant',
           values: [ true ]
         },
@@ -8051,6 +8055,11 @@ const theme = {
     },
     StepTracker: {
       appearances: {
+        floating: {
+          description: 'Compact dot-style indicators (no brand styling; falls back to circular dots).',
+          type: 'variant',
+          values: [ true ]
+        },
         inverse: {
           description: 'Styles the step tracker for using on dark backgrounds.',
           type: 'variant',
@@ -8104,6 +8113,7 @@ const theme = {
         containerPaddingLeft: null,
         containerPaddingRight: null,
         containerPaddingTop: null,
+        knobAnimatePill: false,
         knobBackgroundColor: 'rgba(0, 0, 0, 0)',
         knobBorderColor: '#676e73',
         knobBorderWidth: 1,
@@ -8111,6 +8121,8 @@ const theme = {
         knobCompletedBorderColor: '#7c53a5',
         knobCompletedPaddingLeft: 0,
         knobCompletedPaddingTop: 0,
+        knobCompletedRadius: null,
+        knobCompletedWidth: null,
         knobCurrentBackgroundColor: '#7c53a5',
         knobCurrentBorderColor: '#7c53a5',
         knobCurrentBorderWidth: 2,
@@ -8303,20 +8315,17 @@ const theme = {
           if: { highlight: 'row' },
           tokens: { rowHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)' }
         },
+        {
+          if: { spacing: 'compact' },
+          tokens: { cellPaddingBottom: 8, cellPaddingTop: 8 }
+        },
         {
           if: { spacing: 'compact', type: 'default' },
-          tokens: {
-            cellPaddingBottom: 8,
-            cellPaddingTop: 8,
-            fontSize: 16,
-            lineHeight: 1.25
-          }
+          tokens: { fontSize: 16, lineHeight: 1.25 }
         },
         {
           if: { spacing: 'compact', type: 'rowHeading' },
           tokens: {
-            cellPaddingBottom: 8,
-            cellPaddingTop: 8,
             fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '700',
@@ -8327,8 +8336,6 @@ const theme = {
           if: { spacing: 'compact', text: 'small', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            cellPaddingBottom: 8,
-            cellPaddingTop: 8,
             fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
@@ -9319,6 +9326,7 @@ const theme = {
         switchBorderRadius: 32,
         switchBorderWidth: 0,
         switchColor: '#ffffff',
+        switchOffset: null,
         switchShadow: {
           blur: 2,
           color: 'rgba(0, 0, 0, 0.2)',
@@ -9447,8 +9455,8 @@ const theme = {
           type: 'variant',
           values: [ true ]
         },
-        colour: {
-          description: 'Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n' +
+        color: {
+          description: 'Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different color is needed,\n' +
             '  use the tokens prop.',
           type: 'variant',
           values: [
@@ -9503,17 +9511,17 @@ const theme = {
         },
         {
           if: {
-            colour: 'dark',
+            color: 'dark',
             size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ]
           },
           tokens: { color: '#2c2e30' }
         },
         {
-          if: { colour: 'light', size: 'h6' },
+          if: { color: 'light', size: 'h6' },
           tokens: { color: '#676e73' }
         },
         {
-          if: { colour: 'dark', size: 'eyebrow' },
+          if: { color: 'dark', size: 'eyebrow' },
           tokens: { color: '#7c53a5' }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
@@ -9740,19 +9748,19 @@ const theme = {
           if: { weight: 'bold' },
           tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
-        { if: { colour: 'default' }, tokens: { color: '#414547' } },
-        { if: { colour: 'brand' }, tokens: { color: '#4b286d' } },
-        { if: { colour: 'dark' }, tokens: { color: '#2c2e30' } },
-        { if: { colour: 'light' }, tokens: { color: '#676e73' } },
-        { if: { colour: 'positive' }, tokens: { color: '#2b8000' } },
-        { if: { colour: 'warning' }, tokens: { color: '#c77539' } },
-        { if: { colour: 'danger' }, tokens: { color: '#c12335' } },
-        { if: { colour: 'black' }, tokens: { color: '#000000' } },
-        { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
-        { if: { colour: 'brand2' }, tokens: { color: '#2b8000' } },
-        { if: { colour: 'brand3' }, tokens: { color: '#7c53a5' } },
+        { if: { color: 'default' }, tokens: { color: '#414547' } },
+        { if: { color: 'brand' }, tokens: { color: '#4b286d' } },
+        { if: { color: 'dark' }, tokens: { color: '#2c2e30' } },
+        { if: { color: 'light' }, tokens: { color: '#676e73' } },
+        { if: { color: 'positive' }, tokens: { color: '#2b8000' } },
+        { if: { color: 'warning' }, tokens: { color: '#c77539' } },
+        { if: { color: 'danger' }, tokens: { color: '#c12335' } },
+        { if: { color: 'black' }, tokens: { color: '#000000' } },
+        { if: { color: 'white' }, tokens: { color: '#ffffff' } },
+        { if: { color: 'brand2' }, tokens: { color: '#2b8000' } },
+        { if: { color: 'brand3' }, tokens: { color: '#7c53a5' } },
         {
-          if: { colour: 'alternative1' },
+          if: { color: 'alternative1' },
           tokens: {
             color: '#4b286d',
             gradient: {
@@ -9765,14 +9773,8 @@ const theme = {
             }
           }
         },
-        {
-          if: { colour: 'alternative2' },
-          tokens: { color: '#4b286d' }
-        },
-        {
-          if: { colour: 'alternative3' },
-          tokens: { color: '#4b286d' }
-        }
+        { if: { color: 'alternative2' }, tokens: { color: '#4b286d' } },
+        { if: { color: 'alternative3' }, tokens: { color: '#4b286d' } }
       ],
       tokens: {
         color: '#414547',
@@ -10056,6 +10058,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '5.0.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '5.1.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "8.0.0",
+  "version": "8.2.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -9,12 +9,12 @@
   "module": "build/web/index.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^6.0.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0",
-    "@telus-uds/system-tokens": "^2.0.0"
+    "@telus-uds/palette-allium": "^6.2.0",
+    "@telus-uds/system-theme-tokens": "^5.2.0",
+    "@telus-uds/system-tokens": "^2.0.2"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^6.0.0"
+    "@telus-uds/palette-allium": "^6.2.0"
   },
   "files": [
     "build",
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "UDS_PALETTE=@telus-uds/palette-allium system-tokens-build-theme",
-    "dev": "nodemon -w src -x 'npm run build'"
+    "dev": "nodemon -w src -x 'pnpm run build'"
   },
   "bugs": {
     "url": "https://github.com/telus/allium-design-system/issues"

package/theme.json

@@ -346,7 +346,7 @@
     "Box": {
       "appearances": {
         "background": {
-          "description": "Background colour of box. Transparent if not specified.",
+          "description": "Background color of box. Transparent if not specified.",
           "type": "variant",
           "values": [
             "lightest",
@@ -2354,6 +2354,7 @@
         "showPanelNavigation": "{system.show.true}",
         "showPanelTabs": "{system.show.true}",
         "showPreviousNextNavigation": "{system.show.true}",
+        "showStepTrackerLabel": "{system.show.true}",
         "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
         "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}",
         "stepTrackerCurrentBackgroundColor": "{system.color.none}"
@@ -2891,6 +2892,7 @@
     },
     "ChevronLink": {
       "appearances": {
+        "disabled": "{appearances.ChevronLink.disabled}",
         "focus": "{appearances.ChevronLink.focus}",
         "hover": "{appearances.ChevronLink.hover}",
         "pressed": "{appearances.ChevronLink.pressed}",
@@ -3493,6 +3495,14 @@
           "tokens": {
             "outerBorderColor": "{palette.color.greyCloud}"
           }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
+          }
         }
       ],
       "tokens": {
@@ -3508,12 +3518,12 @@
         "textLine": "{system.textLine.none}"
       }
     },
-    "ColourToggle": {
+    "ColorToggle": {
       "appearances": {
-        "focus": "{appearances.ColourToggle.focus}",
-        "hover": "{appearances.ColourToggle.hover}",
-        "pressed": "{appearances.ColourToggle.pressed}",
-        "selected": "{appearances.ColourToggle.selected}"
+        "focus": "{appearances.ColorToggle.focus}",
+        "hover": "{appearances.ColorToggle.hover}",
+        "pressed": "{appearances.ColorToggle.pressed}",
+        "selected": "{appearances.ColorToggle.selected}"
       },
       "rules": [
         {
@@ -3629,6 +3639,7 @@
             "feature": true
           },
           "tokens": {
+            "containerBorderColor": "{palette.color.purpleTelus}",
             "labelBorderColor": "{palette.color.purpleTelus}",
             "textFontSize": "{palette.fontSize.size64}",
             "textLineHeight": "{palette.lineHeight.ratio9to8}",
@@ -5174,7 +5185,7 @@
         },
         "pressed": "{appearances.IconButton.pressed}",
         "raised": {
-          "description": "Uses shadow and background colour to appear raised above the page",
+          "description": "Uses shadow and background color to appear raised above the page",
           "type": "variant",
           "values": [true]
         },
@@ -10355,6 +10366,11 @@
     },
     "StepTracker": {
       "appearances": {
+        "floating": {
+          "description": "Compact dot-style indicators (no brand styling; falls back to circular dots).",
+          "type": "variant",
+          "values": [true]
+        },
         "inverse": {
           "description": "Styles the step tracker for using on dark backgrounds.",
           "type": "variant",
@@ -10422,6 +10438,7 @@
         "containerPaddingLeft": "{system.size.none}",
         "containerPaddingRight": "{system.size.none}",
         "containerPaddingTop": "{system.size.none}",
+        "knobAnimatePill": "{system.show.false}",
         "knobBackgroundColor": "{palette.color.transparent}",
         "knobBorderColor": "{palette.color.greyShuttle}",
         "knobBorderWidth": "{palette.border.border1}",
@@ -10429,6 +10446,8 @@
         "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
         "knobCompletedPaddingLeft": "{palette.size.size0}",
         "knobCompletedPaddingTop": "{palette.size.size0}",
+        "knobCompletedRadius": "{system.radius.none}",
+        "knobCompletedWidth": "{system.size.none}",
         "knobCurrentBackgroundColor": "{palette.color.purpleDeluge}",
         "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
         "knobCurrentBorderWidth": "{palette.border.border2}",
@@ -10624,14 +10643,21 @@
             "rowHoverBackgroundColor": "{palette.color.dark5}"
           }
         },
+        {
+          "if": {
+            "spacing": "compact"
+          },
+          "tokens": {
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "spacing": "compact",
             "type": "default"
           },
           "tokens": {
-            "cellPaddingBottom": "{palette.size.size8}",
-            "cellPaddingTop": "{palette.size.size8}",
             "fontSize": "{palette.fontSize.size16}",
             "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
@@ -10642,8 +10668,6 @@
             "type": "rowHeading"
           },
           "tokens": {
-            "cellPaddingBottom": "{palette.size.size8}",
-            "cellPaddingTop": "{palette.size.size8}",
             "fontName": "{palette.fontName.HNforTELUSSA}",
             "fontSize": "{palette.fontSize.size16}",
             "fontWeight": "{palette.fontWeight.weight700}",
@@ -10658,8 +10682,6 @@
           },
           "tokens": {
             "cellBackground": "{palette.color.greyAlabaster}",
-            "cellPaddingBottom": "{palette.size.size8}",
-            "cellPaddingTop": "{palette.size.size8}",
             "fontName": "{palette.fontName.HNforTELUSSA}",
             "fontSize": "{palette.fontSize.size14}",
             "fontWeight": "{palette.fontWeight.weight500}",
@@ -11765,6 +11787,7 @@
         "switchBorderRadius": "{palette.radius.pill32}",
         "switchBorderWidth": "{palette.border.none}",
         "switchColor": "{palette.color.white}",
+        "switchOffset": "{system.size.none}",
         "switchShadow": "{palette.shadow.surfaceRaised}",
         "switchSize": "{palette.size.size18}",
         "trackBorderColor": "{palette.color.transparent}",
@@ -11918,8 +11941,8 @@
           "type": "variant",
           "values": [true]
         },
-        "colour": {
-          "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n  use the tokens prop.",
+        "color": {
+          "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different color is needed,\n  use the tokens prop.",
           "type": "variant",
           "values": [
             "default",
@@ -11984,7 +12007,7 @@
         },
         {
           "if": {
-            "colour": "dark",
+            "color": "dark",
             "size": ["display1", "display2", "h1", "h2", "h3"]
           },
           "tokens": {
@@ -11993,7 +12016,7 @@
         },
         {
           "if": {
-            "colour": "light",
+            "color": "light",
             "size": "h6"
           },
           "tokens": {
@@ -12002,7 +12025,7 @@
         },
         {
           "if": {
-            "colour": "dark",
+            "color": "dark",
             "size": "eyebrow"
           },
           "tokens": {
@@ -12355,7 +12378,7 @@
         },
         {
           "if": {
-            "colour": "default"
+            "color": "default"
           },
           "tokens": {
             "color": "{palette.color.greyCharcoal}"
@@ -12363,7 +12386,7 @@
         },
         {
           "if": {
-            "colour": "brand"
+            "color": "brand"
           },
           "tokens": {
             "color": "{palette.color.purpleTelus}"
@@ -12371,7 +12394,7 @@
         },
         {
           "if": {
-            "colour": "dark"
+            "color": "dark"
           },
           "tokens": {
             "color": "{palette.color.greyThunder}"
@@ -12379,7 +12402,7 @@
         },
         {
           "if": {
-            "colour": "light"
+            "color": "light"
           },
           "tokens": {
             "color": "{palette.color.greyShuttle}"
@@ -12387,7 +12410,7 @@
         },
         {
           "if": {
-            "colour": "positive"
+            "color": "positive"
           },
           "tokens": {
             "color": "{palette.color.greenAccessible}"
@@ -12395,7 +12418,7 @@
         },
         {
           "if": {
-            "colour": "warning"
+            "color": "warning"
           },
           "tokens": {
             "color": "{palette.color.amberDark}"
@@ -12403,7 +12426,7 @@
         },
         {
           "if": {
-            "colour": "danger"
+            "color": "danger"
           },
           "tokens": {
             "color": "{palette.color.redDark}"
@@ -12411,7 +12434,7 @@
         },
         {
           "if": {
-            "colour": "black"
+            "color": "black"
           },
           "tokens": {
             "color": "{palette.color.black}"
@@ -12419,7 +12442,7 @@
         },
         {
           "if": {
-            "colour": "white"
+            "color": "white"
           },
           "tokens": {
             "color": "{palette.color.white}"
@@ -12427,7 +12450,7 @@
         },
         {
           "if": {
-            "colour": "brand2"
+            "color": "brand2"
           },
           "tokens": {
             "color": "{palette.color.greenAccessible}"
@@ -12435,7 +12458,7 @@
         },
         {
           "if": {
-            "colour": "brand3"
+            "color": "brand3"
           },
           "tokens": {
             "color": "{palette.color.purpleDeluge}"
@@ -12443,7 +12466,7 @@
         },
         {
           "if": {
-            "colour": "alternative1"
+            "color": "alternative1"
           },
           "tokens": {
             "color": "{palette.color.purpleTelus}",
@@ -12452,7 +12475,7 @@
         },
         {
           "if": {
-            "colour": "alternative2"
+            "color": "alternative2"
           },
           "tokens": {
             "color": "{palette.color.purpleTelus}"
@@ -12460,7 +12483,7 @@
         },
         {
           "if": {
-            "colour": "alternative3"
+            "color": "alternative3"
           },
           "tokens": {
             "color": "{palette.color.purpleTelus}"