@telus-uds/theme-allium 7.12.1 → 7.14.0

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}",
@@ -4667,6 +4701,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large", "extraLarge"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -4715,6 +4753,17 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "background": true,
@@ -4775,6 +4824,266 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -4799,6 +5108,14 @@
             "size": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
         {
           "if": {
             "color": "brand"
@@ -4857,10 +5174,10 @@
         },
         {
           "if": {
-            "size": "extraLarge"
+            "color": "offer"
           },
           "tokens": {
-            "size": "{palette.size.size48}"
+            "gradient": "{palette.gradient.purple}"
           }
         },
         {
@@ -4870,14 +5187,6 @@
           "tokens": {
             "color": "{palette.color.purpleTelus}"
           }
-        },
-        {
-          "if": {
-            "color": "offer"
-          },
-          "tokens": {
-            "gradient": "{palette.gradient.purple}"
-          }
         }
       ],
       "tokens": {
@@ -5483,6 +5792,15 @@
             "textLine": "{system.textLine.none}"
           }
         },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
         {
           "if": {
             "focus": true,
@@ -5492,6 +5810,18 @@
             "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "size": "large"
@@ -5529,7 +5859,17 @@
             "alternative": true
           },
           "tokens": {
-            "color": "{palette.color.greyThunder}"
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
           }
         },
         {
@@ -5538,8 +5878,8 @@
             "focus": true
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}",
-            "outerBorderColor": "{palette.color.greyCharcoal}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}"
           }
         },
         {
@@ -5659,10 +5999,19 @@
             "quiet": true
           },
           "tokens": {
-            "color": "{palette.color.greenAccessible}",
+            "color": "{palette.color.greyShuttle}",
             "textLine": "{system.textLine.underline}"
           }
         },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
         {
           "if": {
             "alternative": true,
@@ -5911,6 +6260,18 @@
             "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
         {
           "if": {
             "hover": true,
@@ -6227,7 +6588,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 +6754,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 +6764,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 +6775,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 +6829,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 +6868,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 +8624,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 +8647,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}"
@@ -9843,7 +10200,7 @@
       "tokens": {
         "borderBottomColor": "{palette.color.greyShuttle}",
         "borderBottomWidth": "{palette.border.border1}",
-        "buttonClearance": "{palette.size.size16}",
+        "buttonClearance": "{palette.size.size24}",
         "gutter": "{palette.size.size4}",
         "nextIcon": "{palette.icon.ArrowRight}",
         "previousIcon": "{palette.icon.ArrowLeft}",
@@ -9852,6 +10209,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -9864,7 +10226,8 @@
           "values": [true]
         },
         "pressed": "{appearances.TabsItem.pressed}",
-        "selected": "{appearances.TabsItem.pressed}"
+        "selected": "{appearances.TabsItem.pressed}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -9978,6 +10341,132 @@
           "tokens": {
             "maxWidth": "{system.size.none}"
           }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.pill32}",
+            "borderWidth": "{palette.border.border3}",
+            "color": "{palette.color.greyShuttle}",
+            "paddingHorizontal": "{palette.size.size21}",
+            "paddingVertical": "{palette.size.size5}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border2}",
+            "color": "{palette.color.purpleTelus}",
+            "paddingHorizontal": "{palette.size.size22}",
+            "paddingVertical": "{palette.size.size6}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.white}",
+            "paddingHorizontal": "{palette.size.size24}",
+            "paddingVertical": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.purpleTelus}",
+            "paddingHorizontal": "{palette.size.size24}",
+            "paddingVertical": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -9986,6 +10475,8 @@
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{system.border.zero}",
         "color": "{palette.color.greyShuttle}",
+        "dropdownIcon": "{palette.icon.CaretDown}",
+        "dropdownIconExpanded": "{palette.icon.CaretUp}",
         "fontName": "{palette.fontName.HNforTELUSSA}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size14}",