@telus-uds/theme-public-mobile 4.3.0 → 4.4.0

package/theme.json

@@ -87,6 +87,10 @@
     },
     "ActivityIndicator": {
       "appearances": {
+        "dots": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
@@ -106,8 +110,10 @@
       ],
       "tokens": {
         "color": "{palette.color.slate100}",
+        "dotSize": "{palette.size.size6}",
+        "indicatorBackgroundColor": "{palette.color.slate25}",
         "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border2}"
+        "thickness": "{palette.border.border3}"
       }
     },
     "Autocomplete": {
@@ -1595,6 +1601,14 @@
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "interactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}"
+          }
+        },
         {
           "if": {
             "interactive": true,
@@ -2003,6 +2017,66 @@
             "borderColor": "{palette.color.slate100}",
             "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": {
@@ -4665,6 +4739,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": [
@@ -4916,239 +4994,800 @@
           },
           "tokens": {
             "color": "{palette.color.slate100}",
-            "textLine": "{system.textLine.underline}"
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true,
+            "focus": true,
             "quiet": true
           },
           "tokens": {
-            "color": "{palette.color.slate120}",
-            "textLine": "{system.textLine.underline}"
+            "color": "{palette.color.link100}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "inverse": true,
+            "pressed": true,
             "quiet": true
           },
           "tokens": {
-            "color": "{palette.color.apricot50}",
+            "color": "{palette.color.slate120}",
             "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "alignSelf": "{system.flexAlign.flexStart}",
-        "blockFontName": "{palette.fontName.SofiaPro}",
-        "blockFontSize": "{palette.fontSize.size18}",
-        "blockFontWeight": "{palette.fontWeight.weight400}",
-        "blockLineHeight": "{palette.lineHeight.ratio14to9}",
-        "borderRadius": "{palette.radius.radius4}",
-        "color": "{palette.color.link100}",
-        "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"
+            "focus": true,
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size4}",
-            "itemFontSize": "{palette.fontSize.size20}",
-            "itemIconSize": "{palette.size.size20}",
-            "itemLineHeight": "{palette.lineHeight.ratio7to5}"
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "alternative": true,
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size2}",
-            "itemFontSize": "{palette.fontSize.size16}",
-            "itemLineHeight": "{palette.lineHeight.ratio14to9}"
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "compact": true
+            "hover": true,
+            "inverse": true,
+            "quiet": true
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size2}",
-            "itemLineHeight": "{palette.lineHeight.ratio14to9}"
+            "color": "{palette.color.apricot50}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "small"
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.ratio3to2}"
+            "color": "{palette.color.slate100}"
           }
         },
         {
           "if": {
-            "compact": true,
-            "size": "large"
+            "focus": true,
+            "style": "inline"
           },
           "tokens": {
-            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+            "color": "{palette.color.slate100}",
+            "outerBorderColor": "{palette.color.slate100}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
-        }
-      ],
-      "tokens": {
-        "bulletIcon": "{palette.icon.BulletFill}",
-        "dividerColor": "{palette.color.slate50}",
-        "dividerSize": "{palette.border.border1}",
-        "iconMarginTop": "{palette.size.size4}",
-        "interItemMargin": "{palette.size.size8}",
-        "interItemMarginWithDivider": "{palette.size.size16}",
-        "itemBulletColor": "{palette.color.slate100}",
-        "itemBulletContainerAlign": "{system.textAlign.center}",
-        "itemBulletContainerHeight": "{palette.size.size20}",
-        "itemBulletContainerWidth": "{palette.size.size24}",
-        "itemFontName": "{palette.fontName.SofiaPro}",
-        "itemFontSize": "{palette.fontSize.size18}",
-        "itemFontWeight": "{palette.fontWeight.weight400}",
-        "itemIconColor": "{palette.color.slate100}",
-        "itemIconSize": "{palette.size.size20}",
-        "itemLineHeight": "{palette.lineHeight.ratio14to9}",
-        "itemTextColor": "{palette.color.slate100}",
-        "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": "inline"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.link100}",
-            "groupBorderColor": "{palette.color.transparent}",
-            "groupColor": "{palette.color.sand100}",
-            "itemBackgroundColor": "{palette.color.link100}",
-            "itemColor": "{palette.color.sand100}"
+            "color": "{palette.color.slate100}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": false,
-            "hover": true,
-            "pressed": false
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.apricot25}",
-            "groupColor": "{palette.color.slate100}",
-            "itemBackgroundColor": "{palette.color.apricot25}",
-            "itemColor": "{palette.color.slate100}"
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "hover": true,
-            "isChild": true,
-            "pressed": true
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "itemBackgroundColor": "{palette.color.link100}",
-            "itemBorderLeftColor": "{palette.color.link100}",
-            "itemColor": "{palette.color.sand100}"
+            "outerBorderColor": "{palette.color.slate120}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": false
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.transparent}",
-            "groupBorderColor": "{palette.color.slate100}",
-            "groupBorderWidth": "{palette.border.border1}",
-            "groupColor": "{palette.color.slate100}",
-            "itemBorderBottomColor": "{palette.color.slate100}",
-            "itemBorderLeftColor": "{palette.color.slate100}",
-            "itemBorderRightColor": "{palette.color.slate100}",
-            "itemBorderTopColor": "{palette.color.slate100}",
-            "itemColor": "{palette.color.slate100}"
+            "color": "{palette.color.slate75}"
           }
         },
         {
           "if": {
-            "current": true,
-            "isChild": false
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.apricot100}",
-            "groupColor": "{palette.color.slate100}",
-            "itemBackgroundColor": "{palette.color.apricot100}",
-            "itemColor": "{palette.color.slate100}"
+            "color": "{palette.color.slate100}",
+            "outerBorderColor": "{palette.color.slate100}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "current": true,
-            "focus": false,
-            "isChild": true
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "itemBackgroundColor": "{palette.color.transparent}",
-            "itemBorderBottomWidth": "{palette.border.none}",
-            "itemBorderLeftColor": "{palette.color.apricot100}",
-            "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "color": "{palette.color.slate75}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "current": true,
-            "pressed": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "groupBackgroundColor": "{palette.color.link100}",
-            "groupColor": "{palette.color.sand100}",
-            "itemBackgroundColor": "{palette.color.link100}",
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.slate120}"
+          }
+        },
+        {
+          "if": {
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}",
+            "outerBorderColor": "{palette.color.link100}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.slate120}"
+          }
+        },
+        {
+          "if": {
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}",
+            "outerBorderColor": "{palette.color.danger100}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger50}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.danger50}"
+          }
+        },
+        {
+          "if": {
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.sand100}",
+            "outerBorderColor": "{palette.color.sand100}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.apricot100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.apricot100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.apricot100}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.slate100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.slate100}",
+            "outerBorderColor": "{palette.color.slate100}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.slate100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.slate75}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.slate100}",
+            "outerBorderColor": "{palette.color.slate100}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.slate75}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}",
+            "outerBorderColor": "{palette.color.link100}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.link100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.slate120}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}",
+            "outerBorderColor": "{palette.color.danger100}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.danger50}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.danger50}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.sand100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.sand100}",
+            "outerBorderColor": "{palette.color.sand100}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.apricot100}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.apricot100}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.apricot100}",
+            "textLine": "{system.textLine.underline}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "blockFontName": "{palette.fontName.SofiaPro}",
+        "blockFontSize": "{palette.fontSize.size18}",
+        "blockFontWeight": "{palette.fontWeight.weight400}",
+        "blockLineHeight": "{palette.lineHeight.ratio14to9}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.link100}",
+        "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.size20}",
+            "itemLineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size2}",
+            "itemFontSize": "{palette.fontSize.size16}",
+            "itemLineHeight": "{palette.lineHeight.ratio14to9}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "iconMarginTop": "{palette.size.size2}",
+            "itemLineHeight": "{palette.lineHeight.ratio14to9}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        }
+      ],
+      "tokens": {
+        "bulletIcon": "{palette.icon.BulletFill}",
+        "dividerColor": "{palette.color.slate50}",
+        "dividerSize": "{palette.border.border1}",
+        "iconMarginTop": "{palette.size.size4}",
+        "interItemMargin": "{palette.size.size8}",
+        "interItemMarginWithDivider": "{palette.size.size16}",
+        "itemBulletColor": "{palette.color.slate100}",
+        "itemBulletContainerAlign": "{system.textAlign.center}",
+        "itemBulletContainerHeight": "{palette.size.size20}",
+        "itemBulletContainerWidth": "{palette.size.size24}",
+        "itemFontName": "{palette.fontName.SofiaPro}",
+        "itemFontSize": "{palette.fontSize.size18}",
+        "itemFontWeight": "{palette.fontWeight.weight400}",
+        "itemIconColor": "{palette.color.slate100}",
+        "itemIconSize": "{palette.size.size20}",
+        "itemLineHeight": "{palette.lineHeight.ratio14to9}",
+        "itemTextColor": "{palette.color.slate100}",
+        "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.link100}",
+            "groupBorderColor": "{palette.color.transparent}",
+            "groupColor": "{palette.color.sand100}",
+            "itemBackgroundColor": "{palette.color.link100}",
+            "itemColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "focus": false,
+            "hover": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.apricot25}",
+            "groupColor": "{palette.color.slate100}",
+            "itemBackgroundColor": "{palette.color.apricot25}",
+            "itemColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": true,
+            "isChild": true,
+            "pressed": true
+          },
+          "tokens": {
+            "itemBackgroundColor": "{palette.color.link100}",
+            "itemBorderLeftColor": "{palette.color.link100}",
+            "itemColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": false
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.transparent}",
+            "groupBorderColor": "{palette.color.slate100}",
+            "groupBorderWidth": "{palette.border.border1}",
+            "groupColor": "{palette.color.slate100}",
+            "itemBorderBottomColor": "{palette.color.slate100}",
+            "itemBorderLeftColor": "{palette.color.slate100}",
+            "itemBorderRightColor": "{palette.color.slate100}",
+            "itemBorderTopColor": "{palette.color.slate100}",
+            "itemColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "isChild": false
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.apricot100}",
+            "groupColor": "{palette.color.slate100}",
+            "itemBackgroundColor": "{palette.color.apricot100}",
+            "itemColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "focus": false,
+            "isChild": true
+          },
+          "tokens": {
+            "itemBackgroundColor": "{palette.color.transparent}",
+            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderLeftColor": "{palette.color.apricot100}",
+            "itemBorderLeftWidth": "{palette.border.border4}",
+            "itemBorderTopWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "pressed": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.link100}",
+            "groupColor": "{palette.color.sand100}",
+            "itemBackgroundColor": "{palette.color.link100}",
             "itemBorderLeftWidth": "{palette.border.border4}",
             "itemColor": "{palette.color.sand100}"
           }
@@ -5397,6 +6036,10 @@
       "appearances": {
         "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
         "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -5427,6 +6070,15 @@
           "tokens": {
             "maxWidthSize": "{palette.size.size544}"
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": "{palette.color.slate100}",
+            "labelColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {