@telus-uds/theme-allium 3.10.0 → 3.11.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 08 Nov 2022 01:31:50 GMT
+ * Generated on Wed, 07 Dec 2022 15:09:21 GMT
  *
  */
 
@@ -681,6 +681,8 @@ module.exports = {
         fontName: 'HelveticaNow',
         fontSize: 14,
         fontWeight: '700',
+        iconSize: 20,
+        iconSpace: 2,
         lineHeight: 1.5,
         minWidth: 0,
         opacity: 1,
@@ -1109,8 +1111,9 @@ module.exports = {
         icon: PaletteIconCaretDown,
         iconColor: '#2b8000',
         iconGap: 8,
+        iconPaddingTop: 4,
         iconPosition: 'left',
-        iconSize: 24,
+        iconSize: 16,
         justifyContent: 'flex-start',
         paddingBottom: 16,
         paddingLeft: 8,
@@ -2210,6 +2213,60 @@ module.exports = {
         shadow: null
       }
     },
+    QuickLinksFeature: {
+      appearances: {},
+      rules: [],
+      tokens: { stackGap: 5, stackJustify: 'center', stackSpace: 5 }
+    },
+    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' ],
+          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' ],
+          type: 'state',
+          values: [ true ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { color: '#1f5c09' } },
+        { if: { focus: true }, tokens: { color: '#1f5c09' } },
+        {
+          if: { viewport: 'xl' },
+          tokens: { contentMaxDimension: 184, imageDimension: 168 }
+        },
+        { if: { hover: true }, tokens: { imageDimension: 140 } },
+        {
+          if: { hover: true, viewport: 'xl' },
+          tokens: { imageDimension: 184 }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#1f5c09' }
+        }
+      ],
+      tokens: {
+        color: '#2c2e30',
+        contentAlignItems: 'center',
+        contentDirection: 'column',
+        contentMaxDimension: 140,
+        contentSpace: 3,
+        imageDimension: 128,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        textAlign: 'center',
+        textLine: 'none'
+      }
+    },
     QuickLinksList: {
       appearances: {
         focus: {
@@ -2907,6 +2964,11 @@ module.exports = {
     },
     StepTracker: {
       appearances: {
+        inverse: {
+          description: 'Styles the step tracker for using on dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -2917,6 +2979,22 @@ module.exports = {
         {
           if: { viewport: [ 'lg', 'xl' ] },
           tokens: { showStepLabel: true, showStepTrackerLabel: false }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            connectorColor: '#ffffff',
+            connectorCompletedColor: '#ffffff',
+            knobBackgroundColor: 'rgba(0, 0, 0, 0)',
+            knobBorderColor: '#ffffff',
+            knobCompletedBackgroundColor: '#ffffff',
+            knobCompletedBorderColor: '#ffffff',
+            knobCurrentBackgroundColor: 'rgba(0, 0, 0, 0)',
+            knobCurrentBorderColor: '#ffffff',
+            knobCurrentInnerColor: '#ffffff',
+            labelColor: '#ffffff',
+            labelCurrentColor: '#ffffff'
+          }
         }
       ],
       tokens: {
@@ -3836,6 +3914,10 @@ module.exports = {
           if: { bold: true },
           tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
         },
+        {
+          if: { bold: true, size: 'micro' },
+          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+        },
         {
           if: { bold: true, size: 'display1' },
           tokens: { fontName: 'HelveticaNow', fontWeight: '400' }
@@ -3951,5 +4033,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.8.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.9.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.10.0",
+  "version": "3.11.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.8.2",
-    "@telus-uds/system-theme-tokens": "^2.8.0",
-    "@telus-uds/system-tokens": "^0.6.0"
+    "@telus-uds/palette-allium": "^2.9.0",
+    "@telus-uds/system-theme-tokens": "^2.9.0",
+    "@telus-uds/system-tokens": "^0.6.1"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.8.2"
+    "@telus-uds/palette-allium": "^2.9.0"
   },
   "files": [
     "build",

package/theme.json

@@ -901,6 +901,8 @@
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight700}",
+        "iconSize": "{palette.size.size20}",
+        "iconSpace": "{system.integer.2}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
@@ -1434,8 +1436,9 @@
         "icon": "{palette.icon.CaretDown}",
         "iconColor": "{palette.color.greenAccessible}",
         "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
         "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size16}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "paddingBottom": "{palette.size.size16}",
         "paddingLeft": "{palette.size.size8}",
@@ -2842,6 +2845,85 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "QuickLinksFeature": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "stackGap": "{system.integer.5}",
+        "stackJustify": "{system.flexJustifyContent.center}",
+        "stackSpace": "{system.integer.5}"
+      }
+    },
+    "QuickLinksFeatureItem": {
+      "appearances": {
+        "focus": "{appearances.Link.focus}",
+        "hover": "{appearances.Link.hover}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "viewport": "xl"
+          },
+          "tokens": {
+            "contentMaxDimension": "{palette.size.size184}",
+            "imageDimension": "{palette.size.size168}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "imageDimension": "{palette.size.size140}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "viewport": "xl"
+          },
+          "tokens": {
+            "imageDimension": "{palette.size.size184}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenSanFelix}"
+          }
+        }
+      ],
+      "tokens": {
+        "color": "{palette.color.greyThunder}",
+        "contentAlignItems": "{system.flexAlign.center}",
+        "contentDirection": "{system.direction.column}",
+        "contentMaxDimension": "{palette.size.size140}",
+        "contentSpace": "{system.integer.3}",
+        "imageDimension": "{palette.size.size128}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "textAlign": "{system.textAlign.center}",
+        "textLine": "{system.textLine.none}"
+      }
+    },
     "QuickLinksList": {
       "appearances": {
         "focus": "{appearances.QuickLinksList.focus}",
@@ -3566,6 +3648,11 @@
     },
     "StepTracker": {
       "appearances": {
+        "inverse": {
+          "description": "Styles the step tracker for using on dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -3577,6 +3664,24 @@
             "showStepLabel": "{system.show.true}",
             "showStepTrackerLabel": "{system.show.false}"
           }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "connectorColor": "{palette.color.white}",
+            "connectorCompletedColor": "{palette.color.white}",
+            "knobBackgroundColor": "{palette.color.transparent}",
+            "knobBorderColor": "{palette.color.white}",
+            "knobCompletedBackgroundColor": "{palette.color.white}",
+            "knobCompletedBorderColor": "{palette.color.white}",
+            "knobCurrentBackgroundColor": "{palette.color.transparent}",
+            "knobCurrentBorderColor": "{palette.color.white}",
+            "knobCurrentInnerColor": "{palette.color.white}",
+            "labelColor": "{palette.color.white}",
+            "labelCurrentColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -4703,6 +4808,16 @@
             "fontWeight": "{palette.fontWeight.weight700}"
           }
         },
+        {
+          "if": {
+            "bold": true,
+            "size": "micro"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontWeight": "{palette.fontWeight.weight700}"
+          }
+        },
         {
           "if": {
             "bold": true,