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

package/build/web/spacingScale.js

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

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:49 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:35 GMT
  *
  */
 
@@ -15,6 +15,7 @@ import PaletteIconCheckbold from '@telus-uds/palette-allium/build/rn/icons/Check
 import PaletteIconPause from '@telus-uds/palette-allium/build/rn/icons/Pause'
 import PaletteIconPlayVideo from '@telus-uds/palette-allium/build/rn/icons/PlayVideo'
 import PaletteIconArrowLeft from '@telus-uds/palette-allium/build/rn/icons/ArrowLeft'
+import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
 import PaletteIconAndroidEN from '@telus-uds/palette-allium/build/rn/icons/AndroidEN'
 import PaletteIconAndroidFR from '@telus-uds/palette-allium/build/rn/icons/AndroidFR'
 import PaletteIconIOSEN from '@telus-uds/palette-allium/build/rn/icons/IOSEN'
@@ -35,7 +36,6 @@ import PaletteIconStatusInfo from '@telus-uds/palette-allium/build/rn/icons/Stat
 import PaletteIconTagFilled from '@telus-uds/palette-allium/build/rn/icons/TagFilled'
 import PaletteIconTimes from '@telus-uds/palette-allium/build/rn/icons/Times'
 import PaletteIconSearchBold from '@telus-uds/palette-allium/build/rn/icons/SearchBold'
-import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
 import PaletteIconQuoteLeft from '@telus-uds/palette-allium/build/rn/icons/QuoteLeft'
 import PaletteIconQuoteLeftArrow from '@telus-uds/palette-allium/build/rn/icons/QuoteLeftArrow'
 import PaletteIconAmex from '@telus-uds/palette-allium/build/rn/icons/Amex'
@@ -1359,10 +1359,6 @@ const theme = {
     },
     Card: {
       appearances: {
-        background: {
-          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.",
@@ -1455,37 +1451,6 @@ const theme = {
         { if: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
         { if: { borderRadius: 'small' }, tokens: { borderRadius: 6 } },
         { if: { borderRadius: 'large' }, tokens: { borderRadius: 12 } },
-        {
-          if: { background: 'alternative' },
-          tokens: { backgroundColor: '#f4f4f7' }
-        },
-        {
-          if: { background: 'subtle' },
-          tokens: { backgroundColor: '#fafafa' }
-        },
-        {
-          if: { background: 'feature' },
-          tokens: {
-            borderColor: '#4b286d',
-            borderWidth: 2,
-            gradient: {
-              angle: 135,
-              stops: [
-                { color: '#4b286d', hint: 0.75, stop: 0 },
-                { color: '#e53293', stop: 1 }
-              ],
-              type: 'linear'
-            }
-          }
-        },
-        {
-          if: { background: 'grid' },
-          tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
-        },
-        {
-          if: { background: 'plain' },
-          tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
-        },
         {
           if: { style: 'grid' },
           tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
@@ -2128,6 +2093,7 @@ const theme = {
         containerPaddingTop: 24,
         margin: 4,
         padding: 8,
+        playIcon: PaletteIconPlaySolid,
         selectedBorderColor: '#676e73',
         selectedBorderWidth: 2,
         size: 56
@@ -2440,7 +2406,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' ],
@@ -2453,7 +2418,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',
@@ -2480,24 +2444,6 @@ const theme = {
           tokens: { color: '#1f5c09', iconDisplace: 4 }
         },
         { if: { pressed: true }, tokens: { color: '#163e06' } },
-        { if: { alternative: true }, tokens: { color: '#414547' } },
-        {
-          if: { alternative: true, hover: true },
-          tokens: { color: '#2c2e30' }
-        },
-        {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#2c2e30' }
-        },
-        { if: { inverse: true }, tokens: { color: '#ffffff' } },
-        {
-          if: { hover: true, inverse: true },
-          tokens: { color: '#f4f4f7' }
-        },
-        {
-          if: { inverse: true, pressed: true },
-          tokens: { color: '#e3e6e8' }
-        },
         {
           if: { size: 'large' },
           tokens: { blockLineHeight: 1.6, fontSize: 20, iconSize: 20 }
@@ -2526,14 +2472,6 @@ const theme = {
           if: { focus: true, pressed: true },
           tokens: { outerBorderColor: '#163e06' }
         },
-        {
-          if: { focus: true, inverse: true },
-          tokens: { outerBorderColor: '#ffffff' }
-        },
-        {
-          if: { alternative: true, focus: true },
-          tokens: { color: '#414547', outerBorderColor: '#414547' }
-        },
         {
           if: { focus: true, quiet: true },
           tokens: { color: '#2b8000', textLine: 'underline' }
@@ -3182,36 +3120,27 @@ const theme = {
     ExpandCollapseMini: { appearances: {}, rules: [], tokens: { borderWidth: 0 } },
     ExpandCollapseMiniControl: {
       appearances: {
-        alternative: {
-          description: 'Replaces the default green colour with a more subtle grey.',
-          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: PaletteIconCaretUp }
         },
-        { if: { alternative: true }, tokens: { color: '#414547' } },
+        { if: { style: 'subtle' }, tokens: { color: '#414547' } },
         {
-          if: { inverse: true },
+          if: { style: 'inverse' },
           tokens: { color: '#ffffff', iconColor: '#ffffff' }
         },
         {
@@ -3228,11 +3157,11 @@ const theme = {
         },
         { if: { quiet: true }, tokens: { textLine: 'none' } },
         {
-          if: { alternative: true, quiet: true },
+          if: { quiet: true, style: 'subtle' },
           tokens: { color: '#414547', textLine: 'none' }
         },
         {
-          if: { inverse: true, quiet: true },
+          if: { quiet: true, style: 'inverse' },
           tokens: { color: '#ffffff', iconColor: '#ffffff', textLine: 'none' }
         }
       ],
@@ -4619,11 +4548,6 @@ const theme = {
     InputSupports: { appearances: {}, rules: [], tokens: { space: 1 } },
     Link: {
       appearances: {
-        alternative: {
-          description: 'Replaces the default green colour with a more subtle grey.',
-          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' ],
@@ -4641,11 +4565,6 @@ const theme = {
           type: 'state',
           values: [ 'left', 'right', 'inline' ]
         },
-        inverse: {
-          description: 'Styles the link white for use on dark backgrounds.',
-          type: 'variant',
-          values: [ true ]
-        },
         light: {
           description: 'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
           type: 'variant',
@@ -4709,36 +4628,6 @@ const theme = {
             iconSize: 16
           }
         },
-        { if: { alternative: true }, tokens: { color: '#2c2e30' } },
-        {
-          if: { alternative: true, focus: true },
-          tokens: { color: '#414547', outerBorderColor: '#414547' }
-        },
-        {
-          if: { alternative: true, hover: true },
-          tokens: { color: '#2c2e30' }
-        },
-        {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#2c2e30' }
-        },
-        { if: { inverse: true }, tokens: { color: '#ffffff' } },
-        {
-          if: { hover: true, inverse: true },
-          tokens: { color: '#f4f4f7' }
-        },
-        {
-          if: { focus: true, inverse: true },
-          tokens: { outerBorderColor: '#ffffff', outerBorderOutline: 'none' }
-        },
-        {
-          if: { inverse: true, pressed: true },
-          tokens: { color: '#e3e6e8' }
-        },
-        {
-          if: { focus: true, inverse: true, pressed: true },
-          tokens: { color: '#e3e6e8', outerBorderColor: '#e3e6e8' }
-        },
         { if: { light: true }, tokens: { color: '#676e73' } },
         {
           if: { focus: true, light: true },
@@ -4757,14 +4646,6 @@ const theme = {
           if: { focus: true, quiet: true },
           tokens: { color: '#2b8000', textLine: 'underline' }
         },
-        {
-          if: { alternative: true, hover: true, quiet: true },
-          tokens: { color: '#2c2e30', textLine: 'underline' }
-        },
-        {
-          if: { hover: true, inverse: true, quiet: true },
-          tokens: { color: '#f4f4f7', textLine: 'underline' }
-        },
         {
           if: { hover: true, light: true, quiet: true },
           tokens: { color: '#414547', textLine: 'underline' }
@@ -6460,7 +6341,7 @@ const theme = {
         }
       },
       rules: [
-        { if: { size: 'mini' }, tokens: { height: 8 } },
+        { if: { size: 'mini' }, tokens: { barHeight: 8, height: 8 } },
         {
           if: { style: 'inverse' },
           tokens: {
@@ -6479,6 +6360,7 @@ const theme = {
       ],
       tokens: {
         backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        barHeight: 16,
         borderColor: '#b2b9bf',
         borderRadius: 12,
         borderWidth: 1,
@@ -6495,12 +6377,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',
@@ -6508,24 +6384,6 @@ const theme = {
         }
       },
       rules: [
-        {
-          if: { inactive: true },
-          tokens: {
-            backgroundColor: '#b2b9bf',
-            gradient: null,
-            outlineColor: '#2c2e30',
-            shadow: null
-          }
-        },
-        {
-          if: { negative: true },
-          tokens: {
-            backgroundColor: '#c12335',
-            gradient: null,
-            outlineColor: '#c12335',
-            shadow: null
-          }
-        },
         {
           if: { style: 'inactive' },
           tokens: {
@@ -7377,6 +7235,26 @@ const theme = {
         paddingTop: 4
       }
     },
+    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: '#676e73',
+        progressBarHeight: 8,
+        progressHitAreaHeight: 24,
+        progressSpacing: 8,
+        progressTrackColor: 'rgba(0, 0, 0, 0.1)',
+        progressTrackHeight: 8
+      }
+    },
     Search: {
       appearances: {
         focus: {
@@ -10174,6 +10052,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '5.0.0-alpha.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '5.0.0-alpha.2' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "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-alpha.0",
-    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
-    "@telus-uds/system-tokens": "^2.0.0-alpha.0"
+    "@telus-uds/palette-allium": "^6.0.0-alpha.2",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.2",
+    "@telus-uds/system-tokens": "^2.0.0-alpha.2"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^6.0.0-alpha.0"
+    "@telus-uds/palette-allium": "^6.0.0-alpha.2"
   },
   "files": [
     "build",