@telus-uds/theme-koodo 4.3.0 → 4.4.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 14 Jun 2023 00:00:11 GMT
+ * Generated on Fri, 16 Jun 2023 21:03:48 GMT
  *
  */
 
@@ -21,7 +21,6 @@ const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times'
 const PaletteIconExclamationTriangle = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle')
 const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
 const PaletteIconExclamationOctagon = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon')
-const PaletteIconCheckCircledNotFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledNotFilled')
 const PaletteIconArrowLeft = require('@telus-uds/palette-koodo/build/rn/icons/ArrowLeft')
 const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeMasked')
 const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
@@ -677,6 +676,10 @@ module.exports = {
           if: { open: true },
           tokens: { icon: PaletteIconChevronUp }
         },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
         {
           if: { pressed: true },
           tokens: {
@@ -685,10 +688,6 @@ module.exports = {
             color: '#ffffff'
           }
         },
-        {
-          if: { focus: true },
-          tokens: { outerBorderColor: '#016b6a' }
-        },
         {
           if: { hover: true },
           tokens: {
@@ -701,10 +700,10 @@ module.exports = {
         {
           if: { inactive: true },
           tokens: {
-            backgroundColor: '#666666',
-            borderWidth: 0,
-            color: '#ffffff',
-            iconColor: '#666666'
+            backgroundColor: '#efefef',
+            borderColor: '#efefef',
+            color: '#c9c8c8',
+            iconColor: '#c9c8c8'
           }
         },
         {
@@ -742,14 +741,6 @@ module.exports = {
         {
           if: { focus: true, pressed: true, selected: true },
           tokens: { backgroundColor: '#1b4746', outerBorderColor: '#1b4746' }
-        },
-        {
-          if: { inactive: true },
-          tokens: {
-            backgroundColor: '#efefef',
-            color: '#c9c8c8',
-            iconColor: '#c9c8c8'
-          }
         }
       ],
       tokens: {
@@ -1308,7 +1299,7 @@ module.exports = {
         color: '#016b6a',
         fontSize: 16,
         iconDisplace: 0,
-        iconSize: 18,
+        iconSize: 24,
         iconSpace: 1,
         leftIcon: PaletteIconChevronLeft,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -1339,37 +1330,49 @@ module.exports = {
             textLineHeight: 1.14285714286
           }
         },
-        {
-          if: { large: true, viewport: [ 'xs' ] },
-          tokens: { textFontSize: 28 }
-        },
-        {
-          if: { feature: true, viewport: [ 'xs' ] },
-          tokens: { textFontSize: 28 }
-        },
         {
           if: { feature: true },
           tokens: {
-            labelBorderColor: null,
-            textFontSize: 64,
-            textLineHeight: 1.14285714286,
+            containerBorderColor: '#016b6a',
+            labelBorderColor: '#016b6a',
+            textFontSize: 70,
+            textLineHeight: 1.2,
             textTimerFontName: 'StagSans',
-            textTimerFontWeight: '300'
+            textTimerFontWeight: '700'
           }
         },
         {
           if: { large: true },
           tokens: {
-            textFontSize: 64,
-            textLineHeight: 1.14285714286,
+            labelFontName: 'StagSans',
+            labelFontSize: 16,
+            labelFontWeight: '400',
+            textFontSize: 70,
+            textLineHeight: 1.2,
             textTimerFontName: 'StagSans',
-            textTimerFontWeight: '300'
+            textTimerFontWeight: '700'
           }
         },
-        { if: { inverse: true }, tokens: { labelBorderColor: null } }
+        {
+          if: { large: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 44 }
+        },
+        {
+          if: { feature: true, viewport: [ 'xs' ] },
+          tokens: { textFontSize: 44 }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            containerBorderColor: '#ffffff',
+            labelBorderColor: '#ffffff'
+          }
+        }
       ],
       tokens: {
+        containerBorderColor: 'rgba(0, 0, 0, 0)',
         containerBorderRadius: 6,
+        containerBorderWidth: 2,
         containerGradient: null,
         containerInverseBorder: 2,
         containerInverseBorderColor: '#ffffff',
@@ -1377,7 +1380,9 @@ module.exports = {
         containerPaddingLeftRight: 64,
         inverseBorderColor: null,
         labelBorderColor: null,
+        labelFontName: 'StagSans',
         labelFontSize: 16,
+        labelFontWeight: '400',
         labelLineHeight: 1.5,
         textFontSize: 16,
         textLineHeight: 1.14285714286,
@@ -1674,22 +1679,23 @@ module.exports = {
       appearances: {},
       rules: [],
       tokens: {
+        closeButtonBackgroundColor: '#ffffff',
         closeButtonBorderColor: '#000000',
         closeButtonBorderSize: 0,
-        closeButtonHeight: 24,
+        closeButtonHeight: 16,
         closeButtonIconSize: 16,
         closeButtonMarginBottom: 4,
         closeButtonMarginLeft: 4,
         closeButtonMarginRight: 12,
         closeButtonMarginTop: 4,
-        closeButtonWidth: 24,
+        closeButtonWidth: 16,
         closeIcon: PaletteIconClose,
         footnoteBackground: '#ffffff',
         footnoteBodyBackground: '#ffffff',
         footnoteBodyPaddingBottom: 32,
         footnoteBodyPaddingLeft: 16,
         footnoteBodyPaddingRight: 16,
-        footnoteBodyPaddingTop: 16,
+        footnoteBodyPaddingTop: 0,
         footnoteBorderColorMd: '#c9c8c8',
         footnoteBorderTopSizeMd: 1,
         footnoteHeaderPaddingBottom: 16,
@@ -1699,13 +1705,13 @@ module.exports = {
         headerFontName: 'StagSans',
         headerFontSize: 16,
         headerFontWeight: '700',
-        headerLineHeight: 20,
+        headerLineHeight: 1.25,
         headerMargin: 16,
         listItemColor: '#000000',
         listItemFontSize: 14,
-        listItemLineHeight: 1.42857142857,
+        listItemLineHeight: 1.45,
         listItemMarkerFontSize: 14,
-        listItemMarkerLineHeight: 1.42857142857,
+        listItemMarkerLineHeight: 1.45,
         listItemPaddingLeft: 8,
         listPaddingLeft: 32
       }
@@ -2251,7 +2257,7 @@ module.exports = {
         blockFontName: 'StagSans',
         blockFontSize: 16,
         blockFontWeight: '600',
-        blockLineHeight: 1.3,
+        blockLineHeight: 1.5,
         borderRadius: 4,
         color: '#016b6a',
         icon: null,
@@ -2516,6 +2522,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: '#000000',
+        headerFontName: 'StagSans',
+        headerFontSize: 24,
+        headerFontWeight: '700',
+        headerLineHeight: 1.33333333333,
+        maxHeightSize: 0,
+        maxWidthSize: 0,
+        minHeight: 412,
+        minWidth: 320,
+        subHeaderFontName: 'StagSans',
+        subHeaderFontSize: 16,
+        subHeaderFontWeight: '400',
+        subHeaderLineHeight: 1.5
+      }
+    },
     NavigationBar: {
       appearances: {
         expanded: {
@@ -3003,14 +3062,28 @@ module.exports = {
           values: [ true ]
         }
       },
-      rules: [],
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 2 } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#e6e6e6' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        }
+      ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#ffffff',
-        borderRadius: 0,
+        borderColor: '#c9c8c8',
+        borderRadius: 8,
         borderWidth: 1,
         flex: 1,
-        outerBorderColor: '#ffffff',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 0,
         outerBorderWidth: 0,
         paddingBottom: 0,
@@ -3288,12 +3361,23 @@ module.exports = {
     },
     QuickLinksFeatureItem: {
       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: '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',
@@ -3305,22 +3389,49 @@ module.exports = {
           if: { viewport: 'xl' },
           tokens: { contentMaxDimension: 184, imageDimension: 168 }
         },
-        { if: { hover: true }, tokens: { imageDimension: 140 } },
         {
-          if: { hover: true, viewport: 'xl' },
-          tokens: { imageDimension: 184 }
+          if: { hover: true },
+          tokens: {
+            color: '#1b4746',
+            imageDimension: 140,
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { color: '#016b6a', outerBorderColor: '#1b4746' }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            color: '#595959',
+            outerBorderColor: '#595959',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            color: '#595959',
+            outerBorderColor: '#595959',
+            textLine: 'underline'
+          }
         }
       ],
       tokens: {
         color: '#016b6a',
         contentAlignItems: 'center',
         contentDirection: 'column',
-        contentMaxDimension: 140,
+        contentMaxDimension: 168,
         contentSpace: 3,
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        gap: 32,
         imageDimension: 128,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         textAlign: 'center',
-        textLine: 'underline'
+        textLine: 'none'
       }
     },
     QuickLinksList: {
@@ -4228,6 +4339,7 @@ module.exports = {
         {
           if: { inverse: true },
           tokens: {
+            completedIconColor: '#666666',
             connectorColor: '#ffffff',
             connectorCompletedColor: '#ffffff',
             knobBackgroundColor: 'rgba(0, 0, 0, 0)',
@@ -4248,7 +4360,7 @@ module.exports = {
         completedIconSize: 10,
         connectorColor: '#016b6a',
         connectorCompletedColor: '#016b6a',
-        connectorCompletedHeight: 1,
+        connectorCompletedHeight: 3,
         connectorHeight: 1,
         connectorMinWidth: 16,
         containerPaddingBottom: null,
@@ -4260,7 +4372,7 @@ module.exports = {
         knobBorderWidth: 1,
         knobCompletedBackgroundColor: '#016b6a',
         knobCompletedBorderColor: '#016b6a',
-        knobCompletedPaddingLeft: 2,
+        knobCompletedPaddingLeft: 1,
         knobCompletedPaddingTop: 2,
         knobCurrentBackgroundColor: '#016b6a',
         knobCurrentBorderColor: '#016b6a',
@@ -4273,11 +4385,11 @@ module.exports = {
         labelColor: '#016b6a',
         labelCurrentColor: '#016b6a',
         labelCurrentFontName: 'StagSans',
-        labelCurrentFontWeight: '700',
+        labelCurrentFontWeight: '600',
         labelDirection: 'row',
         labelFontName: 'StagSans',
         labelFontSize: 16,
-        labelFontWeight: '400',
+        labelFontWeight: '600',
         labelGap: 4,
         labelLineHeight: 1.5,
         labelMarginTop: 10,
@@ -4285,7 +4397,13 @@ module.exports = {
         labelPaddingRight: 16,
         showStepLabel: false,
         showStepName: true,
-        showStepTrackerLabel: true
+        showStepTrackerLabel: true,
+        stepLabelColor: '#016b6a',
+        stepLabelFontName: 'StagSans',
+        stepLabelFontSize: 16,
+        stepLabelFontWeight: '600',
+        stepLabelLineHeight: 1.5,
+        textStepTrackerLabel: 2
       }
     },
     StoryCard: {
@@ -4519,15 +4637,21 @@ module.exports = {
       }
     },
     Tags: {
-      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: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
       tokens: {
         alignItems: 'center',
         direction: 'row',
         flexGrow: 0,
         flexShrink: 0,
         justifyContent: 'flex-start',
-        space: 3
+        space: 1
       }
     },
     TagsItem: {
@@ -4564,75 +4688,103 @@ module.exports = {
         {
           if: { pressed: true },
           tokens: {
-            backgroundColor: '#016b6a',
-            borderColor: '#016b6a',
-            color: '#ffffff'
+            backgroundColor: '#1b4746',
+            borderColor: '#1b4746',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconBackground: '#1b4746',
+            iconColor: '#ffffff',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
           }
         },
         {
           if: { focus: true },
-          tokens: { outerBorderColor: '#016b6a' }
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#016b6a',
+            color: '#016b6a',
+            iconBackground: 'rgba(0, 0, 0, 0)',
+            iconColor: '#016b6a',
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 3,
+            outerBorderWidth: 1
+          }
         },
         {
           if: { hover: true },
-          tokens: { backgroundColor: '#1b4746', iconColor: '#1b4746' }
+          tokens: {
+            backgroundColor: '#1b4746',
+            borderColor: '#1b4746',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconBackground: '#1b4746',
+            iconColor: '#ffffff'
+          }
         },
         {
           if: { selected: true },
           tokens: {
-            icon: PaletteIconCheckCircledFilled,
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
+            backgroundColor: '#016b6a',
+            borderColor: '#016b6a',
+            color: '#ffffff',
+            icon: PaletteIconClose,
+            iconBackground: '#016b6a',
+            iconColor: '#ffffff',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
           }
         },
         {
-          if: { focus: true, pressed: true },
-          tokens: { outerBorderColor: '#016b6a' }
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
         },
         {
-          if: { inactive: true },
+          if: { focus: true, selected: true },
           tokens: {
-            backgroundColor: '#666666',
-            borderWidth: 0,
-            color: '#ffffff',
-            iconColor: '#666666'
+            backgroundColor: '#016b6a',
+            outerBorderColor: '#016b6a',
+            outerBorderWidth: 1
           }
         },
         {
-          if: { selected: true },
-          tokens: {
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
-          }
+          if: { focus: true, hover: true, selected: true },
+          tokens: { iconBackground: '#016b6a' }
         },
         {
-          if: { focus: true, selected: true },
-          tokens: { outerBorderColor: '#1b4746' }
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderWidth: 0,
+            color: '#c9c8c8',
+            iconBackground: '#efefef',
+            iconColor: '#c9c8c8'
+          }
         }
       ],
       tokens: {
         alignSelf: 'center',
-        backgroundColor: '#016b6a',
-        borderColor: '#1b4746',
+        backgroundColor: '#ffffff',
+        borderColor: '#016b6a',
         borderRadius: 4,
-        borderWidth: 0,
-        color: '#ffffff',
+        borderWidth: 1,
+        color: '#016b6a',
         fontName: 'StagSans',
-        fontSize: 14,
+        fontSize: 16,
         fontWeight: '600',
-        icon: PaletteIconCheckCircledNotFilled,
+        icon: PaletteIconAdd,
         iconAlignSelf: 'center',
         iconBackground: '#ffffff',
         iconBorderRadius: 32,
         iconColor: '#016b6a',
-        iconPadding: 4,
+        iconPadding: 2,
         iconPosition: 'right',
-        iconSize: 20,
-        iconSpace: 3,
+        iconSize: 16,
+        iconSpace: 2,
         iconTranslateX: 0,
         iconTranslateY: 0,
         lineHeight: 1.5,
@@ -4641,14 +4793,13 @@ module.exports = {
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
         outerBorderGap: 2,
-        outerBorderWidth: 2,
+        outerBorderWidth: 0,
         paddingBottom: 8,
-        paddingLeft: 24,
-        paddingRight: 16,
+        paddingLeft: 16,
+        paddingRight: 8,
         paddingTop: 8,
         shadow: null,
-        textAlign: 'center',
-        width: null
+        textAlign: 'center'
       }
     },
     TermsAndConditions: {
@@ -4868,14 +5019,28 @@ 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: '#ffffff',
-        animationBackgroundColorBefore: '#ffffff',
-        animationColorAfter: '#016b6a',
+        animationBackgroundColorAfter: '#efefef',
+        animationBackgroundColorBefore: '#016b6a',
+        animationColorAfter: '#000000',
         animationColorBefore: '#ffffff',
-        animationDivColorAfter: '#ffffff',
+        animationDivColorAfter: '#016b6a',
         animationDivColorBefore: '#ffffff',
         animationHeightAfter: 24,
         animationHeightBefore: 0,
@@ -4883,7 +5048,9 @@ module.exports = {
         animationPaddingBottomBefore: 0,
         animationPaddingTopAfter: 16,
         animationPaddingTopBefore: 0,
-        containerBackgroundColor: '#ffffff',
+        chevronlinkFontName: 'StagSans',
+        chevronlinkFontWeight: '400',
+        containerBackgroundColor: '#016b6a',
         containerGap: 12
       }
     },
@@ -5119,6 +5286,11 @@ module.exports = {
     },
     Typography: {
       appearances: {
+        bold: {
+          description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+          type: 'variant',
+          values: [ true ]
+        },
         colour: {
           type: 'variant',
           values: [
@@ -5173,6 +5345,11 @@ module.exports = {
           if: { weight: 'bold' },
           tokens: { fontName: 'StagSans', fontWeight: '700' }
         },
+        {
+          description: 'Please only bold single words while using with headings',
+          if: { bold: true },
+          tokens: { fontName: 'StagSans', fontWeight: '600' }
+        },
         {
           if: { size: 'large' },
           tokens: { fontSize: 20, lineHeight: 1.4 }
@@ -5529,5 +5706,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.32.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.33.0' }
 }