@telus-uds/theme-koodo 3.18.0 → 3.20.0

package/build/android/theme.json

@@ -468,6 +468,40 @@
         "gradient": null
       }
     },
+    "Breadcrumbs": {
+      "appearances": {
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "icon": "PaletteIconChevronRight",
+        "iconColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "iconPadding": 8,
+        "listItemPadding": 0
+      }
+    },
     "Button": {
       "appearances": {
         "danger": {
@@ -1309,6 +1343,45 @@
         "width": null
       }
     },
+    "Callout": {
+      "appearances": {
+        "size": {
+          "type": "variant",
+          "values": ["small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": 4,
+            "paddingTop": 4
+          }
+        }
+      ],
+      "tokens": {
+        "background": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "borderRadius": 4,
+        "color": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "gap": 16,
+        "paddingBottom": 8,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 8
+      }
+    },
     "Card": {
       "appearances": {
         "background": {
@@ -1827,6 +1900,190 @@
         "textLine": "none"
       }
     },
+    "DatePicker": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "calendarDayBlockedCalendarHoverBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayBlockedCalendarHoverColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayDefaultBeforeHeight": 14,
+        "calendarDayDefaultBeforeWidth": 14,
+        "calendarDayDefaultBorder": 1,
+        "calendarDayDefaultBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayDefaultCalendarDaySelectedHoverColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayDefaultColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDayDefaultFontName": "StagSans",
+        "calendarDayDefaultFontSize": 12,
+        "calendarDayDefaultFontWeight": 300,
+        "calendarDaySelectedHoverBeforeBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDaySelectedHoverBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarDaySelectedHoverColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarMonthCaptionColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "calendarMonthCaptionFontName": "StagSans",
+        "calendarMonthCaptionFontSize": 20,
+        "calendarMonthCaptionFontWeight": 400,
+        "calendarMonthCaptionLineHeight": 1.4,
+        "calendarMonthCaptionPaddingBottom": 48,
+        "dateInputBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dateInputBorderRadius": 4,
+        "dateInputFocusBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dateInputHoverBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dateInputInsideBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dateInputInsideColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dateInputStrokeColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerNavigationButtonBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerNavigationButtonBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerNavigationButtonChildLeft": 8,
+        "dayPickerNavigationButtonChildRight": 8,
+        "dayPickerNavigationButtonChildSvgFill": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerNavigationButtonDefaultHoverBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerNavigationButtonMaxHeight": 32,
+        "dayPickerNavigationButtonMaxWidth": 32,
+        "dayPickerNavigationButtonPadding": 8,
+        "dayPickerNavigationSVGHorizontalFill": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerWeekHeaderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "dayPickerWeekHeaderFontName": "StagSans",
+        "dayPickerWeekHeaderFontWeight": 500,
+        "dayPickerWeekHeaderLineHeight": 1.42857142857,
+        "dayPickerWeekHeaderSmall": 14,
+        "hiddenInputFieldContainerHeight": 0,
+        "hiddenInputFieldContainerWidth": 0,
+        "invalidInputMixin": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "nextIcon": "PaletteIconArrowRight",
+        "previousIcon": "PaletteIconArrowLeft",
+        "singleDatePickerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "singleDatePickerLeftRight": 16,
+        "singleDatePickerPaddingTopBottom": 8,
+        "singleDatePickerRadius": 4,
+        "validInputMixin": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        }
+      }
+    },
     "Divider": {
       "appearances": {
         "decorative": {
@@ -1984,6 +2241,36 @@
         "verticalAlign": "middle"
       }
     },
+    "ExpandCollapseMini": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderWidth": 0
+      }
+    },
+    "ExpandCollapseMiniControl": {
+      "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": {
+        "icon": "PaletteIconChevronDown",
+        "size": 4
+      }
+    },
     "ExpandCollapsePanel": {
       "appearances": {},
       "rules": [],
@@ -2095,6 +2382,71 @@
         "titleFontSize": 16
       }
     },
+    "Footnote": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "closeButtonBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "closeButtonBorderSize": 1,
+        "closeButtonHeight": 24,
+        "closeButtonIconSize": 16,
+        "closeButtonMarginBottom": 4,
+        "closeButtonMarginLeft": 4,
+        "closeButtonMarginRight": 12,
+        "closeButtonMarginTop": 12,
+        "closeButtonWidth": 24,
+        "footnoteBackground": {
+          "red": 0.98039,
+          "green": 0.98039,
+          "blue": 0.98039,
+          "alpha": 1
+        },
+        "footnoteBodyBackground": {
+          "red": 0.98039,
+          "green": 0.98039,
+          "blue": 0.98039,
+          "alpha": 1
+        },
+        "footnoteBodyPaddingBottom": 32,
+        "footnoteBodyPaddingLeft": 16,
+        "footnoteBodyPaddingRight": 16,
+        "footnoteBodyPaddingTop": 0,
+        "footnoteBorderColorMd": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "footnoteBorderTopSizeMd": 1,
+        "headerMargin": 16,
+        "listItemColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "listItemFontSize": 14,
+        "listItemLineHeight": 1.42857142857,
+        "listItemMarkerFontSize": 16,
+        "listItemMarkerLineHeight": 1.42857142857,
+        "listItemPaddingLeft": 8,
+        "listPaddingLeft": 32
+      }
+    },
+    "FootnoteLink": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "lineHeight": 1,
+        "paddingLeft": 2,
+        "paddingRight": 2
+      }
+    },
     "HorizontalScrollButton": {
       "appearances": {
         "pressed": {
@@ -2138,17 +2490,17 @@
           "alpha": 1
         },
         "borderColor": {
-          "red": 0.78824,
-          "green": 0.78431,
-          "blue": 0.78431,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "borderRadius": 32,
         "borderWidth": 1,
         "iconColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "iconScale": 1,
@@ -2367,6 +2719,11 @@
           "values": [true],
           "type": "state"
         },
+        "inverse": {
+          "description": "For use on dark backgrounds",
+          "type": "variant",
+          "values": [true]
+        },
         "password": {
           "description": "Password masked or not",
           "type": "variant",
@@ -2376,15 +2733,29 @@
           "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"
+        },
+        "raised": {
+          "description": "Uses shadow and background colour to appear raised above the page",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["small", "large"]
         }
       },
       "rules": [
         {
           "if": {
-            "compact": true
+            "inverse": true
           },
           "tokens": {
-            "outerBorderGap": 0
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
           }
         },
         {
@@ -2400,6 +2771,26 @@
             }
           }
         },
+        {
+          "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,
@@ -2407,15 +2798,15 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
               "alpha": 1
             },
             "borderColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
               "alpha": 1
             },
             "iconColor": {
@@ -2423,45 +2814,130 @@
               "green": 1,
               "blue": 1,
               "alpha": 1
-            }
+            },
+            "outerBorderGap": 4
           }
         },
         {
           "if": {
+            "inverse": true,
             "pressed": true
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
             "borderColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
-            }
+            },
+            "outerBorderWidth": 0
           }
         },
         {
           "if": {
-            "inactive": true
+            "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,
+                "alpha": 0.1
+              }
+            }
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": 24,
+            "padding": 12
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "size": "small"
+          },
+          "tokens": {
+            "padding": 8
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
+              "alpha": 1
+            },
             "borderWidth": 0,
             "iconColor": {
               "red": 1,
@@ -2477,13 +2953,34 @@
             "password": true
           },
           "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
             "iconColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+              "red": 0.00392,
+              "green": 0.28235,
+              "blue": 0.27843,
               "alpha": 1
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             }
           }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "outerBorderGap": 0
+          }
         }
       ],
       "tokens": {
@@ -2494,21 +2991,21 @@
           "alpha": 0
         },
         "borderColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
-          "alpha": 1
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
         "borderRadius": 99999999999999,
-        "borderWidth": 3,
+        "borderWidth": 1,
         "iconColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "iconScale": 1,
-        "iconSize": 24,
+        "iconSize": 16,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
         "outerBorderColor": {
@@ -2523,6 +3020,13 @@
         "shadow": null
       }
     },
+    "Image": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderRadius": 4
+      }
+    },
     "InputLabel": {
       "appearances": {},
       "rules": [],
@@ -2840,7 +3344,11 @@
             "viewport": ["xs", "sm"]
           },
           "tokens": {
-            "height": "100%"
+            "height": "100%",
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24
           }
         },
         {
@@ -2879,7 +3387,19 @@
           "blue": 1,
           "alpha": 1
         },
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
         "borderRadius": 4,
+        "cancelButtonColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
         "closeIcon": "PaletteIconTimes",
         "closeIconColor": {
           "red": 0,
@@ -2893,12 +3413,22 @@
         "containerPaddingLeft": 0,
         "containerPaddingRight": 0,
         "containerPaddingTop": 0,
+        "gap": 16,
+        "headingColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "headingPaddingRight": 24,
         "height": null,
+        "marginLeft": 24,
+        "marginRight": 24,
         "maxWidth": "100%",
-        "paddingBottom": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 16,
+        "paddingBottom": 24,
+        "paddingLeft": 32,
+        "paddingRight": 32,
+        "paddingTop": 24,
         "shadow": {
           "inset": false,
           "offsetX": 0,
@@ -2911,7 +3441,8 @@
             "blue": 0,
             "alpha": 0
           }
-        }
+        },
+        "subHeadingMarginTop": 8
       }
     },
     "Notification": {
@@ -3434,6 +3965,76 @@
         "width": null
       }
     },
+    "PreviewCard": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "backgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "borderRadius": 0,
+        "borderWidth": 1,
+        "flex": 1,
+        "outerBorderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "outerBorderGap": 0,
+        "outerBorderWidth": 0,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0,
+        "separatorColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        }
+      }
+    },
+    "PriceLockup": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "bottomLinksMarginLeft": 4,
+        "bottomTextMarginTop": 4,
+        "dividerColor": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
+          "alpha": 1
+        },
+        "fontColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "footnoteGap": 4,
+        "footnoteMarginTop": 4,
+        "priceMarginBottom": 8,
+        "strikeThroughBackground": {
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
+          "alpha": 1
+        },
+        "strikeThroughHeight": 2,
+        "topTextMarginBottom": 4
+      }
+    },
     "Progress": {
       "appearances": {
         "size": {
@@ -3871,25 +4472,6 @@
             "outerBorderWidth": 0
           }
         },
-        {
-          "if": {
-            "checked": true
-          },
-          "tokens": {
-            "inputBackgroundColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
-              "alpha": 1
-            },
-            "inputOutlineColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "inactive": true
@@ -3934,9 +4516,9 @@
               "alpha": 1
             },
             "inputBackgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+              "red": 1,
+              "green": 1,
+              "blue": 1,
               "alpha": 1
             },
             "inputBorderColor": {
@@ -3947,9 +4529,9 @@
             },
             "inputBorderWidth": 3,
             "inputOutlineColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+              "red": 1,
+              "green": 1,
+              "blue": 1,
               "alpha": 1
             },
             "inputOutlineWidth": 1,
@@ -3958,7 +4540,15 @@
               "green": 0.4,
               "blue": 0.4,
               "alpha": 1
-            }
+            },
+            "outerBorderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "outerBorderGap": 1,
+            "outerBorderWidth": 1
           }
         }
       ],
@@ -4551,57 +5141,56 @@
       "rules": [
         {
           "if": {
-            "validation": "success"
+            "focus": true
           },
           "tokens": {
             "borderColor": {
-              "red": 0.1451,
-              "green": 0.5451,
-              "blue": 0.04314,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             },
-            "validationIcon": "PaletteIconCheckCircledFilled",
-            "validationIconColor": {
-              "red": 0.1451,
-              "green": 0.5451,
-              "blue": 0.04314,
-              "alpha": 1
-            }
+            "borderWidth": 3
           }
         },
         {
           "if": {
-            "validation": "error"
+            "validation": "success"
           },
           "tokens": {
             "borderColor": {
-              "red": 0.87451,
-              "green": 0.23922,
-              "blue": 0.04706,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             },
-            "validationIcon": "PaletteIconTimes",
+            "validationIcon": "PaletteIconCheckCircledFilled",
             "validationIconColor": {
-              "red": 0.87451,
-              "green": 0.23922,
-              "blue": 0.04706,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "focus": true
+            "validation": "error"
           },
           "tokens": {
             "borderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
               "alpha": 1
             },
-            "borderWidth": 2,
-            "icon": null
+            "validationIcon": "PaletteIconExclamationOctagon",
+            "validationIconColor": {
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
+              "alpha": 1
+            }
           }
         },
         {
@@ -4620,7 +5209,8 @@
               "green": 0.93725,
               "blue": 0.93725,
               "alpha": 1
-            }
+            },
+            "icon": null
           }
         }
       ],
@@ -4639,10 +5229,10 @@
         },
         "borderRadius": 4,
         "borderWidth": 1,
-        "color": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
+        "color": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
           "alpha": 1
         },
         "fontName": "StagSans",
@@ -4670,10 +5260,10 @@
           "alpha": 0
         },
         "outerBorderWidth": 2,
-        "paddingBottom": 10,
+        "paddingBottom": 12,
         "paddingLeft": 16,
         "paddingRight": 16,
-        "paddingTop": 10,
+        "paddingTop": 12,
         "validationIcon": null,
         "validationIconColor": {
           "red": 0,
@@ -5150,6 +5740,81 @@
         "showStepTrackerLabel": true
       }
     },
+    "Table": {
+      "appearances": {
+        "spacing": {
+          "type": "variant",
+          "values": ["compact"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "spacing": "compact"
+          },
+          "tokens": {
+            "cellPaddingBottom": 8,
+            "cellPaddingTop": 8
+          }
+        }
+      ],
+      "tokens": {
+        "cellBackground": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "cellBoxShadowColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "cellHeadingBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "cellHeadingBoxShadowColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "cellPaddingBottom": 16,
+        "cellPaddingLeft": 16,
+        "cellPaddingRight": 16,
+        "cellPaddingTop": 16,
+        "cellRowHeadingBackground": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "cellStickyShadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 4,
+          "blur": 8,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.1
+          }
+        },
+        "cellSubheadingBackground": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "tablePaddingBottom": 24
+      }
+    },
     "Tabs": {
       "appearances": {},
       "rules": [],
@@ -5162,7 +5827,7 @@
         },
         "borderBottomWidth": 0,
         "buttonClearance": 32,
-        "gutter": 16,
+        "gutter": null,
         "nextIcon": "PaletteIconChevronRight",
         "previousIcon": "PaletteIconChevronLeft",
         "space": 0
@@ -5170,6 +5835,15 @@
     },
     "TabsItem": {
       "appearances": {
+        "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],
+          "type": "state"
+        },
         "selected": {
           "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],
@@ -5183,53 +5857,123 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
-              "alpha": 1
-            },
-            "borderWidth": 0,
-            "color": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
+            "color": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "highlightBarBorderWidth": 1,
+            "highlightBarHeight": 1,
             "highlightColor": {
               "red": 0.00392,
               "green": 0.41961,
               "blue": 0.41569,
               "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "highlightBarBorderWidth": 0
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "color": {
+              "red": 0.89804,
+              "green": 0.96863,
+              "blue": 0.98431,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "highlightBarBorderWidth": 1,
+            "highlightBarHeight": 1,
+            "highlightColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
             },
-            "highlightTriangleSize": 8
+            "highlightBarBorderWidth": 0
           }
         }
       ],
       "tokens": {
         "backgroundColor": {
-          "red": 0.93725,
-          "green": 0.93725,
-          "blue": 0.93725,
+          "red": 1,
+          "green": 1,
+          "blue": 1,
           "alpha": 1
         },
         "borderColor": {
-          "red": 0.78824,
-          "green": 0.78431,
-          "blue": 0.78431,
-          "alpha": 1
-        },
-        "borderRadius": 0,
-        "borderWidth": 1,
-        "color": {
           "red": 0,
           "green": 0,
           "blue": 0,
+          "alpha": 0
+        },
+        "borderRadius": 0,
+        "borderWidth": 0,
+        "color": {
+          "red": 0.4,
+          "green": 0.4,
+          "blue": 0.4,
           "alpha": 1
         },
         "fontName": "StagSans",
         "fontScaleCap": 64,
         "fontSize": 16,
-        "fontWeight": 700,
+        "fontWeight": 600,
         "highlightBarBorderRadius": 0,
         "highlightBarBorderWidth": 0,
         "highlightBarHeight": 0,
@@ -5241,10 +5985,10 @@
         },
         "highlightTriangleSize": 0,
         "letterSpacing": 0,
-        "lineHeight": 1.1,
+        "lineHeight": 1.5,
         "maxWidth": null,
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
+        "paddingHorizontal": 24,
+        "paddingVertical": 4,
         "space": 0,
         "textAlign": "center",
         "textTransform": "none"
@@ -5476,16 +6220,16 @@
           },
           "tokens": {
             "borderColor": {
-              "red": 0.1451,
-              "green": 0.5451,
-              "blue": 0.04314,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             },
             "icon": "PaletteIconCheckCircledFilled",
             "iconColor": {
-              "red": 0.1451,
-              "green": 0.5451,
-              "blue": 0.04314,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
@@ -5496,16 +6240,16 @@
           },
           "tokens": {
             "borderColor": {
-              "red": 0.87451,
-              "green": 0.23922,
-              "blue": 0.04706,
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
               "alpha": 1
             },
-            "icon": "PaletteIconTimes",
+            "icon": "PaletteIconExclamationOctagon",
             "iconColor": {
-              "red": 0.87451,
-              "green": 0.23922,
-              "blue": 0.04706,
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
               "alpha": 1
             }
           }
@@ -5522,7 +6266,7 @@
               "blue": 0.41569,
               "alpha": 1
             },
-            "borderWidth": 2,
+            "borderWidth": 3,
             "icon": null
           }
         },
@@ -5665,6 +6409,73 @@
         "timelineContainerDirection": "column"
       }
     },
+    "Toast": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "animationBackgroundColorAfter": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationBackgroundColorBefore": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationColorAfter": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "animationColorBefore": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationDivColorAfter": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationDivColorBefore": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationFillColorAfter": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationFillColorBefore": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "animationHeightAfter": 24,
+        "animationHeightBefore": 0,
+        "animationPaddingBottomAfter": 16,
+        "animationPaddingBottomBefore": 0,
+        "animationPaddingTopAfter": 16,
+        "animationPaddingTopBefore": 0,
+        "containerBackgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
+        "containerGap": 12
+      }
+    },
     "ToggleSwitch": {
       "appearances": {
         "inactive": {
@@ -6243,6 +7054,20 @@
         "textTransform": "none"
       }
     },
+    "WaffleGrid": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "itemPadding": 16,
+        "rowBorderWidth": 1
+      }
+    },
     "spacingScale": {
       "appearances": {
         "space": {
@@ -6430,7 +7255,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.17.0",
+    "themeTokensVersion": "2.19.0",
     "name": "theme-koodo"
   }
 }