@telus-uds/theme-koodo 4.7.0 → 4.9.0

package/theme.json

@@ -58,6 +58,7 @@
             "backgroundColor": "{palette.color.transparent}",
             "borderColor": "{palette.color.mosque}",
             "color": "{palette.color.mosque}",
+            "fontSize": "{palette.fontSize.size16}",
             "paddingBottom": "{palette.size.size8}",
             "paddingTop": "{palette.size.size8}"
           }
@@ -69,6 +70,7 @@
           "tokens": {
             "backgroundColor": "{palette.color.onahau}",
             "color": "{palette.color.black}",
+            "fontSize": "{palette.fontSize.size16}",
             "paddingBottom": "{palette.size.size8}",
             "paddingTop": "{palette.size.size8}"
           }
@@ -79,7 +81,8 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.black}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.white}",
+            "fontSize": "{palette.fontSize.size16}"
           }
         },
         {
@@ -111,6 +114,7 @@
         "borderWidth": "{palette.border.border2}",
         "color": "{palette.color.flirt}",
         "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "gradient": "{system.gradient.none}",
         "paddingBottom": "{palette.size.size2}",
@@ -473,6 +477,11 @@
             "focus": true
           },
           "tokens": {
+            "borderBottomWidth": "{palette.border.border4}",
+            "borderLeftWidth": "{palette.border.border4}",
+            "borderRightWidth": "{palette.border.border4}",
+            "borderTopWidth": "{palette.border.border4}",
+            "color": "{palette.color.black}",
             "outerBorderColor": "{palette.color.mosque}",
             "outerBorderGap": "{palette.size.size2}"
           }
@@ -1466,8 +1475,7 @@
           },
           "tokens": {
             "showPanelTabs": "{system.show.false}",
-            "showPreviousNextNavigation": "{system.show.false}",
-            "thumbnailSize": "{palette.size.size48}"
+            "showPreviousNextNavigation": "{system.show.false}"
           }
         }
       ],
@@ -1480,15 +1488,7 @@
         "showPreviousNextNavigation": "{system.show.true}",
         "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
         "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}",
-        "thumbnailBorderColor": "{palette.color.texas}",
-        "thumbnailBorderRadius": "{palette.radius.radius4}",
-        "thumbnailBorderWidth": "{palette.border.border1}",
-        "thumbnailContainerPaddingTop": "{palette.size.size24}",
-        "thumbnailMargin": "{palette.size.size4}",
-        "thumbnailPadding": "{palette.size.size8}",
-        "thumbnailSelectedBorderColor": "{palette.color.mosque}",
-        "thumbnailSelectedBorderWidth": "{palette.border.border2}",
-        "thumbnailSize": "{palette.size.size64}"
+        "stepTrackerCurrentBackgroundColor": "{palette.color.white}"
       }
     },
     "CarouselTabsPanelItem": {
@@ -1496,6 +1496,10 @@
         "focus": "{appearances.CarouselTabsPanelItem.focus}",
         "hover": "{appearances.CarouselTabsPanelItem.hover}",
         "inactive": "{appearances.CarouselTabsPanelItem.inactive}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.CarouselTabsPanelItem.pressed}",
         "selected": "{appearances.CarouselTabsPanelItem.selected}"
       },
@@ -1554,11 +1558,82 @@
             "selected": true
           },
           "tokens": {
-            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomColor": "{palette.color.mosque}",
             "borderBottomWidth": "{palette.border.border2}",
-            "color": "{palette.color.silver}",
-            "fontName": "{palette.fontName.StagSans}",
-            "fontWeight": "{palette.fontWeight.weight400}"
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.icicleDark}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.icicleDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosque}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosqueDark}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.mosqueDark}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border4}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.white}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.white}"
           }
         }
       ],
@@ -1567,21 +1642,78 @@
         "borderBottomColor": "{system.color.transparent}",
         "borderBottomStyle": "{system.borderStyle.solid}",
         "borderBottomWidth": "{palette.border.border1}",
-        "color": "{palette.color.mosque}",
+        "color": "{palette.color.black}",
         "flex": "{system.integer.1}",
         "fontName": "{palette.fontName.StagSans}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size14}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "letterSpacing": "{system.letterSpacing.none}",
-        "lineHeight": "{palette.lineHeight.multiply110}",
+        "lineHeight": "{palette.lineHeight.ratio14to1}",
         "paddingBottom": "{palette.size.size16}",
         "paddingLeft": "{system.size.zero}",
         "paddingRight": "{system.size.zero}",
         "paddingTop": "{system.size.zero}"
       }
     },
+    "CarouselThumbnail": {
+      "appearances": {
+        "focus": "{appearances.CarouselThumbnail.focus}",
+        "hover": "{appearances.CarouselThumbnail.hover}",
+        "pressed": "{appearances.CarouselThumbnail.pressed}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "alignItems": "{system.flexAlign.flexStart}",
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosqueDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignItems": "{system.flexAlign.center}",
+        "borderColor": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius8}",
+        "borderWidth": "{palette.border.border1}",
+        "containerPaddingTop": "{palette.size.size24}",
+        "margin": "{palette.size.size4}",
+        "padding": "{palette.size.size8}",
+        "selectedBorderColor": "{palette.color.mosque}",
+        "selectedBorderWidth": "{palette.border.border2}",
+        "size": "{palette.size.size72}"
+      }
+    },
     "Checkbox": {
       "appearances": {
         "checked": "{appearances.Checkbox.checked}",
@@ -2097,7 +2229,7 @@
       "tokens": {
         "borderColor": "{palette.color.transparent}",
         "borderStyle": "{system.borderStyle.solid}",
-        "borderWidth": "{palette.border.none}"
+        "borderWidth": "{system.border.zero}"
       }
     },
     "ExpandCollapseControl": {
@@ -2315,6 +2447,18 @@
         "contentPaddingLeft": "{palette.size.size16}",
         "contentPaddingRight": "{palette.size.size16}",
         "contentPaddingTop": "{palette.size.size16}",
+        "contentPanelBackgroundColor": "{palette.color.gallery}",
+        "contentPanelBorderColor": "{palette.color.transparent}",
+        "contentPanelBorderWidth": "{palette.border.none}",
+        "contentPanelFontColor": "{palette.color.black}",
+        "contentPanelFontName": "{palette.fontName.StagSans}",
+        "contentPanelFontSize": "{palette.fontSize.size16}",
+        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
+        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "contentPanelPaddingBottom": "{palette.size.size16}",
+        "contentPanelPaddingLeft": "{palette.size.size24}",
+        "contentPanelPaddingRight": "{palette.size.size24}",
+        "contentPanelPaddingTop": "{palette.size.size16}",
         "expandDividerColor": "{system.color.none}",
         "expandDividerWidth": "{system.size.none}",
         "expandDuration": "{palette.duration.duration300}",
@@ -3077,8 +3221,16 @@
       ],
       "tokens": {
         "backgroundColor": "{system.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.none}",
+        "borderBottomRightRadius": "{system.radius.none}",
+        "borderBottomWidth": "{system.border.none}",
         "borderColor": "{system.color.transparent}",
+        "borderLeftWidth": "{system.border.none}",
         "borderRadius": "{system.radius.round}",
+        "borderRightWidth": "{system.border.none}",
+        "borderTopLeftRadius": "{system.radius.none}",
+        "borderTopRightRadius": "{system.radius.none}",
+        "borderTopWidth": "{system.border.none}",
         "borderWidth": "{palette.border.border1}",
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.black}",
@@ -3783,11 +3935,12 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.gallery}",
-            "color": "{palette.color.mosque}",
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}",
             "fontName": "{palette.fontName.StagSans}",
-            "fontWeight": "{palette.fontWeight.weight700}"
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "outerBorderColor": "{palette.color.mosque}"
           }
         },
         {
@@ -3795,10 +3948,8 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border3}",
-            "color": "{palette.color.mosque}"
+            "borderWidth": "{palette.border.border4}"
           }
         },
         {
@@ -3817,9 +3968,9 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosque}",
-            "color": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.darkMosque}",
+            "borderColor": "{palette.color.darkMosque}",
+            "color": "{palette.color.white}"
           }
         },
         {
@@ -3827,10 +3978,10 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.mosque}",
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.mortar}",
             "borderWidth": "{palette.border.border1}",
-            "color": "{palette.color.mosque}"
+            "color": "{palette.color.silver}"
           }
         },
         {
@@ -3838,10 +3989,37 @@
             "viewport": ["xs", "sm", "md"]
           },
           "tokens": {
-            "textAlign": "{system.flexJustifyContent.flexStart}",
+            "textAlign": "{system.flexJustifyContent.spaceBetween}",
             "width": "{palette.size.size288}"
           }
         },
+        {
+          "if": {
+            "hover": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.darkMosque}",
+            "borderColor": "{palette.color.darkMosque}",
+            "color": "{palette.color.white}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight600}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
         {
           "if": {
             "expanded": true
@@ -3855,24 +4033,24 @@
         "alignSelf": "{system.flexAlign.flexStart}",
         "backgroundColor": "{palette.color.white}",
         "borderColor": "{palette.color.white}",
-        "borderRadius": "{palette.radius.pill32}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border4}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "icoMenu": "{palette.icon.ChevronDown}",
-        "lineHeight": "{palette.lineHeight.ratio8to7}",
+        "lineHeight": "{palette.lineHeight.ratio8to5}",
         "minWidth": "{palette.size.size0}",
         "opacity": "{palette.opacity.opacity10}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size0}",
-        "outerBorderWidth": "{palette.border.border1}",
-        "paddingBottom": "{palette.size.size8}",
+        "outerBorderWidth": "{palette.border.none}",
+        "paddingBottom": "{palette.size.size6}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size6}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
         "width": "{palette.size.size0}"
@@ -4491,6 +4669,22 @@
         "alternative": {
           "type": "variant",
           "values": [true]
+        },
+        "disabled": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": {
+          "type": "variant",
+          "values": [true]
+        },
+        "hover": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": {
+          "type": "variant",
+          "values": [true]
         }
       },
       "rules": [
@@ -4499,67 +4693,251 @@
             "alternative": true
           },
           "tokens": {
-            "padding": "{palette.size.size0}"
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{system.color.none}",
-        "borderColor": "{system.color.none}",
-        "iconColor": "{system.color.none}",
-        "iconSize": "{palette.size.size16}",
-        "inputBackgroundColor": "{system.color.none}",
-        "inputBorderColor": "{system.color.none}",
-        "inputBorderWidth": "{palette.size.size1}",
-        "leftIcon": "{palette.icon.Subtract}",
-        "padding": "{palette.size.size16}",
-        "rightIcon": "{palette.icon.Add}",
-        "textColor": "{system.color.none}"
-      }
-    },
-    "QuickLinks": {
-      "appearances": {
-        "viewport": "{appearances.system.viewport}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "viewport": ["md", "lg", "xl"]
+            "hover": true
           },
           "tokens": {
-            "card": "{system.show.false}",
-            "dividers": "{system.show.true}",
-            "list": "{system.show.false}"
+            "inputBackgroundColor": "{palette.color.gallery}"
           }
-        }
-      ],
-      "tokens": {
-        "card": "{system.show.true}",
-        "dividers": "{system.show.true}",
-        "list": "{system.show.true}",
-        "stackGap": "{system.integer.2}",
-        "stackJustify": "{system.flexJustifyContent.center}",
-        "stackSpace": "{system.integer.4}"
-      }
-    },
-    "QuickLinksButton": {
-      "appearances": {
-        "focus": "{appearances.Button.focus}",
-        "hover": "{appearances.Button.hover}",
-        "pressed": "{appearances.Button.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "hover": true
+            "disabled": true
           },
           "tokens": {
-            "borderWidth": "{palette.border.border3}"
+            "inputBackgroundColor": "{palette.color.gallery}",
+            "textColor": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderWidth": "{palette.border.border3}"
+          }
+        }
+      ],
+      "tokens": {
+        "fontSize": "{palette.fontSize.size16}",
+        "inputBackgroundColor": "{palette.color.white}",
+        "inputBorderColor": "{palette.color.dove}",
+        "inputBorderWidth": "{palette.border.border1}",
+        "inputWidth": "{palette.size.size64}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "padding": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size12}",
+        "textColor": "{palette.color.black}"
+      }
+    },
+    "QuantitySelectorSideButton": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "decrease": {
+          "type": "variant",
+          "values": [true]
+        },
+        "disabled": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": {
+          "type": "variant",
+          "values": [true]
+        },
+        "hover": {
+          "type": "variant",
+          "values": [true]
+        },
+        "increase": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "decrease": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderRightWidth": "{system.border.zero}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderLeftWidth": "{system.border.zero}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderLeftWidth": "{palette.border.border2}",
+            "borderRightWidth": "{palette.border.border3}",
+            "borderTopWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "decrease": true,
+            "focus": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderLeftWidth": "{palette.border.border3}",
+            "borderRightWidth": "{palette.border.border2}",
+            "borderTopWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "iconColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomRightRadius": "{palette.radius.radius24}",
+            "borderTopRightRadius": "{palette.radius.radius24}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "decrease": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius24}",
+            "borderTopLeftRadius": "{palette.radius.radius24}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.dove}",
+        "borderLeftWidth": "{palette.border.border1}",
+        "borderRadius": "{system.radius.zero}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderTopWidth": "{palette.border.border1}",
+        "borderWidth": "{palette.border.border1}",
+        "icon": "{system.icon.none}",
+        "iconColor": "{palette.color.black}",
+        "iconSize": "{palette.size.size16}",
+        "padding": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}"
+      }
+    },
+    "QuickLinks": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "card": "{system.show.false}",
+            "dividers": "{system.show.true}",
+            "list": "{system.show.false}"
+          }
+        }
+      ],
+      "tokens": {
+        "card": "{system.show.true}",
+        "dividers": "{system.show.true}",
+        "list": "{system.show.true}",
+        "stackGap": "{system.integer.2}",
+        "stackJustify": "{system.flexJustifyContent.center}",
+        "stackSpace": "{system.integer.4}"
+      }
+    },
+    "QuickLinksButton": {
+      "appearances": {
+        "focus": "{appearances.Button.focus}",
+        "hover": "{appearances.Button.hover}",
+        "pressed": "{appearances.Button.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
           },
           "tokens": {
             "backgroundColor": "{palette.color.silver}",
@@ -5550,18 +5928,37 @@
       }
     },
     "SkipLink": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "focus": "{appearances.SkipLink.focus}",
+        "pressed": "{appearances.SkipLink.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outlineColor": "{palette.color.mortar}"
+          }
+        }
+      ],
       "tokens": {
-        "backgroundColor": "{palette.color.mosqueDark}",
-        "borderRadius": "{palette.radius.radius12}",
-        "color": "{palette.color.white}",
+        "backgroundColor": "{palette.color.white}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.mosque}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
         "outlineColor": "{palette.color.mosque}",
         "outlineOffset": "{system.border.zero}",
         "outlineStyle": "{system.borderStyle.solid}",
         "outlineWidth": "{palette.border.border2}",
-        "paddingHorizontal": "{palette.size.size8}",
-        "paddingVertical": "{palette.size.size8}"
+        "paddingHorizontal": "{palette.size.size2}",
+        "paddingVertical": "{palette.size.size2}",
+        "textLine": "{system.textLine.underline}"
       }
     },
     "Spinner": {
@@ -5670,11 +6067,11 @@
             "completedIconColor": "{palette.color.dove}",
             "connectorColor": "{palette.color.white}",
             "connectorCompletedColor": "{palette.color.white}",
-            "knobBackgroundColor": "{palette.color.transparent}",
+            "knobBackgroundColor": "{system.color.transparent}",
             "knobBorderColor": "{palette.color.white}",
             "knobCompletedBackgroundColor": "{palette.color.white}",
-            "knobCompletedBorderColor": "{palette.color.white}",
-            "knobCurrentBackgroundColor": "{palette.color.white}",
+            "knobCompletedBorderColor": "{system.color.transparent}",
+            "knobCurrentBackgroundColor": "{system.color.transparent}",
             "knobCurrentBorderColor": "{palette.color.white}",
             "knobCurrentInnerColor": "{palette.color.white}",
             "labelColor": "{palette.color.white}",
@@ -5792,37 +6189,167 @@
     "Table": {
       "appearances": {
         "spacing": {
+          "description": "Adjusts the height of the table cell",
+          "type": "variant",
+          "values": ["compact", "default"]
+        },
+        "text": {
+          "type": "variant",
+          "values": ["small"]
+        },
+        "type": {
           "type": "variant",
-          "values": ["compact"]
+          "values": ["subHeading", "rowHeading", "heading", "default"]
         }
       },
       "rules": [
         {
           "if": {
-            "spacing": "compact"
+            "spacing": "compact",
+            "type": "default"
           },
           "tokens": {
             "cellPaddingBottom": "{palette.size.size8}",
-            "cellPaddingTop": "{palette.size.size8}"
+            "cellPaddingTop": "{palette.size.size8}",
+            "fontSize": "{palette.fontSize.size16}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "type": "subHeading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyLight}",
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "type": "heading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.mintTulip}",
+            "cellBoxShadowColor": "{palette.color.transparent}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "type": "heading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.mintTulip}",
+            "cellBoxShadowColor": "{palette.color.transparent}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "type": "subHeading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyLight}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "text": "small",
+            "type": "default"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight400}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "text": "small",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "text": "small",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
           }
         }
       ],
       "tokens": {
         "cellBackground": "{palette.color.white}",
         "cellBoxShadowColor": "{palette.color.gallery}",
-        "cellHeadingBackground": "{palette.color.mintTulip}",
-        "cellHeadingBoxShadowColor": "{palette.color.gallery}",
         "cellMinWidth": "{palette.size.size0}",
         "cellPaddingBottom": "{palette.size.size16}",
         "cellPaddingLeft": "{palette.size.size16}",
         "cellPaddingRight": "{palette.size.size16}",
         "cellPaddingTop": "{palette.size.size16}",
-        "cellRowHeadingBackground": "{palette.color.white}",
-        "cellStickyShadow": "{palette.shadow.surfaceEmboss}",
-        "cellSubheadingBackground": "{palette.color.greyLight}",
+        "cellStickyShadow": "{palette.shadow.elevation1}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight600}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "stickyBackgroundColor": "{palette.color.white}",
         "tablePaddingBottom": "{palette.size.size24}"
       }
     },
@@ -6078,6 +6605,7 @@
             "icon": "{palette.icon.Close}",
             "iconBackground": "{palette.color.mosque}",
             "iconColor": "{palette.color.white}",
+            "iconPadding": "{palette.size.size4}",
             "outerBorderColor": "{palette.color.transparent}",
             "outerBorderWidth": "{palette.border.none}"
           }
@@ -6167,7 +6695,7 @@
         "outerBorderWidth": "{palette.border.none}",
         "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size16}",
         "paddingTop": "{palette.size.size8}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}"
@@ -6175,9 +6703,20 @@
     },
     "TermsAndConditions": {
       "appearances": {
-        "expanded": "{appearances.TermsAndConditions.expanded}"
+        "expanded": "{appearances.TermsAndConditions.expanded}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "expandContentPaddingRight": "{palette.size.size24}",
+            "listMarginLeft": "{palette.size.size2}",
+            "titlePaddingLeft": "{palette.size.size2}"
+          }
+        },
         {
           "if": {
             "expanded": true
@@ -6188,28 +6727,37 @@
         }
       ],
       "tokens": {
+        "contentBorderColor": "{system.color.transparent}",
+        "contentMarginBottom": "{palette.size.size0}",
         "contentPaddingBottom": "{palette.size.size8}",
         "contentPaddingLeft": "{palette.size.size16}",
+        "dividerColor": "{palette.color.silver}",
         "expandBaseBorderWidth": "{palette.border.none}",
         "expandContentPaddingBottom": "{palette.size.size16}",
         "expandContentPaddingLeft": "{palette.size.size16}",
         "expandContentPaddingRight": "{palette.size.size16}",
         "expandContentPaddingTop": "{palette.size.size16}",
         "expandIconContainerAlignItems": "{system.flexAlign.center}",
-        "expandIconContainerBorder": "{palette.border.border1}",
-        "expandIconContainerBorderColor": "{palette.color.gallery}",
+        "expandIconContainerBorder": "{palette.border.none}",
+        "expandIconContainerBorderColor": "{palette.color.transparent}",
         "expandIconContainerHeight": "{palette.size.size32}",
         "expandIconContainerJustifyContent": "{system.flexJustifyContent.center}",
         "expandIconContainerMarginX": "{palette.size.size0}",
         "expandIconContainerMarginY": "{palette.size.size12}",
         "expandIconContainerWidth": "{palette.size.size32}",
-        "expandTitleColor": "{palette.color.gallery}",
+        "expandTitleBorder": "{palette.border.none}",
+        "expandTitleBorderColor": "{palette.color.transparent}",
+        "expandTitleColor": "{palette.color.black}",
+        "expandTitleFontName": "{palette.fontName.StagSans}",
         "expandTitleFontSize": "{palette.size.size16}",
+        "expandTitleFontWeight": "{palette.fontWeight.weight600}",
         "expandTitleLineHeight": "{palette.lineHeight.multiply150}",
         "expandTitleMarginX": "{palette.size.size4}",
         "expandTitleMarginY": "{palette.size.size0}",
+        "expandTitlePaddingLeft": "{palette.size.size0}",
+        "expandTitleUnderline": "{system.textLine.none}",
         "icon": "{palette.icon.ChevronDown}",
-        "listColor": "{palette.color.mosque}",
+        "listColor": "{palette.color.black}",
         "listFontName": "{palette.fontName.StagSans}",
         "listFontSize": "{palette.fontSize.size14}",
         "listFontWeight": "{palette.fontWeight.weight400}",
@@ -6222,23 +6770,54 @@
         "titleColor": "{palette.color.mosque}",
         "titleFontSize": "{palette.fontSize.size14}",
         "titleLineHeight": "{palette.lineHeight.ratio10to7}",
-        "titlePaddingLeft": "{palette.size.size8}",
-        "unorderedPadding": "{palette.size.size0}"
+        "titlePaddingLeft": "{palette.size.size32}",
+        "unorderedPadding": "{palette.size.size12}"
       }
     },
     "Testimonial": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "testimonialFontNameHeading": "{palette.fontName.StagSans}",
+            "testimonialFontSizeHeading": "{palette.fontSize.size32}",
+            "testimonialFontWeightHeading": "{palette.fontWeight.weight700}",
+            "testimonialLineHeightHeading": "{palette.lineHeight.ratio5to4}"
+          }
+        }
+      ],
       "tokens": {
-        "dividerBackgroundColor": "{palette.color.white}",
+        "additionalFontName": "{palette.fontName.StagSans}",
+        "additionalFontSize": "{palette.fontSize.size14}",
+        "additionalFontWeight": "{palette.fontWeight.weight400}",
+        "additionalLineHeight": "{palette.lineHeight.ratio10to7}",
+        "authorFontName": "{palette.fontName.StagSans}",
+        "authorFontSize": "{palette.fontSize.size16}",
+        "authorFontWeight": "{palette.fontWeight.weight600}",
+        "authorLineHeight": "{palette.lineHeight.multiply150}",
+        "dividerBackgroundColor": "{palette.color.silver}",
         "dividerBorder": "{palette.border.border1}",
         "figcaptionGap": "{palette.size.size12}",
-        "icon": "{palette.icon.ArrowLeft}",
-        "iconColor": "{palette.color.white}",
+        "icon": "{palette.icon.QuoteLeft}",
+        "iconColor": "{palette.color.silver}",
+        "iconFr": "{palette.icon.QuoteRightArrow}",
         "imageSize": "{palette.size.size48}",
         "quoteContainerGap": "{palette.size.size4}",
         "testimonialContainerGap": "{palette.size.size12}",
-        "textColor": "{palette.color.white}"
+        "testimonialFontNameHeading": "{palette.fontName.StagSans}",
+        "testimonialFontNameLarge": "{palette.fontName.StagSans}",
+        "testimonialFontSizeHeading": "{palette.fontSize.size24}",
+        "testimonialFontSizeLarge": "{palette.fontSize.size20}",
+        "testimonialFontWeightHeading": "{palette.fontWeight.weight700}",
+        "testimonialFontWeightLarge": "{palette.fontWeight.weight400}",
+        "testimonialLineHeightHeading": "{palette.lineHeight.ratio4to3}",
+        "testimonialLineHeightLarge": "{palette.lineHeight.ratio7to5}",
+        "textColor": "{palette.color.black}"
       }
     },
     "TextArea": {
@@ -6621,7 +7200,7 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.white}",
-            "color": "{palette.color.mosqueDark}"
+            "color": "{palette.color.black}"
           }
         }
       ],
@@ -6629,9 +7208,9 @@
         "arrowBorderRadius": "{palette.radius.none}",
         "arrowOffset": "{palette.size.size4}",
         "arrowWidth": "{palette.size.size8}",
-        "backgroundColor": "{palette.color.mosqueDark}",
+        "backgroundColor": "{palette.color.onahau}",
         "borderRadius": "{palette.radius.radius4}",
-        "color": "{palette.color.white}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -6647,6 +7226,10 @@
       "appearances": {
         "focus": "{appearances.TooltipButton.focus}",
         "hover": "{appearances.TooltipButton.hover}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.TooltipButton.pressed}"
       },
       "rules": [
@@ -6655,30 +7238,73 @@
             "hover": true
           },
           "tokens": {
+            "backgroundColor": "{palette.color.onahau}",
             "iconScale": "{system.iconScale.scale1_25}"
           }
         },
         {
           "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
             "pressed": true
           },
           "tokens": {
-            "iconColor": "{palette.color.mosqueDark}"
+            "backgroundColor": "{palette.color.white}",
+            "iconColor": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "focus": true
+            "inverse": null,
+            "pressed": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosqueDark}"
+            "backgroundColor": "{palette.color.mosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": null
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.chathamsBlue}"
           }
         }
       ],
       "tokens": {
+        "backgroundColor": "{palette.color.transparent}",
         "borderRadius": "{palette.radius.pill32}",
-        "icon": "{palette.icon.Info}",
-        "iconColor": "{palette.color.amaranth}",
+        "icon": "{palette.icon.Tooltip}",
+        "iconColor": "{palette.color.mosque}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size16}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -7110,6 +7736,7 @@
         "fontWeight": "{palette.fontWeight.weight400}",
         "letterSpacing": "{system.letterSpacing.none}",
         "lineHeight": "{palette.lineHeight.multiply150}",
+        "superScriptFontSize": "{system.fontSize.none}",
         "textTransform": "{system.textTransform.none}"
       }
     },
@@ -7192,13 +7819,13 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "framedContainerBackgroundColor": "{palette.color.transparent}",
-        "framedContainerBorderColor": "{palette.color.transparent}",
+        "framedContainerBackgroundColor": "{palette.color.greyLight}",
+        "framedContainerBorderColor": "{palette.color.silver}",
         "framedContainerBorderRadius": "{palette.radius.radius4}",
         "framedContainerBorderWidth": "{palette.border.border1}",
         "framedContainerPadding": "{palette.size.size24}",
         "framedMaxHeight": "{palette.size.size640}",
-        "stackViewDividerColor": "{palette.color.transparent}"
+        "stackViewDividerColor": "{palette.color.silver}"
       }
     },
     "VideoPickerSlider": {
@@ -7210,20 +7837,67 @@
       }
     },
     "VideoPickerThumbnail": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "focus": "{appearances.VideoPickerThumbnail.focus}",
+        "hover": "{appearances.VideoPickerThumbnail.hover}",
+        "pressed": "{appearances.VideoPickerThumbnail.pressed}",
+        "selected": "{appearances.VideoPickerThumbnail.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mortar}",
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderColor": "{palette.color.chathamsBlue}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.silver}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mortar}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}",
+            "titleColor": "{palette.color.mosque}"
+          }
+        }
+      ],
       "tokens": {
-        "borderColor": "{palette.color.transparent}",
+        "borderColor": "{palette.color.silver}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border2}",
-        "pressableBorderTopColor": "{palette.color.transparent}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size2}",
+        "outerBorderRadius": "{palette.radius.radius8}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "pressableBorderTopColor": "{palette.color.silver}",
         "pressableBorderTopWidth": "{palette.border.border1}",
         "pressablePaddingBottom": "{palette.size.size16}",
         "pressablePaddingHorizontal": "{palette.size.size24}",
         "pressablePaddingVertical": "{palette.size.size16}",
         "splashButtonRadius": "{palette.radius.radius4}",
-        "subTitleColor": "{palette.color.transparent}",
-        "titleColor": "{palette.color.transparent}"
+        "subTitleColor": "{palette.color.mortar}",
+        "titleColor": "{palette.color.black}"
       }
     },
     "VideoProgressBar": {