@telus-uds/theme-allium 3.12.0 → 3.14.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 09 Feb 2023 23:33:39 GMT
+ * Generated on Tue, 07 Mar 2023 21:06:38 GMT
  *
  */
 
@@ -10,6 +10,8 @@ const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/Car
 const PaletteIconArrowRight = require('@telus-uds/palette-allium/build/rn/icons/ArrowRight')
 const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
 const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
+const PaletteIconChevronLeft = require('@telus-uds/palette-allium/build/rn/icons/ChevronLeft')
+const PaletteIconChevronRight = require('@telus-uds/palette-allium/build/rn/icons/ChevronRight')
 const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
 const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
 const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
@@ -37,13 +39,17 @@ module.exports = {
         background: {
           description: 'Background colour of box. Transparent if not specified.',
           values: [
-            'light',           'lightest',
-            'dark',            'darkest',
-            'critical',        'danger',
-            'warning',         'positive',
-            'brand',           'black',
-            'brandGradient',   'greenGradient',
-            'neutralGradient', 'purpleGradient'
+            'lightest',         'lighter',
+            'light',            'dark',
+            'darker',           'darkest',
+            'critical',         'danger',
+            'warning',          'positive',
+            'brand',            'white',
+            'black',            'purpleGradient',
+            'greenGradient',    'neutralGradient',
+            'brandGradient',    'featurePrimary',
+            'featureSecondary', 'featureNeutral',
+            'featureBrand'
           ]
         }
       },
@@ -53,8 +59,8 @@ module.exports = {
           tokens: { backgroundColor: '#ffffff' }
         },
         {
-          if: { background: 'black' },
-          tokens: { backgroundColor: '#000000' }
+          if: { background: 'lighter' },
+          tokens: { backgroundColor: '#ffffff' }
         },
         {
           if: { background: 'light' },
@@ -65,9 +71,13 @@ module.exports = {
           tokens: { backgroundColor: '#414547' }
         },
         {
-          if: { background: 'darkest' },
+          if: { background: 'darker' },
           tokens: { backgroundColor: '#2c2e30' }
         },
+        {
+          if: { background: 'darkest' },
+          tokens: { backgroundColor: '#000000' }
+        },
         {
           if: { background: 'critical' },
           tokens: { backgroundColor: '#c12335' }
@@ -88,6 +98,14 @@ module.exports = {
           if: { background: 'brand' },
           tokens: { backgroundColor: '#4b286d' }
         },
+        {
+          if: { background: 'white' },
+          tokens: { backgroundColor: '#ffffff' }
+        },
+        {
+          if: { background: 'black' },
+          tokens: { backgroundColor: '#000000' }
+        },
         {
           if: { background: 'brandGradient' },
           tokens: {
@@ -143,6 +161,62 @@ module.exports = {
               type: 'linear'
             }
           }
+        },
+        {
+          if: { background: 'featurePrimary' },
+          tokens: {
+            backgroundColor: null,
+            gradient: {
+              angle: 135,
+              stops: [
+                { color: '#4b286d', stop: 0 },
+                { color: '#e53293', stop: 1 }
+              ],
+              type: 'linear'
+            }
+          }
+        },
+        {
+          if: { background: 'featureSecondary' },
+          tokens: {
+            backgroundColor: null,
+            gradient: {
+              angle: 135,
+              stops: [
+                { color: '#00784a', stop: 0 },
+                { color: '#66cc00', stop: 1 }
+              ],
+              type: 'linear'
+            }
+          }
+        },
+        {
+          if: { background: 'featureNeutral' },
+          tokens: {
+            backgroundColor: null,
+            gradient: {
+              angle: 180,
+              stops: [
+                { color: '#ffffff', stop: 0 },
+                { color: '#f4f4f7', stop: 1 }
+              ],
+              type: 'linear'
+            }
+          }
+        },
+        {
+          if: { background: 'featureBrand' },
+          tokens: {
+            backgroundColor: null,
+            gradient: {
+              angle: 135,
+              stops: [
+                { color: '#4b286d', stop: 0 },
+                { color: '#613889', stop: 1 }
+              ],
+              type: 'linear'
+            }
+          }
         }
       ],
       tokens: { backgroundColor: null, gradient: null }
@@ -208,10 +282,6 @@ module.exports = {
             color: '#ffffff'
           }
         },
-        {
-          if: { hover: true, priority: 'high' },
-          tokens: { backgroundColor: '#1f5c09' }
-        },
         {
           if: { pressed: true },
           tokens: {
@@ -224,10 +294,6 @@ module.exports = {
           if: { focus: true },
           tokens: { outerBorderColor: '#2b8000' }
         },
-        {
-          if: { focus: true, pressed: true },
-          tokens: { outerBorderColor: '#163e06' }
-        },
         {
           if: { inverse: true },
           tokens: {
@@ -236,6 +302,14 @@ module.exports = {
             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' }
@@ -324,6 +398,7 @@ module.exports = {
         {
           if: { focus: true, text: true },
           tokens: {
+            borderColor: 'rgba(0, 0, 0, 0)',
             borderRadius: 0,
             color: '#2b8000',
             outerBorderColor: '#2b8000'
@@ -354,14 +429,6 @@ module.exports = {
             textLine: 'none'
           }
         },
-        {
-          if: { focus: true, text: true },
-          tokens: {
-            borderColor: 'rgba(0, 0, 0, 0)',
-            color: '#2b8000',
-            outerBorderColor: '#2b8000'
-          }
-        },
         {
           if: { focus: true, pressed: true, text: true },
           tokens: {
@@ -1081,28 +1148,58 @@ module.exports = {
     CheckboxGroup: { appearances: {}, rules: [], tokens: { fieldSpace: 2, space: 2 } },
     ChevronLink: {
       appearances: {
+        alternative: { type: 'variant', values: [ true ] },
         hover: {
           description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
           platforms: [ 'rn' ],
           type: 'state',
           values: [ true ]
         },
+        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.',
+          type: 'state',
+          values: [ true ]
+        },
         size: {
-          description: 'Sets the size of the text and icon; these variants are shared with Link',
+          description: 'Sets the size of the text and icon; these variants are shared with ChevronLink',
           type: 'variant',
           values: [ 'large', 'small', 'micro' ]
         }
       },
       rules: [
-        { if: { hover: true }, tokens: { iconDisplace: 4 } },
-        { if: { size: 'large' }, tokens: { iconSize: 24 } }
+        { if: { hover: true }, tokens: { color: '#1f5c09' } },
+        { if: { pressed: true }, tokens: { color: '#163e06' } },
+        { if: { alternative: true }, tokens: { color: '#414547' } },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { alternative: true, pressed: true },
+          tokens: { color: '#2c2e30' }
+        },
+        { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f4f4f7' }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: { color: '#e3e6e8' }
+        },
+        { if: { size: 'large' }, tokens: { iconSize: 20 } },
+        { if: { size: 'small' }, tokens: { iconSize: 14 } },
+        { if: { size: 'micro' }, tokens: { iconSize: 12 } }
       ],
       tokens: {
+        color: '#2b8000',
         iconDisplace: 0,
-        iconSize: 20,
+        iconSize: 24,
         iconSpace: 1,
-        leftIcon: PaletteIconArrowLeft,
-        rightIcon: PaletteIconArrowRight,
+        leftIcon: PaletteIconChevronLeft,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        rightIcon: PaletteIconChevronRight,
         textLine: 'none'
       }
     },
@@ -1307,7 +1404,7 @@ module.exports = {
         { if: { color: 'brand' }, tokens: { color: '#4b286d' } },
         { if: { color: 'default' }, tokens: { color: '#414547' } },
         { if: { color: 'subtle' }, tokens: { color: '#676e73' } },
-        { if: { color: 'success' }, tokens: { color: '#66cc00' } },
+        { if: { color: 'success' }, tokens: { color: '#2b8000' } },
         { if: { color: 'danger' }, tokens: { color: '#c12335' } },
         { if: { color: 'warning' }, tokens: { color: '#b4872c' } },
         { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
@@ -4020,9 +4117,9 @@ module.exports = {
           description: 'Index of the intended position on the spacing scale',
           type: 'state',
           values: [
-             0,  1, 2, 3, 4,
-             5,  6, 7, 8, 9,
-            10, 11
+             0, 1, 2, 3,  4,  5,
+             6, 7, 8, 9, 10, 11,
+            12
           ]
         },
         viewport: {
@@ -4034,6 +4131,7 @@ module.exports = {
       rules: [
         { if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
         { if: { space: 11 }, tokens: { size: 96 } },
+        { if: { space: 12 }, tokens: { size: 120 } },
         { if: { space: 10 }, tokens: { size: 80 } },
         { if: { space: 9 }, tokens: { size: 64 } },
         { if: { space: 8 }, tokens: { size: 48 } },
@@ -4073,5 +4171,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.10.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.12.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.12.0",
+  "version": "3.14.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.10.0",
-    "@telus-uds/system-theme-tokens": "^2.10.0",
-    "@telus-uds/system-tokens": "^0.6.2"
+    "@telus-uds/palette-allium": "^2.10.2",
+    "@telus-uds/system-theme-tokens": "^2.12.0",
+    "@telus-uds/system-tokens": "^0.6.4"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.10.0"
+    "@telus-uds/palette-allium": "^2.10.2"
   },
   "files": [
     "build",

package/theme.json

@@ -30,20 +30,27 @@
         "background": {
           "description": "Background colour of box. Transparent if not specified.",
           "values": [
-            "light",
             "lightest",
+            "lighter",
+            "light",
             "dark",
+            "darker",
             "darkest",
             "critical",
             "danger",
             "warning",
             "positive",
             "brand",
+            "white",
             "black",
-            "brandGradient",
+            "purpleGradient",
             "greenGradient",
             "neutralGradient",
-            "purpleGradient"
+            "brandGradient",
+            "featurePrimary",
+            "featureSecondary",
+            "featureNeutral",
+            "featureBrand"
           ]
         }
       },
@@ -58,10 +65,10 @@
         },
         {
           "if": {
-            "background": "black"
+            "background": "lighter"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}"
+            "backgroundColor": "{palette.color.white}"
           }
         },
         {
@@ -82,12 +89,20 @@
         },
         {
           "if": {
-            "background": "darkest"
+            "background": "darker"
           },
           "tokens": {
             "backgroundColor": "{palette.color.greyThunder}"
           }
         },
+        {
+          "if": {
+            "background": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
         {
           "if": {
             "background": "critical"
@@ -128,6 +143,22 @@
             "backgroundColor": "{palette.color.purpleTelus}"
           }
         },
+        {
+          "if": {
+            "background": "white"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "background": "black"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
         {
           "if": {
             "background": "brandGradient"
@@ -163,6 +194,42 @@
             "backgroundColor": "{system.color.none}",
             "gradient": "{palette.gradient.purple}"
           }
+        },
+        {
+          "if": {
+            "background": "featurePrimary"
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.none}",
+            "gradient": "{palette.gradient.purple}"
+          }
+        },
+        {
+          "if": {
+            "background": "featureSecondary"
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.none}",
+            "gradient": "{palette.gradient.green}"
+          }
+        },
+        {
+          "if": {
+            "background": "featureNeutral"
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.none}",
+            "gradient": "{palette.gradient.neutral}"
+          }
+        },
+        {
+          "if": {
+            "background": "featureBrand"
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.none}",
+            "gradient": "{palette.gradient.brand}"
+          }
         }
       ],
       "tokens": {
@@ -225,15 +292,6 @@
             "color": "{palette.color.white}"
           }
         },
-        {
-          "if": {
-            "hover": true,
-            "priority": "high"
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.greenSanFelix}"
-          }
-        },
         {
           "if": {
             "pressed": true
@@ -254,21 +312,30 @@
         },
         {
           "if": {
-            "focus": true,
-            "pressed": true
+            "inverse": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.greenDarkFern}"
+            "backgroundColor": "{system.color.none}",
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "hover": true,
+            "priority": "high"
           },
           "tokens": {
-            "backgroundColor": "{system.color.none}",
-            "borderColor": "{palette.color.white}",
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
         {
@@ -449,6 +516,7 @@
             "text": true
           },
           "tokens": {
+            "borderColor": "{palette.color.transparent}",
             "borderRadius": "{palette.radius.none}",
             "color": "{palette.color.greenAccessible}",
             "outerBorderColor": "{palette.color.greenAccessible}"
@@ -506,17 +574,6 @@
             "textLine": "{system.textLine.none}"
           }
         },
-        {
-          "if": {
-            "focus": true,
-            "text": true
-          },
-          "tokens": {
-            "borderColor": "{palette.color.transparent}",
-            "color": "{palette.color.greenAccessible}",
-            "outerBorderColor": "{palette.color.greenAccessible}"
-          }
-        },
         {
           "if": {
             "focus": true,
@@ -1354,9 +1411,18 @@
     },
     "ChevronLink": {
       "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
         "hover": "{appearances.ChevronLink.hover}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.ChevronLink.pressed}",
         "size": {
-          "description": "Sets the size of the text and icon; these variants are shared with Link",
+          "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
           "type": "variant",
           "values": ["large", "small", "micro"]
         }
@@ -1367,7 +1433,67 @@
             "hover": true
           },
           "tokens": {
-            "iconDisplace": "{palette.size.size4}"
+            "color": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyMystic}"
           }
         },
         {
@@ -1375,16 +1501,34 @@
             "size": "large"
           },
           "tokens": {
-            "iconSize": "{palette.size.size24}"
+            "iconSize": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size14}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size12}"
           }
         }
       ],
       "tokens": {
+        "color": "{palette.color.greenAccessible}",
         "iconDisplace": "{palette.size.size0}",
-        "iconSize": "{palette.size.size20}",
+        "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.1}",
-        "leftIcon": "{palette.icon.ArrowLeft}",
-        "rightIcon": "{palette.icon.ArrowRight}",
+        "leftIcon": "{palette.icon.ChevronLeft}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "rightIcon": "{palette.icon.ChevronRight}",
         "textLine": "{system.textLine.none}"
       }
     },
@@ -1672,7 +1816,7 @@
             "color": "success"
           },
           "tokens": {
-            "color": "{palette.color.greenTelus}"
+            "color": "{palette.color.greenAccessible}"
           }
         },
         {
@@ -4968,6 +5112,14 @@
             "size": "{palette.size.size96}"
           }
         },
+        {
+          "if": {
+            "space": 12
+          },
+          "tokens": {
+            "size": "{palette.size.size120}"
+          }
+        },
         {
           "if": {
             "space": 10