@telus-uds/theme-koodo 3.14.0 → 3.16.0

package/theme.json

@@ -25,6 +25,100 @@
         "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": {
@@ -196,45 +290,68 @@
     },
     "Button": {
       "appearances": {
-        "clear": {
-          "description": "Gives a button borders and a transparent background",
+        "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.",
           "type": "variant",
           "values": [true]
         },
         "focus": "{appearances.Button.focus}",
         "hover": "{appearances.Button.hover}",
         "inactive": "{appearances.Button.inactive}",
+        "inverse": {
+          "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.",
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.Button.pressed}",
-        "rank": {
-          "description": "Prominence of the button. Use the default (\"primary\") button style for the main action on a page or in a form, and \"secondary\" style for secondary actions.",
+        "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.",
           "type": "variant",
-          "values": ["secondary"]
+          "values": ["high", "low"]
         },
-        "rounded": {
-          "description": "Gives a button \"pill-style\" rounded sides",
+        "size": {
+          "type": "variant",
+          "values": ["small"]
+        },
+        "text": {
+          "description": "Text variant visually deprioritize the button styles",
           "type": "variant",
           "values": [true]
         },
-        "selected": "{appearances.Button.selected}"
+        "width": {
+          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "type": "variant",
+          "values": ["full"]
+        }
       },
       "rules": [
         {
           "if": {
-            "rounded": true
+            "priority": "high"
           },
           "tokens": {
-            "borderRadius": "{palette.radius.pill32}"
+            "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "clear": true
+            "danger": true
           },
           "tokens": {
-            "backgroundColor": "{system.color.none}",
-            "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}",
-            "color": "{palette.color.mosque}"
+            "borderColor": "{palette.color.trinidad}",
+            "color": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}",
+            "outerBackgroundColor": "{palette.color.transparent}"
           }
         },
         {
@@ -243,153 +360,495 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
             "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "clear": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.none}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidad}",
+            "outerBorderColor": "{palette.color.trinidad}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.none}"
+            "backgroundColor": "{palette.color.trinidadDark}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.whiteDark}",
+            "borderColor": "{palette.color.whiteDark}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
+            "inverse": true,
             "pressed": true
           },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "priority": "high"
+          },
           "tokens": {
             "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
             "borderColor": "{palette.color.mosque}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size2}"
           }
         },
         {
           "if": {
-            "focus": true
+            "danger": true,
+            "pressed": true,
+            "priority": "high"
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "rank": "secondary"
+            "hover": true,
+            "inverse": true,
+            "priority": "high"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.blue}",
-            "borderColor": "{palette.color.blue}",
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.whiteDark}",
+            "color": "{palette.color.mosque}"
           }
         },
         {
           "if": {
-            "clear": true,
-            "rank": "secondary"
+            "focus": true,
+            "inverse": true,
+            "priority": "high"
           },
           "tokens": {
             "backgroundColor": "{palette.color.white}",
-            "borderColor": "{palette.color.blue}",
-            "color": "{palette.color.blue}"
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.trinidad}",
+            "color": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.silver}",
+            "color": "{palette.color.dove}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "width": "full"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "minWidth": "{system.size.zero}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "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.silver}",
+            "borderColor": "{palette.color.silver}",
+            "borderWidth": "{palette.border.none}",
+            "color": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "text": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.chathamsBlue}",
+            "minWidth": "{system.size.zero}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
             "hover": true,
-            "rank": "secondary"
+            "text": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.darkBlue}",
-            "borderColor": "{palette.color.darkBlue}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.chathamsBlueDark}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.chathamsBlue}",
+            "outerBorderColor": "{palette.color.chathamsBlue}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.trinidad}",
+            "outerBorderColor": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosqueDark}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": null,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.chathamsBlueDark}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "low",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.chathamsBlueDark}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "hover": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidadDark}"
           }
         },
         {
           "if": {
             "pressed": true,
-            "rank": "secondary"
+            "text": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.onahau}",
-            "borderColor": "{palette.color.onahau}",
-            "color": "{palette.color.white}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "rank": "secondary"
+            "pressed": true,
+            "text": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.blue}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
             "pressed": true,
-            "rank": "secondary"
+            "priority": "high",
+            "text": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.onahau}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "danger": true,
+            "focus": true,
+            "pressed": true,
+            "text": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity3}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.trinidad}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "selected": true
+            "inactive": true,
+            "text": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
-            "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
             "focus": true,
-            "selected": true
+            "inverse": true,
+            "text": true
           },
           "tokens": {
-            "outerBorderGap": "{palette.size.size2}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.silver}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.white}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.2}",
-        "lineHeight": "{palette.lineHeight.multiply150}",
-        "minWidth": "{system.size.zero}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "minWidth": "{palette.size.size144}",
         "opacity": "{system.opacity.opaque}",
-        "outerBackgroundColor": "{palette.color.transparent}",
-        "outerBorderColor": "{palette.color.white}",
-        "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size24}",
-        "paddingRight": "{palette.size.size24}",
-        "paddingTop": "{palette.size.size8}",
+        "outerBackgroundColor": "{palette.color.white}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{system.size.none}",
+        "outerBorderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
         "textLine": "{system.textLine.none}",
@@ -911,7 +1370,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}",
@@ -1149,18 +1608,38 @@
         },
         {
           "if": {
-            "decorative": true
+            "decorative": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true,
+            "weight": "thick"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}",
+            "width": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
           },
           "tokens": {
-            "color": "{palette.color.gallery}"
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "inverse": true
+            "inverse": true,
+            "weight": "thick"
           },
           "tokens": {
-            "color": "{palette.color.white}"
+            "color": "{palette.color.white}",
+            "width": "{palette.size.size2}"
           }
         }
       ],
@@ -1231,24 +1710,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}"
           }
         },
         {
@@ -1258,7 +1725,7 @@
           },
           "tokens": {
             "icon": "{palette.icon.CheckCircledFilled}",
-            "iconColor": "{palette.color.bilbao}"
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -1267,29 +1734,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}"
       }
@@ -1518,7 +1985,18 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.darkMosque}",
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosqueDark}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosqueDark}",
             "iconColor": "{palette.color.white}"
           }
         },
@@ -1529,7 +2007,8 @@
           },
           "tokens": {
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border3}"
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -1556,7 +2035,7 @@
         "backgroundColor": "{system.color.transparent}",
         "borderColor": "{palette.color.mosque}",
         "borderRadius": "{system.radius.round}",
-        "borderWidth": "{palette.border.border1}",
+        "borderWidth": "{palette.border.border3}",
         "iconColor": "{palette.color.mosque}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size24}",
@@ -1580,10 +2059,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": {
@@ -1595,12 +2074,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": [true]
+        },
+        "pressed": "{appearances.Link.pressed}",
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
           "type": "variant",
-          "values": ["secondary"]
+          "values": ["micro", "small", "large"]
         }
       },
       "rules": [
@@ -1612,6 +2101,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
@@ -1623,19 +2132,137 @@
         },
         {
           "if": {
-            "rank": "secondary"
+            "pressed": true
+          },
+          "tokens": {
+            "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.blue}"
+            "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.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": {
-            "color": "{palette.color.darkBlue}"
+            "blockFontSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio7to5}",
+            "iconSize": "{palette.size.size24}"
           }
         }
       ],
@@ -1644,7 +2271,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}",
@@ -1653,9 +2280,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}"
       }
@@ -2179,9 +2806,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
-            "color": "{palette.color.white}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -2189,9 +2814,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}"
           }
         },
         {
@@ -2199,22 +2824,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}",
@@ -2224,10 +2859,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}"
@@ -2237,16 +2872,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}"
       }
     },
@@ -2316,7 +2951,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2324,7 +2959,7 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.texas}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2332,7 +2967,8 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.silver}",
+            "itemIconColor": "{palette.color.black}"
           }
         }
       ],
@@ -2340,25 +2976,26 @@
         "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}",
+        "itemFontColor": "{palette.color.black}",
         "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": {