@telus-uds/theme-allium 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:25:30 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:15 GMT
  *
  */
 

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:31 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:15 GMT
  *
  */
 
@@ -15,6 +15,7 @@ const PaletteIconCheckbold = require('@telus-uds/palette-allium/build/rn/icons/C
 const PaletteIconPause = require('@telus-uds/palette-allium/build/rn/icons/Pause')
 const PaletteIconPlayVideo = require('@telus-uds/palette-allium/build/rn/icons/PlayVideo')
 const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
+const PaletteIconPlaySolid = require('@telus-uds/palette-allium/build/rn/icons/PlaySolid')
 const PaletteIconAndroidEN = require('@telus-uds/palette-allium/build/rn/icons/AndroidEN')
 const PaletteIconAndroidFR = require('@telus-uds/palette-allium/build/rn/icons/AndroidFR')
 const PaletteIconIOSEN = require('@telus-uds/palette-allium/build/rn/icons/IOSEN')
@@ -35,7 +36,6 @@ const PaletteIconStatusInfo = require('@telus-uds/palette-allium/build/rn/icons/
 const PaletteIconTagFilled = require('@telus-uds/palette-allium/build/rn/icons/TagFilled')
 const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
 const PaletteIconSearchBold = require('@telus-uds/palette-allium/build/rn/icons/SearchBold')
-const PaletteIconPlaySolid = require('@telus-uds/palette-allium/build/rn/icons/PlaySolid')
 const PaletteIconQuoteLeft = require('@telus-uds/palette-allium/build/rn/icons/QuoteLeft')
 const PaletteIconQuoteLeftArrow = require('@telus-uds/palette-allium/build/rn/icons/QuoteLeftArrow')
 const PaletteIconAmex = require('@telus-uds/palette-allium/build/rn/icons/Amex')
@@ -1360,10 +1360,6 @@ module.exports = {
     },
     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.",
@@ -1456,37 +1452,6 @@ module.exports = {
         { 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 }
@@ -2129,6 +2094,7 @@ module.exports = {
         containerPaddingTop: 24,
         margin: 4,
         padding: 8,
+        playIcon: PaletteIconPlaySolid,
         selectedBorderColor: '#676e73',
         selectedBorderWidth: 2,
         size: 56
@@ -2441,7 +2407,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' ],
@@ -2454,7 +2419,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',
@@ -2481,24 +2445,6 @@ module.exports = {
           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 }
@@ -2527,14 +2473,6 @@ module.exports = {
           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' }
@@ -3183,36 +3121,27 @@ module.exports = {
     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' }
         },
         {
@@ -3229,11 +3158,11 @@ module.exports = {
         },
         { 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' }
         }
       ],
@@ -4620,11 +4549,6 @@ module.exports = {
     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' ],
@@ -4642,11 +4566,6 @@ module.exports = {
           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',
@@ -4710,36 +4629,6 @@ module.exports = {
             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 },
@@ -4758,14 +4647,6 @@ module.exports = {
           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' }
@@ -6461,7 +6342,7 @@ module.exports = {
         }
       },
       rules: [
-        { if: { size: 'mini' }, tokens: { height: 8 } },
+        { if: { size: 'mini' }, tokens: { barHeight: 8, height: 8 } },
         {
           if: { style: 'inverse' },
           tokens: {
@@ -6480,6 +6361,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        barHeight: 16,
         borderColor: '#b2b9bf',
         borderRadius: 12,
         borderWidth: 1,
@@ -6496,12 +6378,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',
@@ -6509,24 +6385,6 @@ module.exports = {
         }
       },
       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: {
@@ -7378,6 +7236,26 @@ module.exports = {
         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: {
@@ -10175,5 +10053,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '5.0.0-alpha.0' }
+  metadata: { name: 'theme-allium', 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:49 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:35 GMT
  *
  */
 

package/build/web/ActivityIndicator.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/Autocomplete.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/Badge.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/BlockQuote.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/Box.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/Breadcrumbs.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/Button.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/ButtonDropdown.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/ButtonGroup.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/ButtonGroupItem.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/Callout.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/Card.js

@@ -1,17 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:49 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:35 GMT
  *
  */
 
 import PaletteIconCheckbold from '@telus-uds/palette-allium/build/rn/icons/Checkbold'
 const theme = {
   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.",
@@ -104,37 +100,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 }

package/build/web/CardGroup.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/Carousel.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/CarouselTabsPanelItem.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/CarouselThumbnail.js

@@ -1,11 +1,11 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 20 Mar 2026 02:25:49 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:35 GMT
  *
  */
 
-
+import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
 const theme = {
   appearances: {
     focus: {
@@ -54,6 +54,7 @@ const theme = {
     containerPaddingTop: 24,
     margin: 4,
     padding: 8,
+    playIcon: PaletteIconPlaySolid,
     selectedBorderColor: '#676e73',
     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:49 GMT
+ * Generated on Fri, 17 Apr 2026 23:53:35 GMT
  *
  */
 

package/build/web/CheckboxCard.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/CheckboxCardGroup.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/CheckboxGroup.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
  *
  */