@telus-uds/theme-allium 3.19.0 → 3.21.0

package/build/rn/theme.js

@@ -1,17 +1,17 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Apr 2023 19:53:14 GMT
+ * Generated on Wed, 19 Apr 2023 11:23:39 GMT
  *
  */
 
+const PaletteIconChevronRight = require('@telus-uds/palette-allium/build/rn/icons/ChevronRight')
 const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
 const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
 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')
@@ -309,6 +309,16 @@ module.exports = {
       ],
       tokens: { backgroundColor: null, gradient: null }
     },
+    Breadcrumbs: {
+      appearances: { inverse: { type: 'variant', values: [ true ] } },
+      rules: [ { if: { inverse: true }, tokens: { iconColor: '#b2b9bf' } } ],
+      tokens: {
+        icon: PaletteIconChevronRight,
+        iconColor: '#676e73',
+        iconPadding: 8,
+        listItemPadding: 0
+      }
+    },
     Button: {
       appearances: {
         danger: {
@@ -863,6 +873,29 @@ module.exports = {
         width: null
       }
     },
+    Callout: {
+      appearances: {
+        rounded: { type: 'variant', values: [ true, false ] },
+        size: { type: 'variant', values: [ 'small' ] }
+      },
+      rules: [
+        {
+          if: { size: 'small' },
+          tokens: { paddingBottom: 4, paddingTop: 4 }
+        },
+        { if: { rounded: true }, tokens: { borderRadius: 4 } }
+      ],
+      tokens: {
+        background: '#f4f4f7',
+        borderRadius: 0,
+        color: '#4b286d',
+        gap: 16,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8
+      }
+    },
     Card: {
       appearances: {
         background: {
@@ -1291,6 +1324,65 @@ module.exports = {
         textLine: 'none'
       }
     },
+    DatePicker: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        calendarDayBlockedCalendarHoverBackground: '#fafafa',
+        calendarDayBlockedCalendarHoverColor: '#414547',
+        calendarDayDefaultBeforeHeight: 28,
+        calendarDayDefaultBeforeWidth: 28,
+        calendarDayDefaultBorder: 1,
+        calendarDayDefaultBorderColor: '#e3e6e8',
+        calendarDayDefaultCalendarDaySelectedHoverBackground: '#7c53a5',
+        calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
+        calendarDayDefaultColor: '#414547',
+        calendarDayDefaultFontName: 'HelveticaNow',
+        calendarDayDefaultFontSize: 14,
+        calendarDayDefaultFontWeight: '300',
+        calendarDaySelectedHoverBeforeBackground: '#7c53a5',
+        calendarDaySelectedHoverBorderColor: '#e3e6e8',
+        calendarDaySelectedHoverColor: '#ffffff',
+        calendarMonthCaptionColor: '#2c2e30',
+        calendarMonthCaptionFontName: 'HelveticaNow',
+        calendarMonthCaptionFontSize: 20,
+        calendarMonthCaptionFontWeight: '400',
+        calendarMonthCaptionLineHeight: 1.4,
+        calendarMonthCaptionPaddingBottom: 48,
+        dateInputBorderColor: 'rgba(0, 0, 0, 0)',
+        dateInputBorderRadius: 6,
+        dateInputFocusBorderColor: '#7c53a5',
+        dateInputHoverBorderColor: '#e3e6e8',
+        dateInputInsideBorderColor: '#676e73',
+        dateInputInsideColor: '#676e73',
+        dateInputStrokeColor: '#676e73',
+        dayPickerNavigationButtonBackgroundColor: '#ffffff',
+        dayPickerNavigationButtonBorderColor: '#b2b9bf',
+        dayPickerNavigationButtonChildLeft: 8,
+        dayPickerNavigationButtonChildRight: 8,
+        dayPickerNavigationButtonChildSvgFill: '#676e73',
+        dayPickerNavigationButtonDefaultHoverBorderColor: '#e3e6e8',
+        dayPickerNavigationButtonMaxHeight: 32,
+        dayPickerNavigationButtonMaxWidth: 32,
+        dayPickerNavigationButtonPadding: 8,
+        dayPickerNavigationSVGHorizontalFill: '#2c2e30',
+        dayPickerWeekHeaderColor: '#414547',
+        dayPickerWeekHeaderFontName: 'HelveticaNow',
+        dayPickerWeekHeaderFontWeight: '500',
+        dayPickerWeekHeaderLineHeight: 1.42857142857,
+        dayPickerWeekHeaderSmall: 14,
+        hiddenInputFieldContainerHeight: 0,
+        hiddenInputFieldContainerWidth: 0,
+        invalidInputMixin: '#e12339',
+        nextIcon: PaletteIconArrowRight,
+        previousIcon: PaletteIconArrowLeft,
+        singleDatePickerBorderColor: '#676e73',
+        singleDatePickerLeftRight: 16,
+        singleDatePickerPaddingTopBottom: 8,
+        singleDatePickerRadius: 4,
+        validInputMixin: '#2b8000'
+      }
+    },
     Divider: {
       appearances: {
         decorative: {
@@ -1345,6 +1437,23 @@ module.exports = {
         verticalAlign: 'top'
       }
     },
+    ExpandCollapseMini: { appearances: {}, rules: [], tokens: { borderWidth: 0 } },
+    ExpandCollapseMiniControl: {
+      appearances: {
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { expanded: true },
+          tokens: { icon: PaletteIconCaretUp }
+        }
+      ],
+      tokens: { icon: PaletteIconCaretDown, size: 4 }
+    },
     ExpandCollapsePanel: {
       appearances: {},
       rules: [],
@@ -1414,6 +1523,42 @@ module.exports = {
         titleFontSize: 16
       }
     },
+    Footnote: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        closeButtonBorderColor: '#676e73',
+        closeButtonBorderSize: 1,
+        closeButtonHeight: 24,
+        closeButtonIconSize: 16,
+        closeButtonMarginBottom: 12,
+        closeButtonMarginLeft: 4,
+        closeButtonMarginRight: 4,
+        closeButtonMarginTop: 12,
+        closeButtonWidth: 24,
+        footnoteBackground: '#f4f4f7',
+        footnoteBodyBackground: '#f4f4f7',
+        footnoteBodyPaddingBottom: 32,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteBorderColorMd: '#b2b9bf',
+        footnoteBorderTopSizeMd: 1,
+        headerMargin: 16,
+        listItemColor: '#414547',
+        listItemFontSize: 14,
+        listItemLineHeight: 1.42857142857,
+        listItemMarkerFontSize: 16,
+        listItemMarkerLineHeight: 1.5,
+        listItemPaddingLeft: 8,
+        listPaddingLeft: 32
+      }
+    },
+    FootnoteLink: {
+      appearances: {},
+      rules: [],
+      tokens: { lineHeight: 1, paddingLeft: 2, paddingRight: 2 }
+    },
     HorizontalScrollButton: {
       appearances: {
         focus: {
@@ -1605,10 +1750,11 @@ module.exports = {
         {
           if: { focus: true, inverse: true },
           tokens: {
-            backgroundColor: 'rgba(255, 255, 255, 0.6)',
-            borderColor: '#414547',
-            iconColor: '#414547',
-            outerBorderWidth: 0
+            backgroundColor: 'transparent',
+            borderColor: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderColor: '#ffffff',
+            outerBorderWidth: 1
           }
         },
         {
@@ -1633,15 +1779,16 @@ module.exports = {
           if: { inverse: true, pressed: true },
           tokens: {
             backgroundColor: 'rgba(255, 255, 255, 0.4)',
-            borderColor: '#676e73',
-            iconColor: '#676e73'
+            borderColor: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderWidth: 0
           }
         },
         {
           if: { size: 'large' },
           tokens: { iconSize: 24, padding: 12 }
         },
-        { if: { size: 'small' }, tokens: { padding: 4 } },
+        { if: { size: 'small' }, tokens: { iconSize: 16, padding: 4 } },
         {
           description: 'Raised IconButtons follow different design patterns to other variants',
           if: { raised: true },
@@ -1649,10 +1796,11 @@ module.exports = {
             backgroundColor: '#ffffff',
             borderColor: '#b2b9bf',
             borderWidth: 1,
+            iconSize: 16,
             outerBorderColor: 'transparent',
             outerBorderGap: 0,
             outerBorderWidth: 0,
-            padding: 12,
+            padding: 8,
             shadow: {
               blur: 2,
               color: 'rgba(0, 0, 0, 0.1)',
@@ -1665,7 +1813,7 @@ module.exports = {
         },
         {
           if: { raised: true, size: 'large' },
-          tokens: { padding: 16 }
+          tokens: { iconSize: 24, padding: 12 }
         },
         { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
         {
@@ -1681,17 +1829,25 @@ module.exports = {
             outerBorderColor: 'rgba(0, 0, 0, 0)'
           }
         },
-        {
-          if: { focus: true, pressed: true, raised: true },
-          tokens: { backgroundColor: '#4b286d', borderWidth: 0 }
-        },
         {
           if: { hover: true, raised: true },
           tokens: { borderColor: '#b2b9bf', borderWidth: 3 }
         },
         {
           if: { focus: true, raised: true },
-          tokens: { borderColor: '#4b286d', borderWidth: 3 }
+          tokens: {
+            borderColor: '#4b286d',
+            borderWidth: 3,
+            iconColor: '#4b286d'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, raised: true },
+          tokens: {
+            backgroundColor: '#4b286d',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
         },
         { if: { compact: true }, tokens: { outerBorderGap: 0 } }
       ],
@@ -1702,16 +1858,17 @@ module.exports = {
         borderWidth: 1,
         iconColor: '#676e73',
         iconScale: 1,
-        iconSize: 24,
+        iconSize: 16,
         iconTranslateX: 0,
         iconTranslateY: 0,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 0,
-        padding: 8,
+        padding: 4,
         shadow: null
       }
     },
+    Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
     InputLabel: {
       appearances: {},
       rules: [],
@@ -1961,7 +2118,13 @@ module.exports = {
       rules: [
         {
           if: { viewport: [ 'xs', 'sm' ] },
-          tokens: { height: '100%' }
+          tokens: {
+            height: '100%',
+            paddingBottom: 24,
+            paddingLeft: 24,
+            paddingRight: 24,
+            paddingTop: 24
+          }
         },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
@@ -2032,7 +2195,9 @@ module.exports = {
         backdropColor: 'rgba(244, 244, 247, 0.97)',
         backdropOpacity: 1,
         backgroundColor: '#ffffff',
+        borderColor: '#e3e6e8',
         borderRadius: 4,
+        cancelButtonColor: '#2b8000',
         closeIcon: PaletteIconClose,
         closeIconColor: '#414547',
         closeIconSize: 16,
@@ -2041,11 +2206,16 @@ module.exports = {
         containerPaddingLeft: 0,
         containerPaddingRight: 0,
         containerPaddingTop: 0,
+        gap: 16,
+        headingColor: '#414547',
+        headingPaddingRight: 24,
         height: null,
+        marginLeft: 24,
+        marginRight: 24,
         maxWidth: '100%',
         paddingBottom: 24,
-        paddingLeft: 24,
-        paddingRight: 24,
+        paddingLeft: 32,
+        paddingRight: 32,
         paddingTop: 24,
         shadow: {
           blur: 8,
@@ -2054,7 +2224,8 @@ module.exports = {
           offsetX: 0,
           offsetY: 4,
           spread: 0
-        }
+        },
+        subHeadingMarginTop: 8
       }
     },
     Notification: {
@@ -2382,6 +2553,74 @@ module.exports = {
         width: null
       }
     },
+    PreviewCard: {
+      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 ]
+        },
+        pressed: {
+          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 ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#e3e6e8',
+        borderRadius: 6,
+        borderWidth: 1,
+        flex: 1,
+        outerBorderColor: '#000000',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        separatorColor: '#b2b9bf'
+      }
+    },
+    PriceLockup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        bottomLinksMarginLeft: 4,
+        bottomTextMarginTop: 4,
+        dividerColor: '#b2b9bf',
+        fontColor: '#414547',
+        footnoteGap: 4,
+        footnoteMarginTop: 4,
+        priceMarginBottom: 8,
+        strikeThroughBackground: '#676e73',
+        strikeThroughHeight: 2,
+        topTextMarginBottom: 4
+      }
+    },
     Progress: {
       appearances: { size: { type: 'variant', values: [ 'mini' ] } },
       rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
@@ -2675,10 +2914,7 @@ module.exports = {
         }
       },
       rules: [
-        {
-          if: { error: true },
-          tokens: { inputBorderColor: '#e12339' }
-        },
+        { if: { error: true }, tokens: {} },
         {
           if: { hover: true },
           tokens: { outerBorderColor: '#e3e6e8', outerBorderWidth: 2 }
@@ -2694,6 +2930,15 @@ module.exports = {
             inputBorderColor: 'rgba(0, 0, 0, 0)',
             labelColor: '#676e73'
           }
+        },
+        {
+          if: { checked: true, inactive: true },
+          tokens: {
+            checkedBackgroundColor: '#b2b9bf',
+            inputBackgroundColor: '#ffffff',
+            inputBorderColor: '#b2b9bf',
+            labelColor: '#676e73'
+          }
         }
       ],
       tokens: {
@@ -3101,11 +3346,12 @@ module.exports = {
       },
       rules: [
         {
-          if: { hover: true, inactive: null },
-          tokens: {
-            outerBackgroundColor: '#e3e6e8',
-            outerBorderColor: '#e3e6e8'
-          }
+          if: { hover: true },
+          tokens: { outerBorderColor: '#e3e6e8' }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#7c53a5', borderWidth: 3 }
         },
         {
           if: { validation: 'success' },
@@ -3123,17 +3369,9 @@ module.exports = {
             validationIconColor: '#e12339'
           }
         },
-        {
-          if: { focus: true },
-          tokens: {
-            borderColor: '#7c53a5',
-            borderWidth: 3,
-            validationIcon: null
-          }
-        },
         {
           if: { inactive: true },
-          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+          tokens: { borderColor: '#676e73', icon: null }
         }
       ],
       tokens: {
@@ -3148,7 +3386,7 @@ module.exports = {
         height: 48,
         icon: PaletteIconCaretDown,
         iconColor: '#414547',
-        iconSize: 24,
+        iconSize: 20,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderWidth: 2,
@@ -3158,7 +3396,7 @@ module.exports = {
         paddingTop: 12,
         validationIcon: null,
         validationIconColor: 'rgba(0, 0, 0, 0)',
-        validationIconSize: 24
+        validationIconSize: 20
       }
     },
     SideNav: {
@@ -3417,6 +3655,36 @@ module.exports = {
         showStepTrackerLabel: true
       }
     },
+    Table: {
+      appearances: { spacing: { type: 'variant', values: [ 'compact' ] } },
+      rules: [
+        {
+          if: { spacing: 'compact' },
+          tokens: { cellPaddingBottom: 8, cellPaddingTop: 8 }
+        }
+      ],
+      tokens: {
+        cellBackground: '#ffffff',
+        cellBoxShadowColor: '#e3e6e8',
+        cellHeadingBackground: '#f4f4f7',
+        cellHeadingBoxShadowColor: '#b2b9bf',
+        cellPaddingBottom: 16,
+        cellPaddingLeft: 16,
+        cellPaddingRight: 16,
+        cellPaddingTop: 16,
+        cellRowHeadingBackground: '#ffffff',
+        cellStickyShadow: {
+          blur: 8,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 4,
+          spread: 0
+        },
+        cellSubheadingBackground: '#fafafa',
+        tablePaddingBottom: 24
+      }
+    },
     Tabs: {
       appearances: {
         inverse: {
@@ -3839,6 +4107,28 @@ module.exports = {
         timelineContainerDirection: 'column'
       }
     },
+    Toast: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        animationBackgroundColorAfter: '#f4f4f7',
+        animationBackgroundColorBefore: '#4b286d',
+        animationColorAfter: '#414547',
+        animationColorBefore: '#ffffff',
+        animationDivColorAfter: '#2b8000',
+        animationDivColorBefore: '#ffffff',
+        animationFillColorAfter: '#2b8000',
+        animationFillColorBefore: '#ffffff',
+        animationHeightAfter: 24,
+        animationHeightBefore: 0,
+        animationPaddingBottomAfter: 16,
+        animationPaddingBottomBefore: 0,
+        animationPaddingTopAfter: 16,
+        animationPaddingTopBefore: 0,
+        containerBackgroundColor: '#4b286d',
+        containerGap: 10
+      }
+    },
     ToggleSwitch: {
       appearances: {
         focus: {
@@ -4368,6 +4658,15 @@ module.exports = {
         textTransform: 'none'
       }
     },
+    WaffleGrid: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        itemBorderColor: '#b2b9bf',
+        itemPadding: 16,
+        rowBorderWidth: 1
+      }
+    },
     spacingScale: {
       appearances: {
         space: {
@@ -4428,5 +4727,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.17.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.19.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.19.0",
+  "version": "3.21.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.12.3",
-    "@telus-uds/system-theme-tokens": "^2.17.0",
-    "@telus-uds/system-tokens": "^0.6.9"
+    "@telus-uds/palette-allium": "^2.13.1",
+    "@telus-uds/system-theme-tokens": "^2.19.0",
+    "@telus-uds/system-tokens": "^0.6.11"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.12.3"
+    "@telus-uds/palette-allium": "^2.13.1"
   },
   "files": [
     "build",