@telus-uds/theme-allium 4.4.0 → 4.6.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 16 Jun 2023 21:04:21 GMT
+ * Generated on Wed, 21 Jun 2023 20:32:18 GMT
  *
  */
 
@@ -144,8 +144,24 @@ module.exports = {
       }
     },
     BlockQuote: {
-      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', 'md' ] },
+          tokens: {
+            titleHeadingFontName: 'HelveticaNow',
+            titleHeadingFontSize: 24,
+            titleHeadingFontWeight: '400',
+            titleHeadingLineHeight: 1.33333333333
+          }
+        }
+      ],
       tokens: {
         backgroundGradient: {
           angle: 135,
@@ -156,11 +172,23 @@ module.exports = {
           type: 'linear'
         },
         color: '#414547',
+        linkFontName: 'HelveticaNow',
+        linkFontSize: 16,
+        linkFontWeight: '700',
+        linkLineHeight: 1.5,
         marginBottom: 16,
         paddingBottom: 16,
         paddingLeft: 32,
         paddingRight: 32,
         paddingTop: 16,
+        titleFontName: 'HelveticaNow',
+        titleFontSize: 20,
+        titleFontWeight: '400',
+        titleHeadingFontName: 'HelveticaNow',
+        titleHeadingFontSize: 28,
+        titleHeadingFontWeight: '400',
+        titleHeadingLineHeight: 1.28571428571,
+        titleLineHeight: 1.6,
         width: 2
       }
     },
@@ -404,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.',
@@ -425,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.',
@@ -463,6 +491,7 @@ module.exports = {
           if: { priority: 'high' },
           tokens: {
             backgroundColor: '#2b8000',
+            borderColor: 'rgba(0, 0, 0, 0)',
             borderWidth: 0,
             color: '#ffffff'
           }
@@ -471,7 +500,7 @@ module.exports = {
           if: { pressed: true },
           tokens: {
             backgroundColor: '#163e06',
-            borderWidth: 0,
+            borderColor: 'rgba(0, 0, 0, 0)',
             color: '#ffffff'
           }
         },
@@ -507,6 +536,7 @@ module.exports = {
           if: { inverse: true, pressed: true },
           tokens: {
             backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            borderColor: 'rgba(0, 0, 0, 0)',
             color: '#414547'
           }
         },
@@ -528,7 +558,11 @@ module.exports = {
         },
         {
           if: { danger: true, pressed: true, priority: null },
-          tokens: { backgroundColor: '#c12335', color: '#ffffff' }
+          tokens: {
+            backgroundColor: '#c12335',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#ffffff'
+          }
         },
         {
           if: { danger: true, focus: true, pressed: true, priority: null },
@@ -707,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.',
@@ -728,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`.',
@@ -859,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',
@@ -880,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`.',
@@ -1149,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.',
@@ -1166,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`.',
@@ -1295,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.',
@@ -1376,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',
@@ -1546,6 +1580,9 @@ module.exports = {
         calendarDayDefaultFontName: 'HelveticaNow',
         calendarDayDefaultFontSize: 14,
         calendarDayDefaultFontWeight: '400',
+        calendarDaySelectedDisabledBackground: '#fafafa',
+        calendarDaySelectedDisabledColor: '#ffffff',
+        calendarDaySelectedDisabledContentBackgroundColor: '#b2b9bf',
         calendarDaySelectedFocusBeforeBackground: '#ffffff',
         calendarDaySelectedHoverBackground: '#ffffff',
         calendarDaySelectedHoverBeforeBackground: '#ffffff',
@@ -1858,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: [
@@ -1966,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.',
@@ -1992,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',
@@ -2268,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',
@@ -2294,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.',
@@ -2466,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',
@@ -2482,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 },
@@ -2523,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)',
@@ -2766,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`.',
@@ -3047,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`.',
@@ -3136,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`.',
@@ -3241,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: [
@@ -3507,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: [
@@ -3594,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',
@@ -3665,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: [
@@ -3725,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.',
@@ -3812,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.',
@@ -3828,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',
@@ -4057,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.',
@@ -4118,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.',
@@ -4134,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' ] }
       },
@@ -4210,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.',
@@ -4307,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',
@@ -4480,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: [
@@ -4502,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: [
@@ -4525,6 +4645,8 @@ module.exports = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
+        labelFontName: 'HelveticaNow',
+        labelFontWeight: '700',
         playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
         playIconContainerBackground: '#2b8000'
@@ -4633,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: [
@@ -4746,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: [
@@ -4877,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.',
@@ -4893,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`.',
@@ -5081,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.',
@@ -5199,7 +5321,7 @@ module.exports = {
         connectorWidth: 1,
         dotBorderWidth: 1,
         dotColor: '#ffffff',
-        dotWidth: 16,
+        dotWidth: 14,
         itemContentFlexSize: 1,
         itemContentMarginBottom: 32,
         itemContentMarginRight: 0,
@@ -5210,6 +5332,7 @@ module.exports = {
         lineItemMarginBottom: 0,
         lineItemMarginRight: 24,
         timelineColor: '#676e73',
+        timelineConnectorColor: '#676e73',
         timelineContainerDirection: 'column'
       }
     },
@@ -5255,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.',
@@ -5271,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`.',
@@ -5444,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: [
@@ -5823,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,
@@ -5834,9 +5975,7 @@ module.exports = {
         minimizeIcon: PaletteIconFullscreenMinimize,
         paddingBottom: 16,
         paddingLeft: 48,
-        paddingLeftCompactMode: 16,
         paddingRight: 48,
-        paddingRightCompactMode: 16,
         paddingTop: 16,
         settingsIcon: PaletteIconSettingsSolid
       }
@@ -6003,5 +6142,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.33.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.35.0' }
 }