@telus-uds/theme-allium 4.6.0 → 4.8.0

package/theme.json

@@ -1254,7 +1254,7 @@
       "appearances": {
         "background": {
           "type": "variant",
-          "values": ["alternative", "subtle", "grid"]
+          "values": ["alternative", "subtle", "grid", "feature"]
         },
         "padding": {
           "type": "variant",
@@ -1279,6 +1279,16 @@
             "backgroundColor": "{palette.color.greyAlabaster}"
           }
         },
+        {
+          "if": {
+            "background": "feature"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border2}",
+            "gradient": "{palette.gradient.purple}"
+          }
+        },
         {
           "if": {
             "background": "grid"
@@ -1378,6 +1388,7 @@
         "contentFlexShrink": "{system.integer.1}",
         "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "flex": "{system.integer.1}",
+        "gradient": "{system.gradient.none}",
         "minWidth": "{system.size.none}",
         "paddingBottom": "{palette.size.size32}",
         "paddingLeft": "{palette.size.size24}",
@@ -1681,6 +1692,7 @@
           "type": "variant",
           "values": [true]
         },
+        "focus": "{appearances.ChevronLink.focus}",
         "hover": "{appearances.ChevronLink.hover}",
         "inverse": {
           "type": "variant",
@@ -1789,6 +1801,14 @@
             "fontSize": "{palette.fontSize.size12}",
             "iconSize": "{palette.size.size12}"
           }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenAccessible}"
+          }
         }
       ],
       "tokens": {
@@ -2108,7 +2128,21 @@
     },
     "ExpandCollapseMiniControl": {
       "appearances": {
-        "expanded": "{appearances.ExpandCollapseControl.expanded}"
+        "alternative": {
+          "description": "Replaces the default green colour with a more subtle grey.",
+          "type": "variant",
+          "values": [true]
+        },
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "inverse": {
+          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large"]
+        }
       },
       "rules": [
         {
@@ -2118,24 +2152,73 @@
           "tokens": {
             "icon": "{palette.icon.CaretUp}"
           }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "iconSize": "{palette.size.size16}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "iconSize": "{palette.size.size20}",
+            "lineHeight": "{palette.lineHeight.ratio14to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}"
+          }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.transparent}",
         "borderColor": "{palette.color.transparent}",
         "borderWidth": "{system.border.zero}",
+        "color": "{palette.color.greenAccessible}",
+        "fontSize": "{palette.fontSize.size16}",
         "icon": "{palette.icon.CaretDown}",
         "iconColor": "{palette.color.greenAccessible}",
         "iconGap": "{palette.size.size8}",
         "iconPaddingTop": "{palette.size.size4}",
         "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size16}",
+        "iconSize": "{palette.size.size24}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
         "paddingBottom": "{palette.size.size0}",
         "paddingLeft": "{palette.size.size0}",
         "paddingRight": "{palette.size.size0}",
         "paddingTop": "{palette.size.size0}",
         "size": "{palette.size.size4}",
+        "textLine": "{system.textLine.underline}",
         "verticalAlign": "{system.verticalAlign.top}"
       }
     },
@@ -2180,6 +2263,18 @@
         "contentPaddingLeft": "{palette.size.size24}",
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
+        "contentPanelBackgroundColor": "{palette.color.transparent}",
+        "contentPanelBorderColor": "{palette.color.transparent}",
+        "contentPanelBorderWidth": "{palette.border.none}",
+        "contentPanelFontColor": "{palette.color.greyThunder}",
+        "contentPanelFontName": "{palette.fontName.HelveticaNow}",
+        "contentPanelFontSize": "{palette.fontSize.size16}",
+        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
+        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "contentPanelPaddingBottom": "{palette.size.size16}",
+        "contentPanelPaddingLeft": "{palette.size.size24}",
+        "contentPanelPaddingRight": "{palette.size.size0}",
+        "contentPanelPaddingTop": "{palette.size.size16}",
         "expandDividerColor": "{palette.color.transparent}",
         "expandDividerWidth": "{palette.size.size0}",
         "expandDuration": "{palette.duration.duration300}",
@@ -3727,10 +3822,12 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}",
+            "backgroundColor": "{palette.color.greyAthens}",
             "borderColor": "{palette.color.purpleTelus}",
-            "borderWidth": "{palette.border.border3}",
-            "color": "{palette.color.purpleTelus}"
+            "borderWidth": "{palette.border.border2}",
+            "color": "{palette.color.purpleTelus}",
+            "outerBorderColor": "{palette.color.purpleTelus}",
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
@@ -3770,7 +3867,7 @@
             "viewport": ["xs", "sm", "md"]
           },
           "tokens": {
-            "textAlign": "{system.flexJustifyContent.flexStart}",
+            "textAlign": "{system.flexJustifyContent.spaceBetween}",
             "width": "{palette.size.size288}"
           }
         },
@@ -5528,18 +5625,37 @@
       }
     },
     "SkipLink": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "focus": "{appearances.SkipLink.focus}",
+        "pressed": "{appearances.SkipLink.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}",
+            "outlineColor": "{palette.color.greenDarkFern}"
+          }
+        }
+      ],
       "tokens": {
-        "backgroundColor": "{palette.color.purpleDeluge}",
-        "borderRadius": "{palette.radius.pill32}",
-        "color": "{palette.color.white}",
-        "outlineColor": "{palette.color.purpleDeluge}",
-        "outlineOffset": "{palette.border.border2}",
+        "backgroundColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.greenAccessible}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "outlineColor": "{palette.color.greenAccessible}",
+        "outlineOffset": "{palette.border.none}",
         "outlineStyle": "{system.borderStyle.solid}",
-        "outlineWidth": "{palette.border.border1}",
-        "paddingHorizontal": "{palette.size.size8}",
-        "paddingVertical": "{palette.size.size8}"
+        "outlineWidth": "{palette.border.border2}",
+        "paddingHorizontal": "{palette.size.size2}",
+        "paddingVertical": "{palette.size.size2}",
+        "textLine": "{system.textLine.underline}"
       }
     },
     "Spinner": {
@@ -5778,37 +5894,165 @@
     "Table": {
       "appearances": {
         "spacing": {
+          "description": "Adjusts the height of the table cell",
+          "type": "variant",
+          "values": ["compact", "default"]
+        },
+        "text": {
+          "type": "variant",
+          "values": ["small", "medium"]
+        },
+        "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.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "text": "small",
+            "type": "subHeading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyAlabaster}",
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "type": "heading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyAthens}",
+            "cellBoxShadowColor": "{palette.color.greyCloud}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight500}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "type": "subHeading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyAlabaster}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "text": "medium",
+            "type": "subHeading"
+          },
+          "tokens": {
+            "cellBackground": "{palette.color.greyAlabaster}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "default",
+            "text": "small",
+            "type": "default"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight400}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "spacing": "compact",
+            "text": "small",
+            "type": "default"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight400}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "text": "small",
+            "type": "rowHeading"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
           }
         }
       ],
       "tokens": {
-        "cellBackground": "{palette.color.white}",
+        "cellBackground": "{palette.color.transparent}",
         "cellBoxShadowColor": "{palette.color.greyMystic}",
-        "cellHeadingBackground": "{palette.color.greyAthens}",
-        "cellHeadingBoxShadowColor": "{palette.color.greyCloud}",
         "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.elevation1}",
-        "cellSubheadingBackground": "{palette.color.greyAlabaster}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "stickyBackgroundColor": "{palette.color.white}",
         "tablePaddingBottom": "{palette.size.size24}"
       }
     },
@@ -6150,9 +6394,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.size6}",
+            "titlePaddingLeft": "{palette.size.size6}"
+          }
+        },
         {
           "if": {
             "expanded": true
@@ -6163,26 +6418,35 @@
         }
       ],
       "tokens": {
+        "contentBorderColor": "{system.color.transparent}",
+        "contentMarginBottom": "{palette.size.size0}",
         "contentPaddingBottom": "{palette.size.size8}",
         "contentPaddingLeft": "{palette.size.size16}",
+        "dividerColor": "{palette.color.greyCloud}",
         "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.greyShuttle}",
+        "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}",
+        "expandTitleBorder": "{palette.border.none}",
+        "expandTitleBorderColor": "{palette.color.transparent}",
         "expandTitleColor": "{palette.color.greyThunder}",
+        "expandTitleFontName": "{palette.fontName.HelveticaNow}",
         "expandTitleFontSize": "{palette.size.size16}",
+        "expandTitleFontWeight": "{palette.fontWeight.weight500}",
         "expandTitleLineHeight": "{palette.lineHeight.ratio3to2}",
         "expandTitleMarginX": "{palette.size.size4}",
         "expandTitleMarginY": "{palette.size.size0}",
+        "expandTitlePaddingLeft": "{palette.size.size0}",
+        "expandTitleUnderline": "{system.textLine.none}",
         "icon": "{palette.icon.CaretDown}",
         "listColor": "{palette.color.greyCharcoal}",
         "listFontName": "{palette.fontName.HelveticaNow}",
@@ -6197,8 +6461,8 @@
         "titleColor": "{palette.color.greyCharcoal}",
         "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": {
@@ -6525,17 +6789,19 @@
         "labelFontSize": "{palette.fontSize.size16}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "labelMarginLeft": "{palette.size.size10}",
+        "labelMarginLeft": "{palette.size.size0}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size0}",
+        "outerBorderGapButton": "{palette.size.size3}",
         "outerBorderWidth": "{palette.border.none}",
         "paddingBottom": "{system.size.zero}",
         "paddingLeft": "{system.size.zero}",
         "paddingRight": "{system.size.zero}",
         "paddingTop": "{system.size.zero}",
         "shadow": "{palette.shadow.surfaceInset}",
+        "space": "{system.integer.2}",
         "switchBorderColor": "{palette.color.transparent}",
         "switchBorderRadius": "{palette.radius.pill32}",
         "switchBorderWidth": "{palette.border.none}",
@@ -6545,6 +6811,7 @@
         "trackBorderColor": "{palette.color.transparent}",
         "trackBorderRadius": "{palette.radius.pill32}",
         "trackBorderWidth": "{palette.border.border3}",
+        "trackHeight": "{palette.size.size24}",
         "width": "{palette.size.size40}"
       }
     },
@@ -6797,7 +7064,8 @@
             "fontSize": "{palette.fontSize.size40}",
             "fontWeight": "{palette.fontWeight.weight300}",
             "letterSpacing": "{palette.letterSpacing.medium}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}",
+            "superScriptFontSize": "{palette.fontSize.size24}"
           }
         },
         {
@@ -6807,7 +7075,8 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size64}",
-            "lineHeight": "{palette.lineHeight.ratio9to8}"
+            "lineHeight": "{palette.lineHeight.ratio9to8}",
+            "superScriptFontSize": "{palette.fontSize.size32}"
           }
         },
         {
@@ -6819,7 +7088,8 @@
             "fontSize": "{palette.fontSize.size36}",
             "fontWeight": "{palette.fontWeight.weight400}",
             "letterSpacing": "{palette.letterSpacing.medium}",
-            "lineHeight": "{palette.lineHeight.ratio11to9}"
+            "lineHeight": "{palette.lineHeight.ratio11to9}",
+            "superScriptFontSize": "{palette.fontSize.size24}"
           }
         },
         {
@@ -6832,7 +7102,8 @@
             "fontSize": "{palette.fontSize.size56}",
             "fontWeight": "{palette.fontWeight.weight300}",
             "letterSpacing": "{palette.letterSpacing.condensed}",
-            "lineHeight": "{palette.lineHeight.ratio8to7}"
+            "lineHeight": "{palette.lineHeight.ratio8to7}",
+            "superScriptFontSize": "{palette.fontSize.size32}"
           }
         },
         {
@@ -6842,7 +7113,8 @@
           "tokens": {
             "fontSize": "{palette.fontSize.size28}",
             "letterSpacing": "{palette.letterSpacing.loose}",
-            "lineHeight": "{palette.lineHeight.ratio9to7}"
+            "lineHeight": "{palette.lineHeight.ratio9to7}",
+            "superScriptFontSize": "{palette.fontSize.size20}"
           }
         },
         {
@@ -6855,7 +7127,8 @@
             "fontSize": "{palette.fontSize.size40}",
             "fontWeight": "{palette.fontWeight.weight300}",
             "letterSpacing": "{palette.letterSpacing.medium}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}",
+            "superScriptFontSize": "{palette.fontSize.size24}"
           }
         },
         {
@@ -6866,7 +7139,8 @@
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontSize": "{palette.fontSize.size24}",
             "fontWeight": "{palette.fontWeight.weight400}",
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "lineHeight": "{palette.lineHeight.ratio4to3}",
+            "superScriptFontSize": "{palette.fontSize.size16}"
           }
         },
         {
@@ -6877,7 +7151,8 @@
           "tokens": {
             "fontSize": "{palette.fontSize.size28}",
             "letterSpacing": "{palette.letterSpacing.loose}",
-            "lineHeight": "{palette.lineHeight.ratio9to7}"
+            "lineHeight": "{palette.lineHeight.ratio9to7}",
+            "superScriptFontSize": "{palette.fontSize.size20}"
           }
         },
         {
@@ -6888,7 +7163,8 @@
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontSize": "{palette.fontSize.size20}",
             "fontWeight": "{palette.fontWeight.weight500}",
-            "lineHeight": "{palette.lineHeight.ratio7to5}"
+            "lineHeight": "{palette.lineHeight.ratio7to5}",
+            "superScriptFontSize": "{palette.fontSize.size16}"
           }
         },
         {
@@ -6909,7 +7185,8 @@
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontSize": "{palette.fontSize.size16}",
             "fontWeight": "{palette.fontWeight.weight500}",
-            "lineHeight": "{palette.lineHeight.ratio3to2}"
+            "lineHeight": "{palette.lineHeight.ratio3to2}",
+            "superScriptFontSize": "{palette.fontSize.size16}"
           }
         },
         {
@@ -6923,6 +7200,14 @@
             "lineHeight": "{palette.lineHeight.ratio9to7}"
           }
         },
+        {
+          "if": {
+            "size": ["h5", "h6"]
+          },
+          "tokens": {
+            "superScriptFontSize": "{palette.fontSize.size12}"
+          }
+        },
         {
           "if": {
             "size": "h6"
@@ -6940,7 +7225,8 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio8to5}"
+            "lineHeight": "{palette.lineHeight.ratio8to5}",
+            "superScriptFontSize": "{palette.fontSize.size16}"
           }
         },
         {
@@ -6968,7 +7254,8 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio10to7}"
+            "lineHeight": "{palette.lineHeight.ratio10to7}",
+            "superScriptFontSize": "{palette.fontSize.size12}"
           }
         },
         {
@@ -6988,7 +7275,8 @@
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontSize": "{palette.fontSize.size12}",
             "fontWeight": "{palette.fontWeight.weight500}",
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "lineHeight": "{palette.lineHeight.ratio4to3}",
+            "superScriptFontSize": "{palette.fontSize.size12}"
           }
         },
         {
@@ -7248,6 +7536,7 @@
         "fontWeight": "{palette.fontWeight.weight400}",
         "letterSpacing": "{system.letterSpacing.none}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "superScriptFontSize": "{palette.fontSize.size16}",
         "textTransform": "{system.textTransform.none}"
       }
     },
@@ -7348,12 +7637,59 @@
       }
     },
     "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.greyCloud}",
+            "outerBorderColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyMystic}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border2}",
+            "titleColor": "{palette.color.purpleTelus}"
+          }
+        }
+      ],
       "tokens": {
-        "borderColor": "{palette.color.purpleTelus}",
+        "borderColor": "{palette.color.greyMystic}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border2}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size2}",
+        "outerBorderRadius": "{palette.radius.radius8}",
+        "outerBorderWidth": "{palette.border.border2}",
         "pressableBorderTopColor": "{palette.color.greyMystic}",
         "pressableBorderTopWidth": "{palette.border.border1}",
         "pressablePaddingBottom": "{palette.size.size16}",
@@ -7361,7 +7697,7 @@
         "pressablePaddingVertical": "{palette.size.size16}",
         "splashButtonRadius": "{palette.radius.radius4}",
         "subTitleColor": "{palette.color.greyShuttle}",
-        "titleColor": "{palette.color.purpleTelus}"
+        "titleColor": "{palette.color.greyCharcoal}"
       }
     },
     "VideoProgressBar": {