@telus-uds/theme-allium 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 16:00:14 GMT
+ * Generated on Wed, 21 Jun 2023 20:32:18 GMT
  *
  */
 
@@ -432,13 +432,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.',
@@ -453,7 +453,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.',
@@ -741,13 +741,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.',
@@ -762,7 +762,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`.',
@@ -893,13 +893,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',
@@ -914,7 +914,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`.',
@@ -1183,13 +1183,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.',
@@ -1200,7 +1200,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`.',
@@ -1329,13 +1329,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.',
@@ -1410,13 +1410,13 @@ 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 ]
         },
         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',
@@ -1895,18 +1895,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: [
@@ -2003,13 +2003,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.',
@@ -2029,7 +2029,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',
@@ -2305,13 +2305,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',
@@ -2331,7 +2331,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.',
@@ -2503,12 +2503,12 @@ module.exports = {
         listGutter: 16
       }
     },
-    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',
@@ -2519,37 +2519,57 @@ 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: '#e3e6e8', groupColor: '#4b286d' }
+          if: { focus: true, hover: true, pressed: true },
+          tokens: {
+            groupBackgroundColor: '#e3e6e8',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#676e73',
+            itemBackgroundColor: '#e3e6e8',
+            itemColor: '#676e73'
+          }
         },
         {
-          if: { hover: true },
-          tokens: { groupBackgroundColor: '#f4f4f7', groupColor: '#4b286d' }
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: '#f4f4f7',
+            groupColor: '#4b286d',
+            itemBackgroundColor: '#f4f4f7',
+            itemColor: '#4b286d'
+          }
         },
         {
-          if: { focus: true },
-          tokens: { groupBackgroundColor: '#f4f4f7', groupColor: '#4b286d' }
+          if: { focus: true, pressed: false },
+          tokens: {
+            groupBorderColor: '#4b286d',
+            groupBorderWidth: 1,
+            groupColor: '#4b286d',
+            itemBorderBottomColor: '#4b286d',
+            itemBorderLeftColor: '#4b286d',
+            itemBorderRightColor: '#4b286d',
+            itemBorderTopColor: '#4b286d',
+            itemColor: '#4b286d'
+          }
         },
         {
           if: { expanded: true },
@@ -2560,44 +2580,107 @@ module.exports = {
           tokens: {
             groupColor: '#4b286d',
             groupFontName: 'HelveticaNow',
+            groupFontWeight: '700',
+            itemColor: '#4b286d',
+            itemPaddingBottom: 12,
+            itemPaddingLeft: 16,
+            itemPaddingRight: 16,
+            itemPaddingTop: 12
+          }
+        },
+        {
+          if: { current: true, pressed: true },
+          tokens: {
+            groupBackgroundColor: '#e3e6e8',
+            groupBorderWidth: 0,
+            groupColor: '#676e73',
+            groupFontName: 'HelveticaNow',
             groupFontWeight: '700'
           }
         },
         {
           if: { isChild: true },
-          tokens: { itemBorderWidth: 4, itemPaddingLeft: 12 }
+          tokens: {
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#e3e6e8',
+            itemBorderLeftWidth: 4,
+            itemBorderTopWidth: 0
+          }
+        },
+        {
+          if: { focus: true, isChild: true },
+          tokens: {
+            itemBorderBottomColor: '#4b286d',
+            itemBorderBottomWidth: 1,
+            itemBorderLeftColor: '#4b286d',
+            itemBorderRightColor: '#4b286d',
+            itemBorderRightWidth: 1,
+            itemBorderTopColor: '#4b286d',
+            itemBorderTopWidth: 1
+          }
+        },
+        {
+          if: { hover: true, isChild: true },
+          tokens: { itemBorderLeftColor: '#4b286d' }
+        },
+        {
+          if: { current: true, isChild: true },
+          tokens: { itemBorderLeftColor: '#4b286d' }
+        },
+        {
+          if: { current: true, pressed: true },
+          tokens: { itemColor: '#676e73' }
+        },
+        {
+          if: { isChild: true, pressed: true },
+          tokens: {
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#676e73',
+            itemBorderTopWidth: 0
+          }
         }
       ],
       tokens: {
         groupBackgroundColor: 'rgba(0, 0, 0, 0)',
-        groupBorderColor: '#4b286d',
-        groupBorderRadius: 6,
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        groupBorderRadius: 0,
         groupBorderWidth: 1,
         groupColor: '#414547',
         groupFontName: 'HelveticaNow',
         groupFontSize: 14,
         groupFontWeight: '400',
+        groupHeight: 40,
         groupIcon: PaletteIconCaretDown,
         groupPaddingBottom: 12,
         groupPaddingLeft: 16,
         groupPaddingRight: 16,
         groupPaddingTop: 12,
         itemBackgroundColor: 'rgba(0, 0, 0, 0)',
-        itemBorderBackgroundColor: '#e3e6e8',
-        itemBorderLeftColor: '#4b286d',
-        itemBorderLeftWidth: 4,
-        itemBorderWidth: 0,
-        itemColor: '#4b286d',
+        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: 1,
+        itemColor: '#414547',
         itemDisplay: false,
         itemFontName: 'HelveticaNow',
         itemFontSize: 14,
         itemFontWeight: '700',
+        itemHeight: 40,
         itemOutline: 0,
         itemPaddingBottom: 12,
         itemPaddingLeft: 16,
         itemPaddingRight: 16,
         itemPaddingTop: 12,
         itemTextDecoration: 'none',
+        lineHeight: 1.14285714286,
+        minHeight: '100%',
+        minWidth: 288,
         shadow: {
           blur: 8,
           color: 'rgba(0, 0, 0, 0.1)',
@@ -2803,18 +2886,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`.',
@@ -3084,18 +3167,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`.',
@@ -3173,18 +3256,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`.',
@@ -3278,19 +3361,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: [
@@ -3544,18 +3627,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: [
@@ -3631,18 +3714,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',
@@ -3702,18 +3785,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: [
@@ -3762,13 +3845,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.',
@@ -3849,13 +3932,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.',
@@ -3865,7 +3948,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',
@@ -4094,7 +4177,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.',
@@ -4155,13 +4238,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.',
@@ -4171,7 +4254,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' ] }
       },
@@ -4247,7 +4330,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.',
@@ -4344,13 +4427,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',
@@ -4517,7 +4600,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: [
@@ -4539,7 +4622,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: [
@@ -4562,6 +4645,8 @@ module.exports = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
+        labelFontName: 'HelveticaNow',
+        labelFontWeight: '700',
         playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
         playIconContainerBackground: '#2b8000'
@@ -4670,18 +4755,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: [
@@ -4783,23 +4868,23 @@ module.exports = {
         focus: {
           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 ]
         },
         hover: {
           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 ]
         },
         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: [
@@ -4914,13 +4999,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.',
@@ -4930,7 +5015,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`.',
@@ -5118,7 +5203,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.',
@@ -5236,7 +5321,7 @@ module.exports = {
         connectorWidth: 1,
         dotBorderWidth: 1,
         dotColor: '#ffffff',
-        dotWidth: 16,
+        dotWidth: 14,
         itemContentFlexSize: 1,
         itemContentMarginBottom: 32,
         itemContentMarginRight: 0,
@@ -5247,6 +5332,7 @@ module.exports = {
         lineItemMarginBottom: 0,
         lineItemMarginRight: 24,
         timelineColor: '#676e73',
+        timelineConnectorColor: '#676e73',
         timelineContainerDirection: 'column'
       }
     },
@@ -5292,13 +5378,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.',
@@ -5308,7 +5394,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`.',
@@ -5481,19 +5567,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 ]
         }
       },
       rules: [
@@ -5860,10 +5946,28 @@ module.exports = {
     },
     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: PaletteIconClosedCaptions,
+        height: 56,
         maximizeIcon: PaletteIconFullscreenExpand,
         menuBottom: 64,
         menuMarginLeft: 16,
@@ -5871,9 +5975,7 @@ module.exports = {
         minimizeIcon: PaletteIconFullscreenMinimize,
         paddingBottom: 16,
         paddingLeft: 48,
-        paddingLeftCompactMode: 16,
         paddingRight: 48,
-        paddingRightCompactMode: 16,
         paddingTop: 16,
         settingsIcon: PaletteIconSettingsSolid
       }
@@ -6040,5 +6142,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.34.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.35.0' }
 }