@telus-uds/theme-koodo 7.14.0 → 7.16.0

package/theme.json

@@ -1165,7 +1165,15 @@
         "inactive": "{appearances.ButtonDropdown.inactive}",
         "open": "{appearances.ButtonDropdown.open}",
         "pressed": "{appearances.ButtonDropdown.pressed}",
-        "selected": "{appearances.ButtonDropdown.selected}"
+        "selected": "{appearances.ButtonDropdown.selected}",
+        "size": {
+          "type": "variant",
+          "values": ["default", "small"]
+        },
+        "width": {
+          "type": "variant",
+          "values": ["full"]
+        }
       },
       "rules": [
         {
@@ -1192,7 +1200,8 @@
             "backgroundColor": "{palette.color.blackLight}",
             "borderColor": "{palette.color.blackLight}",
             "color": "{palette.color.dove}",
-            "iconColor": "{palette.color.dove}"
+            "iconColor": "{palette.color.dove}",
+            "leadIconColor": "{palette.color.dove}"
           }
         },
         {
@@ -1225,7 +1234,8 @@
             "backgroundColor": "{palette.color.silver}",
             "borderColor": "{palette.color.silver}",
             "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}"
           }
         },
         {
@@ -1236,6 +1246,7 @@
             "backgroundColor": "{palette.color.black}",
             "color": "{palette.color.white}",
             "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}",
             "outerBorderColor": "{system.color.transparent}"
           }
         },
@@ -1271,7 +1282,8 @@
             "backgroundColor": "{palette.color.blackLight}",
             "borderColor": "{palette.color.transparent}",
             "color": "{palette.color.dove}",
-            "iconColor": "{palette.color.dove}"
+            "iconColor": "{palette.color.dove}",
+            "leadIconColor": "{palette.color.dove}"
           }
         },
         {
@@ -1284,6 +1296,25 @@
             "backgroundColor": "{palette.color.blackLight}",
             "outerBorderColor": "{palette.color.blackLight}"
           }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size4}",
+            "paddingTop": "{palette.size.size4}"
+          }
         }
       ],
       "tokens": {
@@ -1293,6 +1324,10 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
+        "descriptionFontName": "{palette.fontName.StagSans}",
+        "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionFontWeight": "{palette.fontWeight.weight400}",
+        "descriptionTextPaddingBottom": "{palette.size.size0}",
         "dividerColor": "{palette.color.silver}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
@@ -1302,12 +1337,22 @@
         "iconBackground": "{palette.color.transparent}",
         "iconBorderRadius": "{palette.radius.pill32}",
         "iconColor": "{palette.color.black}",
-        "iconPadding": "{palette.size.size4}",
+        "iconPadding": "{palette.size.size0}",
         "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size20}",
-        "iconSpace": "{system.integer.0}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
+        "leadIcon": "{system.icon.none}",
+        "leadIconBackgroundColor": "{system.color.transparent}",
+        "leadIconBorderRadius": "{palette.radius.none}",
+        "leadIconColor": "{palette.color.black}",
+        "leadIconContainerPaddingBottom": "{palette.size.size0}",
+        "leadIconContainerPaddingLeft": "{palette.size.size0}",
+        "leadIconContainerPaddingRight": "{palette.size.size0}",
+        "leadIconContainerPaddingTop": "{palette.size.size0}",
+        "leadIconPadding": "{palette.size.size0}",
+        "leadIconSize": "{palette.size.size24}",
         "lineHeight": "{palette.lineHeight.multiply150}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
@@ -1315,13 +1360,15 @@
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.border1}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size24}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "subtitleColor": "{palette.color.black}",
         "textAlign": "{system.flexJustifyContent.center}",
+        "textPaddingLeft": "{palette.size.size8}",
+        "textPaddingRight": "{palette.size.size8}",
         "width": "{system.size.none}"
       }
     },
@@ -4284,6 +4331,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
+            "iconSize": "{palette.size.size24}",
             "lineHeight": "{palette.lineHeight.ratio7to5}"
           }
         },
@@ -4810,6 +4858,10 @@
           "description": "Uses icon colour to communicate meaning to the user",
           "type": "variant",
           "values": ["success", "error"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -4858,6 +4910,17 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "background": true,
@@ -4918,6 +4981,266 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -5358,6 +5681,7 @@
             "raised": true
           },
           "tokens": {
+            "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.black}",
             "shadow": "{palette.shadow.surfaceRaised}"
           }
@@ -5367,7 +5691,10 @@
             "hover": true,
             "raised": true
           },
-          "tokens": {}
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "iconColor": "{palette.color.white}"
+          }
         },
         {
           "if": {
@@ -5403,7 +5730,8 @@
             "raised": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
+            "backgroundColor": "{palette.color.blackLight}",
+            "borderColor": "{palette.color.blackLight}",
             "iconColor": "{palette.color.dove}"
           }
         },
@@ -5532,6 +5860,18 @@
             "iconSpace": "{system.integer.1}"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "focus": true
@@ -5566,7 +5906,7 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.dove}",
+            "color": "{palette.color.mortar}",
             "textLine": "{system.textLine.none}"
           }
         },
@@ -5578,6 +5918,16 @@
             "color": "{palette.color.mortar}"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
         {
           "if": {
             "alternative": true,
@@ -5603,7 +5953,7 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blackLight}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
@@ -5613,8 +5963,18 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blackLight}",
-            "outerBorderColor": "{palette.color.blackLight}"
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
           }
         },
         {
@@ -5748,11 +6108,21 @@
         {
           "if": {
             "alternative": true,
-            "hover": true,
             "quiet": true
           },
           "tokens": {
             "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
             "textLine": "{system.textLine.underline}"
           }
         },
@@ -5767,6 +6137,28 @@
             "textLine": "{system.textLine.underline}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "style": "inline"
@@ -5830,8 +6222,8 @@
             "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.black}",
-            "outerBorderColor": "{palette.color.black}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
             "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
@@ -6298,13 +6690,13 @@
         "color": "{palette.color.black}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.0}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderOutline": "{system.borderStyle.none}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderWidth": "{palette.border.border1}",
         "textLine": "{system.textLine.underline}",
         "textLineStyle": "{system.textLineStyle.solid}"
       }
@@ -6457,10 +6849,10 @@
             "isChild": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.black}",
             "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "itemBorderTopWidth": "{palette.border.border1}"
           }
         },
         {
@@ -6469,9 +6861,9 @@
             "pressed": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.mortar}",
-            "itemBorderTopWidth": "{palette.border.none}",
+            "itemBorderTopWidth": "{palette.border.border1}",
             "itemColor": "{palette.color.mortar}"
           }
         },
@@ -6545,10 +6937,10 @@
           },
           "tokens": {
             "itemBackgroundColor": "{palette.color.gallery}",
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.dove}",
-            "itemBorderRightWidth": "{palette.border.none}",
-            "itemBorderTopWidth": "{palette.border.none}",
+            "itemBorderRightWidth": "{palette.border.border1}",
+            "itemBorderTopWidth": "{palette.border.border1}",
             "itemColor": "{palette.color.dove}"
           }
         },
@@ -6974,7 +7366,7 @@
         },
         {
           "if": {
-            "viewport": ["xl"]
+            "viewport": ["lg", "xl"]
           },
           "tokens": {
             "borderRadius": "{palette.radius.pill32}"
@@ -8281,6 +8673,15 @@
             "outerBorderColor": "{palette.color.mortar}",
             "textLine": "{system.textLine.underline}"
           }
+        },
+        {
+          "if": {
+            "hover": true,
+            "viewport": "xl"
+          },
+          "tokens": {
+            "imageDimension": "{palette.size.size184}"
+          }
         }
       ],
       "tokens": {
@@ -8387,7 +8788,7 @@
           },
           "tokens": {
             "outerBorderColor": "{palette.color.black}",
-            "outerBorderGap": "{palette.size.size5}",
+            "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border1}"
           }
         },
@@ -8430,7 +8831,7 @@
       ],
       "tokens": {
         "checkedBackgroundColor": "{palette.color.purple}",
-        "checkedSize": "{palette.size.size16}",
+        "checkedSize": "{palette.size.size12}",
         "containerBackgroundColor": "{palette.color.transparent}",
         "containerBorderRadius": "{palette.radius.none}",
         "containerOpacity": "{system.opacity.opaque}",
@@ -8451,7 +8852,7 @@
         "inputBorderColor": "{palette.color.black}",
         "inputBorderWidth": "{palette.border.border1}",
         "inputOutlineColor": "{palette.color.black}",
-        "inputOutlineWidth": "{palette.border.border2}",
+        "inputOutlineWidth": "{palette.border.border1}",
         "inputSize": "{palette.size.size20}",
         "labelColor": "{palette.color.black}",
         "labelFontName": "{palette.fontName.StagSans}",
@@ -8460,7 +8861,7 @@
         "labelLineHeight": "{palette.lineHeight.multiply150}",
         "labelMarginLeft": "{palette.size.size8}",
         "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{palette.size.size5}",
+        "outerBorderGap": "{palette.size.size1}",
         "outerBorderWidth": "{palette.border.border1}"
       }
     },
@@ -9990,6 +10391,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -10002,7 +10408,8 @@
           "values": [true]
         },
         "pressed": "{appearances.TabsItem.pressed}",
-        "selected": "{appearances.TabsItem.pressed}"
+        "selected": "{appearances.TabsItem.pressed}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -10164,6 +10571,128 @@
           "tokens": {
             "maxWidth": "{system.size.none}"
           }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.pill32}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light40}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -10172,6 +10701,8 @@
         "borderRadius": "{system.radius.zero}",
         "borderWidth": "{system.border.zero}",
         "color": "{palette.color.black}",
+        "dropdownIcon": "{palette.icon.ChevronDown}",
+        "dropdownIconExpanded": "{palette.icon.ChevronUp}",
         "fontName": "{palette.fontName.StagSans}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size16}",