@telus-uds/theme-koodo 3.18.0 → 3.20.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 Wed, 19 Apr 2023 11:23:02 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: {
@@ -1329,10 +1472,10 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#c9c8c8',
+        borderColor: '#016b6a',
         borderRadius: 32,
         borderWidth: 1,
-        iconColor: '#016b6a',
+        iconColor: '#000000',
         iconScale: 1,
         iconSize: 16,
         iconTranslateX: 0,
@@ -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',
@@ -1487,6 +1749,7 @@ module.exports = {
         shadow: null
       }
     },
+    Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
     InputLabel: {
       appearances: {},
       rules: [],
@@ -1710,7 +1973,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' ] },
@@ -1733,7 +2002,9 @@ module.exports = {
         backdropColor: '#000000',
         backdropOpacity: 0.5,
         backgroundColor: '#ffffff',
+        borderColor: '#ffffff',
         borderRadius: 4,
+        cancelButtonColor: '#000000',
         closeIcon: PaletteIconTimes,
         closeIconColor: '#000000',
         closeIconSize: 24,
@@ -1742,12 +2013,17 @@ module.exports = {
         containerPaddingLeft: 0,
         containerPaddingRight: 0,
         containerPaddingTop: 0,
+        gap: 16,
+        headingColor: '#000000',
+        headingPaddingRight: 24,
         height: null,
+        marginLeft: 24,
+        marginRight: 24,
         maxWidth: '100%',
-        paddingBottom: 16,
-        paddingLeft: 16,
-        paddingRight: 16,
-        paddingTop: 16,
+        paddingBottom: 24,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 24,
         shadow: {
           blur: 0,
           color: 'rgba(0, 0, 0, 0)',
@@ -1755,7 +2031,8 @@ module.exports = {
           offsetX: 0,
           offsetY: 0,
           spread: 0
-        }
+        },
+        subHeadingMarginTop: 8
       }
     },
     Notification: {
@@ -2077,6 +2354,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 +2697,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 +2705,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 +2718,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 +3100,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 +3140,7 @@ module.exports = {
         borderColor: '#000000',
         borderRadius: 4,
         borderWidth: 1,
-        color: '#000000',
+        color: '#666666',
         fontName: 'StagSans',
         fontSize: 16,
         fontWeight: '400',
@@ -2842,10 +3151,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
@@ -3094,6 +3403,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: '#000000',
+        cellHeadingBackground: '#000000',
+        cellHeadingBoxShadowColor: '#000000',
+        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: '#000000',
+        tablePaddingBottom: 24
+      }
+    },
     Tabs: {
       appearances: {},
       rules: [],
@@ -3101,7 +3440,7 @@ module.exports = {
         borderBottomColor: 'transparent',
         borderBottomWidth: 0,
         buttonClearance: 32,
-        gutter: 16,
+        gutter: null,
         nextIcon: PaletteIconChevronRight,
         previousIcon: PaletteIconChevronLeft,
         space: 0
@@ -3121,6 +3460,12 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        inverse: { type: 'variant', 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 ]
+        },
         selected: {
           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',
@@ -3128,39 +3473,94 @@ module.exports = {
         }
       },
       rules: [
-        { if: { focus: true }, tokens: { borderWidth: 4 } },
-        { if: { hover: true }, tokens: { backgroundColor: '#f9f6a5' } },
         {
           if: { selected: true },
           tokens: {
-            backgroundColor: '#016b6a',
-            borderWidth: 0,
-            color: '#ffffff',
-            highlightColor: '#016b6a',
-            highlightTriangleSize: 8
+            backgroundColor: '#ffffff',
+            color: '#016b6a',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#016b6a'
+          }
+        },
+        { if: { hover: true }, tokens: { backgroundColor: '#e6e6e6' } },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#666666'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#c9c8c8', highlightBarBorderWidth: 0 }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { backgroundColor: '#ffffff', highlightColor: '#016b6a' }
+        },
+        {
+          if: { inverse: true },
+          tokens: { backgroundColor: 'transparent', color: '#e5f7fb' }
+        },
+        {
+          if: { inverse: true, selected: true },
+          tokens: {
+            color: '#c9c8c8',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#c9c8c8'
+          }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#bbeaf5' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            color: '#e5f7fb',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#e5f7fb'
+          }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: { color: '#c9c8c8', highlightBarBorderWidth: 0 }
+        },
+        {
+          if: { focus: true, inverse: true, selected: true },
+          tokens: {
+            color: '#c9c8c8',
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#c9c8c8'
           }
         }
       ],
       tokens: {
-        backgroundColor: '#efefef',
-        borderColor: '#c9c8c8',
+        backgroundColor: '#ffffff',
+        borderColor: 'transparent',
         borderRadius: 0,
-        borderWidth: 1,
-        color: '#000000',
+        borderWidth: 0,
+        color: '#666666',
         fontName: 'StagSans',
         fontScaleCap: 64,
         fontSize: 16,
-        fontWeight: '700',
+        fontWeight: '600',
         highlightBarBorderRadius: 0,
         highlightBarBorderWidth: 0,
         highlightBarHeight: 0,
         highlightColor: 'transparent',
         highlightTriangleSize: 0,
         letterSpacing: 0,
-        lineHeight: 1.1,
+        lineHeight: 1.5,
         maxWidth: null,
-        paddingHorizontal: 16,
-        paddingVertical: 16,
+        paddingHorizontal: 24,
+        paddingVertical: 4,
         space: 0,
         textAlign: 'center',
         textTransform: 'none'
@@ -3344,22 +3744,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 },
@@ -3442,6 +3842,28 @@ module.exports = {
         timelineContainerDirection: 'column'
       }
     },
+    Toast: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        animationBackgroundColorAfter: '#ffffff',
+        animationBackgroundColorBefore: '#ffffff',
+        animationColorAfter: '#016b6a',
+        animationColorBefore: '#ffffff',
+        animationDivColorAfter: '#ffffff',
+        animationDivColorBefore: '#ffffff',
+        animationFillColorAfter: '#ffffff',
+        animationFillColorBefore: '#ffffff',
+        animationHeightAfter: 24,
+        animationHeightBefore: 0,
+        animationPaddingBottomAfter: 16,
+        animationPaddingBottomBefore: 0,
+        animationPaddingTopAfter: 16,
+        animationPaddingTopBefore: 0,
+        containerBackgroundColor: '#ffffff',
+        containerGap: 12
+      }
+    },
     ToggleSwitch: {
       appearances: {
         focus: {
@@ -3802,6 +4224,15 @@ module.exports = {
         textTransform: 'none'
       }
     },
+    WaffleGrid: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        itemBorderColor: 'rgba(0, 0, 0, 0)',
+        itemPadding: 16,
+        rowBorderWidth: 1
+      }
+    },
     spacingScale: {
       appearances: {
         space: {
@@ -3862,5 +4293,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.17.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.19.0' }
 }