@telus-uds/theme-koodo 3.18.0 → 3.20.0

package/theme.json

@@ -288,6 +288,30 @@
         "gradient": "{system.gradient.none}"
       }
     },
+    "Breadcrumbs": {
+      "appearances": {
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": "{system.color.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "icon": "{palette.icon.ChevronRight}",
+        "iconColor": "{system.color.none}",
+        "iconPadding": "{palette.size.size8}",
+        "listItemPadding": "{palette.size.size0}"
+      }
+    },
     "Button": {
       "appearances": {
         "danger": {
@@ -1129,6 +1153,35 @@
         "width": "{system.size.none}"
       }
     },
+    "Callout": {
+      "appearances": {
+        "size": {
+          "type": "variant",
+          "values": ["small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size4}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        }
+      ],
+      "tokens": {
+        "background": "{palette.color.gallery}",
+        "borderRadius": "{palette.size.size4}",
+        "color": "{palette.color.black}",
+        "gap": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size8}"
+      }
+    },
     "Card": {
       "appearances": {
         "background": {
@@ -1581,6 +1634,65 @@
         "textLine": "{system.textLine.none}"
       }
     },
+    "DatePicker": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "calendarDayBlockedCalendarHoverBackground": "{system.color.none}",
+        "calendarDayBlockedCalendarHoverColor": "{system.color.none}",
+        "calendarDayDefaultBeforeHeight": "{palette.size.size14}",
+        "calendarDayDefaultBeforeWidth": "{palette.size.size14}",
+        "calendarDayDefaultBorder": "{palette.border.border1}",
+        "calendarDayDefaultBorderColor": "{system.color.none}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{system.color.none}",
+        "calendarDayDefaultCalendarDaySelectedHoverColor": "{system.color.none}",
+        "calendarDayDefaultColor": "{system.color.none}",
+        "calendarDayDefaultFontName": "{palette.fontName.StagSans}",
+        "calendarDayDefaultFontSize": "{palette.fontSize.size12}",
+        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight300}",
+        "calendarDaySelectedHoverBeforeBackground": "{system.color.none}",
+        "calendarDaySelectedHoverBorderColor": "{system.color.none}",
+        "calendarDaySelectedHoverColor": "{system.color.none}",
+        "calendarMonthCaptionColor": "{system.color.none}",
+        "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
+        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight400}",
+        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
+        "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
+        "dateInputBorderColor": "{palette.color.transparent}",
+        "dateInputBorderRadius": "{palette.radius.radius4}",
+        "dateInputFocusBorderColor": "{system.color.none}",
+        "dateInputHoverBorderColor": "{system.color.none}",
+        "dateInputInsideBorderColor": "{system.color.none}",
+        "dateInputInsideColor": "{system.color.none}",
+        "dateInputStrokeColor": "{system.color.none}",
+        "dayPickerNavigationButtonBackgroundColor": "{system.color.none}",
+        "dayPickerNavigationButtonBorderColor": "{system.color.none}",
+        "dayPickerNavigationButtonChildLeft": "{palette.size.size8}",
+        "dayPickerNavigationButtonChildRight": "{palette.size.size8}",
+        "dayPickerNavigationButtonChildSvgFill": "{system.color.none}",
+        "dayPickerNavigationButtonDefaultHoverBorderColor": "{system.color.none}",
+        "dayPickerNavigationButtonMaxHeight": "{palette.size.size32}",
+        "dayPickerNavigationButtonMaxWidth": "{palette.size.size32}",
+        "dayPickerNavigationButtonPadding": "{palette.size.size8}",
+        "dayPickerNavigationSVGHorizontalFill": "{system.color.none}",
+        "dayPickerWeekHeaderColor": "{system.color.none}",
+        "dayPickerWeekHeaderFontName": "{palette.fontName.StagSans}",
+        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight500}",
+        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
+        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
+        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
+        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
+        "invalidInputMixin": "{system.color.none}",
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}",
+        "singleDatePickerBorderColor": "{system.color.none}",
+        "singleDatePickerLeftRight": "{palette.size.size16}",
+        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
+        "singleDatePickerRadius": "{palette.radius.radius4}",
+        "validInputMixin": "{system.color.none}"
+      }
+    },
     "Divider": {
       "appearances": {
         "decorative": {
@@ -1689,6 +1801,32 @@
         "verticalAlign": "{system.verticalAlign.middle}"
       }
     },
+    "ExpandCollapseMini": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderWidth": "{palette.border.none}"
+      }
+    },
+    "ExpandCollapseMiniControl": {
+      "appearances": {
+        "expanded": "{appearances.ExpandCollapseControl.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "icon": "{palette.icon.ChevronDown}",
+        "size": "{palette.size.size4}"
+      }
+    },
     "ExpandCollapsePanel": {
       "appearances": {},
       "rules": [],
@@ -1761,6 +1899,46 @@
         "titleFontSize": "{palette.fontSize.size16}"
       }
     },
+    "Footnote": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "closeButtonBorderColor": "{palette.color.black}",
+        "closeButtonBorderSize": "{palette.border.border1}",
+        "closeButtonHeight": "{palette.size.size24}",
+        "closeButtonIconSize": "{palette.size.size16}",
+        "closeButtonMarginBottom": "{palette.size.size4}",
+        "closeButtonMarginLeft": "{palette.size.size4}",
+        "closeButtonMarginRight": "{palette.size.size12}",
+        "closeButtonMarginTop": "{palette.size.size12}",
+        "closeButtonWidth": "{palette.size.size24}",
+        "footnoteBackground": "{palette.color.greyLight}",
+        "footnoteBodyBackground": "{palette.color.greyLight}",
+        "footnoteBodyPaddingBottom": "{palette.size.size32}",
+        "footnoteBodyPaddingLeft": "{palette.size.size16}",
+        "footnoteBodyPaddingRight": "{palette.size.size16}",
+        "footnoteBodyPaddingTop": "{palette.size.size0}",
+        "footnoteBorderColorMd": "{palette.color.silver}",
+        "footnoteBorderTopSizeMd": "{palette.border.border1}",
+        "headerMargin": "{palette.size.size16}",
+        "listItemColor": "{palette.color.black}",
+        "listItemFontSize": "{palette.size.size14}",
+        "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listItemMarkerFontSize": "{palette.size.size16}",
+        "listItemMarkerLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listItemPaddingLeft": "{palette.size.size8}",
+        "listPaddingLeft": "{palette.size.size32}"
+      }
+    },
+    "FootnoteLink": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "lineHeight": "{palette.lineHeight.ratio1to1}",
+        "paddingLeft": "{palette.size.size2}",
+        "paddingRight": "{palette.size.size2}"
+      }
+    },
     "HorizontalScrollButton": {
       "appearances": {
         "focus": "{appearances.HorizontalScrollButton.focus}",
@@ -1791,10 +1969,10 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.silver}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.border1}",
-        "iconColor": "{palette.color.mosque}",
+        "iconColor": "{palette.color.black}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size16}",
         "iconTranslateX": "{system.size.zero}",
@@ -1943,23 +2121,37 @@
           "type": "variant",
           "values": [true]
         },
-        "focus": "{appearances.Button.focus}",
-        "hover": "{appearances.Button.hover}",
+        "focus": "{appearances.IconButton.focus}",
+        "hover": "{appearances.IconButton.hover}",
         "inactive": "{appearances.Button.inactive}",
+        "inverse": {
+          "description": "For use on dark backgrounds",
+          "type": "variant",
+          "values": [true]
+        },
         "password": {
           "description": "Password masked or not",
           "type": "variant",
           "values": [true]
         },
-        "pressed": "{appearances.Button.pressed}"
+        "pressed": "{appearances.IconButton.pressed}",
+        "raised": {
+          "description": "Uses shadow and background colour to appear raised above the page",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["small", "large"]
+        }
       },
       "rules": [
         {
           "if": {
-            "compact": true
+            "inverse": true
           },
           "tokens": {
-            "outerBorderGap": "{system.size.zero}"
+            "iconColor": "{palette.color.white}"
           }
         },
         {
@@ -1968,6 +2160,18 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.mosque}",
+            "iconColor": "{palette.color.white}",
+            "iconScale": "{system.iconScale.scale1_10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "password": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}",
             "iconColor": "{palette.color.white}"
           }
         },
@@ -1976,7 +2180,71 @@
             "password": true
           },
           "tokens": {
-            "borderColor": "{palette.color.transparent}"
+            "borderColor": "{system.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "password": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.icicleDark}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}",
+            "iconColor": "{palette.color.black}",
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "password": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderGap": "{palette.size.size4}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}",
+            "borderColor": "{palette.color.icicle}",
+            "iconColor": "{palette.color.icicle}",
+            "outerBorderColor": "{palette.color.icicle}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.darkMosque}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
@@ -1985,38 +2253,107 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
-            "iconColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.darkMosque}",
+            "borderColor": "{palette.color.darkMosque}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size4}"
           }
         },
         {
           "if": {
+            "inverse": true,
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "outerBorderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size16}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "description": "Raised IconButtons follow different design patterns to other variants",
+          "if": {
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border1}",
+            "iconSize": "{palette.size.size16}",
+            "outerBorderColor": "{system.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
             "iconColor": "{palette.color.white}"
           }
         },
+        {
+          "if": {
+            "raised": true,
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "size": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "focus": true,
-            "password": true
+            "raised": true
           },
           "tokens": {
+            "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.mosque}",
             "borderWidth": "{palette.border.border3}",
-            "iconColor": "{palette.color.mosque}"
+            "iconColor": "{palette.color.black}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "pressed": true,
+            "raised": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.transparent}",
+            "backgroundColor": "{palette.color.darkMosque}",
             "borderWidth": "{system.border.zero}",
             "iconColor": "{palette.color.white}"
           }
@@ -2027,18 +2364,41 @@
             "password": true
           },
           "tokens": {
-            "iconColor": "{palette.color.silver}"
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.darkMosque}",
+            "outerBorderColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.darkMosque}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "outerBorderGap": "{system.size.zero}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{system.color.transparent}",
-        "borderColor": "{palette.color.mosque}",
+        "borderColor": "{system.color.transparent}",
         "borderRadius": "{system.radius.round}",
-        "borderWidth": "{palette.border.border3}",
-        "iconColor": "{palette.color.mosque}",
+        "borderWidth": "{palette.border.border1}",
+        "iconColor": "{palette.color.black}",
         "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size16}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{system.color.transparent}",
@@ -2048,6 +2408,13 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "Image": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderRadius": "{palette.radius.radius4}"
+      }
+    },
     "InputLabel": {
       "appearances": {},
       "rules": [],
@@ -2380,7 +2747,11 @@
             "viewport": ["xs", "sm"]
           },
           "tokens": {
-            "height": "{system.size.full}"
+            "height": "{system.size.full}",
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size24}",
+            "paddingRight": "{palette.size.size24}",
+            "paddingTop": "{palette.size.size24}"
           }
         },
         {
@@ -2409,7 +2780,9 @@
         "backdropColor": "{palette.color.black}",
         "backdropOpacity": "{palette.opacity.opacity5}",
         "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.white}",
         "borderRadius": "{palette.radius.radius4}",
+        "cancelButtonColor": "{palette.color.black}",
         "closeIcon": "{palette.icon.Times}",
         "closeIconColor": "{palette.color.black}",
         "closeIconSize": "{palette.size.size24}",
@@ -2418,13 +2791,19 @@
         "containerPaddingLeft": "{system.size.zero}",
         "containerPaddingRight": "{system.size.zero}",
         "containerPaddingTop": "{system.size.zero}",
+        "gap": "{palette.size.size16}",
+        "headingColor": "{palette.color.black}",
+        "headingPaddingRight": "{palette.size.size24}",
         "height": "{system.size.none}",
+        "marginLeft": "{palette.size.size24}",
+        "marginRight": "{palette.size.size24}",
         "maxWidth": "{system.size.full}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
-        "shadow": "{palette.shadow.none}"
+        "paddingBottom": "{palette.size.size24}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size24}",
+        "shadow": "{palette.shadow.none}",
+        "subHeadingMarginTop": "{palette.size.size8}"
       }
     },
     "Notification": {
@@ -2790,6 +3169,45 @@
         "width": "{system.size.none}"
       }
     },
+    "PreviewCard": {
+      "appearances": {
+        "focus": "{appearances.Button.focus}",
+        "hover": "{appearances.PreviewCard.hover}",
+        "pressed": "{appearances.PreviewCard.focus}"
+      },
+      "rules": [],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.white}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.border1}",
+        "flex": "{system.integer.1}",
+        "outerBorderColor": "{palette.color.white}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderWidth": "{palette.size.size0}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "separatorColor": "{palette.color.black}"
+      }
+    },
+    "PriceLockup": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "bottomLinksMarginLeft": "{palette.size.size4}",
+        "bottomTextMarginTop": "{palette.size.size4}",
+        "dividerColor": "{palette.color.dove}",
+        "fontColor": "{palette.color.black}",
+        "footnoteGap": "{palette.size.size4}",
+        "footnoteMarginTop": "{palette.size.size4}",
+        "priceMarginBottom": "{palette.size.size8}",
+        "strikeThroughBackground": "{palette.color.gallery}",
+        "strikeThroughHeight": "{palette.size.size2}",
+        "topTextMarginBottom": "{palette.size.size4}"
+      }
+    },
     "Progress": {
       "appearances": {
         "size": {
@@ -3114,51 +3532,14 @@
         },
         {
           "if": {
-            "checked": true,
-            "focus": true
-          },
-          "tokens": {
-            "inputBackgroundColor": "{palette.color.mosque}",
-            "inputBorderColor": "{palette.color.white}",
-            "inputOutlineColor": "{palette.color.mosque}",
-            "outerBorderColor": "{palette.color.chathamsBlue}",
-            "outerBorderGap": "{palette.size.size5}",
-            "outerBorderWidth": "{palette.border.border1}"
-          }
-        },
-        {
-          "if": {
-            "hover": true
-          },
-          "tokens": {
-            "outerBorderColor": "{palette.color.chathamsBlue}",
-            "outerBorderGap": "{palette.size.size5}",
-            "outerBorderWidth": "{palette.border.border1}"
-          }
-        },
-        {
-          "if": {
-            "checked": true,
             "hover": true
           },
           "tokens": {
-            "inputBackgroundColor": "{palette.color.mosque}",
-            "inputBorderColor": "{palette.color.white}",
-            "inputOutlineColor": "{palette.color.mosque}",
             "outerBorderColor": "{palette.color.chathamsBlue}",
             "outerBorderGap": "{palette.size.size5}",
             "outerBorderWidth": "{palette.border.border1}"
           }
         },
-        {
-          "if": {
-            "checked": true
-          },
-          "tokens": {
-            "inputBackgroundColor": "{palette.color.mosque}",
-            "inputOutlineColor": "{palette.color.mosque}"
-          }
-        },
         {
           "if": {
             "inactive": true
@@ -3177,12 +3558,15 @@
           },
           "tokens": {
             "checkedBackgroundColor": "{palette.color.silver}",
-            "inputBackgroundColor": "{palette.color.silver}",
+            "inputBackgroundColor": "{palette.color.white}",
             "inputBorderColor": "{palette.color.white}",
             "inputBorderWidth": "{palette.border.border3}",
-            "inputOutlineColor": "{palette.color.silver}",
+            "inputOutlineColor": "{palette.color.white}",
             "inputOutlineWidth": "{palette.border.border1}",
-            "labelColor": "{palette.color.dove}"
+            "labelColor": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size1}",
+            "outerBorderWidth": "{palette.border.border1}"
           }
         }
       ],
@@ -3542,8 +3926,7 @@
       "rules": [
         {
           "if": {
-            "hover": true,
-            "inactive": null
+            "hover": true
           },
           "tokens": {
             "outerBackgroundColor": "{palette.color.gallery}",
@@ -3552,32 +3935,31 @@
         },
         {
           "if": {
-            "validation": "success"
+            "focus": true
           },
           "tokens": {
-            "borderColor": "{palette.color.bilbao}",
-            "validationIcon": "{palette.icon.CheckCircledFilled}",
-            "validationIconColor": "{palette.color.bilbao}"
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
           "if": {
-            "validation": "error"
+            "validation": "success"
           },
           "tokens": {
-            "borderColor": "{palette.color.trinidad}",
-            "validationIcon": "{palette.icon.Times}",
-            "validationIconColor": "{palette.color.trinidad}"
+            "borderColor": "{palette.color.mosque}",
+            "validationIcon": "{palette.icon.CheckCircledFilled}",
+            "validationIconColor": "{palette.color.mosque}"
           }
         },
         {
           "if": {
-            "focus": true
+            "validation": "error"
           },
           "tokens": {
-            "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}",
-            "icon": "{system.icon.none}"
+            "borderColor": "{palette.color.amaranth}",
+            "validationIcon": "{palette.icon.ExclamationOctagon}",
+            "validationIconColor": "{palette.color.amaranth}"
           }
         },
         {
@@ -3586,7 +3968,8 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.gallery}"
+            "borderColor": "{palette.color.gallery}",
+            "icon": "{system.icon.none}"
           }
         }
       ],
@@ -3595,7 +3978,7 @@
         "borderColor": "{palette.color.black}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.black}",
+        "color": "{palette.color.dove}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -3606,10 +3989,10 @@
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size10}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size10}",
+        "paddingTop": "{palette.size.size12}",
         "validationIcon": "{system.icon.none}",
         "validationIconColor": "{palette.color.transparent}",
         "validationIconSize": "{palette.size.size24}"
@@ -3873,6 +4256,39 @@
         "showStepTrackerLabel": "{system.show.true}"
       }
     },
+    "Table": {
+      "appearances": {
+        "spacing": {
+          "type": "variant",
+          "values": ["compact"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "spacing": "compact"
+          },
+          "tokens": {
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}"
+          }
+        }
+      ],
+      "tokens": {
+        "cellBackground": "{palette.color.white}",
+        "cellBoxShadowColor": "{palette.color.black}",
+        "cellHeadingBackground": "{palette.color.black}",
+        "cellHeadingBoxShadowColor": "{palette.color.black}",
+        "cellPaddingBottom": "{palette.size.size16}",
+        "cellPaddingLeft": "{palette.size.size16}",
+        "cellPaddingRight": "{palette.size.size16}",
+        "cellPaddingTop": "{palette.size.size16}",
+        "cellRowHeadingBackground": "{palette.color.white}",
+        "cellStickyShadow": "{palette.shadow.elevation1}",
+        "cellSubheadingBackground": "{palette.color.black}",
+        "tablePaddingBottom": "{palette.size.size24}"
+      }
+    },
     "Tabs": {
       "appearances": {},
       "rules": [],
@@ -3880,7 +4296,7 @@
         "borderBottomColor": "{system.color.transparent}",
         "borderBottomWidth": "{system.border.zero}",
         "buttonClearance": "{palette.size.size32}",
-        "gutter": "{palette.size.size16}",
+        "gutter": "{system.size.none}",
         "nextIcon": "{palette.icon.ChevronRight}",
         "previousIcon": "{palette.icon.ChevronLeft}",
         "space": "{system.integer.0}"
@@ -3890,15 +4306,24 @@
       "appearances": {
         "focus": "{appearances.TabsItem.focus}",
         "hover": "{appearances.TabsItem.hover}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.TabsItem.pressed}",
         "selected": "{appearances.TabsItem.pressed}"
       },
       "rules": [
         {
           "if": {
-            "focus": true
+            "selected": true
           },
           "tokens": {
-            "borderWidth": "{palette.border.border4}"
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.mosque}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.mosque}"
           }
         },
         {
@@ -3906,42 +4331,125 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.texas}"
+            "backgroundColor": "{palette.color.whiteDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{system.border.zero}"
           }
         },
         {
           "if": {
+            "focus": true,
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderWidth": "{system.border.zero}",
-            "color": "{palette.color.white}",
-            "highlightColor": "{palette.color.mosque}",
-            "highlightTriangleSize": "{palette.size.size8}"
+            "backgroundColor": "{palette.color.white}",
+            "highlightColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}",
+            "color": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicleDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.silver}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.gallery}",
-        "borderColor": "{palette.color.silver}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{system.color.transparent}",
         "borderRadius": "{system.radius.zero}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.black}",
+        "borderWidth": "{system.border.zero}",
+        "color": "{palette.color.dove}",
         "fontName": "{palette.fontName.StagSans}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight700}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "highlightBarBorderRadius": "{system.radius.zero}",
         "highlightBarBorderWidth": "{system.border.zero}",
         "highlightBarHeight": "{system.border.zero}",
         "highlightColor": "{system.color.transparent}",
         "highlightTriangleSize": "{system.size.zero}",
         "letterSpacing": "{system.letterSpacing.none}",
-        "lineHeight": "{palette.lineHeight.multiply110}",
+        "lineHeight": "{palette.lineHeight.multiply150}",
         "maxWidth": "{system.size.none}",
-        "paddingHorizontal": "{palette.size.size16}",
-        "paddingVertical": "{palette.size.size16}",
+        "paddingHorizontal": "{palette.size.size24}",
+        "paddingVertical": "{palette.size.size4}",
         "space": "{system.integer.0}",
         "textAlign": "{system.textAlign.center}",
         "textTransform": "{system.textTransform.none}"
@@ -4121,9 +4629,9 @@
             "validation": "success"
           },
           "tokens": {
-            "borderColor": "{palette.color.bilbao}",
+            "borderColor": "{palette.color.mosque}",
             "icon": "{palette.icon.CheckCircledFilled}",
-            "iconColor": "{palette.color.bilbao}"
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -4131,9 +4639,9 @@
             "validation": "error"
           },
           "tokens": {
-            "borderColor": "{palette.color.trinidad}",
-            "icon": "{palette.icon.Times}",
-            "iconColor": "{palette.color.trinidad}"
+            "borderColor": "{palette.color.amaranth}",
+            "icon": "{palette.icon.ExclamationOctagon}",
+            "iconColor": "{palette.color.amaranth}"
           }
         },
         {
@@ -4143,7 +4651,7 @@
           },
           "tokens": {
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}",
+            "borderWidth": "{palette.border.border3}",
             "icon": "{system.icon.none}"
           }
         },
@@ -4232,6 +4740,28 @@
         "timelineContainerDirection": "{system.direction.column}"
       }
     },
+    "Toast": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "animationBackgroundColorAfter": "{palette.color.white}",
+        "animationBackgroundColorBefore": "{palette.color.white}",
+        "animationColorAfter": "{palette.color.mosque}",
+        "animationColorBefore": "{palette.color.white}",
+        "animationDivColorAfter": "{palette.color.white}",
+        "animationDivColorBefore": "{palette.color.white}",
+        "animationFillColorAfter": "{palette.color.white}",
+        "animationFillColorBefore": "{palette.color.white}",
+        "animationHeightAfter": "{palette.size.size24}",
+        "animationHeightBefore": "{palette.size.size0}",
+        "animationPaddingBottomAfter": "{palette.size.size16}",
+        "animationPaddingBottomBefore": "{palette.size.size0}",
+        "animationPaddingTopAfter": "{palette.size.size16}",
+        "animationPaddingTopBefore": "{palette.size.size0}",
+        "containerBackgroundColor": "{palette.color.white}",
+        "containerGap": "{palette.size.size12}"
+      }
+    },
     "ToggleSwitch": {
       "appearances": {
         "focus": "{appearances.ToggleSwitch.focus}",
@@ -4727,6 +5257,15 @@
         "textTransform": "{system.textTransform.none}"
       }
     },
+    "WaffleGrid": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemBorderColor": "{palette.color.transparent}",
+        "itemPadding": "{palette.size.size16}",
+        "rowBorderWidth": "{palette.border.border1}"
+      }
+    },
     "spacingScale": {
       "appearances": {
         "space": "{appearances.spacingScale.space}",