@telus-uds/theme-allium 7.3.1 → 7.5.0

package/theme.json

@@ -85,6 +85,10 @@
     },
     "ActivityIndicator": {
       "appearances": {
+        "dots": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
@@ -104,8 +108,10 @@
       ],
       "tokens": {
         "color": "{palette.color.greenAccessible}",
+        "dotSize": "{palette.size.size6}",
+        "indicatorBackgroundColor": "{palette.color.greenTusk}",
         "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border2}"
+        "thickness": "{palette.border.border3}"
       }
     },
     "Autocomplete": {
@@ -2708,10 +2714,19 @@
           "values": [true]
         },
         "pressed": "{appearances.ChevronLink.pressed}",
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
         "size": {
           "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
           "type": "variant",
           "values": ["large", "small", "micro"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
@@ -2849,893 +2864,1413 @@
             "color": "{palette.color.greyCharcoal}",
             "outerBorderColor": "{palette.color.greyCharcoal}"
           }
-        }
-      ],
-      "tokens": {
-        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
-        "color": "{palette.color.greenAccessible}",
-        "fontSize": "{palette.fontSize.size16}",
-        "iconDisplace": "{palette.size.size0}",
-        "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.1}",
-        "leftIcon": "{palette.icon.ArrowLeft}",
-        "outerBorderColor": "{palette.color.transparent}",
-        "rightIcon": "{palette.icon.ArrowRight}",
-        "textLine": "{system.textLine.none}"
-      }
-    },
-    "ColourToggle": {
-      "appearances": {
-        "focus": "{appearances.ColourToggle.focus}",
-        "hover": "{appearances.ColourToggle.hover}",
-        "pressed": "{appearances.ColourToggle.pressed}",
-        "selected": "{appearances.ColourToggle.selected}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "hover": true
+            "focus": true,
+            "quiet": true
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.greyCloud}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "focus": true
+            "style": "inline"
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.greyShuttle}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greyCharcoal}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "focus": true,
+            "style": "inline"
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.greyMystic}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}"
           }
         },
         {
           "if": {
-            "selected": true
+            "hover": true,
+            "style": "inline"
           },
           "tokens": {
-            "bubbleBorderColor": "{palette.color.purpleTelus}",
-            "bubbleBorderRadius": "{palette.radius.radius45}",
-            "bubbleBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.greyMystic}",
-        "borderRadius": "{palette.radius.radius45}",
-        "borderWidth": "{palette.border.border1}",
-        "bubbleBorderColor": "{palette.color.transparent}",
-        "bubbleBorderRadius": "{palette.radius.none}",
-        "bubbleBorderWidth": "{palette.border.none}",
-        "innerBubbleBorderRadius": "{palette.radius.radius45}",
-        "innerBubbleHeight": "{palette.size.size40}",
-        "innerBubbleWidth": "{palette.size.size40}",
-        "outerBubbleContentAlignItems": "{system.flexAlign.center}",
-        "outerBubbleHeight": "{palette.size.size48}",
-        "outerBubbleJustifyContent": "{system.flexJustifyContent.center}",
-        "outerBubbleWidth": "{palette.size.size48}",
-        "shadow": "{palette.shadow.surfaceInset}",
-        "space": "{system.integer.2}"
-      }
-    },
-    "Countdown": {
-      "appearances": {
-        "feature": {
-          "type": "variant",
-          "values": [true]
-        },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
-        },
-        "label": {
-          "type": "variant",
-          "values": [true]
-        },
-        "large": {
-          "type": "variant",
-          "values": [true]
         },
-        "viewport": "{appearances.system.viewport}"
-      },
-      "rules": [
         {
           "if": {
-            "viewport": ["xs"]
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "containerPaddingBottomTop": "{palette.size.size16}",
-            "containerPaddingLeftRight": "{palette.size.size24}",
-            "labelFontSize": "{palette.fontSize.size14}",
-            "labelLineHeight": "{palette.lineHeight.ratio10to7}",
-            "textLineHeight": "{palette.lineHeight.ratio10to7}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "large": true
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size64}",
-            "textLineHeight": "{palette.lineHeight.ratio9to8}",
-            "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
-            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "feature": true
+            "style": "subtle"
           },
           "tokens": {
-            "labelBorderColor": "{palette.color.purpleTelus}",
-            "textFontSize": "{palette.fontSize.size64}",
-            "textLineHeight": "{palette.lineHeight.ratio9to8}",
-            "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
-            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+            "color": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size40}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
-            "feature": true,
-            "viewport": ["xs"]
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size40}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "labelBorderColor": "{palette.color.white}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "feature": true,
-            "inverse": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "containerBorderColor": "{palette.color.greyShuttle}",
-            "labelBorderColor": "{palette.color.white}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
-        }
-      ],
-      "tokens": {
-        "containerBorderColor": "{palette.color.transparent}",
-        "containerBorderRadius": "{palette.radius.radius6}",
-        "containerBorderWidth": "{palette.border.border2}",
-        "containerGradient": "{palette.gradient.purple}",
-        "containerInverseBorder": "{palette.border.border2}",
-        "containerInverseBorderColor": "{palette.color.white}",
-        "containerPaddingBottomTop": "{palette.size.size48}",
-        "containerPaddingLeftRight": "{palette.size.size64}",
-        "inverseBorderColor": "{palette.color.greyShuttle}",
-        "labelBorderColor": "{palette.color.greyCharcoal}",
-        "labelFontName": "{palette.fontName.HNforTELUSSA}",
-        "labelFontSize": "{palette.fontSize.size16}",
-        "labelFontWeight": "{palette.fontWeight.weight400}",
-        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "textFontSize": "{palette.fontSize.size16}",
-        "textLineHeight": "{palette.lineHeight.ratio3to2}",
-        "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
-        "textTimerFontWeight": "{palette.fontWeight.weight400}"
-      }
-    },
-    "DatePicker": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "calendarBackgroundColor": "{palette.color.white}",
-        "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAthens}",
-        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyCloud}",
-        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
-        "calendarDayDefaultBorder": "{palette.border.border1}",
-        "calendarDayDefaultBorderColor": "{palette.color.greyCloud}",
-        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
-        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.purpleDeluge}",
-        "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
-        "calendarDayDefaultColor": "{palette.color.greyCharcoal}",
-        "calendarDayDefaultFontName": "{palette.fontName.HNforTELUSSA}",
-        "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
-        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
-        "calendarDaySelectedDisabledBackground": "{palette.color.greyAlabaster}",
-        "calendarDaySelectedDisabledColor": "{palette.color.white}",
-        "calendarDaySelectedDisabledContentBackgroundColor": "{palette.color.greyCloud}",
-        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
-        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.purpleDeluge}",
-        "calendarDaySelectedHoverBorderColor": "{palette.color.greyCloud}",
-        "calendarDaySelectedHoverColor": "{palette.color.greyCharcoal}",
-        "calendarMonthCaptionColor": "{palette.color.greyThunder}",
-        "calendarMonthCaptionFontName": "{palette.fontName.HNforTELUSSA}",
-        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
-        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
-        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
-        "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
-        "dateInputStrokeColor": "{palette.color.greyShuttle}",
-        "dayPickerNavigationButtonPadding": "{palette.size.size8}",
-        "dayPickerWeekHeaderColor": "{palette.color.greyCharcoal}",
-        "dayPickerWeekHeaderFontName": "{palette.fontName.HNforTELUSSA}",
-        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
-        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
-        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
-        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
-        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
-        "invalidInputMixin": "{palette.color.red}",
-        "nextIcon": "{palette.icon.ArrowRight}",
-        "previousIcon": "{palette.icon.ArrowLeft}",
-        "singleDatePickerBorderColor": "{palette.color.greyShuttle}",
-        "singleDatePickerLeftRight": "{palette.size.size16}",
-        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
-        "singleDatePickerRadius": "{palette.radius.radius4}",
-        "validInputMixin": "{palette.color.greenAccessible}"
-      }
-    },
-    "Disclaimer": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "color": "{palette.color.greyCharcoal}",
-        "fontName": "{palette.fontName.HNforTELUSSA}",
-        "fontSize": "{palette.fontSize.size12}",
-        "fontWeight": "{palette.fontWeight.weight500}",
-        "lineHeight": "{palette.lineHeight.ratio4to3}"
-      }
-    },
-    "Divider": {
-      "appearances": {
-        "decorative": {
-          "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
-          "type": "variant",
-          "values": [true]
-        },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
         },
-        "weight": {
-          "type": "variant",
-          "values": ["thick"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "weight": "thick"
+            "style": "feature"
           },
           "tokens": {
-            "width": "{palette.size.size2}"
+            "color": "{palette.color.greenAccessible}"
           }
         },
         {
           "if": {
-            "decorative": true
+            "focus": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.greyCloud}"
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "hover": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "color": "{palette.color.greyShuttle}",
-        "width": "{palette.size.size1}"
-      }
-    },
-    "DownloadApp": {
-      "appearances": {
-        "focus": "{appearances.DownloadApp.focus}",
-        "hover": "{appearances.DownloadApp.hover}",
-        "pressed": "{appearances.DownloadApp.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "focus": true
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "borderColor": "{palette.color.greenAccessible}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.greenDarkFern}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "hover": true
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "borderColor": "{palette.color.greyCloud}",
-            "borderRadius": "{palette.radius.radius4}"
+            "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.greenSanFelix}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.redDark}"
           }
         },
         {
           "if": {
             "focus": true,
-            "pressed": true
+            "style": "danger"
           },
           "tokens": {
-            "borderColor": "{palette.color.greenSanFelix}",
-            "borderRadius": "{palette.radius.radius4}"
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}"
           }
-        }
-      ],
-      "tokens": {
-        "androidENIcon": "{palette.icon.AndroidEN}",
-        "androidFRIcon": "{palette.icon.AndroidFR}",
-        "borderColor": "{palette.color.transparent}",
-        "borderGap": "{palette.size.size2}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.border1}",
-        "iosENIcon": "{palette.icon.IOSEN}",
-        "iosFRIcon": "{palette.icon.IOSFR}",
-        "padding": "{palette.size.size1}"
-      }
-    },
-    "ExpandCollapse": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderColor": "{palette.color.greyCloud}",
-        "borderStyle": "{system.borderStyle.solid}",
-        "borderWidth": "{system.border.zero}"
-      }
-    },
-    "ExpandCollapseControl": {
-      "appearances": {
-        "compact": {
-          "type": "variant",
-          "values": [true]
-        },
-        "expanded": "{appearances.ExpandCollapseControl.expanded}",
-        "focus": "{appearances.ExpandCollapseControl.focus}",
-        "hover": "{appearances.ExpandCollapseControl.hover}",
-        "mini": {
-          "type": "variant",
-          "values": [true]
         },
-        "pressed": "{appearances.ExpandCollapseControl.pressed}"
-      },
-      "rules": [
         {
           "if": {
-            "expanded": true
+            "hover": true,
+            "style": "danger"
           },
           "tokens": {
-            "icon": "{palette.icon.CaretUp}"
+            "color": "{palette.color.redDarker}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "compact": true
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "paddingBottom": "{palette.size.size8}",
-            "paddingLeft": "{palette.size.size0}",
-            "paddingRight": "{palette.size.size0}",
-            "paddingTop": "{palette.size.size8}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "mini": true
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "borderWidth": "{system.border.none}",
-            "paddingBottom": "{palette.size.size0}",
-            "paddingTop": "{palette.size.size0}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "focus": true
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{palette.border.border1}"
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
             "focus": true,
-            "mini": true
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{system.border.none}"
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "hover": true
+            "hover": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAlabaster}",
-            "iconPaddingTop": "{palette.size.size8}"
+            "color": "{palette.color.greyAthens}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "expanded": true,
-            "hover": true
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAlabaster}",
-            "iconPaddingTop": "{palette.size.size0}"
+            "color": "{palette.color.greyCloud}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "focus": true,
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyMystic}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{palette.border.border1}"
+            "outerBorderColor": "{palette.color.greyCloud}"
           }
         },
         {
           "if": {
-            "mini": true,
-            "pressed": true
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyMystic}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{system.border.none}"
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.transparent}",
-        "borderBottomLeftRadius": "{system.radius.zero}",
-        "borderBottomRightRadius": "{system.radius.zero}",
-        "borderColor": "{palette.color.transparent}",
-        "borderTopLeftRadius": "{system.radius.zero}",
-        "borderTopRightRadius": "{system.radius.zero}",
-        "borderWidth": "{palette.border.border1}",
-        "icon": "{palette.icon.CaretDown}",
-        "iconColor": "{palette.color.greenAccessible}",
-        "iconGap": "{palette.size.size8}",
-        "iconPaddingTop": "{palette.size.size4}",
-        "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size16}",
-        "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size0}",
-        "paddingRight": "{palette.size.size0}",
-        "paddingTop": "{palette.size.size16}",
-        "textLine": "{system.textLine.none}",
-        "verticalAlign": "{system.verticalAlign.top}"
-      }
-    },
-    "ExpandCollapseMini": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderWidth": "{palette.border.none}"
-      }
-    },
-    "ExpandCollapseMiniControl": {
-      "appearances": {
-        "alternative": {
-          "description": "Replaces the default green colour with a more subtle grey.",
-          "type": "variant",
-          "values": [true]
-        },
-        "expanded": "{appearances.ExpandCollapseControl.expanded}",
-        "inverse": {
-          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
-          "type": "variant",
-          "values": [true]
-        },
-        "quiet": {
-          "description": "When it is true, it does not show the decoration",
-          "type": "state",
-          "values": [true, false]
         },
-        "size": {
-          "type": "variant",
-          "values": ["micro", "small", "large"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "expanded": true
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "icon": "{palette.icon.CaretUp}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "alternative": true
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "iconSize": "{palette.size.size16}",
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "iconSize": "{palette.size.size20}",
-            "lineHeight": "{palette.lineHeight.ratio14to1}"
+            "color": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio9to7}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "quiet": true
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "textLine": "{system.textLine.none}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "quiet": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}",
-            "textLine": "{system.textLine.none}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "quiet": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}",
             "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.transparent}",
-        "borderWidth": "{system.border.zero}",
-        "color": "{palette.color.greenAccessible}",
-        "fontSize": "{palette.fontSize.size16}",
-        "icon": "{palette.icon.CaretDown}",
-        "iconColor": "{palette.color.greenAccessible}",
-        "iconGap": "{palette.size.size8}",
-        "iconPaddingTop": "{palette.size.size4}",
-        "iconPosition": "{system.position.left}",
-        "iconSize": "{palette.size.size24}",
-        "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}",
-        "paddingBottom": "{palette.size.size0}",
-        "paddingLeft": "{palette.size.size0}",
-        "paddingRight": "{palette.size.size0}",
-        "paddingTop": "{palette.size.size0}",
-        "size": "{palette.size.size4}",
-        "textLine": "{system.textLine.underline}",
-        "verticalAlign": "{system.verticalAlign.top}"
-      }
-    },
-    "ExpandCollapsePanel": {
-      "appearances": {
-        "compact": {
-          "type": "variant",
-          "values": [true]
         },
-        "mini": {
-          "type": "variant",
-          "values": [true]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "compact": true
+            "focus": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "contentPaddingBottom": "{palette.size.size16}",
-            "contentPaddingLeft": "{palette.size.size24}",
-            "contentPaddingRight": "{palette.size.size0}",
-            "contentPaddingTop": "{palette.size.size8}"
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "mini": true
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "contentPaddingBottom": "{palette.size.size0}",
-            "contentPaddingLeft": "{palette.size.size0}",
-            "contentPanelPaddingBottom": "{palette.size.size0}",
-            "contentPanelPaddingTop": "{palette.size.size0}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.transparent}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
-        "collapseDuration": "{palette.duration.duration250}",
-        "contentPaddingBottom": "{palette.size.size16}",
-        "contentPaddingLeft": "{palette.size.size24}",
-        "contentPaddingRight": "{palette.size.size0}",
-        "contentPaddingTop": "{palette.size.size0}",
-        "contentPanelBackgroundColor": "{palette.color.transparent}",
-        "contentPanelBorderColor": "{palette.color.transparent}",
-        "contentPanelBorderWidth": "{palette.border.none}",
-        "contentPanelFontColor": "{palette.color.greyThunder}",
-        "contentPanelFontName": "{palette.fontName.HNforTELUSSA}",
-        "contentPanelFontSize": "{palette.fontSize.size16}",
-        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
-        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
-        "contentPanelPaddingBottom": "{palette.size.size16}",
-        "contentPanelPaddingLeft": "{palette.size.size24}",
-        "contentPanelPaddingRight": "{palette.size.size0}",
-        "contentPanelPaddingTop": "{palette.size.size16}",
-        "expandDividerColor": "{palette.color.transparent}",
-        "expandDividerWidth": "{palette.size.size0}",
-        "expandDuration": "{palette.duration.duration300}",
-        "marginBottom": "{palette.size.size0}"
-      }
-    },
-    "Feedback": {
-      "appearances": {
-        "icon": {
-          "type": "variant",
-          "values": [true]
         },
-        "validation": "{appearances.Feedback.validation}"
-      },
-      "rules": [
         {
           "if": {
-            "validation": "success"
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greenPanache}",
-            "borderColor": "{palette.color.greenPanache}",
             "color": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
-            "validation": "error"
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.redLight}",
-            "borderColor": "{palette.color.redLight}",
-            "color": "{palette.color.redDark}"
+            "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
-            "icon": true,
-            "validation": "success"
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "icon": "{palette.icon.StatusSuccess}",
-            "iconColor": "{palette.color.greenAccessible}"
+            "color": "{palette.color.redDark}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "icon": true,
-            "validation": "error"
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "icon": "{palette.icon.StatusError}",
-            "iconColor": "{palette.color.redDark}"
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}",
+            "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.brandLight}",
-        "borderColor": "{palette.color.transparent}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.greyThunder}",
-        "contentFontSize": "{palette.fontSize.size16}",
-        "fontName": "{palette.fontName.HNforTELUSSA}",
-        "fontWeight": "{palette.fontWeight.weight400}",
-        "icon": "{system.icon.none}",
-        "iconColor": "{palette.color.transparent}",
-        "iconGap": "{palette.size.size8}",
-        "iconSize": "{palette.size.size24}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}",
-        "paddingBottom": "{palette.size.size12}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size12}",
-        "space": "{system.integer.2}",
-        "titleFontSize": "{palette.fontSize.size16}"
-      }
-    },
-    "Fieldset": {
-      "appearances": {
-        "error": {
-          "type": "variant",
-          "values": [true]
-        }
-      },
-      "rules": [
+        },
         {
           "if": {
-            "error": true
+            "hover": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "outlineColor": "{palette.color.red}"
+            "color": "{palette.color.redDarker}",
+            "textLine": "{system.textLine.underline}"
           }
-        }
-      ],
-      "tokens": {
-        "borderBottomLeftRadius": "{system.radius.zero}",
-        "borderBottomRightRadius": "{system.radius.zero}",
-        "borderTopLeftRadius": "{system.radius.zero}",
-        "borderTopRightRadius": "{system.radius.zero}",
-        "outlineColor": "{palette.color.transparent}",
-        "outlineOffset": "{system.size.none}",
-        "outlineWidth": "{system.border.zero}",
-        "paddingBottom": "{system.size.zero}",
-        "paddingLeft": "{system.size.zero}",
-        "paddingRight": "{system.size.zero}",
-        "paddingTop": "{system.size.zero}"
-      }
-    },
-    "FileUpload": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "buttonBackgroundColor": "{system.color.none}",
-        "buttonBorderColor": "{system.color.none}",
-        "buttonBorderRadius": "{system.radius.none}",
-        "buttonBorderWidth": "{system.border.none}",
-        "buttonHeight": "{system.size.none}",
-        "buttonMinWidth": "{system.size.none}",
-        "buttonTextColor": "{system.color.none}",
-        "buttonWidth": "{system.size.none}",
-        "notificationBackgroundColor": "{system.color.none}",
-        "notificationBorderColor": "{system.color.none}",
-        "notificationBorderRadius": "{system.radius.none}",
-        "notificationDismissButtonGap": "{system.size.none}",
-        "notificationDismissIcon": "{system.icon.none}",
-        "notificationDismissIconColor": "{system.color.none}",
-        "notificationIcon": "{system.icon.none}",
-        "notificationIconColor": "{system.color.none}",
-        "notificationIconGap": "{system.size.none}",
-        "notificationIconSize": "{system.size.none}",
-        "notificationTextColor": "{palette.color.greyCharcoal}"
-      }
-    },
-    "Footnote": {
-      "appearances": {
-        "viewport": "{appearances.system.viewport}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "viewport": ["xs"]
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "footnoteBodyPaddingBottom": "{palette.size.size32}",
-            "footnoteBodyPaddingLeft": "{palette.size.size16}",
-            "footnoteBodyPaddingRight": "{palette.size.size16}",
-            "footnoteBodyPaddingTop": "{palette.size.size0}",
-            "footnoteHeaderPaddingBottom": "{palette.size.size16}",
-            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-            "footnoteHeaderPaddingRight": "{palette.size.size4}",
-            "footnoteHeaderPaddingTop": "{palette.size.size16}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "viewport": ["md", "lg"]
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "footnoteBodyPaddingBottom": "{palette.size.size40}",
-            "footnoteBodyPaddingLeft": "{palette.size.size16}",
-            "footnoteBodyPaddingRight": "{palette.size.size16}",
-            "footnoteBodyPaddingTop": "{palette.size.size0}",
-            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
-            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-            "footnoteHeaderPaddingRight": "{palette.size.size4}",
-            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "viewport": ["xl"]
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "footnoteBodyPaddingBottom": "{palette.size.size40}",
-            "footnoteBodyPaddingLeft": "{palette.size.size16}",
-            "footnoteBodyPaddingRight": "{palette.size.size16}",
-            "footnoteBodyPaddingTop": "{palette.size.size0}",
-            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
-            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-            "footnoteHeaderPaddingRight": "{palette.size.size16}",
-            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "closeButtonBackgroundColor": "{palette.color.greyAthens}",
-        "closeButtonBorderColor": "{palette.color.greyShuttle}",
-        "closeButtonBorderSize": "{palette.border.border1}",
-        "closeButtonHeight": "{palette.size.size24}",
-        "closeButtonIconSize": "{palette.size.size16}",
-        "closeButtonMarginBottom": "{palette.size.size12}",
-        "closeButtonMarginLeft": "{palette.size.size4}",
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyAthens}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyCloud}"
+          }
+        }
+      ],
+      "tokens": {
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "color": "{palette.color.greenAccessible}",
+        "fontSize": "{palette.fontSize.size16}",
+        "iconDisplace": "{palette.size.size0}",
+        "iconSize": "{palette.size.size16}",
+        "iconSpace": "{system.integer.1}",
+        "leftIcon": "{palette.icon.ArrowLeft}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "rightIcon": "{palette.icon.ArrowRight}",
+        "textLine": "{system.textLine.none}"
+      }
+    },
+    "ColourToggle": {
+      "appearances": {
+        "focus": "{appearances.ColourToggle.focus}",
+        "hover": "{appearances.ColourToggle.hover}",
+        "pressed": "{appearances.ColourToggle.pressed}",
+        "selected": "{appearances.ColourToggle.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.greyCloud}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.greyShuttle}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.greyMystic}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.purpleTelus}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.greyMystic}",
+        "borderRadius": "{palette.radius.radius45}",
+        "borderWidth": "{palette.border.border1}",
+        "bubbleBorderColor": "{palette.color.transparent}",
+        "bubbleBorderRadius": "{palette.radius.none}",
+        "bubbleBorderWidth": "{palette.border.none}",
+        "innerBubbleBorderRadius": "{palette.radius.radius45}",
+        "innerBubbleHeight": "{palette.size.size40}",
+        "innerBubbleWidth": "{palette.size.size40}",
+        "outerBubbleContentAlignItems": "{system.flexAlign.center}",
+        "outerBubbleHeight": "{palette.size.size48}",
+        "outerBubbleJustifyContent": "{system.flexJustifyContent.center}",
+        "outerBubbleWidth": "{palette.size.size48}",
+        "shadow": "{palette.shadow.surfaceInset}",
+        "space": "{system.integer.2}"
+      }
+    },
+    "Countdown": {
+      "appearances": {
+        "feature": {
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "label": {
+          "type": "variant",
+          "values": [true]
+        },
+        "large": {
+          "type": "variant",
+          "values": [true]
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "containerPaddingBottomTop": "{palette.size.size16}",
+            "containerPaddingLeftRight": "{palette.size.size24}",
+            "labelFontSize": "{palette.fontSize.size14}",
+            "labelLineHeight": "{palette.lineHeight.ratio10to7}",
+            "textLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "feature": true
+          },
+          "tokens": {
+            "labelBorderColor": "{palette.color.purpleTelus}",
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size40}"
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size40}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "labelBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "inverse": true
+          },
+          "tokens": {
+            "containerBorderColor": "{palette.color.greyShuttle}",
+            "labelBorderColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderColor": "{palette.color.transparent}",
+        "containerBorderRadius": "{palette.radius.radius6}",
+        "containerBorderWidth": "{palette.border.border2}",
+        "containerGradient": "{palette.gradient.purple}",
+        "containerInverseBorder": "{palette.border.border2}",
+        "containerInverseBorderColor": "{palette.color.white}",
+        "containerPaddingBottomTop": "{palette.size.size48}",
+        "containerPaddingLeftRight": "{palette.size.size64}",
+        "inverseBorderColor": "{palette.color.greyShuttle}",
+        "labelBorderColor": "{palette.color.greyCharcoal}",
+        "labelFontName": "{palette.fontName.HNforTELUSSA}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textFontSize": "{palette.fontSize.size16}",
+        "textLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textTimerFontName": "{palette.fontName.HNforTELUSSA}",
+        "textTimerFontWeight": "{palette.fontWeight.weight400}"
+      }
+    },
+    "DatePicker": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "calendarBackgroundColor": "{palette.color.white}",
+        "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAthens}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyCloud}",
+        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
+        "calendarDayDefaultBorder": "{palette.border.border1}",
+        "calendarDayDefaultBorderColor": "{palette.color.greyCloud}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.purpleDeluge}",
+        "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
+        "calendarDayDefaultColor": "{palette.color.greyCharcoal}",
+        "calendarDayDefaultFontName": "{palette.fontName.HNforTELUSSA}",
+        "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
+        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
+        "calendarDaySelectedDisabledBackground": "{palette.color.greyAlabaster}",
+        "calendarDaySelectedDisabledColor": "{palette.color.white}",
+        "calendarDaySelectedDisabledContentBackgroundColor": "{palette.color.greyCloud}",
+        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.purpleDeluge}",
+        "calendarDaySelectedHoverBorderColor": "{palette.color.greyCloud}",
+        "calendarDaySelectedHoverColor": "{palette.color.greyCharcoal}",
+        "calendarMonthCaptionColor": "{palette.color.greyThunder}",
+        "calendarMonthCaptionFontName": "{palette.fontName.HNforTELUSSA}",
+        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
+        "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
+        "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
+        "dateInputStrokeColor": "{palette.color.greyShuttle}",
+        "dayPickerNavigationButtonPadding": "{palette.size.size8}",
+        "dayPickerWeekHeaderColor": "{palette.color.greyCharcoal}",
+        "dayPickerWeekHeaderFontName": "{palette.fontName.HNforTELUSSA}",
+        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
+        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
+        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
+        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
+        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
+        "invalidInputMixin": "{palette.color.red}",
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}",
+        "singleDatePickerBorderColor": "{palette.color.greyShuttle}",
+        "singleDatePickerLeftRight": "{palette.size.size16}",
+        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
+        "singleDatePickerRadius": "{palette.radius.radius4}",
+        "validInputMixin": "{palette.color.greenAccessible}"
+      }
+    },
+    "Disclaimer": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{palette.color.greyCharcoal}",
+        "fontName": "{palette.fontName.HNforTELUSSA}",
+        "fontSize": "{palette.fontSize.size12}",
+        "fontWeight": "{palette.fontWeight.weight500}",
+        "lineHeight": "{palette.lineHeight.ratio4to3}"
+      }
+    },
+    "Divider": {
+      "appearances": {
+        "decorative": {
+          "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "weight": {
+          "type": "variant",
+          "values": ["thick"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "weight": "thick"
+          },
+          "tokens": {
+            "width": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "color": "{palette.color.greyShuttle}",
+        "width": "{palette.size.size1}"
+      }
+    },
+    "DownloadApp": {
+      "appearances": {
+        "focus": "{appearances.DownloadApp.focus}",
+        "hover": "{appearances.DownloadApp.hover}",
+        "pressed": "{appearances.DownloadApp.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenAccessible}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCloud}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenSanFelix}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenSanFelix}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        }
+      ],
+      "tokens": {
+        "androidENIcon": "{palette.icon.AndroidEN}",
+        "androidFRIcon": "{palette.icon.AndroidFR}",
+        "borderColor": "{palette.color.transparent}",
+        "borderGap": "{palette.size.size2}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.border1}",
+        "iosENIcon": "{palette.icon.IOSEN}",
+        "iosFRIcon": "{palette.icon.IOSFR}",
+        "padding": "{palette.size.size1}"
+      }
+    },
+    "ExpandCollapse": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "borderStyle": "{system.borderStyle.solid}",
+        "borderWidth": "{system.border.zero}"
+      }
+    },
+    "ExpandCollapseControl": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "focus": "{appearances.ExpandCollapseControl.focus}",
+        "hover": "{appearances.ExpandCollapseControl.hover}",
+        "mini": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.ExpandCollapseControl.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size8}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "mini": true
+          },
+          "tokens": {
+            "borderWidth": "{system.border.none}",
+            "paddingBottom": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "mini": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAlabaster}",
+            "iconPaddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAlabaster}",
+            "iconPaddingTop": "{palette.size.size0}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "mini": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderColor": "{palette.color.transparent}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderWidth": "{palette.border.border1}",
+        "icon": "{palette.icon.CaretDown}",
+        "iconColor": "{palette.color.greenAccessible}",
+        "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
+        "iconPosition": "{system.position.left}",
+        "iconSize": "{palette.size.size16}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size16}",
+        "textLine": "{system.textLine.none}",
+        "verticalAlign": "{system.verticalAlign.top}"
+      }
+    },
+    "ExpandCollapseMini": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderWidth": "{palette.border.none}"
+      }
+    },
+    "ExpandCollapseMiniControl": {
+      "appearances": {
+        "alternative": {
+          "description": "Replaces the default green colour with a more subtle grey.",
+          "type": "variant",
+          "values": [true]
+        },
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "inverse": {
+          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        },
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "iconSize": "{palette.size.size16}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "iconSize": "{palette.size.size20}",
+            "lineHeight": "{palette.lineHeight.ratio14to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true
+          },
+          "tokens": {
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{system.border.zero}",
+        "color": "{palette.color.greenAccessible}",
+        "fontSize": "{palette.fontSize.size16}",
+        "icon": "{palette.icon.CaretDown}",
+        "iconColor": "{palette.color.greenAccessible}",
+        "iconGap": "{palette.size.size8}",
+        "iconPaddingTop": "{palette.size.size4}",
+        "iconPosition": "{system.position.left}",
+        "iconSize": "{palette.size.size24}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "size": "{palette.size.size4}",
+        "textLine": "{system.textLine.underline}",
+        "verticalAlign": "{system.verticalAlign.top}"
+      }
+    },
+    "ExpandCollapsePanel": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
+        "mini": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "contentPaddingBottom": "{palette.size.size16}",
+            "contentPaddingLeft": "{palette.size.size24}",
+            "contentPaddingRight": "{palette.size.size0}",
+            "contentPaddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "mini": true
+          },
+          "tokens": {
+            "contentPaddingBottom": "{palette.size.size0}",
+            "contentPaddingLeft": "{palette.size.size0}",
+            "contentPanelPaddingBottom": "{palette.size.size0}",
+            "contentPanelPaddingTop": "{palette.size.size0}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.none}",
+        "collapseDuration": "{palette.duration.duration250}",
+        "contentPaddingBottom": "{palette.size.size16}",
+        "contentPaddingLeft": "{palette.size.size24}",
+        "contentPaddingRight": "{palette.size.size0}",
+        "contentPaddingTop": "{palette.size.size0}",
+        "contentPanelBackgroundColor": "{palette.color.transparent}",
+        "contentPanelBorderColor": "{palette.color.transparent}",
+        "contentPanelBorderWidth": "{palette.border.none}",
+        "contentPanelFontColor": "{palette.color.greyThunder}",
+        "contentPanelFontName": "{palette.fontName.HNforTELUSSA}",
+        "contentPanelFontSize": "{palette.fontSize.size16}",
+        "contentPanelFontWeight": "{palette.fontWeight.weight700}",
+        "contentPanelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "contentPanelPaddingBottom": "{palette.size.size16}",
+        "contentPanelPaddingLeft": "{palette.size.size24}",
+        "contentPanelPaddingRight": "{palette.size.size0}",
+        "contentPanelPaddingTop": "{palette.size.size16}",
+        "expandDividerColor": "{palette.color.transparent}",
+        "expandDividerWidth": "{palette.size.size0}",
+        "expandDuration": "{palette.duration.duration300}",
+        "marginBottom": "{palette.size.size0}"
+      }
+    },
+    "Feedback": {
+      "appearances": {
+        "icon": {
+          "type": "variant",
+          "values": [true]
+        },
+        "validation": "{appearances.Feedback.validation}"
+      },
+      "rules": [
+        {
+          "if": {
+            "validation": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenPanache}",
+            "borderColor": "{palette.color.greenPanache}",
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redLight}",
+            "borderColor": "{palette.color.redLight}",
+            "color": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "icon": true,
+            "validation": "success"
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusSuccess}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "icon": true,
+            "validation": "error"
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusError}",
+            "iconColor": "{palette.color.redDark}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.brandLight}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.greyThunder}",
+        "contentFontSize": "{palette.fontSize.size16}",
+        "fontName": "{palette.fontName.HNforTELUSSA}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{system.icon.none}",
+        "iconColor": "{palette.color.transparent}",
+        "iconGap": "{palette.size.size8}",
+        "iconSize": "{palette.size.size24}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size12}",
+        "space": "{system.integer.2}",
+        "titleFontSize": "{palette.fontSize.size16}"
+      }
+    },
+    "Fieldset": {
+      "appearances": {
+        "error": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "outlineColor": "{palette.color.red}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "outlineColor": "{palette.color.transparent}",
+        "outlineOffset": "{system.size.none}",
+        "outlineWidth": "{system.border.zero}",
+        "paddingBottom": "{system.size.zero}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}"
+      }
+    },
+    "FileUpload": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "buttonBackgroundColor": "{system.color.none}",
+        "buttonBorderColor": "{system.color.none}",
+        "buttonBorderRadius": "{system.radius.none}",
+        "buttonBorderWidth": "{system.border.none}",
+        "buttonHeight": "{system.size.none}",
+        "buttonMinWidth": "{system.size.none}",
+        "buttonTextColor": "{system.color.none}",
+        "buttonWidth": "{system.size.none}",
+        "notificationBackgroundColor": "{system.color.none}",
+        "notificationBorderColor": "{system.color.none}",
+        "notificationBorderRadius": "{system.radius.none}",
+        "notificationDismissButtonGap": "{system.size.none}",
+        "notificationDismissIcon": "{system.icon.none}",
+        "notificationDismissIconColor": "{system.color.none}",
+        "notificationIcon": "{system.icon.none}",
+        "notificationIconColor": "{system.color.none}",
+        "notificationIconGap": "{system.size.none}",
+        "notificationIconSize": "{system.size.none}",
+        "notificationTextColor": "{palette.color.greyCharcoal}"
+      }
+    },
+    "Footnote": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size32}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size16}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size40}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["xl"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size40}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size16}",
+            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+          }
+        }
+      ],
+      "tokens": {
+        "closeButtonBackgroundColor": "{palette.color.greyAthens}",
+        "closeButtonBorderColor": "{palette.color.greyShuttle}",
+        "closeButtonBorderSize": "{palette.border.border1}",
+        "closeButtonHeight": "{palette.size.size24}",
+        "closeButtonIconSize": "{palette.size.size16}",
+        "closeButtonMarginBottom": "{palette.size.size12}",
+        "closeButtonMarginLeft": "{palette.size.size4}",
         "closeButtonMarginRight": "{palette.size.size4}",
         "closeButtonMarginTop": "{palette.size.size12}",
         "closeButtonWidth": "{palette.size.size24}",
@@ -3768,341 +4303,767 @@
         "listPaddingLeft": "{palette.size.size32}"
       }
     },
-    "FootnoteLink": {
+    "FootnoteLink": {
+      "appearances": {
+        "size": {
+          "type": "variant",
+          "values": [
+            "micro",
+            "small",
+            "medium",
+            "large",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "display1",
+            "display2"
+          ]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "display1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "display2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h3"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h4"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h5"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "h6"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "medium"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio1to1}"
+          }
+        }
+      ],
+      "tokens": {
+        "color": "{system.color.none}",
+        "fontName": "{palette.fontName.HNforTELUSSA}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio1to1}",
+        "paddingLeft": "{palette.size.size2}",
+        "paddingRight": "{palette.size.size2}"
+      }
+    },
+    "HorizontalScrollButton": {
+      "appearances": {
+        "focus": "{appearances.HorizontalScrollButton.focus}",
+        "hover": "{appearances.HorizontalScrollButton.hover}",
+        "pressed": "{appearances.HorizontalScrollButton.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "iconColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderRadius": "{palette.radius.pill32}",
+        "borderWidth": "{palette.border.border1}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconSize": "{palette.size.size16}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "outerBorderWidth": "{system.border.zero}",
+        "padding": "{palette.size.size8}",
+        "shadow": "{palette.shadow.surfaceRaised}"
+      }
+    },
+    "Icon": {
+      "appearances": {
+        "background": {
+          "type": "variant",
+          "values": [true]
+        },
+        "color": {
+          "type": "variant",
+          "values": [
+            "brand",
+            "subtle",
+            "offer",
+            "success",
+            "danger",
+            "warning",
+            "inverse",
+            "default"
+          ]
+        },
+        "padding": {
+          "type": "variant",
+          "values": ["micro", "small", "medium", "large", "extraLarge"]
+        },
+        "rank": {
+          "type": "variant",
+          "values": ["primary"]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large", "extraLarge"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "padding": "micro"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "micro"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "small"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "medium"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "large"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "size": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "size": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "size": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "color": "brand"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "color": "default"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "color": "subtle"
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "color": "success"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "color": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "color": "warning"
+          },
+          "tokens": {
+            "color": "{palette.color.amberDark}"
+          }
+        },
+        {
+          "if": {
+            "color": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "color": "offer"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "rank": "primary"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "color": "{palette.color.greyCharcoal}",
+        "padding": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "scale": "{system.integer.1}",
+        "size": "{palette.size.size24}",
+        "translateX": "{system.size.zero}",
+        "translateY": "{system.size.zero}",
+        "width": "{palette.size.size0}"
+      }
+    },
+    "IconButton": {
       "appearances": {
-        "size": {
+        "action": {
           "type": "variant",
           "values": [
-            "micro",
-            "small",
-            "medium",
-            "large",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "display1",
-            "display2"
+            "add",
+            "close",
+            "expand",
+            "moveDown",
+            "moveLeft",
+            "moveRight",
+            "moveUp",
+            "play",
+            "subtract"
           ]
+        },
+        "compact": {
+          "description": "Without the outer border gap",
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": "{appearances.IconButton.focus}",
+        "hover": "{appearances.IconButton.hover}",
+        "inactive": "{appearances.Button.inactive}",
+        "inverse": {
+          "description": "For use on dark backgrounds",
+          "type": "variant",
+          "values": [true]
+        },
+        "password": {
+          "description": "Password masked or not",
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.IconButton.pressed}",
+        "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": {
-            "size": "display1"
+            "action": "add"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "action": "subtract"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "action": "close"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Close}"
+          }
+        },
+        {
+          "if": {
+            "action": "expand"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Expand}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveDown"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretDown}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.CaretUp}"
           }
         },
         {
           "if": {
-            "size": "display2"
+            "action": "moveLeft"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.ChevronLeft}"
           }
         },
         {
           "if": {
-            "size": "h1"
+            "action": "moveRight"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.ChevronRight}"
           }
         },
         {
           "if": {
-            "size": "h2"
+            "action": "play"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "icon": "{palette.icon.PlayVideo}"
           }
         },
         {
           "if": {
-            "size": "h3"
+            "action": "add"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Add}"
           }
         },
         {
           "if": {
-            "size": "h4"
+            "action": "subtract"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Subtract}"
           }
         },
         {
           "if": {
-            "size": "h5"
+            "action": "close"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Close}"
           }
         },
         {
           "if": {
-            "size": "h6"
+            "action": "expand"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.Expand}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "action": "moveDown"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.CaretDown}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "action": "moveUp"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.CaretUp}"
           }
         },
         {
           "if": {
-            "size": "medium"
+            "action": "moveLeft"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.ChevronLeft}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "action": "moveRight"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size12}",
-            "lineHeight": "{palette.lineHeight.ratio1to1}"
+            "icon": "{palette.icon.ChevronRight}"
           }
-        }
-      ],
-      "tokens": {
-        "color": "{system.color.none}",
-        "fontName": "{palette.fontName.HNforTELUSSA}",
-        "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight400}",
-        "lineHeight": "{palette.lineHeight.ratio1to1}",
-        "paddingLeft": "{palette.size.size2}",
-        "paddingRight": "{palette.size.size2}"
-      }
-    },
-    "HorizontalScrollButton": {
-      "appearances": {
-        "focus": "{appearances.HorizontalScrollButton.focus}",
-        "hover": "{appearances.HorizontalScrollButton.hover}",
-        "pressed": "{appearances.HorizontalScrollButton.pressed}"
-      },
-      "rules": [
+        },
         {
           "if": {
-            "hover": true
+            "action": "play"
           },
           "tokens": {
-            "borderColor": "{palette.color.greyCharcoal}",
-            "iconColor": "{palette.color.greyCharcoal}"
+            "icon": "{palette.icon.PlayVideo}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{palette.color.white}",
             "iconColor": "{palette.color.white}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.greyCloud}",
-        "borderRadius": "{palette.radius.pill32}",
-        "borderWidth": "{palette.border.border1}",
-        "iconColor": "{palette.color.greyShuttle}",
-        "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size16}",
-        "iconTranslateX": "{system.size.zero}",
-        "iconTranslateY": "{system.size.zero}",
-        "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.zero}",
-        "padding": "{palette.size.size8}",
-        "shadow": "{palette.shadow.surfaceRaised}"
-      }
-    },
-    "Icon": {
-      "appearances": {
-        "background": {
-          "type": "variant",
-          "values": [true]
-        },
-        "color": {
-          "type": "variant",
-          "values": [
-            "brand",
-            "subtle",
-            "offer",
-            "success",
-            "danger",
-            "warning",
-            "inverse",
-            "default"
-          ]
-        },
-        "padding": {
-          "type": "variant",
-          "values": ["micro", "small", "medium", "large", "extraLarge"]
-        },
-        "rank": {
-          "type": "variant",
-          "values": ["primary"]
         },
-        "size": {
-          "type": "variant",
-          "values": ["micro", "small", "large", "extraLarge"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "padding": "micro"
+            "hover": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size4}"
+            "borderColor": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "iconScale": "{system.iconScale.scale1_10}"
           }
         },
         {
           "if": {
-            "padding": "small"
+            "hover": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size8}"
+            "iconScale": "{system.iconScale.scale1}"
           }
         },
         {
           "if": {
-            "padding": "medium"
+            "hover": true,
+            "password": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size16}"
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "borderColor": "{palette.color.purpleDeluge}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "padding": "large"
+            "password": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size24}"
+            "borderColor": "{system.color.transparent}"
           }
         },
         {
           "if": {
-            "padding": "extraLarge"
+            "focus": true,
+            "password": true
           },
           "tokens": {
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size32}"
+            "borderColor": "{palette.color.purpleTelus}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "micro"
+            "hover": true,
+            "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size4}"
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "small"
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size8}"
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size4}",
+            "outerBorderWidth": "{palette.border.border1}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "medium"
+            "focus": true,
+            "password": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size16}"
+            "borderWidth": "{palette.border.border3}",
+            "outerBorderColor": "{palette.color.purpleDark}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "large"
+            "focus": true,
+            "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size24}"
+            "backgroundColor": "{system.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.border1}"
           }
         },
         {
           "if": {
-            "background": true,
-            "padding": "extraLarge"
+            "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderRadius": "{palette.radius.radius45}",
-            "padding": "{palette.size.size4}",
-            "width": "{palette.size.size32}"
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size4}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "password": true,
+            "pressed": true
           },
           "tokens": {
-            "size": "{palette.size.size16}"
+            "backgroundColor": "{palette.color.purpleDark}",
+            "borderColor": "{palette.color.purpleDark}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderGap": "{system.size.zero}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "inverse": true,
+            "pressed": true
           },
           "tokens": {
-            "size": "{palette.size.size20}"
+            "backgroundColor": "{palette.color.light40}",
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
@@ -4110,732 +5071,763 @@
             "size": "large"
           },
           "tokens": {
-            "size": "{palette.size.size32}"
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "color": "brand"
+            "size": "small"
           },
           "tokens": {
-            "color": "{palette.color.purpleTelus}"
+            "iconSize": "{palette.size.size16}",
+            "padding": "{palette.size.size4}"
           }
         },
         {
+          "description": "Raised IconButtons follow different design patterns to other variants",
           "if": {
-            "color": "default"
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border1}",
+            "iconSize": "{palette.size.size16}",
+            "outerBorderColor": "{system.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
           }
         },
         {
           "if": {
-            "color": "subtle"
+            "raised": true,
+            "size": "large"
           },
           "tokens": {
-            "color": "{palette.color.greyShuttle}"
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "color": "success"
+            "raised": true,
+            "size": "small"
           },
           "tokens": {
-            "color": "{palette.color.greenAccessible}"
+            "padding": "{palette.size.size8}"
           }
         },
         {
           "if": {
-            "color": "danger"
+            "pressed": true,
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.redDark}"
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.zero}"
           }
         },
         {
           "if": {
-            "color": "warning"
+            "inactive": true,
+            "password": true
           },
           "tokens": {
-            "color": "{palette.color.amberDark}"
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyMystic}",
+            "outerBorderColor": "{palette.color.transparent}"
           }
         },
         {
           "if": {
-            "color": "inverse"
+            "hover": true,
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
           "if": {
-            "color": "offer"
+            "focus": true,
+            "raised": true
           },
           "tokens": {
-            "color": "{palette.color.purpleTelus}"
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.purpleTelus}"
           }
         },
         {
           "if": {
-            "size": "extraLarge"
+            "focus": true,
+            "pressed": true,
+            "raised": true
           },
           "tokens": {
-            "size": "{palette.size.size48}"
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "rank": "primary"
+            "compact": true
           },
           "tokens": {
-            "color": "{palette.color.purpleTelus}"
+            "outerBorderGap": "{system.size.zero}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{system.color.transparent}",
-        "borderRadius": "{palette.radius.none}",
+        "borderBottomLeftRadius": "{system.radius.none}",
+        "borderBottomRightRadius": "{system.radius.none}",
+        "borderBottomWidth": "{system.border.none}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderLeftWidth": "{system.border.none}",
+        "borderRadius": "{system.radius.round}",
+        "borderRightWidth": "{system.border.none}",
+        "borderTopLeftRadius": "{system.radius.none}",
+        "borderTopRightRadius": "{system.radius.none}",
+        "borderTopWidth": "{system.border.none}",
+        "borderWidth": "{palette.border.border1}",
+        "height": "{system.size.none}",
+        "icon": "{palette.icon.Add}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconSize": "{palette.size.size16}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "outerBorderWidth": "{system.border.none}",
+        "padding": "{palette.size.size4}",
+        "shadow": "{system.shadow.none}",
+        "width": "{system.size.none}"
+      }
+    },
+    "Image": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderRadius": "{system.radius.none}"
+      }
+    },
+    "InputLabel": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
         "color": "{palette.color.greyCharcoal}",
-        "padding": "{palette.size.size0}",
-        "paddingTop": "{palette.size.size0}",
-        "scale": "{system.integer.1}",
-        "size": "{palette.size.size24}",
-        "translateX": "{system.size.zero}",
-        "translateY": "{system.size.zero}",
-        "width": "{palette.size.size0}"
+        "fontName": "{palette.fontName.HNforTELUSSA}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "gap": "{palette.size.size8}",
+        "hintColor": "{palette.color.greyCharcoal}",
+        "hintFontName": "{palette.fontName.HNforTELUSSA}",
+        "hintFontSize": "{palette.fontSize.size14}",
+        "hintFontWeight": "{palette.fontWeight.weight400}",
+        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}"
       }
     },
-    "IconButton": {
+    "InputSupports": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "space": "{system.integer.1}"
+      }
+    },
+    "Link": {
       "appearances": {
-        "action": {
-          "type": "variant",
-          "values": [
-            "add",
-            "close",
-            "expand",
-            "moveDown",
-            "moveLeft",
-            "moveRight",
-            "moveUp",
-            "play",
-            "subtract"
-          ]
-        },
-        "compact": {
-          "description": "Without the outer border gap",
+        "alternative": {
+          "description": "Replaces the default green colour with a more subtle grey.",
           "type": "variant",
           "values": [true]
         },
-        "focus": "{appearances.IconButton.focus}",
-        "hover": "{appearances.IconButton.hover}",
-        "inactive": "{appearances.Button.inactive}",
+        "focus": "{appearances.Link.focus}",
+        "hover": "{appearances.Link.hover}",
+        "iconPosition": "{appearances.Link.iconPosition}",
         "inverse": {
-          "description": "For use on dark backgrounds",
+          "description": "Styles the link white for use on dark backgrounds.",
           "type": "variant",
           "values": [true]
         },
-        "password": {
-          "description": "Password masked or not",
+        "light": {
+          "description": "A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)",
           "type": "variant",
           "values": [true]
         },
-        "pressed": "{appearances.IconButton.pressed}",
-        "raised": {
-          "description": "Uses shadow and background colour to appear raised above the page",
-          "type": "variant",
-          "values": [true]
+        "pressed": "{appearances.Link.pressed}",
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
         },
         "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
           "type": "variant",
-          "values": ["small", "large"]
+          "values": ["large", "small", "micro"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
         {
           "if": {
-            "action": "add"
+            "iconPosition": "left"
           },
           "tokens": {
-            "icon": "{palette.icon.Add}"
+            "iconSpace": "{system.integer.2}"
           }
         },
         {
           "if": {
-            "action": "subtract"
+            "iconPosition": "right"
           },
           "tokens": {
-            "icon": "{palette.icon.Subtract}"
+            "iconSpace": "{system.integer.1}"
           }
         },
         {
           "if": {
-            "action": "close"
+            "iconPosition": "inline"
           },
           "tokens": {
-            "icon": "{palette.icon.Close}"
+            "iconSpace": "{system.integer.2}"
           }
         },
         {
           "if": {
-            "action": "expand"
+            "focus": true
           },
           "tokens": {
-            "icon": "{palette.icon.Expand}"
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "action": "moveDown"
+            "hover": true
           },
           "tokens": {
-            "icon": "{palette.icon.CaretDown}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "moveUp"
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.CaretUp}"
+            "color": "{palette.color.greenDarkFern}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "action": "moveLeft"
+            "focus": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronLeft}"
+            "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
-            "action": "moveRight"
+            "size": "large"
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronRight}"
+            "blockFontSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio5to4}",
+            "iconSize": "{palette.size.size24}"
           }
         },
         {
           "if": {
-            "action": "play"
+            "size": "small"
           },
           "tokens": {
-            "icon": "{palette.icon.PlayVideo}"
+            "blockFontSize": "{palette.fontSize.size14}",
+            "blockLineHeight": "{palette.lineHeight.ratio1to1}",
+            "iconSize": "{palette.size.size20}"
           }
         },
         {
           "if": {
-            "action": "add"
+            "size": "micro"
           },
           "tokens": {
-            "icon": "{palette.icon.Add}"
+            "blockFontName": "{palette.fontName.HNforTELUSSA}",
+            "blockFontSize": "{palette.fontSize.size12}",
+            "blockFontWeight": "{palette.fontWeight.weight500}",
+            "blockLineHeight": "{palette.lineHeight.ratio9to8}",
+            "iconSize": "{palette.size.size16}"
           }
         },
         {
           "if": {
-            "action": "subtract"
+            "alternative": true
           },
           "tokens": {
-            "icon": "{palette.icon.Subtract}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "action": "close"
+            "alternative": true,
+            "focus": true
           },
           "tokens": {
-            "icon": "{palette.icon.Close}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}"
           }
         },
         {
           "if": {
-            "action": "expand"
+            "alternative": true,
+            "hover": true
           },
           "tokens": {
-            "icon": "{palette.icon.Expand}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "action": "moveDown"
+            "alternative": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.CaretDown}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "action": "moveUp"
+            "inverse": true
           },
           "tokens": {
-            "icon": "{palette.icon.CaretUp}"
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "action": "moveLeft"
+            "hover": true,
+            "inverse": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronLeft}"
+            "color": "{palette.color.greyAthens}"
           }
         },
         {
           "if": {
-            "action": "moveRight"
+            "focus": true,
+            "inverse": true
           },
           "tokens": {
-            "icon": "{palette.icon.ChevronRight}"
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "action": "play"
+            "inverse": true,
+            "pressed": true
           },
           "tokens": {
-            "icon": "{palette.icon.PlayVideo}"
+            "color": "{palette.color.greyMystic}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "focus": true,
+            "inverse": true,
+            "pressed": true
           },
           "tokens": {
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.greyMystic}",
+            "outerBorderColor": "{palette.color.greyMystic}"
           }
         },
         {
           "if": {
-            "hover": true
+            "light": true
           },
           "tokens": {
-            "borderColor": "{palette.color.greyCharcoal}",
-            "iconColor": "{palette.color.greyCharcoal}",
-            "iconScale": "{system.iconScale.scale1_10}"
+            "color": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
-            "hover": true
+            "focus": true,
+            "light": true
           },
           "tokens": {
-            "iconScale": "{system.iconScale.scale1}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
             "hover": true,
-            "password": true
+            "light": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleDeluge}",
-            "borderColor": "{palette.color.purpleDeluge}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "password": true
+            "quiet": true
           },
           "tokens": {
-            "borderColor": "{system.color.transparent}"
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "password": true
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "borderColor": "{palette.color.purpleTelus}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "inverse": true
+            "focus": true,
+            "quiet": true
           },
           "tokens": {
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "focus": true
+            "alternative": true,
+            "hover": true,
+            "quiet": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.greyShuttle}",
-            "outerBorderGap": "{palette.size.size4}",
-            "outerBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "password": true
+            "hover": true,
+            "inverse": true,
+            "quiet": true
           },
           "tokens": {
-            "borderWidth": "{palette.border.border3}",
-            "outerBorderColor": "{palette.color.purpleDark}",
-            "outerBorderWidth": "{palette.border.none}"
+            "color": "{palette.color.greyAthens}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "inverse": true
+            "hover": true,
+            "light": true,
+            "quiet": true
           },
           "tokens": {
-            "backgroundColor": "{system.color.transparent}",
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderColor": "{palette.color.white}",
-            "outerBorderWidth": "{palette.border.border1}"
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyShuttle}",
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderGap": "{palette.size.size4}"
+            "color": "{palette.color.greyCharcoal}"
           }
         },
         {
           "if": {
-            "password": true,
-            "pressed": true
+            "focus": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleDark}",
-            "borderColor": "{palette.color.purpleDark}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderGap": "{system.size.zero}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "hover": true,
+            "style": "inline"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light40}",
-            "borderColor": "{palette.color.white}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderWidth": "{system.border.zero}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "iconSize": "{palette.size.size24}",
-            "padding": "{palette.size.size12}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "focus": true,
+            "pressed": true,
+            "style": "inline"
           },
           "tokens": {
-            "iconSize": "{palette.size.size16}",
-            "padding": "{palette.size.size4}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
-          "description": "Raised IconButtons follow different design patterns to other variants",
           "if": {
-            "raised": true
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}",
-            "borderColor": "{palette.color.greyCloud}",
-            "borderWidth": "{palette.border.border1}",
-            "iconSize": "{palette.size.size16}",
-            "outerBorderColor": "{system.color.transparent}",
-            "outerBorderGap": "{system.size.zero}",
-            "outerBorderWidth": "{system.border.zero}",
-            "padding": "{palette.size.size8}",
-            "shadow": "{palette.shadow.surfaceRaised}"
+            "color": "{palette.color.greyShuttle}"
           }
         },
         {
           "if": {
-            "raised": true,
-            "size": "large"
+            "focus": true,
+            "style": "subtle"
           },
           "tokens": {
-            "iconSize": "{palette.size.size24}",
-            "padding": "{palette.size.size12}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "raised": true,
-            "size": "small"
+            "hover": true,
+            "style": "subtle"
           },
           "tokens": {
-            "padding": "{palette.size.size8}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "pressed": true,
-            "raised": true
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{system.border.zero}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inactive": true,
-            "password": true
+            "focus": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.transparent}",
-            "borderWidth": "{system.border.zero}",
-            "iconColor": "{palette.color.greyMystic}",
-            "outerBorderColor": "{palette.color.transparent}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "raised": true
+            "style": "feature"
           },
           "tokens": {
-            "borderColor": "{palette.color.greyCloud}",
-            "borderWidth": "{palette.border.border3}"
+            "color": "{palette.color.greenAccessible}"
           }
         },
         {
           "if": {
             "focus": true,
-            "raised": true
+            "style": "feature"
           },
           "tokens": {
-            "borderColor": "{palette.color.purpleTelus}",
-            "borderWidth": "{palette.border.border3}",
-            "iconColor": "{palette.color.purpleTelus}"
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "pressed": true,
-            "raised": true
+            "hover": true,
+            "style": "feature"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleTelus}",
-            "borderWidth": "{system.border.zero}",
-            "iconColor": "{palette.color.white}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "compact": true
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "outerBorderGap": "{system.size.zero}"
+            "color": "{palette.color.greenDarkFern}",
+            "textLine": "{system.textLine.none}"
           }
-        }
-      ],
-      "tokens": {
-        "backgroundColor": "{system.color.transparent}",
-        "borderBottomLeftRadius": "{system.radius.none}",
-        "borderBottomRightRadius": "{system.radius.none}",
-        "borderBottomWidth": "{system.border.none}",
-        "borderColor": "{palette.color.greyShuttle}",
-        "borderLeftWidth": "{system.border.none}",
-        "borderRadius": "{system.radius.round}",
-        "borderRightWidth": "{system.border.none}",
-        "borderTopLeftRadius": "{system.radius.none}",
-        "borderTopRightRadius": "{system.radius.none}",
-        "borderTopWidth": "{system.border.none}",
-        "borderWidth": "{palette.border.border1}",
-        "height": "{system.size.none}",
-        "icon": "{palette.icon.Add}",
-        "iconColor": "{palette.color.greyShuttle}",
-        "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size16}",
-        "iconTranslateX": "{system.size.zero}",
-        "iconTranslateY": "{system.size.zero}",
-        "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.none}",
-        "padding": "{palette.size.size4}",
-        "shadow": "{system.shadow.none}",
-        "width": "{system.size.none}"
-      }
-    },
-    "Image": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "borderRadius": "{system.radius.none}"
-      }
-    },
-    "InputLabel": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "color": "{palette.color.greyCharcoal}",
-        "fontName": "{palette.fontName.HNforTELUSSA}",
-        "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight700}",
-        "gap": "{palette.size.size8}",
-        "hintColor": "{palette.color.greyCharcoal}",
-        "hintFontName": "{palette.fontName.HNforTELUSSA}",
-        "hintFontSize": "{palette.fontSize.size14}",
-        "hintFontWeight": "{palette.fontWeight.weight400}",
-        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}"
-      }
-    },
-    "InputSupports": {
-      "appearances": {},
-      "rules": [],
-      "tokens": {
-        "space": "{system.integer.1}"
-      }
-    },
-    "Link": {
-      "appearances": {
-        "alternative": {
-          "description": "Replaces the default green colour with a more subtle grey.",
-          "type": "variant",
-          "values": [true]
         },
-        "focus": "{appearances.Link.focus}",
-        "hover": "{appearances.Link.hover}",
-        "iconPosition": "{appearances.Link.iconPosition}",
-        "inverse": {
-          "description": "Styles the link white for use on dark backgrounds.",
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
         },
-        "light": {
-          "description": "A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)",
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}"
+          }
         },
-        "pressed": "{appearances.Link.pressed}",
-        "quiet": {
-          "description": "When it is true, it does not show the decoration",
-          "type": "state",
-          "values": [true, false]
+        {
+          "if": {
+            "focus": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
         },
-        "size": {
-          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
-          "type": "variant",
-          "values": ["large", "small", "micro"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "iconPosition": "left"
+            "hover": true,
+            "style": "danger"
           },
           "tokens": {
-            "iconSpace": "{system.integer.2}"
+            "color": "{palette.color.redDarker}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "iconPosition": "right"
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "iconSpace": "{system.integer.1}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "iconPosition": "inline"
+            "focus": true,
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "iconSpace": "{system.integer.2}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "focus": true
+            "style": "inverse"
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.greenAccessible}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
             "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
         {
           "if": {
-            "hover": true
+            "hover": true,
+            "style": "inverse"
           },
           "tokens": {
-            "color": "{palette.color.greenSanFelix}",
+            "color": "{palette.color.greyAthens}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "color": "{palette.color.greenDarkFern}",
+            "color": "{palette.color.greyCloud}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "pressed": true
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.greenDarkFern}"
+            "outerBorderColor": "{palette.color.greyCloud}"
           }
         },
         {
           "if": {
-            "size": "large"
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "blockFontSize": "{palette.fontSize.size20}",
-            "blockLineHeight": "{palette.lineHeight.ratio5to4}",
-            "iconSize": "{palette.size.size24}"
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "size": "small"
+            "focus": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "blockFontSize": "{palette.fontSize.size14}",
-            "blockLineHeight": "{palette.lineHeight.ratio1to1}",
-            "iconSize": "{palette.size.size20}"
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "hover": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "blockFontName": "{palette.fontName.HNforTELUSSA}",
-            "blockFontSize": "{palette.fontSize.size12}",
-            "blockFontWeight": "{palette.fontWeight.weight500}",
-            "blockLineHeight": "{palette.lineHeight.ratio9to8}",
-            "iconSize": "{palette.size.size16}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "alternative": true
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
             "color": "{palette.color.greyThunder}"
@@ -4843,141 +5835,208 @@
         },
         {
           "if": {
-            "alternative": true,
-            "focus": true
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}",
-            "outerBorderColor": "{palette.color.greyCharcoal}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.greyThunder}"
+            "color": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "pressed": true
+            "focus": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.greyThunder}"
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "hover": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "color": "{palette.color.greyThunder}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.greyAthens}"
+            "color": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
             "focus": true,
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.white}",
-            "outerBorderOutline": "{system.borderStyle.none}"
+            "outerBorderColor": "{palette.color.greyThunder}"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.greyMystic}"
+            "color": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "inverse": true,
-            "pressed": true
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.greyMystic}",
-            "outerBorderColor": "{palette.color.greyMystic}"
+            "color": "{palette.color.greenAccessible}",
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "light": true
+            "hover": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.greyShuttle}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
             "focus": true,
-            "light": true
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "color": "{palette.color.greyShuttle}",
-            "outerBorderColor": "{palette.color.greyShuttle}"
+            "outerBorderColor": "{palette.color.greenDarkFern}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "light": true
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}",
+            "color": "{palette.color.redDark}",
             "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "quiet": true
+            "focus": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "textLine": "{system.textLine.none}"
+            "color": "{palette.color.redDark}",
+            "outerBorderColor": "{palette.color.redDark}",
+            "outerBorderOutline": "{system.borderStyle.none}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
             "hover": true,
-            "quiet": true
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.greenSanFelix}",
+            "color": "{palette.color.redDarker}",
             "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "alternative": true,
-            "hover": true,
-            "quiet": true
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "color": "{palette.color.greyThunder}",
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}",
             "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
             "hover": true,
-            "inverse": true,
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": "{palette.color.greyAthens}",
@@ -4986,13 +6045,23 @@
         },
         {
           "if": {
-            "hover": true,
-            "light": true,
-            "quiet": true
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
-            "color": "{palette.color.greyCharcoal}",
-            "textLine": "{system.textLine.underline}"
+            "color": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyCloud}"
           }
         }
       ],
@@ -5453,6 +6522,10 @@
       "appearances": {
         "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
         "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -5483,6 +6556,15 @@
           "tokens": {
             "maxWidthSize": "{palette.size.size544}"
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": "{palette.color.purpleDeluge}",
+            "labelColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -6356,7 +7438,7 @@
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.greyAthens}",
+        "backgroundColor": "{palette.color.dark10}",
         "borderColor": "{palette.color.greyCloud}",
         "borderRadius": "{palette.radius.radius12}",
         "borderWidth": "{palette.border.border1}",