@telus-uds/theme-koodo 5.16.1 → 5.17.0

package/theme.json

@@ -3006,7 +3006,18 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}"
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size0}"
           }
         },
         {
@@ -5402,8 +5413,8 @@
         "borderRightWidth": "{palette.border.border1}",
         "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
-        "containerPaddingLeft": "{palette.size.size16}",
-        "containerPaddingRight": "{palette.size.size16}",
+        "containerPaddingLeft": "{palette.size.size0}",
+        "containerPaddingRight": "{palette.size.size0}",
         "dismissButtonGap": "{palette.size.size24}",
         "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.black}",
@@ -5795,11 +5806,34 @@
       "appearances": {
         "size": {
           "type": "variant",
-          "values": ["small", "medium", "large"]
+          "values": ["micro", "small", "medium", "large"]
         },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "amountFontSize": "{palette.fontSize.size24}",
+            "bottomTextFontSize": "{palette.fontSize.size12}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio6to5}",
+            "centsFontSize": "{palette.fontSize.size16}",
+            "centsLineHeight": "{palette.lineHeight.multiply172}",
+            "currencySymbolFontSize": "{palette.fontSize.size16}",
+            "currencySymbolLineHeight": "{palette.lineHeight.multiply172}",
+            "footnoteLinkFontSize": "{palette.fontSize.size12}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio1to1}",
+            "footnoteMarginTop": "{palette.size.size0}",
+            "rateFontSize": "{palette.fontSize.size12}",
+            "rateLineHeight": "{palette.lineHeight.ratio16to2}",
+            "strikeThroughHeight": "{palette.size.size2}",
+            "strikeThroughPosition": "{palette.size.size18}",
+            "topTextFontSize": "{palette.fontSize.size12}",
+            "topTextLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -5809,12 +5843,13 @@
             "centsFontSize": "{palette.fontSize.size20}",
             "centsLineHeight": "{palette.lineHeight.ratio5to4}",
             "currencySymbolFontSize": "{palette.fontSize.size20}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio8to7}",
             "rateFontSize": "{palette.fontSize.size16}",
             "rateLineHeight": "{palette.lineHeight.ratio3to2}",
             "strikeThroughHeight": "{palette.size.size2}",
             "strikeThroughPosition": "{palette.size.size18}",
             "topTextFontSize": "{palette.fontSize.size14}",
-            "topTextLineHeight": "{palette.lineHeight.ratio10to7}"
+            "topTextLineHeight": "{palette.lineHeight.ratio8to7}"
           }
         },
         {
@@ -5827,13 +5862,14 @@
             "centsFontSize": "{palette.fontSize.size24}",
             "centsFontWeight": "{palette.fontWeight.weight600}",
             "currencySymbolFontSize": "{palette.fontSize.size32}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio6to5}",
             "rateFontName": "{palette.fontName.StagSans}",
             "rateFontSize": "{palette.fontSize.size16}",
             "rateFontWeight": "{palette.fontWeight.weight600}",
             "rateLineHeight": "{palette.lineHeight.ratio3to2}",
             "strikeThroughPosition": "{palette.size.size27}",
             "topTextFontSize": "{palette.fontSize.size20}",
-            "topTextLineHeight": "{palette.lineHeight.ratio7to5}"
+            "topTextLineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
@@ -5856,7 +5892,7 @@
         "amountLineHeight": "{palette.lineHeight.ratio1to1}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
         "bottomTextFontSize": "{palette.fontSize.size14}",
-        "bottomTextLineHeight": "{palette.lineHeight.ratio10to7}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio8to7}",
         "bottomTextMarginTop": "{palette.size.size0}",
         "centsFontName": "{palette.fontName.StagSans}",
         "centsFontSize": "{palette.fontSize.size24}",
@@ -5875,7 +5911,7 @@
         "footnoteLinkFontName": "{palette.fontName.StagSans}",
         "footnoteLinkFontSize": "{palette.fontSize.size14}",
         "footnoteLinkFontWeight": "{palette.fontWeight.weight600}",
-        "footnoteLinkLineHeight": "{palette.lineHeight.ratio10to7}",
+        "footnoteLinkLineHeight": "{palette.lineHeight.ratio5to4}",
         "footnoteMarginTop": "{palette.size.size4}",
         "priceMarginBottom": "{palette.size.size0}",
         "rateFontName": "{palette.fontName.StagSans}",
@@ -5888,7 +5924,7 @@
         "topTextFontName": "{palette.fontName.StagSans}",
         "topTextFontSize": "{palette.fontSize.size16}",
         "topTextFontWeight": "{palette.fontWeight.weight700}",
-        "topTextLineHeight": "{palette.lineHeight.ratio3to2}",
+        "topTextLineHeight": "{palette.lineHeight.ratio5to4}",
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
@@ -6569,8 +6605,8 @@
         "iconBackgroundColor": "{palette.color.transparent}",
         "iconColor": "{palette.color.transparent}",
         "inputBackgroundColor": "{palette.color.white}",
-        "inputBorderColor": "{palette.color.white}",
-        "inputBorderWidth": "{palette.border.border2}",
+        "inputBorderColor": "{palette.color.black}",
+        "inputBorderWidth": "{palette.border.border1}",
         "inputOutlineColor": "{palette.color.black}",
         "inputOutlineWidth": "{palette.border.border2}",
         "inputSize": "{palette.size.size20}",
@@ -7372,6 +7408,281 @@
         "width": "{system.size.none}"
       }
     },
+    "Status": {
+      "appearances": {
+        "inverse": {
+          "description": "Inverts the status colors",
+          "type": "variant",
+          "values": [true]
+        },
+        "priority": {
+          "type": "variant",
+          "values": ["default", "low", "high"]
+        },
+        "purpose": {
+          "type": "variant",
+          "values": ["default", "brand", "subtle", "success", "warning", "error", "offer"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "purpose": "brand"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Tooltip}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "success"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CheckCircledFilled}",
+            "iconColor": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "warning"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ExclamationTriangle}",
+            "iconColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "error"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ExclamationOctagon}",
+            "iconColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "icon": "{palette.icon.TagFilled}",
+            "iconColor": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius99}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius99}",
+            "iconColor": "{palette.color.white}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "textColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.successLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.cautionLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dangerLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.white}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "low"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "iconColor": "{palette.color.black}",
+            "textColor": "{palette.color.black}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "backgroundGradient": "{system.gradient.none}",
+        "borderColor": "{system.color.none}",
+        "borderRadius": "{system.radius.none}",
+        "borderWidth": "{system.border.none}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{palette.icon.ToolTipFilled}",
+        "iconColor": "{palette.color.black}",
+        "iconGradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "textColor": "{palette.color.black}",
+        "textLineHeight": "{palette.lineHeight.ratio8to7}"
+      }
+    },
     "StepTracker": {
       "appearances": {
         "inverse": {
@@ -9120,7 +9431,7 @@
             "colour": "brand"
           },
           "tokens": {
-            "color": "{palette.color.pink}"
+            "color": "{palette.color.black}"
           }
         },
         {
@@ -9208,7 +9519,7 @@
             "colour": "alternative2"
           },
           "tokens": {
-            "color": "{palette.color.pinkDark}"
+            "color": "{palette.color.pink}"
           }
         },
         {
@@ -9216,7 +9527,7 @@
             "colour": "alternative3"
           },
           "tokens": {
-            "color": "{palette.color.success}"
+            "color": "{palette.color.pinkDark}"
           }
         }
       ],