@telus-uds/theme-allium 4.23.0 → 4.23.1

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -461,6 +461,18 @@ const theme = {
           type: 'variant',
           values: [ true ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -499,6 +511,15 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomWidth: 3,
+            borderLeftWidth: 3,
+            borderRightWidth: 3,
+            borderTopWidth: 3
+          }
+        },
         {
           if: { priority: 'high' },
           tokens: {
@@ -516,6 +537,10 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000' }
+        },
         {
           if: { inverse: true },
           tokens: {
@@ -524,10 +549,22 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { hover: true, priority: 'high' },
+          tokens: { backgroundColor: '#1f5c09' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
         {
           if: { inverse: true, priority: 'high' },
           tokens: { backgroundColor: '#ffffff', color: '#414547' }
         },
+        {
+          if: { hover: true, inverse: true, priority: 'high' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.8)' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -536,6 +573,10 @@ const theme = {
             color: '#414547'
           }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff' }
+        },
         {
           if: { danger: true, priority: null },
           tokens: { borderColor: '#e12339', color: '#e12339' }
@@ -544,6 +585,10 @@ const theme = {
           if: { danger: true, inverse: true, priority: null },
           tokens: { backgroundColor: '#ffffff' }
         },
+        {
+          if: { danger: true, focus: true, priority: null },
+          tokens: { outerBorderColor: '#e12339' }
+        },
         {
           if: { danger: true, pressed: true, priority: null },
           tokens: {
@@ -552,6 +597,10 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { danger: true, focus: true, pressed: true, priority: null },
+          tokens: { outerBorderColor: '#c12335' }
+        },
         { if: { width: 'full' }, tokens: { width: '100%' } },
         {
           if: { viewport: [ 'xs' ], width: 'responsive' },
@@ -592,6 +641,10 @@ const theme = {
             textLine: 'underline'
           }
         },
+        {
+          if: { hover: true, text: true },
+          tokens: { textLine: 'none' }
+        },
         {
           if: { priority: 'high', text: true },
           tokens: { color: '#2b8000' }
@@ -600,6 +653,31 @@ const theme = {
           if: { priority: 'low', text: true },
           tokens: { color: '#414547' }
         },
+        {
+          if: { focus: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderRadius: 0,
+            color: '#2b8000',
+            outerBorderColor: '#2b8000'
+          }
+        },
+        {
+          if: { hover: true, priority: 'high', text: true },
+          tokens: { color: '#1f5c09' }
+        },
+        {
+          if: { hover: true, priority: null, text: true },
+          tokens: { color: '#1f5c09' }
+        },
+        {
+          if: { hover: true, priority: 'low', text: true },
+          tokens: { color: '#414547' }
+        },
+        {
+          if: { danger: true, hover: true, text: true },
+          tokens: { color: '#c12335' }
+        },
         {
           if: { pressed: true, text: true },
           tokens: {
@@ -609,6 +687,15 @@ const theme = {
             textLine: 'none'
           }
         },
+        {
+          if: { focus: true, pressed: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#163e06',
+            outerBorderColor: '#163e06',
+            textLine: 'none'
+          }
+        },
         {
           if: { inactive: true, text: true },
           tokens: {
@@ -622,6 +709,21 @@ const theme = {
           if: { inverse: true, text: true },
           tokens: { borderRadius: 0, color: '#ffffff' }
         },
+        {
+          if: { focus: true, inverse: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#b2b9bf',
+            outerBorderColor: '#b2b9bf'
+          }
+        },
         {
           if: { inactive: true, inverse: true, text: true },
           tokens: {
@@ -668,6 +770,18 @@ const theme = {
     },
     ButtonDropdown: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -691,6 +805,16 @@ const theme = {
       },
       rules: [
         { if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#676e73',
+            color: '#414547',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -700,6 +824,7 @@ const theme = {
             iconColor: '#ffffff'
           }
         },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { inactive: true },
           tokens: {
@@ -720,9 +845,21 @@ const theme = {
             iconColor: '#ffffff'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5', iconBackground: '#613889' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#4b286d' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#3f2a54', iconBackground: '#613889' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderGap: 2, outerBorderWidth: 2 }
         }
       ],
       tokens: {
@@ -796,6 +933,18 @@ const theme = {
     },
     ButtonGroupItem: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
           type: 'state',
@@ -832,6 +981,16 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { selected: true },
           tokens: {
@@ -840,10 +999,22 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#3f2a54' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#4b286d' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#3f2a54' }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -914,6 +1085,18 @@ const theme = {
           values: [ 'alternative', 'subtle', 'grid', 'feature' ]
         },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
         interactive: { type: 'variant', values: [ true ] },
         padding: {
           type: 'variant',
@@ -1025,9 +1208,20 @@ const theme = {
           }
         },
         {
-          if: { interactive: true, pressed: false },
+          if: { focus: false, interactive: true, pressed: false },
           tokens: { borderColor: '#ffffff', borderWidth: 2 }
         },
+        {
+          if: { hover: true, interactive: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
+            borderColor: 'transparent'
+          }
+        },
+        {
+          if: { focus: true, interactive: true },
+          tokens: { borderColor: '#4b286d', borderWidth: 2 }
+        },
         {
           if: { interactive: true, pressed: true },
           tokens: {
@@ -1084,6 +1278,18 @@ const theme = {
     },
     CarouselTabsPanelItem: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -1102,6 +1308,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomColor: '#2b8000',
+            borderBottomWidth: 2,
+            color: '#2b8000'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomColor: '#2b8000',
+            borderBottomWidth: 4,
+            color: '#2b8000'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -1110,6 +1332,10 @@ const theme = {
             color: '#1f5c09'
           }
         },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1129,6 +1355,14 @@ const theme = {
           }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 2,
+            color: '#ffffff'
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -1137,6 +1371,22 @@ const theme = {
             color: '#676e73'
           }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 4,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: {
+            borderBottomColor: '#676e73',
+            borderBottomWidth: 4,
+            color: '#676e73'
+          }
+        },
         {
           if: { inverse: true, selected: true },
           tokens: {
@@ -1170,6 +1420,18 @@ const theme = {
     },
     CarouselThumbnail: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -1186,6 +1448,11 @@ const theme = {
           if: { viewport: [ 'xs', 'sm' ] },
           tokens: { alignItems: 'flex-start', size: 48 }
         },
+        { if: { hover: true }, tokens: { borderColor: '#2b8000' } },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#2b8000', borderWidth: 2 }
+        },
         {
           if: { pressed: true },
           tokens: { borderColor: '#1f5c09', borderWidth: 2 }
@@ -1212,6 +1479,18 @@ const theme = {
           values: [ true ]
         },
         error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -1223,6 +1502,10 @@ const theme = {
           if: { error: true },
           tokens: { inputBorderColor: '#e12339' }
         },
+        {
+          if: { focus: true },
+          tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1232,6 +1515,19 @@ const theme = {
             inputBorderColor: 'rgba(0, 0, 0, 0)',
             labelColor: '#676e73'
           }
+        },
+        {
+          if: { hover: true },
+          tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
+        },
+        {
+          if: { checked: true, focus: true },
+          tokens: {
+            inputBorderColor: '#ffffff',
+            inputBorderWidth: 2,
+            inputOutlineColor: '#7c53a5',
+            inputOutlineWidth: 3
+          }
         }
       ],
       tokens: {
@@ -1269,6 +1565,18 @@ const theme = {
           values: [ true ]
         },
         error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -1297,6 +1605,24 @@ const theme = {
             paddingTop: 16
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#676e73',
+            checkboxOuterBorderColor: '#e3e6e8',
+            checkboxOuterBorderWidth: 2,
+            outerBorderColor: '#e3e6e8'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            checkboxInputBorderColor: '#7c53a5',
+            checkboxInputBorderWidth: 3,
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2
+          }
+        },
         {
           description: 'Pressed state matches hover state plus light grey background',
           if: { pressed: true },
@@ -1312,6 +1638,10 @@ const theme = {
           }
         },
         { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+        {
+          if: { checked: true, hover: true },
+          tokens: { borderColor: '#4b286d' }
+        },
         {
           if: { error: true },
           tokens: {
@@ -1431,6 +1761,18 @@ const theme = {
     ChevronLink: {
       appearances: {
         alternative: { type: 'variant', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
@@ -1444,13 +1786,25 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { color: '#1f5c09', iconDisplace: 4 }
+        },
         { if: { pressed: true }, tokens: { color: '#163e06' } },
         { if: { alternative: true }, tokens: { color: '#414547' } },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#2c2e30' }
+        },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#2c2e30' }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f4f4f7' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#e3e6e8' }
@@ -1474,6 +1828,22 @@ const theme = {
             fontSize: 12,
             iconSize: 16
           }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#414547', outerBorderColor: '#414547' }
         }
       ],
       tokens: {
@@ -1491,6 +1861,18 @@ const theme = {
     },
     ColourToggle: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -1503,6 +1885,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            bubbleBorderColor: '#b2b9bf',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#676e73',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -2055,6 +2453,18 @@ const theme = {
     },
     HorizontalScrollButton: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -2062,6 +2472,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#414547', iconColor: '#414547' }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }
@@ -2147,6 +2561,18 @@ const theme = {
           type: 'variant',
           values: [ true ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -2234,20 +2660,71 @@ const theme = {
           tokens: { icon: PaletteIconChevronLeft }
         },
         {
-          if: { action: 'moveRight' },
-          tokens: { icon: PaletteIconChevronRight }
+          if: { action: 'moveRight' },
+          tokens: { icon: PaletteIconChevronRight }
+        },
+        {
+          if: { action: 'play' },
+          tokens: { icon: PaletteIconPlayVideo }
+        },
+        {
+          if: { inverse: true },
+          tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#414547',
+            iconColor: '#414547',
+            iconScale: 1.1
+          }
+        },
+        { if: { hover: true }, tokens: { iconScale: 1 } },
+        {
+          if: { hover: true, password: true },
+          tokens: {
+            backgroundColor: '#7c53a5',
+            borderColor: '#7c53a5',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { password: true },
+          tokens: { borderColor: 'transparent' }
+        },
+        {
+          if: { focus: true, password: true },
+          tokens: { borderColor: '#4b286d' }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
         },
         {
-          if: { action: 'play' },
-          tokens: { icon: PaletteIconPlayVideo }
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 4,
+            outerBorderWidth: 1
+          }
         },
         {
-          if: { inverse: true },
-          tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+          if: { focus: true, password: true },
+          tokens: {
+            borderWidth: 3,
+            outerBorderColor: '#3f2a54',
+            outerBorderWidth: 0
+          }
         },
         {
-          if: { password: true },
-          tokens: { borderColor: 'transparent' }
+          if: { focus: true, inverse: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderColor: '#ffffff',
+            outerBorderWidth: 1
+          }
         },
         {
           if: { pressed: true },
@@ -2321,6 +2798,26 @@ const theme = {
             outerBorderColor: 'rgba(0, 0, 0, 0)'
           }
         },
+        {
+          if: { hover: true, raised: true },
+          tokens: { borderColor: '#b2b9bf', borderWidth: 3 }
+        },
+        {
+          if: { focus: true, raised: true },
+          tokens: {
+            borderColor: '#4b286d',
+            borderWidth: 3,
+            iconColor: '#4b286d'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, raised: true },
+          tokens: {
+            backgroundColor: '#4b286d',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
         { if: { compact: true }, tokens: { outerBorderGap: 0 } }
       ],
       tokens: {
@@ -2377,6 +2874,18 @@ const theme = {
           type: 'variant',
           values: [ true ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
           type: 'state',
@@ -2410,10 +2919,22 @@ const theme = {
       },
       rules: [
         { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000', outerBorderOutline: 'none' }
+        },
+        {
+          if: { hover: true },
+          tokens: { color: '#1f5c09', textLine: 'none' }
+        },
         {
           if: { pressed: true },
           tokens: { color: '#163e06', textLine: 'none' }
         },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
         {
           if: { size: 'large' },
           tokens: { blockFontSize: 20, blockLineHeight: 1.25, iconSize: 24 }
@@ -2433,17 +2954,61 @@ const theme = {
           }
         },
         { if: { alternative: true }, tokens: { color: '#2c2e30' } },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#414547', outerBorderColor: '#414547' }
+        },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#2c2e30' }
+        },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#2c2e30' }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f4f4f7' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff', outerBorderOutline: 'none' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#e3e6e8' }
         },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#e3e6e8', outerBorderColor: '#e3e6e8' }
+        },
         { if: { light: true }, tokens: { color: '#676e73' } },
-        { if: { quiet: true }, tokens: { textLine: 'none' } }
+        {
+          if: { focus: true, light: true },
+          tokens: { color: '#676e73', outerBorderColor: '#676e73' }
+        },
+        {
+          if: { hover: true, light: true },
+          tokens: { color: '#414547', textLine: 'none' }
+        },
+        { if: { quiet: true }, tokens: { textLine: 'none' } },
+        {
+          if: { hover: true, quiet: true },
+          tokens: { color: '#1f5c09', textLine: 'underline' }
+        },
+        {
+          if: { alternative: true, hover: true, quiet: true },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { hover: true, inverse: true, quiet: true },
+          tokens: { color: '#f4f4f7', textLine: 'underline' }
+        },
+        {
+          if: { hover: true, light: true, quiet: true },
+          tokens: { color: '#414547', textLine: 'underline' }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -2544,6 +3109,18 @@ const theme = {
           type: 'state',
           values: [ true, false ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
         isChild: {
           description: 'when the item is child of another child',
           type: 'state',
@@ -2556,6 +3133,38 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true, hover: true, pressed: true },
+          tokens: {
+            groupBackgroundColor: '#e3e6e8',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#676e73',
+            itemBackgroundColor: '#e3e6e8',
+            itemColor: '#676e73'
+          }
+        },
+        {
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: '#f4f4f7',
+            groupColor: '#4b286d',
+            itemBackgroundColor: '#f4f4f7',
+            itemColor: '#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 },
           tokens: { groupIcon: PaletteIconCaretUp }
@@ -2592,6 +3201,22 @@ const theme = {
             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' }
@@ -2854,6 +3479,18 @@ const theme = {
           type: 'state',
           values: [ true, false ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -2881,6 +3518,33 @@ const theme = {
             fontWeight: '700'
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: '#4b286d',
+            borderWidth: 2,
+            color: '#4b286d',
+            outerBorderColor: '#4b286d',
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#4b286d',
+            borderColor: '#4b286d',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: '#7c53a5',
+            color: '#4b286d'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3117,6 +3781,18 @@ const theme = {
     },
     PaginationPageButton: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -3129,6 +3805,20 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#676e73', textLine: 'none' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomWidth: 3,
+            borderColor: '#676e73',
+            borderLeftWidth: 3,
+            borderRightWidth: 3,
+            borderTopWidth: 3
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -3180,6 +3870,18 @@ const theme = {
           type: 'state',
           values: [ 'previous', 'next' ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -3208,6 +3910,19 @@ const theme = {
             width: 32
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            iconDisplace: 4,
+            outerBorderColor: '#676e73',
+            outerBorderWidth: 1,
+            textLine: 'none'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#676e73', outerBorderWidth: 3 }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -3259,8 +3974,41 @@ const theme = {
       }
     },
     PreviewCard: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
         borderColor: '#e3e6e8',
@@ -3587,6 +4335,18 @@ const theme = {
     },
     QuickLinksButton: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -3594,9 +4354,18 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#b2b9bf', borderWidth: 3 }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#676e73' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderWidth: 1 }
         }
       ],
       tokens: {
@@ -3653,6 +4422,18 @@ const theme = {
     },
     QuickLinksFeatureItem: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -3669,9 +4450,29 @@ const theme = {
           if: { viewport: 'xl' },
           tokens: { contentMaxDimension: 184, imageDimension: 168 }
         },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000', textLine: 'none' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            color: '#2b8000',
+            imageDimension: 140,
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, viewport: 'xl' },
+          tokens: { imageDimension: 184 }
+        },
         {
           if: { pressed: true },
           tokens: { color: '#1f5c09', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#1f5c09', outerBorderColor: '#1f5c09' }
         }
       ],
       tokens: {
@@ -3692,6 +4493,18 @@ const theme = {
     },
     QuickLinksList: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -3699,6 +4512,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            itemFontColor: '#4b286d',
+            itemUnderline: 'underline'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#e3e6e8',
+            itemFontColor: '#414547',
+            itemUnderline: 'underline'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3745,6 +4574,18 @@ const theme = {
           values: [ true ]
         },
         error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -3753,6 +4594,14 @@ const theme = {
       },
       rules: [
         { if: { error: true }, tokens: {} },
+        {
+          if: { hover: true },
+          tokens: { outerBorderColor: '#e3e6e8' }
+        },
+        {
+          if: { focus: true },
+          tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -3812,6 +4661,18 @@ const theme = {
           values: [ true ]
         },
         error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -3840,6 +4701,24 @@ const theme = {
             paddingTop: 16
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            radioOuterBorderColor: '#e3e6e8',
+            radioOuterBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            radioInputBorderColor: '#7c53a5',
+            radioInputBorderWidth: 3
+          }
+        },
         {
           description: 'Pressed state matches hover state plus light grey background',
           if: { pressed: true },
@@ -3855,6 +4734,10 @@ const theme = {
           }
         },
         { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+        {
+          if: { checked: true, hover: true },
+          tokens: { borderColor: '#4b286d' }
+        },
         {
           if: { error: true },
           tokens: {
@@ -4042,6 +4925,12 @@ const theme = {
           type: 'state',
           values: [ true ]
         },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -4049,6 +4938,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: { outerBorderWidth: 2 }
+        },
         {
           if: { focus: true },
           tokens: {
@@ -4093,6 +4986,18 @@ const theme = {
     },
     SearchButton: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -4110,6 +5015,23 @@ const theme = {
           if: { priority: 'high' },
           tokens: { backgroundColor: '#4b286d', iconColor: '#ffffff' }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#7c53a5',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#4b286d',
+            borderWidth: 3,
+            iconColor: '#4b286d'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -4156,6 +5078,12 @@ const theme = {
           type: 'state',
           values: [ true ]
         },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -4168,6 +5096,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { outerBorderColor: '#e3e6e8' }
+        },
         {
           if: { focus: true },
           tokens: { borderColor: '#7c53a5', borderWidth: 3 }
@@ -4243,6 +5175,18 @@ const theme = {
           type: 'state',
           values: [ true, false ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
         type: {
           description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
           type: 'state',
@@ -4286,6 +5230,14 @@ const theme = {
             paddingLeft: 16
           }
         },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#f4f4f7', color: '#4b286d' }
+        },
+        {
+          if: { focus: true },
+          tokens: { backgroundColor: '#f4f4f7', color: '#4b286d' }
+        },
         {
           if: { active: true, type: 'child' },
           tokens: {
@@ -4293,6 +5245,15 @@ const theme = {
             accentPadding: 16,
             backgroundColor: '#f4f4f7'
           }
+        },
+        {
+          if: { active: false, hover: true, type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#ffffff',
+            accentOffset: 0,
+            accentWidth: 16,
+            color: '#414547'
+          }
         }
       ],
       tokens: {
@@ -4363,13 +5324,24 @@ const theme = {
     },
     SkipLink: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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, false ]
         }
       },
-      rules: [],
+      rules: [
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#163e06', outlineColor: '#163e06' }
+        }
+      ],
       tokens: {
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderRadius: 4,
@@ -4397,8 +5369,20 @@ const theme = {
       }
     },
     SplashButton: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: { buttonContentChildrenBackground: 'rgba(0, 0, 0, 0.8)' }
+        }
+      ],
       tokens: {
         buttonContentBackground: 'rgba(0, 0, 0, 0.6)',
         buttonContentChildrenBackground: null,
@@ -4407,8 +5391,22 @@ const theme = {
       }
     },
     SplashButtonWithDetails: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            buttonContentChildrenBackground: 'rgba(255, 255, 255, 0.8)'
+          }
+        }
+      ],
       tokens: {
         buttonBackground: '#ffffff',
         buttonBorderColor: '#e3e6e8',
@@ -4528,6 +5526,18 @@ const theme = {
     },
     StoryCard: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -4535,9 +5545,18 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
         }
       ],
       tokens: {
@@ -4864,6 +5883,18 @@ const theme = {
     },
     TagsItem: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -4892,6 +5923,16 @@ const theme = {
             iconColor: '#ffffff'
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { selected: true },
           tokens: {
@@ -4903,10 +5944,22 @@ const theme = {
             iconColor: '#ffffff'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5', iconBackground: '#4b286d' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#3f2a54', iconBackground: '#7c53a5' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#4b286d' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { iconBackground: '#7c53a5', outerBorderColor: '#3f2a54' }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -4961,6 +6014,17 @@ const theme = {
           type: 'state',
           values: [ true, false ]
         },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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, false ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -4979,6 +6043,23 @@ const theme = {
         {
           if: { expanded: true },
           tokens: { icon: PaletteIconCaretUp }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            iconOuterBorderColor: '#414547',
+            iconOuterBorderGap: 4,
+            iconOuterBorderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            iconBackgroundColor: '#414547',
+            iconBorderColor: '#ffffff',
+            iconColor: '#ffffff',
+            iconOuterBorderGap: 4
+          }
         }
       ],
       tokens: {
@@ -5012,6 +6093,12 @@ const theme = {
         expandTitlePaddingLeft: 0,
         expandTitleUnderline: 'none',
         icon: PaletteIconCaretDown,
+        iconBackgroundColor: 'transparent',
+        iconBorderColor: '#676e73',
+        iconColor: '#676e73',
+        iconOuterBorderColor: 'transparent',
+        iconOuterBorderGap: 0,
+        iconOuterBorderWidth: null,
         listColor: '#414547',
         listFontName: 'HelveticaNow',
         listFontSize: 14,
@@ -5089,6 +6176,12 @@ const theme = {
           type: 'state',
           values: [ true ]
         },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -5111,6 +6204,13 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: {
+            outerBackgroundColor: '#e3e6e8',
+            outerBorderColor: '#e3e6e8'
+          }
+        },
         {
           if: { validation: 'success' },
           tokens: {
@@ -5257,6 +6357,18 @@ const theme = {
     },
     ToggleSwitch: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
           type: 'state',
@@ -5274,10 +6386,27 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#414547' } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#2c2e30' }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 3,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            outerBorderColor: '#2c2e30',
+            outerBorderGap: 3,
+            outerBorderWidth: 2
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -5286,10 +6415,22 @@ const theme = {
             iconColor: '#2b8000'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#1f5c09', iconColor: '#1f5c09' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#163e06', iconColor: '#163e06' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#676e73', outerBorderWidth: 2 }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#163e06', outerBorderWidth: 2 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -5408,6 +6549,18 @@ const theme = {
     },
     TooltipButton: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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.',
@@ -5417,10 +6570,19 @@ const theme = {
       },
       rules: [
         { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
+        { if: { hover: true }, tokens: { iconScale: 1.25 } },
         { if: { pressed: true }, tokens: { iconColor: '#676e73' } },
         {
           if: { inverse: true, pressed: true },
           tokens: { iconColor: '#b2b9bf' }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#676e73' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#b2b9bf' }
         }
       ],
       tokens: {
@@ -5872,6 +7034,18 @@ const theme = {
     },
     VideoPickerThumbnail: {
       appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          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',
@@ -5884,6 +7058,14 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#b2b9bf', outerBorderColor: '#b2b9bf' }
+        },
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#e3e6e8', borderWidth: 3 }
+        },
         {
           if: { pressed: true },
           tokens: { borderColor: '#676e73', borderWidth: 3 }
@@ -6025,6 +7207,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.50.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.50.1' }
 }
 export default theme