@telus-uds/theme-koodo 4.5.0 → 4.7.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, 28 Jun 2023 23:15:25 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`.',
@@ -971,7 +979,10 @@ module.exports = {
           type: 'variant',
           values: [ 'alternative', 'subtle', 'grid', 'feature' ]
         },
-        padding: { type: 'variant', values: [ 'custom' ] },
+        padding: {
+          type: 'variant',
+          values: [ 'narrow', 'intermediate', 'compact', 'custom' ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -981,19 +992,27 @@ module.exports = {
       rules: [
         {
           if: { background: 'alternative' },
-          tokens: { backgroundColor: '#e5f7fb' }
+          tokens: {
+            backgroundColor: '#e5f7fb',
+            borderRadius: 0,
+            borderWidth: 0
+          }
         },
         {
           if: { background: 'subtle' },
-          tokens: { backgroundColor: '#fae6f4', borderRadius: 8 }
+          tokens: { backgroundColor: '#fae6f4', borderWidth: 0 }
         },
         {
           if: { background: 'grid' },
-          tokens: { borderColor: '#016b6a', borderRadius: 8, borderWidth: 1 }
+          tokens: { borderColor: '#016b6a', borderWidth: 1 }
         },
         {
           if: { background: 'feature' },
-          tokens: { backgroundColor: '#f9f6a5' }
+          tokens: {
+            backgroundColor: '#f9f6a5',
+            borderRadius: 0,
+            borderWidth: 0
+          }
         },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
@@ -1004,6 +1023,51 @@ module.exports = {
             paddingTop: 48
           }
         },
+        {
+          if: { padding: 'narrow' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'narrow', viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'intermediate' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 24,
+            paddingRight: 24,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'intermediate', viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'compact' },
+          tokens: {
+            paddingBottom: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 16
+          }
+        },
         {
           if: { padding: 'custom' },
           tokens: {
@@ -1024,6 +1088,7 @@ module.exports = {
         contentFlexShrink: 1,
         contentJustifyContent: 'flex-start',
         flex: 1,
+        gradient: null,
         minWidth: null,
         paddingBottom: 32,
         paddingLeft: 24,
@@ -1076,13 +1141,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 +1157,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 +1245,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 +1314,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',
@@ -1536,7 +1601,6 @@ module.exports = {
         {
           if: { mini: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0)',
             borderColor: 'rgba(0, 0, 0, 0)',
             borderWidth: 0,
             icon: PaletteIconChevronDown,
@@ -1584,34 +1648,65 @@ module.exports = {
     ExpandCollapseMini: { appearances: {}, rules: [], tokens: { borderWidth: 0 } },
     ExpandCollapseMiniControl: {
       appearances: {
+        alternative: {
+          description: 'Replaces the default green colour with black',
+          type: 'variant',
+          values: [ true ]
+        },
         expanded: {
           description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
           type: 'state',
           values: [ true ]
-        }
+        },
+        inverse: {
+          description: 'Replaces the default green colour with white. Useful for dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: { type: 'variant', values: [ 'micro', 'small', 'large' ] }
       },
       rules: [
         {
           if: { expanded: true },
           tokens: { icon: PaletteIconChevronUp }
+        },
+        { if: { alternative: true }, tokens: { color: '#000000' } },
+        {
+          if: { inverse: true },
+          tokens: { color: '#ffffff', iconColor: '#ffffff' }
+        },
+        {
+          if: { size: 'micro' },
+          tokens: { fontSize: 12, iconSize: 16, lineHeight: 1.33333333333 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { fontSize: 14, iconSize: 20, lineHeight: 1.45 }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { fontSize: 20, lineHeight: 1.45 }
         }
       ],
       tokens: {
-        backgroundColor: null,
         borderColor: 'rgba(0, 0, 0, 0)',
         borderWidth: 0,
+        color: '#016b6a',
+        fontSize: 16,
         icon: PaletteIconChevronDown,
         iconColor: '#000000',
         iconGap: 8,
         iconPaddingTop: 4,
         iconPosition: 'left',
-        iconSize: 16,
+        iconSize: 24,
         justifyContent: 'flex-start',
+        lineHeight: 1.45,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
         paddingTop: 0,
         size: 4,
+        textLine: 'none',
         verticalAlign: 'middle'
       }
     },
@@ -1772,18 +1867,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 +1981,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 +2007,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 +2281,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 +2298,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 +2472,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 +2488,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 +2818,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 +3101,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 +3181,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 +3279,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 +3506,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 +3597,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 +3672,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 +3732,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 +3838,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 +3854,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 +4077,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 +4134,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 +4150,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 +4240,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 +4337,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 +4497,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 +4514,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 +4535,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 +4646,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 +4756,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 +4894,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 +4910,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 +5120,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 +5221,7 @@ module.exports = {
         {
           if: { horizontal: true, viewport: [ 'lg', 'xl' ] },
           tokens: {
-            connectorHeight: 2,
+            connectorHeight: 1,
             connectorWidth: '100%',
             itemContentMarginBottom: 0,
             itemContentMarginRight: 32,
@@ -5039,10 +5235,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 +5249,7 @@ module.exports = {
         lineItemMarginBottom: 0,
         lineItemMarginRight: 24,
         timelineColor: '#016b6a',
+        timelineConnectorColor: '#000000',
         timelineContainerDirection: 'column'
       }
     },
@@ -5098,13 +5295,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 +5311,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`.',
@@ -5153,11 +5350,11 @@ module.exports = {
         },
         {
           if: { hover: true, selected: true },
-          tokens: { backgroundColor: '#bbeaf5' }
+          tokens: { backgroundColor: '#bbeaf5', switchColor: '#1b4746' }
         },
         {
           if: { pressed: true, selected: true },
-          tokens: { backgroundColor: '#c3efff' }
+          tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
         },
         {
           if: { focus: true, selected: true },
@@ -5200,17 +5397,19 @@ module.exports = {
         labelFontSize: 16,
         labelFontWeight: '600',
         labelLineHeight: 1.5,
-        labelMarginLeft: 8,
+        labelMarginLeft: 0,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 0,
+        outerBorderGapButton: 4,
         outerBorderWidth: 0,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
         paddingTop: 0,
         shadow: null,
+        space: 2,
         switchBorderColor: 'rgba(0, 0, 0, 0)',
         switchBorderRadius: 32,
         switchBorderWidth: 0,
@@ -5223,10 +5422,11 @@ module.exports = {
           offsetY: 2,
           spread: 0
         },
-        switchSize: 18,
+        switchSize: 24,
         trackBorderColor: 'rgba(0, 0, 0, 0)',
         trackBorderRadius: 12,
         trackBorderWidth: 3,
+        trackHeight: 20,
         width: 40
       }
     },
@@ -5288,18 +5488,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 +5757,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 +5871,8 @@ module.exports = {
         thumbWidth: 8,
         timestampMarginLeft: 8,
         timestampMarginRight: 8,
-        trackGradientEnd: '#016b6a',
-        trackGradientStart: '#016b6a'
+        trackGradientEnd: '#39cdc9',
+        trackGradientStart: '#39cdc9'
       }
     },
     VideoVolumeSlider: {
@@ -5665,14 +5881,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 +5960,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.34.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.36.0' }
 }