@telus-uds/theme-koodo 7.3.1 → 7.5.0

package/build/ios/theme.json

@@ -150,6 +150,10 @@
     },
     "ActivityIndicator": {
       "appearances": {
+        "dots": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
@@ -174,8 +178,15 @@
           "blue": 0.46275,
           "alpha": 1
         },
+        "dotSize": 6,
+        "indicatorBackgroundColor": {
+          "red": 1,
+          "green": 0.81961,
+          "blue": 0.90196,
+          "alpha": 1
+        },
         "size": 24,
-        "thickness": 2
+        "thickness": 3
       }
     },
     "Autocomplete": {
@@ -3784,10 +3795,19 @@
           "values": [true, false],
           "type": "state"
         },
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
         "size": {
           "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
           "type": "variant",
           "values": ["large", "small", "micro"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
         }
       },
       "rules": [
@@ -3887,249 +3907,554 @@
             "fontSize": 12,
             "iconSize": 16
           }
-        }
-      ],
-      "tokens": {
-        "blockLineHeight": 1.5,
-        "color": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 1
-        },
-        "fontSize": 16,
-        "iconDisplace": 0,
-        "iconSize": 16,
-        "iconSpace": 1,
-        "leftIcon": "PaletteIconChevronLeft",
-        "outerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "rightIcon": "PaletteIconChevronRight",
-        "textLine": "none"
-      }
-    },
-    "ColourToggle": {
-      "appearances": {
-        "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],
-          "type": "state"
         },
-        "selected": {
-          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
-          "values": [true],
-          "type": "state"
-        }
-      },
-      "rules": [
         {
           "if": {
-            "pressed": true
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
-            "bubbleBorderColor": {
+            "color": {
               "red": 0.34902,
               "green": 0.34902,
               "blue": 0.34902,
               "alpha": 1
             },
-            "bubbleBorderRadius": 45,
-            "bubbleBorderWidth": 1
+            "textLine": "underline"
           }
         },
         {
           "if": {
-            "selected": true
+            "style": "inline"
           },
           "tokens": {
-            "bubbleBorderColor": {
+            "color": {
               "red": 0,
               "green": 0,
               "blue": 0,
               "alpha": 1
-            },
-            "bubbleBorderRadius": 45,
-            "bubbleBorderWidth": 1
+            }
           }
-        }
-      ],
-      "tokens": {
-        "borderColor": {
-          "red": 0.78824,
-          "green": 0.78431,
-          "blue": 0.78431,
-          "alpha": 1
-        },
-        "borderRadius": 45,
-        "borderWidth": 1,
-        "bubbleBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
         },
-        "bubbleBorderRadius": 0,
-        "bubbleBorderWidth": 0,
-        "innerBubbleBorderRadius": 45,
-        "innerBubbleHeight": 40,
-        "innerBubbleWidth": 40,
-        "outerBubbleContentAlignItems": "center",
-        "outerBubbleHeight": 48,
-        "outerBubbleJustifyContent": "center",
-        "outerBubbleWidth": 48,
-        "shadow": {
-          "inset": true,
-          "offsetX": 0,
-          "offsetY": 2,
-          "blur": 2,
-          "spread": 0,
-          "color": {
-            "red": 0,
-            "green": 0,
-            "blue": 0,
-            "alpha": 0.1
+        {
+          "if": {
+            "pressed": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
           }
         },
-        "space": 2
-      }
-    },
-    "Countdown": {
-      "appearances": {
-        "feature": {
-          "type": "variant",
-          "values": [true]
-        },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
-        },
-        "label": {
-          "type": "variant",
-          "values": [true]
-        },
-        "large": {
-          "type": "variant",
-          "values": [true]
-        },
-        "viewport": {
-          "description": "The size label for the current screen viewport based on the current screen width",
-          "values": ["xs", "sm", "md", "lg", "xl"],
-          "type": "state"
-        }
-      },
-      "rules": [
         {
           "if": {
-            "viewport": ["xs"]
+            "style": "subtle"
           },
           "tokens": {
-            "containerPaddingBottomTop": 16,
-            "containerPaddingLeftRight": 24,
-            "labelFontSize": 16,
-            "labelLineHeight": 1.5,
-            "textLineHeight": 1.5
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "feature": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
-            "containerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 1
-            },
-            "labelBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
             },
-            "textFontSize": 70,
-            "textLineHeight": 1.2,
-            "textTimerFontName": "StagSans",
-            "textTimerFontWeight": 700
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "large": true
+            "style": "feature"
           },
           "tokens": {
-            "labelFontName": "StagSans",
-            "labelFontSize": 16,
-            "labelFontWeight": 400,
-            "textFontSize": 70,
-            "textLineHeight": 1.2,
-            "textTimerFontName": "StagSans",
-            "textTimerFontWeight": 700
+            "color": {
+              "red": 0.47843,
+              "green": 0.23922,
+              "blue": 0.98824,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "textFontSize": 44,
-            "textLineHeight": 1.22222222222
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "feature": true,
-            "viewport": ["xs"]
+            "style": "danger"
           },
           "tokens": {
-            "textFontSize": 44
+            "color": {
+              "red": 0.78824,
+              "green": 0.21569,
+              "blue": 0.04314,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "inverse": true
+            "pressed": true,
+            "style": "danger"
           },
           "tokens": {
-            "containerBorderColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
             },
-            "labelBorderColor": {
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             }
           }
-        }
-      ],
-      "tokens": {
-        "containerBorderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "containerBorderRadius": 6,
-        "containerBorderWidth": 2,
-        "containerGradient": null,
-        "containerInverseBorder": 2,
-        "containerInverseBorderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
         },
-        "containerPaddingBottomTop": 48,
-        "containerPaddingLeftRight": 64,
-        "inverseBorderColor": {
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.47843,
+              "green": 0.23922,
+              "blue": 0.98824,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.78824,
+              "green": 0.21569,
+              "blue": 0.04314,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "blockLineHeight": 1.5,
+        "color": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "fontSize": 16,
+        "iconDisplace": 0,
+        "iconSize": 16,
+        "iconSpace": 1,
+        "leftIcon": "PaletteIconChevronLeft",
+        "outerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "rightIcon": "PaletteIconChevronRight",
+        "textLine": "none"
+      }
+    },
+    "ColourToggle": {
+      "appearances": {
+        "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],
+          "type": "state"
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [true],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "bubbleBorderColor": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "bubbleBorderRadius": 45,
+            "bubbleBorderWidth": 1
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "bubbleBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "bubbleBorderRadius": 45,
+            "bubbleBorderWidth": 1
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "borderRadius": 45,
+        "borderWidth": 1,
+        "bubbleBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "bubbleBorderRadius": 0,
+        "bubbleBorderWidth": 0,
+        "innerBubbleBorderRadius": 45,
+        "innerBubbleHeight": 40,
+        "innerBubbleWidth": 40,
+        "outerBubbleContentAlignItems": "center",
+        "outerBubbleHeight": 48,
+        "outerBubbleJustifyContent": "center",
+        "outerBubbleWidth": 48,
+        "shadow": {
+          "inset": true,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.1
+          }
+        },
+        "space": 2
+      }
+    },
+    "Countdown": {
+      "appearances": {
+        "feature": {
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "label": {
+          "type": "variant",
+          "values": [true]
+        },
+        "large": {
+          "type": "variant",
+          "values": [true]
+        },
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": ["xs", "sm", "md", "lg", "xl"],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "containerPaddingBottomTop": 16,
+            "containerPaddingLeftRight": 24,
+            "labelFontSize": 16,
+            "labelLineHeight": 1.5,
+            "textLineHeight": 1.5
+          }
+        },
+        {
+          "if": {
+            "feature": true
+          },
+          "tokens": {
+            "containerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "labelBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "textFontSize": 70,
+            "textLineHeight": 1.2,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 700
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "labelFontName": "StagSans",
+            "labelFontSize": 16,
+            "labelFontWeight": 400,
+            "textFontSize": 70,
+            "textLineHeight": 1.2,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 700
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": 44,
+            "textLineHeight": 1.22222222222
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": 44
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "containerBorderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "labelBorderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "containerBorderRadius": 6,
+        "containerBorderWidth": 2,
+        "containerGradient": null,
+        "containerInverseBorder": 2,
+        "containerInverseBorderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "containerPaddingBottomTop": 48,
+        "containerPaddingLeftRight": 64,
+        "inverseBorderColor": {
           "red": 0,
           "green": 0,
           "blue": 0,
@@ -6320,51 +6645,304 @@
           "type": "variant",
           "values": [true]
         },
-        "iconPosition": {
-          "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
-          "values": ["left", "right", "inline"],
-          "type": "state"
+        "iconPosition": {
+          "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
+          "values": ["left", "right", "inline"],
+          "type": "state"
+        },
+        "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],
+          "type": "state"
+        },
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+          "type": "variant",
+          "values": ["micro", "small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["inline", "subtle", "feature", "danger", "inverse"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "iconPosition": "left"
+          },
+          "tokens": {
+            "iconSpace": 2
+          }
+        },
+        {
+          "if": {
+            "iconPosition": "right"
+          },
+          "tokens": {
+            "iconSpace": 1
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.25098,
+              "green": 0.25098,
+              "blue": 0.25098,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "blockFontName": "StagSans",
+            "blockFontSize": 12,
+            "blockFontWeight": 600,
+            "blockLineHeight": 1.33333333333,
+            "iconSize": 12
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "blockFontSize": 14,
+            "blockLineHeight": 1.42857142857,
+            "iconSize": 14
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "blockFontSize": 20,
+            "blockLineHeight": 1.4,
+            "iconSize": 24
+          }
+        },
+        {
+          "if": {
+            "quiet": true
+          },
+          "tokens": {
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "underline"
+          }
+        },
+        {
+          "if": {
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
         },
-        "inverse": {
-          "type": "variant",
-          "values": [true]
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
         },
-        "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],
-          "type": "state"
+        {
+          "if": {
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
         },
-        "quiet": {
-          "description": "When it is true, it does not show the decoration",
-          "type": "state",
-          "values": [true, false]
+        {
+          "if": {
+            "style": "feature"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.47843,
+              "green": 0.23922,
+              "blue": 0.98824,
+              "alpha": 1
+            }
+          }
         },
-        "size": {
-          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
-          "type": "variant",
-          "values": ["micro", "small", "large"]
-        }
-      },
-      "rules": [
         {
           "if": {
-            "iconPosition": "left"
+            "pressed": true,
+            "style": "feature"
           },
           "tokens": {
-            "iconSpace": 2
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "iconPosition": "right"
+            "style": "danger"
           },
           "tokens": {
-            "iconSpace": 1
+            "color": {
+              "red": 0.78824,
+              "green": 0.21569,
+              "blue": 0.04314,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "pressed": true
+            "pressed": true,
+            "style": "danger"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -6378,7 +6956,24 @@
         },
         {
           "if": {
-            "alternative": true
+            "quiet": true,
+            "style": "inline"
+          },
+          "tokens": {
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inline"
           },
           "tokens": {
             "color": {
@@ -6391,84 +6986,123 @@
         },
         {
           "if": {
-            "alternative": true,
-            "pressed": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": {
-              "red": 0.25098,
-              "green": 0.25098,
-              "blue": 0.25098,
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
-            }
+            },
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "inverse": true
+            "pressed": true,
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
             "color": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+              "red": 0.47843,
+              "green": 0.23922,
+              "blue": 0.98824,
               "alpha": 1
-            }
+            },
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "size": "micro"
+            "pressed": true,
+            "quiet": true,
+            "style": "feature"
           },
           "tokens": {
-            "blockFontName": "StagSans",
-            "blockFontSize": 12,
-            "blockFontWeight": 600,
-            "blockLineHeight": 1.33333333333,
-            "iconSize": 12
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "size": "small"
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "blockFontSize": 14,
-            "blockLineHeight": 1.42857142857,
-            "iconSize": 14
+            "color": {
+              "red": 0.78824,
+              "green": 0.21569,
+              "blue": 0.04314,
+              "alpha": 1
+            },
+            "textLine": "none"
           }
         },
         {
           "if": {
-            "size": "large"
+            "pressed": true,
+            "quiet": true,
+            "style": "danger"
           },
           "tokens": {
-            "blockFontSize": 20,
-            "blockLineHeight": 1.4,
-            "iconSize": 24
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
             "textLine": "none"
           }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true,
+            "style": "inverse"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -7141,6 +7775,10 @@
           "values": [true],
           "type": "state"
         },
+        "selected": {
+          "type": "state",
+          "values": [true]
+        },
         "viewport": {
           "description": "The size label for the current screen viewport based on the current screen width",
           "values": ["xs", "sm", "md", "lg", "xl"],
@@ -7175,6 +7813,25 @@
           "tokens": {
             "maxWidthSize": 544
           }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "buttonIconBackgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "labelColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -7223,7 +7880,7 @@
         "labelPaddingLeft": 24,
         "labelPaddingRight": 16,
         "labelPaddingTop": 8,
-        "maxHeightSize": 0,
+        "maxHeightSize": 480,
         "maxWidthSize": 0,
         "minHeight": 0,
         "minWidth": 320,
@@ -7462,8 +8119,8 @@
             "viewport": ["xl"]
           },
           "tokens": {
-            "containerPaddingLeft": 16,
-            "containerPaddingRight": 16
+            "containerPaddingLeft": 0,
+            "containerPaddingRight": 0
           }
         },
         {
@@ -9381,10 +10038,10 @@
         },
         "containerBorderRadius": 0,
         "containerOpacity": 1,
-        "containerPaddingBottom": 6,
-        "containerPaddingLeft": 8,
+        "containerPaddingBottom": 0,
+        "containerPaddingLeft": 0,
         "containerPaddingRight": 0,
-        "containerPaddingTop": 6,
+        "containerPaddingTop": 0,
         "containerShadow": null,
         "descriptionFontName": "StagSans",
         "descriptionFontSize": 14,
@@ -14496,7 +15153,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.2.0",
+    "themeTokensVersion": "4.3.0",
     "name": "theme-koodo"
   }
 }