@telus-uds/theme-allium 3.18.0 → 3.20.0

package/build/rn/theme.js

@@ -1,17 +1,17 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Apr 2023 14:45:26 GMT
+ * Generated on Thu, 13 Apr 2023 05:51:25 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,13 +1858,13 @@ 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
       }
     },
@@ -2134,6 +2290,56 @@ module.exports = {
         paddingTop: 12
       }
     },
+    OrderedList: {
+      appearances: {
+        compact: {
+          description: 'When true it will reduce the line height of the list item.',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: {
+          description: 'Indicates list item text size.',
+          type: 'variant',
+          values: [ 'large', 'medium', 'small' ]
+        }
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: { itemFontSize: 20, itemLineHeight: 1.6 }
+        },
+        { if: { size: 'medium' }, tokens: {} },
+        {
+          if: { size: 'small' },
+          tokens: { itemFontSize: 14, itemLineHeight: 1.42857142857 }
+        },
+        { if: { compact: true }, tokens: { itemLineHeight: 1.25 } },
+        {
+          if: { compact: true, size: 'small' },
+          tokens: { itemLineHeight: 1.14285714286 }
+        },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: { itemLineHeight: 1.2 }
+        }
+      ],
+      tokens: {
+        headerFontName: 'HelveticaNow',
+        headerFontWeight: '700',
+        interItemMargin: 8,
+        itemBulletContainerWidth: 16,
+        itemBulletHeight: 4,
+        itemBulletWidth: 4,
+        itemColor: '#414547',
+        itemFontName: 'HelveticaNow',
+        itemFontSize: 16,
+        itemFontWeight: '400',
+        itemLineHeight: 1.5,
+        itemMarginTop: 0,
+        itemPaddingTop: 0,
+        listGutter: 8
+      }
+    },
     Pagination: {
       appearances: {
         viewport: {
@@ -2332,6 +2538,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 } } ],
@@ -2625,10 +2899,7 @@ module.exports = {
         }
       },
       rules: [
-        {
-          if: { error: true },
-          tokens: { inputBorderColor: '#e12339' }
-        },
+        { if: { error: true }, tokens: {} },
         {
           if: { hover: true },
           tokens: { outerBorderColor: '#e3e6e8', outerBorderWidth: 2 }
@@ -2644,6 +2915,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: {
@@ -3051,11 +3331,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' },
@@ -3073,17 +3354,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: {
@@ -3098,7 +3371,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,
@@ -3108,7 +3381,7 @@ module.exports = {
         paddingTop: 12,
         validationIcon: null,
         validationIconColor: 'rgba(0, 0, 0, 0)',
-        validationIconSize: 24
+        validationIconSize: 20
       }
     },
     SideNav: {
@@ -4378,5 +4651,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.16.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.18.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.18.0",
+  "version": "3.20.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.2",
-    "@telus-uds/system-theme-tokens": "^2.16.0",
-    "@telus-uds/system-tokens": "^0.6.8"
+    "@telus-uds/palette-allium": "^2.13.0",
+    "@telus-uds/system-theme-tokens": "^2.18.0",
+    "@telus-uds/system-tokens": "^0.6.10"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.12.2"
+    "@telus-uds/palette-allium": "^2.13.0"
   },
   "files": [
     "build",