@telus-uds/theme-allium 0.0.2-prerelease.3 → 0.1.0-prerelease.0

package/theme.json

@@ -0,0 +1,3714 @@
+{
+  "metadata": {
+    "name": "allium",
+    "package": "@telus-uds/theme-allium"
+  },
+  "components": {
+    "ActivityIndicator": {
+      "appearances": {
+        "size": {
+          "values": ["large"],
+          "description": "used for full-screen spinners",
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "size": "{palette.size.size20}",
+        "thickness": "{palette.border.border2}",
+        "color": "{palette.color.greenAccessible}"
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "thickness": "{palette.border.border4}",
+            "size": "{palette.size.size40}"
+          }
+        }
+      ]
+    },
+    "Box": {
+      "appearances": {
+        "background": {
+          "description": "Background colour of box. Transparent if not specified.",
+          "values": [
+            "light",
+            "lightest",
+            "dark",
+            "darkest",
+            "critical",
+            "danger",
+            "warning",
+            "positive",
+            "brand"
+          ]
+        }
+      },
+      "tokens": {
+        "backgroundColor": "{system.color.none}"
+      },
+      "rules": [
+        {
+          "if": {
+            "background": "lightest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "background": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "background": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "background": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "background": "critical"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "background": "danger"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redLight}"
+          }
+        },
+        {
+          "if": {
+            "background": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.amberLight}"
+          }
+        },
+        {
+          "if": {
+            "background": "positive"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenPanache}"
+          }
+        },
+        {
+          "if": {
+            "background": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}"
+          }
+        }
+      ]
+    },
+    "Button": {
+      "appearances": {
+        "priority": {
+          "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
+          "values": ["high"],
+          "type": "variant"
+        },
+        "danger": {
+          "description": "Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.",
+          "values": [true],
+          "type": "variant"
+        },
+        "inverse": {
+          "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.",
+          "values": [true],
+          "type": "variant"
+        },
+        "size": {
+          "values": ["small"],
+          "type": "variant"
+        },
+        "width": {
+          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "values": ["full"],
+          "type": "variant"
+        },
+        "hover": "{appearances.Button.hover}",
+        "focus": "{appearances.Button.focus}",
+        "pressed": "{appearances.Button.pressed}",
+        "inactive": "{appearances.Button.inactive}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.greenAccessible}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.pill32}",
+        "shadow": "{system.shadow.none}",
+        "fontSize": "{palette.fontSize.size16}",
+        "color": "{palette.color.greenAccessible}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "textAlign": "{system.flexJustifyContent.center}",
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "backgroundColor": "{palette.color.white}",
+        "opacity": "{system.opacity.opaque}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "width": "{system.size.none}",
+        "minWidth": "{palette.size.size144}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderGap": "{palette.border.border2}",
+        "outerBackgroundColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenAccessible}",
+            "color": "{palette.color.white}",
+            "borderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{system.size.zero}",
+            "backgroundColor": "{palette.color.greenDarkFern}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.none}",
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high",
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "backgroundColor": "{palette.color.light60}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "priority": null
+          },
+          "tokens": {
+            "color": "{palette.color.red}",
+            "borderColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "priority": null,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "priority": null,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "priority": null,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redDark}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "priority": null,
+            "pressed": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "width": "full"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingTop": "{palette.size.size4}",
+            "paddingBottom": "{palette.size.size4}",
+            "minWidth": "{system.size.zero}"
+          }
+        },
+        {
+          "description": "Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.",
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "color": "{palette.color.white}",
+            "borderWidth": "{system.size.zero}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light60}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        }
+      ]
+    },
+    "ButtonGroup": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "space": "{system.integer.1}",
+        "direction": "{system.direction.row}",
+        "alignItems": "{system.flexAlign.center}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "flexGrow": "{system.integer.0}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": "{system.integer.3}"
+          }
+        }
+      ]
+    },
+    "ButtonGroupItem": {
+      "appearances": {
+        "hover": "{appearances.ButtonGroupItem.hover}",
+        "focus": "{appearances.ButtonGroupItem.focus}",
+        "pressed": "{appearances.ButtonGroupItem.pressed}",
+        "selected": "{appearances.ButtonGroupItem.selected}",
+        "inactive": "{appearances.ButtonGroupItem.inactive}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.pill32}",
+        "shadow": "{system.shadow.none}",
+        "fontSize": "{palette.fontSize.size14}",
+        "color": "{palette.color.greyShuttle}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "textAlign": "{system.flexJustifyContent.center}",
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "backgroundColor": "{palette.color.white}",
+        "opacity": "{system.opacity.opaque}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size8}",
+        "width": "{system.size.none}",
+        "minWidth": "{system.size.zero}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderGap": "{palette.border.border2}",
+        "outerBackgroundColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.none}",
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.none}",
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDark}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purpleDark}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "color": "{palette.color.white}",
+            "borderWidth": "{system.border.zero}"
+          }
+        }
+      ]
+    },
+    "Card": {
+      "appearances": {
+        "background": {
+          "values": ["alternative"],
+          "type": "variant"
+        },
+        "padding": {
+          "values": ["narrow", "intermediate", "compact", "custom"],
+          "type": "variant"
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "flex": "{system.integer.1}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyMystic}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size32}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size24}",
+        "paddingTop": "{palette.size.size32}",
+        "minWidth": "{system.size.none}",
+        "shadow": "{system.shadow.none}"
+      },
+      "rules": [
+        {
+          "if": {
+            "background": "alternative"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size48}",
+            "paddingLeft": "{palette.size.size32}",
+            "paddingRight": "{palette.size.size32}",
+            "paddingTop": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "padding": "narrow"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "padding": "narrow",
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size32}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "padding": "intermediate"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size24}",
+            "paddingRight": "{palette.size.size24}",
+            "paddingTop": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "padding": "intermediate",
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size32}",
+            "paddingLeft": "{palette.size.size32}",
+            "paddingRight": "{palette.size.size32}",
+            "paddingTop": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "padding": "compact"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size16}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "padding": "custom"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size0}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}"
+          }
+        }
+      ]
+    },
+    "Checkbox": {
+      "appearances": {
+        "checked": "{appearances.Checkbox.checked}",
+        "error": "{appearances.Checkbox.error}",
+        "focus": "{appearances.Checkbox.focus}",
+        "hover": "{appearances.Checkbox.hover}",
+        "inactive": "{appearances.Checkbox.inactive}"
+      },
+      "tokens": {
+        "containerBackgroundColor": "{palette.color.transparent}",
+        "feedbackMarginBottom": "{system.size.zero}",
+        "feedbackMarginTop": "{palette.size.size2}",
+        "feedbackPosition": "{system.position.bottom}",
+        "icon": "{palette.icon.Checkmark}",
+        "iconBackgroundColor": "{palette.color.purpleDeluge}",
+        "iconColor": "{palette.color.white}",
+        "iconSize": "{palette.size.size16}",
+        "inputBackgroundColor": "{palette.color.white}",
+        "inputBorderColor": "{palette.color.greyShuttle}",
+        "inputBorderRadius": "{palette.radius.radius4}",
+        "inputBorderWidth": "{palette.border.border1}",
+        "inputHeight": "{palette.size.size20}",
+        "inputOutlineColor": "{system.color.none}",
+        "inputOutlineWidth": "{palette.border.none}",
+        "inputShadow": "{system.shadow.none}",
+        "inputWidth": "{palette.size.size20}",
+        "labelColor": "{palette.color.greyCharcoal}",
+        "labelFontName": "{palette.fontName.HelveticaNow}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "labelMarginLeft": "{palette.size.size10}"
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.purpleDeluge}",
+            "inputBorderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.transparent}",
+            "inputBackgroundColor": "{palette.color.greyMystic}",
+            "iconBackgroundColor": "{palette.color.greyMystic}",
+            "iconColor": "{palette.color.greyShuttle}",
+            "labelColor": "{palette.color.greyShuttle}"
+          }
+        }
+      ]
+    },
+    "CheckboxGroup": {
+      "appearances": {},
+      "tokens": {
+        "space": "{system.integer.2}",
+        "fieldSpace": "{system.integer.2}"
+      },
+      "rules": []
+    },
+    "ChevronLink": {
+      "appearances": {
+        "hover": "{appearances.ChevronLink.hover}"
+      },
+      "tokens": {
+        "leftIcon": "{palette.icon.ArrowLeft}",
+        "rightIcon": "{palette.icon.ArrowRight}",
+        "iconDisplace": "{palette.size.size0}",
+        "iconSpace": "{system.integer.0}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "iconDisplace": "{palette.size.size4}"
+          }
+        }
+      ]
+    },
+    "Divider": {
+      "appearances": {
+        "weight": {
+          "values": ["thick"],
+          "type": "variant"
+        },
+        "decorative": {
+          "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
+          "values": [true],
+          "type": "variant"
+        },
+        "inverse": {
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "width": "{palette.border.border1}",
+        "color": "{palette.color.greyShuttle}"
+      },
+      "rules": [
+        {
+          "if": {
+            "weight": "thick"
+          },
+          "tokens": {
+            "width": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        }
+      ]
+    },
+    "ExpandCollapse": {
+      "appearances": {},
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "borderStyle": "{system.borderStyle.solid}"
+      },
+      "rules": []
+    },
+    "ExpandCollapseControl": {
+      "appearances": {
+        "expanded": "{appearances.ExpandCollapseControl.expanded}"
+      },
+      "tokens": {
+        "icon": "{palette.icon.CaretDown}",
+        "iconColor": "{palette.color.greenAccessible}",
+        "iconSize": "{palette.size.size24}",
+        "iconGap": "{palette.size.size8}",
+        "iconPosition": "{system.position.left}",
+        "verticalAlign": "{system.verticalAlign.top}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "paddingLeft": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size16}",
+        "borderWidth": "{system.border.zero}",
+        "borderColor": "{palette.color.transparent}",
+        "backgroundColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        }
+      ]
+    },
+    "ExpandCollapsePanel": {
+      "appearances": {},
+      "tokens": {
+        "expandDuration": "{palette.duration.duration300}",
+        "collapseDuration": "{palette.duration.duration250}",
+        "contentPaddingLeft": "{palette.size.size40}",
+        "contentPaddingRight": "{palette.size.size16}",
+        "contentPaddingTop": "{palette.size.size0}",
+        "contentPaddingBottom": "{palette.size.size16}"
+      },
+      "rules": []
+    },
+    "Feedback": {
+      "appearances": {
+        "validation": "{appearances.Feedback.validation}",
+        "icon": {
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.greyAthens}",
+        "borderColor": "{palette.color.greyMystic}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.radius4}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "space": "{system.integer.2}",
+        "color": "{palette.color.greyThunder}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "titleFontSize": "{palette.fontSize.size16}",
+        "contentFontSize": "{palette.fontSize.size14}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.fontSize.size24}",
+        "iconColor": "{palette.color.transparent}",
+        "iconGap": "{palette.size.size8}"
+      },
+      "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.red}"
+          }
+        },
+        {
+          "if": {
+            "validation": "success",
+            "icon": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusSuccess}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error",
+            "icon": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.StatusError}",
+            "iconColor": "{palette.color.red}"
+          }
+        }
+      ]
+    },
+    "Icon": {
+      "appearances": {
+        "size": {
+          "values": ["small"],
+          "type": "variant"
+        },
+        "rank": {
+          "values": ["primary"],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "size": "{palette.size.size24}",
+        "color": "{palette.color.greyCharcoal}",
+        "translateX": "{system.size.zero}",
+        "translateY": "{system.size.zero}",
+        "scale": "{system.integer.1}"
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "size": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "rank": "primary"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        }
+      ]
+    },
+    "IconButton": {
+      "appearances": {
+        "hover": "{appearances.IconButton.hover}",
+        "focus": "{appearances.IconButton.focus}",
+        "pressed": "{appearances.IconButton.pressed}",
+        "inverse": {
+          "description": "For use on dark backgrounds",
+          "type": "variant",
+          "values": [true]
+        },
+        "raised": {
+          "description": "Uses shadow and background colour to appear raised above the page",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["small", "large"]
+        }
+      },
+      "tokens": {
+        "outerBorderWidth": "{system.border.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "backgroundColor": "{system.color.transparent}",
+        "shadow": "{system.shadow.none}",
+        "padding": "{palette.size.size8}",
+        "borderRadius": "{system.radius.round}",
+        "borderWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconSize": "{palette.size.size16}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}"
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "iconScale": "{system.iconScale.scale1_10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderWidth": "{palette.border.border1}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "outerBorderWidth": "{system.border.zero}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "backgroundColor": "{palette.color.light60}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "iconColor": "{palette.color.greyShuttle}",
+            "backgroundColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "raised": true
+          },
+          "description": "Raised IconButtons follow different design patterns to other variants",
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}",
+            "borderColor": "{palette.color.greyCloud}",
+            "shadow": "{palette.shadow.surfaceRaised}",
+            "padding": "{palette.size.size12}",
+            "outerBorderWidth": "{system.border.zero}",
+            "outerBorderColor": "{system.color.transparent}",
+            "outerBorderGap": "{system.size.zero}"
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "size": "large"
+          },
+          "tokens": {
+            "padding": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "size": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "pressed": true,
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "raised": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "raised": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        }
+      ]
+    },
+    "InputLabel": {
+      "appearances": {},
+      "tokens": {
+        "gap": "{palette.size.size8}",
+        "color": "{palette.color.greyCharcoal}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "hintColor": "{palette.color.greyCharcoal}",
+        "hintFontName": "{palette.fontName.HelveticaNow}",
+        "hintFontWeight": "{palette.fontWeight.weight400}",
+        "hintFontSize": "{palette.fontSize.size14}",
+        "hintLineHeight": "{palette.lineHeight.ratio7to5}"
+      },
+      "rules": []
+    },
+    "InputSupports": {
+      "appearances": {},
+      "tokens": {
+        "space": "{system.integer.1}"
+      },
+      "rules": []
+    },
+    "Link": {
+      "appearances": {
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+          "values": ["large", "small", "micro"],
+          "type": "variant"
+        },
+        "alternative": {
+          "description": "Replaces the default green colour with a more subtle grey.",
+          "values": [true],
+          "type": "variant"
+        },
+        "inverse": {
+          "description": "Styles the link white for use on dark backgrounds.",
+          "values": [true],
+          "type": "variant"
+        },
+        "light": {
+          "description": "A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)",
+          "values": [true],
+          "type": "variant"
+        },
+        "iconPosition": "{appearances.Link.iconPosition}",
+        "focus": "{appearances.Link.focus}",
+        "hover": "{appearances.Link.hover}",
+        "pressed": "{appearances.Link.pressed}"
+      },
+      "tokens": {
+        "color": "{palette.color.greenAccessible}",
+        "textLine": "{system.textLine.underline}",
+        "textLineStyle": "{system.textLineStyle.solid}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderGap": "{palette.border.border2}",
+        "borderRadius": "{palette.radius.radius4}",
+        "outerBorderOutline": "{system.borderStyle.none}",
+        "blockFontWeight": "{palette.fontWeight.weight400}",
+        "blockFontName": "{palette.fontName.HelveticaNow}",
+        "blockFontSize": "{palette.fontSize.size16}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.fontSize.size24}",
+        "iconSpace": "{system.integer.1}",
+        "iconTranslateX": "{system.size.zero}",
+        "iconTranslateY": "{system.size.zero}"
+      },
+      "rules": [
+        {
+          "if": {
+            "iconPosition": "left"
+          },
+          "tokens": {
+            "iconSpace": "{system.integer.2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "textLine": "{system.textLine.none}",
+            "color": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "textLine": "{system.textLine.none}",
+            "color": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size20}",
+            "iconSize": "{palette.fontSize.size24}",
+            "blockLineHeight": "{palette.lineHeight.ratio8to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size14}",
+            "iconSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size12}",
+            "blockFontWeight": "{palette.fontWeight.weight500}",
+            "blockFontName": "{palette.fontName.HelveticaNow}",
+            "iconSize": "{palette.fontSize.size16}",
+            "blockLineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyMystic}",
+            "outerBorderColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "light": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "light": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "light": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "textLine": "{system.textLine.none}"
+          }
+        }
+      ]
+    },
+    "List": {
+      "appearances": {
+        "size": {
+          "description": "Indicates list item text size.",
+          "values": ["large", "small"],
+          "type": "variant"
+        },
+        "compact": {
+          "description": "When true it will reduce the line height of the list item.",
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "itemFontWeight": "{palette.fontWeight.weight400}",
+        "itemFontSize": "{palette.fontSize.size16}",
+        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
+        "itemFontName": "{palette.fontName.HelveticaNow}",
+        "interItemMargin": "{palette.size.size8}",
+        "interItemMarginWithDivider": "{palette.size.size16}",
+        "dividerColor": "{palette.color.greyCloud}",
+        "dividerSize": "{palette.border.border1}",
+        "itemBulletContainerWidth": "{palette.size.size16}",
+        "itemBulletContainerAlign": "{system.textAlign.center}",
+        "itemBulletWidth": "{palette.size.size4}",
+        "itemBulletHeight": "{palette.size.size4}",
+        "itemBulletColor": "{palette.color.purpleTelus}",
+        "itemIconSize": "{palette.size.size16}",
+        "itemIconColor": "{palette.color.purpleTelus}",
+        "listGutter": "{palette.size.size12}"
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "itemFontSize": "{palette.fontSize.size20}",
+            "itemLineHeight": "{palette.lineHeight.ratio8to5}",
+            "listGutter": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "itemFontSize": "{palette.fontSize.size14}",
+            "itemLineHeight": "{palette.lineHeight.ratio10to7}",
+            "listGutter": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        }
+      ]
+    },
+    "Modal": {
+      "appearances": {
+        "maxWidth": "{appearances.Modal.maxWidth}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "backdropColor": "{palette.color.bgModal}",
+        "backdropOpacity": "{system.opacity.opaque}",
+        "height": "{system.size.none}",
+        "maxWidth": "{system.size.full}",
+        "containerPaddingLeft": "{system.size.zero}",
+        "containerPaddingRight": "{system.size.zero}",
+        "containerPaddingTop": "{system.size.zero}",
+        "containerPaddingBottom": "{system.size.zero}",
+        "backgroundColor": "{palette.color.white}",
+        "borderRadius": "{palette.radius.radius4}",
+        "shadow": "{palette.shadow.elevation1}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size24}",
+        "paddingTop": "{palette.size.size24}",
+        "paddingBottom": "{palette.size.size24}",
+        "closeIcon": "{palette.icon.Close}",
+        "closeIconSize": "{palette.size.size24}",
+        "closeIconColor": "{palette.color.greyCharcoal}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "height": "{system.size.full}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "maxWidth": "{system.integer.576}",
+            "containerPaddingTop": "{palette.size.size32}",
+            "containerPaddingBottom": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"],
+            "maxWidth": true
+          },
+          "tokens": {
+            "maxWidth": "{system.size.twoThirds}",
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}"
+          }
+        }
+      ]
+    },
+    "Notification": {
+      "appearances": {
+        "system": "{appearances.Notification.system}",
+        "style": "{appearances.Notification.style}"
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.greyAthens}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
+        "borderLeftWidth": "{palette.border.border1}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderRadius": "{palette.radius.radius6}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "color": "{palette.color.greyCharcoal}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{system.icon.none}",
+        "iconColor": "{system.color.none}",
+        "iconSize": "{palette.size.size24}",
+        "iconGap": "{palette.size.size16}",
+        "dismissIcon": "{palette.icon.Close}",
+        "dismissIconColor": "{palette.color.greyCharcoal}",
+        "dismissIconSize": "{palette.size.size24}",
+        "dismissButtonGap": "{palette.size.size16}"
+      },
+      "rules": [
+        {
+          "if": {
+            "system": true
+          },
+          "tokens": {
+            "borderTopWidth": "{system.border.zero}",
+            "borderLeftWidth": "{system.border.zero}",
+            "borderRightWidth": "{system.border.zero}",
+            "borderRadius": "{system.radius.zero}",
+            "paddingTop": "{palette.size.size16}",
+            "paddingBottom": "{palette.size.size16}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "iconGap": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "style": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenPanache}",
+            "borderColor": "{palette.color.greenAccessible}",
+            "icon": "{palette.icon.StatusSuccess}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "style": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.amberLight}",
+            "borderColor": "{palette.color.amberDark}",
+            "icon": "{palette.icon.StatusWarning}",
+            "iconColor": "{palette.color.amberDark}",
+            "dismissIcon": "{system.icon.none}"
+          }
+        },
+        {
+          "if": {
+            "style": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redLight}",
+            "borderColor": "{palette.color.red}",
+            "icon": "{palette.icon.StatusError}",
+            "iconColor": "{palette.color.red}",
+            "dismissIcon": "{system.icon.none}"
+          }
+        }
+      ]
+    },
+    "Pagination": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "gap": "{system.integer.2}",
+        "truncateAbove": "{system.integer.4}",
+        "color": "{palette.color.greyShuttle}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "truncateAbove": "{system.integer.6}"
+          }
+        }
+      ]
+    },
+    "PaginationPageButton": {
+      "appearances": {
+        "focus": "{appearances.PaginationPageButton.focus}",
+        "hover": "{appearances.PaginationPageButton.hover}",
+        "pressed": "{appearances.PaginationPageButton.pressed}",
+        "selected": "{appearances.PaginationPageButton.selected}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.pill32}",
+        "backgroundColor": "{palette.color.transparent}",
+        "paddingLeft": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size4}",
+        "paddingBottom": "{palette.size.size4}",
+        "width": "{palette.size.size32}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border4}",
+        "outerBorderGap": "{palette.border.border4}",
+        "color": "{palette.color.greyShuttle}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "textLine": "{system.textLine.underline}",
+        "textAlign": "{system.flexJustifyContent.center}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}"
+          }
+        }
+      ]
+    },
+    "PaginationSideButton": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}",
+        "focus": "{appearances.PaginationSideButton.focus}",
+        "hover": "{appearances.PaginationSideButton.hover}",
+        "pressed": "{appearances.PaginationSideButton.pressed}",
+        "selected": "{appearances.PaginationSideButton.selected}",
+        "direction": "{appearances.PaginationSideButton.direction}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.radius4}",
+        "backgroundColor": "{palette.color.transparent}",
+        "paddingLeft": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "color": "{palette.color.greyShuttle}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "textLine": "{system.textLine.underline}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.fontSize.size24}",
+        "iconDisplace": "{palette.size.size0}",
+        "width": "{system.size.none}",
+        "textAlign": "{system.flexJustifyContent.center}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.pill32}",
+            "paddingTop": "{palette.size.size4}",
+            "paddingBottom": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "textLine": "{system.textLine.none}",
+            "iconDisplace": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "direction": "previous"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ArrowLeft}"
+          }
+        },
+        {
+          "if": {
+            "direction": "next"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ArrowRight}"
+          }
+        }
+      ]
+    },
+    "Progress": {
+      "appearances": {
+        "size": {
+          "values": ["mini"],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.greyAthens}",
+        "borderWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderRadius": "{palette.radius.radius12}",
+        "height": "{palette.size.size16}"
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "mini"
+          },
+          "tokens": {
+            "height": "{palette.size.size8}"
+          }
+        }
+      ]
+    },
+    "ProgressBar": {
+      "appearances": {
+        "inactive": "{appearances.ProgressBar.inactive}",
+        "negative": {
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.greenAccessible}",
+        "borderRadius": "{palette.radius.radius12}",
+        "gradient": "{palette.gradient.green}",
+        "outlineWidth": "{palette.border.border1}",
+        "outlineColor": "{palette.color.greenAccessible}"
+      },
+      "rules": [
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "gradient": "{system.gradient.none}",
+            "outlineColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "negative": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.redDark}",
+            "gradient": "{system.gradient.none}",
+            "outlineColor": "{palette.color.redDark}"
+          }
+        }
+      ]
+    },
+    "Radio": {
+      "appearances": {
+        "checked": "{appearances.Radio.checked}",
+        "error": "{appearances.Radio.error}",
+        "focus": "{appearances.Radio.focus}",
+        "hover": "{appearances.Radio.hover}",
+        "inactive": "{appearances.Radio.inactive}"
+      },
+      "tokens": {
+        "checkedBackgroundColor": "{palette.color.purpleDeluge}",
+        "checkedSize": "{palette.size.size12}",
+        "containerBackgroundColor": "{palette.color.transparent}",
+        "containerBorderRadius": "{palette.radius.none}",
+        "containerOpacity": "{system.opacity.opaque}",
+        "containerPaddingBottom": "{palette.size.size0}",
+        "containerPaddingLeft": "{palette.size.size0}",
+        "containerPaddingRight": "{palette.size.size0}",
+        "containerPaddingTop": "{palette.size.size0}",
+        "containerShadow": "{system.shadow.none}",
+        "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionLineHeight": "{palette.lineHeight.ratio10to7}",
+        "descriptionMarginLeft": "{system.size.none}",
+        "inputBackgroundColor": "{palette.color.white}",
+        "inputBorderColor": "{palette.color.greyShuttle}",
+        "inputBorderWidth": "{palette.border.border1}",
+        "inputOutlineColor": "{palette.color.transparent}",
+        "inputOutlineWidth": "{palette.border.none}",
+        "inputSize": "{palette.size.size20}",
+        "outerBorderWidth": "{system.border.zero}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "labelColor": "{palette.color.greyCharcoal}",
+        "labelFontName": "{palette.fontName.HelveticaNow}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "labelMarginLeft": "{palette.size.size10}"
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "outerBorderWidth": "{palette.border.border2}",
+            "outerBorderColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.purpleDeluge}",
+            "inputBorderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.transparent}",
+            "inputBackgroundColor": "{palette.color.greyMystic}",
+            "labelColor": "{palette.color.greyShuttle}"
+          }
+        }
+      ]
+    },
+    "RadioCard": {
+      "appearances": {
+        "pressed": "{appearances.RadioCard.pressed}",
+        "hover": "{appearances.RadioCard.hover}",
+        "focus": "{appearances.RadioCard.focus}",
+        "checked": "{appearances.RadioCard.checked}",
+        "inactive": "{appearances.RadioCard.inactive}",
+        "error": "{appearances.RadioCard.error}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderWidth": "{system.border.zero}",
+        "outerBorderGap": "{system.size.zero}",
+        "flex": "{system.integer.1}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size10}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "minWidth": "{palette.size.size288}",
+        "shadow": "{system.shadow.none}",
+        "radioCheckedBackgroundColor": "{palette.color.purpleDeluge}",
+        "radioCheckedSize": "{palette.size.size12}",
+        "radioInputBackgroundColor": "{palette.color.white}",
+        "radioInputBorderColor": "{palette.color.greyShuttle}",
+        "radioInputBorderWidth": "{palette.border.border1}",
+        "radioInputOutlineColor": "{palette.color.transparent}",
+        "radioInputOutlineWidth": "{palette.border.none}",
+        "radioInputSize": "{palette.size.size20}",
+        "radioOuterBorderColor": "{system.color.transparent}",
+        "radioOuterBorderWidth": "{system.border.zero}",
+        "radioOuterBorderGap": "{system.size.zero}",
+        "fontSize": "{palette.fontSize.size20}",
+        "lineHeight": "{palette.lineHeight.ratio7to5}",
+        "color": "{palette.color.greyThunder}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "textTransform": "{system.textTransform.none}",
+        "fontWeight": "{palette.fontWeight.weight500}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "radioSpace": "{system.integer.2}",
+        "contentSpace": "{system.integer.2}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size24}",
+            "paddingTop": "{palette.size.size16}",
+            "fontSize": "{palette.fontSize.size24}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBorderWidth": "{palette.border.border2}",
+            "radioOuterBorderWidth": "{palette.border.border2}",
+            "radioOuterBorderColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "description": "Pressed state matches hover state plus light grey background",
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderWidth": "{palette.border.border2}",
+            "outerBorderGap": "{palette.size.size2}",
+            "radioInputBorderColor": "{palette.color.purpleDeluge}",
+            "radioInputBorderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{system.color.transparent}",
+            "radioInputBorderColor": "{palette.color.transparent}",
+            "radioInputBackgroundColor": "{palette.color.greyMystic}",
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.red}",
+            "radioInputBorderColor": "{palette.color.red}",
+            "color": "{palette.color.red}"
+          }
+        }
+      ]
+    },
+    "RadioCardGroup": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}",
+        "fullWidth": {
+          "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "direction": "{system.direction.column}",
+        "space": "{system.integer.3}",
+        "fieldSpace": "{system.integer.3}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"],
+            "fullWidth": null
+          },
+          "tokens": {
+            "direction": "{system.direction.row}",
+            "space": "{system.integer.4}"
+          }
+        }
+      ]
+    },
+    "RadioGroup": {
+      "appearances": {},
+      "tokens": {
+        "space": "{system.integer.2}",
+        "fieldSpace": "{system.integer.2}"
+      },
+      "rules": []
+    },
+    "Search": {
+      "appearances": {
+        "hover": "{appearances.Search.hover}",
+        "focus": "{appearances.Search.focus}",
+        "inactive": "{appearances.Search.inactive}"
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "color": "{palette.color.greyCharcoal}",
+        "borderWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderRadius": "{palette.radius.pill32}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size8}",
+        "outerBackgroundColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderRadius": "{palette.radius.pill32}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "placeholderColor": "{palette.color.greyCharcoal}",
+        "buttonsGap": "{system.integer.1}",
+        "clearButtonIcon": "{palette.icon.Times}",
+        "submitButtonIcon": "{palette.icon.SearchBold}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true,
+            "inactive": null
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBackgroundColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleDeluge}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyAthens}"
+          }
+        }
+      ]
+    },
+    "SearchButton": {
+      "appearances": {
+        "hover": "{appearances.SearchButton.hover}",
+        "focus": "{appearances.SearchButton.focus}",
+        "inactive": "{appearances.SearchButton.inactive}",
+        "pressed": "{appearances.SearchButton.pressed}",
+        "priority": {
+          "description": "",
+          "values": ["high"],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{system.border.zero}",
+        "borderRadius": "{palette.radius.pill32}",
+        "backgroundColor": "{system.color.none}",
+        "opacity": "{system.opacity.opaque}",
+        "paddingLeft": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size8}",
+        "shadow": "{system.shadow.none}",
+        "iconSize": "{palette.size.size20}",
+        "iconColor": "{palette.color.greyShuttle}"
+      },
+      "rules": [
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.purpleTelus}",
+            "backgroundColor": "{system.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{system.size.zero}",
+            "backgroundColor": "{palette.color.purpleDark}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "iconColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.size.zero}"
+          }
+        }
+      ]
+    },
+    "StepTracker": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "completedIcon": "{system.icon.none}",
+        "completedIconColor": "{system.color.none}",
+        "completedIconSize": "{system.size.none}",
+        "connectorColor": "{palette.color.greyShuttle}",
+        "connectorHeight": "{palette.border.border1}",
+        "connectorMinWidth": "{palette.size.size16}",
+        "connectorCompletedHeight": "{palette.border.border3}",
+        "connectorCompletedColor": "{palette.color.purpleDeluge}",
+        "containerPaddingBottom": "{system.size.none}",
+        "containerPaddingLeft": "{system.size.none}",
+        "containerPaddingRight": "{system.size.none}",
+        "containerPaddingTop": "{system.size.none}",
+        "knobBackgroundColor": "{palette.color.transparent}",
+        "knobBorderWidth": "{palette.border.border1}",
+        "knobBorderColor": "{palette.color.greyShuttle}",
+        "knobCompletedBackgroundColor": "{palette.color.purpleDeluge}",
+        "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
+        "knobCompletedPaddingLeft": "{system.size.none}",
+        "knobCompletedPaddingTop": "{system.size.none}",
+        "knobCurrentBackgroundColor": "{palette.color.transparent}",
+        "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
+        "knobCurrentBorderWidth": "{palette.border.border2}",
+        "knobCurrentInnerColor": "{palette.color.purpleDeluge}",
+        "knobCurrentInnerSize": "{palette.size.size8}",
+        "knobCurrentPaddingLeft": "{palette.size.size2}",
+        "knobCurrentPaddingTop": "{palette.size.size2}",
+        "knobSize": "{palette.size.size16}",
+        "labelColor": "{palette.color.greyCharcoal}",
+        "labelCurrentColor": "{palette.color.purpleDeluge}",
+        "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
+        "labelCurrentFontName": "{palette.fontName.HelveticaNow}",
+        "labelDirection": "{system.direction.column}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelFontName": "{palette.fontName.HelveticaNow}",
+        "labelGap": "{palette.size.size0}",
+        "labelLineHeight": "{palette.lineHeight.ratio10to7}",
+        "labelMarginTop": "{palette.size.size8}",
+        "labelPaddingLeft": "{palette.size.size16}",
+        "labelPaddingRight": "{palette.size.size16}",
+        "showStepLabel": "{system.show.false}",
+        "showStepName": "{system.show.true}",
+        "showStepTrackerLabel": "{system.show.true}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "showStepLabel": "{system.show.true}",
+            "showStepTrackerLabel": "{system.show.false}"
+          }
+        }
+      ]
+    },
+    "Tabs": {
+      "appearances": {},
+      "tokens": {
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}",
+        "space": "{system.integer.0}",
+        "gutter": "{palette.size.size2}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "borderBottomColor": "{palette.color.greyShuttle}",
+        "buttonClearance": "{palette.size.size16}"
+      },
+      "rules": []
+    },
+    "TabsItem": {
+      "appearances": {
+        "pressed": "{appearances.TabsItem.pressed}",
+        "hover": "{appearances.TabsItem.pressed}",
+        "focus": "{appearances.TabsItem.pressed}",
+        "selected": "{appearances.TabsItem.pressed}"
+      },
+      "tokens": {
+        "highlightColor": "{system.color.transparent}",
+        "highlightBarHeight": "{system.border.zero}",
+        "highlightBarBorderRadius": "{system.radius.zero}",
+        "highlightBarBorderWidth": "{system.border.zero}",
+        "highlightTriangleSize": "{system.size.zero}",
+        "backgroundColor": "{system.color.transparent}",
+        "borderColor": "{system.color.transparent}",
+        "borderWidth": "{system.border.zero}",
+        "borderRadius": "{palette.radius.pill32}",
+        "maxWidth": "{palette.size.size192}",
+        "space": "{system.integer.1}",
+        "paddingHorizontal": "{palette.size.size24}",
+        "paddingVertical": "{palette.size.size8}",
+        "textAlign": "{system.textAlign.center}",
+        "lineHeight": "{palette.lineHeight.ratio8to7}",
+        "color": "{palette.color.greyShuttle}",
+        "fontSize": "{palette.fontSize.size14}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "textTransform": "{system.textTransform.none}",
+        "fontScaleCap": "{palette.fontSize.size64}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "fontName": "{palette.fontName.HelveticaNow}"
+      },
+      "rules": [
+        {
+          "if": {
+            "selected": true
+          },
+          "description": "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
+          "tokens": {
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.purpleTelus}",
+            "highlightBarBorderRadius": "{palette.radius.pill32}",
+            "color": "{palette.color.purpleTelus}",
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}",
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{system.color.transparent}",
+            "borderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}"
+          }
+        }
+      ]
+    },
+    "TabsScrollButton": {
+      "appearances": {
+        "hover": "{appearances.TabsScrollButton.hover}",
+        "focus": "{appearances.TabsScrollButton.focus}",
+        "pressed": "{appearances.TabsScrollButton.pressed}"
+      },
+      "tokens": {
+        "borderRadius": "{palette.radius.pill32}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "padding": "{system.size.zero}",
+        "shadow": "{palette.shadow.surfaceRaised}",
+        "iconSize": "{palette.size.size32}",
+        "iconColor": "{palette.color.greyShuttle}"
+      },
+      "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}"
+          }
+        }
+      ]
+    },
+    "TextArea": {
+      "appearances": {},
+      "tokens": {
+        "minLines": "{system.integer.5}",
+        "maxLines": "{system.integer.8}"
+      },
+      "rules": []
+    },
+    "TextInput": {
+      "appearances": {
+        "validation": "{appearances.TextInput.validation}",
+        "hover": "{appearances.TextInput.hover}",
+        "focus": "{appearances.TextInput.focus}",
+        "inactive": "{appearances.TextInput.inactive}"
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "color": "{palette.color.greyCharcoal}",
+        "borderWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderRadius": "{palette.radius.radius4}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "outerBackgroundColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.fontSize.size24}",
+        "iconColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true,
+            "inactive": null
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBackgroundColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "validation": "success"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenAccessible}",
+            "icon": "{palette.icon.StatusSuccess}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.red}",
+            "icon": "{palette.icon.StatusError}",
+            "iconColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleDeluge}",
+            "borderWidth": "{palette.border.border3}",
+            "icon": "{system.icon.none}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyAthens}"
+          }
+        }
+      ]
+    },
+    "ToggleSwitch": {
+      "appearances": {
+        "focus": "{appearances.ToggleSwitch.focus}",
+        "hover": "{appearances.ToggleSwitch.hover}",
+        "pressed": "{appearances.ToggleSwitch.pressed}",
+        "inactive": "{appearances.ToggleSwitch.inactive}",
+        "selected": "{appearances.ToggleSwitch.selected}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{palette.border.none}",
+        "borderRadius": "{palette.radius.pill32}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.none}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBackgroundColor": "{palette.color.transparent}",
+        "backgroundColor": "{palette.color.greyShuttle}",
+        "opacity": "{system.opacity.opaque}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}",
+        "paddingBottom": "{system.size.zero}",
+        "shadow": "{palette.shadow.surfaceInset}",
+        "alignSelf": "{system.flexAlign.flexStart}",
+        "icon": "{system.icon.none}",
+        "width": "{palette.size.size40}",
+        "trackBorderWidth": "{palette.border.border3}",
+        "trackBorderColor": "{palette.color.transparent}",
+        "trackBorderRadius": "{palette.radius.pill32}",
+        "iconSize": "{palette.size.size12}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "switchSize": "{palette.size.size16}",
+        "switchColor": "{palette.color.white}",
+        "switchBorderColor": "{palette.color.transparent}",
+        "switchBorderWidth": "{palette.border.none}",
+        "switchBorderRadius": "{palette.radius.pill32}",
+        "switchShadow": "{palette.shadow.surfaceRaised}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBackgroundColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.border.border3}",
+            "outerBorderWidth": "{palette.border.border2}",
+            "outerBorderColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.Checkmark}",
+            "backgroundColor": "{palette.color.greenAccessible}",
+            "iconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenSanFelix}",
+            "iconColor": "{palette.color.greenSanFelix}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greenDarkFern}",
+            "iconColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "outerBorderColor": "{palette.color.greyCloud}",
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        }
+      ]
+    },
+    "Tooltip": {
+      "appearances": {
+        "inverse": {
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.greyThunder}",
+        "paddingTop": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "borderRadius": "{palette.radius.radius8}",
+        "shadow": "{palette.shadow.elevation1}",
+        "color": "{palette.color.white}",
+        "fontSize": "{palette.fontSize.size14}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "arrowWidth": "{palette.size.size16}",
+        "arrowBorderRadius": "{palette.radius.radius1}",
+        "arrowOffset": "{palette.size.size4}"
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        }
+      ]
+    },
+    "TooltipButton": {
+      "appearances": {
+        "focus": "{appearances.TooltipButton.focus}",
+        "hover": "{appearances.TooltipButton.hover}",
+        "pressed": "{appearances.TooltipButton.pressed}",
+        "inverse": {
+          "values": [true],
+          "type": "variant"
+        }
+      },
+      "tokens": {
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border1}",
+        "outerBorderGap": "{palette.size.size4}",
+        "borderRadius": "{palette.radius.pill32}",
+        "width": "{palette.size.size16}",
+        "icon": "{palette.icon.Question}",
+        "iconScale": "{system.iconScale.scale1}",
+        "iconSize": "{palette.size.size16}",
+        "iconColor": "{palette.color.greyThunder}"
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "iconScale": "{system.iconScale.scale1_25}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyCloud}"
+          }
+        }
+      ]
+    },
+    "Typography": {
+      "appearances": {
+        "size": {
+          "description": "Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,\n\"display\" headings are larger than \"h\" headings. Default is medium size body text. Does not change\naccessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.",
+          "values": [
+            "micro",
+            "small",
+            "large",
+            "eyebrow",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "display1",
+            "display2"
+          ],
+          "type": "variant"
+        },
+        "colour": {
+          "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n  use the tokens prop.",
+          "values": ["secondary", "tertiary"],
+          "type": "variant"
+        },
+        "bold": {
+          "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
+          "values": [true],
+          "type": "variant"
+        },
+        "inverse": {
+          "description": "Styles the link white for use on dark backgrounds.",
+          "values": [true],
+          "type": "variant"
+        },
+        "compact": {
+          "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
+          "values": [true],
+          "type": "variant"
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontSize": "{palette.fontSize.size16}",
+        "color": "{palette.color.greyThunder}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "textTransform": "{system.textTransform.none}",
+        "fontScaleCap": "{palette.fontSize.size64}"
+      },
+      "rules": [
+        {
+          "if": {
+            "colour": "secondary"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "size": ["display1", "display2", "h1", "h2", "h3"]
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "size": ["display1", "display2", "h1", "h2", "h3"],
+            "colour": "secondary"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "size": "h6",
+            "colour": "tertiary"
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "size": "eyebrow"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "size": "eyebrow",
+            "colour": "secondary"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "display1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size40}",
+            "fontWeight": "{palette.fontWeight.weight300}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}",
+            "letterSpacing": "{palette.letterSpacing.medium}"
+          }
+        },
+        {
+          "if": {
+            "size": "display1",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size64}",
+            "lineHeight": "{palette.lineHeight.ratio9to8}"
+          }
+        },
+        {
+          "if": {
+            "size": "display2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size36}",
+            "fontWeight": "{palette.fontWeight.weight400}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "letterSpacing": "{palette.letterSpacing.medium}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
+          }
+        },
+        {
+          "if": {
+            "size": "display2",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size56}",
+            "fontWeight": "{palette.fontWeight.weight300}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}",
+            "letterSpacing": "{palette.letterSpacing.condensed}"
+          }
+        },
+        {
+          "if": {
+            "size": "h1"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size28}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}",
+            "letterSpacing": "{palette.letterSpacing.loose}"
+          }
+        },
+        {
+          "if": {
+            "size": "h1",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size40}",
+            "fontWeight": "{palette.fontWeight.weight300}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}",
+            "letterSpacing": "{palette.letterSpacing.medium}"
+          }
+        },
+        {
+          "if": {
+            "size": "h2"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size24}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "h2",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size28}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}",
+            "letterSpacing": "{palette.letterSpacing.loose}"
+          }
+        },
+        {
+          "if": {
+            "size": "h3"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "h3",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size24}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "h4"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size16}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "size": "h5"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "h6"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size20}",
+            "lineHeight": "{palette.lineHeight.ratio8to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "large",
+            "compact": true
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": null,
+            "compact": true
+          },
+          "description": "The compact line height for the 'default' font size, but doesn't apply for any other styles",
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "small",
+            "compact": true
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "fontWeight": "{palette.fontWeight.weight500}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "eyebrow"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "textTransform": "{system.textTransform.uppercase}",
+            "lineHeight": "{palette.lineHeight.ratio9to7}"
+          }
+        },
+        {
+          "if": {
+            "size": ["large", null, "small", "micro"],
+            "bold": true
+          },
+          "description": "Bold is only available on body text styles, not headings",
+          "tokens": {
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "fontName": "{palette.fontName.HelveticaNow}"
+          }
+        }
+      ]
+    },
+    "Select": {
+      "appearances": {
+        "validation": "{appearances.Select.validation}",
+        "hover": "{appearances.Select.hover}",
+        "focus": "{appearances.Select.focus}",
+        "inactive": "{appearances.Select.inactive}"
+      },
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "color": "{palette.color.greyCharcoal}",
+        "borderWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderRadius": "{palette.radius.radius4}",
+        "paddingTop": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "height": "{palette.size.size48}",
+        "outerBackgroundColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{palette.icon.CaretDown}",
+        "iconSize": "{palette.fontSize.size24}",
+        "iconColor": "{palette.color.greenAccessible}",
+        "validationIcon": "{system.icon.none}",
+        "validationIconSize": "{palette.fontSize.size24}",
+        "validationIconColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true,
+            "inactive": null
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBackgroundColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "validation": "success"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenAccessible}",
+            "validationIcon": "{palette.icon.StatusSuccess}",
+            "validationIconColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.red}",
+            "validationIcon": "{palette.icon.StatusError}",
+            "validationIconColor": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleDeluge}",
+            "borderWidth": "{palette.border.border3}",
+            "validationIcon": "{system.icon.none}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyAthens}"
+          }
+        }
+      ]
+    },
+    "SideNav": {
+      "appearances": {},
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "borderStyle": "{system.borderStyle.solid}"
+      },
+      "rules": []
+    },
+    "SideNavItem": {
+      "appearances": {
+        "active": "{appearances.SideNavItem.active}",
+        "type": "{appearances.SideNavItem.type}",
+        "expanded": "{appearances.SideNavItem.expanded}",
+        "hover": "{appearances.SideNavItem.hover}"
+      },
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "borderStyle": "{system.borderStyle.solid}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size16}",
+        "justifyContent": "{system.flexJustifyContent.spaceBetween}",
+        "color": "{palette.color.greyCharcoal}",
+        "accentOffset": "{system.size.zero}",
+        "accentPadding": "{system.size.zero}",
+        "accentWidth": "{palette.size.size4}",
+        "accentBackgroundColor": "{palette.color.transparent}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "backgroundColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "active": true
+          },
+          "tokens": {
+            "paddingLeft": "{palette.size.size12}",
+            "accentBackgroundColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.purpleTelus}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "fontName": "{palette.fontName.HelveticaNow}"
+          }
+        },
+        {
+          "if": {
+            "type": "child"
+          },
+          "tokens": {
+            "paddingLeft": "{palette.size.size36}",
+            "borderWidth": "{palette.border.none}",
+            "accentBackgroundColor": "{palette.color.greyAthens}",
+            "accentOffset": "{palette.size.size16}",
+            "fontSize": "{palette.fontSize.size14}",
+            "lineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "type": "parent",
+            "active": true
+          },
+          "tokens": {
+            "paddingLeft": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "type": "parent",
+            "active": true,
+            "expanded": true
+          },
+          "tokens": {
+            "paddingLeft": "{palette.size.size16}",
+            "accentBackgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "type": "child",
+            "active": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "color": "{palette.color.purpleTelus}",
+            "accentPadding": "{palette.size.size16}",
+            "accentBackgroundColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "type": "child",
+            "active": false,
+            "hover": true
+          },
+          "tokens": {
+            "accentBackgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}",
+            "accentOffset": "{system.size.zero}",
+            "accentWidth": "{palette.size.size16}"
+          }
+        }
+      ]
+    },
+    "SideNavItemsGroup": {
+      "appearances": {
+        "expanded": "{appearances.SideNavItemGroup.expanded}"
+      },
+      "tokens": {
+        "expandDuration": "{palette.duration.duration300}",
+        "collapseDuration": "{palette.duration.duration250}",
+        "contentPaddingLeft": "{palette.size.size0}",
+        "contentPaddingRight": "{palette.size.size0}",
+        "contentPaddingTop": "{palette.size.size0}",
+        "contentPaddingBottom": "{palette.size.size0}",
+        "icon": "{palette.icon.CaretDown}",
+        "iconColor": "{palette.color.purpleTelus}",
+        "iconGap": "{palette.size.size8}",
+        "iconSize": "{palette.size.size24}",
+        "iconPosition": "{system.position.right}",
+        "verticalAlign": "{system.verticalAlign.middle}",
+        "justifyContent": "{system.flexJustifyContent.spaceBetween}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        }
+      ]
+    },
+    "Skeleton": {
+      "appearances": {},
+      "tokens": {
+        "color": "{palette.color.greyCloud}",
+        "size": "{palette.border.border3}",
+        "radius": "{palette.size.size120}",
+        "baseWidth": "{palette.size.size40}",
+        "characters": "{palette.size.size10}",
+        "spaceBetweenLines": "{palette.size.size2}",
+        "squareRadius": "{palette.size.size4}"
+      },
+      "rules": []
+    },
+    "StackView": {
+      "appearances": {},
+      "tokens": {
+        "alignItems": "{system.flexAlign.stretch}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "flexGrow": "{system.integer.0}"
+      },
+      "rules": []
+    },
+    "Tags": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "space": "{system.integer.1}",
+        "direction": "{system.direction.row}",
+        "alignItems": "{system.flexAlign.center}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "flexGrow": "{system.integer.0}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": "{system.integer.3}"
+          }
+        }
+      ]
+    },
+    "TagsItem": {
+      "appearances": {
+        "hover": "{appearances.TagsItem.hover}",
+        "focus": "{appearances.TagsItem.focus}",
+        "pressed": "{appearances.TagsItem.pressed}",
+        "selected": "{appearances.TagsItem.selected}",
+        "inactive": "{appearances.TagsItem.inactive}"
+      },
+      "tokens": {
+        "iconSize": "{palette.size.size16}",
+        "iconColor": "{palette.color.greyThunder}",
+        "iconTranslateX": "{system.integer.0}",
+        "iconTranslateY": "{system.integer.0}",
+        "icon": "{palette.icon.Add}",
+        "iconPosition": "{system.position.right}",
+        "iconSpace": "{system.integer.2}",
+        "iconBackground": "{palette.color.greyAthens}",
+        "iconBorderRadius": "{palette.radius.pill32}",
+        "iconAlignSelf": "{system.flexAlign.center}",
+        "iconPadding": "{palette.size.size2}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderWidth": "{palette.border.border1}",
+        "borderRadius": "{palette.radius.pill32}",
+        "shadow": "{system.shadow.none}",
+        "fontSize": "{palette.fontSize.size14}",
+        "color": "{palette.color.greyShuttle}",
+        "lineHeight": "{palette.lineHeight.ratio10to7}",
+        "textAlign": "{system.flexJustifyContent.center}",
+        "alignSelf": "{system.flexAlign.center}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "backgroundColor": "{palette.color.white}",
+        "opacity": "{system.opacity.opaque}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size8}",
+        "width": "{system.size.none}",
+        "minWidth": "{system.size.zero}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderGap": "{palette.border.border2}",
+        "outerBackgroundColor": "{palette.color.transparent}"
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.none}",
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "iconBackground": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.none}",
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.white}",
+            "icon": "{palette.icon.Close}",
+            "iconColor": "{palette.color.white}",
+            "iconBackground": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "iconBackground": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDark}",
+            "iconBackground": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purpleDark}",
+            "iconBackground": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "color": "{palette.color.white}",
+            "borderWidth": "{system.border.zero}"
+          }
+        }
+      ]
+    },
+    "spacingScale": {
+      "appearances": {
+        "space": "{appearances.spacingScale.space}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "tokens": {
+        "size": "{palette.size.size96}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size120}"
+          }
+        },
+        {
+          "if": {
+            "space": 11
+          },
+          "tokens": {
+            "size": "{palette.size.size96}"
+          }
+        },
+        {
+          "if": {
+            "space": 10
+          },
+          "tokens": {
+            "size": "{palette.size.size80}"
+          }
+        },
+        {
+          "if": {
+            "space": 9
+          },
+          "tokens": {
+            "size": "{palette.size.size64}"
+          }
+        },
+        {
+          "if": {
+            "space": 8
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "space": 7
+          },
+          "tokens": {
+            "size": "{palette.size.size40}"
+          }
+        },
+        {
+          "if": {
+            "space": 6
+          },
+          "tokens": {
+            "size": "{palette.size.size36}"
+          }
+        },
+        {
+          "if": {
+            "space": 5
+          },
+          "tokens": {
+            "size": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "space": 4
+          },
+          "tokens": {
+            "size": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "space": 3
+          },
+          "tokens": {
+            "size": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "space": 2
+          },
+          "tokens": {
+            "size": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "space": 1
+          },
+          "tokens": {
+            "size": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "space": 11,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size120}"
+          }
+        },
+        {
+          "if": {
+            "space": 10,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size96}"
+          }
+        },
+        {
+          "if": {
+            "space": 9,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size72}"
+          }
+        },
+        {
+          "if": {
+            "space": 8,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size64}"
+          }
+        },
+        {
+          "if": {
+            "space": 7,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "space": 6,
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "size": "{palette.size.size40}"
+          }
+        },
+        {
+          "if": {
+            "space": 0
+          },
+          "tokens": {
+            "size": "{palette.size.size0}"
+          }
+        }
+      ]
+    }
+  }
+}