@telus-uds/theme-public-mobile 2.25.0 → 2.27.0

package/theme.json

@@ -4947,7 +4947,7 @@
         }
       ],
       "tokens": {
-        "backdropColor": "{palette.color.sand10}",
+        "backdropColor": "{palette.color.overlay}",
         "backdropOpacity": "{system.opacity.opaque}",
         "backgroundColor": "{palette.color.white}",
         "borderColor": "{palette.color.white}",
@@ -5382,13 +5382,14 @@
         "itemBulletHeight": "{palette.size.size4}",
         "itemBulletTextAlign": "{system.textAlign.right}",
         "itemBulletWidth": "{palette.size.size4}",
-        "itemColor": "{palette.color.slate100}",
+        "itemColor": "{system.color.none}",
         "itemFontName": "{palette.fontName.SofiaPro}",
         "itemFontSize": "{palette.fontSize.size18}",
         "itemFontWeight": "{palette.fontWeight.weight400}",
         "itemLineHeight": "{palette.lineHeight.ratio14to9}",
         "itemMarginTop": "{palette.size.size0}",
         "itemPaddingTop": "{palette.size.size0}",
+        "itemTextColor": "{palette.color.slate100}",
         "listGutter": "{palette.size.size8}"
       }
     },
@@ -5736,12 +5737,12 @@
       "rules": [
         {
           "if": {
-            "size": "large",
-            "viewport": ["lg", "xl"]
+            "size": "large"
           },
           "tokens": {
             "amountFontSize": "{palette.fontSize.size72}",
-            "bottomTextFontSize": "{palette.fontSize.size20}",
+            "bottomTextFontSize": "{palette.fontSize.size18}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio14to9}",
             "centsFontSize": "{palette.fontSize.size48}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size48}",
@@ -5752,8 +5753,20 @@
             "rateLineHeight": "{palette.lineHeight.ratio5to4}",
             "strikeThroughHeight": "{palette.size.size3}",
             "strikeThroughPosition": "{palette.size.size33}",
+            "topTextFontSize": "{palette.fontSize.size18}",
+            "topTextLineHeight": "{palette.lineHeight.ratio14to9}"
+          }
+        },
+        {
+          "if": {
+            "size": "large",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "bottomTextFontSize": "{palette.fontSize.size20}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio7to5}",
             "topTextFontSize": "{palette.fontSize.size20}",
-            "topTextLineHeight": "{palette.lineHeight.ratio3to2}"
+            "topTextLineHeight": "{palette.lineHeight.ratio7to5}"
           }
         },
         {
@@ -5763,6 +5776,7 @@
           "tokens": {
             "amountFontSize": "{palette.fontSize.size36}",
             "bottomTextFontSize": "{palette.fontSize.size16}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
             "centsFontSize": "{palette.fontSize.size18}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size18}",
@@ -5783,6 +5797,7 @@
           "tokens": {
             "amountFontSize": "{palette.fontSize.size36}",
             "bottomTextFontSize": "{palette.fontSize.size16}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
             "centsFontSize": "{palette.fontSize.size18}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size18}",
@@ -5805,7 +5820,7 @@
         "amountLineHeight": "{palette.lineHeight.multiply19}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
         "bottomTextFontSize": "{palette.fontSize.size18}",
-        "bottomTextLineHeight": "{palette.lineHeight.ratio8to5}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio14to9}",
         "bottomTextMarginTop": "{palette.size.size0}",
         "centsFontName": "{palette.fontName.BystanderSans}",
         "centsFontSize": "{palette.fontSize.size20}",
@@ -5837,7 +5852,7 @@
         "topTextFontName": "{palette.fontName.SofiaPro}",
         "topTextFontSize": "{palette.fontSize.size18}",
         "topTextFontWeight": "{palette.fontWeight.weight700}",
-        "topTextLineHeight": "{palette.lineHeight.ratio3to2}",
+        "topTextLineHeight": "{palette.lineHeight.ratio14to9}",
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
@@ -7266,6 +7281,295 @@
         "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.slate100}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.slate75}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "success"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CheckMark}",
+            "iconColor": "{palette.color.success100}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "warning"
+          },
+          "tokens": {
+            "icon": "{palette.icon.WarningError}",
+            "iconColor": "{palette.color.danger100}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "error"
+          },
+          "tokens": {
+            "icon": "{palette.icon.WarningError}",
+            "iconColor": "{palette.color.danger100}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "icon": "{palette.icon.MobileRewards}",
+            "iconColor": "{palette.color.apricot100}"
+          }
+        },
+        {
+          "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.slate100}",
+            "borderRadius": "{palette.radius.radius99}",
+            "iconColor": "{palette.color.slate25}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}",
+            "textColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate25}",
+            "iconColor": "{palette.color.slate5}",
+            "textColor": "{palette.color.slate5}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.success10}",
+            "iconColor": "{palette.color.success100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.success100}",
+            "iconColor": "{palette.color.success10}",
+            "textColor": "{palette.color.success10}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger10}",
+            "iconColor": "{palette.color.danger100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger100}",
+            "iconColor": "{palette.color.danger10}",
+            "textColor": "{palette.color.danger10}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger10}",
+            "iconColor": "{palette.color.danger100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger100}",
+            "iconColor": "{palette.color.danger10}",
+            "textColor": "{palette.color.danger10}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate25}",
+            "iconColor": "{palette.color.apricot100}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.apricot100}",
+            "iconColor": "{palette.color.slate100}",
+            "textColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "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.slate100}",
+            "iconColor": "{palette.color.white}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate75}",
+            "iconColor": "{palette.color.white}",
+            "textColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "backgroundGradient": "{system.gradient.none}",
+        "borderColor": "{system.color.none}",
+        "borderRadius": "{system.radius.none}",
+        "borderWidth": "{system.border.none}",
+        "fontName": "{palette.fontName.SofiaPro}",
+        "fontSize": "{palette.fontSize.size18}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{palette.icon.WarningError}",
+        "iconColor": "{palette.color.slate100}",
+        "iconGradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "textColor": "{palette.color.slate100}",
+        "textLineHeight": "{palette.lineHeight.ratio23to20}"
+      }
+    },
     "StepTracker": {
       "appearances": {
         "inverse": {