@telus-uds/theme-allium 3.23.0 → 3.25.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 20 Apr 2023 19:05:19 GMT
+ * Generated on Thu, 27 Apr 2023 14:31:20 GMT
  *
  */
 
@@ -13,14 +13,28 @@ const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/A
 const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
 const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
 const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
+const PaletteIconAdd = require('@telus-uds/palette-allium/build/rn/icons/Add')
+const PaletteIconSubtract = require('@telus-uds/palette-allium/build/rn/icons/Subtract')
 const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
+const PaletteIconExpand = require('@telus-uds/palette-allium/build/rn/icons/Expand')
+const PaletteIconChevronLeft = require('@telus-uds/palette-allium/build/rn/icons/ChevronLeft')
+const PaletteIconPlayVideo = require('@telus-uds/palette-allium/build/rn/icons/PlayVideo')
 const PaletteIconStatusWarning = require('@telus-uds/palette-allium/build/rn/icons/StatusWarning')
 const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
 const PaletteIconSearchBold = require('@telus-uds/palette-allium/build/rn/icons/SearchBold')
-const PaletteIconAdd = require('@telus-uds/palette-allium/build/rn/icons/Add')
+const PaletteIconPlaySolid = require('@telus-uds/palette-allium/build/rn/icons/PlaySolid')
+const PaletteIconQuoteLeft = require('@telus-uds/palette-allium/build/rn/icons/QuoteLeft')
 const PaletteIconInvisible = require('@telus-uds/palette-allium/build/rn/icons/Invisible')
 const PaletteIconVisible = require('@telus-uds/palette-allium/build/rn/icons/Visible')
 const PaletteIconQuestion = require('@telus-uds/palette-allium/build/rn/icons/Question')
+const PaletteIconPause = require('@telus-uds/palette-allium/build/rn/icons/Pause')
+const PaletteIconReplay = require('@telus-uds/palette-allium/build/rn/icons/Replay')
+const PaletteIconClosedCaptions = require('@telus-uds/palette-allium/build/rn/icons/ClosedCaptions')
+const PaletteIconFullscreenExpand = require('@telus-uds/palette-allium/build/rn/icons/FullscreenExpand')
+const PaletteIconFullscreenMinimize = require('@telus-uds/palette-allium/build/rn/icons/FullscreenMinimize')
+const PaletteIconSettingsSolid = require('@telus-uds/palette-allium/build/rn/icons/SettingsSolid')
+const PaletteIconMuted = require('@telus-uds/palette-allium/build/rn/icons/Muted')
+const PaletteIconUnmuted = require('@telus-uds/palette-allium/build/rn/icons/Unmuted')
 
 module.exports = {
   components: {
@@ -121,6 +135,27 @@ module.exports = {
         paddingTop: 2
       }
     },
+    BlockQuote: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        backgroundGradient: {
+          angle: 135,
+          stops: [
+            { color: '#4b286d', stop: 0 },
+            { color: '#e53293', stop: 1 }
+          ],
+          type: 'linear'
+        },
+        color: '#414547',
+        marginBottom: 16,
+        paddingBottom: 16,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 16,
+        width: 2
+      }
+    },
     Box: {
       appearances: {
         background: {
@@ -363,10 +398,15 @@ module.exports = {
           type: 'variant',
           values: [ true ]
         },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        },
         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: [
@@ -447,6 +487,10 @@ module.exports = {
           tokens: { outerBorderColor: '#c12335' }
         },
         { if: { width: 'full' }, tokens: { width: '100%' } },
+        {
+          if: { viewport: [ 'xs' ], width: 'responsive' },
+          tokens: { width: '100%' }
+        },
         {
           if: { size: 'small' },
           tokens: { minWidth: 0, paddingBottom: 4, paddingTop: 4 }
@@ -995,7 +1039,7 @@ module.exports = {
         borderWidth: 1,
         contentAlignItems: 'stretch',
         contentFlexGrow: 0,
-        contentFlexShrink: 0,
+        contentFlexShrink: 1,
         contentJustifyContent: 'flex-start',
         flex: 1,
         minWidth: null,
@@ -1341,6 +1385,85 @@ module.exports = {
         textLineHeight: 2.25
       }
     },
+    Countdown: {
+      appearances: {
+        feature: { type: 'variant', values: [ true ] },
+        inverse: { type: 'variant', values: [ true ] },
+        label: { type: 'variant', values: [ true ] },
+        large: { type: 'variant', values: [ true ] },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'xs' ] },
+          tokens: {
+            containerPaddingBottomTop: 16,
+            containerPaddingLeftRight: 24,
+            labelFontSize: 14,
+            labelLineHeight: 1.42857142857,
+            textLineHeight: 1.42857142857
+          }
+        },
+        {
+          if: { large: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 28 }
+        },
+        {
+          if: { feature: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 28 }
+        },
+        {
+          if: { feature: true },
+          tokens: {
+            labelBorderColor: '#4b286d',
+            textFontSize: 64,
+            textLineHeight: 1.125,
+            textTimerFontName: 'HelveticaNow',
+            textTimerFontWeight: '300'
+          }
+        },
+        {
+          if: { large: true },
+          tokens: {
+            textFontSize: 64,
+            textLineHeight: 1.125,
+            textTimerFontName: 'HelveticaNow',
+            textTimerFontWeight: '300'
+          }
+        },
+        {
+          if: { inverse: true },
+          tokens: { labelBorderColor: '#ffffff' }
+        }
+      ],
+      tokens: {
+        containerBorderRadius: 6,
+        containerGradient: {
+          angle: 135,
+          stops: [
+            { color: '#4b286d', stop: 0 },
+            { color: '#e53293', stop: 1 }
+          ],
+          type: 'linear'
+        },
+        containerInverseBorder: 2,
+        containerInverseBorderColor: '#ffffff',
+        containerPaddingBottomTop: 48,
+        containerPaddingLeftRight: 64,
+        inverseBorderColor: '#676e73',
+        labelBorderColor: '#414547',
+        labelFontSize: 16,
+        labelLineHeight: 1.5,
+        textFontSize: 16,
+        textLineHeight: 1.5,
+        textTimerFontName: 'HelveticaNow',
+        textTimerFontWeight: '400'
+      }
+    },
     DatePicker: {
       appearances: {},
       rules: [],
@@ -1622,7 +1745,7 @@ module.exports = {
         padding: 8,
         shadow: {
           blur: 2,
-          color: 'rgba(0, 0, 0, 0.1)',
+          color: 'rgba(0, 0, 0, 0.2)',
           inset: false,
           offsetX: 0,
           offsetY: 2,
@@ -1671,6 +1794,16 @@ module.exports = {
     },
     IconButton: {
       appearances: {
+        action: {
+          type: 'variant',
+          values: [
+            'add',      'close',
+            'expand',   'moveDown',
+            'moveLeft', 'moveRight',
+            'moveUp',   'play',
+            'subtract'
+          ]
+        },
         compact: {
           description: 'Without the outer border gap',
           type: 'variant',
@@ -1716,6 +1849,72 @@ module.exports = {
         size: { type: 'variant', values: [ 'small', 'large' ] }
       },
       rules: [
+        { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+        {
+          if: { action: 'subtract' },
+          tokens: { icon: PaletteIconSubtract }
+        },
+        {
+          if: { action: 'close' },
+          tokens: { icon: PaletteIconClose }
+        },
+        {
+          if: { action: 'expand' },
+          tokens: { icon: PaletteIconExpand }
+        },
+        {
+          if: { action: 'moveDown' },
+          tokens: { icon: PaletteIconCaretDown }
+        },
+        {
+          if: { action: 'moveUp' },
+          tokens: { icon: PaletteIconCaretUp }
+        },
+        {
+          if: { action: 'moveLeft' },
+          tokens: { icon: PaletteIconChevronLeft }
+        },
+        {
+          if: { action: 'moveRight' },
+          tokens: { icon: PaletteIconChevronRight }
+        },
+        {
+          if: { action: 'play' },
+          tokens: { icon: PaletteIconPlayVideo }
+        },
+        { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+        {
+          if: { action: 'subtract' },
+          tokens: { icon: PaletteIconSubtract }
+        },
+        {
+          if: { action: 'close' },
+          tokens: { icon: PaletteIconClose }
+        },
+        {
+          if: { action: 'expand' },
+          tokens: { icon: PaletteIconExpand }
+        },
+        {
+          if: { action: 'moveDown' },
+          tokens: { icon: PaletteIconCaretDown }
+        },
+        {
+          if: { action: 'moveUp' },
+          tokens: { icon: PaletteIconCaretUp }
+        },
+        {
+          if: { action: 'moveLeft' },
+          tokens: { icon: PaletteIconChevronLeft }
+        },
+        {
+          if: { action: 'moveRight' },
+          tokens: { icon: PaletteIconChevronRight }
+        },
+        {
+          if: { action: 'play' },
+          tokens: { icon: PaletteIconPlayVideo }
+        },
         {
           if: { inverse: true },
           tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
@@ -1820,7 +2019,7 @@ module.exports = {
             padding: 8,
             shadow: {
               blur: 2,
-              color: 'rgba(0, 0, 0, 0.1)',
+              color: 'rgba(0, 0, 0, 0.2)',
               inset: false,
               offsetX: 0,
               offsetY: 2,
@@ -1873,6 +2072,7 @@ module.exports = {
         borderColor: '#676e73',
         borderRadius: 99999999999999,
         borderWidth: 1,
+        icon: null,
         iconColor: '#676e73',
         iconScale: 1,
         iconSize: 16,
@@ -2114,6 +2314,111 @@ module.exports = {
         listGutter: 16
       }
     },
+    ListBox: {
+      appearances: {
+        current: {
+          description: 'When the current item is selected',
+          type: 'state',
+          values: [ true ]
+        },
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        },
+        isChild: {
+          description: 'when the item is child of another child',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { pressed: true },
+          tokens: { groupBackgroundColor: '#e3e6e8', groupColor: '#4b286d' }
+        },
+        {
+          if: { hover: true },
+          tokens: { groupBackgroundColor: '#f4f4f7', groupColor: '#4b286d' }
+        },
+        {
+          if: { focus: true },
+          tokens: { groupBackgroundColor: '#f4f4f7', groupColor: '#4b286d' }
+        },
+        {
+          if: { expanded: true },
+          tokens: { groupIcon: PaletteIconCaretUp }
+        },
+        {
+          if: { current: true },
+          tokens: {
+            groupColor: '#4b286d',
+            groupFontName: 'HelveticaNow',
+            groupFontWeight: '700'
+          }
+        },
+        {
+          if: { isChild: true },
+          tokens: { itemBorderWidth: 4, itemPaddingLeft: 12 }
+        }
+      ],
+      tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+        groupBorderColor: '#4b286d',
+        groupBorderRadius: 6,
+        groupBorderWidth: 1,
+        groupColor: '#414547',
+        groupFontName: 'HelveticaNow',
+        groupFontSize: 14,
+        groupFontWeight: '400',
+        groupIcon: PaletteIconCaretDown,
+        groupPaddingBottom: 12,
+        groupPaddingLeft: 16,
+        groupPaddingRight: 16,
+        groupPaddingTop: 12,
+        itemBackgroundColor: 'rgba(0, 0, 0, 0)',
+        itemBorderBackgroundColor: '#e3e6e8',
+        itemBorderLeftColor: '#4b286d',
+        itemBorderLeftWidth: 4,
+        itemBorderWidth: 0,
+        itemColor: '#4b286d',
+        itemDisplay: false,
+        itemFontName: 'HelveticaNow',
+        itemFontSize: 14,
+        itemFontWeight: '700',
+        itemOutline: 0,
+        itemPaddingBottom: 12,
+        itemPaddingLeft: 16,
+        itemPaddingRight: 16,
+        itemPaddingTop: 12,
+        itemTextDecoration: 'none',
+        shadow: {
+          blur: 8,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 4,
+          spread: 0
+        }
+      }
+    },
     Modal: {
       appearances: {
         maxWidth: {
@@ -2691,6 +2996,50 @@ module.exports = {
         outlineWidth: 1
       }
     },
+    QuantitySelector: {
+      appearances: {
+        alternative: { type: 'variant', values: [ true ] },
+        disabled: { type: 'variant', values: [ true ] },
+        focus: { type: 'variant', values: [ true ] },
+        hover: { type: 'variant', values: [ true ] },
+        pressed: { type: 'variant', values: [ true ] }
+      },
+      rules: [
+        { if: { alternative: true }, tokens: { padding: 0 } },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            inputBackgroundColor: '#f4f4f7'
+          }
+        },
+        {
+          if: { disabled: true },
+          tokens: { backgroundColor: '#fafafa', iconColor: '#e3e6e8' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#b2b9bf' }
+        },
+        {
+          if: { focus: true },
+          tokens: { inputBorderColor: '#676e73', inputBorderWidth: 3 }
+        }
+      ],
+      tokens: {
+        backgroundColor: null,
+        borderColor: '#676e73',
+        iconColor: '#676e73',
+        iconSize: 16,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderWidth: 1,
+        leftIcon: PaletteIconSubtract,
+        padding: 16,
+        rightIcon: PaletteIconAdd,
+        textColor: '#b2b9bf'
+      }
+    },
     QuickLinks: {
       appearances: {
         viewport: {
@@ -3100,7 +3449,7 @@ module.exports = {
         color: '#2c2e30',
         contentAlignItems: 'stretch',
         contentFlexGrow: 0,
-        contentFlexShrink: 0,
+        contentFlexShrink: 1,
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
@@ -3594,6 +3943,62 @@ module.exports = {
         thickness: 4
       }
     },
+    SplashButton: {
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: { buttonContentChildrenBackground: 'rgba(0, 0, 0, 0.8)' }
+        }
+      ],
+      tokens: {
+        buttonContentBackground: 'rgba(0, 0, 0, 0.6)',
+        buttonContentChildrenBackground: null,
+        playIcon: PaletteIconPlaySolid,
+        playIconColor: '#ffffff'
+      }
+    },
+    SplashButtonWithDetails: {
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            buttonContentChildrenBackground: 'rgba(255, 255, 255, 0.8)'
+          }
+        }
+      ],
+      tokens: {
+        buttonBackground: '#ffffff',
+        buttonBorderColor: '#e3e6e8',
+        buttonBottomPosition: 24,
+        buttonContentBackground: 'rgba(0, 0, 0, 0.6)',
+        buttonContentChildrenBackground: null,
+        buttonLeftPosition: 24,
+        buttonMinHeight: 64,
+        buttonPaddingLeft: 16,
+        buttonPaddingRight: 16,
+        buttonRadius: 32,
+        detailsContainerPadding: 8,
+        playIcon: PaletteIconPlaySolid,
+        playIconColor: '#ffffff',
+        playIconContainerBackground: '#2b8000'
+      }
+    },
     StackView: {
       appearances: {},
       rules: [],
@@ -3685,6 +4090,62 @@ module.exports = {
         showStepTrackerLabel: true
       }
     },
+    StoryCard: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn' ],
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#e3e6e8',
+        borderRadius: 6,
+        borderWidth: 1,
+        contentAlignItems: 'stretch',
+        contentFlexGrow: 0,
+        contentFlexShrink: 0,
+        contentJustifyContent: 'flex-start',
+        flex: 1,
+        minWidth: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        shadow: null
+      }
+    },
     Table: {
       appearances: { spacing: { type: 'variant', values: [ 'compact' ] } },
       rules: [
@@ -3994,6 +4455,74 @@ module.exports = {
         width: null
       }
     },
+    TermsAndConditions: {
+      appearances: {
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { expanded: true },
+          tokens: { icon: PaletteIconCaretUp }
+        }
+      ],
+      tokens: {
+        contentPaddingBottom: 8,
+        contentPaddingLeft: 16,
+        expandBaseBorderWidth: 0,
+        expandContentPaddingBottom: 16,
+        expandContentPaddingLeft: 16,
+        expandContentPaddingRight: 16,
+        expandContentPaddingTop: 16,
+        expandIconContainerAlignItems: 'center',
+        expandIconContainerBorder: 1,
+        expandIconContainerBorderColor: '#676e73',
+        expandIconContainerHeight: 32,
+        expandIconContainerJustifyContent: 'center',
+        expandIconContainerMarginX: 0,
+        expandIconContainerMarginY: 12,
+        expandIconContainerWidth: 32,
+        expandTitleColor: '#2c2e30',
+        expandTitleFontSize: 16,
+        expandTitleLineHeight: 1.5,
+        expandTitleMarginX: 4,
+        expandTitleMarginY: 0,
+        icon: PaletteIconCaretDown,
+        listColor: '#414547',
+        listFontName: 'HelveticaNow',
+        listFontSize: 14,
+        listFontWeight: '400',
+        listLineHeight: 1.42857142857,
+        listMarginBottom: 16,
+        listMarginLeft: 32,
+        mdContentPaddingBottom: 16,
+        mdContentPaddingLeft: 48,
+        orderedPadding: 0,
+        titleColor: '#414547',
+        titleFontSize: 14,
+        titleLineHeight: 1.42857142857,
+        titlePaddingLeft: 8,
+        unorderedPadding: 0
+      }
+    },
+    Testimonial: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        dividerBackgroundColor: '#b2b9bf',
+        dividerBorder: 1,
+        figcaptionGap: 12,
+        icon: PaletteIconQuoteLeft,
+        iconColor: '#b2b9bf',
+        imageSize: 48,
+        quoteContainerGap: 4,
+        testimonialContainerGap: 12,
+        textColor: '#414547'
+      }
+    },
     TextArea: {
       appearances: {},
       rules: [],
@@ -4280,7 +4809,7 @@ module.exports = {
         switchColor: '#ffffff',
         switchShadow: {
           blur: 2,
-          color: 'rgba(0, 0, 0, 0.1)',
+          color: 'rgba(0, 0, 0, 0.2)',
           inset: false,
           offsetX: 0,
           offsetY: 2,
@@ -4688,6 +5217,91 @@ module.exports = {
         textTransform: 'none'
       }
     },
+    Video: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderColor: '#b2b9bf',
+        pauseIcon: PaletteIconPause,
+        playIcon: PaletteIconPlaySolid,
+        replayIcon: PaletteIconReplay
+      }
+    },
+    VideoButton: { appearances: {}, rules: [], tokens: { color: '#ffffff' } },
+    VideoControlBar: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        captionsIcon: PaletteIconClosedCaptions,
+        maximizeIcon: PaletteIconFullscreenExpand,
+        menuBottom: 64,
+        menuMarginLeft: 16,
+        menuRight: 32,
+        minimizeIcon: PaletteIconFullscreenMinimize,
+        paddingBottom: 16,
+        paddingLeft: 48,
+        paddingLeftCompactMode: 16,
+        paddingRight: 48,
+        paddingRightCompactMode: 16,
+        paddingTop: 16,
+        settingsIcon: PaletteIconSettingsSolid
+      }
+    },
+    VideoMenu: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        background: '#2c2e30',
+        checkMarkFocusColor: '#676e73',
+        checkMarkHeight: 24,
+        checkMarkHoverColor: '#676e73',
+        checkMarkIcon: PaletteIconCheckmark,
+        checkMarkSelectedColor: '#ffffff',
+        checkMarkUnselectedColor: 'rgba(0, 0, 0, 0)',
+        checkMarkWidth: 24,
+        padding: 16
+      }
+    },
+    VideoMiddleControlButton: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        background: '#2c2e30',
+        height: 64,
+        iconColor: '#ffffff',
+        width: 64
+      }
+    },
+    VideoProgressBar: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        rangeBackground: 'rgba(0, 0, 0, 0)',
+        thumbBackground: '#ffffff',
+        thumbHeight: 8,
+        thumbWidth: 8,
+        timestampMarginLeft: 8,
+        timestampMarginRight: 8,
+        trackGradientEnd: '#66cc00',
+        trackGradientStart: '#66cc00'
+      }
+    },
+    VideoVolumeSlider: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        marginLeft: 16,
+        marginRight: 16,
+        mutedIcon: PaletteIconMuted,
+        rangeBackground: 'rgba(0, 0, 0, 0)',
+        thumbBackground: '#ffffff',
+        thumbHeight: 8,
+        thumbWidth: 8,
+        trackGradientEnd: '#ffffff',
+        trackGradientStart: '#ffffff',
+        unmutedIcon: PaletteIconUnmuted
+      }
+    },
     WaffleGrid: {
       appearances: {},
       rules: [],
@@ -4757,5 +5371,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.21.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.23.0' }
 }