@telus-uds/theme-koodo 3.18.0 → 3.19.0

package/build/rn/theme.js

@@ -1,15 +1,17 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Apr 2023 19:52:38 GMT
+ * Generated on Thu, 13 Apr 2023 05:50:53 GMT
  *
  */
 
+const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
 const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/ChevronDown')
 const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
-const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
 const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
 const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
+const PaletteIconArrowRight = require('@telus-uds/palette-koodo/build/rn/icons/ArrowRight')
+const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
 const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
 const PaletteIconCaution = require('@telus-uds/palette-koodo/build/rn/icons/Caution')
 const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
@@ -192,6 +194,16 @@ module.exports = {
       ],
       tokens: { backgroundColor: '#ffffff', gradient: null }
     },
+    Breadcrumbs: {
+      appearances: { inverse: { type: 'variant', values: [ true ] } },
+      rules: [ { if: { inverse: true }, tokens: { iconColor: null } } ],
+      tokens: {
+        icon: PaletteIconChevronRight,
+        iconColor: null,
+        iconPadding: 8,
+        listItemPadding: 0
+      }
+    },
     Button: {
       appearances: {
         danger: {
@@ -826,6 +838,25 @@ module.exports = {
         width: null
       }
     },
+    Callout: {
+      appearances: { size: { type: 'variant', values: [ 'small' ] } },
+      rules: [
+        {
+          if: { size: 'small' },
+          tokens: { paddingBottom: 4, paddingTop: 4 }
+        }
+      ],
+      tokens: {
+        background: '#efefef',
+        borderRadius: 4,
+        color: '#000000',
+        gap: 16,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8
+      }
+    },
     Card: {
       appearances: {
         background: {
@@ -1163,6 +1194,65 @@ module.exports = {
         textLine: 'none'
       }
     },
+    DatePicker: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        calendarDayBlockedCalendarHoverBackground: null,
+        calendarDayBlockedCalendarHoverColor: null,
+        calendarDayDefaultBeforeHeight: 14,
+        calendarDayDefaultBeforeWidth: 14,
+        calendarDayDefaultBorder: 1,
+        calendarDayDefaultBorderColor: null,
+        calendarDayDefaultCalendarDaySelectedHoverBackground: null,
+        calendarDayDefaultCalendarDaySelectedHoverColor: null,
+        calendarDayDefaultColor: null,
+        calendarDayDefaultFontName: 'StagSans',
+        calendarDayDefaultFontSize: 12,
+        calendarDayDefaultFontWeight: '300',
+        calendarDaySelectedHoverBeforeBackground: null,
+        calendarDaySelectedHoverBorderColor: null,
+        calendarDaySelectedHoverColor: null,
+        calendarMonthCaptionColor: null,
+        calendarMonthCaptionFontName: 'StagSans',
+        calendarMonthCaptionFontSize: 20,
+        calendarMonthCaptionFontWeight: '400',
+        calendarMonthCaptionLineHeight: 1.4,
+        calendarMonthCaptionPaddingBottom: 48,
+        dateInputBorderColor: 'rgba(0, 0, 0, 0)',
+        dateInputBorderRadius: 4,
+        dateInputFocusBorderColor: null,
+        dateInputHoverBorderColor: null,
+        dateInputInsideBorderColor: null,
+        dateInputInsideColor: null,
+        dateInputStrokeColor: null,
+        dayPickerNavigationButtonBackgroundColor: null,
+        dayPickerNavigationButtonBorderColor: null,
+        dayPickerNavigationButtonChildLeft: 8,
+        dayPickerNavigationButtonChildRight: 8,
+        dayPickerNavigationButtonChildSvgFill: null,
+        dayPickerNavigationButtonDefaultHoverBorderColor: null,
+        dayPickerNavigationButtonMaxHeight: 32,
+        dayPickerNavigationButtonMaxWidth: 32,
+        dayPickerNavigationButtonPadding: 8,
+        dayPickerNavigationSVGHorizontalFill: null,
+        dayPickerWeekHeaderColor: null,
+        dayPickerWeekHeaderFontName: 'StagSans',
+        dayPickerWeekHeaderFontWeight: '500',
+        dayPickerWeekHeaderLineHeight: 1.42857142857,
+        dayPickerWeekHeaderSmall: 14,
+        hiddenInputFieldContainerHeight: 0,
+        hiddenInputFieldContainerWidth: 0,
+        invalidInputMixin: null,
+        nextIcon: PaletteIconArrowRight,
+        previousIcon: PaletteIconArrowLeft,
+        singleDatePickerBorderColor: null,
+        singleDatePickerLeftRight: 16,
+        singleDatePickerPaddingTopBottom: 8,
+        singleDatePickerRadius: 4,
+        validInputMixin: null
+      }
+    },
     Divider: {
       appearances: {
         decorative: {
@@ -1229,6 +1319,23 @@ module.exports = {
         verticalAlign: 'middle'
       }
     },
+    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: PaletteIconChevronUp }
+        }
+      ],
+      tokens: { icon: PaletteIconChevronDown, size: 4 }
+    },
     ExpandCollapsePanel: {
       appearances: {},
       rules: [],
@@ -1289,6 +1396,42 @@ module.exports = {
         titleFontSize: 16
       }
     },
+    Footnote: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        closeButtonBorderColor: '#000000',
+        closeButtonBorderSize: 1,
+        closeButtonHeight: 24,
+        closeButtonIconSize: 16,
+        closeButtonMarginBottom: 4,
+        closeButtonMarginLeft: 4,
+        closeButtonMarginRight: 12,
+        closeButtonMarginTop: 12,
+        closeButtonWidth: 24,
+        footnoteBackground: '#fafafa',
+        footnoteBodyBackground: '#fafafa',
+        footnoteBodyPaddingBottom: 32,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteBorderColorMd: '#c9c8c8',
+        footnoteBorderTopSizeMd: 1,
+        headerMargin: 16,
+        listItemColor: '#000000',
+        listItemFontSize: 14,
+        listItemLineHeight: 1.42857142857,
+        listItemMarkerFontSize: 16,
+        listItemMarkerLineHeight: 1.42857142857,
+        listItemPaddingLeft: 8,
+        listPaddingLeft: 32
+      }
+    },
+    FootnoteLink: {
+      appearances: {},
+      rules: [],
+      tokens: { lineHeight: 1, paddingLeft: 2, paddingRight: 2 }
+    },
     HorizontalScrollButton: {
       appearances: {
         focus: {
@@ -1412,6 +1555,11 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        inverse: {
+          description: 'For use on dark backgrounds',
+          type: 'variant',
+          values: [ true ]
+        },
         password: {
           description: 'Password masked or not',
           type: 'variant',
@@ -1421,63 +1569,177 @@ module.exports = {
           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 ]
-        }
+        },
+        raised: {
+          description: 'Uses shadow and background colour to appear raised above the page',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: { type: 'variant', values: [ 'small', 'large' ] }
       },
       rules: [
-        { if: { compact: true }, tokens: { outerBorderGap: 0 } },
+        { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
         {
           if: { hover: true },
-          tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
+          tokens: {
+            backgroundColor: '#016b6a',
+            iconColor: '#ffffff',
+            iconScale: 1.1
+          }
+        },
+        {
+          if: { hover: true, password: true },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderColor: '#016b6a',
+            iconColor: '#ffffff'
+          }
         },
         {
           if: { password: true },
-          tokens: { borderColor: 'rgba(0, 0, 0, 0)' }
+          tokens: { borderColor: 'transparent' }
         },
         {
-          if: { password: true, pressed: true },
+          if: { focus: true, password: true },
+          tokens: { borderColor: '#016b6a' }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { backgroundColor: '#bbeaf5', iconColor: '#000000' }
+        },
+        {
+          if: { focus: true },
           tokens: {
-            backgroundColor: '#1b4746',
-            borderColor: '#1b4746',
-            iconColor: '#ffffff'
+            backgroundColor: 'transparent',
+            iconColor: '#000000',
+            outerBorderColor: '#016b6a',
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, password: true },
+          tokens: {
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 4,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#e5f7fb',
+            iconColor: '#e5f7fb',
+            outerBorderColor: '#e5f7fb',
+            outerBorderWidth: 1
           }
         },
         {
           if: { pressed: true },
           tokens: {
-            backgroundColor: '#1b4746',
-            borderColor: '#1b4746',
-            iconColor: '#ffffff'
+            backgroundColor: '#014847',
+            iconColor: '#ffffff',
+            outerBorderWidth: 0
           }
         },
         {
-          if: { focus: true, password: true },
+          if: { password: true, pressed: true },
+          tokens: {
+            backgroundColor: '#014847',
+            borderColor: '#014847',
+            iconColor: '#ffffff',
+            outerBorderGap: 4
+          }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            borderColor: '#c9c8c8',
+            iconColor: '#000000',
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { iconSize: 24, padding: 12 }
+        },
+        { if: { size: 'small' }, tokens: { iconSize: 16, padding: 4 } },
+        {
+          description: 'Raised IconButtons follow different design patterns to other variants',
+          if: { raised: true },
           tokens: {
+            backgroundColor: '#ffffff',
+            borderColor: '#016b6a',
+            borderWidth: 1,
+            iconSize: 16,
+            outerBorderColor: 'transparent',
+            outerBorderGap: 0,
+            outerBorderWidth: 0,
+            padding: 8,
+            shadow: {
+              blur: 2,
+              color: 'rgba(0, 0, 0, 0.1)',
+              inset: false,
+              offsetX: 0,
+              offsetY: 2,
+              spread: 0
+            }
+          }
+        },
+        {
+          if: { hover: true, raised: true },
+          tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
+        },
+        {
+          if: { raised: true, size: 'large' },
+          tokens: { iconSize: 24, padding: 12 }
+        },
+        { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+        {
+          if: { focus: true, raised: true },
+          tokens: {
+            backgroundColor: '#ffffff',
             borderColor: '#016b6a',
             borderWidth: 3,
-            iconColor: '#016b6a'
+            iconColor: '#000000'
           }
         },
         {
-          if: { inactive: true },
+          if: { pressed: true, raised: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0)',
+            backgroundColor: '#014847',
             borderWidth: 0,
             iconColor: '#ffffff'
           }
         },
         {
           if: { inactive: true, password: true },
-          tokens: { iconColor: '#c9c8c8' }
-        }
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+            iconColor: '#014847',
+            outerBorderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
+        {
+          if: { focus: true, pressed: true, raised: true },
+          tokens: {
+            backgroundColor: '#014847',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        { if: { compact: true }, tokens: { outerBorderGap: 0 } }
       ],
       tokens: {
         backgroundColor: 'transparent',
-        borderColor: '#016b6a',
+        borderColor: 'transparent',
         borderRadius: 99999999999999,
-        borderWidth: 3,
-        iconColor: '#016b6a',
+        borderWidth: 1,
+        iconColor: '#000000',
         iconScale: 1,
-        iconSize: 24,
+        iconSize: 16,
         iconTranslateX: 0,
         iconTranslateY: 0,
         outerBorderColor: 'transparent',
@@ -2077,6 +2339,60 @@ 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: [],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderRadius: 0,
+        borderWidth: 1,
+        flex: 1,
+        outerBorderColor: '#ffffff',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        separatorColor: '#000000'
+      }
+    },
+    PriceLockup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        bottomLinksMarginLeft: 4,
+        bottomTextMarginTop: 4,
+        dividerColor: '#666666',
+        fontColor: '#000000',
+        footnoteGap: 4,
+        footnoteMarginTop: 4,
+        priceMarginBottom: 8,
+        strikeThroughBackground: '#efefef',
+        strikeThroughHeight: 2,
+        topTextMarginBottom: 4
+      }
+    },
     Progress: {
       appearances: { size: { type: 'variant', values: [ 'mini' ] } },
       rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
@@ -2366,17 +2682,6 @@ module.exports = {
             outerBorderWidth: 1
           }
         },
-        {
-          if: { checked: true, focus: true },
-          tokens: {
-            inputBackgroundColor: '#016b6a',
-            inputBorderColor: '#ffffff',
-            inputOutlineColor: '#016b6a',
-            outerBorderColor: '#17367d',
-            outerBorderGap: 5,
-            outerBorderWidth: 1
-          }
-        },
         {
           if: { hover: true },
           tokens: {
@@ -2385,24 +2690,6 @@ module.exports = {
             outerBorderWidth: 1
           }
         },
-        {
-          if: { checked: true, hover: true },
-          tokens: {
-            inputBackgroundColor: '#016b6a',
-            inputBorderColor: '#ffffff',
-            inputOutlineColor: '#016b6a',
-            outerBorderColor: '#17367d',
-            outerBorderGap: 5,
-            outerBorderWidth: 1
-          }
-        },
-        {
-          if: { checked: true },
-          tokens: {
-            inputBackgroundColor: '#016b6a',
-            inputOutlineColor: '#016b6a'
-          }
-        },
         {
           if: { inactive: true },
           tokens: {
@@ -2416,12 +2703,15 @@ module.exports = {
           if: { checked: true, inactive: true },
           tokens: {
             checkedBackgroundColor: '#c9c8c8',
-            inputBackgroundColor: '#c9c8c8',
+            inputBackgroundColor: '#ffffff',
             inputBorderColor: '#ffffff',
             inputBorderWidth: 3,
-            inputOutlineColor: '#c9c8c8',
+            inputOutlineColor: '#ffffff',
             inputOutlineWidth: 1,
-            labelColor: '#666666'
+            labelColor: '#666666',
+            outerBorderColor: '#c9c8c8',
+            outerBorderGap: 1,
+            outerBorderWidth: 1
           }
         }
       ],
@@ -2795,35 +3085,39 @@ module.exports = {
       },
       rules: [
         {
-          if: { hover: true, inactive: null },
+          if: { hover: true },
           tokens: {
             outerBackgroundColor: '#efefef',
             outerBorderColor: '#efefef'
           }
         },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#016b6a', borderWidth: 3 }
+        },
         {
           if: { validation: 'success' },
           tokens: {
-            borderColor: '#258b0b',
+            borderColor: '#016b6a',
             validationIcon: PaletteIconCheckCircledFilled,
-            validationIconColor: '#258b0b'
+            validationIconColor: '#016b6a'
           }
         },
         {
           if: { validation: 'error' },
           tokens: {
-            borderColor: '#df3d0c',
-            validationIcon: PaletteIconTimes,
-            validationIconColor: '#df3d0c'
+            borderColor: '#ee2c74',
+            validationIcon: PaletteIconExclamationOctagon,
+            validationIconColor: '#ee2c74'
           }
         },
-        {
-          if: { focus: true },
-          tokens: { borderColor: '#016b6a', borderWidth: 2, icon: null }
-        },
         {
           if: { inactive: true },
-          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#efefef',
+            icon: null
+          }
         }
       ],
       tokens: {
@@ -2831,7 +3125,7 @@ module.exports = {
         borderColor: '#000000',
         borderRadius: 4,
         borderWidth: 1,
-        color: '#000000',
+        color: '#666666',
         fontName: 'StagSans',
         fontSize: 16,
         fontWeight: '400',
@@ -2842,10 +3136,10 @@ module.exports = {
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderWidth: 2,
-        paddingBottom: 10,
+        paddingBottom: 12,
         paddingLeft: 16,
         paddingRight: 16,
-        paddingTop: 10,
+        paddingTop: 12,
         validationIcon: null,
         validationIconColor: 'rgba(0, 0, 0, 0)',
         validationIconSize: 24
@@ -3344,22 +3638,22 @@ module.exports = {
         {
           if: { validation: 'success' },
           tokens: {
-            borderColor: '#258b0b',
+            borderColor: '#016b6a',
             icon: PaletteIconCheckCircledFilled,
-            iconColor: '#258b0b'
+            iconColor: '#016b6a'
           }
         },
         {
           if: { validation: 'error' },
           tokens: {
-            borderColor: '#df3d0c',
-            icon: PaletteIconTimes,
-            iconColor: '#df3d0c'
+            borderColor: '#ee2c74',
+            icon: PaletteIconExclamationOctagon,
+            iconColor: '#ee2c74'
           }
         },
         {
           if: { focus: true, inactive: null },
-          tokens: { borderColor: '#016b6a', borderWidth: 2, icon: null }
+          tokens: { borderColor: '#016b6a', borderWidth: 3, icon: null }
         },
         {
           if: { inactive: true },
@@ -3862,5 +4156,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.17.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.18.0' }
 }

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.9.0",
-    "@telus-uds/system-theme-tokens": "^2.17.0"
+    "@telus-uds/palette-koodo": "^0.10.0",
+    "@telus-uds/system-theme-tokens": "^2.18.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^0.9.0"
+    "@telus-uds/palette-koodo": "^0.10.0"
   },
   "repository": {
     "type": "git",
@@ -31,5 +31,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "3.18.0"
+  "version": "3.19.0"
 }