@telus-uds/theme-koodo 3.19.0 → 3.21.0

package/theme.json

@@ -1232,6 +1232,10 @@
         "borderColor": "{system.color.none}",
         "borderRadius": "{palette.radius.none}",
         "borderWidth": "{palette.border.none}",
+        "contentAlignItems": "{system.flexAlign.stretch}",
+        "contentFlexGrow": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.0}",
+        "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "flex": "{system.integer.1}",
         "minWidth": "{system.size.none}",
         "paddingBottom": "{palette.size.size16}",
@@ -1969,10 +1973,10 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.silver}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.border1}",
-        "iconColor": "{palette.color.mosque}",
+        "iconColor": "{palette.color.black}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size16}",
         "iconTranslateX": "{system.size.zero}",
@@ -2408,6 +2412,13 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "Image": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderRadius": "{palette.radius.radius4}"
+      }
+    },
     "InputLabel": {
       "appearances": {},
       "rules": [],
@@ -2740,7 +2751,11 @@
             "viewport": ["xs", "sm"]
           },
           "tokens": {
-            "height": "{system.size.full}"
+            "height": "{system.size.full}",
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size24}",
+            "paddingRight": "{palette.size.size24}",
+            "paddingTop": "{palette.size.size24}"
           }
         },
         {
@@ -2769,7 +2784,9 @@
         "backdropColor": "{palette.color.black}",
         "backdropOpacity": "{palette.opacity.opacity5}",
         "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.white}",
         "borderRadius": "{palette.radius.radius4}",
+        "cancelButtonColor": "{palette.color.black}",
         "closeIcon": "{palette.icon.Times}",
         "closeIconColor": "{palette.color.black}",
         "closeIconSize": "{palette.size.size24}",
@@ -2778,13 +2795,19 @@
         "containerPaddingLeft": "{system.size.zero}",
         "containerPaddingRight": "{system.size.zero}",
         "containerPaddingTop": "{system.size.zero}",
+        "gap": "{palette.size.size16}",
+        "headingColor": "{palette.color.black}",
+        "headingPaddingRight": "{palette.size.size24}",
         "height": "{system.size.none}",
+        "marginLeft": "{palette.size.size24}",
+        "marginRight": "{palette.size.size24}",
         "maxWidth": "{system.size.full}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
-        "shadow": "{palette.shadow.none}"
+        "paddingBottom": "{palette.size.size24}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size24}",
+        "shadow": "{palette.shadow.none}",
+        "subHeadingMarginTop": "{palette.size.size8}"
       }
     },
     "Notification": {
@@ -3668,6 +3691,10 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
+        "contentAlignItems": "{system.flexAlign.stretch}",
+        "contentFlexGrow": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.0}",
+        "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "contentSpace": "{system.integer.2}",
         "flex": "{system.integer.1}",
         "fontName": "{palette.fontName.StagSans}",
@@ -4237,6 +4264,39 @@
         "showStepTrackerLabel": "{system.show.true}"
       }
     },
+    "Table": {
+      "appearances": {
+        "spacing": {
+          "type": "variant",
+          "values": ["compact"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "spacing": "compact"
+          },
+          "tokens": {
+            "cellPaddingBottom": "{palette.size.size8}",
+            "cellPaddingTop": "{palette.size.size8}"
+          }
+        }
+      ],
+      "tokens": {
+        "cellBackground": "{palette.color.white}",
+        "cellBoxShadowColor": "{palette.color.black}",
+        "cellHeadingBackground": "{palette.color.black}",
+        "cellHeadingBoxShadowColor": "{palette.color.black}",
+        "cellPaddingBottom": "{palette.size.size16}",
+        "cellPaddingLeft": "{palette.size.size16}",
+        "cellPaddingRight": "{palette.size.size16}",
+        "cellPaddingTop": "{palette.size.size16}",
+        "cellRowHeadingBackground": "{palette.color.white}",
+        "cellStickyShadow": "{palette.shadow.elevation1}",
+        "cellSubheadingBackground": "{palette.color.black}",
+        "tablePaddingBottom": "{palette.size.size24}"
+      }
+    },
     "Tabs": {
       "appearances": {},
       "rules": [],
@@ -4244,7 +4304,7 @@
         "borderBottomColor": "{system.color.transparent}",
         "borderBottomWidth": "{system.border.zero}",
         "buttonClearance": "{palette.size.size32}",
-        "gutter": "{palette.size.size16}",
+        "gutter": "{system.size.none}",
         "nextIcon": "{palette.icon.ChevronRight}",
         "previousIcon": "{palette.icon.ChevronLeft}",
         "space": "{system.integer.0}"
@@ -4254,15 +4314,24 @@
       "appearances": {
         "focus": "{appearances.TabsItem.focus}",
         "hover": "{appearances.TabsItem.hover}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": "{appearances.TabsItem.pressed}",
         "selected": "{appearances.TabsItem.pressed}"
       },
       "rules": [
         {
           "if": {
-            "focus": true
+            "selected": true
           },
           "tokens": {
-            "borderWidth": "{palette.border.border4}"
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.mosque}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.mosque}"
           }
         },
         {
@@ -4270,42 +4339,125 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.texas}"
+            "backgroundColor": "{palette.color.whiteDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.dove}"
           }
         },
         {
           "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderWidth": "{system.border.zero}",
-            "color": "{palette.color.white}",
-            "highlightColor": "{palette.color.mosque}",
-            "highlightTriangleSize": "{palette.size.size8}"
+            "backgroundColor": "{palette.color.white}",
+            "highlightColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}",
+            "color": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicleDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{system.border.zero}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "highlightBarBorderWidth": "{palette.border.border1}",
+            "highlightBarHeight": "{palette.border.border1}",
+            "highlightColor": "{palette.color.silver}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.gallery}",
-        "borderColor": "{palette.color.silver}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{system.color.transparent}",
         "borderRadius": "{system.radius.zero}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.black}",
+        "borderWidth": "{system.border.zero}",
+        "color": "{palette.color.dove}",
         "fontName": "{palette.fontName.StagSans}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight700}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "highlightBarBorderRadius": "{system.radius.zero}",
         "highlightBarBorderWidth": "{system.border.zero}",
         "highlightBarHeight": "{system.border.zero}",
         "highlightColor": "{system.color.transparent}",
         "highlightTriangleSize": "{system.size.zero}",
         "letterSpacing": "{system.letterSpacing.none}",
-        "lineHeight": "{palette.lineHeight.multiply110}",
+        "lineHeight": "{palette.lineHeight.multiply150}",
         "maxWidth": "{system.size.none}",
-        "paddingHorizontal": "{palette.size.size16}",
-        "paddingVertical": "{palette.size.size16}",
+        "paddingHorizontal": "{palette.size.size24}",
+        "paddingVertical": "{palette.size.size4}",
         "space": "{system.integer.0}",
         "textAlign": "{system.textAlign.center}",
         "textTransform": "{system.textTransform.none}"
@@ -4596,6 +4748,28 @@
         "timelineContainerDirection": "{system.direction.column}"
       }
     },
+    "Toast": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "animationBackgroundColorAfter": "{palette.color.white}",
+        "animationBackgroundColorBefore": "{palette.color.white}",
+        "animationColorAfter": "{palette.color.mosque}",
+        "animationColorBefore": "{palette.color.white}",
+        "animationDivColorAfter": "{palette.color.white}",
+        "animationDivColorBefore": "{palette.color.white}",
+        "animationFillColorAfter": "{palette.color.white}",
+        "animationFillColorBefore": "{palette.color.white}",
+        "animationHeightAfter": "{palette.size.size24}",
+        "animationHeightBefore": "{palette.size.size0}",
+        "animationPaddingBottomAfter": "{palette.size.size16}",
+        "animationPaddingBottomBefore": "{palette.size.size0}",
+        "animationPaddingTopAfter": "{palette.size.size16}",
+        "animationPaddingTopBefore": "{palette.size.size0}",
+        "containerBackgroundColor": "{palette.color.white}",
+        "containerGap": "{palette.size.size12}"
+      }
+    },
     "ToggleSwitch": {
       "appearances": {
         "focus": "{appearances.ToggleSwitch.focus}",
@@ -5091,6 +5265,15 @@
         "textTransform": "{system.textTransform.none}"
       }
     },
+    "WaffleGrid": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemBorderColor": "{palette.color.transparent}",
+        "itemPadding": "{palette.size.size16}",
+        "rowBorderWidth": "{palette.border.border1}"
+      }
+    },
     "spacingScale": {
       "appearances": {
         "space": "{appearances.spacingScale.space}",