@telus-uds/theme-public-mobile 2.24.1 → 2.26.0

package/build/android/theme.json

@@ -6886,8 +6886,8 @@
           "blue": 0.33725,
           "alpha": 1
         },
-        "containerPaddingLeft": 16,
-        "containerPaddingRight": 16,
+        "containerPaddingLeft": 0,
+        "containerPaddingRight": 0,
         "dismissButtonGap": 12,
         "dismissIcon": "PaletteIconMobileXClose",
         "dismissIconColor": {
@@ -7360,7 +7360,7 @@
       "appearances": {
         "size": {
           "type": "variant",
-          "values": ["small", "medium", "large"]
+          "values": ["micro", "small", "medium", "large"]
         },
         "viewport": {
           "description": "The size label for the current screen viewport based on the current screen width",
@@ -7391,6 +7391,26 @@
             "topTextLineHeight": 1.5
           }
         },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "amountFontSize": 36,
+            "bottomTextFontSize": 16,
+            "centsFontSize": 18,
+            "centsLineHeight": 0.975,
+            "currencySymbolFontSize": 18,
+            "currencySymbolLineHeight": 1.2,
+            "rateFontName": "SofiaPro",
+            "rateFontSize": 16,
+            "rateFontWeight": 700,
+            "rateLineHeight": 1.25,
+            "strikeThroughPosition": 16,
+            "topTextFontSize": 16,
+            "topTextLineHeight": 1.5
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -9587,6 +9607,553 @@
         "width": null
       }
     },
+    "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": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "iconColor": {
+              "red": 0.41569,
+              "green": 0.43922,
+              "blue": 0.50196,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "purpose": "success"
+          },
+          "tokens": {
+            "icon": "PaletteIconCheckMark",
+            "iconColor": {
+              "red": 0.16863,
+              "green": 0.5098,
+              "blue": 0.43137,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "purpose": "warning"
+          },
+          "tokens": {
+            "icon": "PaletteIconWarningError",
+            "iconColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "purpose": "error"
+          },
+          "tokens": {
+            "icon": "PaletteIconWarningError",
+            "iconColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "icon": "PaletteIconMobileRewards",
+            "iconColor": {
+              "red": 0.95294,
+              "green": 0.61569,
+              "blue": 0.50196,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low"
+          },
+          "tokens": {
+            "borderRadius": 99,
+            "paddingBottom": 4,
+            "paddingLeft": 12,
+            "paddingRight": 12,
+            "paddingTop": 4
+          }
+        },
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "borderRadius": 99,
+            "iconColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            },
+            "paddingBottom": 4,
+            "paddingLeft": 12,
+            "paddingRight": 12,
+            "paddingTop": 4,
+            "textColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.96078,
+              "green": 0.96078,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 0.96078,
+              "green": 0.96078,
+              "blue": 0.96863,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.91765,
+              "green": 0.95294,
+              "blue": 0.9451,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.16863,
+              "green": 0.5098,
+              "blue": 0.43137,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.16863,
+              "green": 0.5098,
+              "blue": 0.43137,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.91765,
+              "green": 0.95294,
+              "blue": 0.9451,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 0.91765,
+              "green": 0.95294,
+              "blue": 0.9451,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.74902,
+              "green": 0.0902,
+              "blue": 0.13333,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 0.97647,
+              "green": 0.9098,
+              "blue": 0.91373,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.80392,
+              "green": 0.81176,
+              "blue": 0.83529,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.95294,
+              "green": 0.61569,
+              "blue": 0.50196,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95294,
+              "green": 0.61569,
+              "blue": 0.50196,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "low"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.41569,
+              "green": 0.43922,
+              "blue": 0.50196,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "textColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "backgroundGradient": null,
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderRadius": null,
+        "borderWidth": null,
+        "fontName": "SofiaPro",
+        "fontSize": 18,
+        "fontWeight": 400,
+        "icon": "PaletteIconWarningError",
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "iconGradient": null,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0,
+        "textColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "textLineHeight": 1.153
+      }
+    },
     "StepTracker": {
       "appearances": {
         "inverse": {
@@ -12509,7 +13076,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.59.0",
+    "themeTokensVersion": "2.60.0",
     "name": "theme-public-mobile"
   }
 }

package/build/ios/Notification.json

@@ -265,8 +265,8 @@
       "blue": 0.33725,
       "alpha": 1
     },
-    "containerPaddingLeft": 16,
-    "containerPaddingRight": 16,
+    "containerPaddingLeft": 0,
+    "containerPaddingRight": 0,
     "dismissButtonGap": 12,
     "dismissIcon": "PaletteIconMobileXClose",
     "dismissIconColor": {

package/build/ios/PriceLockup.json

@@ -2,7 +2,7 @@
   "appearances": {
     "size": {
       "type": "variant",
-      "values": ["small", "medium", "large"]
+      "values": ["micro", "small", "medium", "large"]
     },
     "viewport": {
       "description": "The size label for the current screen viewport based on the current screen width",
@@ -33,6 +33,26 @@
         "topTextLineHeight": 1.5
       }
     },
+    {
+      "if": {
+        "size": "micro"
+      },
+      "tokens": {
+        "amountFontSize": 36,
+        "bottomTextFontSize": 16,
+        "centsFontSize": 18,
+        "centsLineHeight": 0.975,
+        "currencySymbolFontSize": 18,
+        "currencySymbolLineHeight": 1.2,
+        "rateFontName": "SofiaPro",
+        "rateFontSize": 16,
+        "rateFontWeight": 700,
+        "rateLineHeight": 1.25,
+        "strikeThroughPosition": 16,
+        "topTextFontSize": 16,
+        "topTextLineHeight": 1.5
+      }
+    },
     {
       "if": {
         "size": "small"