@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -336,6 +336,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',
@@ -409,10 +421,77 @@ const theme = {
             outerBackgroundColor: 'rgba(0, 0, 0, 0)'
           }
         },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#404040', color: '#ffffff' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomWidth: 1,
+            borderColor: '#000000',
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            color: '#ffffff',
+            outerBorderColor: '#000000',
+            outerBorderGap: 4,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { hover: true, priority: 'low' },
+          tokens: { borderBottomWidth: 1, outerBorderColor: '#000000' }
+        },
+        {
+          if: { focus: true, priority: 'low' },
+          tokens: { color: '#000000' }
+        },
+        {
+          if: { focus: true, hover: true, priority: 'low' },
+          tokens: { color: '#ffffff' }
+        },
+        {
+          if: { danger: true, focus: true },
+          tokens: {
+            borderBottomWidth: 1,
+            borderColor: '#c9370b',
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            borderWidth: 1,
+            color: '#c9370b',
+            outerBorderColor: '#c9370b',
+            outerBorderGap: 2
+          }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#404040',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 1
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            borderBottomWidth: 1,
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            color: '#000000',
+            outerBorderColor: '#ffffff',
+            outerBorderGap: 2
+          }
+        },
         {
           if: { danger: true, inverse: true },
           tokens: {
@@ -425,6 +504,15 @@ const theme = {
             color: '#c9370b'
           }
         },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            borderColor: '#c9c8c8',
+            color: '#666666',
+            outerBorderGap: 2
+          }
+        },
         { if: { width: 'full' }, tokens: { width: '100%' } },
         {
           if: { viewport: [ 'xs' ], width: 'responsive' },
@@ -453,10 +541,34 @@ const theme = {
             textLine: 'underline'
           }
         },
+        {
+          if: { focus: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#000000',
+            outerBorderColor: '#000000'
+          }
+        },
+        {
+          if: { hover: true, text: true },
+          tokens: { color: '#404040', textLine: 'none' }
+        },
         {
           if: { danger: true, text: true },
           tokens: { color: '#c9370b' }
         },
+        {
+          if: { danger: true, focus: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#c9370b',
+            outerBorderColor: '#c9370b'
+          }
+        },
+        {
+          if: { hover: true, priority: 'low' },
+          tokens: { borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 }
+        },
         {
           if: { pressed: true, text: true },
           tokens: {
@@ -465,6 +577,18 @@ const theme = {
             textLine: 'none'
           }
         },
+        {
+          if: { danger: true, hover: true },
+          tokens: { backgroundColor: '#f3592b', color: '#ffffff' }
+        },
+        {
+          if: { danger: true, hover: true, text: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            color: '#f3592b',
+            outerBorderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
         {
           if: { danger: true, pressed: true },
           tokens: {
@@ -487,6 +611,18 @@ const theme = {
           if: { inverse: true, text: true },
           tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
         },
+        {
+          if: { focus: true, inverse: true, text: true },
+          tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#ffffff',
+            outerBorderColor: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true, inverse: true, text: true },
+          tokens: { color: '#c9c8c8' }
+        },
         {
           if: { inverse: true, pressed: true, text: true },
           tokens: {
@@ -522,6 +658,18 @@ const theme = {
           if: { priority: 'low', text: true },
           tokens: { color: '#7a3dfc' }
         },
+        {
+          if: { hover: true, priority: 'low', text: true },
+          tokens: { color: '#5b2bc2', outerBorderColor: 'rgba(0, 0, 0, 0)' }
+        },
+        {
+          if: { focus: true, priority: 'low', text: true },
+          tokens: {
+            color: '#7a3dfc',
+            outerBorderColor: '#7a3dfc',
+            outerBorderWidth: 1
+          }
+        },
         {
           if: { pressed: true, priority: 'low', text: true },
           tokens: {
@@ -578,6 +726,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',
@@ -604,6 +764,10 @@ const theme = {
           if: { open: true },
           tokens: { icon: PaletteIconChevronUp }
         },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#000000' }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -613,6 +777,20 @@ const theme = {
             iconColor: '#666666'
           }
         },
+        {
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
+        {
+          if: { focus: true, hover: true, pressed: false },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -630,6 +808,32 @@ const theme = {
             iconColor: '#ffffff',
             outerBorderColor: 'transparent'
           }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#404040' }
+        },
+        {
+          if: { focus: true, hover: false, selected: true },
+          tokens: {
+            backgroundColor: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderGap: 2,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { hover: true, pressed: true, selected: true },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#666666',
+            iconColor: '#666666'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { backgroundColor: '#404040', outerBorderColor: '#404040' }
         }
       ],
       tokens: {
@@ -707,6 +911,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',
@@ -734,6 +950,18 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#000000' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: '#404040',
+            color: '#ffffff'
+          }
+        },
         {
           if: { selected: true },
           tokens: { backgroundColor: '#7a3dfc', color: '#ffffff' }
@@ -742,6 +970,18 @@ const theme = {
           if: { pressed: true },
           tokens: { backgroundColor: '#404040', color: '#666666' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            backgroundColor: '#7a3dfc',
+            color: '#ffffff',
+            outerBorderColor: '#7a3dfc'
+          }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#5b2bc2', color: '#ffffff' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#404040', color: '#666666' }
@@ -817,6 +1057,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',
@@ -925,9 +1177,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.1)',
+            borderColor: 'transparent'
+          }
+        },
+        {
+          if: { focus: true, interactive: true },
+          tokens: { borderColor: '#000000', borderWidth: 2 }
+        },
         {
           if: { interactive: true, pressed: true },
           tokens: {
@@ -984,6 +1247,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',
@@ -1002,6 +1277,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomColor: '#404040',
+            borderBottomWidth: 2,
+            color: '#404040'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomColor: '#000000',
+            borderBottomWidth: 4,
+            color: '#000000'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -1010,6 +1301,10 @@ const theme = {
             color: '#666666'
           }
         },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1026,6 +1321,22 @@ const theme = {
             color: '#000000'
           }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 2,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 4,
+            color: '#ffffff'
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -1035,6 +1346,10 @@ const theme = {
           }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
         {
           if: { inactive: true, inverse: true },
           tokens: {
@@ -1074,6 +1389,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',
@@ -1088,7 +1415,12 @@ const theme = {
       rules: [
         {
           if: { viewport: [ 'xs', 'sm' ] },
-          tokens: { alignItems: 'flex-start', size: 48 }
+          tokens: { alignItems: 'flex-start', size: 32 }
+        },
+        { if: { hover: true }, tokens: { borderColor: '#404040' } },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#000000', borderWidth: 2 }
         },
         {
           if: { pressed: true },
@@ -1105,7 +1437,7 @@ const theme = {
         padding: 8,
         selectedBorderColor: '#000000',
         selectedBorderWidth: 2,
-        size: 72
+        size: 56
       }
     },
     Checkbox: {
@@ -1116,6 +1448,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',
@@ -1123,6 +1467,14 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true },
+          tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+        },
+        {
+          if: { hover: true },
+          tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1171,6 +1523,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',
@@ -1199,6 +1563,17 @@ const theme = {
             paddingTop: 16
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#666666',
+            checkboxOuterBorderColor: '#000000',
+            checkboxOuterBorderGap: 2,
+            checkboxOuterBorderWidth: 1,
+            outerBorderColor: '#c9c8c8',
+            outerBorderWidth: 2
+          }
+        },
         {
           if: { checked: true },
           tokens: {
@@ -1208,6 +1583,19 @@ const theme = {
             checkboxInputBorderWidth: 2
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#666666',
+            checkboxInputBorderColor: '#000000',
+            checkboxOuterBorderColor: '#000000',
+            checkboxOuterBorderGap: 2,
+            checkboxOuterBorderWidth: 1,
+            outerBorderColor: '#000000',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
         {
           description: 'Pressed state matches hover state plus light grey background',
           if: { pressed: true },
@@ -1340,6 +1728,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.',
@@ -1353,17 +1753,53 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { color: '#404040', iconDisplace: 4 }
+        },
         { if: { pressed: true }, tokens: { color: '#666666' } },
+        {
+          if: { focus: true },
+          tokens: { color: '#000000', outerBorderColor: '#000000' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#666666', outerBorderColor: '#666666' }
+        },
         { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#5b2bc2' }
+        },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#666666' }
         },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
+        },
+        {
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#666666', outerBorderColor: '#666666' }
+        },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#efefef' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#c9c8c8' }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
+        },
         {
           if: { size: 'large' },
           tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }
@@ -1400,6 +1836,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',
@@ -1412,6 +1860,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            bubbleBorderColor: '#c9c8c8',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#7a3dfc',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -1984,6 +2448,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',
@@ -1991,6 +2467,14 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#000000',
+            borderColor: '#000000',
+            iconColor: '#ffffff'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -2078,6 +2562,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',
@@ -2174,12 +2670,55 @@ const theme = {
         },
         {
           if: { inverse: true },
-          tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#000000',
+            iconColor: '#ffffff',
+            iconScale: 1.1
+          }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { backgroundColor: '#ffffff', iconColor: '#000000' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#000000',
+            iconColor: '#000000',
+            outerBorderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
+          }
         },
         {
           if: { password: true },
           tokens: { borderColor: 'transparent' }
         },
+        {
+          if: { focus: true, password: true },
+          tokens: {
+            borderColor: '#000000',
+            borderWidth: 3,
+            outerBorderWidth: 0
+          }
+        },
         {
           if: { inactive: null, pressed: true },
           tokens: { backgroundColor: '#404040', iconColor: '#666666' }
@@ -2222,11 +2761,16 @@ const theme = {
             }
           }
         },
+        { if: { hover: true, raised: true }, tokens: {} },
         {
           if: { raised: true, size: 'large' },
           tokens: { iconSize: 24, padding: 12 }
         },
         { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+        {
+          if: { focus: true, raised: true },
+          tokens: { borderWidth: 3 }
+        },
         {
           if: { pressed: true, raised: true },
           tokens: { backgroundColor: '#000000', iconColor: '#666666' }
@@ -2243,7 +2787,7 @@ const theme = {
         }
       ],
       tokens: {
-        backgroundColor: 'transparent',
+        backgroundColor: '#ffffff',
         borderBottomLeftRadius: null,
         borderBottomRightRadius: null,
         borderBottomWidth: null,
@@ -2292,6 +2836,18 @@ const theme = {
     Link: {
       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 ]
+        },
         iconPosition: {
           description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
           type: 'state',
@@ -2316,16 +2872,56 @@ const theme = {
       },
       rules: [
         { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+        {
+          if: { focus: true },
+          tokens: {
+            color: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#666666', outerBorderColor: '#666666' }
+        },
+        {
+          if: { hover: true },
+          tokens: { color: '#404040', textLine: 'none' }
+        },
         {
           if: { pressed: true },
           tokens: { color: '#666666', textLine: 'none' }
         },
         { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
+        },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#5b2bc2' }
+        },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#666666' }
         },
+        {
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#666666', outerBorderColor: '#666666' }
+        },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#efefef' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#c9c8c8' }
@@ -2336,8 +2932,8 @@ const theme = {
             blockFontName: 'StagSans',
             blockFontSize: 12,
             blockFontWeight: '600',
-            blockLineHeight: 1.6,
-            iconSize: 16
+            blockLineHeight: 1.33333333333,
+            iconSize: 12
           }
         },
         {
@@ -2345,14 +2941,26 @@ const theme = {
           tokens: {
             blockFontSize: 14,
             blockLineHeight: 1.42857142857,
-            iconSize: 20
+            iconSize: 14
           }
         },
         {
           if: { size: 'large' },
           tokens: { blockFontSize: 20, blockLineHeight: 1.4, iconSize: 24 }
         },
-        { if: { quiet: true }, tokens: { textLine: 'none' } }
+        { if: { quiet: true }, tokens: { textLine: 'none' } },
+        {
+          if: { hover: true, quiet: true },
+          tokens: { color: '#404040', textLine: 'underline' }
+        },
+        {
+          if: { alternative: true, hover: true, quiet: true },
+          tokens: { color: '#5b2bc2', textLine: 'underline' }
+        },
+        {
+          if: { hover: true, inverse: true, quiet: true },
+          tokens: { color: '#efefef', textLine: 'underline' }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -2363,7 +2971,7 @@ const theme = {
         borderRadius: 4,
         color: '#000000',
         icon: null,
-        iconSize: 24,
+        iconSize: 16,
         iconSpace: 1,
         iconTranslateX: 0,
         iconTranslateY: 0,
@@ -2452,6 +3060,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',
@@ -2464,6 +3084,25 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: '#efefef',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            itemBackgroundColor: '#efefef'
+          }
+        },
+        {
+          if: { focus: true, pressed: false },
+          tokens: {
+            groupBorderColor: '#7a3dfc',
+            groupColor: '#7a3dfc',
+            itemBorderBottomColor: '#7a3dfc',
+            itemBorderLeftColor: '#7a3dfc',
+            itemBorderRightColor: '#7a3dfc',
+            itemBorderTopColor: '#7a3dfc'
+          }
+        },
         {
           if: { current: true },
           tokens: {
@@ -2490,28 +3129,100 @@ const theme = {
         {
           if: { isChild: true, pressed: true },
           tokens: {
-            itemBorderBottomWidth: 0,
-            itemBorderLeftColor: '#595959',
-            itemBorderTopWidth: 0,
-            itemColor: '#595959'
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#595959',
+            itemBorderTopWidth: 0,
+            itemColor: '#595959'
+          }
+        },
+        {
+          if: { expanded: true },
+          tokens: {
+            groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#ffffff',
+            groupIcon: PaletteIconChevronUp,
+            itemColor: '#595959'
+          }
+        },
+        {
+          if: { current: true, isChild: true },
+          tokens: {
+            itemBackgroundColor: '#000000',
+            itemBorderLeftColor: '#000000',
+            itemColor: '#ffffff'
+          }
+        },
+        {
+          if: { current: true, focus: false, hover: true },
+          tokens: {
+            itemBackgroundColor: '#efefef',
+            itemBorderLeftColor: '#efefef',
+            itemColor: '#666666'
+          }
+        },
+        {
+          if: { current: true, focus: true, hover: true },
+          tokens: {
+            itemBackgroundColor: '#ffffff',
+            itemBorderLeftColor: '#7a3dfc'
+          }
+        },
+        {
+          if: { focus: true, isChild: true },
+          tokens: {
+            itemBackgroundColor: '#ffffff',
+            itemBorderBottomColor: '#7a3dfc',
+            itemBorderBottomWidth: 1,
+            itemBorderLeftColor: '#7a3dfc',
+            itemBorderRightColor: '#7a3dfc',
+            itemBorderRightWidth: 1,
+            itemBorderTopColor: '#7a3dfc',
+            itemBorderTopWidth: 1,
+            itemColor: '#666666'
+          }
+        },
+        {
+          if: { hover: true, isChild: true },
+          tokens: {
+            itemBackgroundColor: '#efefef',
+            itemBorderBottomWidth: 0,
+            itemBorderLeftColor: '#666666',
+            itemBorderRightWidth: 0,
+            itemBorderTopWidth: 0,
+            itemColor: '#666666'
+          }
+        },
+        {
+          if: { current: true, expanded: true, focus: true },
+          tokens: {
+            groupBackgroundColor: '#000000',
+            groupBorderColor: '#7a3dfc',
+            itemBorderLeftColor: '#7a3dfc',
+            itemColor: '#666666'
           }
         },
         {
-          if: { expanded: true },
+          if: { current: true, expanded: true, hover: true },
           tokens: {
-            groupBackgroundColor: 'rgba(0, 0, 0, 0)',
-            groupBorderColor: 'rgba(0, 0, 0, 0)',
-            groupColor: '#ffffff',
-            groupIcon: PaletteIconChevronUp,
-            itemColor: '#595959'
+            groupBackgroundColor: '#efefef',
+            groupColor: '#666666',
+            itemBackgroundColor: '#efefef',
+            itemColor: '#666666'
           }
         },
         {
-          if: { current: true, isChild: true },
+          if: { focus: true },
           tokens: {
-            itemBackgroundColor: '#000000',
-            itemBorderLeftColor: '#000000',
-            itemColor: '#ffffff'
+            groupBackgroundColor: '#ffffff',
+            groupBorderColor: '#7a3dfc',
+            groupColor: '#666666',
+            itemBackgroundColor: '#ffffff',
+            itemBorderBottomColor: '#7a3dfc',
+            itemBorderLeftColor: '#7a3dfc',
+            itemBorderRightColor: '#7a3dfc',
+            itemBorderTopColor: '#7a3dfc',
+            itemColor: '#666666'
           }
         },
         {
@@ -2774,6 +3485,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',
@@ -2802,6 +3525,27 @@ const theme = {
             outerBorderColor: '#000000'
           }
         },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#000000', borderWidth: 4 }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#595959',
+            borderColor: '#595959',
+            borderWidth: 1,
+            color: '#c9c8c8'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: '#404040',
+            color: '#ffffff'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -2815,6 +3559,16 @@ const theme = {
           if: { viewport: [ 'xs', 'sm', 'md' ] },
           tokens: { textAlign: 'space-between', width: 288 }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: '#404040',
+            color: '#ffffff',
+            fontName: 'StagSans',
+            fontWeight: '600'
+          }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: {
@@ -3052,6 +3806,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',
@@ -3064,6 +3830,11 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#000000', textLine: 'none' }
+        },
+        { if: { focus: true }, tokens: { borderColor: '#000000' } },
         {
           if: { selected: true },
           tokens: {
@@ -3072,6 +3843,14 @@ const theme = {
             textLine: 'none'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { borderColor: '#7a3dfc' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { borderColor: '#7a3dfc' }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3119,6 +3898,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',
@@ -3148,6 +3939,28 @@ const theme = {
             paddingTop: 8
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomWidth: 1,
+            borderColor: '#000000',
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            iconDisplace: 4,
+            textLine: 'none'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomWidth: 1,
+            borderColor: '#000000',
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1
+          }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#000000', color: '#666666' }
@@ -3191,8 +4004,48 @@ 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: { borderColor: '#efefef', borderWidth: 3 }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#000000',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: 'transparent',
+            outerBorderColor: '#000000'
+          }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
         borderColor: '#efefef',
@@ -3497,6 +4350,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',
@@ -3504,6 +4369,7 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { pressed: true },
           tokens: {
@@ -3511,6 +4377,14 @@ const theme = {
             borderColor: '#666666',
             iconColor: '#666666'
           }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#666666' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderWidth: 1, outerBorderColor: '#666666' }
         }
       ],
       tokens: {
@@ -3567,6 +4441,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',
@@ -3583,6 +4469,18 @@ const theme = {
           if: { viewport: 'xl' },
           tokens: { contentMaxDimension: 184, imageDimension: 168 }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            color: '#404040',
+            imageDimension: 140,
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { color: '#000000', outerBorderColor: '#000000' }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3590,6 +4488,14 @@ const theme = {
             outerBorderColor: '#595959',
             textLine: 'underline'
           }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            color: '#595959',
+            outerBorderColor: '#595959',
+            textLine: 'underline'
+          }
         }
       ],
       tokens: {
@@ -3610,6 +4516,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',
@@ -3617,6 +4535,8 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+        { if: { focus: true }, tokens: { backgroundColor: '#efefef' } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#c9c8c8', itemIconColor: '#000000' }
@@ -3657,6 +4577,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',
@@ -3675,6 +4607,18 @@ const theme = {
             outerBorderWidth: 0
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#000000',
+            outerBorderGap: 5,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { outerBorderColor: '#000000' }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -3740,6 +4684,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',
@@ -3768,6 +4724,17 @@ const theme = {
             paddingTop: 16
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#666666',
+            outerBorderColor: '#c9c8c8',
+            outerBorderWidth: 2,
+            radioOuterBorderColor: '#000000',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
+          }
+        },
         {
           if: { checked: true },
           tokens: {
@@ -3777,6 +4744,19 @@ const theme = {
             radioInputBorderWidth: 2
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#666666',
+            outerBorderColor: '#000000',
+            outerBorderGap: 2,
+            outerBorderWidth: 2,
+            radioInputBorderColor: '#000000',
+            radioOuterBorderColor: '#000000',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
+          }
+        },
         {
           description: 'Pressed state matches hover state plus light grey background',
           if: { pressed: true },
@@ -3965,6 +4945,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',
@@ -3972,6 +4958,7 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true, inactive: null }, tokens: {} },
         {
           if: { focus: true },
           tokens: {
@@ -4016,6 +5003,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',
@@ -4033,6 +5032,23 @@ const theme = {
           if: { priority: 'high' },
           tokens: { backgroundColor: '#000000', iconColor: '#ffffff' }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#000000',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#000000',
+            borderWidth: 3,
+            iconColor: '#000000'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -4079,6 +5095,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',
@@ -4113,6 +5135,14 @@ const theme = {
             validationIconColor: '#c9370b'
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#000000',
+            outerBorderWidth: null
+          }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -4165,6 +5195,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',
@@ -4200,6 +5242,8 @@ const theme = {
             backgroundColor: 'rgba(0, 0, 0, 0)'
           }
         },
+        { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+        { if: { focus: true }, tokens: { backgroundColor: '#efefef' } },
         {
           if: { active: true, type: 'child' },
           tokens: {
@@ -4213,6 +5257,10 @@ const theme = {
             paddingBottom: 13,
             paddingTop: 13
           }
+        },
+        {
+          if: { active: false, hover: true, type: 'child' },
+          tokens: { accentBackgroundColor: 'rgba(0, 0, 0, 0)' }
         }
       ],
       tokens: {
@@ -4283,13 +5331,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: '#595959', outlineColor: '#595959' }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
         borderRadius: 4,
@@ -4317,7 +5376,14 @@ const theme = {
       }
     },
     SplashButton: {
-      appearances: {},
+      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: [],
       tokens: {
         buttonContentBackground: null,
@@ -4327,8 +5393,20 @@ 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: null }
+        }
+      ],
       tokens: {
         buttonBackground: '#ffffff',
         buttonBorderColor: null,
@@ -4450,6 +5528,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',
@@ -4457,9 +5547,18 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#efefef' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#000000',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
         }
       ],
       tokens: {
@@ -4660,6 +5759,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 ]
+        },
         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.',
@@ -4683,10 +5794,32 @@ const theme = {
             highlightColor: '#000000'
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#c9c8c8'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#666666'
+          }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#c9c8c8', highlightBarBorderWidth: 0 }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
+        },
         {
           if: { inverse: true },
           tokens: { backgroundColor: 'transparent', color: '#ffffff' }
@@ -4700,10 +5833,27 @@ const theme = {
             highlightColor: '#c9c8c8'
           }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#efefef' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            color: '#ffffff',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#ffffff'
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#c9c8c8', highlightBarBorderWidth: 0 }
         },
+        {
+          if: { focus: true, inverse: true, selected: true },
+          tokens: {}
+        },
         { if: { equalWidth: true }, tokens: { maxWidth: null } }
       ],
       tokens: {
@@ -4751,6 +5901,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',
@@ -4781,6 +5943,30 @@ const theme = {
             outerBorderWidth: 0
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#000000',
+            color: '#000000',
+            iconBackground: 'rgba(0, 0, 0, 0)',
+            iconColor: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderGap: 3,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#404040',
+            borderColor: '#404040',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconBackground: '#404040',
+            iconColor: '#ffffff'
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -4795,6 +5981,26 @@ const theme = {
             outerBorderWidth: 0
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            backgroundColor: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, hover: true, selected: true },
+          tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -4849,6 +6055,23 @@ 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',
+          values: [ true, false ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -4867,6 +6090,38 @@ const theme = {
         {
           if: { expanded: true },
           tokens: { icon: PaletteIconChevronUp }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            iconBackgroundColor: '#000000',
+            iconColor: '#ffffff',
+            iconOuterBorderGap: 2
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            iconBackgroundColor: '#404040',
+            iconColor: '#ffffff',
+            iconOuterBorderGap: 2
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            iconOuterBorderColor: '#000000',
+            iconOuterBorderGap: 2,
+            iconOuterBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            iconBackgroundColor: '#404040',
+            iconColor: '#404040',
+            iconOuterBorderGap: 2
+          }
         }
       ],
       tokens: {
@@ -4900,6 +6155,12 @@ const theme = {
         expandTitlePaddingLeft: 0,
         expandTitleUnderline: 'none',
         icon: PaletteIconChevronDown,
+        iconBackgroundColor: 'rgba(0, 0, 0, 0)',
+        iconBorderColor: 'rgba(0, 0, 0, 0)',
+        iconColor: '#000000',
+        iconOuterBorderColor: 'rgba(0, 0, 0, 0)',
+        iconOuterBorderGap: 0,
+        iconOuterBorderWidth: 0,
         listColor: '#000000',
         listFontName: 'StagSans',
         listFontSize: 14,
@@ -4977,6 +6238,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',
@@ -5000,7 +6267,28 @@ const theme = {
       },
       rules: [
         {
-          if: { validation: 'success' },
+          if: { hover: true, inactive: null },
+          tokens: { backgroundColor: '#efefef', borderColor: '#000000' }
+        },
+        {
+          if: { hover: true, validation: 'success' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#000000',
+            icon: PaletteIconCheckCircleFilled,
+            iconColor: '#1c7b2b'
+          }
+        },
+        {
+          if: { hover: true, validation: 'error' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#000000',
+            iconColor: '#c9370b'
+          }
+        },
+        {
+          if: { hover: false, validation: 'success' },
           tokens: {
             borderColor: '#1c7b2b',
             icon: PaletteIconCheckCircleFilled,
@@ -5008,7 +6296,7 @@ const theme = {
           }
         },
         {
-          if: { validation: 'error' },
+          if: { hover: false, validation: 'error' },
           tokens: {
             borderColor: '#c9370b',
             icon: PaletteIconExclamationOctagon,
@@ -5145,6 +6433,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',
@@ -5162,10 +6462,24 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#c9c8c8', switchColor: '#595959' }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            outerBorderColor: '#000000',
+            outerBorderGap: 3,
+            outerBorderWidth: 1,
+            switchColor: '#666666'
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -5176,10 +6490,46 @@ const theme = {
             switchColor: '#000000'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#efefef', switchColor: '#404040' }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            icon: PaletteIconCheck,
+            iconColor: '#ffffff',
+            outerBorderColor: '#000000',
+            outerBorderWidth: 1,
+            switchBorderColor: 'rgba(0, 0, 0, 0)',
+            switchColor: '#000000'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            outerBorderColor: '#000000',
+            outerBorderGap: 3,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            icon: PaletteIconCheck,
+            iconColor: '#ffffff',
+            outerBorderColor: '#000000',
+            outerBorderGap: 3,
+            outerBorderWidth: 1,
+            switchColor: '#666666'
+          }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -5302,6 +6652,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.',
@@ -5310,10 +6672,30 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: '#7a3dfc',
+            iconScale: 1.25
+          }
+        },
         {
           if: { inverse: true },
           tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { iconColor: '#ffffff' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { focus: true, inverse: null },
+          tokens: { outerBorderColor: '#000000' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -5670,6 +7052,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',
@@ -5682,6 +7076,18 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#595959',
+            borderWidth: 1,
+            outerBorderColor: '#000000'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#c9c8c8', borderWidth: 3 }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -5823,6 +7229,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.50.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.50.1' }
 }
 export default theme