@telus-uds/theme-public-mobile 2.13.0 → 2.14.1

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:06:31 GMT
+ * Generated on Mon, 29 Jan 2024 18:23:31 GMT
  *
  */
 
@@ -324,6 +324,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',
@@ -357,6 +369,7 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#2b3145' } },
         {
           if: { priority: 'high' },
           tokens: {
@@ -373,6 +386,10 @@ const theme = {
             color: '#fefefc'
           }
         },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#f39d80', outerBorderWidth: 4 }
+        },
         {
           if: { inverse: true },
           tokens: {
@@ -381,6 +398,24 @@ const theme = {
             borderWidth: 0
           }
         },
+        {
+          if: { hover: true, priority: 'high' },
+          tokens: {
+            backgroundColor: '#f6b5a0',
+            borderColor: '#636c8c',
+            color: '#394056'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#f39d80',
+            color: '#fefefc',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
         {
           if: { inverse: true, priority: 'high' },
           tokens: {
@@ -389,6 +424,10 @@ const theme = {
             borderWidth: 0
           }
         },
+        {
+          if: { hover: true, inverse: true, priority: 'high' },
+          tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -397,6 +436,16 @@ const theme = {
             color: '#394056'
           }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            backgroundColor: '#fefefc',
+            borderColor: '#394056',
+            color: '#394056',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
         {
           if: { danger: true },
           tokens: {
@@ -405,6 +454,14 @@ const theme = {
             color: '#bf1722'
           }
         },
+        {
+          if: { danger: true, hover: true },
+          tokens: {
+            backgroundColor: '#f9e8e9',
+            borderColor: '#bf1722',
+            color: '#bf1722'
+          }
+        },
         {
           if: { danger: true, priority: null },
           tokens: { borderColor: '#bf1722', color: '#bf1722' }
@@ -417,6 +474,16 @@ const theme = {
             color: '#bf1722'
           }
         },
+        {
+          if: { danger: true, focus: true, priority: null },
+          tokens: {
+            backgroundColor: '#fefefc',
+            borderColor: '#bf1722',
+            color: '#bf1722',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
         {
           if: { danger: true, pressed: true, priority: null },
           tokens: {
@@ -425,6 +492,16 @@ const theme = {
             color: '#fefefc'
           }
         },
+        {
+          if: { danger: true, focus: true, pressed: true, priority: null },
+          tokens: {
+            backgroundColor: '#bf1722',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#fefefc',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
         { if: { width: 'full' }, tokens: { width: '100%' } },
         {
           if: { size: 'small' },
@@ -460,6 +537,10 @@ const theme = {
             textLine: 'underline'
           }
         },
+        {
+          if: { hover: true, text: true },
+          tokens: { textLine: 'none' }
+        },
         {
           if: { priority: 'high', text: true },
           tokens: { color: '#636c8c' }
@@ -468,10 +549,42 @@ const theme = {
           if: { priority: 'low', text: true },
           tokens: { color: '#394056' }
         },
+        {
+          if: { focus: true, text: true },
+          tokens: {
+            color: '#636c8c',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { hover: true, priority: 'high', text: true },
+          tokens: { color: '#394056' }
+        },
+        {
+          if: { hover: true, priority: null, text: true },
+          tokens: { color: '#636c8c' }
+        },
+        {
+          if: { hover: true, priority: 'low', text: true },
+          tokens: { color: '#636c8c' }
+        },
+        {
+          if: { danger: true, hover: true, text: true },
+          tokens: { color: '#394056' }
+        },
         {
           if: { pressed: true, text: true },
           tokens: { color: '#2b3145' }
         },
+        {
+          if: { focus: true, pressed: true, text: true },
+          tokens: {
+            color: '#2b3145',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
         {
           if: { inactive: true, text: true },
           tokens: { color: '#cdcfd5' }
@@ -480,6 +593,22 @@ const theme = {
           if: { inverse: true, text: true },
           tokens: { color: '#f9f2dd' }
         },
+        {
+          if: { focus: true, inverse: true, text: true },
+          tokens: {
+            color: '#f9f2dd',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true, text: true },
+          tokens: {
+            color: '#f9f2dd',
+            outerBorderColor: '#f9f2dd',
+            outerBorderWidth: 2
+          }
+        },
         {
           if: { inactive: true, inverse: true, text: true },
           tokens: { color: '#cdcfd5' }
@@ -492,6 +621,14 @@ const theme = {
             color: '#394056'
           }
         },
+        {
+          if: { focus: true, priority: 'high' },
+          tokens: { outerBorderColor: '#f9cebf', outerBorderWidth: 4 }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+        },
         {
           if: { danger: true, inverse: true },
           tokens: {
@@ -551,6 +688,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',
@@ -577,6 +726,26 @@ const theme = {
           if: { open: true },
           tokens: { icon: PaletteIconChevronUp }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#d8dae2',
+            borderColor: '#636c8c',
+            color: '#394056',
+            iconColor: '#394056',
+            outerBorderColor: '#f9cebf',
+            outerBorderGap: 0,
+            outerBorderWidth: 3
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            color: '#ffffff',
+            iconColor: '#ffffff'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -606,6 +775,22 @@ const theme = {
             color: '#ffffff',
             iconColor: '#ffffff'
           }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#636c8c', iconColor: '#ffffff' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            backgroundColor: '#394056',
+            borderColor: '#636c8c',
+            color: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderColor: '#f9cebf',
+            outerBorderGap: 0,
+            outerBorderWidth: 3
+          }
         }
       ],
       tokens: {
@@ -679,6 +864,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',
@@ -714,6 +911,32 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: null,
+            outerBorderColor: '#f9cebf',
+            outerBorderWidth: 3
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#636c8c',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, hover: true, pressed: true },
+          tokens: {
+            backgroundColor: '#2b3145',
+            borderColor: '#636c8c',
+            color: '#ffffff',
+            outerBorderColor: '#f9cebf',
+            outerBorderWidth: 3
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -722,6 +945,14 @@ const theme = {
             color: '#ffffff'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#636c8c',
+            color: '#ffffff'
+          }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: {
@@ -800,6 +1031,18 @@ const theme = {
           values: [ 'alternative', 'subtle', 'grid', 'image', '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',
@@ -904,9 +1147,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: '#394056', borderWidth: 2 }
+        },
         {
           if: { interactive: true, pressed: true },
           tokens: {
@@ -937,6 +1191,12 @@ const theme = {
     },
     Carousel: {
       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 ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -963,6 +1223,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',
@@ -981,6 +1253,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomColor: '#394056',
+            borderBottomWidth: 2,
+            color: '#394056'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomColor: '#394056',
+            borderBottomWidth: 4,
+            color: '#394056'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -989,6 +1277,10 @@ const theme = {
             color: '#f6b5a0'
           }
         },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1006,6 +1298,22 @@ const theme = {
           }
         },
         { if: { inverse: true }, tokens: { color: '#f9f2dd' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#f9cebf',
+            borderBottomWidth: 2,
+            color: '#f9cebf'
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            borderBottomColor: '#f9f2dd',
+            borderBottomWidth: 4,
+            color: '#f9f2dd'
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -1053,6 +1361,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',
@@ -1069,6 +1389,11 @@ const theme = {
           if: { viewport: [ 'xs', 'sm' ] },
           tokens: { alignItems: 'flex-start', size: 48 }
         },
+        { if: { hover: true }, tokens: { borderColor: '#2b3145' } },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#394056', borderWidth: 2 }
+        },
         {
           if: { pressed: true },
           tokens: { borderColor: '#2b3145', borderWidth: 2 }
@@ -1095,6 +1420,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',
@@ -1106,6 +1443,10 @@ const theme = {
           if: { error: true },
           tokens: { inputBorderColor: '#bf1722' }
         },
+        {
+          if: { focus: true },
+          tokens: { inputOutlineColor: '#f39d80', inputOutlineWidth: 2 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -1114,6 +1455,19 @@ const theme = {
             inputBackgroundColor: '#cdcfd5',
             inputBorderColor: '#9c9faa'
           }
+        },
+        {
+          if: { hover: true },
+          tokens: { inputBackgroundColor: '#d8dae2' }
+        },
+        {
+          if: { checked: true, focus: true },
+          tokens: {
+            inputBorderColor: '#394056',
+            inputBorderWidth: 2,
+            inputOutlineColor: '#f39d80',
+            inputOutlineWidth: 3
+          }
         }
       ],
       tokens: {
@@ -1151,6 +1505,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',
@@ -1186,6 +1552,27 @@ const theme = {
             checkboxOuterBorderGap: 2
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#9c9faa',
+            checkboxInputBackgroundColor: '#fce6df',
+            checkboxInputBorderColor: '#394056',
+            outerBorderColor: '#cdcfd5'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#cdcfd5',
+            checkboxInputBackgroundColor: 'rgba(0, 0, 0, 0)',
+            checkboxInputBorderColor: '#394056',
+            checkboxInputOutlineColor: '#f39d80',
+            checkboxInputOutlineWidth: 2,
+            outerBorderColor: '#6a7080',
+            outerBorderGap: 2
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -1312,6 +1699,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.',
@@ -1325,17 +1724,53 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { color: '#394056', iconDisplace: 4 }
+        },
         { if: { pressed: true }, tokens: { color: '#2b3145' } },
+        {
+          if: { focus: true },
+          tokens: { color: '#636c8c', outerBorderColor: '#636c8c' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#394056', outerBorderColor: '#394056' }
+        },
         { if: { alternative: true }, tokens: { color: '#394056' } },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#636c8c' }
+        },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#2b3145' }
         },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#394056', outerBorderColor: '#394056' }
+        },
+        {
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#2b3145', outerBorderColor: '#2b3145' }
+        },
         { if: { inverse: true }, tokens: { color: '#f9f2dd' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f9cebf' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#f39d80' }
         },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { color: '#f9f2dd', outerBorderColor: '#f9f2dd' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#f39d80', outerBorderColor: '#f39d80' }
+        },
         {
           if: { size: 'large' },
           tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }
@@ -1368,6 +1803,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',
@@ -1380,6 +1827,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            bubbleBorderColor: '#cdcfd5',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            bubbleBorderColor: '#6a7080',
+            bubbleBorderRadius: 45,
+            bubbleBorderWidth: 1
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -1596,6 +2059,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 ]
+        },
         mini: { 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.',
@@ -1627,9 +2102,48 @@ const theme = {
             paddingTop: 0
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#394056',
+            borderWidth: 3,
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { expanded: false, hover: true },
+          tokens: {
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4,
+            borderTopLeftRadius: 4,
+            borderTopRightRadius: 4
+          }
+        },
+        {
+          if: { expanded: true, hover: true },
+          tokens: {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            borderTopLeftRadius: 4,
+            borderTopRightRadius: 4
+          }
+        },
+        {
+          if: { hover: true, mini: null },
+          tokens: { backgroundColor: '#f9f2dd' }
+        },
+        {
+          if: { hover: true, mini: true },
+          tokens: { backgroundColor: 'rgba(0, 0, 0, 0)' }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#cdcfd5', textLine: 'underline' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { backgroundColor: '#394056' }
         }
       ],
       tokens: {
@@ -1668,6 +2182,12 @@ 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 ]
+        },
         inverse: {
           description: 'Replaces the default colour with white.',
           type: 'variant',
@@ -1922,7 +2442,9 @@ const theme = {
         headerLineHeight: 1.5,
         headerMargin: 16,
         listItemColor: '#394056',
+        listItemFontName: 'SofiaPro',
         listItemFontSize: 16,
+        listItemFontWeight: '400',
         listItemLineHeight: 1.5,
         listItemMarkerFontSize: 16,
         listItemMarkerLineHeight: 1.5,
@@ -1936,6 +2458,7 @@ const theme = {
       tokens: {
         color: null,
         fontName: 'SofiaPro',
+        fontSize: 16,
         fontWeight: '400',
         lineHeight: 1,
         paddingLeft: 2,
@@ -1944,6 +2467,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',
@@ -2024,6 +2559,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',
@@ -2122,10 +2669,51 @@ const theme = {
           if: { inverse: true },
           tokens: { borderColor: '#f9f2dd', iconColor: '#f9f2dd' }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#394056',
+            iconColor: '#394056',
+            iconScale: 1.1
+          }
+        },
+        {
+          if: { hover: true, inactive: true },
+          tokens: { iconScale: 1 }
+        },
+        {
+          if: { hover: true, password: true },
+          tokens: {
+            backgroundColor: '#394056',
+            borderColor: '#394056',
+            iconColor: '#ffffff'
+          }
+        },
         {
           if: { password: true },
           tokens: { borderColor: 'rgba(0, 0, 0, 0)' }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { borderColor: '#f9cebf', iconColor: '#f9cebf' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#636c8c',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            borderColor: '#f9f2dd',
+            iconColor: '#f9f2dd',
+            outerBorderColor: '#f9f2dd',
+            outerBorderWidth: 3
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -2157,6 +2745,14 @@ const theme = {
             outerBorderWidth: 0
           }
         },
+        {
+          if: { focus: true, password: true, pressed: false },
+          tokens: {
+            outerBorderColor: '#636c8c',
+            outerBorderGap: 0,
+            outerBorderWidth: 1
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -2218,7 +2814,33 @@ const theme = {
             outerBorderWidth: 0
           }
         },
-        { if: { compact: true }, tokens: { outerBorderGap: 0 } }
+        {
+          if: { focus: true, pressed: true, raised: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#636c8c',
+            borderWidth: 0,
+            iconColor: '#ffffff',
+            outerBorderColor: '#636c8c'
+          }
+        },
+        {
+          if: { hover: true, pressed: false, raised: true },
+          tokens: { borderColor: '#394056', borderWidth: 3 }
+        },
+        {
+          if: { focus: true, pressed: false, raised: true },
+          tokens: {
+            borderColor: '#636c8c',
+            borderWidth: 4,
+            iconColor: '#636c8c'
+          }
+        },
+        { if: { compact: true }, tokens: { outerBorderGap: 0 } },
+        {
+          if: { hover: true, password: true },
+          tokens: { iconColor: '#9c9faa', outerBorderWidth: 0 }
+        }
       ],
       tokens: {
         backgroundColor: 'transparent',
@@ -2270,6 +2892,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',
@@ -2295,23 +2929,89 @@ const theme = {
       rules: [
         { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
         {
-          if: { pressed: true },
-          tokens: { color: '#2b3145', textLine: 'none' }
+          if: { focus: true },
+          tokens: {
+            color: '#636c8c',
+            outerBorderColor: '#636c8c',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { color: '#394056', textLine: 'none' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { color: '#2b3145', textLine: 'none' }
+        },
+        { if: { alternative: true }, tokens: { color: '#394056' } },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#2b3145' }
+        },
+        {
+          if: { alternative: true, pressed: true },
+          tokens: { color: '#2b3145', outerBorderWidth: 0 }
+        },
+        {
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#2b3145' }
+        },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#394056', outerBorderColor: '#394056' }
+        },
+        {
+          if: { alternative: true, focus: false, pressed: true },
+          tokens: { color: '#2b3145' }
+        },
+        {
+          if: {
+            alternative: true,
+            focus: true,
+            hover: true,
+            pressed: true
+          },
+          tokens: { color: '#2b3145', outerBorderColor: '#2b3145' }
+        },
+        {
+          if: {
+            alternative: true,
+            focus: false,
+            hover: true,
+            pressed: false
+          },
+          tokens: { color: '#636c8c' }
         },
-        { if: { alternative: true }, tokens: { color: '#394056' } },
         {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#2b3145', outerBorderWidth: 0 }
+          if: { alternative: true, focus: true, pressed: true },
+          tokens: { color: '#636c8c' }
         },
         {
-          if: { alternative: true, pressed: true },
-          tokens: { color: '#2b3145' }
+          if: { alternative: true, focus: true },
+          tokens: {
+            color: '#636c8c',
+            outerBorderColor: '#636c8c',
+            outerBorderWidth: 1
+          }
         },
         {
           if: { alternative: true, pressed: true },
           tokens: { color: '#2b3145' }
         },
         { if: { inverse: true }, tokens: { color: '#f9f2dd' } },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { color: '#f9f2dd', outerBorderColor: '#f9f2dd' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#f39d80', outerBorderColor: '#f39d80' }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f9cebf' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#f39d80' }
@@ -2334,7 +3034,19 @@ const theme = {
           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: '#394056', textLine: 'underline' }
+        },
+        {
+          if: { alternative: true, hover: true, quiet: true },
+          tokens: { color: '#2b3145', textLine: 'underline' }
+        },
+        {
+          if: { hover: true, inverse: true, quiet: true },
+          tokens: { color: '#f9cebf', textLine: 'underline' }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -2435,6 +3147,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',
@@ -2447,6 +3171,47 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true, hover: true, pressed: true },
+          tokens: {
+            groupBackgroundColor: '#636c8c',
+            groupBorderColor: 'rgba(0, 0, 0, 0)',
+            groupColor: '#f9f2dd',
+            itemBackgroundColor: '#636c8c',
+            itemColor: '#f9f2dd'
+          }
+        },
+        {
+          if: { focus: false, hover: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: '#fce6df',
+            groupColor: '#394056',
+            itemBackgroundColor: '#fce6df',
+            itemColor: '#394056'
+          }
+        },
+        {
+          if: { focus: true, hover: true, isChild: true, pressed: true },
+          tokens: {
+            itemBackgroundColor: '#636c8c',
+            itemBorderLeftColor: '#636c8c',
+            itemColor: '#f9f2dd'
+          }
+        },
+        {
+          if: { focus: true, pressed: false },
+          tokens: {
+            groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+            groupBorderColor: '#394056',
+            groupBorderWidth: 1,
+            groupColor: '#394056',
+            itemBorderBottomColor: '#394056',
+            itemBorderLeftColor: '#394056',
+            itemBorderRightColor: '#394056',
+            itemBorderTopColor: '#394056',
+            itemColor: '#394056'
+          }
+        },
         {
           if: { current: true, isChild: false },
           tokens: {
@@ -2457,7 +3222,7 @@ const theme = {
           }
         },
         {
-          if: { current: true, isChild: true },
+          if: { current: true, focus: false, isChild: true },
           tokens: {
             itemBackgroundColor: 'rgba(0, 0, 0, 0)',
             itemBorderBottomWidth: 0,
@@ -2485,6 +3250,23 @@ const theme = {
             itemBorderTopWidth: 0
           }
         },
+        {
+          if: { focus: true, isChild: true, pressed: false },
+          tokens: {
+            itemBorderBottomColor: '#394056',
+            itemBorderBottomWidth: 1,
+            itemBorderLeftColor: '#394056',
+            itemBorderLeftWidth: 4,
+            itemBorderRightColor: '#394056',
+            itemBorderRightWidth: 1,
+            itemBorderTopColor: '#394056',
+            itemBorderTopWidth: 1
+          }
+        },
+        {
+          if: { hover: true, isChild: true, pressed: false },
+          tokens: { itemBorderLeftColor: '#394056' }
+        },
         {
           if: { expanded: true },
           tokens: { groupIcon: PaletteIconChevronUp }
@@ -2735,6 +3517,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',
@@ -2762,6 +3556,34 @@ const theme = {
             fontWeight: '400'
           }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#d8dae2',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#394056',
+            outerBorderColor: '#f9cebf',
+            outerBorderGap: 0,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#f39d80',
+            borderColor: '#f39d80',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#636c8c',
+            color: '#ffffff'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3002,6 +3824,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',
@@ -3014,6 +3848,18 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#fce6df' } },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderBottomWidth: 2,
+            borderLeftWidth: 2,
+            borderRightWidth: 3,
+            borderTopWidth: 2,
+            textLine: 'underline'
+          }
+        },
         {
           if: { selected: true },
           tokens: { backgroundColor: '#f39d80' }
@@ -3021,6 +3867,10 @@ const theme = {
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#636c8c', color: '#f9f2dd' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { backgroundColor: '#636c8c', textLine: 'none' }
         }
       ],
       tokens: {
@@ -3061,6 +3911,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',
@@ -3118,6 +3980,24 @@ const theme = {
             width: 48
           }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#fce6df',
+            borderColor: '#636c8c',
+            iconDisplace: 4
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomWidth: 2,
+            borderColor: '#394056',
+            borderLeftWidth: 3,
+            borderRightWidth: 3,
+            borderTopWidth: 2
+          }
+        },
         {
           if: { selected: true },
           tokens: { backgroundColor: '#394056', color: '#f9f2dd' }
@@ -3126,7 +4006,25 @@ const theme = {
           if: { pressed: true },
           tokens: { backgroundColor: '#636c8c', color: '#f9f2dd' }
         },
-        { if: { direction: 'next' }, tokens: { borderRightWidth: 1 } }
+        { if: { direction: 'next' }, tokens: { borderRightWidth: 1 } },
+        {
+          if: { direction: 'next', focus: true },
+          tokens: {
+            borderBottomWidth: 2,
+            borderLeftWidth: 2,
+            borderRightWidth: 3,
+            borderTopWidth: 2
+          }
+        },
+        {
+          if: { direction: 'previous', focus: true },
+          tokens: {
+            borderBottomWidth: 2,
+            borderLeftWidth: 2,
+            borderRightWidth: 3,
+            borderTopWidth: 2
+          }
+        }
       ],
       tokens: {
         backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -3158,8 +4056,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: '#cdcfd5' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#9c9faa',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
         borderColor: '#cdcfd5',
@@ -3469,6 +4400,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',
@@ -3476,6 +4419,7 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
           if: { pressed: true },
           tokens: {
@@ -3485,6 +4429,14 @@ const theme = {
             color: '#9c9faa',
             iconColor: '#9c9faa'
           }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#394056' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderWidth: 1, outerBorderColor: '#9c9faa' }
         }
       ],
       tokens: {
@@ -3541,6 +4493,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',
@@ -3557,6 +4521,22 @@ const theme = {
           if: { viewport: 'xl' },
           tokens: { contentMaxDimension: 168, imageDimension: 168 }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            color: '#394056',
+            imageDimension: 140,
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            color: '#636c8c',
+            outerBorderColor: '#636c8c',
+            textLine: 'underline'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -3584,6 +4564,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',
@@ -3591,6 +4583,8 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#fce6df' } },
+        { if: { focus: true }, tokens: { backgroundColor: '#f9cebf' } },
         {
           if: { pressed: true },
           tokens: {
@@ -3635,6 +4629,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',
@@ -3643,6 +4649,18 @@ const theme = {
       },
       rules: [
         { if: { error: true }, tokens: {} },
+        {
+          if: { hover: true },
+          tokens: { inputBackgroundColor: '#fce6df' }
+        },
+        {
+          if: { checked: true, hover: true },
+          tokens: { inputBorderColor: '#394056' }
+        },
+        {
+          if: { focus: true },
+          tokens: { inputOutlineColor: '#f39d80' }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -3698,6 +4716,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',
@@ -3726,11 +4756,32 @@ const theme = {
           }
         },
         {
-          if: { checked: true },
+          if: { checked: true },
+          tokens: {
+            radioInputBorderColor: '#394056',
+            radioInputBorderWidth: 2,
+            radioOuterBorderGap: 2
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#9c9faa',
+            outerBorderColor: '#cdcfd5',
+            radioInputBackgroundColor: '#fce6df',
+            radioInputBorderColor: '#394056'
+          }
+        },
+        {
+          if: { focus: true },
           tokens: {
+            borderColor: '#cdcfd5',
+            outerBorderColor: '#6a7080',
+            outerBorderGap: 2,
+            radioInputBackgroundColor: 'rgba(0, 0, 0, 0)',
             radioInputBorderColor: '#394056',
-            radioInputBorderWidth: 2,
-            radioOuterBorderGap: 2
+            radioInputOutlineColor: '#f39d80',
+            radioInputOutlineWidth: 2
           }
         },
         {
@@ -3913,6 +4964,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',
@@ -3920,6 +4977,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: { outerBorderColor: '#cdcfd5', outerBorderWidth: 2 }
+        },
         {
           if: { focus: true },
           tokens: { outerBorderColor: '#f39d80', outerBorderWidth: 3 }
@@ -3960,6 +5021,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',
@@ -3977,6 +5050,23 @@ const theme = {
           if: { priority: 'high' },
           tokens: { backgroundColor: '#394056', iconColor: '#ffffff' }
         },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#636c8c',
+            borderWidth: 3,
+            iconColor: '#636c8c'
+          }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -4023,6 +5113,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',
@@ -4035,6 +5131,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { outerBorderColor: '#cdcfd5' }
+        },
         {
           if: { focus: true },
           tokens: { outerBorderColor: '#f39d80', outerBorderWidth: 3 }
@@ -4108,6 +5208,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',
@@ -4123,6 +5235,8 @@ const theme = {
             fontWeight: '400'
           }
         },
+        { if: { hover: true }, tokens: { backgroundColor: '#fce6df' } },
+        { if: { focus: true }, tokens: { backgroundColor: '#fce6df' } },
         {
           if: { active: true, type: 'child' },
           tokens: {
@@ -4216,13 +5330,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: '#2b3145', outlineColor: '#2b3145' }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
         borderRadius: 4,
@@ -4250,7 +5375,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,
@@ -4260,8 +5392,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,
@@ -4381,6 +5525,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',
@@ -4388,9 +5544,18 @@ const theme = {
         }
       },
       rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#cdcfd5' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#9c9faa',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
         }
       ],
       tokens: {
@@ -4545,6 +5710,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.',
@@ -4567,6 +5744,11 @@ const theme = {
             highlightColor: '#f39d80'
           }
         },
+        { if: { hover: true }, tokens: { color: '#636c8c' } },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#394056', borderWidth: 1, color: '#394056' }
+        },
         {
           if: { pressed: true },
           tokens: { borderWidth: 0, color: '#2b3145' }
@@ -4584,6 +5766,14 @@ const theme = {
             highlightColor: '#f9f2dd'
           }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f9cebf' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { borderColor: '#f9f2dd', color: '#f9f2dd' }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: { color: '#f39d80' }
@@ -4635,6 +5825,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',
@@ -4652,6 +5854,28 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#fcf8ee',
+            borderColor: '#636c8c',
+            color: '#394056',
+            outerBorderColor: '#f9cebf',
+            outerBorderGap: 0,
+            outerBorderWidth: 3
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f39d80'
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -4665,6 +5889,30 @@ const theme = {
             outerBorderWidth: 0
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f39d80'
+          }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            backgroundColor: '#f9f2dd',
+            borderColor: '#636c8c',
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f9f2dd',
+            outerBorderColor: '#f9cebf',
+            outerBorderGap: 0,
+            outerBorderWidth: 3
+          }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: {
@@ -4746,6 +5994,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',
@@ -4764,6 +6029,36 @@ const theme = {
         {
           if: { expanded: true },
           tokens: { icon: PaletteIconChevronUp }
+        },
+        {
+          if: { hover: true },
+          tokens: { iconColor: '#394056', iconOuterBorderColor: '#394056' }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            iconBackgroundColor: '#636c8c',
+            iconBorderColor: '#fefefc',
+            iconColor: '#fefefc',
+            iconOuterBorderGap: 4
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            iconOuterBorderColor: '#636c8c',
+            iconOuterBorderGap: 4,
+            iconOuterBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            iconBackgroundColor: '#636c8c',
+            iconBorderColor: '#fefefc',
+            iconColor: '#fefefc',
+            iconOuterBorderGap: 4
+          }
         }
       ],
       tokens: {
@@ -4797,6 +6092,12 @@ const theme = {
         expandTitlePaddingLeft: 0,
         expandTitleUnderline: 'none',
         icon: PaletteIconChevronDown,
+        iconBackgroundColor: 'rgba(0, 0, 0, 0)',
+        iconBorderColor: '#636c8c',
+        iconColor: '#636c8c',
+        iconOuterBorderColor: 'rgba(0, 0, 0, 0)',
+        iconOuterBorderGap: 0,
+        iconOuterBorderWidth: 0,
         listColor: '#394056',
         listFontName: 'SofiaPro',
         listFontSize: 16,
@@ -4858,6 +6159,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',
@@ -4880,6 +6187,14 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: {
+            outerBackgroundColor: '#cdcfd5',
+            outerBorderColor: '#cdcfd5',
+            outerBorderWidth: 1
+          }
+        },
         {
           if: { validation: 'success' },
           tokens: {
@@ -5035,6 +6350,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',
@@ -5052,10 +6379,25 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#9c9faa', switchColor: '#394056' }
+        },
         {
           if: { pressed: true },
           tokens: { backgroundColor: '#6a7080', switchColor: '#2b3145' }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#cdcfd5',
+            outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+            outerBorderColor: '#f39d80',
+            outerBorderGap: 3,
+            outerBorderWidth: 1,
+            switchColor: '#6a7080'
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -5065,10 +6407,40 @@ const theme = {
             switchColor: '#2b3145'
           }
         },
+        {
+          if: { hover: true, selected: true },
+          tokens: {
+            backgroundColor: '#f6b5a0',
+            iconColor: '#394056',
+            switchColor: '#394056'
+          }
+        },
         {
           if: { pressed: true, selected: true },
           tokens: { backgroundColor: '#6a7080', iconColor: '#6a7080' }
         },
+        {
+          if: { focus: true, selected: true },
+          tokens: {
+            iconColor: '#394056',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 1,
+            switchColor: '#394056'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            backgroundColor: '#6a7080',
+            outerBorderColor: '#f39d80',
+            outerBorderWidth: 1,
+            switchColor: '#2b3145'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#f39d80', outerBorderWidth: 1 }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -5188,6 +6560,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.',
@@ -5197,10 +6581,27 @@ const theme = {
       },
       rules: [
         { if: { inverse: true }, tokens: { iconColor: '#f5f5f7' } },
+        { if: { hover: true }, tokens: { iconScale: 1.25 } },
         { if: { pressed: true }, tokens: { iconColor: '#6a7080' } },
         {
           if: { inverse: true, pressed: true },
           tokens: { iconColor: '#f5f5f7' }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#f39d80' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { iconColor: '#f5f5f7', outerBorderColor: '#cdcfd5' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { iconColor: '#cdcfd5', outerBorderColor: '#cdcfd5' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { iconColor: '#6a7080', outerBorderColor: '#6a7080' }
         }
       ],
       tokens: {
@@ -5547,6 +6948,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',
@@ -5559,10 +6972,22 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#cdcfd5', borderWidth: 3 }
+        },
         {
           if: { pressed: true },
           tokens: { borderColor: '#6a7080', borderWidth: 3 }
         },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#6a7080',
+            borderWidth: 1,
+            outerBorderColor: '#6a7080'
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -5676,6 +7101,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.49.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.50.1' }
 }
 export default theme