@telus-uds/theme-allium 3.31.0 → 4.0.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Sat, 27 May 2023 00:36:54 GMT
+ * Generated on Fri, 02 Jun 2023 00:26:54 GMT
  *
  */
 
@@ -178,60 +178,61 @@ module.exports = {
       rules: [
         {
           if: { background: 'lightest' },
-          tokens: { backgroundColor: '#ffffff' }
+          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
         },
         {
           if: { background: 'lighter' },
-          tokens: { backgroundColor: '#ffffff' }
+          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
         },
         {
           if: { background: 'light' },
-          tokens: { backgroundColor: '#f4f4f7' }
+          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
         },
         {
           if: { background: 'dark' },
-          tokens: { backgroundColor: '#414547' }
+          tokens: { backgroundColor: '#414547', borderColor: '#414547' }
         },
         {
           if: { background: 'darker' },
-          tokens: { backgroundColor: '#2c2e30' }
+          tokens: { backgroundColor: '#2c2e30', borderColor: '#2c2e30' }
         },
         {
           if: { background: 'darkest' },
-          tokens: { backgroundColor: '#000000' }
+          tokens: { backgroundColor: '#000000', borderColor: '#000000' }
         },
         {
           if: { background: 'critical' },
-          tokens: { backgroundColor: '#c12335' }
+          tokens: { backgroundColor: '#c12335', borderColor: '#c12335' }
         },
         {
           if: { background: 'danger' },
-          tokens: { backgroundColor: '#fff6f8' }
+          tokens: { backgroundColor: '#fff6f8', borderColor: '#fff6f8' }
         },
         {
           if: { background: 'warning' },
-          tokens: { backgroundColor: '#fff9ee' }
+          tokens: { backgroundColor: '#fff9ee', borderColor: '#fff9ee' }
         },
         {
           if: { background: 'positive' },
-          tokens: { backgroundColor: '#f4f9f2' }
+          tokens: { backgroundColor: '#f4f9f2', borderColor: '#f4f9f2' }
         },
         {
           if: { background: 'brand' },
-          tokens: { backgroundColor: '#4b286d' }
+          tokens: { backgroundColor: '#4b286d', borderColor: '#4b286d' }
         },
         {
           if: { background: 'white' },
-          tokens: { backgroundColor: '#ffffff' }
+          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
         },
         {
           if: { background: 'black' },
-          tokens: { backgroundColor: '#000000' }
+          tokens: { backgroundColor: '#000000', borderColor: '#000000' }
         },
         {
           if: { background: 'brandGradient' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -246,6 +247,7 @@ module.exports = {
           if: { background: 'greenGradient' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -260,6 +262,7 @@ module.exports = {
           if: { background: 'neutralGradient' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 180,
               stops: [
@@ -274,6 +277,7 @@ module.exports = {
           if: { background: 'purpleGradient' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -288,6 +292,7 @@ module.exports = {
           if: { background: 'featurePrimary' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -302,6 +307,7 @@ module.exports = {
           if: { background: 'featureSecondary' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -316,6 +322,7 @@ module.exports = {
           if: { background: 'featureNeutral' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 180,
               stops: [
@@ -330,6 +337,7 @@ module.exports = {
           if: { background: 'featureBrand' },
           tokens: {
             backgroundColor: null,
+            borderColor: null,
             gradient: {
               angle: 135,
               stops: [
@@ -341,7 +349,16 @@ module.exports = {
           }
         }
       ],
-      tokens: { backgroundColor: null, gradient: null }
+      tokens: {
+        backgroundColor: null,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderColor: null,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderWidth: 0,
+        gradient: null
+      }
     },
     Breadcrumbs: {
       appearances: { inverse: { type: 'variant', values: [ true ] } },
@@ -714,15 +731,25 @@ module.exports = {
       },
       rules: [
         { if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
         {
-          if: { pressed: true },
+          if: { selected: true },
+          tokens: { backgroundColor: '#4b286d', iconBackground: '#7c53a5' }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5', iconBackground: '#613889' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#3f2a54', iconBackground: '#613889' }
+        },
+        {
+          if: { focus: true, selected: true },
           tokens: {
-            backgroundColor: '#676e73',
-            borderColor: '#676e73',
-            borderWidth: 0,
-            color: '#ffffff',
-            iconBackground: '#414547',
-            iconColor: '#ffffff'
+            backgroundColor: '#4b286d',
+            iconBackground: '#7c53a5',
+            outerBorderColor: '#4b286d'
           }
         },
         {
@@ -734,7 +761,19 @@ module.exports = {
             outerBorderWidth: 2
           }
         },
-        { if: { hover: true }, tokens: { borderWidth: 3 } },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconBackground: '#414547',
+            iconColor: '#ffffff',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
+          }
+        },
         {
           if: { selected: true },
           tokens: {
@@ -759,14 +798,21 @@ module.exports = {
         },
         {
           if: { focus: true, pressed: true, selected: true },
-          tokens: { iconBackground: '#7c53a5', outerBorderColor: '#3f2a54' }
+          tokens: {
+            iconBackground: '#7c53a5',
+            outerBorderColor: '#3f2a54',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
         },
         {
           if: { inactive: true },
           tokens: {
-            backgroundColor: '#b2b9bf',
+            backgroundColor: '#ffffff',
             borderWidth: 0,
-            color: '#ffffff'
+            color: '#b2b9bf',
+            iconBackground: '#f4f4f7',
+            iconColor: '#b2b9bf'
           }
         }
       ],
@@ -789,7 +835,7 @@ module.exports = {
         iconPadding: 2,
         iconPosition: 'right',
         iconSize: 16,
-        iconSpace: 2,
+        iconSpace: 1,
         iconTranslateX: 0,
         iconTranslateY: 0,
         lineHeight: 1.42857142857,
@@ -1391,15 +1437,15 @@ module.exports = {
         },
         {
           if: { size: 'large' },
-          tokens: { fontSize: 20, iconSize: 24, textLineHeight: 1.95 }
+          tokens: { fontSize: 20, iconSize: 24 }
         },
         {
           if: { size: 'small' },
-          tokens: { fontSize: 14, iconSize: 14, textLineHeight: 2.12 }
+          tokens: { fontSize: 14, iconSize: 14 }
         },
         {
           if: { size: 'micro' },
-          tokens: { fontSize: 12, iconSize: 12, textLineHeight: 1.92 }
+          tokens: { fontSize: 12, iconSize: 12 }
         }
       ],
       tokens: {
@@ -1411,8 +1457,7 @@ module.exports = {
         leftIcon: PaletteIconArrowLeft,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         rightIcon: PaletteIconArrowRight,
-        textLine: 'none',
-        textLineHeight: 2.25
+        textLine: 'none'
       }
     },
     Countdown: {
@@ -1638,7 +1683,51 @@ module.exports = {
           tokens: { icon: PaletteIconCaretUp }
         }
       ],
-      tokens: { icon: PaletteIconCaretDown, size: 4 }
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        icon: PaletteIconCaretDown,
+        iconColor: '#2b8000',
+        iconGap: 8,
+        iconPaddingTop: 4,
+        iconPosition: 'left',
+        iconSize: 16,
+        justifyContent: 'flex-start',
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        size: 4,
+        verticalAlign: 'top'
+      }
+    },
+    ExpandCollapseMiniPanel: {
+      appearances: { compact: { type: 'variant', values: [ true ] } },
+      rules: [
+        {
+          if: { compact: true },
+          tokens: {
+            contentPaddingBottom: 16,
+            contentPaddingRight: 0,
+            contentPaddingTop: 8
+          }
+        }
+      ],
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 0,
+        borderWidth: 0,
+        collapseDuration: 250,
+        contentPaddingBottom: 16,
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        expandDividerColor: 'rgba(0, 0, 0, 0)',
+        expandDividerWidth: 0,
+        expandDuration: 300,
+        marginBottom: 0
+      }
     },
     ExpandCollapsePanel: {
       appearances: { compact: { type: 'variant', values: [ true ] } },
@@ -1663,8 +1752,8 @@ module.exports = {
         contentPaddingRight: 0,
         contentPaddingTop: 0,
         expandDividerColor: 'rgba(0, 0, 0, 0)',
+        expandDividerWidth: 0,
         expandDuration: 300,
-        expanddDividerWidth: 0,
         marginBottom: 0
       }
     },
@@ -2264,15 +2353,11 @@ module.exports = {
         },
         {
           if: { size: 'large' },
-          tokens: { blockFontSize: 20, blockLineHeight: 1.6, iconSize: 24 }
+          tokens: { blockFontSize: 20, blockLineHeight: 1.25, iconSize: 24 }
         },
         {
           if: { size: 'small' },
-          tokens: {
-            blockFontSize: 14,
-            blockLineHeight: 1.42857142857,
-            iconSize: 20
-          }
+          tokens: { blockFontSize: 14, blockLineHeight: 1, iconSize: 20 }
         },
         {
           if: { size: 'micro' },
@@ -2280,7 +2365,7 @@ module.exports = {
             blockFontName: 'HelveticaNow',
             blockFontSize: 12,
             blockFontWeight: '500',
-            blockLineHeight: 1.33333333333,
+            blockLineHeight: 1.125,
             iconSize: 16
           }
         },
@@ -3725,15 +3810,6 @@ module.exports = {
             radioOuterBorderWidth: 2
           }
         },
-        {
-          description: 'Pressed state matches hover state plus light grey background',
-          if: { pressed: true },
-          tokens: {
-            backgroundColor: '#f4f4f7',
-            borderColor: '#676e73',
-            outerBorderColor: '#e3e6e8'
-          }
-        },
         {
           if: { focus: true },
           tokens: {
@@ -3744,20 +3820,20 @@ module.exports = {
           }
         },
         {
-          if: { inactive: true },
+          description: 'Pressed state matches hover state plus light grey background',
+          if: { pressed: true },
           tokens: {
             backgroundColor: '#f4f4f7',
-            borderColor: 'transparent',
-            color: '#676e73',
-            radioInputBackgroundColor: '#e3e6e8',
-            radioInputBorderColor: 'rgba(0, 0, 0, 0)'
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            outerBorderGap: 0,
+            radioInputBorderColor: '#676e73',
+            radioInputBorderWidth: 1,
+            radioOuterBorderColor: '#e3e6e8',
+            radioOuterBorderWidth: 3
           }
         },
         { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
-        {
-          if: { checked: true, pressed: true },
-          tokens: { borderColor: '#4b286d' }
-        },
         {
           if: { checked: true, hover: true },
           tokens: { borderColor: '#4b286d' }
@@ -3769,6 +3845,21 @@ module.exports = {
             color: '#e12339',
             radioInputBorderColor: '#e12339'
           }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#676e73',
+            radioCheckedBackgroundColor: '#676e73',
+            radioInputBackgroundColor: '#b2b9bf',
+            radioInputBorderColor: 'transparent',
+            radioInputSize: 12,
+            radioOuterBorderColor: '#b2b9bf',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
+          }
         }
       ],
       tokens: {
@@ -3827,8 +3918,8 @@ module.exports = {
       },
       rules: [
         {
-          if: { fullWidth: null, viewport: [ 'lg', 'xl' ] },
-          tokens: { direction: 'row', space: 4 }
+          if: { fullWidth: null, viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: { direction: 'row', space: 5 }
         }
       ],
       tokens: { direction: 'column', fieldSpace: 3, space: 3 }
@@ -3930,18 +4021,24 @@ module.exports = {
       rules: [
         {
           if: { hover: true, inactive: null },
-          tokens: {
-            outerBackgroundColor: '#e3e6e8',
-            outerBorderColor: '#e3e6e8'
-          }
+          tokens: { outerBorderWidth: 2 }
         },
         {
           if: { focus: true },
-          tokens: { borderColor: '#7c53a5', borderWidth: 3 }
+          tokens: {
+            borderColor: '#7c53a5',
+            borderWidth: 3,
+            outerBorderWidth: 0
+          }
         },
         {
           if: { inactive: true },
-          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: '#f4f4f7',
+            color: '#676e73',
+            placeholderColor: '#676e73'
+          }
         }
       ],
       tokens: {
@@ -3949,19 +4046,19 @@ module.exports = {
         borderColor: '#676e73',
         borderRadius: 32,
         borderWidth: 1,
-        buttonsGap: 1,
+        buttonsGap: 2,
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
         fontName: 'HelveticaNow',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
-        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
-        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBackgroundColor: '#e3e6e8',
+        outerBorderColor: '#e3e6e8',
         outerBorderRadius: 32,
-        outerBorderWidth: 2,
+        outerBorderWidth: 0,
         paddingBottom: 12,
-        paddingLeft: 24,
+        paddingLeft: 16,
         paddingRight: 8,
         paddingTop: 12,
         placeholderColor: '#414547',
@@ -4025,12 +4122,19 @@ module.exports = {
           }
         },
         {
-          if: { inactive: true },
+          if: { inactive: true, priority: 'high' },
           tokens: {
             backgroundColor: '#e3e6e8',
             borderWidth: 0,
             iconColor: '#676e73'
           }
+        },
+        {
+          if: { inactive: true, priority: null },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: 'rgba(0, 0, 0, 0)'
+          }
         }
       ],
       tokens: {
@@ -5311,7 +5415,15 @@ module.exports = {
           description: 'Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n' +
             '  use the tokens prop.',
           type: 'variant',
-          values: [ 'secondary', 'tertiary' ]
+          values: [
+            'default',      'brand',
+            'dark',         'light',
+            'positive',     'warning',
+            'danger',       'black',
+            'white',        'brand2',
+            'brand3',       'alternative1',
+            'alternative2', 'alternative3'
+          ]
         },
         compact: {
           description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
@@ -5349,25 +5461,24 @@ module.exports = {
         }
       },
       rules: [
-        { if: { colour: 'secondary' }, tokens: { color: '#414547' } },
         {
           if: { size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ] },
           tokens: { color: '#4b286d' }
         },
         {
           if: {
-            colour: 'secondary',
+            colour: 'dark',
             size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ]
           },
           tokens: { color: '#2c2e30' }
         },
         {
-          if: { colour: 'tertiary', size: 'h6' },
+          if: { colour: 'light', size: 'h6' },
           tokens: { color: '#676e73' }
         },
         { if: { size: 'eyebrow' }, tokens: { color: '#414547' } },
         {
-          if: { colour: 'secondary', size: 'eyebrow' },
+          if: { colour: 'dark', size: 'eyebrow' },
           tokens: { color: '#7c53a5' }
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
@@ -5580,6 +5691,29 @@ module.exports = {
         {
           if: { weight: 'bold' },
           tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+        },
+        { if: { colour: 'default' }, tokens: { color: '#414547' } },
+        { if: { colour: 'brand' }, tokens: { color: '#4b286d' } },
+        { if: { colour: 'dark' }, tokens: { color: '#2c2e30' } },
+        { if: { colour: 'light' }, tokens: { color: '#676e73' } },
+        { if: { colour: 'positive' }, tokens: { color: '#2b8000' } },
+        { if: { colour: 'warning' }, tokens: { color: '#b4872c' } },
+        { if: { colour: 'danger' }, tokens: { color: '#c12335' } },
+        { if: { colour: 'black' }, tokens: { color: '#000000' } },
+        { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+        { if: { colour: 'brand2' }, tokens: { color: '#2b8000' } },
+        { if: { colour: 'brand3' }, tokens: { color: '#7c53a5' } },
+        {
+          if: { colour: 'alternative1' },
+          tokens: { color: '#4b286d' }
+        },
+        {
+          if: { colour: 'alternative2' },
+          tokens: { color: '#4b286d' }
+        },
+        {
+          if: { colour: 'alternative3' },
+          tokens: { color: '#4b286d' }
         }
       ],
       tokens: {
@@ -5785,5 +5919,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.28.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.29.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.31.0",
+  "version": "4.0.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -8,12 +8,12 @@
   "main": "build/rn/theme.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.19.0",
-    "@telus-uds/system-theme-tokens": "^2.28.0",
-    "@telus-uds/system-tokens": "^0.7.8"
+    "@telus-uds/palette-allium": "^2.19.1",
+    "@telus-uds/system-theme-tokens": "^2.29.0",
+    "@telus-uds/system-tokens": "^0.7.9"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.19.0"
+    "@telus-uds/palette-allium": "^2.19.1"
   },
   "files": [
     "build",