@telus-uds/theme-allium 4.23.0 → 4.23.1

package/build/web/Button.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -13,6 +13,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',
@@ -51,6 +63,15 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderLeftWidth: 3,
+        borderRightWidth: 3,
+        borderTopWidth: 3
+      }
+    },
     {
       if: { priority: 'high' },
       tokens: {
@@ -68,6 +89,7 @@ const theme = {
         color: '#ffffff'
       }
     },
+    { if: { focus: true }, tokens: { outerBorderColor: '#2b8000' } },
     {
       if: { inverse: true },
       tokens: {
@@ -76,10 +98,22 @@ const theme = {
         color: '#ffffff'
       }
     },
+    {
+      if: { hover: true, priority: 'high' },
+      tokens: { backgroundColor: '#1f5c09' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { outerBorderColor: '#163e06' }
+    },
     {
       if: { inverse: true, priority: 'high' },
       tokens: { backgroundColor: '#ffffff', color: '#414547' }
     },
+    {
+      if: { hover: true, inverse: true, priority: 'high' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.8)' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: {
@@ -88,6 +122,10 @@ const theme = {
         color: '#414547'
       }
     },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff' }
+    },
     {
       if: { danger: true, priority: null },
       tokens: { borderColor: '#e12339', color: '#e12339' }
@@ -96,6 +134,10 @@ const theme = {
       if: { danger: true, inverse: true, priority: null },
       tokens: { backgroundColor: '#ffffff' }
     },
+    {
+      if: { danger: true, focus: true, priority: null },
+      tokens: { outerBorderColor: '#e12339' }
+    },
     {
       if: { danger: true, pressed: true, priority: null },
       tokens: {
@@ -104,6 +146,10 @@ const theme = {
         color: '#ffffff'
       }
     },
+    {
+      if: { danger: true, focus: true, pressed: true, priority: null },
+      tokens: { outerBorderColor: '#c12335' }
+    },
     { if: { width: 'full' }, tokens: { width: '100%' } },
     {
       if: { viewport: [ 'xs' ], width: 'responsive' },
@@ -144,6 +190,7 @@ const theme = {
         textLine: 'underline'
       }
     },
+    { if: { hover: true, text: true }, tokens: { textLine: 'none' } },
     {
       if: { priority: 'high', text: true },
       tokens: { color: '#2b8000' }
@@ -152,6 +199,31 @@ const theme = {
       if: { priority: 'low', text: true },
       tokens: { color: '#414547' }
     },
+    {
+      if: { focus: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 0,
+        color: '#2b8000',
+        outerBorderColor: '#2b8000'
+      }
+    },
+    {
+      if: { hover: true, priority: 'high', text: true },
+      tokens: { color: '#1f5c09' }
+    },
+    {
+      if: { hover: true, priority: null, text: true },
+      tokens: { color: '#1f5c09' }
+    },
+    {
+      if: { hover: true, priority: 'low', text: true },
+      tokens: { color: '#414547' }
+    },
+    {
+      if: { danger: true, hover: true, text: true },
+      tokens: { color: '#c12335' }
+    },
     {
       if: { pressed: true, text: true },
       tokens: {
@@ -161,6 +233,15 @@ const theme = {
         textLine: 'none'
       }
     },
+    {
+      if: { focus: true, pressed: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#163e06',
+        outerBorderColor: '#163e06',
+        textLine: 'none'
+      }
+    },
     {
       if: { inactive: true, text: true },
       tokens: {
@@ -174,6 +255,18 @@ const theme = {
       if: { inverse: true, text: true },
       tokens: { borderRadius: 0, color: '#ffffff' }
     },
+    {
+      if: { focus: true, inverse: true, text: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#b2b9bf',
+        outerBorderColor: '#b2b9bf'
+      }
+    },
     {
       if: { inactive: true, inverse: true, text: true },
       tokens: {

package/build/web/ButtonDropdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -9,6 +9,18 @@ import PaletteIconCaretDown from '@telus-uds/palette-allium/build/rn/icons/Caret
 import PaletteIconCaretUp from '@telus-uds/palette-allium/build/rn/icons/CaretUp'
 const theme = {
   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',
@@ -32,6 +44,16 @@ const theme = {
   },
   rules: [
     { if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#676e73',
+        color: '#414547',
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -41,6 +63,7 @@ const theme = {
         iconColor: '#ffffff'
       }
     },
+    { if: { hover: true }, tokens: { borderWidth: 3 } },
     {
       if: { inactive: true },
       tokens: {
@@ -61,9 +84,21 @@ const theme = {
         iconColor: '#ffffff'
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#7c53a5', iconBackground: '#613889' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: { outerBorderColor: '#4b286d' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#3f2a54', iconBackground: '#613889' }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { outerBorderGap: 2, outerBorderWidth: 2 }
     }
   ],
   tokens: {

package/build/web/ButtonGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/ButtonGroupItem.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 
 const theme = {
   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',
@@ -44,14 +56,36 @@ const theme = {
         color: '#ffffff'
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#676e73',
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: 3 } },
     {
       if: { selected: true },
       tokens: { backgroundColor: '#4b286d', borderWidth: 0, color: '#ffffff' }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#7c53a5' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#3f2a54' }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: { outerBorderColor: '#4b286d' }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { outerBorderColor: '#3f2a54' }
+    },
     {
       if: { inactive: true },
       tokens: { backgroundColor: '#b2b9bf', borderWidth: 0, color: '#ffffff' }

package/build/web/Callout.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Card.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -13,6 +13,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',
@@ -124,9 +136,20 @@ const theme = {
       }
     },
     {
-      if: { interactive: true, pressed: false },
+      if: { focus: false, interactive: true, pressed: false },
       tokens: { borderColor: '#ffffff', borderWidth: 2 }
     },
+    {
+      if: { hover: true, interactive: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        borderColor: 'transparent'
+      }
+    },
+    {
+      if: { focus: true, interactive: true },
+      tokens: { borderColor: '#4b286d', borderWidth: 2 }
+    },
     {
       if: { interactive: true, pressed: true },
       tokens: {

package/build/web/Carousel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/CarouselTabsPanelItem.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 
 const theme = {
   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',
@@ -26,6 +38,22 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        borderBottomColor: '#2b8000',
+        borderBottomWidth: 2,
+        color: '#2b8000'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomColor: '#2b8000',
+        borderBottomWidth: 4,
+        color: '#2b8000'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -34,6 +62,10 @@ const theme = {
         color: '#1f5c09'
       }
     },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { borderBottomWidth: 4 }
+    },
     {
       if: { inactive: true },
       tokens: {
@@ -53,6 +85,14 @@ const theme = {
       }
     },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 2,
+        color: '#ffffff'
+      }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: {
@@ -61,6 +101,22 @@ const theme = {
         color: '#676e73'
       }
     },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 4,
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: {
+        borderBottomColor: '#676e73',
+        borderBottomWidth: 4,
+        color: '#676e73'
+      }
+    },
     {
       if: { inverse: true, selected: true },
       tokens: {

package/build/web/CarouselThumbnail.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 
 const theme = {
   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',
@@ -24,6 +36,11 @@ const theme = {
       if: { viewport: [ 'xs', 'sm' ] },
       tokens: { alignItems: 'flex-start', size: 48 }
     },
+    { if: { hover: true }, tokens: { borderColor: '#2b8000' } },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#2b8000', borderWidth: 2 }
+    },
     {
       if: { pressed: true },
       tokens: { borderColor: '#1f5c09', borderWidth: 2 }

package/build/web/Checkbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -14,6 +14,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',
@@ -22,6 +34,10 @@ const theme = {
   },
   rules: [
     { if: { error: true }, tokens: { inputBorderColor: '#e12339' } },
+    {
+      if: { focus: true },
+      tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+    },
     {
       if: { inactive: true },
       tokens: {
@@ -31,6 +47,19 @@ const theme = {
         inputBorderColor: 'rgba(0, 0, 0, 0)',
         labelColor: '#676e73'
       }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
+    },
+    {
+      if: { checked: true, focus: true },
+      tokens: {
+        inputBorderColor: '#ffffff',
+        inputBorderWidth: 2,
+        inputOutlineColor: '#7c53a5',
+        inputOutlineWidth: 3
+      }
     }
   ],
   tokens: {

package/build/web/CheckboxCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -14,6 +14,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',
@@ -42,6 +54,24 @@ const theme = {
         paddingTop: 16
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#676e73',
+        checkboxOuterBorderColor: '#e3e6e8',
+        checkboxOuterBorderWidth: 2,
+        outerBorderColor: '#e3e6e8'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        checkboxInputBorderColor: '#7c53a5',
+        checkboxInputBorderWidth: 3,
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2
+      }
+    },
     {
       description: 'Pressed state matches hover state plus light grey background',
       if: { pressed: true },
@@ -57,6 +87,10 @@ const theme = {
       }
     },
     { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+    {
+      if: { checked: true, hover: true },
+      tokens: { borderColor: '#4b286d' }
+    },
     {
       if: { error: true },
       tokens: {

package/build/web/CheckboxCardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */