@telus-uds/theme-koodo 3.22.0 → 3.24.0

package/build/android/theme.json

@@ -26,8 +26,8 @@
           "blue": 0.41569,
           "alpha": 1
         },
-        "size": 40,
-        "thickness": 4
+        "size": 24,
+        "thickness": 2
       }
     },
     "Badge": {
@@ -209,6 +209,25 @@
         "paddingTop": 2
       }
     },
+    "BlockQuote": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "backgroundGradient": null,
+        "color": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "marginBottom": 16,
+        "paddingBottom": 16,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 16,
+        "width": 2
+      }
+    },
     "Box": {
       "appearances": {
         "background": {
@@ -538,10 +557,15 @@
           "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"
+        },
         "width": {
-          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "description": "Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.",
           "type": "variant",
-          "values": ["full"]
+          "values": ["full", "responsive"]
         }
       },
       "rules": [
@@ -723,6 +747,15 @@
             "width": "100%"
           }
         },
+        {
+          "if": {
+            "viewport": ["xs"],
+            "width": "responsive"
+          },
+          "tokens": {
+            "width": "100%"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1345,6 +1378,10 @@
     },
     "Callout": {
       "appearances": {
+        "rounded": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "type": "variant",
           "values": ["small"]
@@ -1359,20 +1396,28 @@
             "paddingBottom": 4,
             "paddingTop": 4
           }
+        },
+        {
+          "if": {
+            "rounded": true
+          },
+          "tokens": {
+            "borderRadius": 4
+          }
         }
       ],
       "tokens": {
         "background": {
-          "red": 0.93725,
-          "green": 0.93725,
-          "blue": 0.93725,
+          "red": 0.98039,
+          "green": 0.90196,
+          "blue": 0.95686,
           "alpha": 1
         },
-        "borderRadius": 4,
+        "borderRadius": 0,
         "color": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
+          "red": 0.48627,
+          "green": 0.07451,
+          "blue": 0.4,
           "alpha": 1
         },
         "gap": 16,
@@ -1464,7 +1509,7 @@
         "borderWidth": 0,
         "contentAlignItems": "stretch",
         "contentFlexGrow": 0,
-        "contentFlexShrink": 0,
+        "contentFlexShrink": 1,
         "contentJustifyContent": "flex-start",
         "flex": 1,
         "minWidth": null,
@@ -1912,6 +1957,135 @@
         "textLineHeight": 2.13
       }
     },
+    "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": 14,
+            "labelLineHeight": 1.42857142857,
+            "textLineHeight": 1.14285714286
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": 28
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": 28
+          }
+        },
+        {
+          "if": {
+            "feature": true
+          },
+          "tokens": {
+            "labelBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "textFontSize": 64,
+            "textLineHeight": 1.14285714286,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 300
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "textFontSize": 64,
+            "textLineHeight": 1.14285714286,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 300
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "labelBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderRadius": 6,
+        "containerGradient": null,
+        "containerInverseBorder": 2,
+        "containerInverseBorderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "containerPaddingBottomTop": 48,
+        "containerPaddingLeftRight": 64,
+        "inverseBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "labelBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "labelFontSize": 16,
+        "labelLineHeight": 1.5,
+        "textFontSize": 16,
+        "textLineHeight": 1.14285714286,
+        "textTimerFontName": "StagSans",
+        "textTimerFontWeight": 400
+      }
+    },
     "DatePicker": {
       "appearances": {},
       "rules": [],
@@ -2721,6 +2895,20 @@
     },
     "IconButton": {
       "appearances": {
+        "action": {
+          "type": "variant",
+          "values": [
+            "add",
+            "close",
+            "expand",
+            "moveDown",
+            "moveLeft",
+            "moveRight",
+            "moveUp",
+            "play",
+            "subtract"
+          ]
+        },
         "compact": {
           "description": "Without the outer border gap",
           "type": "variant",
@@ -2759,158 +2947,302 @@
       "rules": [
         {
           "if": {
-            "inverse": true
+            "action": "add"
           },
           "tokens": {
-            "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            }
+            "icon": "PaletteIconAdd"
           }
         },
         {
           "if": {
-            "password": true
+            "action": "subtract"
           },
           "tokens": {
-            "borderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            }
+            "icon": "PaletteIconSubtract"
           }
         },
         {
           "if": {
-            "pressed": true
+            "action": "close"
           },
           "tokens": {
-            "backgroundColor": {
-              "red": 0.00392,
-              "green": 0.28235,
-              "blue": 0.27843,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "outerBorderWidth": 0
+            "icon": "PaletteIconClose"
           }
         },
         {
           "if": {
-            "password": true,
-            "pressed": true
+            "action": "expand"
           },
           "tokens": {
-            "backgroundColor": {
-              "red": 0.00392,
-              "green": 0.28235,
-              "blue": 0.27843,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.00392,
-              "green": 0.28235,
-              "blue": 0.27843,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "outerBorderGap": 4
+            "icon": "PaletteIconExpand"
           }
         },
         {
           "if": {
-            "inverse": true,
-            "pressed": true
+            "action": "moveDown"
           },
           "tokens": {
-            "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 1
-            },
-            "outerBorderWidth": 0
+            "icon": "PaletteIconChevronDown"
           }
         },
         {
           "if": {
-            "size": "large"
+            "action": "moveLeft"
           },
           "tokens": {
-            "iconSize": 24,
-            "padding": 12
+            "icon": "PaletteIconChevronLeft"
           }
         },
         {
           "if": {
-            "size": "small"
+            "action": "moveRight"
           },
           "tokens": {
-            "iconSize": 16,
-            "padding": 4
+            "icon": "PaletteIconChevronRight"
           }
         },
         {
-          "description": "Raised IconButtons follow different design patterns to other variants",
           "if": {
-            "raised": true
+            "action": "moveUp"
           },
           "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
-              "alpha": 1
-            },
-            "borderWidth": 1,
-            "iconSize": 16,
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
-            "outerBorderGap": 0,
-            "outerBorderWidth": 0,
-            "padding": 8,
-            "shadow": {
-              "inset": false,
-              "offsetX": 0,
-              "offsetY": 2,
-              "blur": 2,
-              "spread": 0,
-              "color": {
+            "icon": "PaletteIconChevronUp"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "PaletteIconPlayVideo"
+          }
+        },
+        {
+          "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": "moveDown"
+          },
+          "tokens": {
+            "icon": "PaletteIconChevronDown"
+          }
+        },
+        {
+          "if": {
+            "action": "moveLeft"
+          },
+          "tokens": {
+            "icon": "PaletteIconChevronLeft"
+          }
+        },
+        {
+          "if": {
+            "action": "moveRight"
+          },
+          "tokens": {
+            "icon": "PaletteIconChevronRight"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
+          },
+          "tokens": {
+            "icon": "PaletteIconChevronUp"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "PaletteIconPlayVideo"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "password": true
+          },
+          "tokens": {
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "outerBorderWidth": 0
+          }
+        },
+        {
+          "if": {
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "outerBorderGap": 4
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "outerBorderWidth": 0
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": 24,
+            "padding": 12
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "iconSize": 16,
+            "padding": 4
+          }
+        },
+        {
+          "description": "Raised IconButtons follow different design patterns to other variants",
+          "if": {
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconSize": 16,
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "outerBorderGap": 0,
+            "outerBorderWidth": 0,
+            "padding": 8,
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
                 "red": 0,
                 "green": 0,
                 "blue": 0,
@@ -3010,6 +3342,7 @@
         },
         "borderRadius": 99999999999999,
         "borderWidth": 1,
+        "icon": null,
         "iconColor": {
           "red": 0,
           "green": 0,
@@ -3337,6 +3670,162 @@
         "listGutter": 10
       }
     },
+    "ListBox": {
+      "appearances": {
+        "current": {
+          "description": "When the current item is selected",
+          "values": [true],
+          "type": "state"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [true],
+          "type": "state"
+        },
+        "isChild": {
+          "description": "when the item is child of another child",
+          "values": [true],
+          "type": "state"
+        },
+        "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],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "groupBackgroundColor": {
+              "red": 0.73333,
+              "green": 0.91765,
+              "blue": 0.96078,
+              "alpha": 1
+            },
+            "groupColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "current": true
+          },
+          "tokens": {
+            "groupColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "groupFontName": "StagSans",
+            "groupFontWeight": 700
+          }
+        },
+        {
+          "if": {
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderWidth": 4,
+            "itemPaddingLeft": 12
+          }
+        },
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "groupIcon": "PaletteIconChevronUp"
+          }
+        }
+      ],
+      "tokens": {
+        "groupBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "groupBorderColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "groupBorderRadius": 6,
+        "groupBorderWidth": 1,
+        "groupColor": {
+          "red": 0.89804,
+          "green": 0.96863,
+          "blue": 0.98431,
+          "alpha": 1
+        },
+        "groupFontName": "StagSans",
+        "groupFontSize": 14,
+        "groupFontWeight": 400,
+        "groupIcon": "PaletteIconChevronDown",
+        "groupPaddingBottom": 12,
+        "groupPaddingLeft": 16,
+        "groupPaddingRight": 16,
+        "groupPaddingTop": 12,
+        "itemBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "itemBorderBackgroundColor": {
+          "red": 0.73333,
+          "green": 0.91765,
+          "blue": 0.96078,
+          "alpha": 1
+        },
+        "itemBorderLeftColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "itemBorderLeftWidth": 4,
+        "itemBorderWidth": 0,
+        "itemColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "itemDisplay": false,
+        "itemFontName": "StagSans",
+        "itemFontSize": 14,
+        "itemFontWeight": 700,
+        "itemOutline": 0,
+        "itemPaddingBottom": 12,
+        "itemPaddingLeft": 16,
+        "itemPaddingRight": 16,
+        "itemPaddingTop": 12,
+        "itemTextDecoration": "none",
+        "shadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.1
+          }
+        }
+      }
+    },
     "Modal": {
       "appearances": {
         "maxWidth": {
@@ -4152,6 +4641,67 @@
         "outlineWidth": 1
       }
     },
+    "QuantitySelector": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "padding": 0
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "iconColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "iconSize": 16,
+        "inputBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "inputBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "inputBorderWidth": 1,
+        "leftIcon": "PaletteIconSubtract",
+        "padding": 16,
+        "rightIcon": "PaletteIconAdd",
+        "textColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    },
     "QuickLinks": {
       "appearances": {
         "viewport": {
@@ -4784,7 +5334,7 @@
         },
         "contentAlignItems": "stretch",
         "contentFlexGrow": 0,
-        "contentFlexShrink": 0,
+        "contentFlexShrink": 1,
         "contentJustifyContent": "flex-start",
         "contentSpace": 2,
         "flex": 1,
@@ -5572,6 +6122,81 @@
         "thickness": 4
       }
     },
+    "SplashButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "buttonContentBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "buttonContentChildrenBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "playIcon": "PaletteIconPlayVideo",
+        "playIconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    "SplashButtonWithDetails": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "buttonBackground": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "buttonBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "buttonBottomPosition": 24,
+        "buttonContentBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "buttonContentChildrenBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "buttonLeftPosition": 24,
+        "buttonMinHeight": 64,
+        "buttonPaddingLeft": 16,
+        "buttonPaddingRight": 16,
+        "buttonRadius": 32,
+        "detailsContainerPadding": 8,
+        "playIcon": "PaletteIconPlayVideo",
+        "playIconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "playIconContainerBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],
@@ -5746,43 +6371,114 @@
           "blue": 0.41569,
           "alpha": 1
         },
-        "knobCurrentBorderWidth": 1,
-        "knobCurrentInnerColor": {
+        "knobCurrentBorderWidth": 1,
+        "knobCurrentInnerColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "knobCurrentInnerSize": null,
+        "knobCurrentPaddingLeft": null,
+        "knobCurrentPaddingTop": null,
+        "knobSize": 15,
+        "labelColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "labelCurrentColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "labelCurrentFontName": "StagSans",
+        "labelCurrentFontWeight": 700,
+        "labelDirection": "row",
+        "labelFontName": "StagSans",
+        "labelFontSize": 16,
+        "labelFontWeight": 400,
+        "labelGap": 4,
+        "labelLineHeight": 1.5,
+        "labelMarginTop": 10,
+        "labelPaddingLeft": 16,
+        "labelPaddingRight": 16,
+        "showStepLabel": false,
+        "showStepName": true,
+        "showStepTrackerLabel": true
+      }
+    },
+    "StoryCard": {
+      "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],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.90196,
+              "green": 0.90196,
+              "blue": 0.90196,
+              "alpha": 1
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "borderRadius": 6,
+        "borderWidth": 1,
+        "contentAlignItems": "stretch",
+        "contentFlexGrow": 0,
+        "contentFlexShrink": 0,
+        "contentJustifyContent": "flex-start",
+        "flex": 1,
+        "minWidth": 0,
+        "outerBorderColor": {
           "red": 0,
           "green": 0,
           "blue": 0,
           "alpha": 0
         },
-        "knobCurrentInnerSize": null,
-        "knobCurrentPaddingLeft": null,
-        "knobCurrentPaddingTop": null,
-        "knobSize": 15,
-        "labelColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
-          "alpha": 1
-        },
-        "labelCurrentColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
-          "alpha": 1
-        },
-        "labelCurrentFontName": "StagSans",
-        "labelCurrentFontWeight": 700,
-        "labelDirection": "row",
-        "labelFontName": "StagSans",
-        "labelFontSize": 16,
-        "labelFontWeight": 400,
-        "labelGap": 4,
-        "labelLineHeight": 1.5,
-        "labelMarginTop": 10,
-        "labelPaddingLeft": 16,
-        "labelPaddingRight": 16,
-        "showStepLabel": false,
-        "showStepName": true,
-        "showStepTrackerLabel": true
+        "outerBorderGap": 0,
+        "outerBorderWidth": 0,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0,
+        "shadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": 0,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0
+          }
+        }
       }
     },
     "Table": {
@@ -6227,6 +6923,113 @@
         "width": null
       }
     },
+    "TermsAndConditions": {
+      "appearances": {
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [true],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "PaletteIconChevronUp"
+          }
+        }
+      ],
+      "tokens": {
+        "contentPaddingBottom": 8,
+        "contentPaddingLeft": 16,
+        "expandBaseBorderWidth": 0,
+        "expandContentPaddingBottom": 16,
+        "expandContentPaddingLeft": 16,
+        "expandContentPaddingRight": 16,
+        "expandContentPaddingTop": 16,
+        "expandIconContainerAlignItems": "center",
+        "expandIconContainerBorder": 1,
+        "expandIconContainerBorderColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "expandIconContainerHeight": 32,
+        "expandIconContainerJustifyContent": "center",
+        "expandIconContainerMarginX": 0,
+        "expandIconContainerMarginY": 12,
+        "expandIconContainerWidth": 32,
+        "expandTitleColor": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "expandTitleFontSize": 16,
+        "expandTitleLineHeight": 1.5,
+        "expandTitleMarginX": 4,
+        "expandTitleMarginY": 0,
+        "icon": "PaletteIconChevronDown",
+        "listColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "listFontName": "StagSans",
+        "listFontSize": 14,
+        "listFontWeight": 400,
+        "listLineHeight": 1.42857142857,
+        "listMarginBottom": 16,
+        "listMarginLeft": 32,
+        "mdContentPaddingBottom": 16,
+        "mdContentPaddingLeft": 48,
+        "orderedPadding": 0,
+        "titleColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "titleFontSize": 14,
+        "titleLineHeight": 1.42857142857,
+        "titlePaddingLeft": 8,
+        "unorderedPadding": 0
+      }
+    },
+    "Testimonial": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "dividerBackgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "dividerBorder": 1,
+        "figcaptionGap": 12,
+        "icon": "PaletteIconArrowLeft",
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "imageSize": 48,
+        "quoteContainerGap": 4,
+        "testimonialContainerGap": 12,
+        "textColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
     "TextArea": {
       "appearances": {},
       "rules": [],
@@ -7099,6 +7902,182 @@
         "textTransform": "none"
       }
     },
+    "Video": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "pauseIcon": "PaletteIconAdd",
+        "playIcon": "PaletteIconAdd",
+        "replayIcon": "PaletteIconAdd"
+      }
+    },
+    "VideoButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        }
+      }
+    },
+    "VideoControlBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "captionsIcon": "PaletteIconAdd",
+        "maximizeIcon": "PaletteIconAdd",
+        "menuBottom": 64,
+        "menuMarginLeft": 16,
+        "menuRight": 32,
+        "minimizeIcon": "PaletteIconAdd",
+        "paddingBottom": 16,
+        "paddingLeft": 48,
+        "paddingLeftCompactMode": 16,
+        "paddingRight": 48,
+        "paddingRightCompactMode": 16,
+        "paddingTop": 16,
+        "settingsIcon": "PaletteIconSettings"
+      }
+    },
+    "VideoMenu": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "checkMarkFocusColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "checkMarkHeight": 24,
+        "checkMarkHoverColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "checkMarkIcon": "PaletteIconCheck",
+        "checkMarkSelectedColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "checkMarkUnselectedColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "checkMarkWidth": 24,
+        "padding": 16
+      }
+    },
+    "VideoMiddleControlButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "height": 64,
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "width": 64
+      }
+    },
+    "VideoProgressBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "rangeBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "thumbBackground": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "thumbHeight": 8,
+        "thumbWidth": 8,
+        "timestampMarginLeft": 8,
+        "timestampMarginRight": 8,
+        "trackGradientEnd": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "trackGradientStart": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        }
+      }
+    },
+    "VideoVolumeSlider": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "marginLeft": 16,
+        "marginRight": 16,
+        "mutedIcon": "PaletteIconAdd",
+        "rangeBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "thumbBackground": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "thumbHeight": 8,
+        "thumbWidth": 8,
+        "trackGradientEnd": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "trackGradientStart": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "unmutedIcon": "PaletteIconAdd"
+      }
+    },
     "WaffleGrid": {
       "appearances": {},
       "rules": [],
@@ -7300,7 +8279,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.21.0",
+    "themeTokensVersion": "2.23.0",
     "name": "theme-koodo"
   }
 }