@telus-uds/theme-allium 7.12.1 → 7.13.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Fri, 15 Aug 2025 00:44:25 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Fri, 15 Aug 2025 00:44:25 GMT
  *
  */
 
@@ -936,7 +936,9 @@ const theme = {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
           type: 'state',
           values: [ true ]
-        }
+        },
+        size: { type: 'variant', values: [ 'default', 'small' ] },
+        width: { type: 'variant', values: [ 'full' ] }
       },
       rules: [
         { if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
@@ -995,6 +997,10 @@ const theme = {
         {
           if: { focus: true, pressed: true, selected: true },
           tokens: { outerBorderGap: 2, outerBorderWidth: 2 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { paddingBottom: 4, paddingTop: 4 }
         }
       ],
       tokens: {
@@ -1004,13 +1010,17 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
+        descriptionFontName: 'HNforTELUSSA',
+        descriptionFontSize: 14,
+        descriptionFontWeight: '400',
+        descriptionTextPaddingBottom: 4,
         dividerColor: '#e3e6e8',
         fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconCaretDown,
         iconAlignSelf: 'center',
-        iconBackground: '#f4f4f7',
+        iconBackground: 'rgba(0, 0, 0, 0)',
         iconBorderRadius: 32,
         iconColor: '#414547',
         iconPadding: 2,
@@ -1019,6 +1029,16 @@ const theme = {
         iconSpace: 1,
         iconTranslateX: 0,
         iconTranslateY: 0,
+        leadIcon: null,
+        leadIconBackgroundColor: '#f4f4f7',
+        leadIconBorderRadius: 45,
+        leadIconColor: '#414547',
+        leadIconContainerPaddingBottom: 0,
+        leadIconContainerPaddingLeft: 0,
+        leadIconContainerPaddingRight: 0,
+        leadIconContainerPaddingTop: 0,
+        leadIconPadding: 4,
+        leadIconSize: 24,
         lineHeight: 1.42857142857,
         minWidth: 0,
         opacity: 1,
@@ -1026,13 +1046,15 @@ const theme = {
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 2,
         outerBorderWidth: 2,
-        paddingBottom: 8,
-        paddingLeft: 16,
-        paddingRight: 8,
-        paddingTop: 8,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 12,
         shadow: null,
         subtitleColor: '#676e73',
         textAlign: 'center',
+        textPaddingLeft: 8,
+        textPaddingRight: 8,
         width: null
       }
     },
@@ -2154,7 +2176,7 @@ const theme = {
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
-        labelMarginLeft: 10
+        labelMarginLeft: 8
       }
     },
     CheckboxCard: {
@@ -3135,11 +3157,11 @@ const theme = {
         },
         {
           if: { size: 'small' },
-          tokens: { fontSize: 14, iconSize: 20, lineHeight: 1.45 }
+          tokens: { fontSize: 14, iconSize: 16, lineHeight: 1.42857142857 }
         },
         {
           if: { size: 'large' },
-          tokens: { fontSize: 20, lineHeight: 1.28571428571 }
+          tokens: { fontSize: 20, iconSize: 20, lineHeight: 1.6 }
         },
         { if: { quiet: true }, tokens: { textLine: 'none' } },
         {
@@ -3161,7 +3183,7 @@ const theme = {
         iconGap: 8,
         iconPaddingTop: 4,
         iconPosition: 'left',
-        iconSize: 24,
+        iconSize: 16,
         justifyContent: 'flex-start',
         lineHeight: 1.5,
         paddingBottom: 0,
@@ -4364,7 +4386,7 @@ const theme = {
         color: '#2b8000',
         icon: null,
         iconSize: 24,
-        iconSpace: 0,
+        iconSpace: 1,
         iconTranslateX: 0,
         iconTranslateY: 0,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -4520,18 +4542,14 @@ const theme = {
             groupColor: '#4b286d',
             groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700',
-            itemColor: '#4b286d',
-            itemPaddingBottom: 12,
-            itemPaddingLeft: 16,
-            itemPaddingRight: 16,
-            itemPaddingTop: 12
+            itemColor: '#4b286d'
           }
         },
         {
           if: { current: true, pressed: true },
           tokens: {
             groupBackgroundColor: '#e3e6e8',
-            groupBorderWidth: 0,
+            groupBorderWidth: 1,
             groupColor: '#676e73',
             groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700'
@@ -4540,10 +4558,10 @@ const theme = {
         {
           if: { isChild: true },
           tokens: {
-            itemBorderBottomWidth: 0,
+            itemBorderBottomWidth: 1,
             itemBorderLeftColor: '#e3e6e8',
             itemBorderLeftWidth: 4,
-            itemBorderTopWidth: 0
+            itemBorderTopWidth: 1
           }
         },
         {
@@ -4573,9 +4591,9 @@ const theme = {
         {
           if: { isChild: true, pressed: true },
           tokens: {
-            itemBorderBottomWidth: 0,
+            itemBorderBottomWidth: 1,
             itemBorderLeftColor: '#676e73',
-            itemBorderTopWidth: 0
+            itemBorderTopWidth: 1
           }
         }
       ],
@@ -4612,10 +4630,10 @@ const theme = {
         itemFontWeight: '700',
         itemHeight: 40,
         itemOutline: 0,
-        itemPaddingBottom: 8,
+        itemPaddingBottom: 12,
         itemPaddingLeft: 16,
         itemPaddingRight: 16,
-        itemPaddingTop: 8,
+        itemPaddingTop: 12,
         itemTextDecoration: 'none',
         lineHeight: 1.14285714286,
         minHeight: '100%',
@@ -6202,7 +6220,7 @@ const theme = {
         containerBorderRadius: 0,
         containerOpacity: 1,
         containerPaddingBottom: 0,
-        containerPaddingLeft: 2,
+        containerPaddingLeft: 0,
         containerPaddingRight: 0,
         containerPaddingTop: 0,
         containerShadow: null,
@@ -6225,7 +6243,7 @@ const theme = {
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
-        labelMarginLeft: 10,
+        labelMarginLeft: 8,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 2
@@ -9097,6 +9115,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '4.11.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '4.12.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "7.12.1",
+  "version": "7.13.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": "^5.8.0",
-    "@telus-uds/system-theme-tokens": "^4.11.0",
-    "@telus-uds/system-tokens": "^1.4.4"
+    "@telus-uds/palette-allium": "^5.9.0",
+    "@telus-uds/system-theme-tokens": "^4.12.0",
+    "@telus-uds/system-tokens": "^1.4.5"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^5.8.0"
+    "@telus-uds/palette-allium": "^5.9.0"
   },
   "files": [
     "build",

package/theme.json

@@ -1089,7 +1089,15 @@
         "inactive": "{appearances.ButtonDropdown.inactive}",
         "open": "{appearances.ButtonDropdown.open}",
         "pressed": "{appearances.ButtonDropdown.pressed}",
-        "selected": "{appearances.ButtonDropdown.selected}"
+        "selected": "{appearances.ButtonDropdown.selected}",
+        "size": {
+          "type": "variant",
+          "values": ["default", "small"]
+        },
+        "width": {
+          "type": "variant",
+          "values": ["full"]
+        }
       },
       "rules": [
         {
@@ -1194,6 +1202,15 @@
             "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border2}"
           }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size4}",
+            "paddingTop": "{palette.size.size4}"
+          }
         }
       ],
       "tokens": {
@@ -1203,13 +1220,17 @@
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greyShuttle}",
+        "descriptionFontName": "{palette.fontName.HNforTELUSSA}",
+        "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionFontWeight": "{palette.fontWeight.weight400}",
+        "descriptionTextPaddingBottom": "{palette.size.size4}",
         "dividerColor": "{palette.color.greyMystic}",
         "fontName": "{palette.fontName.HNforTELUSSA}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight700}",
         "icon": "{palette.icon.CaretDown}",
         "iconAlignSelf": "{system.flexAlign.center}",
-        "iconBackground": "{palette.color.greyAthens}",
+        "iconBackground": "{palette.color.transparent}",
         "iconBorderRadius": "{palette.radius.pill32}",
         "iconColor": "{palette.color.greyCharcoal}",
         "iconPadding": "{palette.size.size2}",
@@ -1218,6 +1239,16 @@
         "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
+        "leadIcon": "{system.icon.none}",
+        "leadIconBackgroundColor": "{palette.color.greyAthens}",
+        "leadIconBorderRadius": "{palette.radius.radius45}",
+        "leadIconColor": "{palette.color.greyCharcoal}",
+        "leadIconContainerPaddingBottom": "{palette.size.size0}",
+        "leadIconContainerPaddingLeft": "{palette.size.size0}",
+        "leadIconContainerPaddingRight": "{palette.size.size0}",
+        "leadIconContainerPaddingTop": "{palette.size.size0}",
+        "leadIconPadding": "{palette.size.size4}",
+        "leadIconSize": "{palette.size.size24}",
         "lineHeight": "{palette.lineHeight.ratio10to7}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
@@ -1225,13 +1256,15 @@
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "subtitleColor": "{palette.color.greyShuttle}",
         "textAlign": "{system.flexJustifyContent.center}",
+        "textPaddingLeft": "{palette.size.size8}",
+        "textPaddingRight": "{palette.size.size8}",
         "width": "{system.size.none}"
       }
     },
@@ -2643,7 +2676,7 @@
         "labelFontSize": "{palette.fontSize.size16}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "labelMarginLeft": "{palette.size.size10}"
+        "labelMarginLeft": "{palette.size.size8}"
       }
     },
     "CheckboxCard": {
@@ -4108,8 +4141,8 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "iconSize": "{palette.size.size20}",
-            "lineHeight": "{palette.lineHeight.ratio14to1}"
+            "iconSize": "{palette.size.size16}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
           }
         },
         {
@@ -4118,7 +4151,8 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio9to7}"
+            "iconSize": "{palette.size.size20}",
+            "lineHeight": "{palette.lineHeight.ratio8to5}"
           }
         },
         {
@@ -4161,7 +4195,7 @@
         "iconGap": "{palette.size.size8}",
         "iconPaddingTop": "{palette.size.size4}",
         "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size16}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "paddingBottom": "{palette.size.size0}",
@@ -6227,7 +6261,7 @@
         "color": "{palette.color.greenAccessible}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size24}",
-        "iconSpace": "{system.integer.0}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -6393,11 +6427,7 @@
             "groupColor": "{palette.color.purpleTelus}",
             "groupFontName": "{palette.fontName.HNforTELUSSA}",
             "groupFontWeight": "{palette.fontWeight.weight700}",
-            "itemColor": "{palette.color.purpleTelus}",
-            "itemPaddingBottom": "{palette.size.size12}",
-            "itemPaddingLeft": "{palette.size.size16}",
-            "itemPaddingRight": "{palette.size.size16}",
-            "itemPaddingTop": "{palette.size.size12}"
+            "itemColor": "{palette.color.purpleTelus}"
           }
         },
         {
@@ -6407,7 +6437,7 @@
           },
           "tokens": {
             "groupBackgroundColor": "{palette.color.greyMystic}",
-            "groupBorderWidth": "{palette.border.none}",
+            "groupBorderWidth": "{palette.border.border1}",
             "groupColor": "{palette.color.greyShuttle}",
             "groupFontName": "{palette.fontName.HNforTELUSSA}",
             "groupFontWeight": "{palette.fontWeight.weight700}"
@@ -6418,10 +6448,10 @@
             "isChild": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.greyMystic}",
             "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "itemBorderTopWidth": "{palette.border.border1}"
           }
         },
         {
@@ -6472,9 +6502,9 @@
             "pressed": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.greyShuttle}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "itemBorderTopWidth": "{palette.border.border1}"
           }
         }
       ],
@@ -6511,10 +6541,10 @@
         "itemFontWeight": "{palette.fontWeight.weight700}",
         "itemHeight": "{palette.size.size40}",
         "itemOutline": "{palette.border.none}",
-        "itemPaddingBottom": "{palette.size.size8}",
+        "itemPaddingBottom": "{palette.size.size12}",
         "itemPaddingLeft": "{palette.size.size16}",
         "itemPaddingRight": "{palette.size.size16}",
-        "itemPaddingTop": "{palette.size.size8}",
+        "itemPaddingTop": "{palette.size.size12}",
         "itemTextDecoration": "{system.textLine.none}",
         "lineHeight": "{palette.lineHeight.ratio8to7}",
         "minHeight": "{system.size.full}",
@@ -8267,7 +8297,7 @@
         "containerBorderRadius": "{palette.radius.none}",
         "containerOpacity": "{system.opacity.opaque}",
         "containerPaddingBottom": "{palette.size.size0}",
-        "containerPaddingLeft": "{palette.size.size2}",
+        "containerPaddingLeft": "{palette.size.size0}",
         "containerPaddingRight": "{palette.size.size0}",
         "containerPaddingTop": "{palette.size.size0}",
         "containerShadow": "{system.shadow.none}",
@@ -8290,7 +8320,7 @@
         "labelFontSize": "{palette.fontSize.size16}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "labelMarginLeft": "{palette.size.size10}",
+        "labelMarginLeft": "{palette.size.size8}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{palette.border.border2}"