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

package/build/ios/IconButton.json

@@ -58,10 +58,7 @@
       "values": [true],
       "type": "state"
     },
-    "size": {
-      "type": "variant",
-      "values": ["small", "large"]
-    },
+    "size": { "type": "variant", "values": ["small", "large"] },
     "style": {
       "type": "variant",
       "values": ["default", "contained", "subtle", "raised"]
@@ -74,205 +71,85 @@
   },
   "rules": [
     {
-      "if": {
-        "action": "menu"
-      },
-      "tokens": {
-        "icon": "PaletteIconMenuHamburger"
-      }
-    },
-    {
-      "if": {
-        "action": "cart"
-      },
-      "tokens": {
-        "icon": "PaletteIconCartEmpty"
-      }
-    },
-    {
-      "if": {
-        "action": "profile"
-      },
-      "tokens": {
-        "icon": "PaletteIconUserSingle"
-      }
-    },
-    {
-      "if": {
-        "action": "add"
-      },
-      "tokens": {
-        "icon": "PaletteIconAdd"
-      }
+      "if": { "action": "menu" },
+      "tokens": { "icon": "PaletteIconMenuHamburger" }
     },
     {
-      "if": {
-        "action": "subtract"
-      },
-      "tokens": {
-        "icon": "PaletteIconSubtract"
-      }
+      "if": { "action": "cart" },
+      "tokens": { "icon": "PaletteIconCartEmpty" }
     },
     {
-      "if": {
-        "action": "close"
-      },
-      "tokens": {
-        "icon": "PaletteIconClose"
-      }
+      "if": { "action": "profile" },
+      "tokens": { "icon": "PaletteIconUserSingle" }
     },
+    { "if": { "action": "add" }, "tokens": { "icon": "PaletteIconAdd" } },
     {
-      "if": {
-        "action": "expand"
-      },
-      "tokens": {
-        "icon": "PaletteIconExpand"
-      }
+      "if": { "action": "subtract" },
+      "tokens": { "icon": "PaletteIconSubtract" }
     },
+    { "if": { "action": "close" }, "tokens": { "icon": "PaletteIconClose" } },
+    { "if": { "action": "expand" }, "tokens": { "icon": "PaletteIconExpand" } },
     {
-      "if": {
-        "action": "moveDown"
-      },
-      "tokens": {
-        "icon": "PaletteIconCaretDown"
-      }
+      "if": { "action": "moveDown" },
+      "tokens": { "icon": "PaletteIconCaretDown" }
     },
     {
-      "if": {
-        "action": "moveUp"
-      },
-      "tokens": {
-        "icon": "PaletteIconCaretUp"
-      }
+      "if": { "action": "moveUp" },
+      "tokens": { "icon": "PaletteIconCaretUp" }
     },
     {
-      "if": {
-        "action": "moveLeft"
-      },
-      "tokens": {
-        "icon": "PaletteIconChevronLeft"
-      }
+      "if": { "action": "moveLeft" },
+      "tokens": { "icon": "PaletteIconChevronLeft" }
     },
     {
-      "if": {
-        "action": "moveRight"
-      },
-      "tokens": {
-        "icon": "PaletteIconChevronRight"
-      }
+      "if": { "action": "moveRight" },
+      "tokens": { "icon": "PaletteIconChevronRight" }
     },
     {
-      "if": {
-        "action": "play"
-      },
-      "tokens": {
-        "icon": "PaletteIconPlayVideo"
-      }
+      "if": { "action": "play" },
+      "tokens": { "icon": "PaletteIconPlayVideo" }
     },
+    { "if": { "action": "add" }, "tokens": { "icon": "PaletteIconAdd" } },
     {
-      "if": {
-        "action": "add"
-      },
-      "tokens": {
-        "icon": "PaletteIconAdd"
-      }
+      "if": { "action": "subtract" },
+      "tokens": { "icon": "PaletteIconSubtract" }
     },
+    { "if": { "action": "close" }, "tokens": { "icon": "PaletteIconClose" } },
+    { "if": { "action": "expand" }, "tokens": { "icon": "PaletteIconExpand" } },
     {
-      "if": {
-        "action": "subtract"
-      },
-      "tokens": {
-        "icon": "PaletteIconSubtract"
-      }
+      "if": { "action": "moveDown" },
+      "tokens": { "icon": "PaletteIconCaretDown" }
     },
     {
-      "if": {
-        "action": "close"
-      },
-      "tokens": {
-        "icon": "PaletteIconClose"
-      }
+      "if": { "action": "moveUp" },
+      "tokens": { "icon": "PaletteIconCaretUp" }
     },
     {
-      "if": {
-        "action": "expand"
-      },
-      "tokens": {
-        "icon": "PaletteIconExpand"
-      }
+      "if": { "action": "moveLeft" },
+      "tokens": { "icon": "PaletteIconChevronLeft" }
     },
     {
-      "if": {
-        "action": "moveDown"
-      },
-      "tokens": {
-        "icon": "PaletteIconCaretDown"
-      }
+      "if": { "action": "moveRight" },
+      "tokens": { "icon": "PaletteIconChevronRight" }
     },
     {
-      "if": {
-        "action": "moveUp"
-      },
-      "tokens": {
-        "icon": "PaletteIconCaretUp"
-      }
+      "if": { "action": "play" },
+      "tokens": { "icon": "PaletteIconPlayVideo" }
     },
     {
-      "if": {
-        "action": "moveLeft"
-      },
-      "tokens": {
-        "icon": "PaletteIconChevronLeft"
-      }
+      "if": { "action": "visibility" },
+      "tokens": { "icon": "PaletteIconInvisible" }
     },
     {
-      "if": {
-        "action": "moveRight"
-      },
+      "if": { "subtle": true },
       "tokens": {
-        "icon": "PaletteIconChevronRight"
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     },
     {
-      "if": {
-        "action": "play"
-      },
+      "if": { "raised": true },
       "tokens": {
-        "icon": "PaletteIconPlayVideo"
-      }
-    },
-    {
-      "if": {
-        "action": "visibility"
-      },
-      "tokens": {
-        "icon": "PaletteIconInvisible"
-      }
-    },
-    {
-      "if": {
-        "subtle": true
-      },
-      "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
-      }
-    },
-    {
-      "if": {
-        "raised": true
-      },
-      "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,
@@ -286,58 +163,26 @@
           "offsetY": 2,
           "blur": 2,
           "spread": 0,
-          "color": {
-            "red": 0,
-            "green": 0,
-            "blue": 0,
-            "alpha": 0.2
-          }
+          "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.2 }
         }
       }
     },
     {
-      "if": {
-        "inverse": true
-      },
+      "if": { "inverse": true },
       "tokens": {
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "subtle": true
-      },
+      "if": { "inverse": true, "subtle": true },
       "tokens": {
-        "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "borderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true
-      },
+      "if": { "pressed": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -346,18 +191,11 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "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,
@@ -366,53 +204,22 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "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": 0.4
-        },
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 },
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 1,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "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 },
         "borderWidth": null,
         "iconColor": {
           "red": 0.29412,
@@ -423,10 +230,7 @@
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "subtle": true
-      },
+      "if": { "pressed": true, "subtle": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -435,19 +239,11 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "selected": true,
-        "subtle": true
-      },
+      "if": { "selected": true, "subtle": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -456,49 +252,21 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "pressed": true,
-        "subtle": true
-      },
+      "if": { "inverse": true, "pressed": true, "subtle": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "selected": true,
-        "subtle": true
-      },
+      "if": { "inverse": true, "selected": true, "subtle": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": null,
         "iconColor": {
           "red": 0.2549,
@@ -509,10 +277,7 @@
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "raised": true
-      },
+      "if": { "pressed": true, "raised": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -521,19 +286,11 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "raised": true,
-        "selected": true
-      },
+      "if": { "raised": true, "selected": true },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -542,18 +299,11 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "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": 0.8902,
@@ -568,26 +318,13 @@
           "blue": 0.74902,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true
-      },
+      "if": { "inactive": true, "inverse": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.2
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.2 },
         "borderWidth": 0,
         "iconColor": {
           "red": 0.69804,
@@ -595,27 +332,13 @@
           "blue": 0.74902,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true,
-        "subtle": true
-      },
+      "if": { "inactive": true, "inverse": true, "subtle": true },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 0,
         "iconColor": {
           "red": 0.69804,
@@ -623,34 +346,14 @@
           "blue": 0.74902,
           "alpha": 1
         },
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        }
+        "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 }
       }
     },
+    { "if": { "size": "large" }, "tokens": { "iconSize": 24, "padding": 10 } },
     {
-      "if": {
-        "size": "large"
-      },
+      "if": { "style": "contained" },
       "tokens": {
-        "iconSize": 24,
-        "padding": 10
-      }
-    },
-    {
-      "if": {
-        "style": "contained"
-      },
-      "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderColor": {
           "red": 0.40392,
           "green": 0.43137,
@@ -667,10 +370,7 @@
       }
     },
     {
-      "if": {
-        "selected": true,
-        "style": "contained"
-      },
+      "if": { "selected": true, "style": "contained" },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -679,19 +379,11 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "style": "contained"
-      },
+      "if": { "pressed": true, "style": "contained" },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -700,54 +392,22 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "style": "contained"
-      },
+      "if": { "inverse": true, "style": "contained" },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "borderColor": {
-          "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 },
         "borderWidth": 1,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "selected": true,
-        "style": "contained"
-      },
+      "if": { "inverse": true, "selected": true, "style": "contained" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 0,
         "iconColor": {
           "red": 0.29412,
@@ -758,38 +418,16 @@
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "pressed": true,
-        "style": "contained"
-      },
+      "if": { "inverse": true, "pressed": true, "style": "contained" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        },
-        "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 },
+        "borderColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 1,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "style": "contained"
-      },
+      "if": { "inactive": true, "style": "contained" },
       "tokens": {
         "backgroundColor": {
           "red": 0.8902,
@@ -807,38 +445,17 @@
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true,
-        "style": "contained"
-      },
+      "if": { "inactive": true, "inverse": true, "style": "contained" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.1 },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 }
       }
     },
     {
-      "if": {
-        "style": "subtle"
-      },
+      "if": { "style": "subtle" },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 0,
         "iconColor": {
           "red": 0.40392,
@@ -849,10 +466,7 @@
       }
     },
     {
-      "if": {
-        "selected": true,
-        "style": "subtle"
-      },
+      "if": { "selected": true, "style": "subtle" },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -861,19 +475,11 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "style": "subtle"
-      },
+      "if": { "pressed": true, "style": "subtle" },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -882,48 +488,21 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "style": "subtle"
-      },
+      "if": { "inverse": true, "style": "subtle" },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "selected": true,
-        "style": "subtle"
-      },
+      "if": { "inverse": true, "selected": true, "style": "subtle" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "borderWidth": 0,
         "iconColor": {
           "red": 0.2549,
@@ -934,32 +513,15 @@
       }
     },
     {
-      "if": {
-        "inverse": true,
-        "pressed": true,
-        "style": "subtle"
-      },
+      "if": { "inverse": true, "pressed": true, "style": "subtle" },
       "tokens": {
-        "backgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        },
+        "backgroundColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "style": "subtle"
-      },
+      "if": { "inactive": true, "style": "subtle" },
       "tokens": {
         "backgroundColor": {
           "red": 0.8902,
@@ -976,37 +538,16 @@
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "inverse": true,
-        "style": "subtle"
-      },
+      "if": { "inactive": true, "inverse": true, "style": "subtle" },
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 0.4
-        }
+        "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 0.4 }
       }
     },
     {
-      "if": {
-        "style": "raised"
-      },
+      "if": { "style": "raised" },
       "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,
@@ -1027,20 +568,12 @@
           "offsetY": 2,
           "blur": 2,
           "spread": 0,
-          "color": {
-            "red": 0,
-            "green": 0,
-            "blue": 0,
-            "alpha": 0.2
-          }
+          "color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.2 }
         }
       }
     },
     {
-      "if": {
-        "selected": true,
-        "style": "raised"
-      },
+      "if": { "selected": true, "style": "raised" },
       "tokens": {
         "backgroundColor": {
           "red": 0.29412,
@@ -1049,19 +582,11 @@
           "alpha": 1
         },
         "borderWidth": null,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        }
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 }
       }
     },
     {
-      "if": {
-        "pressed": true,
-        "style": "raised"
-      },
+      "if": { "pressed": true, "style": "raised" },
       "tokens": {
         "backgroundColor": {
           "red": 0.40392,
@@ -1070,21 +595,13 @@
           "alpha": 1
         },
         "borderWidth": 0,
-        "iconColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
+        "iconColor": { "red": 1, "green": 1, "blue": 1, "alpha": 1 },
         "padding": 8,
         "shadow": null
       }
     },
     {
-      "if": {
-        "inactive": true,
-        "style": "raised"
-      },
+      "if": { "inactive": true, "style": "raised" },
       "tokens": {
         "backgroundColor": {
           "red": 0.8902,
@@ -1104,12 +621,7 @@
     }
   ],
   "tokens": {
-    "backgroundColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "backgroundColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "borderBottomLeftRadius": null,
     "borderBottomRightRadius": null,
     "borderBottomWidth": null,
@@ -1138,12 +650,7 @@
     "iconSize": 16,
     "iconTranslateX": 0,
     "iconTranslateY": 0,
-    "outerBorderColor": {
-      "red": 0,
-      "green": 0,
-      "blue": 0,
-      "alpha": 0
-    },
+    "outerBorderColor": { "red": 0, "green": 0, "blue": 0, "alpha": 0 },
     "outerBorderGap": 0,
     "outerBorderWidth": null,
     "padding": 4,