@telus-uds/theme-allium 4.3.0 → 4.5.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 14 Jun 2023 00:00:46 GMT
+ * Generated on Tue, 20 Jun 2023 16:00:14 GMT
  *
  */
 
@@ -100,6 +100,14 @@ module.exports = {
             color: '#ffffff'
           }
         },
+        {
+          if: { outline: true, purpose: 'editorial' },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#676e73',
+            color: '#676e73'
+          }
+        },
         {
           if: { outline: true, purpose: 'offer' },
           tokens: {
@@ -136,8 +144,24 @@ module.exports = {
       }
     },
     BlockQuote: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        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: { viewport: [ 'xs', 'sm', 'md' ] },
+          tokens: {
+            titleHeadingFontName: 'HelveticaNow',
+            titleHeadingFontSize: 24,
+            titleHeadingFontWeight: '400',
+            titleHeadingLineHeight: 1.33333333333
+          }
+        }
+      ],
       tokens: {
         backgroundGradient: {
           angle: 135,
@@ -148,11 +172,23 @@ module.exports = {
           type: 'linear'
         },
         color: '#414547',
+        linkFontName: 'HelveticaNow',
+        linkFontSize: 16,
+        linkFontWeight: '700',
+        linkLineHeight: 1.5,
         marginBottom: 16,
         paddingBottom: 16,
         paddingLeft: 32,
         paddingRight: 32,
         paddingTop: 16,
+        titleFontName: 'HelveticaNow',
+        titleFontSize: 20,
+        titleFontWeight: '400',
+        titleHeadingFontName: 'HelveticaNow',
+        titleHeadingFontSize: 28,
+        titleHeadingFontWeight: '400',
+        titleHeadingLineHeight: 1.28571428571,
+        titleLineHeight: 1.6,
         width: 2
       }
     },
@@ -455,6 +491,7 @@ module.exports = {
           if: { priority: 'high' },
           tokens: {
             backgroundColor: '#2b8000',
+            borderColor: 'rgba(0, 0, 0, 0)',
             borderWidth: 0,
             color: '#ffffff'
           }
@@ -463,7 +500,7 @@ module.exports = {
           if: { pressed: true },
           tokens: {
             backgroundColor: '#163e06',
-            borderWidth: 0,
+            borderColor: 'rgba(0, 0, 0, 0)',
             color: '#ffffff'
           }
         },
@@ -499,6 +536,7 @@ module.exports = {
           if: { inverse: true, pressed: true },
           tokens: {
             backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            borderColor: 'rgba(0, 0, 0, 0)',
             color: '#414547'
           }
         },
@@ -520,7 +558,11 @@ module.exports = {
         },
         {
           if: { danger: true, pressed: true, priority: null },
-          tokens: { backgroundColor: '#c12335', color: '#ffffff' }
+          tokens: {
+            backgroundColor: '#c12335',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#ffffff'
+          }
         },
         {
           if: { danger: true, focus: true, pressed: true, priority: null },
@@ -730,31 +772,11 @@ module.exports = {
       },
       rules: [
         { if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
-        { if: { hover: true }, tokens: { borderWidth: 3 } },
-        {
-          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: '#4b286d',
-            iconBackground: '#7c53a5',
-            outerBorderColor: '#4b286d'
-          }
-        },
         {
           if: { focus: true },
           tokens: {
             borderColor: '#676e73',
+            color: '#414547',
             outerBorderColor: '#676e73',
             outerBorderGap: 2,
             outerBorderWidth: 2
@@ -764,13 +786,20 @@ module.exports = {
           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
+            iconColor: '#ffffff'
+          }
+        },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            borderWidth: 0,
+            color: '#b2b9bf',
+            iconBackground: '#f4f4f7',
+            iconColor: '#b2b9bf'
           }
         },
         {
@@ -785,34 +814,19 @@ module.exports = {
         },
         {
           if: { hover: true, selected: true },
-          tokens: { backgroundColor: '#7c53a5', iconBackground: '#4b286d' }
-        },
-        {
-          if: { pressed: true, selected: true },
-          tokens: { backgroundColor: '#3f2a54', iconBackground: '#7c53a5' }
+          tokens: { backgroundColor: '#7c53a5', iconBackground: '#613889' }
         },
         {
           if: { focus: true, selected: true },
           tokens: { outerBorderColor: '#4b286d' }
         },
         {
-          if: { focus: true, pressed: true, selected: true },
-          tokens: {
-            iconBackground: '#7c53a5',
-            outerBorderColor: '#3f2a54',
-            outerBorderGap: 2,
-            outerBorderWidth: 2
-          }
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#3f2a54', iconBackground: '#613889' }
         },
         {
-          if: { inactive: true },
-          tokens: {
-            backgroundColor: '#ffffff',
-            borderWidth: 0,
-            color: '#b2b9bf',
-            iconBackground: '#f4f4f7',
-            iconColor: '#b2b9bf'
-          }
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderGap: 2, outerBorderWidth: 2 }
         }
       ],
       tokens: {
@@ -830,7 +844,7 @@ module.exports = {
         iconAlignSelf: 'center',
         iconBackground: '#f4f4f7',
         iconBorderRadius: 32,
-        iconColor: '#2c2e30',
+        iconColor: '#414547',
         iconPadding: 2,
         iconPosition: 'right',
         iconSize: 16,
@@ -1483,17 +1497,8 @@ module.exports = {
           }
         },
         {
-          if: { large: true, viewport: [ 'xs' ] },
-          tokens: { textFontSize: 28 }
-        },
-        {
-          if: { feature: true, viewport: [ 'xs' ] },
-          tokens: { textFontSize: 28 }
-        },
-        {
-          if: { feature: true },
+          if: { large: true },
           tokens: {
-            labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
             textTimerFontName: 'HelveticaNow',
@@ -1501,21 +1506,39 @@ module.exports = {
           }
         },
         {
-          if: { large: true },
+          if: { feature: true },
           tokens: {
+            labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
             textTimerFontName: 'HelveticaNow',
             textTimerFontWeight: '300'
           }
         },
+        {
+          if: { large: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 40 }
+        },
+        {
+          if: { feature: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 40 }
+        },
         {
           if: { inverse: true },
           tokens: { labelBorderColor: '#ffffff' }
+        },
+        {
+          if: { feature: true, inverse: true },
+          tokens: {
+            containerBorderColor: '#676e73',
+            labelBorderColor: '#ffffff'
+          }
         }
       ],
       tokens: {
+        containerBorderColor: 'rgba(0, 0, 0, 0)',
         containerBorderRadius: 6,
+        containerBorderWidth: 2,
         containerGradient: {
           angle: 135,
           stops: [
@@ -1530,7 +1553,9 @@ module.exports = {
         containerPaddingLeftRight: 64,
         inverseBorderColor: '#676e73',
         labelBorderColor: '#414547',
+        labelFontName: 'HelveticaNow',
         labelFontSize: 16,
+        labelFontWeight: '400',
         labelLineHeight: 1.5,
         textFontSize: 16,
         textLineHeight: 1.5,
@@ -1555,6 +1580,9 @@ module.exports = {
         calendarDayDefaultFontName: 'HelveticaNow',
         calendarDayDefaultFontSize: 14,
         calendarDayDefaultFontWeight: '400',
+        calendarDaySelectedDisabledBackground: '#fafafa',
+        calendarDaySelectedDisabledColor: '#ffffff',
+        calendarDaySelectedDisabledContentBackgroundColor: '#b2b9bf',
         calendarDaySelectedFocusBeforeBackground: '#ffffff',
         calendarDaySelectedHoverBackground: '#ffffff',
         calendarDaySelectedHoverBeforeBackground: '#ffffff',
@@ -1812,8 +1840,9 @@ module.exports = {
       appearances: {},
       rules: [],
       tokens: {
+        closeButtonBackgroundColor: '#f4f4f7',
         closeButtonBorderColor: '#676e73',
-        closeButtonBorderSize: 0,
+        closeButtonBorderSize: 1,
         closeButtonHeight: 24,
         closeButtonIconSize: 16,
         closeButtonMarginBottom: 12,
@@ -1824,7 +1853,7 @@ module.exports = {
         closeIcon: PaletteIconClose,
         footnoteBackground: '#f4f4f7',
         footnoteBodyBackground: '#f4f4f7',
-        footnoteBodyPaddingBottom: 40,
+        footnoteBodyPaddingBottom: 32,
         footnoteBodyPaddingLeft: 16,
         footnoteBodyPaddingRight: 16,
         footnoteBodyPaddingTop: 0,
@@ -1836,12 +1865,12 @@ module.exports = {
         footnoteHeaderPaddingTop: 16,
         headerFontName: 'HelveticaNow',
         headerFontSize: 16,
-        headerFontWeight: '700',
-        headerLineHeight: 20,
+        headerFontWeight: '500',
+        headerLineHeight: 1.5,
         headerMargin: 16,
         listItemColor: '#414547',
-        listItemFontSize: 14,
-        listItemLineHeight: 1.42857142857,
+        listItemFontSize: 16,
+        listItemLineHeight: 1.5,
         listItemMarkerFontSize: 16,
         listItemMarkerLineHeight: 1.5,
         listItemPaddingLeft: 8,
@@ -2710,6 +2739,59 @@ module.exports = {
         subHeadingMarginTop: 8
       }
     },
+    MultiSelectFilter: {
+      appearances: {
+        maxHeight: {
+          description: 'Whether MultiselectFilter modal should expand responsively to content or a set maximu height',
+          type: 'state',
+          values: [ true ]
+        },
+        maxWidth: {
+          description: 'Whether MultiselectFilter modal should expand to content or a set maximuh width',
+          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: { viewport: [ 'xs' ] },
+          tokens: {
+            buttonDirection: 'column',
+            minHeight: '100%',
+            minWidth: '100%'
+          }
+        },
+        {
+          if: { maxHeight: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+          tokens: { maxHeightSize: 480 }
+        },
+        {
+          if: { maxWidth: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+          tokens: { maxWidthSize: 544 }
+        }
+      ],
+      tokens: {
+        buttonDirection: 'row',
+        headerFontColor: '#414547',
+        headerFontName: 'HelveticaNow',
+        headerFontSize: 16,
+        headerFontWeight: '500',
+        headerLineHeight: 1.5,
+        maxHeightSize: 0,
+        maxWidthSize: 0,
+        minHeight: 412,
+        minWidth: 320,
+        subHeaderFontName: 'HelveticaNow',
+        subHeaderFontSize: 14,
+        subHeaderFontWeight: '400',
+        subHeaderLineHeight: 1.4
+      }
+    },
     NavigationBar: {
       appearances: {
         expanded: {
@@ -3232,7 +3314,7 @@ module.exports = {
         borderRadius: 6,
         borderWidth: 1,
         flex: 1,
-        outerBorderColor: '#000000',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 0,
         outerBorderWidth: 0,
         paddingBottom: 0,
@@ -3557,6 +3639,11 @@ module.exports = {
           type: 'state',
           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 ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -3564,28 +3651,45 @@ module.exports = {
         }
       },
       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: { focus: true },
+          tokens: { outerBorderColor: '#2b8000', textLine: 'none' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            color: '#2b8000',
+            imageDimension: 140,
+            textLine: 'underline'
+          }
+        },
         {
           if: { hover: true, viewport: 'xl' },
           tokens: { imageDimension: 184 }
         },
         {
-          if: { focus: true },
-          tokens: { outerBorderColor: '#1f5c09' }
+          if: { pressed: true },
+          tokens: { color: '#1f5c09', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { color: '#1f5c09', outerBorderColor: '#1f5c09' }
         }
       ],
       tokens: {
         color: '#2c2e30',
         contentAlignItems: 'center',
         contentDirection: 'column',
-        contentMaxDimension: 140,
+        contentMaxDimension: 168,
         contentSpace: 3,
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '700',
+        gap: 32,
         imageDimension: 128,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         textAlign: 'center',
@@ -4498,9 +4602,9 @@ module.exports = {
             connectorCompletedColor: '#ffffff',
             knobBackgroundColor: 'rgba(0, 0, 0, 0)',
             knobBorderColor: '#ffffff',
-            knobCompletedBackgroundColor: '#ffffff',
+            knobCompletedBackgroundColor: 'rgba(0, 0, 0, 0)',
             knobCompletedBorderColor: '#ffffff',
-            knobCurrentBackgroundColor: 'rgba(0, 0, 0, 0)',
+            knobCurrentBackgroundColor: '#ffffff',
             knobCurrentBorderColor: '#ffffff',
             knobCurrentInnerColor: '#ffffff',
             labelColor: '#ffffff',
@@ -4524,17 +4628,17 @@ module.exports = {
         knobBackgroundColor: 'rgba(0, 0, 0, 0)',
         knobBorderColor: '#676e73',
         knobBorderWidth: 1,
-        knobCompletedBackgroundColor: '#7c53a5',
+        knobCompletedBackgroundColor: 'rgba(0, 0, 0, 0)',
         knobCompletedBorderColor: '#7c53a5',
-        knobCompletedPaddingLeft: null,
-        knobCompletedPaddingTop: null,
-        knobCurrentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        knobCompletedPaddingLeft: 2,
+        knobCompletedPaddingTop: 2,
+        knobCurrentBackgroundColor: '#7c53a5',
         knobCurrentBorderColor: '#7c53a5',
         knobCurrentBorderWidth: 2,
         knobCurrentInnerColor: '#7c53a5',
         knobCurrentInnerSize: 8,
-        knobCurrentPaddingLeft: 2,
-        knobCurrentPaddingTop: 2,
+        knobCurrentPaddingLeft: null,
+        knobCurrentPaddingTop: null,
         knobSize: 16,
         labelColor: '#414547',
         labelCurrentColor: '#7c53a5',
@@ -4542,7 +4646,7 @@ module.exports = {
         labelCurrentFontWeight: '700',
         labelDirection: 'column',
         labelFontName: 'HelveticaNow',
-        labelFontSize: 16,
+        labelFontSize: 14,
         labelFontWeight: '400',
         labelGap: 0,
         labelLineHeight: 1.42857142857,
@@ -4551,7 +4655,13 @@ module.exports = {
         labelPaddingRight: 16,
         showStepLabel: false,
         showStepName: true,
-        showStepTrackerLabel: true
+        showStepTrackerLabel: true,
+        stepLabelColor: '#676e73',
+        stepLabelFontName: 'HelveticaNow',
+        stepLabelFontSize: 12,
+        stepLabelFontWeight: '700',
+        stepLabelLineHeight: 1.33333333333,
+        textStepTrackerLabel: 1
       }
     },
     StoryCard: {
@@ -4880,9 +4990,11 @@ module.exports = {
         {
           if: { inactive: true },
           tokens: {
-            backgroundColor: '#b2b9bf',
+            backgroundColor: '#ffffff',
             borderWidth: 0,
-            color: '#ffffff'
+            color: '#b2b9bf',
+            iconBackground: '#f4f4f7',
+            iconColor: '#b2b9bf'
           }
         }
       ],
@@ -4919,8 +5031,7 @@ module.exports = {
         paddingRight: 8,
         paddingTop: 8,
         shadow: null,
-        textAlign: 'center',
-        width: null
+        textAlign: 'center'
       }
     },
     TermsAndConditions: {
@@ -5140,8 +5251,22 @@ module.exports = {
       }
     },
     Toast: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        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: { viewport: [ 'xs' ] },
+          tokens: {
+            animationPaddingBottomAfter: 8,
+            animationPaddingTopAfter: 8
+          }
+        }
+      ],
       tokens: {
         animationBackgroundColorAfter: '#f4f4f7',
         animationBackgroundColorBefore: '#4b286d',
@@ -5155,6 +5280,8 @@ module.exports = {
         animationPaddingBottomBefore: 0,
         animationPaddingTopAfter: 16,
         animationPaddingTopBefore: 0,
+        chevronlinkFontName: 'HelveticaNow',
+        chevronlinkFontWeight: '400',
         containerBackgroundColor: '#4b286d',
         containerGap: 10
       }
@@ -5913,5 +6040,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.32.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.34.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "4.3.0",
+  "version": "4.5.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.20.1",
-    "@telus-uds/system-theme-tokens": "^2.32.0",
-    "@telus-uds/system-tokens": "^0.7.12"
+    "@telus-uds/palette-allium": "^2.21.1",
+    "@telus-uds/system-theme-tokens": "^2.34.0",
+    "@telus-uds/system-tokens": "^0.7.14"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.20.1"
+    "@telus-uds/palette-allium": "^2.21.1"
   },
   "files": [
     "build",