@telus-uds/theme-allium 8.0.0 → 8.1.0

package/build/android/TabsItem.json

@@ -20,10 +20,7 @@
       "values": [true, false],
       "type": "state"
     },
-    "inverse": {
-      "type": "variant",
-      "values": [true]
-    },
+    "inverse": { "type": "variant", "values": [true] },
     "pressed": {
       "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
       "values": [true, false],
@@ -43,16 +40,9 @@
   "rules": [
     {
       "description": "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
-      "if": {
-        "selected": true
-      },
+      "if": { "selected": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0.05
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.05 },
         "color": {
           "red": 0.29412,
           "green": 0.15686,
@@ -71,9 +61,7 @@
       }
     },
     {
-      "if": {
-        "hover": true
-      },
+      "if": { "hover": true },
       "tokens": {
         "borderColor": {
           "red": 0.69804,
@@ -85,9 +73,7 @@
       }
     },
     {
-      "if": {
-        "focus": true
-      },
+      "if": { "focus": true },
       "tokens": {
         "borderColor": {
           "red": 0.29412,
@@ -105,9 +91,7 @@
       }
     },
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -115,25 +99,12 @@
           "blue": 0.45098,
           "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": {
-        "focus": true,
-        "pressed": true
-      },
+      "if": { "focus": true, "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -144,142 +115,58 @@
       }
     },
     {
-      "if": {
-        "inverse": true
-      },
+      "if": { "inverse": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "hover": true,
-        "inverse": true
-      },
+      "if": { "hover": true, "inverse": true },
       "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "highlightColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
+        "highlightColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "selected": true
-      },
+      "if": { "inverse": true, "selected": true },
       "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,
           "blue": 0.27843,
           "alpha": 1
         },
-        "highlightColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "highlightColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "pressed": true
-      },
+      "if": { "inverse": true, "pressed": true },
       "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,
           "blue": 0.27843,
           "alpha": 1
         },
-        "highlightColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
-      }
-    },
-    {
-      "if": {
-        "focus": true,
-        "inverse": true
-      },
-      "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "highlightColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "highlightColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "equalWidth": true
-      },
+      "if": { "focus": true, "inverse": true },
       "tokens": {
-        "maxWidth": null
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
+        "highlightColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
+    { "if": { "equalWidth": true }, "tokens": { "maxWidth": null } },
     {
-      "if": {
-        "dropdown": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "viewport": ["xs", "sm"] },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0.05
-        },
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.05 },
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderRadius": 32,
         "borderWidth": 3,
         "color": {
@@ -293,18 +180,9 @@
       }
     },
     {
-      "if": {
-        "dropdown": true,
-        "hover": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "hover": true, "viewport": ["xs", "sm"] },
       "tokens": {
-        "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,
@@ -315,11 +193,7 @@
       }
     },
     {
-      "if": {
-        "dropdown": true,
-        "focus": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "focus": true, "viewport": ["xs", "sm"] },
       "tokens": {
         "borderColor": {
           "red": 0.29412,
@@ -339,11 +213,7 @@
       }
     },
     {
-      "if": {
-        "dropdown": true,
-        "pressed": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "pressed": true, "viewport": ["xs", "sm"] },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -357,29 +227,15 @@
           "blue": 0.42745,
           "alpha": 1
         },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "paddingHorizontal": 24,
         "paddingVertical": 8
       }
     },
     {
-      "if": {
-        "dropdown": true,
-        "selected": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "selected": true, "viewport": ["xs", "sm"] },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0.05
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0.05 },
         "borderWidth": 0,
         "color": {
           "red": 0.29412,
@@ -392,24 +248,10 @@
       }
     },
     {
-      "if": {
-        "dropdown": true,
-        "inverse": true,
-        "viewport": ["xs", "sm"]
-      },
+      "if": { "dropdown": true, "inverse": true, "viewport": ["xs", "sm"] },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.1
-        },
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.1 },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
@@ -420,12 +262,7 @@
         "viewport": ["xs", "sm"]
       },
       "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
@@ -436,12 +273,7 @@
         "viewport": ["xs", "sm"]
       },
       "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,
@@ -458,12 +290,7 @@
         "viewport": ["xs", "sm"]
       },
       "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,
@@ -480,36 +307,16 @@
         "viewport": ["xs", "sm"]
       },
       "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     }
   ],
   "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 },
     "borderRadius": 32,
     "borderWidth": 2,
-    "color": {
-      "red": 0.40392,
-      "green": 0.43137,
-      "blue": 0.45098,
-      "alpha": 1
-    },
+    "color": { "red": 0.40392, "green": 0.43137, "blue": 0.45098, "alpha": 1 },
     "dropdownIcon": "PaletteIconCaretDown",
     "dropdownIconExpanded": "PaletteIconCaretUp",
     "fontName": "HNforTELUSSA",
@@ -519,12 +326,7 @@
     "highlightBarBorderRadius": 0,
     "highlightBarBorderWidth": 0,
     "highlightBarHeight": 0,
-    "highlightColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "highlightColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "highlightTriangleSize": 0,
     "letterSpacing": 0,
     "lineHeight": 1.14285714286,

package/build/android/Tags.json

@@ -6,16 +6,7 @@
       "type": "state"
     }
   },
-  "rules": [
-    {
-      "if": {
-        "viewport": ["lg", "xl"]
-      },
-      "tokens": {
-        "space": 3
-      }
-    }
-  ],
+  "rules": [{ "if": { "viewport": ["lg", "xl"] }, "tokens": { "space": 3 } }],
   "tokens": {
     "alignItems": "center",
     "direction": "row",

package/build/android/TagsItem.json

@@ -18,9 +18,7 @@
   },
   "rules": [
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -35,30 +33,18 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "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": {
-        "selected": true
-      },
+      "if": { "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -67,12 +53,7 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "color": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "icon": "PaletteIconClose",
         "iconBackground": {
           "red": 0.48627,
@@ -80,19 +61,11 @@
           "blue": 0.64706,
           "alpha": 1
         },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "selected": true
-      },
+      "if": { "pressed": true, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.24706,
@@ -109,16 +82,9 @@
       }
     },
     {
-      "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,
@@ -143,12 +109,7 @@
   ],
   "tokens": {
     "alignSelf": "center",
-    "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,
@@ -157,12 +118,7 @@
     },
     "borderRadius": 32,
     "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 },
     "fontName": "HNforTELUSSA",
     "fontSize": 14,
     "fontWeight": 700,
@@ -190,18 +146,8 @@
     "lineHeight": 1.42857142857,
     "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": 8,