@telus-uds/theme-public-mobile 5.0.0-beta.1 → 5.1.0

package/build/android/Status.json

@@ -5,10 +5,7 @@
       "type": "variant",
       "values": [true]
     },
-    "priority": {
-      "type": "variant",
-      "values": ["default", "low", "high"]
-    },
+    "priority": { "type": "variant", "values": ["default", "low", "high"] },
     "purpose": {
       "type": "variant",
       "values": [
@@ -24,9 +21,7 @@
   },
   "rules": [
     {
-      "if": {
-        "purpose": "brand"
-      },
+      "if": { "purpose": "brand" },
       "tokens": {
         "iconColor": {
           "red": 0.22353,
@@ -37,9 +32,7 @@
       }
     },
     {
-      "if": {
-        "purpose": "subtle"
-      },
+      "if": { "purpose": "subtle" },
       "tokens": {
         "iconColor": {
           "red": 0.41569,
@@ -50,9 +43,7 @@
       }
     },
     {
-      "if": {
-        "purpose": "success"
-      },
+      "if": { "purpose": "success" },
       "tokens": {
         "icon": "PaletteIconCheckMark",
         "iconColor": {
@@ -64,9 +55,7 @@
       }
     },
     {
-      "if": {
-        "purpose": "warning"
-      },
+      "if": { "purpose": "warning" },
       "tokens": {
         "icon": "PaletteIconWarningError",
         "iconColor": {
@@ -78,9 +67,7 @@
       }
     },
     {
-      "if": {
-        "purpose": "error"
-      },
+      "if": { "purpose": "error" },
       "tokens": {
         "icon": "PaletteIconWarningError",
         "iconColor": {
@@ -92,9 +79,7 @@
       }
     },
     {
-      "if": {
-        "purpose": "offer"
-      },
+      "if": { "purpose": "offer" },
       "tokens": {
         "icon": "PaletteIconMobileRewards",
         "iconColor": {
@@ -106,9 +91,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low"
-      },
+      "if": { "priority": "low" },
       "tokens": {
         "borderRadius": 99,
         "paddingBottom": 4,
@@ -118,9 +101,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high"
-      },
+      "if": { "priority": "high" },
       "tokens": {
         "backgroundColor": {
           "red": 0.22353,
@@ -148,10 +129,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "default"
-      },
+      "if": { "priority": "low", "purpose": "default" },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -162,10 +140,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "default"
-      },
+      "if": { "priority": "high", "purpose": "default" },
       "tokens": {
         "backgroundColor": {
           "red": 0.22353,
@@ -176,10 +151,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "brand"
-      },
+      "if": { "priority": "low", "purpose": "brand" },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -190,10 +162,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "brand"
-      },
+      "if": { "priority": "high", "purpose": "brand" },
       "tokens": {
         "backgroundColor": {
           "red": 0.22353,
@@ -204,10 +173,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "subtle"
-      },
+      "if": { "priority": "low", "purpose": "subtle" },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -218,10 +184,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "subtle"
-      },
+      "if": { "priority": "high", "purpose": "subtle" },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -244,10 +207,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "success"
-      },
+      "if": { "priority": "low", "purpose": "success" },
       "tokens": {
         "backgroundColor": {
           "red": 0.91765,
@@ -264,10 +224,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "success"
-      },
+      "if": { "priority": "high", "purpose": "success" },
       "tokens": {
         "backgroundColor": {
           "red": 0.16863,
@@ -290,10 +247,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "warning"
-      },
+      "if": { "priority": "low", "purpose": "warning" },
       "tokens": {
         "backgroundColor": {
           "red": 0.97647,
@@ -310,10 +264,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "warning"
-      },
+      "if": { "priority": "high", "purpose": "warning" },
       "tokens": {
         "backgroundColor": {
           "red": 0.74902,
@@ -336,10 +287,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "error"
-      },
+      "if": { "priority": "low", "purpose": "error" },
       "tokens": {
         "backgroundColor": {
           "red": 0.97647,
@@ -356,10 +304,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "error"
-      },
+      "if": { "priority": "high", "purpose": "error" },
       "tokens": {
         "backgroundColor": {
           "red": 0.74902,
@@ -382,10 +327,7 @@
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "purpose": "offer"
-      },
+      "if": { "priority": "low", "purpose": "offer" },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -402,10 +344,7 @@
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "purpose": "offer"
-      },
+      "if": { "priority": "high", "purpose": "offer" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95294,
@@ -428,35 +367,15 @@
       }
     },
     {
-      "if": {
-        "inverse": true
-      },
+      "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
-        }
+        "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"
-      },
+      "if": { "inverse": true, "priority": "low" },
       "tokens": {
         "backgroundColor": {
           "red": 0.22353,
@@ -464,25 +383,12 @@
           "blue": 0.33725,
           "alpha": 1
         },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "textColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "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"
-      },
+      "if": { "inverse": true, "priority": "high" },
       "tokens": {
         "backgroundColor": {
           "red": 0.41569,
@@ -490,35 +396,15 @@
           "blue": 0.50196,
           "alpha": 1
         },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "textColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "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
-    },
+    "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "backgroundGradient": null,
-    "borderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "borderRadius": null,
     "borderWidth": null,
     "fontName": "SofiaPro",

package/build/android/StepTracker.json

@@ -1,14 +1,16 @@
 {
   "appearances": {
-    "inverse": {
-      "description": "Styles the step tracker for using on dark backgrounds.",
+    "floating": {
+      "description": "Compact dot-style indicators (no brand styling; falls back to circular dots).",
       "type": "variant",
       "values": [true]
     },
-    "style": {
+    "inverse": {
+      "description": "Styles the step tracker for using on dark backgrounds.",
       "type": "variant",
-      "values": ["default", "bar"]
+      "values": [true]
     },
+    "style": { "type": "variant", "values": ["default", "bar"] },
     "viewport": {
       "description": "The size label for the current screen viewport based on the current screen width",
       "values": ["xs", "sm", "md", "lg", "xl"],
@@ -17,43 +19,21 @@
   },
   "rules": [
     {
-      "if": {
-        "viewport": ["lg", "xl"]
-      },
-      "tokens": {
-        "showStepLabel": true,
-        "showStepTrackerLabel": false
-      }
+      "if": { "viewport": ["lg", "xl"] },
+      "tokens": { "showStepLabel": true, "showStepTrackerLabel": false }
     },
     {
-      "if": {
-        "inverse": true
-      },
+      "if": { "inverse": true },
       "tokens": {
-        "connectorColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "connectorColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "connectorCompletedColor": {
           "red": 1,
           "green": 1,
           "blue": 1,
           "alpha": 1
         },
-        "knobBackgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "knobBorderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "knobBackgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "knobBorderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "knobCompletedBackgroundColor": {
           "red": 0,
           "green": 0,
@@ -84,37 +64,14 @@
           "blue": 1,
           "alpha": 1
         },
-        "labelColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "labelCurrentColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "labelColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
+        "labelCurrentColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
-    {
-      "if": {
-        "style": "bar"
-      },
-      "tokens": {
-        "barGap": 4,
-        "barHeight": 8
-      }
-    }
+    { "if": { "style": "bar" }, "tokens": { "barGap": 4, "barHeight": 8 } }
   ],
   "tokens": {
-    "barBackgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0.1
-    },
+    "barBackgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.1 },
     "barCompletedBackgroundColor": {
       "red": 0.22353,
       "green": 0.25098,
@@ -130,12 +87,7 @@
     "barGap": null,
     "barHeight": null,
     "completedIcon": null,
-    "completedIconColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "completedIconColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "completedIconSize": null,
     "connectorColor": {
       "red": 0.22353,
@@ -156,12 +108,8 @@
     "containerPaddingLeft": null,
     "containerPaddingRight": null,
     "containerPaddingTop": null,
-    "knobBackgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "knobAnimatePill": false,
+    "knobBackgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "knobBorderColor": {
       "red": 0.22353,
       "green": 0.25098,
@@ -183,6 +131,8 @@
     },
     "knobCompletedPaddingLeft": 0,
     "knobCompletedPaddingTop": 0,
+    "knobCompletedRadius": null,
+    "knobCompletedWidth": null,
     "knobCurrentBackgroundColor": {
       "red": 0.22353,
       "green": 0.25098,

package/build/android/StoryCard.json

@@ -8,9 +8,7 @@
   },
   "rules": [
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.80392,
@@ -22,12 +20,7 @@
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "borderColor": {
       "red": 0.80392,
       "green": 0.81176,
@@ -42,12 +35,7 @@
     "contentJustifyContent": "flex-start",
     "flex": 1,
     "minWidth": 0,
-    "outerBorderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "outerBorderGap": 0,
     "outerBorderWidth": 0,
     "paddingBottom": 0,

package/build/android/TabBar.json

@@ -8,13 +8,8 @@
   },
   "rules": [
     {
-      "if": {
-        "pressed": true
-      },
-      "tokens": {
-        "paddingBottom": 0,
-        "paddingTop": 0
-      }
+      "if": { "pressed": true },
+      "tokens": { "paddingBottom": 0, "paddingTop": 0 }
     }
   ],
   "tokens": {

package/build/android/TabBarItem.json

@@ -23,9 +23,7 @@
   },
   "rules": [
     {
-      "if": {
-        "focus": true
-      },
+      "if": { "focus": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.96078,
@@ -49,16 +47,9 @@
       }
     },
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.80392,
           "green": 0.81176,
@@ -74,14 +65,7 @@
         "iconSize": 22
       }
     },
-    {
-      "if": {
-        "hover": true
-      },
-      "tokens": {
-        "iconSize": 26
-      }
-    }
+    { "if": { "hover": true }, "tokens": { "iconSize": 26 } }
   ],
   "tokens": {
     "activeColor": {
@@ -90,19 +74,9 @@
       "blue": 0.33725,
       "alpha": 1
     },
-    "backgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "borderRadius": 4,
-    "color": {
-      "red": 0.41569,
-      "green": 0.43922,
-      "blue": 0.50196,
-      "alpha": 1
-    },
+    "color": { "red": 0.41569, "green": 0.43922, "blue": 0.50196, "alpha": 1 },
     "fontName": "SofiaPro",
     "fontWeight": 400,
     "iconColor": {