@telus-uds/theme-koodo 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.pink}",
+        "dotSize": "{palette.size.size6}",
+        "indicatorBackgroundColor": "{palette.color.pinkLight}",
         "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border2}"
+        "thickness": "{palette.border.border3}"
       }
     },
     "Autocomplete": {
@@ -1680,6 +1686,14 @@
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "interactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}"
+          }
+        },
         {
           "if": {
             "interactive": true,
@@ -2051,7 +2065,7 @@
             "interactive": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}",
+            "backgroundColor": "{palette.color.dark5}",
             "borderColor": "{system.color.transparent}"
           }
         },
@@ -2071,7 +2085,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark20}",
+            "backgroundColor": "{palette.color.dark10}",
             "borderColor": "{palette.color.silver}",
             "borderWidth": "{palette.border.border2}"
           }
@@ -2087,6 +2101,66 @@
             "borderColor": "{palette.color.black}",
             "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": {
@@ -4747,6 +4821,10 @@
           "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
           "type": "variant",
           "values": ["micro", "small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
@@ -4950,230 +5028,781 @@
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true,
+            "focus": true,
             "quiet": true
           },
           "tokens": {
-            "color": "{palette.color.mortar}",
-            "textLine": "{system.textLine.underline}"
+            "color": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "inverse": true,
+            "pressed": true,
             "quiet": true
           },
           "tokens": {
-            "color": "{palette.color.gallery}",
+            "color": "{palette.color.mortar}",
             "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "alignSelf": "{system.flexAlign.flexStart}",
-        "blockFontName": "{palette.fontName.StagSans}",
-        "blockFontSize": "{palette.fontSize.size16}",
-        "blockFontWeight": "{palette.fontWeight.weight600}",
-        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
-        "borderRadius": "{palette.radius.radius4}",
-        "color": "{palette.color.black}",
-        "icon": "{system.icon.none}",
-        "iconSize": "{palette.size.size16}",
-        "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": "Reduces line height on some body text styles. For data-rich content, not for flow content",
-          "type": "variant",
-          "values": [true]
         },
-        "size": {
-          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
-          "type": "variant",
-          "values": ["large", "small"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "size": "large"
+            "focus": true,
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size4}",
-            "itemFontSize": "{palette.fontSize.size20}",
-            "itemIconSize": "{palette.size.size20}",
-            "itemLineHeight": "{palette.lineHeight.multiply140}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "alternative": true,
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size0}",
-            "itemFontSize": "{palette.fontSize.size14}",
-            "itemIconSize": "{palette.size.size20}",
-            "itemLineHeight": "{palette.lineHeight.ratio10to7}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "compact": true
+            "hover": true,
+            "inverse": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size1}",
-            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "small"
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+            "color": "{palette.color.black}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "large"
+            "focus": true,
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.multiply130}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
-        }
-      ],
-      "tokens": {
-        "bulletIcon": "{palette.icon.Bullet}",
-        "dividerColor": "{palette.color.silver}",
-        "dividerSize": "{palette.border.border1}",
-        "iconMarginTop": "{palette.size.size2}",
-        "interItemMargin": "{palette.size.size8}",
-        "interItemMarginWithDivider": "{palette.size.size16}",
-        "itemBulletColor": "{palette.color.black}",
-        "itemBulletContainerAlign": "{system.textAlign.center}",
-        "itemBulletContainerHeight": "{palette.size.size20}",
-        "itemBulletContainerWidth": "{palette.size.size24}",
-        "itemFontName": "{palette.fontName.StagSans}",
-        "itemFontSize": "{palette.fontSize.size16}",
-        "itemFontWeight": "{palette.fontWeight.weight400}",
-        "itemIconColor": "{palette.color.black}",
-        "itemIconSize": "{palette.size.size20}",
-        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
-        "itemTextColor": "{palette.color.black}",
-        "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": false,
             "hover": true,
-            "pressed": false
+            "style": "inline"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.gallery}",
-            "groupBorderColor": "{palette.color.transparent}",
-            "itemBackgroundColor": "{palette.color.gallery}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": false
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "groupBorderColor": "{palette.color.purple}",
-            "groupColor": "{palette.color.purple}",
-            "itemBorderBottomColor": "{palette.color.purple}",
-            "itemBorderLeftColor": "{palette.color.purple}",
-            "itemBorderRightColor": "{palette.color.purple}",
-            "itemBorderTopColor": "{palette.color.purple}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "current": true
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.black}",
-            "groupBorderColor": "{palette.color.black}",
-            "groupColor": "{palette.color.white}",
-            "itemBackgroundColor": "{palette.color.black}",
-            "itemColor": "{palette.color.white}"
+            "outerBorderColor": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "current": true,
-            "pressed": true
+            "style": "subtle"
           },
           "tokens": {
-            "itemBackgroundColor": "{palette.color.silverDark}",
-            "itemColor": "{palette.color.mortar}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
           "if": {
-            "isChild": true
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
-            "itemBorderLeftColor": "{palette.color.black}",
-            "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "isChild": true,
-            "pressed": true
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
-            "itemBorderLeftColor": "{palette.color.mortar}",
-            "itemBorderTopWidth": "{palette.border.none}",
-            "itemColor": "{palette.color.mortar}"
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "expanded": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.transparent}",
-            "groupBorderColor": "{palette.color.transparent}",
-            "groupColor": "{palette.color.white}",
-            "groupIcon": "{palette.icon.ChevronUp}",
-            "itemColor": "{palette.color.mortar}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "current": true,
-            "isChild": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "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.gallery}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.black}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purple}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purple}",
+            "outerBorderColor": "{palette.color.purple}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleDark}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "outerBorderColor": "{palette.color.danger}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "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.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.gallery}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "blockFontName": "{palette.fontName.StagSans}",
+        "blockFontSize": "{palette.fontSize.size16}",
+        "blockFontWeight": "{palette.fontWeight.weight600}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.black}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.size.size16}",
+        "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": "Reduces line height on some body text styles. For data-rich content, not for flow content",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+          "type": "variant",
+          "values": ["large", "small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size4}",
+            "itemFontSize": "{palette.fontSize.size20}",
+            "itemIconSize": "{palette.size.size20}",
+            "itemLineHeight": "{palette.lineHeight.multiply140}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size0}",
+            "itemFontSize": "{palette.fontSize.size14}",
+            "itemIconSize": "{palette.size.size20}",
+            "itemLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size1}",
+            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.multiply130}"
+          }
+        }
+      ],
+      "tokens": {
+        "bulletIcon": "{palette.icon.Bullet}",
+        "dividerColor": "{palette.color.silver}",
+        "dividerSize": "{palette.border.border1}",
+        "iconMarginTop": "{palette.size.size2}",
+        "interItemMargin": "{palette.size.size8}",
+        "interItemMarginWithDivider": "{palette.size.size16}",
+        "itemBulletColor": "{palette.color.black}",
+        "itemBulletContainerAlign": "{system.textAlign.center}",
+        "itemBulletContainerHeight": "{palette.size.size20}",
+        "itemBulletContainerWidth": "{palette.size.size24}",
+        "itemFontName": "{palette.fontName.StagSans}",
+        "itemFontSize": "{palette.fontSize.size16}",
+        "itemFontWeight": "{palette.fontWeight.weight400}",
+        "itemIconColor": "{palette.color.black}",
+        "itemIconSize": "{palette.size.size20}",
+        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
+        "itemTextColor": "{palette.color.black}",
+        "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": false,
+            "hover": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.gallery}",
+            "groupBorderColor": "{palette.color.transparent}",
+            "itemBackgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBorderColor": "{palette.color.purple}",
+            "groupColor": "{palette.color.purple}",
+            "itemBorderBottomColor": "{palette.color.purple}",
+            "itemBorderLeftColor": "{palette.color.purple}",
+            "itemBorderRightColor": "{palette.color.purple}",
+            "itemBorderTopColor": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "current": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.black}",
+            "groupBorderColor": "{palette.color.black}",
+            "groupColor": "{palette.color.white}",
+            "itemBackgroundColor": "{palette.color.black}",
+            "itemColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "pressed": true
+          },
+          "tokens": {
+            "itemBackgroundColor": "{palette.color.silverDark}",
+            "itemColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderLeftColor": "{palette.color.black}",
+            "itemBorderLeftWidth": "{palette.border.border4}",
+            "itemBorderTopWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "isChild": true,
+            "pressed": true
+          },
+          "tokens": {
+            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderLeftColor": "{palette.color.mortar}",
+            "itemBorderTopWidth": "{palette.border.none}",
+            "itemColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.transparent}",
+            "groupBorderColor": "{palette.color.transparent}",
+            "groupColor": "{palette.color.white}",
+            "groupIcon": "{palette.icon.ChevronUp}",
+            "itemColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "isChild": true
           },
           "tokens": {
             "itemBackgroundColor": "{palette.color.black}",
@@ -5490,6 +6119,10 @@
       "appearances": {
         "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
         "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -5520,6 +6153,15 @@
           "tokens": {
             "maxWidthSize": "{palette.size.size544}"
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": "{palette.color.black}",
+            "labelColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -5548,7 +6190,7 @@
         "labelPaddingLeft": "{palette.size.size24}",
         "labelPaddingRight": "{palette.size.size16}",
         "labelPaddingTop": "{palette.size.size8}",
-        "maxHeightSize": "{system.size.zero}",
+        "maxHeightSize": "{palette.size.size480}",
         "maxWidthSize": "{system.size.zero}",
         "minHeight": "{system.size.zero}",
         "minWidth": "{palette.size.size320}",
@@ -5724,8 +6366,8 @@
             "viewport": ["xl"]
           },
           "tokens": {
-            "containerPaddingLeft": "{palette.size.size16}",
-            "containerPaddingRight": "{palette.size.size16}"
+            "containerPaddingLeft": "{palette.size.size0}",
+            "containerPaddingRight": "{palette.size.size0}"
           }
         },
         {
@@ -7107,10 +7749,10 @@
         "containerBackgroundColor": "{palette.color.transparent}",
         "containerBorderRadius": "{palette.radius.none}",
         "containerOpacity": "{system.opacity.opaque}",
-        "containerPaddingBottom": "{palette.size.size6}",
-        "containerPaddingLeft": "{palette.size.size8}",
+        "containerPaddingBottom": "{palette.size.size0}",
+        "containerPaddingLeft": "{palette.size.size0}",
         "containerPaddingRight": "{palette.size.size0}",
-        "containerPaddingTop": "{palette.size.size6}",
+        "containerPaddingTop": "{palette.size.size0}",
         "containerShadow": "{system.shadow.none}",
         "descriptionFontName": "{palette.fontName.StagSans}",
         "descriptionFontSize": "{palette.fontSize.size14}",