@telus-uds/theme-koodo 3.30.0 → 4.0.0

package/theme.json

@@ -165,7 +165,8 @@
             "background": "lightest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
           }
         },
         {
@@ -173,7 +174,8 @@
             "background": "lighter"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyLight}"
+            "backgroundColor": "{palette.color.greyLight}",
+            "borderColor": "{palette.color.greyLight}"
           }
         },
         {
@@ -181,7 +183,8 @@
             "background": "light"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}"
+            "backgroundColor": "{palette.color.gallery}",
+            "borderColor": "{palette.color.gallery}"
           }
         },
         {
@@ -189,7 +192,8 @@
             "background": "dark"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}"
+            "backgroundColor": "{palette.color.dove}",
+            "borderColor": "{palette.color.dove}"
           }
         },
         {
@@ -197,7 +201,8 @@
             "background": "darker"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mortar}"
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.mortar}"
           }
         },
         {
@@ -205,7 +210,8 @@
             "background": "darkest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}"
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}"
           }
         },
         {
@@ -213,7 +219,8 @@
             "background": "critical"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.wellRead}"
+            "backgroundColor": "{palette.color.wellRead}",
+            "borderColor": "{palette.color.wellRead}"
           }
         },
         {
@@ -221,7 +228,8 @@
             "background": "danger"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.piggyPink}"
+            "backgroundColor": "{palette.color.piggyPink}",
+            "borderColor": "{palette.color.piggyPink}"
           }
         },
         {
@@ -229,7 +237,8 @@
             "background": "warning"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.beeswax}"
+            "backgroundColor": "{palette.color.beeswax}",
+            "borderColor": "{palette.color.beeswax}"
           }
         },
         {
@@ -237,7 +246,8 @@
             "background": "positive"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.icicle}"
+            "backgroundColor": "{palette.color.icicle}",
+            "borderColor": "{palette.color.icicle}"
           }
         },
         {
@@ -245,7 +255,8 @@
             "background": "brand"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}"
           }
         },
         {
@@ -253,7 +264,8 @@
             "background": "white"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
           }
         },
         {
@@ -261,7 +273,8 @@
             "background": "black"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}"
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}"
           }
         },
         {
@@ -269,7 +282,8 @@
             "background": "featurePrimary"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.flirt}"
+            "backgroundColor": "{palette.color.flirt}",
+            "borderColor": "{palette.color.flirt}"
           }
         },
         {
@@ -277,7 +291,8 @@
             "background": "featureSecondary"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.chathamsBlue}"
+            "backgroundColor": "{palette.color.chathamsBlue}",
+            "borderColor": "{palette.color.chathamsBlue}"
           }
         },
         {
@@ -285,7 +300,8 @@
             "background": "featureNeutral"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mortar}"
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.mortar}"
           }
         },
         {
@@ -293,12 +309,19 @@
             "background": "featureBrand"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{palette.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderColor": "{palette.color.transparent}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderWidth": "{palette.border.none}",
         "gradient": "{system.gradient.none}"
       }
     },
@@ -940,8 +963,8 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderColor": "{palette.color.mosque}",
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosqueDark}",
             "color": "{palette.color.white}"
           }
         },
@@ -959,81 +982,108 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.mosqueDark}",
-            "iconColor": "{palette.color.mosqueDark}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "selected": true
+            "inactive": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
-            "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
+            "backgroundColor": "{palette.color.dove}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": true
+            "selected": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{system.color.transparent}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "hover": true,
+            "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
-            "borderWidth": "{system.border.zero}",
-            "color": "{palette.color.white}",
-            "iconColor": "{palette.color.dove}"
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "outerBorderColor": "{palette.color.transparent}"
           }
         },
         {
           "if": {
+            "focus": true,
             "selected": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
+            "backgroundColor": "{palette.color.mosque}",
             "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "pressed": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.transparent}"
           }
         },
         {
           "if": {
             "focus": true,
+            "pressed": true,
             "selected": true
           },
           "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
             "outerBorderColor": "{palette.color.mosqueDark}"
           }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "color": "{palette.color.silver}",
+            "iconColor": "{palette.color.silver}"
+          }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.mosqueDark}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "dividerColor": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{palette.icon.ChevronDown}",
         "iconAlignSelf": "{system.flexAlign.center}",
-        "iconBackground": "{palette.color.white}",
+        "iconBackground": "{palette.color.transparent}",
         "iconBorderRadius": "{palette.radius.pill32}",
         "iconColor": "{palette.color.mosque}",
         "iconPadding": "{palette.size.size4}",
         "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size20}",
-        "iconSpace": "{system.integer.3}",
+        "iconSpace": "{system.integer.0}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
         "lineHeight": "{palette.lineHeight.multiply150}",
@@ -1042,7 +1092,7 @@
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderWidth": "{palette.border.border1}",
         "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size16}",
@@ -1286,9 +1336,9 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{system.color.none}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius8}",
+        "borderWidth": "{palette.border.border1}",
         "contentAlignItems": "{system.flexAlign.stretch}",
         "contentFlexGrow": "{system.integer.0}",
         "contentFlexShrink": "{system.integer.1}",
@@ -1666,8 +1716,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "iconSize": "{palette.size.size24}",
-            "textLineHeight": "{palette.lineHeight.ratio11to5}"
+            "iconSize": "{palette.size.size24}"
           }
         },
         {
@@ -1676,8 +1725,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "iconSize": "{palette.size.size16}",
-            "textLineHeight": "{palette.lineHeight.ratio15to7}"
+            "iconSize": "{palette.size.size16}"
           }
         },
         {
@@ -1686,8 +1734,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size12}",
-            "iconSize": "{palette.size.size16}",
-            "textLineHeight": "{palette.lineHeight.ratio7to3}"
+            "iconSize": "{palette.size.size16}"
           }
         }
       ],
@@ -1700,8 +1747,7 @@
         "leftIcon": "{palette.icon.ChevronLeft}",
         "outerBorderColor": "{palette.color.transparent}",
         "rightIcon": "{palette.icon.ChevronRight}",
-        "textLine": "{system.textLine.none}",
-        "textLineHeight": "{palette.lineHeight.ratio17to8}"
+        "textLine": "{system.textLine.none}"
       }
     },
     "Countdown": {
@@ -2009,8 +2055,52 @@
         }
       ],
       "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{system.border.zero}",
         "icon": "{palette.icon.ChevronDown}",
-        "size": "{palette.size.size4}"
+        "iconColor": "{palette.color.black}",
+        "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
+        "iconPosition": "{system.position.left}",
+        "iconSize": "{palette.size.size16}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "size": "{palette.size.size4}",
+        "verticalAlign": "{system.verticalAlign.middle}"
+      }
+    },
+    "ExpandCollapseMiniPanel": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {}
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.none}",
+        "collapseDuration": "{palette.duration.duration250}",
+        "contentPaddingBottom": "{palette.size.size16}",
+        "contentPaddingLeft": "{palette.size.size0}",
+        "contentPaddingRight": "{palette.size.size0}",
+        "contentPaddingTop": "{palette.size.size0}",
+        "expandDividerColor": "{palette.color.transparent}",
+        "expandDividerWidth": "{palette.size.size0}",
+        "expandDuration": "{palette.duration.duration300}",
+        "marginBottom": "{palette.size.size0}"
       }
     },
     "ExpandCollapsePanel": {
@@ -2037,9 +2127,9 @@
         "contentPaddingLeft": "{palette.size.size16}",
         "contentPaddingRight": "{palette.size.size16}",
         "contentPaddingTop": "{palette.size.size16}",
-        "expandDividerColor": "{palette.color.transparent}",
+        "expandDividerColor": "{system.color.none}",
+        "expandDividerWidth": "{system.size.none}",
         "expandDuration": "{palette.duration.duration300}",
-        "expanddDividerWidth": "{palette.size.size0}",
         "marginBottom": "{palette.size.size8}"
       }
     },
@@ -2835,7 +2925,7 @@
         "hintFontSize": "{palette.fontSize.size14}",
         "hintFontWeight": "{palette.fontWeight.weight400}",
         "hintLineHeight": "{palette.lineHeight.ratio10to7}",
-        "lineHeight": "{palette.lineHeight.multiply150}"
+        "lineHeight": "{palette.lineHeight.ratio3to2}"
       }
     },
     "InputSupports": {
@@ -3014,7 +3104,7 @@
             "blockFontName": "{palette.fontName.StagSans}",
             "blockFontSize": "{palette.fontSize.size12}",
             "blockFontWeight": "{palette.fontWeight.weight600}",
-            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
+            "blockLineHeight": "{palette.lineHeight.multiply160}",
             "iconSize": "{palette.size.size16}"
           }
         },
@@ -3044,7 +3134,7 @@
         "blockFontName": "{palette.fontName.StagSans}",
         "blockFontSize": "{palette.fontSize.size16}",
         "blockFontWeight": "{palette.fontWeight.weight600}",
-        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "blockLineHeight": "{palette.lineHeight.multiply130}",
         "borderRadius": "{palette.radius.radius4}",
         "color": "{palette.color.mosque}",
         "icon": "{system.icon.none}",
@@ -4393,32 +4483,50 @@
             "hover": true
           },
           "tokens": {
+            "borderColor": "{palette.color.dove}",
             "outerBorderColor": "{palette.color.gallery}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
-          "description": "Pressed state matches hover state plus light grey background",
           "if": {
-            "pressed": true
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "outerBorderColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
           "if": {
-            "focus": true
+            "checked": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.dove}",
-            "outerBorderGap": "{palette.size.size4}",
-            "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "borderColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioInputBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "description": "Pressed state matches hover state plus light grey background",
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size0}",
+            "outerBorderWidth": "{palette.border.border1}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}"
           }
         },
         {
@@ -4429,8 +4537,13 @@
             "backgroundColor": "{palette.color.gallery}",
             "borderColor": "{system.color.transparent}",
             "color": "{palette.color.dove}",
-            "radioInputBackgroundColor": "{palette.color.gallery}",
-            "radioInputBorderColor": "{palette.color.silver}"
+            "radioCheckedBackgroundColor": "{palette.color.silver}",
+            "radioInputBackgroundColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.silver}",
+            "radioInputSize": "{palette.size.size16}",
+            "radioOuterBorderColor": "{palette.color.silver}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
@@ -4446,7 +4559,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.black}",
+        "borderColor": "{palette.color.silver}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
@@ -4461,22 +4574,22 @@
         "fontWeight": "{palette.fontWeight.weight700}",
         "letterSpacing": "{system.letterSpacing.none}",
         "lineHeight": "{palette.lineHeight.multiply140}",
-        "minWidth": "{palette.size.size120}",
+        "minWidth": "{palette.size.size288}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{system.border.zero}",
         "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size10}",
+        "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size12}",
         "radioCheckedBackgroundColor": "{palette.color.mosque}",
-        "radioCheckedSize": "{palette.size.size12}",
+        "radioCheckedSize": "{palette.size.size16}",
         "radioInputBackgroundColor": "{palette.color.white}",
         "radioInputBorderColor": "{palette.color.mosque}",
         "radioInputBorderWidth": "{palette.border.border2}",
         "radioInputOutlineColor": "{palette.color.transparent}",
         "radioInputOutlineWidth": "{palette.border.none}",
-        "radioInputSize": "{palette.size.size20}",
+        "radioInputSize": "{palette.size.size24}",
         "radioOuterBorderColor": "{system.color.transparent}",
         "radioOuterBorderGap": "{system.size.zero}",
         "radioOuterBorderWidth": "{system.border.zero}",
@@ -4487,22 +4600,29 @@
     },
     "RadioCardGroup": {
       "appearances": {
+        "fullWidth": {
+          "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
+          "type": "variant",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
           "if": {
-            "viewport": ["lg", "xl"]
+            "fullWidth": null,
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
-            "direction": "{system.direction.column}"
+            "direction": "{system.direction.row}",
+            "space": "{system.integer.5}"
           }
         }
       ],
       "tokens": {
-        "direction": "{system.direction.row}",
-        "fieldSpace": "{system.integer.2}",
-        "space": "{system.integer.2}"
+        "direction": "{system.direction.column}",
+        "fieldSpace": "{system.integer.3}",
+        "space": "{system.integer.3}"
       }
     },
     "RadioGroup": {
@@ -4598,18 +4718,16 @@
             "inactive": null
           },
           "tokens": {
-            "outerBackgroundColor": "{palette.color.gallery}",
-            "outerBorderColor": "{palette.color.gallery}"
+            "backgroundColor": "{palette.color.whiteDark}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "inactive": null
+            "focus": true
           },
           "tokens": {
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -4618,18 +4736,20 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.gallery}"
+            "borderColor": "{palette.color.gallery}",
+            "color": "{palette.color.dove}",
+            "placeholderColor": "{palette.color.dove}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.silver}",
-        "borderRadius": "{palette.radius.pill32}",
+        "borderColor": "{palette.color.black}",
+        "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
-        "buttonsGap": "{palette.size.size1}",
+        "buttonsGap": "{palette.size.size2}",
         "clearButtonIcon": "{palette.icon.Times}",
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -4637,12 +4757,12 @@
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderRadius": "{palette.radius.pill32}",
-        "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size10}",
-        "paddingLeft": "{palette.size.size24}",
-        "paddingRight": "{palette.size.size4}",
-        "paddingTop": "{palette.size.size10}",
-        "placeholderColor": "{palette.color.dove}",
+        "outerBorderWidth": "{palette.border.none}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size6}",
+        "paddingTop": "{palette.size.size12}",
+        "placeholderColor": "{palette.color.black}",
         "submitButtonIcon": "{palette.icon.Spyglass}"
       }
     },
@@ -4670,7 +4790,19 @@
         },
         {
           "if": {
-            "hover": true
+            "hover": true,
+            "priority": null
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "high"
           },
           "tokens": {
             "backgroundColor": "{palette.color.mosqueDark}",
@@ -4683,9 +4815,9 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{system.color.transparent}",
+            "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}",
+            "borderWidth": "{palette.border.border3}",
             "iconColor": "{palette.color.mosque}"
           }
         },
@@ -4694,7 +4826,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
+            "backgroundColor": "{palette.color.mosqueDark}",
             "borderColor": "{system.color.none}",
             "borderWidth": "{system.border.zero}",
             "iconColor": "{palette.color.white}"
@@ -4702,10 +4834,34 @@
         },
         {
           "if": {
-            "inactive": true
+            "focus": true,
+            "pressed": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity3}"
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{system.color.none}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "iconColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "priority": null
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.transparent}"
           }
         }
       ],
@@ -4714,7 +4870,7 @@
         "borderColor": "{system.color.none}",
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{system.border.zero}",
-        "iconColor": "{palette.color.dove}",
+        "iconColor": "{palette.color.mosque}",
         "iconSize": "{palette.size.size20}",
         "opacity": "{system.opacity.opaque}",
         "paddingBottom": "{palette.size.size8}",
@@ -6026,7 +6182,22 @@
       "appearances": {
         "colour": {
           "type": "variant",
-          "values": ["red"]
+          "values": [
+            "default",
+            "brand",
+            "dark",
+            "light",
+            "positive",
+            "warning",
+            "danger",
+            "black",
+            "white",
+            "brand2",
+            "brand3",
+            "alternative1",
+            "alternative2",
+            "alternative3"
+          ]
         },
         "compact": {
           "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
@@ -6282,11 +6453,115 @@
         },
         {
           "if": {
-            "colour": "red"
+            "colour": "default"
+          },
+          "tokens": {
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "colour": "dark"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "colour": "light"
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "colour": "positive"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "colour": "warning"
           },
           "tokens": {
             "color": "{palette.color.trinidad}"
           }
+        },
+        {
+          "if": {
+            "colour": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.wellRead}"
+          }
+        },
+        {
+          "if": {
+            "colour": "black"
+          },
+          "tokens": {
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "colour": "white"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand2"
+          },
+          "tokens": {
+            "color": "{palette.color.chathamsBlue}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand3"
+          },
+          "tokens": {
+            "color": "{palette.color.flirt}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative1"
+          },
+          "tokens": {
+            "color": "{palette.color.hibiscus}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative2"
+          },
+          "tokens": {
+            "color": "{palette.color.cardinalPink}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative3"
+          },
+          "tokens": {
+            "color": "{palette.color.bilbao}"
+          }
         }
       ],
       "tokens": {