@telus-uds/theme-koodo 4.5.0 → 4.6.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 20 Jun 2023 15:59:39 GMT
+ * Generated on Wed, 21 Jun 2023 20:31:39 GMT
  *
  */
 
@@ -21,12 +21,20 @@ const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times'
 const PaletteIconExclamationTriangle = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle')
 const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
 const PaletteIconExclamationOctagon = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon')
+const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
 const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
 const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeMasked')
 const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
 const PaletteIconInfo = require('@telus-uds/palette-koodo/build/rn/icons/Info')
-const PaletteIconSettings = require('@telus-uds/palette-koodo/build/rn/icons/Settings')
+const PaletteIconPause = require('@telus-uds/palette-koodo/build/rn/icons/Pause')
+const PaletteIconReplay = require('@telus-uds/palette-koodo/build/rn/icons/Replay')
+const PaletteIconClosedCaptions = require('@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions')
+const PaletteIconFullscreenExpand = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenExpand')
+const PaletteIconFullscreenMinimize = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenMinimize')
+const PaletteIconSettingsSolid = require('@telus-uds/palette-koodo/build/rn/icons/SettingsSolid')
 const PaletteIconArrowRight = require('@telus-uds/palette-koodo/build/rn/icons/ArrowRight')
+const PaletteIconMuted = require('@telus-uds/palette-koodo/build/rn/icons/Muted')
+const PaletteIconUnmuted = require('@telus-uds/palette-koodo/build/rn/icons/Unmuted')
 
 module.exports = {
   components: {
@@ -293,13 +301,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -314,7 +322,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         priority: {
           description: 'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
@@ -677,13 +685,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -698,7 +706,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -848,13 +856,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         iconPosition: {
           description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
@@ -869,7 +877,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -1076,13 +1084,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -1092,7 +1100,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -1180,13 +1188,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -1249,19 +1257,19 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inverse: { type: 'variant', 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 ]
+          values: [ true, false ]
         },
         size: {
           description: 'Sets the size of the text and icon; these variants are shared with ChevronLink',
@@ -1772,18 +1780,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -1886,13 +1894,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -1912,7 +1920,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         raised: {
           description: 'Uses shadow and background colour to appear raised above the page',
@@ -2186,13 +2194,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         iconPosition: {
           description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
@@ -2203,7 +2211,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         size: {
           description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
@@ -2377,12 +2385,12 @@ module.exports = {
         listGutter: 10
       }
     },
-    ListBox: {
+    Listbox: {
       appearances: {
         current: {
           description: 'When the current item is selected',
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         },
         expanded: {
           description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
@@ -2393,85 +2401,184 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         isChild: {
           description: 'when the item is child of another child',
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
         {
-          if: { pressed: true },
-          tokens: { groupBackgroundColor: '#bbeaf5', groupColor: '#016b6a' }
+          if: { focus: true, hover: true, pressed: true },
+          tokens: {
+            groupBackgroundColor: '#b5b4b4',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupBorderWidth: 0,
+            groupColor: '#595959',
+            itemBackgroundColor: '#b5b4b4',
+            itemColor: '#595959'
+          }
         },
         {
-          if: { hover: true },
-          tokens: { groupBackgroundColor: '#c9c8c8', groupColor: '#016b6a' }
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: '#c9c8c8',
+            groupBorderColor: '#c9c8c8',
+            itemBackgroundColor: '#c9c8c8'
+          }
         },
         {
-          if: { focus: true },
-          tokens: { groupBackgroundColor: '#c9c8c8', groupColor: '#016b6a' }
+          if: { focus: true, pressed: false },
+          tokens: {
+            groupBorderColor: '#016b6a',
+            groupColor: '#016b6a',
+            itemBorderBottomColor: '#016b6a',
+            itemBorderLeftColor: '#016b6a',
+            itemBorderRightColor: '#016b6a',
+            itemBorderTopColor: '#016b6a',
+            itemColor: '#016b6a'
+          }
         },
         {
           if: { current: true },
           tokens: {
-            groupColor: '#016b6a',
-            groupFontName: 'StagSans',
-            groupFontWeight: '700'
+            groupBackgroundColor: '#016b6a',
+            groupBorderColor: '#016b6a',
+            groupColor: '#ffffff',
+            itemBackgroundColor: '#016b6a',
+            itemColor: '#ffffff'
           }
         },
+        {
+          if: { current: true, pressed: true },
+          tokens: { itemBackgroundColor: '#b5b4b4', itemColor: '#595959' }
+        },
         {
           if: { isChild: true },
-          tokens: { itemBorderWidth: 4, itemPaddingLeft: 12 }
+          tokens: {
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#000000',
+            itemBorderLeftWidth: 4,
+            itemBorderTopWidth: 0
+          }
+        },
+        {
+          if: { focus: true, isChild: true },
+          tokens: {
+            itemBorderBottomColor: '#016b6a',
+            itemBorderBottomWidth: 1,
+            itemBorderLeftColor: '#016b6a',
+            itemBorderRightColor: '#016b6a',
+            itemBorderRightWidth: 1,
+            itemBorderTopColor: '#016b6a',
+            itemBorderTopWidth: 1
+          }
+        },
+        {
+          if: { current: true, isChild: true },
+          tokens: { itemBorderLeftColor: '#016b6a' }
+        },
+        {
+          if: { isChild: true, pressed: true },
+          tokens: {
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#595959',
+            itemBorderTopWidth: 0,
+            itemColor: '#595959'
+          }
         },
         {
           if: { expanded: true },
           tokens: { groupIcon: PaletteIconChevronUp }
+        },
+        {
+          if: { current: true, expanded: true, focus: true },
+          tokens: {
+            groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#016b6a'
+          }
+        },
+        {
+          if: { current: true, hover: true },
+          tokens: {
+            itemBackgroundColor: '#1b4746',
+            itemBorderLeftColor: '#1b4746',
+            itemColor: '#ffffff'
+          }
+        },
+        {
+          if: { current: true, expanded: true, hover: true },
+          tokens: { groupBackgroundColor: '#1b4746', groupColor: '#ffffff' }
+        },
+        {
+          if: {
+            current: true,
+            expanded: true,
+            focus: true,
+            hover: true,
+            pressed: true
+          },
+          tokens: {
+            groupBackgroundColor: '#b5b4b4',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#595959'
+          }
         }
       ],
       tokens: {
         groupBackgroundColor: 'rgba(0, 0, 0, 0)',
-        groupBorderColor: '#016b6a',
-        groupBorderRadius: 6,
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        groupBorderRadius: 0,
         groupBorderWidth: 1,
-        groupColor: '#e5f7fb',
+        groupColor: '#000000',
         groupFontName: 'StagSans',
-        groupFontSize: 14,
+        groupFontSize: 16,
         groupFontWeight: '400',
+        groupHeight: 32,
         groupIcon: PaletteIconChevronDown,
         groupPaddingBottom: 12,
         groupPaddingLeft: 16,
         groupPaddingRight: 16,
         groupPaddingTop: 12,
         itemBackgroundColor: 'rgba(0, 0, 0, 0)',
-        itemBorderBackgroundColor: '#bbeaf5',
-        itemBorderLeftColor: '#016b6a',
-        itemBorderLeftWidth: 4,
+        itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
+        itemBorderLeftWidth: 1,
+        itemBorderRadius: 0,
+        itemBorderRightColor: 'rgba(0, 0, 0, 0)',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: 'rgba(0, 0, 0, 0)',
+        itemBorderTopWidth: 1,
         itemBorderWidth: 0,
-        itemColor: '#016b6a',
+        itemColor: '#000000',
         itemDisplay: false,
         itemFontName: 'StagSans',
-        itemFontSize: 14,
-        itemFontWeight: '700',
+        itemFontSize: 16,
+        itemFontWeight: '400',
+        itemHeight: 32,
         itemOutline: 0,
         itemPaddingBottom: 12,
         itemPaddingLeft: 16,
         itemPaddingRight: 16,
         itemPaddingTop: 12,
         itemTextDecoration: 'none',
+        lineHeight: 1.5,
+        minHeight: '100%',
+        minWidth: '100%',
         shadow: {
           blur: 2,
           color: 'rgba(0, 0, 0, 0.1)',
@@ -2624,18 +2731,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -2907,18 +3014,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -2987,18 +3094,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -3085,19 +3192,19 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         pressed: {
           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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -3312,18 +3419,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -3403,18 +3510,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
@@ -3478,18 +3585,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -3538,13 +3645,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -3644,13 +3751,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -3660,7 +3767,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
@@ -3883,7 +3990,7 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -3940,13 +4047,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -3956,7 +4063,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         priority: { description: '', type: 'variant', values: [ 'high' ] }
       },
@@ -4046,7 +4153,7 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -4143,13 +4250,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         type: {
           description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
@@ -4303,14 +4410,14 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         }
       },
       rules: [],
       tokens: {
         buttonContentBackground: null,
         buttonContentChildrenBackground: null,
-        playIcon: PaletteIconPlayVideo,
+        playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff'
       }
     },
@@ -4320,7 +4427,7 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -4341,9 +4448,11 @@ module.exports = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
-        playIcon: PaletteIconPlayVideo,
+        labelFontName: 'StagSans',
+        labelFontWeight: '600',
+        playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
-        playIconContainerBackground: null
+        playIconContainerBackground: '#016b6a'
       }
     },
     StackView: {
@@ -4450,18 +4559,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -4560,24 +4669,24 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inverse: { type: 'variant', 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 ]
+          values: [ true, false ]
         },
         selected: {
           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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -4698,13 +4807,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -4714,7 +4823,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -4924,7 +5033,7 @@ module.exports = {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
-          values: [ true ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -5025,7 +5134,7 @@ module.exports = {
         {
           if: { horizontal: true, viewport: [ 'lg', 'xl' ] },
           tokens: {
-            connectorHeight: 2,
+            connectorHeight: 1,
             connectorWidth: '100%',
             itemContentMarginBottom: 0,
             itemContentMarginRight: 32,
@@ -5039,10 +5148,10 @@ module.exports = {
       ],
       tokens: {
         connectorHeight: '100%',
-        connectorWidth: 2,
-        dotBorderWidth: 3,
+        connectorWidth: 1,
+        dotBorderWidth: 2,
         dotColor: '#ffffff',
-        dotWidth: 16,
+        dotWidth: 12,
         itemContentFlexSize: 1,
         itemContentMarginBottom: 32,
         itemContentMarginRight: 0,
@@ -5053,6 +5162,7 @@ module.exports = {
         lineItemMarginBottom: 0,
         lineItemMarginRight: 24,
         timelineColor: '#016b6a',
+        timelineConnectorColor: '#000000',
         timelineContainerDirection: 'column'
       }
     },
@@ -5098,13 +5208,13 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         inactive: {
           description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
@@ -5114,7 +5224,7 @@ module.exports = {
         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 ]
+          values: [ true, false ]
         },
         selected: {
           description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
@@ -5288,18 +5398,18 @@ module.exports = {
           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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         },
         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 ]
+          values: [ true, false ]
         }
       },
       rules: [
@@ -5557,29 +5667,45 @@ module.exports = {
       rules: [],
       tokens: {
         borderColor: '#000000',
-        pauseIcon: PaletteIconAdd,
-        playIcon: PaletteIconAdd,
-        replayIcon: PaletteIconAdd
+        pauseIcon: PaletteIconPause,
+        playIcon: PaletteIconPlaySolid,
+        replayIcon: PaletteIconReplay
       }
     },
     VideoButton: { appearances: {}, rules: [], tokens: { color: '#ffffff' } },
     VideoControlBar: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        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', 'sm' ] },
+          tokens: {
+            height: 40,
+            paddingBottom: 8,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 8
+          }
+        }
+      ],
       tokens: {
-        captionsIcon: PaletteIconAdd,
-        maximizeIcon: PaletteIconAdd,
+        captionsIcon: PaletteIconClosedCaptions,
+        height: 56,
+        maximizeIcon: PaletteIconFullscreenExpand,
         menuBottom: 64,
         menuMarginLeft: 16,
         menuRight: 32,
-        minimizeIcon: PaletteIconAdd,
+        minimizeIcon: PaletteIconFullscreenMinimize,
         paddingBottom: 16,
         paddingLeft: 48,
-        paddingLeftCompactMode: 16,
         paddingRight: 48,
-        paddingRightCompactMode: 16,
         paddingTop: 16,
-        settingsIcon: PaletteIconSettings
+        settingsIcon: PaletteIconSettingsSolid
       }
     },
     VideoMenu: {
@@ -5655,8 +5781,8 @@ module.exports = {
         thumbWidth: 8,
         timestampMarginLeft: 8,
         timestampMarginRight: 8,
-        trackGradientEnd: '#016b6a',
-        trackGradientStart: '#016b6a'
+        trackGradientEnd: '#39cdc9',
+        trackGradientStart: '#39cdc9'
       }
     },
     VideoVolumeSlider: {
@@ -5665,14 +5791,14 @@ module.exports = {
       tokens: {
         marginLeft: 16,
         marginRight: 16,
-        mutedIcon: PaletteIconAdd,
+        mutedIcon: PaletteIconMuted,
         rangeBackground: 'rgba(0, 0, 0, 0)',
         thumbBackground: '#ffffff',
         thumbHeight: 8,
         thumbWidth: 8,
         trackGradientEnd: '#ffffff',
         trackGradientStart: '#ffffff',
-        unmutedIcon: PaletteIconAdd
+        unmutedIcon: PaletteIconUnmuted
       }
     },
     WaffleGrid: {
@@ -5744,5 +5870,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.34.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.35.0' }
 }