@telus-uds/theme-allium 8.0.0-beta.1 → 8.1.0

package/build/android/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,10 +44,7 @@
   },
   "rules": [
     {
-      "if": {
-        "interactive": true,
-        "isControl": true
-      },
+      "if": { "interactive": true, "isControl": true },
       "tokens": {
         "borderColor": {
           "red": 0.69804,
@@ -68,11 +56,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": true,
-        "selected": true
-      },
+      "if": { "interactive": true, "isControl": true, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -108,49 +92,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": 12 } },
     {
-      "if": {
-        "borderRadius": "none"
-      },
-      "tokens": {
-        "borderRadius": 0
-      }
-    },
-    {
-      "if": {
-        "borderRadius": "small"
-      },
-      "tokens": {
-        "borderRadius": 6
-      }
-    },
-    {
-      "if": {
-        "borderRadius": "large"
-      },
-      "tokens": {
-        "borderRadius": 12
-      }
-    },
-    {
-      "if": {
-        "style": "grid"
-      },
+      "if": { "style": "grid" },
       "tokens": {
         "backgroundColor": {
           "red": 0.98039,
@@ -162,9 +114,7 @@
       }
     },
     {
-      "if": {
-        "style": "light"
-      },
+      "if": { "style": "light" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -175,9 +125,7 @@
       }
     },
     {
-      "if": {
-        "style": "lighter"
-      },
+      "if": { "style": "lighter" },
       "tokens": {
         "backgroundColor": {
           "red": 0.98039,
@@ -188,30 +136,16 @@
       }
     },
     {
-      "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,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "backgroundGradient": {
           "type": "linear",
           "angle": 135,
@@ -247,9 +181,7 @@
       }
     },
     {
-      "if": {
-        "style": "darker"
-      },
+      "if": { "style": "darker" },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -261,9 +193,7 @@
       }
     },
     {
-      "if": {
-        "style": "darkest"
-      },
+      "if": { "style": "darkest" },
       "tokens": {
         "backgroundColor": {
           "red": 0.17255,
@@ -275,9 +205,7 @@
       }
     },
     {
-      "if": {
-        "style": "feature"
-      },
+      "if": { "style": "feature" },
       "tokens": {
         "borderColor": {
           "red": 0.29412,
@@ -314,9 +242,7 @@
       }
     },
     {
-      "if": {
-        "style": "feature2"
-      },
+      "if": { "style": "feature2" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -334,9 +260,7 @@
       }
     },
     {
-      "if": {
-        "style": "feature3"
-      },
+      "if": { "style": "feature3" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -354,9 +278,7 @@
       }
     },
     {
-      "if": {
-        "style": "feature4"
-      },
+      "if": { "style": "feature4" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -374,9 +296,7 @@
       }
     },
     {
-      "if": {
-        "style": "warning"
-      },
+      "if": { "style": "warning" },
       "tokens": {
         "backgroundColor": {
           "red": 1,
@@ -394,16 +314,9 @@
       }
     },
     {
-      "if": {
-        "style": "error"
-      },
+      "if": { "style": "error" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderColor": {
           "red": 0.88235,
           "green": 0.13725,
@@ -414,9 +327,7 @@
       }
     },
     {
-      "if": {
-        "style": "success"
-      },
+      "if": { "style": "success" },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -434,9 +345,7 @@
       }
     },
     {
-      "if": {
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 48,
         "paddingLeft": 32,
@@ -445,10 +354,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "interactive": true, "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 45,
         "paddingLeft": 29,
@@ -457,9 +363,7 @@
       }
     },
     {
-      "if": {
-        "padding": "narrow"
-      },
+      "if": { "padding": "narrow" },
       "tokens": {
         "paddingBottom": 24,
         "paddingLeft": 16,
@@ -468,10 +372,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "narrow"
-      },
+      "if": { "interactive": true, "padding": "narrow" },
       "tokens": {
         "paddingBottom": 21,
         "paddingLeft": 13,
@@ -480,10 +381,7 @@
       }
     },
     {
-      "if": {
-        "padding": "narrow",
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "padding": "narrow", "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 32,
         "paddingLeft": 16,
@@ -505,9 +403,7 @@
       }
     },
     {
-      "if": {
-        "padding": "intermediate"
-      },
+      "if": { "padding": "intermediate" },
       "tokens": {
         "paddingBottom": 24,
         "paddingLeft": 24,
@@ -516,10 +412,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "intermediate"
-      },
+      "if": { "interactive": true, "padding": "intermediate" },
       "tokens": {
         "paddingBottom": 21,
         "paddingLeft": 21,
@@ -528,10 +421,7 @@
       }
     },
     {
-      "if": {
-        "padding": "intermediate",
-        "viewport": ["md", "lg", "xl"]
-      },
+      "if": { "padding": "intermediate", "viewport": ["md", "lg", "xl"] },
       "tokens": {
         "paddingBottom": 32,
         "paddingLeft": 32,
@@ -553,9 +443,7 @@
       }
     },
     {
-      "if": {
-        "padding": "compact"
-      },
+      "if": { "padding": "compact" },
       "tokens": {
         "paddingBottom": 16,
         "paddingLeft": 16,
@@ -564,10 +452,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "padding": "compact"
-      },
+      "if": { "interactive": true, "padding": "compact" },
       "tokens": {
         "paddingBottom": 13,
         "paddingLeft": 13,
@@ -576,9 +461,7 @@
       }
     },
     {
-      "if": {
-        "padding": "custom"
-      },
+      "if": { "padding": "custom" },
       "tokens": {
         "paddingBottom": 0,
         "paddingLeft": 0,
@@ -587,61 +470,29 @@
       }
     },
     {
-      "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": 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.1
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.1 },
         "borderColor": {
           "red": 0.8902,
           "green": 0.90196,
@@ -652,11 +503,7 @@
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "isControl": false,
-        "selected": true
-      },
+      "if": { "interactive": true, "isControl": false, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.95686,
@@ -674,58 +521,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.2
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.2 }
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true,
-        "style": "darker"
-      },
+      "if": { "interactive": true, "pressed": true, "style": "darker" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.2
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.2 }
       }
     },
     {
-      "if": {
-        "interactive": true,
-        "pressed": true,
-        "style": "darkest"
-      },
+      "if": { "interactive": true, "pressed": true, "style": "darkest" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.2
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.2 }
       }
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "backgroundGradient": null,
     "borderColor": {
       "red": 0.8902,
@@ -761,12 +576,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,
@@ -776,12 +586,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/android/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/android/Carousel.json

@@ -8,28 +8,13 @@
   },
   "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
-    },
-    "iconBackgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+    "iconBackgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "nextIcon": "PaletteIconArrowRight",
     "pauseIcon": "PaletteIconPause",
     "playIcon": "PaletteIconPlayVideo",
@@ -37,6 +22,7 @@
     "showPanelNavigation": true,
     "showPanelTabs": true,
     "showPreviousNextNavigation": true,
+    "showStepTrackerLabel": true,
     "spaceBetweenSlideAndPanelNavigation": 32,
     "spaceBetweenSlideAndPreviousNextNavigation": 24,
     "stepTrackerCurrentBackgroundColor": {