@telus-uds/theme-allium 8.0.0 → 8.1.0

package/build/ios/Button.json

@@ -25,10 +25,7 @@
       "type": "variant",
       "values": ["high", "low"]
     },
-    "size": {
-      "type": "variant",
-      "values": ["small"]
-    },
+    "size": { "type": "variant", "values": ["small"] },
     "text": {
       "description": "Text variant visually deprioritize the button styles",
       "type": "variant",
@@ -47,9 +44,7 @@
   },
   "rules": [
     {
-      "if": {
-        "priority": "high"
-      },
+      "if": { "priority": "high" },
       "tokens": {
         "backgroundColor": {
           "red": 0.16863,
@@ -57,25 +52,13 @@
           "blue": 0,
           "alpha": 1
         },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 0,
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.08627,
@@ -83,57 +66,22 @@
           "blue": 0.02353,
           "alpha": 1
         },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true
-      },
+      "if": { "inverse": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "priority": "high"
-      },
+      "if": { "inverse": true, "priority": "high" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "color": {
           "red": 0.2549,
           "green": 0.27059,
@@ -143,23 +91,10 @@
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "pressed": true
-      },
+      "if": { "inverse": true, "pressed": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.6
-        },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.6 },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.2549,
           "green": 0.27059,
@@ -169,10 +104,7 @@
       }
     },
     {
-      "if": {
-        "danger": true,
-        "priority": null
-      },
+      "if": { "danger": true, "priority": null },
       "tokens": {
         "borderColor": {
           "red": 0.88235,
@@ -189,26 +121,13 @@
       }
     },
     {
-      "if": {
-        "danger": true,
-        "inverse": true,
-        "priority": null
-      },
+      "if": { "danger": true, "inverse": true, "priority": null },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "danger": true,
-        "pressed": true,
-        "priority": null
-      },
+      "if": { "danger": true, "pressed": true, "priority": null },
       "tokens": {
         "backgroundColor": {
           "red": 0.75686,
@@ -216,52 +135,22 @@
           "blue": 0.20784,
           "alpha": 1
         },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "width": "full"
-      },
-      "tokens": {
-        "width": "100%"
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
+    { "if": { "width": "full" }, "tokens": { "width": "100%" } },
     {
-      "if": {
-        "viewport": ["xs"],
-        "width": "responsive"
-      },
-      "tokens": {
-        "width": "100%"
-      }
+      "if": { "viewport": ["xs"], "width": "responsive" },
+      "tokens": { "width": "100%" }
     },
     {
-      "if": {
-        "size": "small"
-      },
-      "tokens": {
-        "minWidth": 0,
-        "paddingBottom": 4,
-        "paddingTop": 4
-      }
+      "if": { "size": "small" },
+      "tokens": { "minWidth": 0, "paddingBottom": 4, "paddingTop": 4 }
     },
     {
       "description": "Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.",
-      "if": {
-        "inactive": true
-      },
+      "if": { "inactive": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.69804,
@@ -269,39 +158,16 @@
           "blue": 0.74902,
           "alpha": 1
         },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 0,
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true
-      },
+      "if": { "inactive": true, "inverse": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.6
-        },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.6 },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.2549,
           "green": 0.27059,
@@ -311,56 +177,28 @@
       }
     },
     {
-      "if": {
-        "text": true
-      },
+      "if": { "text": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderLeftWidth": 0,
         "borderRightWidth": 0,
         "borderWidth": null,
         "minWidth": 0,
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "paddingLeft": 0,
         "paddingRight": 0,
         "textLine": "underline"
       }
     },
     {
-      "if": {
-        "priority": "high",
-        "text": true
-      },
+      "if": { "priority": "high", "text": true },
       "tokens": {
-        "color": {
-          "red": 0.16863,
-          "green": 0.50196,
-          "blue": 0,
-          "alpha": 1
-        }
+        "color": { "red": 0.16863, "green": 0.50196, "blue": 0, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "priority": "low",
-        "text": true
-      },
+      "if": { "priority": "low", "text": true },
       "tokens": {
         "color": {
           "red": 0.2549,
@@ -371,127 +209,64 @@
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "text": true
-      },
+      "if": { "pressed": true, "text": true },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.08627,
           "green": 0.24314,
           "blue": 0.02353,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "textLine": "none"
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "text": true
-      },
+      "if": { "inactive": true, "text": true },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.69804,
           "green": 0.72549,
           "blue": 0.74902,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "textLine": "none"
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "text": true
-      },
+      "if": { "inverse": true, "text": true },
       "tokens": {
         "borderRadius": 0,
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true,
-        "text": true
-      },
+      "if": { "inactive": true, "inverse": true, "text": true },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "color": {
           "red": 0.69804,
           "green": 0.72549,
           "blue": 0.74902,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "borderBottomWidth": 1,
-    "borderColor": {
-      "red": 0.16863,
-      "green": 0.50196,
-      "blue": 0,
-      "alpha": 1
-    },
+    "borderColor": { "red": 0.16863, "green": 0.50196, "blue": 0, "alpha": 1 },
     "borderLeftWidth": 1,
     "borderRadius": 32,
     "borderRightWidth": 1,
     "borderTopWidth": 1,
     "borderWidth": 1,
-    "color": {
-      "red": 0.16863,
-      "green": 0.50196,
-      "blue": 0,
-      "alpha": 1
-    },
+    "color": { "red": 0.16863, "green": 0.50196, "blue": 0, "alpha": 1 },
     "flex": 0,
     "fontName": "HNforTELUSSA",
     "fontSize": 16,
@@ -503,18 +278,8 @@
     "lineHeight": 1.5,
     "minWidth": 144,
     "opacity": 1,
-    "outerBackgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
-    "outerBorderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "outerBackgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+    "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "outerBorderGap": 2,
     "outerBorderWidth": 2,
     "paddingBottom": 12,

package/build/ios/ButtonDropdown.json

@@ -20,28 +20,13 @@
       "values": [true],
       "type": "state"
     },
-    "size": {
-      "type": "variant",
-      "values": ["default", "small"]
-    },
-    "width": {
-      "type": "variant",
-      "values": ["full"]
-    }
+    "size": { "type": "variant", "values": ["default", "small"] },
+    "width": { "type": "variant", "values": ["full"] }
   },
   "rules": [
+    { "if": { "open": true }, "tokens": { "icon": "PaletteIconCaretUp" } },
     {
-      "if": {
-        "open": true
-      },
-      "tokens": {
-        "icon": "PaletteIconCaretUp"
-      }
-    },
-    {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -49,37 +34,20 @@
           "blue": 0.45098,
           "alpha": 1
         },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "iconBackground": {
           "red": 0.2549,
           "green": 0.27059,
           "blue": 0.27843,
           "alpha": 1
         },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inactive": true
-      },
+      "if": { "inactive": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 0,
         "color": {
           "red": 0.69804,
@@ -102,9 +70,7 @@
       }
     },
     {
-      "if": {
-        "size": "small"
-      },
+      "if": { "size": "small" },
       "tokens": {
         "descriptionLineHeight": 1,
         "iconSize": 20,
@@ -115,12 +81,7 @@
   ],
   "tokens": {
     "alignSelf": "flex-start",
-    "backgroundColor": {
-      "red": 1,
-      "green": 1,
-      "blue": 1,
-      "alpha": 1
-    },
+    "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
     "borderColor": {
       "red": 0.69804,
       "green": 0.72549,
@@ -129,12 +90,7 @@
     },
     "borderRadius": 45,
     "borderWidth": 1,
-    "color": {
-      "red": 0.40392,
-      "green": 0.43137,
-      "blue": 0.45098,
-      "alpha": 1
-    },
+    "color": { "red": 0.40392, "green": 0.43137, "blue": 0.45098, "alpha": 1 },
     "descriptionFontName": "HNforTELUSSA",
     "descriptionFontSize": 16,
     "descriptionFontWeight": 400,
@@ -151,12 +107,7 @@
     "fontWeight": 700,
     "icon": "PaletteIconCaretDown",
     "iconAlignSelf": "center",
-    "iconBackground": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "iconBackground": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "iconBorderRadius": 32,
     "iconColor": {
       "red": 0.2549,
@@ -193,18 +144,8 @@
     "lineHeight": 1.5,
     "minWidth": 0,
     "opacity": 1,
-    "outerBackgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
-    "outerBorderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "outerBackgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+    "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "outerBorderGap": 2,
     "outerBorderWidth": 2,
     "paddingBottom": 12,