@telus-uds/theme-allium 7.3.0 → 7.4.0

package/theme.json

@@ -85,6 +85,10 @@
     },
     "ActivityIndicator": {
       "appearances": {
+        "dots": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
@@ -104,8 +108,10 @@
       ],
       "tokens": {
         "color": "{palette.color.greenAccessible}",
+        "dotSize": "{palette.size.size6}",
+        "indicatorBackgroundColor": "{palette.color.greenTusk}",
         "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border2}"
+        "thickness": "{palette.border.border3}"
       }
     },
     "Autocomplete": {
@@ -1940,6 +1946,14 @@
             "paddingTop": "{palette.size.size0}"
           }
         },
+        {
+          "if": {
+            "interactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}"
+          }
+        },
         {
           "if": {
             "focus": false,
@@ -2005,6 +2019,66 @@
             "borderColor": "{palette.color.purpleTelus}",
             "borderWidth": "{palette.border.border1}"
           }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "darker"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "darker"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
         }
       ],
       "tokens": {
@@ -4670,6 +4744,10 @@
           "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
           "type": "variant",
           "values": ["large", "small", "micro"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
@@ -4894,6 +4972,16 @@
             "textLine": "{system.textLine.underline}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "alternative": true,
@@ -4926,219 +5014,739 @@
             "color": "{palette.color.greyCharcoal}",
             "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "alignSelf": "{system.flexAlign.flexStart}",
-        "blockFontName": "{palette.fontName.HNforTELUSSA}",
-        "blockFontSize": "{palette.fontSize.size16}",
-        "blockFontWeight": "{palette.fontWeight.weight400}",
-        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
-        "borderRadius": "{palette.radius.radius4}",
-        "color": "{palette.color.greenAccessible}",
-        "icon": "{system.icon.none}",
-        "iconSize": "{palette.size.size24}",
-        "iconSpace": "{system.integer.0}",
-        "iconTranslateX": "{system.size.zero}",
-        "iconTranslateY": "{system.size.zero}",
-        "outerBorderColor": "{palette.color.transparent}",
-        "outerBorderGap": "{palette.size.size2}",
-        "outerBorderOutline": "{system.borderStyle.none}",
-        "outerBorderWidth": "{palette.border.border2}",
-        "textLine": "{system.textLine.underline}",
-        "textLineStyle": "{system.textLineStyle.solid}"
-      }
-    },
-    "List": {
-      "appearances": {
-        "compact": {
-          "description": "When true it will reduce the line height of the list item.",
-          "type": "variant",
-          "values": [true]
         },
-        "size": {
-          "description": "Indicates list item text size.",
-          "type": "variant",
-          "values": ["large", "small"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "size": "large"
+            "style": "inline"
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size4}",
-            "itemFontSize": "{palette.fontSize.size20}",
-            "itemIconSize": "{palette.size.size24}",
-            "itemLineHeight": "{palette.lineHeight.ratio8to5}"
+            "color": "{palette.color.greyCharcoal}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "focus": true,
+            "style": "inline"
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size0}",
-            "itemBulletContainerHeight": "{palette.size.size20}",
-            "itemFontSize": "{palette.fontSize.size14}",
-            "itemIconSize": "{palette.size.size20}",
-            "itemLineHeight": "{palette.lineHeight.ratio10to7}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "compact": true
+            "hover": true,
+            "style": "inline"
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size0}",
-            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "small"
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "large"
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
-        }
-      ],
-      "tokens": {
-        "bulletIcon": "{palette.icon.BulletFill}",
-        "dividerColor": "{palette.color.greyCloud}",
-        "dividerSize": "{palette.border.border1}",
-        "iconMarginTop": "{palette.size.size0}",
-        "interItemMargin": "{palette.size.size8}",
-        "interItemMarginWithDivider": "{palette.size.size16}",
-        "itemBulletColor": "{palette.color.purpleTelus}",
-        "itemBulletContainerAlign": "{system.textAlign.center}",
-        "itemBulletContainerHeight": "{palette.size.size24}",
-        "itemBulletContainerWidth": "{palette.size.size24}",
-        "itemFontName": "{palette.fontName.HNforTELUSSA}",
-        "itemFontSize": "{palette.fontSize.size16}",
-        "itemFontWeight": "{palette.fontWeight.weight400}",
-        "itemIconColor": "{palette.color.purpleTelus}",
-        "itemIconSize": "{palette.size.size24}",
-        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
-        "itemTextColor": "{palette.color.greyCharcoal}",
-        "listGutter": "{palette.size.size8}"
-      }
-    },
-    "Listbox": {
-      "appearances": {
-        "current": "{appearances.Listbox.current}",
-        "expanded": "{appearances.Listbox.expanded}",
-        "focus": "{appearances.Listbox.focus}",
-        "hover": "{appearances.Listbox.hover}",
-        "isChild": "{appearances.Listbox.isChild}",
-        "pressed": "{appearances.Listbox.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "focus": true,
-            "hover": true,
-            "pressed": true
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.greyMystic}",
-            "groupBorderColor": "{palette.color.transparent}",
-            "groupColor": "{palette.color.greyShuttle}",
-            "itemBackgroundColor": "{palette.color.greyMystic}",
-            "itemColor": "{palette.color.greyShuttle}"
+            "color": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
-            "focus": false,
-            "hover": true,
-            "pressed": false
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.greyAthens}",
-            "groupColor": "{palette.color.purpleTelus}",
-            "itemBackgroundColor": "{palette.color.greyAthens}",
-            "itemColor": "{palette.color.purpleTelus}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": false
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupBorderColor": "{palette.color.purpleTelus}",
-            "groupBorderWidth": "{palette.border.border1}",
-            "groupColor": "{palette.color.purpleTelus}",
-            "itemBorderBottomColor": "{palette.color.purpleTelus}",
-            "itemBorderLeftColor": "{palette.color.purpleTelus}",
-            "itemBorderRightColor": "{palette.color.purpleTelus}",
-            "itemBorderTopColor": "{palette.color.purpleTelus}",
-            "itemColor": "{palette.color.purpleTelus}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "expanded": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupIcon": "{palette.icon.CaretUp}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "current": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "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}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "current": true,
-            "pressed": true
+            "style": "feature"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.greyMystic}",
-            "groupBorderWidth": "{palette.border.none}",
-            "groupColor": "{palette.color.greyShuttle}",
-            "groupFontName": "{palette.fontName.HNforTELUSSA}",
-            "groupFontWeight": "{palette.fontWeight.weight700}"
+            "color": "{palette.color.greenAccessible}"
           }
         },
         {
           "if": {
-            "isChild": true
+            "focus": true,
+            "style": "feature"
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
-            "itemBorderLeftColor": "{palette.color.greyMystic}",
-            "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "isChild": true
+            "hover": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDarker}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyAthens}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCloud}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDarker}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyAthens}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyCloud}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "blockFontName": "{palette.fontName.HNforTELUSSA}",
+        "blockFontSize": "{palette.fontSize.size16}",
+        "blockFontWeight": "{palette.fontWeight.weight400}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.greenAccessible}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.size.size24}",
+        "iconSpace": "{system.integer.0}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size2}",
+        "outerBorderOutline": "{system.borderStyle.none}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "textLine": "{system.textLine.underline}",
+        "textLineStyle": "{system.textLineStyle.solid}"
+      }
+    },
+    "List": {
+      "appearances": {
+        "compact": {
+          "description": "When true it will reduce the line height of the list item.",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "description": "Indicates list item text size.",
+          "type": "variant",
+          "values": ["large", "small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size4}",
+            "itemFontSize": "{palette.fontSize.size20}",
+            "itemIconSize": "{palette.size.size24}",
+            "itemLineHeight": "{palette.lineHeight.ratio8to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size0}",
+            "itemBulletContainerHeight": "{palette.size.size20}",
+            "itemFontSize": "{palette.fontSize.size14}",
+            "itemIconSize": "{palette.size.size20}",
+            "itemLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size0}",
+            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        }
+      ],
+      "tokens": {
+        "bulletIcon": "{palette.icon.BulletFill}",
+        "dividerColor": "{palette.color.greyCloud}",
+        "dividerSize": "{palette.border.border1}",
+        "iconMarginTop": "{palette.size.size0}",
+        "interItemMargin": "{palette.size.size8}",
+        "interItemMarginWithDivider": "{palette.size.size16}",
+        "itemBulletColor": "{palette.color.purpleTelus}",
+        "itemBulletContainerAlign": "{system.textAlign.center}",
+        "itemBulletContainerHeight": "{palette.size.size24}",
+        "itemBulletContainerWidth": "{palette.size.size24}",
+        "itemFontName": "{palette.fontName.HNforTELUSSA}",
+        "itemFontSize": "{palette.fontSize.size16}",
+        "itemFontWeight": "{palette.fontWeight.weight400}",
+        "itemIconColor": "{palette.color.purpleTelus}",
+        "itemIconSize": "{palette.size.size24}",
+        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
+        "itemTextColor": "{palette.color.greyCharcoal}",
+        "listGutter": "{palette.size.size8}"
+      }
+    },
+    "Listbox": {
+      "appearances": {
+        "current": "{appearances.Listbox.current}",
+        "expanded": "{appearances.Listbox.expanded}",
+        "focus": "{appearances.Listbox.focus}",
+        "hover": "{appearances.Listbox.hover}",
+        "isChild": "{appearances.Listbox.isChild}",
+        "pressed": "{appearances.Listbox.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true,
+            "hover": true,
+            "pressed": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.greyMystic}",
+            "groupBorderColor": "{palette.color.transparent}",
+            "groupColor": "{palette.color.greyShuttle}",
+            "itemBackgroundColor": "{palette.color.greyMystic}",
+            "itemColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "focus": false,
+            "hover": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.greyAthens}",
+            "groupColor": "{palette.color.purpleTelus}",
+            "itemBackgroundColor": "{palette.color.greyAthens}",
+            "itemColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBorderColor": "{palette.color.purpleTelus}",
+            "groupBorderWidth": "{palette.border.border1}",
+            "groupColor": "{palette.color.purpleTelus}",
+            "itemBorderBottomColor": "{palette.color.purpleTelus}",
+            "itemBorderLeftColor": "{palette.color.purpleTelus}",
+            "itemBorderRightColor": "{palette.color.purpleTelus}",
+            "itemBorderTopColor": "{palette.color.purpleTelus}",
+            "itemColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "groupIcon": "{palette.icon.CaretUp}"
+          }
+        },
+        {
+          "if": {
+            "current": true
+          },
+          "tokens": {
+            "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}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "pressed": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.greyMystic}",
+            "groupBorderWidth": "{palette.border.none}",
+            "groupColor": "{palette.color.greyShuttle}",
+            "groupFontName": "{palette.fontName.HNforTELUSSA}",
+            "groupFontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderLeftColor": "{palette.color.greyMystic}",
+            "itemBorderLeftWidth": "{palette.border.border4}",
+            "itemBorderTopWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "isChild": true
           },
           "tokens": {
             "itemBorderBottomColor": "{palette.color.purpleTelus}",
@@ -5385,6 +5993,10 @@
       "appearances": {
         "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
         "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -5415,6 +6027,15 @@
           "tokens": {
             "maxWidthSize": "{palette.size.size544}"
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": "{palette.color.purpleDeluge}",
+            "labelColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {