@telus-uds/theme-koodo 3.13.0 → 3.15.0

package/theme.json

@@ -25,10 +25,105 @@
         "thickness": "{palette.border.border4}"
       }
     },
+    "Badge": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "outline": {
+          "type": "variant",
+          "values": [true]
+        },
+        "purpose": {
+          "type": "variant",
+          "values": ["offer", "editorial"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "outline": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.carouselPink}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.mosque}",
+            "color": "{palette.color.mosque}",
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.onahau}",
+            "color": "{palette.color.black}",
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.onahau}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.carouselPink}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.pill32}",
+        "borderWidth": "{palette.border.border2}",
+        "color": "{palette.color.flirt}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "gradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size2}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size2}"
+      }
+    },
     "Box": {
       "appearances": {
         "background": {
           "description": "Background colour of box. White if not specified.",
+          "type": "variant",
           "values": [
             "lightest",
             "lighter",
@@ -869,8 +964,36 @@
             "focus": true
           },
           "tokens": {
-            "inputOutlineColor": "{palette.color.silver}",
-            "inputOutlineWidth": "{palette.border.border2}"
+            "inputOutlineColor": "{palette.color.chathamsBlue}",
+            "inputOutlineWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "inputOutlineColor": "{palette.color.chathamsBlue}",
+            "inputOutlineWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "inputBackgroundColor": "{palette.color.silver}",
+            "inputBorderColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "checked": true,
+            "inactive": true
+          },
+          "tokens": {
+            "iconBackgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.white}"
           }
         }
       ],
@@ -882,7 +1005,7 @@
         "icon": "{palette.icon.Check}",
         "iconBackgroundColor": "{palette.color.white}",
         "iconColor": "{palette.color.mosque}",
-        "iconSize": "{palette.size.size16}",
+        "iconSize": "{palette.size.size20}",
         "inputBackgroundColor": "{palette.color.white}",
         "inputBorderColor": "{palette.color.mosque}",
         "inputBorderRadius": "{palette.radius.none}",
@@ -1202,24 +1325,12 @@
         "validation": "{appearances.Feedback.validation}"
       },
       "rules": [
-        {
-          "if": {
-            "validation": "success"
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}",
-            "borderColor": "{palette.color.mintTulip}",
-            "color": "{palette.color.bilbao}"
-          }
-        },
         {
           "if": {
             "validation": "error"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.carouselPink}",
-            "borderColor": "{palette.color.carouselPink}",
-            "color": "{palette.color.trinidad}"
+            "backgroundColor": "{palette.color.piggyPink}"
           }
         },
         {
@@ -1229,7 +1340,7 @@
           },
           "tokens": {
             "icon": "{palette.icon.CheckCircledFilled}",
-            "iconColor": "{palette.color.bilbao}"
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -1238,29 +1349,29 @@
             "validation": "error"
           },
           "tokens": {
-            "icon": "{palette.icon.ExclamationTriangle}",
-            "iconColor": "{palette.color.trinidad}"
+            "icon": "{palette.icon.Caution}",
+            "iconColor": "{palette.color.amaranth}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.gallery}",
-        "borderColor": "{palette.color.silver}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.mortar}",
+        "backgroundColor": "{palette.color.icicle}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.none}",
+        "color": "{palette.color.black}",
         "contentFontSize": "{palette.fontSize.size14}",
         "fontName": "{palette.fontName.StagSans}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.transparent}",
         "iconGap": "{palette.size.size8}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size20}",
         "lineHeight": "{palette.lineHeight.multiply150}",
-        "paddingBottom": "{palette.size.size10}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size10}",
+        "paddingTop": "{palette.size.size12}",
         "space": "{system.integer.2}",
         "titleFontSize": "{palette.fontSize.size16}"
       }
@@ -1450,6 +1561,11 @@
         "focus": "{appearances.Button.focus}",
         "hover": "{appearances.Button.hover}",
         "inactive": "{appearances.Button.inactive}",
+        "password": {
+          "description": "Password masked or not",
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.Button.pressed}"
       },
       "rules": [
@@ -1460,6 +1576,62 @@
           "tokens": {
             "outerBorderGap": "{system.size.zero}"
           }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "password": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.darkMosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "password": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "password": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.silver}"
+          }
         }
       ],
       "tokens": {
@@ -1490,10 +1662,10 @@
         "gap": "{palette.size.size8}",
         "hintColor": "{palette.color.black}",
         "hintFontName": "{palette.fontName.StagSans}",
-        "hintFontSize": "{palette.fontSize.size16}",
+        "hintFontSize": "{palette.fontSize.size14}",
         "hintFontWeight": "{palette.fontWeight.weight400}",
-        "hintLineHeight": "{palette.lineHeight.multiply140}",
-        "lineHeight": "{palette.lineHeight.multiply140}"
+        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
+        "lineHeight": "{palette.lineHeight.multiply150}"
       }
     },
     "InputSupports": {
@@ -1505,12 +1677,22 @@
     },
     "Link": {
       "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": "{appearances.Link.focus}",
         "hover": "{appearances.Link.hover}",
         "iconPosition": "{appearances.Link.iconPosition}",
-        "rank": {
-          "description": "Prominence of the link.",
+        "inverse": {
           "type": "variant",
-          "values": ["secondary"]
+          "values": [true]
+        },
+        "pressed": "{appearances.Link.pressed}",
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+          "type": "variant",
+          "values": ["micro", "small", "large"]
         }
       },
       "rules": [
@@ -1522,6 +1704,26 @@
             "iconSpace": "{system.integer.2}"
           }
         },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
         {
           "if": {
             "hover": true
@@ -1533,19 +1735,137 @@
         },
         {
           "if": {
-            "rank": "secondary"
+            "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blue}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.doveDark}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}",
+            "outerBorderColor": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.silver}"
           }
         },
         {
           "if": {
             "hover": true,
-            "rank": "secondary"
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicleDark}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.darkBlue}"
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "blockFontName": "{palette.fontName.StagSans}",
+            "blockFontSize": "{palette.fontSize.size12}",
+            "blockFontWeight": "{palette.fontWeight.weight600}",
+            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
+            "iconSize": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size14}",
+            "blockLineHeight": "{palette.lineHeight.ratio10to7}",
+            "iconSize": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio7to5}",
+            "iconSize": "{palette.size.size24}"
           }
         }
       ],
@@ -1554,7 +1874,7 @@
         "blockFontName": "{palette.fontName.StagSans}",
         "blockFontSize": "{palette.fontSize.size16}",
         "blockFontWeight": "{palette.fontWeight.weight600}",
-        "blockLineHeight": "{palette.lineHeight.multiply150}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
         "borderRadius": "{palette.radius.radius4}",
         "color": "{palette.color.mosque}",
         "icon": "{system.icon.none}",
@@ -1563,9 +1883,9 @@
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
-        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderGap": "{palette.size.size2}",
         "outerBorderOutline": "{system.borderStyle.none}",
-        "outerBorderWidth": "{palette.border.none}",
+        "outerBorderWidth": "{palette.border.border2}",
         "textLine": "{system.textLine.underline}",
         "textLineStyle": "{system.textLineStyle.solid}"
       }
@@ -2089,9 +2409,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
-            "color": "{palette.color.white}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -2099,9 +2417,9 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderColor": "{palette.color.mosque}",
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.dove}",
+            "iconColor": "{palette.color.dove}"
           }
         },
         {
@@ -2109,22 +2427,32 @@
             "focus": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderColor": "{palette.color.dove}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.white}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.dove}",
+        "borderRadius": "{palette.radius.radius48}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.dove}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{system.icon.none}",
-        "iconColor": "{palette.color.white}",
+        "iconColor": "{palette.color.mosque}",
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.2}",
         "lineHeight": "{palette.lineHeight.multiply150}",
@@ -2134,10 +2462,10 @@
         "outerBorderColor": "{palette.color.white}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size24}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
         "width": "{system.size.none}"
@@ -2147,16 +2475,16 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "backgroundColor": "{palette.color.texas}",
-        "borderColor": "{system.color.none}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius8}",
+        "borderWidth": "{palette.border.border1}",
         "flex": "{system.integer.1}",
         "minWidth": "{system.size.none}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size8}",
         "shadow": "{system.shadow.none}"
       }
     },
@@ -2226,7 +2554,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2234,7 +2562,7 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.texas}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2242,7 +2570,8 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.silver}",
+            "itemIconColor": "{palette.color.black}"
           }
         }
       ],
@@ -2250,25 +2579,25 @@
         "backgroundColor": "{system.color.none}",
         "dividerColor": "{palette.color.silver}",
         "dividerSize": "{palette.border.border1}",
-        "iconMarginTop": "{palette.size.size4}",
+        "iconMarginTop": "{palette.size.size0}",
         "interItemMargin": "{system.size.none}",
         "interItemMarginWithDivider": "{system.size.none}",
         "itemBulletColor": "{palette.color.flirt}",
         "itemBulletContainerAlign": "{system.textAlign.center}",
-        "itemBulletContainerWidth": "{palette.size.size16}",
-        "itemBulletHeight": "{palette.size.size4}",
-        "itemBulletWidth": "{palette.size.size4}",
+        "itemBulletContainerWidth": "{palette.size.size0}",
+        "itemBulletHeight": "{palette.size.size0}",
+        "itemBulletWidth": "{palette.size.size0}",
         "itemFontName": "{palette.fontName.StagSans}",
         "itemFontSize": "{palette.fontSize.size16}",
         "itemFontWeight": "{palette.fontWeight.weight600}",
-        "itemIconColor": "{palette.color.flirt}",
-        "itemIconSize": "{palette.size.size16}",
-        "itemLineHeight": "{palette.lineHeight.multiply130}",
+        "itemIconColor": "{palette.color.mosque}",
+        "itemIconSize": "{palette.size.size24}",
+        "itemLineHeight": "{palette.lineHeight.multiply160}",
         "listGutter": "{palette.size.size10}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size12}",
-        "paddingRight": "{palette.size.size12}",
-        "paddingTop": "{palette.size.size8}"
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size4}",
+        "paddingRight": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size12}"
       }
     },
     "Radio": {
@@ -3171,6 +3500,11 @@
         "focus": "{appearances.TextInput.focus}",
         "hover": "{appearances.TextInput.hover}",
         "inactive": "{appearances.TextInput.inactive}",
+        "password": {
+          "description": "capability that helps masking and unmasking text",
+          "type": "variant",
+          "values": [true]
+        },
         "validation": "{appearances.TextInput.validation}"
       },
       "rules": [
@@ -3248,7 +3582,9 @@
         "paddingBottom": "{palette.size.size10}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size10}"
+        "paddingTop": "{palette.size.size10}",
+        "passwordHideButtonIcon": "{palette.icon.EyeMasked}",
+        "passwordShowButtonIcon": "{palette.icon.EyeUnmasked}"
       }
     },
     "Timeline": {
@@ -3521,6 +3857,11 @@
           "type": "variant",
           "values": ["red"]
         },
+        "compact": {
+          "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
+          "type": "variant",
+          "values": [true]
+        },
         "inverse": {
           "description": "Styles the link white for use on dark backgrounds.",
           "type": "variant",
@@ -3528,7 +3869,20 @@
         },
         "size": {
           "type": "variant",
-          "values": ["small", "large", "h1", "h2", "h3", "h4", "display"]
+          "values": [
+            "micro",
+            "small",
+            "medium",
+            "large",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "display1",
+            "display2"
+          ]
         },
         "viewport": "{appearances.system.viewport}",
         "weight": {
@@ -3562,7 +3916,34 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.multiply160}"
+            "lineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "medium"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size16}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "medium"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
@@ -3571,28 +3952,76 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.multiply140}"
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "micro"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "display1"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size44}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
+          }
+        },
+        {
+          "if": {
+            "size": "display1",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size70}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
           "if": {
-            "size": "display"
+            "size": "display2"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size48}",
+            "fontSize": "{palette.fontSize.size36}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply120}"
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
           "if": {
-            "size": "display",
+            "size": "display2",
             "viewport": ["lg", "xl"]
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size64}",
-            "lineHeight": "{palette.lineHeight.multiply110}"
+            "fontSize": "{palette.fontSize.size54}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
           }
         },
         {
@@ -3601,9 +4030,9 @@
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size44}",
+            "fontSize": "{palette.fontSize.size34}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply120}"
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
@@ -3612,8 +4041,8 @@
             "viewport": ["lg", "xl"]
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size40}",
-            "lineHeight": "{palette.lineHeight.multiply110}"
+            "fontSize": "{palette.fontSize.size44}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
@@ -3623,50 +4052,53 @@
           "tokens": {
             "color": "{palette.color.black}",
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size28}",
+            "fontSize": "{palette.fontSize.size32}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply130}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
           "if": {
-            "size": "h2",
-            "viewport": ["lg", "xl"]
+            "size": "h3"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size28}"
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size24}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
           }
         },
         {
           "if": {
-            "size": "h3"
+            "size": "h4"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
             "fontSize": "{palette.fontSize.size20}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply140}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
           "if": {
-            "size": "h3",
-            "viewport": ["lg", "xl"]
+            "size": "h5"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size24}",
-            "lineHeight": "{palette.lineHeight.multiply130}"
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size18}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
           "if": {
-            "size": "h4"
+            "size": "h6"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
             "fontSize": "{palette.fontSize.size16}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply150}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {