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

package/build/ios/Card.json

@@ -1,17 +1,8 @@
 {
   "appearances": {
-    "borderRadius": {
-      "type": "variant",
-      "values": ["none", "small", "large"]
-    },
-    "interactive": {
-      "type": "variant",
-      "values": [true]
-    },
-    "isControl": {
-      "type": "variant",
-      "values": [true, false]
-    },
+    "borderRadius": { "type": "variant", "values": ["none", "small", "large"] },
+    "interactive": { "type": "variant", "values": [true] },
+    "isControl": { "type": "variant", "values": [true, false] },
     "padding": {
       "type": "variant",
       "values": ["narrow", "intermediate", "compact", "custom"]
@@ -53,23 +44,13 @@
   },
   "rules": [
     {
-      "if": {
-        "interactive": true
-      },
+      "if": { "interactive": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": true
-      },
+      "if": { "interactive": true, "isControl": true },
       "tokens": {
         "borderColor": {
           "red": 0.80392,
@@ -81,11 +62,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": true,
-        "selected": true
-      },
+      "if": { "interactive": true, "isControl": true, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.96078,
@@ -121,49 +98,17 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": true,
-        "pressed": false
-      },
+      "if": { "interactive": true, "isControl": true, "pressed": false },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 2
       }
     },
+    { "if": { "borderRadius": "none" }, "tokens": { "borderRadius": 0 } },
+    { "if": { "borderRadius": "small" }, "tokens": { "borderRadius": 6 } },
+    { "if": { "borderRadius": "large" }, "tokens": { "borderRadius": 6 } },
     {
-      "if": {
-        "borderRadius": "none"
-      },
-      "tokens": {
-        "borderRadius": 0
-      }
-    },
-    {
-      "if": {
-        "borderRadius": "small"
-      },
-      "tokens": {
-        "borderRadius": 6
-      }
-    },
-    {
-      "if": {
-        "borderRadius": "large"
-      },
-      "tokens": {
-        "borderRadius": 6
-      }
-    },
-    {
-      "if": {
-        "style": "grid"
-      },
+      "if": { "style": "grid" },
       "tokens": {
         "backgroundColor": {
           "red": 0.98824,
@@ -175,9 +120,7 @@
       }
     },
     {
-      "if": {
-        "style": "light"
-      },
+      "if": { "style": "light" },
       "tokens": {
         "backgroundColor": {
           "red": 0.99216,
@@ -194,9 +137,7 @@
       }
     },
     {
-      "if": {
-        "style": "lighter"
-      },
+      "if": { "style": "lighter" },
       "tokens": {
         "backgroundColor": {
           "red": 0.98824,
@@ -213,23 +154,14 @@
       }
     },
     {
-      "if": {
-        "style": "lightest"
-      },
+      "if": { "style": "lightest" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 0
       }
     },
     {
-      "if": {
-        "style": "dark"
-      },
+      "if": { "style": "dark" },
       "tokens": {
         "backgroundColor": {
           "red": 0.22353,
@@ -241,9 +173,7 @@
       }
     },
     {
-      "if": {
-        "style": "darker"
-      },
+      "if": { "style": "darker" },
       "tokens": {
         "backgroundColor": {
           "red": 0.16863,
@@ -255,9 +185,7 @@
       }
     },
     {
-      "if": {
-        "style": "darkest"
-      },
+      "if": { "style": "darkest" },
       "tokens": {
         "backgroundColor": {
           "red": 0.16863,
@@ -269,16 +197,9 @@
       }
     },
     {
-      "if": {
-        "style": "feature"
-      },
+      "if": { "style": "feature" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderColor": {
           "red": 0.95294,
           "green": 0.61569,
@@ -288,16 +209,9 @@
       }
     },
     {
-      "if": {
-        "style": "feature2"
-      },
+      "if": { "style": "feature2" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderColor": {
           "red": 0.22353,
           "green": 0.25098,
@@ -307,16 +221,9 @@
       }
     },
     {
-      "if": {
-        "style": "feature3"
-      },
+      "if": { "style": "feature3" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderColor": {
           "red": 0.22353,
           "green": 0.25098,
@@ -326,16 +233,9 @@
       }
     },
     {
-      "if": {
-        "style": "feature4"
-      },
+      "if": { "style": "feature4" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderColor": {
           "red": 0.22353,
           "green": 0.25098,
@@ -345,9 +245,7 @@
       }
     },
     {
-      "if": {
-        "style": "warning"
-      },
+      "if": { "style": "warning" },
       "tokens": {
         "backgroundColor": {
           "red": 0.97647,
@@ -364,9 +262,7 @@
       }
     },
     {
-      "if": {
-        "style": "error"
-      },
+      "if": { "style": "error" },
       "tokens": {
         "backgroundColor": {
           "red": 0.97647,
@@ -383,9 +279,7 @@
       }
     },
     {
-      "if": {
-        "style": "success"
-      },
+      "if": { "style": "success" },
       "tokens": {
         "backgroundColor": {
           "red": 0.91765,
@@ -402,9 +296,7 @@
       }
     },
     {
-      "if": {
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 48,
         "paddingLeft": 32,
@@ -413,10 +305,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "interactive": true, "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 45,
         "paddingLeft": 29,
@@ -425,9 +314,7 @@
       }
     },
     {
-      "if": {
-        "padding": "narrow"
-      },
+      "if": { "padding": "narrow" },
       "tokens": {
         "paddingBottom": 24,
         "paddingLeft": 16,
@@ -436,10 +323,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "narrow"
-      },
+      "if": { "interactive": true, "padding": "narrow" },
       "tokens": {
         "paddingBottom": 21,
         "paddingLeft": 13,
@@ -448,10 +332,7 @@
       }
     },
     {
-      "if": {
-        "padding": "narrow",
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "padding": "narrow", "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 32,
         "paddingLeft": 16,
@@ -473,9 +354,7 @@
       }
     },
     {
-      "if": {
-        "padding": "intermediate"
-      },
+      "if": { "padding": "intermediate" },
       "tokens": {
         "paddingBottom": 24,
         "paddingLeft": 24,
@@ -484,10 +363,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "intermediate"
-      },
+      "if": { "interactive": true, "padding": "intermediate" },
       "tokens": {
         "paddingBottom": 21,
         "paddingLeft": 21,
@@ -496,10 +372,7 @@
       }
     },
     {
-      "if": {
-        "padding": "intermediate",
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "padding": "intermediate", "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 32,
         "paddingLeft": 32,
@@ -521,9 +394,7 @@
       }
     },
     {
-      "if": {
-        "padding": "compact"
-      },
+      "if": { "padding": "compact" },
       "tokens": {
         "paddingBottom": 16,
         "paddingLeft": 16,
@@ -532,10 +403,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "compact"
-      },
+      "if": { "interactive": true, "padding": "compact" },
       "tokens": {
         "paddingBottom": 13,
         "paddingLeft": 13,
@@ -544,9 +412,7 @@
       }
     },
     {
-      "if": {
-        "padding": "custom"
-      },
+      "if": { "padding": "custom" },
       "tokens": {
         "paddingBottom": 0,
         "paddingLeft": 0,
@@ -555,48 +421,23 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": false,
-        "pressed": false
-      },
+      "if": { "interactive": true, "isControl": false, "pressed": false },
       "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 2
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": false
-      },
+      "if": { "interactive": true, "pressed": false },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 2
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true
-      },
+      "if": { "interactive": true, "pressed": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0.2
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.2 },
         "borderColor": {
           "red": 0.80392,
           "green": 0.81176,
@@ -607,11 +448,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": false,
-        "selected": true
-      },
+      "if": { "interactive": true, "isControl": false, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.96078,
@@ -629,58 +466,26 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true,
-        "style": "dark"
-      },
+      "if": { "interactive": true, "pressed": true, "style": "dark" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 }
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true,
-        "style": "darker"
-      },
+      "if": { "interactive": true, "pressed": true, "style": "darker" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 }
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true,
-        "style": "darkest"
-      },
+      "if": { "interactive": true, "pressed": true, "style": "darkest" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 }
       }
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "backgroundGradient": null,
     "borderColor": {
       "red": 0.80392,
@@ -716,12 +521,7 @@
       "blue": 0.96863,
       "alpha": 1
     },
-    "inputBorderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "inputBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "inputBorderRadius": 4,
     "inputBorderWidth": 0,
     "inputHeight": 32,
@@ -731,12 +531,7 @@
       "offsetY": 2,
       "blur": 2,
       "spread": 0,
-      "color": {
-        "red": 0,
-        "green": 0,
-        "blue": 0,
-        "alpha": 0.1
-      }
+      "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.1 }
     },
     "inputWidth": 32,
     "marginBottom": 0,

package/build/ios/CardGroup.json

@@ -18,23 +18,12 @@
   },
   "rules": [
     {
-      "if": {
-        "viewport": ["lg", "xl"]
-      },
-      "tokens": {
-        "direction": "row",
-        "space": 5
-      }
+      "if": { "viewport": ["lg", "xl"] },
+      "tokens": { "direction": "row", "space": 5 }
     },
     {
-      "if": {
-        "viewport": ["xs", "sm", "md"]
-      },
-      "tokens": {
-        "direction": "column",
-        "fieldSpace": 3,
-        "space": 3
-      }
+      "if": { "viewport": ["xs", "sm", "md"] },
+      "tokens": { "direction": "column", "fieldSpace": 3, "space": 3 }
     }
   ],
   "tokens": {

package/build/ios/Carousel.json

@@ -8,22 +8,12 @@
   },
   "rules": [
     {
-      "if": {
-        "viewport": ["xs", "sm"]
-      },
-      "tokens": {
-        "showPanelTabs": false,
-        "showPreviousNextNavigation": false
-      }
+      "if": { "viewport": ["xs", "sm"] },
+      "tokens": { "showPanelTabs": false, "showPreviousNextNavigation": false }
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "iconBackgroundColor": {
       "red": 0.99608,
       "green": 0.99608,
@@ -37,6 +27,7 @@
     "showPanelNavigation": true,
     "showPanelTabs": true,
     "showPreviousNextNavigation": true,
+    "showStepTrackerLabel": true,
     "spaceBetweenSlideAndPanelNavigation": 32,
     "spaceBetweenSlideAndPreviousNextNavigation": 24,
     "stepTrackerCurrentBackgroundColor": {