@telus-uds/theme-koodo 3.22.0 → 3.24.0

package/theme.json

@@ -21,8 +21,8 @@
       ],
       "tokens": {
         "color": "{palette.color.mosque}",
-        "size": "{palette.size.size40}",
-        "thickness": "{palette.border.border4}"
+        "size": "{palette.size.size24}",
+        "thickness": "{palette.border.border2}"
       }
     },
     "Badge": {
@@ -119,6 +119,20 @@
         "paddingTop": "{palette.size.size2}"
       }
     },
+    "BlockQuote": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "backgroundGradient": "{system.gradient.none}",
+        "color": "{palette.color.mosque}",
+        "marginBottom": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size16}",
+        "width": "{palette.size.size2}"
+      }
+    },
     "Box": {
       "appearances": {
         "background": {
@@ -342,10 +356,11 @@
           "type": "variant",
           "values": [true]
         },
+        "viewport": "{appearances.system.viewport}",
         "width": {
-          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "description": "Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.",
           "type": "variant",
-          "values": ["full"]
+          "values": ["full", "responsive"]
         }
       },
       "rules": [
@@ -583,6 +598,15 @@
             "width": "{system.size.full}"
           }
         },
+        {
+          "if": {
+            "viewport": ["xs"],
+            "width": "responsive"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1155,6 +1179,10 @@
     },
     "Callout": {
       "appearances": {
+        "rounded": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "type": "variant",
           "values": ["small"]
@@ -1169,12 +1197,20 @@
             "paddingBottom": "{palette.size.size4}",
             "paddingTop": "{palette.size.size4}"
           }
+        },
+        {
+          "if": {
+            "rounded": true
+          },
+          "tokens": {
+            "borderRadius": "{palette.size.size4}"
+          }
         }
       ],
       "tokens": {
-        "background": "{palette.color.gallery}",
-        "borderRadius": "{palette.size.size4}",
-        "color": "{palette.color.black}",
+        "background": "{palette.color.carouselPink}",
+        "borderRadius": "{palette.size.size0}",
+        "color": "{palette.color.flirt}",
         "gap": "{palette.size.size16}",
         "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size16}",
@@ -1234,7 +1270,7 @@
         "borderWidth": "{palette.border.none}",
         "contentAlignItems": "{system.flexAlign.stretch}",
         "contentFlexGrow": "{system.integer.0}",
-        "contentFlexShrink": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.1}",
         "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "flex": "{system.integer.1}",
         "minWidth": "{system.size.none}",
@@ -1647,6 +1683,106 @@
         "textLineHeight": "{palette.lineHeight.ratio17to8}"
       }
     },
+    "Countdown": {
+      "appearances": {
+        "feature": {
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "label": {
+          "type": "variant",
+          "values": [true]
+        },
+        "large": {
+          "type": "variant",
+          "values": [true]
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "containerPaddingBottomTop": "{palette.size.size16}",
+            "containerPaddingLeftRight": "{palette.size.size24}",
+            "labelFontSize": "{palette.fontSize.size14}",
+            "labelLineHeight": "{palette.lineHeight.ratio10to7}",
+            "textLineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size28}"
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size28}"
+          }
+        },
+        {
+          "if": {
+            "feature": true
+          },
+          "tokens": {
+            "labelBorderColor": "{system.color.none}",
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio8to7}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio8to7}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "labelBorderColor": "{system.color.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderRadius": "{palette.radius.radius6}",
+        "containerGradient": "{system.gradient.none}",
+        "containerInverseBorder": "{palette.border.border2}",
+        "containerInverseBorderColor": "{palette.color.white}",
+        "containerPaddingBottomTop": "{palette.size.size48}",
+        "containerPaddingLeftRight": "{palette.size.size64}",
+        "inverseBorderColor": "{system.color.none}",
+        "labelBorderColor": "{system.color.none}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textFontSize": "{palette.fontSize.size16}",
+        "textLineHeight": "{palette.lineHeight.ratio8to7}",
+        "textTimerFontName": "{palette.fontName.StagSans}",
+        "textTimerFontWeight": "{palette.fontWeight.weight400}"
+      }
+    },
     "DatePicker": {
       "appearances": {},
       "rules": [],
@@ -2129,6 +2265,20 @@
     },
     "IconButton": {
       "appearances": {
+        "action": {
+          "type": "variant",
+          "values": [
+            "add",
+            "close",
+            "expand",
+            "moveDown",
+            "moveLeft",
+            "moveRight",
+            "moveUp",
+            "play",
+            "subtract"
+          ]
+        },
         "compact": {
           "description": "Without the outer border gap",
           "type": "variant",
@@ -2159,6 +2309,150 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "action": "add"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "action": "subtract"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "action": "close"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Close}"
+          }
+        },
+        {
+          "if": {
+            "action": "expand"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Expand}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveDown"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronDown}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveLeft"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronLeft}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveRight"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronRight}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "{palette.icon.PlayVideo}"
+          }
+        },
+        {
+          "if": {
+            "action": "add"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "action": "subtract"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "action": "close"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Close}"
+          }
+        },
+        {
+          "if": {
+            "action": "expand"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Expand}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveDown"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronDown}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveLeft"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronLeft}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveRight"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronRight}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "{palette.icon.PlayVideo}"
+          }
+        },
         {
           "if": {
             "inverse": true
@@ -2409,6 +2703,7 @@
         "borderColor": "{system.color.transparent}",
         "borderRadius": "{system.radius.round}",
         "borderWidth": "{palette.border.border1}",
+        "icon": "{system.icon.none}",
         "iconColor": "{palette.color.black}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size16}",
@@ -2749,6 +3044,104 @@
         "listGutter": "{palette.size.size10}"
       }
     },
+    "ListBox": {
+      "appearances": {
+        "current": "{appearances.ListBox.current}",
+        "expanded": "{appearances.ListBox.expanded}",
+        "focus": "{appearances.ListBox.focus}",
+        "hover": "{appearances.ListBox.hover}",
+        "isChild": "{appearances.ListBox.isChild}",
+        "pressed": "{appearances.ListBox.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.icicleDark}",
+            "groupColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.silver}",
+            "groupColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "groupBackgroundColor": "{palette.color.silver}",
+            "groupColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "current": true
+          },
+          "tokens": {
+            "groupColor": "{palette.color.mosque}",
+            "groupFontName": "{palette.fontName.StagSans}",
+            "groupFontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
+        {
+          "if": {
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderWidth": "{palette.border.border4}",
+            "itemPaddingLeft": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "groupIcon": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "groupBackgroundColor": "{palette.color.transparent}",
+        "groupBorderColor": "{palette.color.mosque}",
+        "groupBorderRadius": "{palette.radius.radius6}",
+        "groupBorderWidth": "{palette.border.border1}",
+        "groupColor": "{palette.color.icicle}",
+        "groupFontName": "{palette.fontName.StagSans}",
+        "groupFontSize": "{palette.size.size14}",
+        "groupFontWeight": "{palette.fontWeight.weight400}",
+        "groupIcon": "{palette.icon.ChevronDown}",
+        "groupPaddingBottom": "{palette.size.size12}",
+        "groupPaddingLeft": "{palette.size.size16}",
+        "groupPaddingRight": "{palette.size.size16}",
+        "groupPaddingTop": "{palette.size.size12}",
+        "itemBackgroundColor": "{palette.color.transparent}",
+        "itemBorderBackgroundColor": "{palette.color.icicleDark}",
+        "itemBorderLeftColor": "{palette.color.mosque}",
+        "itemBorderLeftWidth": "{palette.border.border4}",
+        "itemBorderWidth": "{palette.border.none}",
+        "itemColor": "{palette.color.mosque}",
+        "itemDisplay": "{system.show.false}",
+        "itemFontName": "{palette.fontName.StagSans}",
+        "itemFontSize": "{palette.size.size14}",
+        "itemFontWeight": "{palette.fontWeight.weight700}",
+        "itemOutline": "{palette.border.none}",
+        "itemPaddingBottom": "{palette.size.size12}",
+        "itemPaddingLeft": "{palette.size.size16}",
+        "itemPaddingRight": "{palette.size.size16}",
+        "itemPaddingTop": "{palette.size.size12}",
+        "itemTextDecoration": "{system.textLine.none}",
+        "shadow": "{palette.shadow.surfaceRaised}"
+      }
+    },
     "Modal": {
       "appearances": {
         "maxWidth": "{appearances.Modal.maxWidth}",
@@ -3282,6 +3675,37 @@
         "outlineWidth": "{palette.border.border1}"
       }
     },
+    "QuantitySelector": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "padding": "{palette.size.size0}"
+          }
+        }
+      ],
+      "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}"
@@ -3702,7 +4126,7 @@
         "color": "{palette.color.black}",
         "contentAlignItems": "{system.flexAlign.stretch}",
         "contentFlexGrow": "{system.integer.0}",
-        "contentFlexShrink": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.1}",
         "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "contentSpace": "{system.integer.2}",
         "flex": "{system.integer.1}",
@@ -4203,6 +4627,49 @@
         "thickness": "{palette.border.border4}"
       }
     },
+    "SplashButton": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [],
+      "tokens": {
+        "buttonContentBackground": "{system.color.none}",
+        "buttonContentChildrenBackground": "{system.color.none}",
+        "playIcon": "{palette.icon.PlayVideo}",
+        "playIconColor": "{palette.color.white}"
+      }
+    },
+    "SplashButtonWithDetails": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "buttonContentChildrenBackground": "{system.color.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "buttonBackground": "{palette.color.white}",
+        "buttonBorderColor": "{system.color.none}",
+        "buttonBottomPosition": "{palette.size.size24}",
+        "buttonContentBackground": "{system.color.none}",
+        "buttonContentChildrenBackground": "{system.color.none}",
+        "buttonLeftPosition": "{palette.size.size24}",
+        "buttonMinHeight": "{palette.size.size64}",
+        "buttonPaddingLeft": "{palette.size.size16}",
+        "buttonPaddingRight": "{palette.size.size16}",
+        "buttonRadius": "{palette.radius.pill32}",
+        "detailsContainerPadding": "{palette.size.size8}",
+        "playIcon": "{palette.icon.PlayVideo}",
+        "playIconColor": "{palette.color.white}",
+        "playIconContainerBackground": "{system.color.none}"
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],
@@ -4297,6 +4764,61 @@
         "showStepTrackerLabel": "{system.show.true}"
       }
     },
+    "StoryCard": {
+      "appearances": {
+        "focus": "{appearances.StoryCard.focus}",
+        "hover": "{appearances.StoryCard.hover}",
+        "pressed": "{appearances.StoryCard.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.whiteDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "contentAlignItems": "{system.flexAlign.stretch}",
+        "contentFlexGrow": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.0}",
+        "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
+        "flex": "{system.integer.1}",
+        "minWidth": "{palette.size.size0}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderWidth": "{palette.border.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "shadow": "{palette.shadow.none}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {
@@ -4634,6 +5156,74 @@
         "width": "{system.size.none}"
       }
     },
+    "TermsAndConditions": {
+      "appearances": {
+        "expanded": "{appearances.TermsAndConditions.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "contentPaddingBottom": "{palette.size.size8}",
+        "contentPaddingLeft": "{palette.size.size16}",
+        "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}",
+        "expandIconContainerHeight": "{palette.size.size32}",
+        "expandIconContainerJustifyContent": "{system.flexJustifyContent.center}",
+        "expandIconContainerMarginX": "{palette.size.size0}",
+        "expandIconContainerMarginY": "{palette.size.size12}",
+        "expandIconContainerWidth": "{palette.size.size32}",
+        "expandTitleColor": "{palette.color.gallery}",
+        "expandTitleFontSize": "{palette.size.size16}",
+        "expandTitleLineHeight": "{palette.lineHeight.multiply150}",
+        "expandTitleMarginX": "{palette.size.size4}",
+        "expandTitleMarginY": "{palette.size.size0}",
+        "icon": "{palette.icon.ChevronDown}",
+        "listColor": "{palette.color.mosque}",
+        "listFontName": "{palette.fontName.StagSans}",
+        "listFontSize": "{palette.fontSize.size14}",
+        "listFontWeight": "{palette.fontWeight.weight400}",
+        "listLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listMarginBottom": "{palette.size.size16}",
+        "listMarginLeft": "{palette.size.size32}",
+        "mdContentPaddingBottom": "{palette.size.size16}",
+        "mdContentPaddingLeft": "{palette.size.size48}",
+        "orderedPadding": "{palette.size.size0}",
+        "titleColor": "{palette.color.mosque}",
+        "titleFontSize": "{palette.fontSize.size14}",
+        "titleLineHeight": "{palette.lineHeight.ratio10to7}",
+        "titlePaddingLeft": "{palette.size.size8}",
+        "unorderedPadding": "{palette.size.size0}"
+      }
+    },
+    "Testimonial": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "dividerBackgroundColor": "{palette.color.white}",
+        "dividerBorder": "{palette.border.border1}",
+        "figcaptionGap": "{palette.size.size12}",
+        "icon": "{palette.icon.ArrowLeft}",
+        "iconColor": "{palette.color.white}",
+        "imageSize": "{palette.size.size48}",
+        "quoteContainerGap": "{palette.size.size4}",
+        "testimonialContainerGap": "{palette.size.size12}",
+        "textColor": "{palette.color.white}"
+      }
+    },
     "TextArea": {
       "appearances": {},
       "rules": [],
@@ -5298,6 +5888,97 @@
         "textTransform": "{system.textTransform.none}"
       }
     },
+    "Video": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.black}",
+        "pauseIcon": "{palette.icon.Add}",
+        "playIcon": "{palette.icon.Add}",
+        "replayIcon": "{palette.icon.Add}"
+      }
+    },
+    "VideoButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{palette.color.white}"
+      }
+    },
+    "VideoControlBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "captionsIcon": "{palette.icon.Add}",
+        "maximizeIcon": "{palette.icon.Add}",
+        "menuBottom": "{palette.size.size64}",
+        "menuMarginLeft": "{palette.size.size16}",
+        "menuRight": "{palette.size.size32}",
+        "minimizeIcon": "{palette.icon.Add}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size48}",
+        "paddingLeftCompactMode": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size48}",
+        "paddingRightCompactMode": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "settingsIcon": "{palette.icon.Settings}"
+      }
+    },
+    "VideoMenu": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.black}",
+        "checkMarkFocusColor": "{palette.color.mosque}",
+        "checkMarkHeight": "{palette.size.size24}",
+        "checkMarkHoverColor": "{palette.color.mosque}",
+        "checkMarkIcon": "{palette.icon.Check}",
+        "checkMarkSelectedColor": "{palette.color.black}",
+        "checkMarkUnselectedColor": "{palette.color.transparent}",
+        "checkMarkWidth": "{palette.size.size24}",
+        "padding": "{palette.size.size16}"
+      }
+    },
+    "VideoMiddleControlButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.black}",
+        "height": "{palette.size.size64}",
+        "iconColor": "{palette.color.white}",
+        "width": "{palette.size.size64}"
+      }
+    },
+    "VideoProgressBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "rangeBackground": "{palette.color.transparent}",
+        "thumbBackground": "{palette.color.white}",
+        "thumbHeight": "{palette.size.size8}",
+        "thumbWidth": "{palette.size.size8}",
+        "timestampMarginLeft": "{palette.size.size8}",
+        "timestampMarginRight": "{palette.size.size8}",
+        "trackGradientEnd": "{palette.color.mosque}",
+        "trackGradientStart": "{palette.color.mosque}"
+      }
+    },
+    "VideoVolumeSlider": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "marginLeft": "{palette.size.size16}",
+        "marginRight": "{palette.size.size16}",
+        "mutedIcon": "{palette.icon.Add}",
+        "rangeBackground": "{palette.color.transparent}",
+        "thumbBackground": "{palette.color.white}",
+        "thumbHeight": "{palette.size.size8}",
+        "thumbWidth": "{palette.size.size8}",
+        "trackGradientEnd": "{palette.color.white}",
+        "trackGradientStart": "{palette.color.white}",
+        "unmutedIcon": "{palette.icon.Add}"
+      }
+    },
     "WaffleGrid": {
       "appearances": {},
       "rules": [],