@telus-uds/theme-allium 4.34.0 → 4.36.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 19 Jul 2024 18:13:05 GMT
+ * Generated on Mon, 12 Aug 2024 06:25:54 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 19 Jul 2024 18:13:05 GMT
+ * Generated on Mon, 12 Aug 2024 06:25:54 GMT
  *
  */
 
@@ -332,7 +332,7 @@ const theme = {
         },
         {
           if: { background: 'lighter' },
-          tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
+          tokens: { backgroundColor: '#fafafa', borderColor: '#fafafa' }
         },
         {
           if: { background: 'light' },
@@ -4195,13 +4195,14 @@ const theme = {
         itemBulletHeight: 4,
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
-        itemColor: '#414547',
+        itemColor: null,
         itemFontName: 'HelveticaNow',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemLineHeight: 1.5,
         itemMarginTop: 0,
         itemPaddingTop: 0,
+        itemTextColor: '#414547',
         listGutter: 8
       }
     },
@@ -4535,11 +4536,11 @@ const theme = {
           }
         },
         {
-          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          if: { size: 'large' },
           tokens: {
             amountFontSize: 64,
-            bottomTextFontSize: 20,
-            bottomTextLineHeight: 1.6,
+            bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 36,
             centsLineHeight: 1.125,
             currencySymbolFontSize: 36,
@@ -4548,6 +4549,15 @@ const theme = {
             rateLineHeight: 1.6,
             strikeThroughHeight: 3,
             strikeThroughPosition: 35,
+            topTextFontSize: 16,
+            topTextLineHeight: 1.5
+          }
+        },
+        {
+          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            bottomTextFontSize: 20,
+            bottomTextLineHeight: 1.6,
             topTextFontSize: 20,
             topTextLineHeight: 1.6
           }
@@ -4565,7 +4575,7 @@ const theme = {
         amountLineHeight: 1,
         bottomLinksMarginLeft: 4,
         bottomTextFontSize: 16,
-        bottomTextLineHeight: 1.6,
+        bottomTextLineHeight: 1.5,
         bottomTextMarginTop: 4,
         centsFontName: 'HelveticaNow',
         centsFontSize: 20,
@@ -5377,6 +5387,7 @@ const theme = {
           if: { purpose: 'editorial' },
           tokens: {
             backgroundColor: '#676e73',
+            curveAfterBackgroundColor: '#676e73',
             curveBackgroundColor: '#2c2e30'
           }
         },
@@ -5399,7 +5410,10 @@ const theme = {
         },
         {
           if: { purpose: 'subtle' },
-          tokens: { backgroundColor: '#7c53a5' }
+          tokens: {
+            backgroundColor: '#7c53a5',
+            curveAfterBackgroundColor: '#7c53a5'
+          }
         }
       ],
       tokens: {
@@ -5952,6 +5966,169 @@ const theme = {
         width: null
       }
     },
+    Status: {
+      appearances: {
+        inverse: {
+          description: 'Inverts the status colors',
+          type: 'variant',
+          values: [ true ]
+        },
+        priority: { type: 'variant', values: [ 'default', 'low', 'high' ] },
+        purpose: {
+          type: 'variant',
+          values: [
+            'default', 'brand',
+            'subtle',  'success',
+            'warning', 'error',
+            'offer'
+          ]
+        }
+      },
+      rules: [
+        { if: { purpose: 'brand' }, tokens: { iconColor: '#4b286d' } },
+        { if: { purpose: 'subtle' }, tokens: { iconColor: '#676e73' } },
+        {
+          if: { purpose: 'success' },
+          tokens: { icon: PaletteIconStatusSuccess, iconColor: '#2b8000' }
+        },
+        {
+          if: { purpose: 'warning' },
+          tokens: { icon: PaletteIconStatusWarning, iconColor: '#b4872c' }
+        },
+        {
+          if: { purpose: 'error' },
+          tokens: { icon: PaletteIconStatusError, iconColor: '#c12335' }
+        },
+        { if: { purpose: 'offer' }, tokens: { iconColor: '#7c53a5' } },
+        {
+          if: { priority: 'low' },
+          tokens: {
+            borderRadius: 99,
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4
+          }
+        },
+        {
+          if: { priority: 'high' },
+          tokens: {
+            backgroundColor: '#414547',
+            borderRadius: 99,
+            iconColor: '#ffffff',
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4,
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'default' },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { priority: 'high', purpose: 'default' },
+          tokens: { backgroundColor: '#414547' }
+        },
+        {
+          if: { priority: 'low', purpose: 'brand' },
+          tokens: { backgroundColor: '#e0d8fc' }
+        },
+        {
+          if: { priority: 'high', purpose: 'brand' },
+          tokens: { backgroundColor: '#4b286d' }
+        },
+        {
+          if: { priority: 'low', purpose: 'subtle' },
+          tokens: { backgroundColor: '#fafafa' }
+        },
+        {
+          if: { priority: 'high', purpose: 'subtle' },
+          tokens: { backgroundColor: '#676e73' }
+        },
+        {
+          if: { priority: 'low', purpose: 'success' },
+          tokens: { backgroundColor: '#f4f9f2' }
+        },
+        {
+          if: { priority: 'high', purpose: 'success' },
+          tokens: { backgroundColor: '#2b8000' }
+        },
+        {
+          if: { priority: 'low', purpose: 'warning' },
+          tokens: { backgroundColor: '#fff9ee' }
+        },
+        {
+          if: { priority: 'high', purpose: 'warning' },
+          tokens: { backgroundColor: '#b4872c' }
+        },
+        {
+          if: { priority: 'low', purpose: 'error' },
+          tokens: { backgroundColor: '#fff6f8' }
+        },
+        {
+          if: { priority: 'high', purpose: 'error' },
+          tokens: { backgroundColor: '#c12335' }
+        },
+        {
+          if: { priority: 'low', purpose: 'offer' },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { priority: 'high', purpose: 'offer' },
+          tokens: {
+            backgroundGradient: {
+              angle: 135,
+              stops: [
+                { color: '#4b286d', stop: 0 },
+                { color: '#e53293', stop: 1 }
+              ],
+              type: 'linear'
+            }
+          }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: '#ffffff',
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, priority: 'low' },
+          tokens: { backgroundColor: '#2c2e30' }
+        },
+        {
+          if: { inverse: true, priority: 'high' },
+          tokens: {
+            backgroundColor: '#ffffff',
+            iconColor: '#2c2e30',
+            textColor: '#2c2e30'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: null,
+        backgroundGradient: null,
+        borderColor: null,
+        borderRadius: null,
+        borderWidth: null,
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '700',
+        icon: PaletteIconStatusInfo,
+        iconColor: '#414547',
+        iconGradient: null,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        textColor: '#676e73',
+        textLineHeight: 1.14285714286
+      }
+    },
     StepTracker: {
       appearances: {
         inverse: {
@@ -7728,6 +7905,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.59.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.61.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "4.34.0",
+  "version": "4.36.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -9,12 +9,12 @@
   "module": "build/web/index.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.33.1",
-    "@telus-uds/system-theme-tokens": "^2.59.0",
-    "@telus-uds/system-tokens": "^0.8.5"
+    "@telus-uds/palette-allium": "^2.34.1",
+    "@telus-uds/system-theme-tokens": "^2.61.0",
+    "@telus-uds/system-tokens": "^0.8.7"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.33.1"
+    "@telus-uds/palette-allium": "^2.34.1"
   },
   "files": [
     "build",

package/theme.json

@@ -328,8 +328,8 @@
             "background": "lighter"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}",
-            "borderColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.greyAlabaster}",
+            "borderColor": "{palette.color.greyAlabaster}"
           }
         },
         {
@@ -5316,13 +5316,14 @@
         "itemBulletHeight": "{palette.size.size4}",
         "itemBulletTextAlign": "{system.textAlign.right}",
         "itemBulletWidth": "{palette.size.size4}",
-        "itemColor": "{palette.color.greyCharcoal}",
+        "itemColor": "{system.color.none}",
         "itemFontName": "{palette.fontName.HelveticaNow}",
         "itemFontSize": "{palette.fontSize.size16}",
         "itemFontWeight": "{palette.fontWeight.weight400}",
         "itemLineHeight": "{palette.lineHeight.ratio3to2}",
         "itemMarginTop": "{palette.size.size0}",
         "itemPaddingTop": "{palette.size.size0}",
+        "itemTextColor": "{palette.color.greyCharcoal}",
         "listGutter": "{palette.size.size8}"
       }
     },
@@ -5655,13 +5656,12 @@
         },
         {
           "if": {
-            "size": "large",
-            "viewport": ["lg", "xl"]
+            "size": "large"
           },
           "tokens": {
             "amountFontSize": "{palette.fontSize.size64}",
-            "bottomTextFontSize": "{palette.fontSize.size20}",
-            "bottomTextLineHeight": "{palette.lineHeight.ratio8to5}",
+            "bottomTextFontSize": "{palette.fontSize.size16}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
             "centsFontSize": "{palette.fontSize.size36}",
             "centsLineHeight": "{palette.lineHeight.ratio9to8}",
             "currencySymbolFontSize": "{palette.fontSize.size36}",
@@ -5670,6 +5670,18 @@
             "rateLineHeight": "{palette.lineHeight.ratio8to5}",
             "strikeThroughHeight": "{palette.size.size3}",
             "strikeThroughPosition": "{palette.size.size35}",
+            "topTextFontSize": "{palette.fontSize.size16}",
+            "topTextLineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "size": "large",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "bottomTextFontSize": "{palette.fontSize.size20}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio8to5}",
             "topTextFontSize": "{palette.fontSize.size20}",
             "topTextLineHeight": "{palette.lineHeight.ratio8to5}"
           }
@@ -5692,7 +5704,7 @@
         "amountLineHeight": "{palette.lineHeight.ratio1to1}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
         "bottomTextFontSize": "{palette.fontSize.size16}",
-        "bottomTextLineHeight": "{palette.lineHeight.ratio8to5}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
         "bottomTextMarginTop": "{palette.size.size4}",
         "centsFontName": "{palette.fontName.HelveticaNow}",
         "centsFontSize": "{palette.fontSize.size20}",
@@ -6645,6 +6657,7 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.greyShuttle}",
+            "curveAfterBackgroundColor": "{palette.color.greyShuttle}",
             "curveBackgroundColor": "{palette.color.greyThunder}"
           }
         },
@@ -6670,7 +6683,8 @@
             "purpose": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleDeluge}"
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "curveAfterBackgroundColor": "{palette.color.purpleDeluge}"
           }
         }
       ],
@@ -7242,6 +7256,278 @@
         "width": "{system.size.none}"
       }
     },
+    "Status": {
+      "appearances": {
+        "inverse": {
+          "description": "Inverts the status colors",
+          "type": "variant",
+          "values": [true]
+        },
+        "priority": {
+          "type": "variant",
+          "values": ["default", "low", "high"]
+        },
+        "purpose": {
+          "type": "variant",
+          "values": ["default", "brand", "subtle", "success", "warning", "error", "offer"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "purpose": "brand"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "success"
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusSuccess}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "warning"
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusWarning}",
+            "iconColor": "{palette.color.amberDark}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "error"
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusError}",
+            "iconColor": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius99}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCharcoal}",
+            "borderRadius": "{palette.radius.radius99}",
+            "iconColor": "{palette.color.white}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAlabaster}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenPanache}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.amberLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.amberDark}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundGradient": "{palette.gradient.purple}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.white}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "low"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "iconColor": "{palette.color.greyThunder}",
+            "textColor": "{palette.color.greyThunder}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "backgroundGradient": "{system.gradient.none}",
+        "borderColor": "{system.color.none}",
+        "borderRadius": "{system.radius.none}",
+        "borderWidth": "{system.border.none}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "icon": "{palette.icon.StatusInfo}",
+        "iconColor": "{palette.color.greyCharcoal}",
+        "iconGradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "textColor": "{palette.color.greyShuttle}",
+        "textLineHeight": "{palette.lineHeight.ratio8to7}"
+      }
+    },
     "StepTracker": {
       "appearances": {
         "inverse": {