@telus-uds/theme-koodo 3.25.0 → 3.27.0

package/theme.json

@@ -315,14 +315,22 @@
             "inverse": true
           },
           "tokens": {
-            "iconColor": "{system.color.none}"
+            "color": "{palette.color.icicle}",
+            "currentColor": "{palette.color.white}",
+            "iconColor": "{palette.color.silver}"
           }
         }
       ],
       "tokens": {
+        "color": "{palette.color.mosque}",
+        "currentColor": "{palette.color.mosque}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size14}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{palette.icon.ChevronRight}",
-        "iconColor": "{system.color.none}",
-        "iconPadding": "{palette.size.size8}",
+        "iconColor": "{palette.color.mosque}",
+        "iconPadding": "{palette.size.size4}",
+        "iconSize": "{palette.size.size20}",
         "listItemPadding": "{palette.size.size0}"
       }
     },
@@ -876,13 +884,18 @@
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
         "backgroundColor": "{palette.color.white}",
+        "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.mosque}",
+        "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.radius4}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
+        "height": "{system.size.none}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.2}",
@@ -1787,61 +1800,67 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "calendarDayBlockedCalendarHoverBackground": "{system.color.none}",
-        "calendarDayBlockedCalendarHoverColor": "{system.color.none}",
-        "calendarDayDefaultBeforeHeight": "{palette.size.size14}",
-        "calendarDayDefaultBeforeWidth": "{palette.size.size14}",
+        "calendarBackgroundColor": "{palette.color.white}",
+        "calendarDayBlockedCalendarHoverBackground": "{palette.color.gallery}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.dove}",
+        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
         "calendarDayDefaultBorder": "{palette.border.border1}",
-        "calendarDayDefaultBorderColor": "{system.color.none}",
-        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{system.color.none}",
-        "calendarDayDefaultCalendarDaySelectedHoverColor": "{system.color.none}",
-        "calendarDayDefaultColor": "{system.color.none}",
+        "calendarDayDefaultBorderColor": "{palette.color.silver}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.mosque}",
+        "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
+        "calendarDayDefaultColor": "{palette.color.black}",
         "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}",
+        "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
+        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
+        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.mosque}",
+        "calendarDaySelectedHoverBorderColor": "{palette.color.silver}",
+        "calendarDaySelectedHoverColor": "{palette.color.black}",
+        "calendarMonthCaptionColor": "{palette.color.black}",
         "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
         "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
-        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight400}",
-        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
+        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio6to5}",
         "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
         "dateInputBorderColor": "{palette.color.transparent}",
         "dateInputBorderRadius": "{palette.radius.radius4}",
-        "dateInputFocusBorderColor": "{system.color.none}",
-        "dateInputHoverBorderColor": "{system.color.none}",
-        "dateInputInsideBorderColor": "{system.color.none}",
+        "dateInputFocusBorderColor": "{palette.color.mosque}",
+        "dateInputHoverBorderColor": "{palette.color.silver}",
+        "dateInputInsideBorderColor": "{palette.color.dove}",
         "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}",
+        "dateInputStrokeColor": "{palette.color.dove}",
+        "dayPickerNavigationButtonPadding": "{palette.size.size12}",
+        "dayPickerWeekHeaderColor": "{palette.color.black}",
         "dayPickerWeekHeaderFontName": "{palette.fontName.StagSans}",
-        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight500}",
-        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
+        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
+        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio8to7}",
         "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}",
+        "nextIcon": "{palette.icon.ChevronRight}",
+        "previousIcon": "{palette.icon.ChevronLeft}",
+        "singleDatePickerBorderColor": "{palette.color.dove}",
         "singleDatePickerLeftRight": "{palette.size.size16}",
         "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
         "singleDatePickerRadius": "{palette.radius.radius4}",
         "validInputMixin": "{system.color.none}"
       }
     },
+    "Disclaimer": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{system.color.none}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size14}",
+        "fontWeight": "{palette.fontWeight.weight300}",
+        "lineHeight": "{palette.lineHeight.ratio10to7}"
+      }
+    },
     "Divider": {
       "appearances": {
         "decorative": {
@@ -1920,9 +1939,19 @@
     },
     "ExpandCollapseControl": {
       "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
         "expanded": "{appearances.ExpandCollapseControl.expanded}"
       },
       "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {}
+        },
         {
           "if": {
             "expanded": true
@@ -1933,19 +1962,19 @@
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.transparent}",
+        "backgroundColor": "{palette.color.gallery}",
         "borderColor": "{palette.color.transparent}",
         "borderWidth": "{system.border.zero}",
         "icon": "{palette.icon.ChevronDown}",
-        "iconColor": "{palette.color.mosque}",
-        "iconGap": "{palette.size.size16}",
+        "iconColor": "{palette.color.black}",
+        "iconGap": "{palette.size.size8}",
         "iconPaddingTop": "{palette.size.size4}",
-        "iconPosition": "{system.position.left}",
+        "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size16}",
-        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "justifyContent": "{system.flexJustifyContent.spaceBetween}",
         "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size24}",
         "paddingTop": "{palette.size.size16}",
         "verticalAlign": "{system.verticalAlign.middle}"
       }
@@ -1977,15 +2006,33 @@
       }
     },
     "ExpandCollapsePanel": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {}
+        }
+      ],
       "tokens": {
+        "borderColor": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border1}",
         "collapseDuration": "{palette.duration.duration250}",
         "contentPaddingBottom": "{palette.size.size16}",
-        "contentPaddingLeft": "{palette.size.size48}",
+        "contentPaddingLeft": "{palette.size.size16}",
         "contentPaddingRight": "{palette.size.size16}",
-        "contentPaddingTop": "{palette.size.size0}",
-        "expandDuration": "{palette.duration.duration300}"
+        "contentPaddingTop": "{palette.size.size16}",
+        "expandDividerColor": "{palette.color.transparent}",
+        "expandDuration": "{palette.duration.duration300}",
+        "expanddDividerWidth": "{palette.size.size0}",
+        "marginBottom": "{palette.size.size8}"
       }
     },
     "Feedback": {
@@ -2061,6 +2108,7 @@
         "closeButtonMarginRight": "{palette.size.size12}",
         "closeButtonMarginTop": "{palette.size.size12}",
         "closeButtonWidth": "{palette.size.size24}",
+        "closeIcon": "{palette.icon.Close}",
         "footnoteBackground": "{palette.color.greyLight}",
         "footnoteBodyBackground": "{palette.color.greyLight}",
         "footnoteBodyPaddingBottom": "{palette.size.size32}",
@@ -2083,6 +2131,9 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "color": "{palette.color.black}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight400}",
         "lineHeight": "{palette.lineHeight.ratio1to1}",
         "paddingLeft": "{palette.size.size2}",
         "paddingRight": "{palette.size.size2}"
@@ -3214,17 +3265,140 @@
         "subHeadingMarginTop": "{palette.size.size8}"
       }
     },
+    "NavigationBar": {
+      "appearances": {
+        "expanded": "{appearances.NavigationBar.expanded}",
+        "focus": "{appearances.NavigationBar.focus}",
+        "hover": "{appearances.NavigationBar.hover}",
+        "pressed": "{appearances.NavigationBar.pressed}",
+        "selected": "{appearances.NavigationBar.selected}",
+        "viewport": "{appearances.NavigationBar.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderColor": "{palette.color.gallery}",
+            "color": "{palette.color.mosque}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border3}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
+            "borderColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosque}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["xs", "sm", "md"]
+          },
+          "tokens": {
+            "textAlign": "{system.flexJustifyContent.flexStart}",
+            "width": "{palette.size.size288}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icoMenu": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.white}",
+        "borderRadius": "{palette.radius.pill32}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.gallery}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size14}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icoMenu": "{palette.icon.ChevronDown}",
+        "lineHeight": "{palette.lineHeight.ratio8to7}",
+        "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}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size8}",
+        "shadow": "{system.shadow.none}",
+        "textAlign": "{system.flexJustifyContent.center}",
+        "width": "{palette.size.size0}"
+      }
+    },
     "Notification": {
       "appearances": {
         "style": "{appearances.Notification.style}",
-        "system": "{appearances.Notification.system}"
+        "system": "{appearances.Notification.system}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "viewport": ["xl"]
+          },
+          "tokens": {
+            "justifyContent": "{system.flexJustifyContent.center}"
+          }
+        },
         {
           "if": {
             "system": true
           },
           "tokens": {
+            "borderLeftWidth": "{system.border.zero}",
+            "borderRadius": "{system.radius.zero}",
+            "borderRightWidth": "{system.border.zero}",
+            "borderTopWidth": "{system.border.zero}",
             "iconGap": "{palette.size.size12}",
             "paddingBottom": "{palette.size.size16}",
             "paddingLeft": "{palette.size.size16}",
@@ -3237,7 +3411,7 @@
             "style": "success"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.icicle}",
+            "backgroundColor": "{palette.color.mintTulip}",
             "color": "{palette.color.black}",
             "icon": "{palette.icon.CheckCircledFilled}",
             "iconColor": "{palette.color.mosque}"
@@ -3249,7 +3423,9 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.beeswax}",
+            "borderColor": "{palette.color.seaBuckthorn}",
             "color": "{palette.color.black}",
+            "dismissIcon": "{system.icon.none}",
             "icon": "{palette.icon.ExclamationTriangle}",
             "iconColor": "{palette.color.amaranth}"
           }
@@ -3260,33 +3436,35 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.piggyPink}",
+            "borderColor": "{palette.color.amaranth}",
             "color": "{palette.color.black}",
-            "icon": "{palette.icon.ExclamationOctagon}",
+            "dismissIcon": "{system.icon.none}",
+            "icon": "{palette.icon.Caution}",
             "iconColor": "{palette.color.trinidad}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.carouselPink}",
-        "borderBottomWidth": "{system.border.zero}",
-        "borderColor": "{system.color.transparent}",
-        "borderLeftWidth": "{system.border.zero}",
-        "borderRadius": "{system.radius.zero}",
-        "borderRightWidth": "{system.border.zero}",
-        "borderTopWidth": "{system.border.zero}",
-        "color": "{palette.color.flirt}",
+        "backgroundColor": "{palette.color.icicle}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.mosque}",
+        "borderLeftWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
+        "color": "{palette.color.black}",
         "dismissButtonGap": "{palette.size.size16}",
-        "dismissIcon": "{palette.icon.Times}",
+        "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.black}",
-        "dismissIconSize": "{palette.size.size16}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "icon": "{system.icon.none}",
         "iconColor": "{system.color.none}",
-        "iconGap": "{palette.size.size16}",
+        "iconGap": "{palette.size.size24}",
         "iconSize": "{palette.size.size24}",
-        "lineHeight": "{palette.lineHeight.multiply150}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
         "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size12}",
         "paddingRight": "{palette.size.size12}",
@@ -3379,12 +3557,24 @@
             "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
+            "gap": "{palette.size.size4}",
             "truncateAbove": "{system.integer.6}"
           }
         }
       ],
       "tokens": {
+        "borderBottomWidth": "{palette.border.none}",
+        "borderColor": "{palette.color.mosque}",
+        "borderLeftWidth": "{palette.border.none}",
+        "borderRightWidth": "{palette.border.none}",
+        "borderTopWidth": "{palette.border.none}",
         "color": "{palette.color.dove}",
+        "ellipsisBorderBottomWidth": "{palette.border.none}",
+        "ellipsisBorderLeftWidth": "{palette.border.none}",
+        "ellipsisBorderRightWidth": "{palette.border.none}",
+        "ellipsisBorderTopWidth": "{palette.border.none}",
+        "ellipsisHeight": "{system.size.none}",
+        "ellipsisPadding": "{palette.size.size0}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -3406,7 +3596,7 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
+            "borderColor": "{palette.color.mosque}",
             "textLine": "{system.textLine.none}"
           }
         },
@@ -3415,8 +3605,7 @@
             "focus": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "borderWidth": "{palette.border.border2}"
+            "borderColor": "{palette.color.mosque}"
           }
         },
         {
@@ -3424,7 +3613,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
+            "backgroundColor": "{palette.color.mosque}",
             "color": "{palette.color.white}",
             "textLine": "{system.textLine.none}"
           }
@@ -3434,28 +3623,32 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
+            "backgroundColor": "{palette.color.mosque}",
             "color": "{palette.color.white}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{palette.color.transparent}",
+        "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.transparent}",
+        "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.pill32}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.dove}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "height": "{palette.size.size32}",
         "lineHeight": "{palette.lineHeight.multiply150}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size4}",
         "outerBorderWidth": "{palette.border.border4}",
-        "paddingBottom": "{palette.size.size4}",
+        "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size8}",
         "textAlign": "{system.flexJustifyContent.center}",
         "textLine": "{system.textLine.underline}",
         "width": "{palette.size.size32}"
@@ -3487,9 +3680,10 @@
           "tokens": {
             "borderRadius": "{palette.radius.pill32}",
             "displayLabel": "{system.show.false}",
-            "paddingBottom": "{palette.size.size4}",
-            "paddingTop": "{palette.size.size4}",
-            "width": "{palette.size.size32}"
+            "paddingBottom": "{palette.size.size8}",
+            "paddingLeft": "{palette.size.size8}",
+            "paddingRight": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
           }
         },
         {
@@ -3497,7 +3691,7 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
+            "borderColor": "{palette.color.mosque}",
             "iconDisplace": "{palette.size.size4}",
             "textLine": "{system.textLine.none}"
           }
@@ -3507,8 +3701,7 @@
             "focus": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "borderWidth": "{palette.border.border3}"
+            "borderColor": "{palette.color.mosque}"
           }
         },
         {
@@ -3516,7 +3709,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
+            "backgroundColor": "{palette.color.mosque}",
             "color": "{palette.color.white}",
             "textLine": "{system.textLine.none}"
           }
@@ -3526,7 +3719,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
+            "backgroundColor": "{palette.color.mosque}",
             "color": "{palette.color.white}"
           }
         },
@@ -3549,25 +3742,30 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.transparent}",
+        "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.transparent}",
+        "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.dove}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "displayLabel": "{system.show.true}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "height": "{system.size.none}",
         "icon": "{system.icon.none}",
         "iconDisplace": "{palette.size.size0}",
         "iconSize": "{palette.size.size14}",
         "lineHeight": "{palette.lineHeight.multiply150}",
         "outerBorderColor": "{system.color.transparent}",
-        "paddingBottom": "{palette.size.size10}",
+        "outerBorderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size10}",
+        "paddingTop": "{palette.size.size12}",
         "textAlign": "{system.flexJustifyContent.center}",
-        "textLine": "{system.textLine.underline}",
+        "textLine": "{system.textLine.none}",
         "width": "{system.size.none}"
       }
     },
@@ -3595,18 +3793,105 @@
       }
     },
     "PriceLockup": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "size": {
+          "type": "variant",
+          "values": ["small", "medium", "large"]
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "amountFontSize": "{palette.fontSize.size36}",
+            "centsFontSize": "{palette.fontSize.size20}",
+            "centsLineHeight": "{palette.lineHeight.ratio5to4}",
+            "currencySymbolFontSize": "{palette.fontSize.size20}",
+            "currencySymbolLineHeight": "{palette.lineHeight.ratio1to1}",
+            "rateFontSize": "{palette.fontSize.size16}",
+            "rateLineHeight": "{palette.lineHeight.ratio8to7}",
+            "strikeThroughHeight": "{palette.size.size2}",
+            "strikeThroughPosition": "{palette.size.size18}",
+            "topTextFontSize": "{palette.fontSize.size14}",
+            "topTextLineHeight": "{palette.lineHeight.ratio7to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "amountFontSize": "{palette.fontSize.size54}",
+            "centsFontName": "{palette.fontName.StagSans}",
+            "centsFontSize": "{palette.fontSize.size24}",
+            "centsFontWeight": "{palette.fontWeight.weight600}",
+            "centsLineHeight": "{palette.lineHeight.ratio5to4}",
+            "currencySymbolFontSize": "{palette.fontSize.size32}",
+            "currencySymbolLineHeight": "{palette.lineHeight.ratio6to5}",
+            "rateFontName": "{palette.fontName.StagSans}",
+            "rateFontSize": "{palette.fontSize.size16}",
+            "rateFontWeight": "{palette.fontWeight.weight600}",
+            "rateLineHeight": "{palette.lineHeight.ratio16to2}",
+            "strikeThroughPosition": "{palette.size.size27}",
+            "topTextFontSize": "{palette.fontSize.size16}",
+            "topTextLineHeight": "{palette.lineHeight.ratio7to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "large",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "centsFontName": "{palette.fontName.StagSans}",
+            "centsFontSize": "{palette.fontSize.size32}",
+            "centsFontWeight": "{palette.fontWeight.weight700}"
+          }
+        }
+      ],
       "tokens": {
+        "amountFontName": "{palette.fontName.StagSans}",
+        "amountFontSize": "{palette.fontSize.size44}",
+        "amountFontWeight": "{palette.fontWeight.weight700}",
+        "amountLetterSpacing": "{palette.letterSpacing.default}",
+        "amountLineHeight": "{palette.lineHeight.ratio1to1}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
-        "bottomTextMarginTop": "{palette.size.size4}",
-        "dividerColor": "{palette.color.dove}",
+        "bottomTextFontSize": "{palette.fontSize.size14}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio8to7}",
+        "bottomTextMarginTop": "{palette.size.size0}",
+        "centsFontName": "{palette.fontName.StagSans}",
+        "centsFontSize": "{palette.fontSize.size24}",
+        "centsFontWeight": "{palette.fontWeight.weight700}",
+        "centsLineHeight": "{palette.lineHeight.ratio6to5}",
+        "currencySymbolFontName": "{palette.fontName.StagSans}",
+        "currencySymbolFontSize": "{palette.fontSize.size24}",
+        "currencySymbolFontWeight": "{palette.fontWeight.weight700}",
+        "currencySymbolLineHeight": "{palette.lineHeight.ratio6to5}",
+        "dividerColor": "{system.color.none}",
         "fontColor": "{palette.color.black}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight700}",
         "footnoteGap": "{palette.size.size4}",
+        "footnoteLinkColor": "{palette.color.mosque}",
+        "footnoteLinkFontName": "{palette.fontName.StagSans}",
+        "footnoteLinkFontSize": "{palette.fontSize.size14}",
+        "footnoteLinkFontWeight": "{palette.fontWeight.weight600}",
         "footnoteMarginTop": "{palette.size.size4}",
-        "priceMarginBottom": "{palette.size.size8}",
-        "strikeThroughBackground": "{palette.color.gallery}",
-        "strikeThroughHeight": "{palette.size.size2}",
+        "priceMarginBottom": "{palette.size.size0}",
+        "rateFontName": "{palette.fontName.StagSans}",
+        "rateFontSize": "{palette.fontSize.size16}",
+        "rateFontWeight": "{palette.fontWeight.weight700}",
+        "rateLineHeight": "{palette.lineHeight.ratio5to4}",
+        "strikeThroughColor": "{palette.color.black}",
+        "strikeThroughHeight": "{palette.size.size3}",
+        "strikeThroughPosition": "{palette.size.size21}",
+        "topTextFontName": "{palette.fontName.StagSans}",
+        "topTextFontSize": "{palette.fontSize.size16}",
+        "topTextFontWeight": "{palette.fontWeight.weight700}",
+        "topTextLineHeight": "{palette.lineHeight.ratio3to2}",
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
@@ -4014,7 +4299,9 @@
         "containerPaddingRight": "{palette.size.size0}",
         "containerPaddingTop": "{palette.size.size0}",
         "containerShadow": "{system.shadow.none}",
+        "descriptionFontName": "{palette.fontName.StagSans}",
         "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionFontWeight": "{palette.fontWeight.weight400}",
         "descriptionLineHeight": "{palette.lineHeight.multiply140}",
         "descriptionMarginLeft": "{system.size.none}",
         "inputBackgroundColor": "{palette.color.white}",
@@ -4188,30 +4475,64 @@
         "purpose": {
           "type": "variant",
           "values": ["offer", "default", "editorial"]
+        },
+        "wrap": {
+          "type": "variant",
+          "values": [true]
         }
       },
-      "rules": [],
+      "rules": [
+        {
+          "if": {
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.seaBuckthorn}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.flirt}",
+            "fontColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "wrap": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size6}",
+            "paddingTop": "{palette.size.size6}"
+          }
+        }
+      ],
       "tokens": {
-        "backgroundColor": "{palette.color.black}",
+        "backgroundColor": "{palette.color.onahau}",
         "borderRadius": "{palette.size.size4}",
-        "boxShadowColor": "{palette.color.black}",
-        "boxShadowPaddingBottom": "{palette.size.size2}",
-        "boxShadowPaddingLeft": "{palette.size.size2}",
-        "boxShadowPaddingRight": "{palette.size.size2}",
-        "boxShadowPaddingTop": "{palette.size.size2}",
-        "curveAfterBackgroundColor": "{palette.color.black}",
-        "curveAfterHeight": "{palette.size.size4}",
-        "curveAfterRadius": "{palette.size.size8}",
-        "curveAfterWidth": "{palette.size.size8}",
-        "curveBackgroundColor": "{palette.color.black}",
-        "curveHeight": "{palette.size.size10}",
-        "curveMarginTop": "{palette.size.size4}",
-        "curveWidth": "{palette.size.size8}",
+        "borderRadiusBottomLeft": "{system.size.none}",
+        "borderRadiusBottomRight": "{system.size.none}",
+        "boxShadowColor": "{system.color.none}",
+        "boxShadowPaddingBottom": "{system.size.none}",
+        "boxShadowPaddingLeft": "{system.size.none}",
+        "boxShadowPaddingRight": "{system.size.none}",
+        "boxShadowPaddingTop": "{system.size.none}",
+        "curveAfterBackgroundColor": "{system.color.none}",
+        "curveAfterHeight": "{system.size.none}",
+        "curveAfterRadius": "{system.size.none}",
+        "curveAfterWidth": "{system.size.none}",
+        "curveBackgroundColor": "{system.color.none}",
+        "curveHeight": "{system.size.none}",
+        "curveMarginTop": "{system.size.none}",
+        "curveWidth": "{system.size.none}",
+        "fontColor": "{palette.color.black}",
         "gradient": "{system.gradient.none}",
-        "paddingBottom": "{palette.size.size4}",
-        "paddingLeft": "{palette.size.size8}",
-        "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size4}"
+        "paddingBottom": "{palette.size.size2}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size2}"
       }
     },
     "Search": {
@@ -4416,6 +4737,7 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.dove}",
+        "feedbackBackgroundColor": "{palette.color.icicle}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -4835,16 +5157,19 @@
       ],
       "tokens": {
         "cellBackground": "{palette.color.white}",
-        "cellBoxShadowColor": "{palette.color.black}",
-        "cellHeadingBackground": "{palette.color.black}",
-        "cellHeadingBoxShadowColor": "{palette.color.black}",
+        "cellBoxShadowColor": "{palette.color.gallery}",
+        "cellHeadingBackground": "{palette.color.mintTulip}",
+        "cellHeadingBoxShadowColor": "{palette.color.gallery}",
         "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}",
+        "cellStickyShadow": "{palette.shadow.surfaceEmboss}",
+        "cellSubheadingBackground": "{palette.color.greyLight}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "tablePaddingBottom": "{palette.size.size24}"
       }
     },
@@ -5943,6 +6268,44 @@
         "width": "{palette.size.size64}"
       }
     },
+    "VideoPicker": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "framedContainerBackgroundColor": "{palette.color.transparent}",
+        "framedContainerBorderColor": "{palette.color.transparent}",
+        "framedContainerBorderRadius": "{palette.radius.radius4}",
+        "framedContainerBorderWidth": "{palette.border.border1}",
+        "framedContainerPadding": "{palette.size.size24}",
+        "framedMaxHeight": "{palette.size.size640}",
+        "stackViewDividerColor": "{palette.color.transparent}"
+      }
+    },
+    "VideoPickerSlider": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}"
+      }
+    },
+    "VideoPickerThumbnail": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border2}",
+        "pressableBorderTopColor": "{palette.color.transparent}",
+        "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}"
+      }
+    },
     "VideoProgressBar": {
       "appearances": {},
       "rules": [],