@telus-uds/theme-koodo 5.19.0 → 5.21.0

package/theme.json

@@ -1245,7 +1245,7 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
-        "dividerColor": "{palette.color.black}",
+        "dividerColor": "{palette.color.silver}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight600}",
@@ -1279,6 +1279,11 @@
     },
     "ButtonGroup": {
       "appearances": {
+        "style": {
+          "description": "Configure `style` variant for `ButtonGroup`",
+          "type": "variant",
+          "values": ["contained"]
+        },
         "viewport": "{appearances.system.viewport}",
         "width": {
           "description": "Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.",
@@ -1292,6 +1297,7 @@
             "viewport": ["xs", "sm"]
           },
           "tokens": {
+            "gap": "{palette.size.size3}",
             "space": "{system.integer.2}"
           }
         },
@@ -1312,15 +1318,30 @@
             "alignItems": "{system.flexAlign.stretch}",
             "direction": "{system.direction.column}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius8}",
+            "padding": "{palette.size.size8}",
+            "space": "{system.integer.2}"
+          }
         }
       ],
       "tokens": {
         "alignItems": "{system.flexAlign.center}",
+        "backgroundColor": "{system.color.none}",
+        "borderRadius": "{system.radius.zero}",
         "direction": "{system.direction.row}",
         "fieldSpace": "{system.integer.2}",
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
+        "gap": "{palette.size.size2}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "padding": "{system.size.zero}",
         "space": "{system.integer.2}"
       }
     },
@@ -1332,6 +1353,11 @@
         "inactive": "{appearances.ButtonGroupItem.inactive}",
         "pressed": "{appearances.ButtonGroupItem.pressed}",
         "selected": "{appearances.ButtonGroupItem.selected}",
+        "style": {
+          "description": "Configure `style` variant for `ButtonGroupItem`",
+          "type": "variant",
+          "values": ["contained"]
+        },
         "width": {
           "description": "Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.",
           "type": "variant",
@@ -1431,6 +1457,83 @@
           "tokens": {
             "width": "{system.size.full}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "height": "{palette.size.size40}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.blackLight}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purple}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDark}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purple}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.blackLight}",
+            "color": "{palette.color.dove}"
+          }
         }
       ],
       "tokens": {
@@ -1878,6 +1981,10 @@
         "fieldSpace": "{system.integer.3}",
         "outlineOffset": "{palette.size.size8}",
         "outlineWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size24}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size24}",
+        "paddingTop": "{palette.size.size24}",
         "showIcon": "{system.show.true}",
         "space": "{system.integer.3}"
       }
@@ -2929,6 +3036,63 @@
         "width": "{palette.size.size1}"
       }
     },
+    "DownloadApp": {
+      "appearances": {
+        "focus": "{appearances.DownloadApp.focus}",
+        "hover": "{appearances.DownloadApp.hover}",
+        "pressed": "{appearances.DownloadApp.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.dove}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        }
+      ],
+      "tokens": {
+        "androidENIcon": "{palette.icon.AndroidEN}",
+        "androidFRIcon": "{palette.icon.AndroidFR}",
+        "borderColor": "{palette.color.transparent}",
+        "borderGap": "{palette.size.size2}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.border1}",
+        "iosENIcon": "{palette.icon.IOSEN}",
+        "iosFRIcon": "{palette.icon.IOSFR}",
+        "padding": "{palette.size.size1}"
+      }
+    },
     "ExpandCollapse": {
       "appearances": {},
       "rules": [],
@@ -3364,6 +3528,31 @@
         "paddingTop": "{system.size.zero}"
       }
     },
+    "FileUpload": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "buttonBackgroundColor": "{system.color.none}",
+        "buttonBorderColor": "{system.color.none}",
+        "buttonBorderRadius": "{system.radius.none}",
+        "buttonBorderWidth": "{system.border.none}",
+        "buttonHeight": "{system.size.none}",
+        "buttonMinWidth": "{system.size.none}",
+        "buttonTextColor": "{system.color.none}",
+        "buttonWidth": "{system.size.none}",
+        "notificationBackgroundColor": "{system.color.none}",
+        "notificationBorderColor": "{system.color.none}",
+        "notificationBorderRadius": "{system.radius.none}",
+        "notificationDismissButtonGap": "{system.size.none}",
+        "notificationDismissIcon": "{system.icon.none}",
+        "notificationDismissIconColor": "{system.color.none}",
+        "notificationIcon": "{system.icon.none}",
+        "notificationIconColor": "{system.color.none}",
+        "notificationIconGap": "{system.size.none}",
+        "notificationIconSize": "{system.size.none}",
+        "notificationTextColor": "{palette.color.black}"
+      }
+    },
     "Footnote": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -3808,7 +3997,7 @@
             "color": "offer"
           },
           "tokens": {
-            "color": "{palette.color.pink}"
+            "color": "{palette.color.purple}"
           }
         },
         {
@@ -5113,14 +5302,20 @@
       ],
       "tokens": {
         "buttonDirection": "{system.direction.row}",
+        "contentMarginBottom": "{palette.size.size32}",
+        "contentMarginLeft": "{palette.size.size16}",
+        "contentMarginRight": "{palette.size.size16}",
+        "contentMarginTop": "{palette.size.size24}",
+        "contentPaddingLeft": "{palette.size.size16}",
+        "contentPaddingRight": "{palette.size.size16}",
         "headerFontColor": "{palette.color.black}",
         "headerFontName": "{palette.fontName.StagSans}",
         "headerFontSize": "{palette.fontSize.size24}",
         "headerFontWeight": "{palette.fontWeight.weight700}",
         "headerLineHeight": "{palette.lineHeight.ratio4to3}",
-        "maxHeightSize": "{system.size.zero}",
+        "maxHeightSize": "{palette.size.size480}",
         "maxWidthSize": "{system.size.zero}",
-        "minHeight": "{palette.size.size412}",
+        "minHeight": "{system.size.zero}",
         "minWidth": "{palette.size.size320}",
         "subHeaderFontName": "{palette.fontName.StagSans}",
         "subHeaderFontSize": "{palette.fontSize.size16}",
@@ -7694,6 +7889,7 @@
         "icon": "{palette.icon.ToolTipFilled}",
         "iconColor": "{palette.color.black}",
         "iconGradient": "{system.gradient.none}",
+        "marginLeft": "{palette.size.size8}",
         "paddingBottom": "{palette.size.size0}",
         "paddingLeft": "{palette.size.size0}",
         "paddingRight": "{palette.size.size0}",
@@ -7849,6 +8045,85 @@
         "shadow": "{palette.shadow.none}"
       }
     },
+    "TabBar": {
+      "appearances": {
+        "pressed": "{appearances.TabBarItem.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.greyLight}",
+        "borderTopColor": "{palette.color.gallery}",
+        "borderTopWidth": "{palette.border.border1}",
+        "gap": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size4}",
+        "paddingLeft": "{palette.size.size8}",
+        "paddingRight": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size4}"
+      }
+    },
+    "TabBarItem": {
+      "appearances": {
+        "focus": "{appearances.TabBarItem.pressed}",
+        "hover": "{appearances.TabBarItem.pressed}",
+        "pressed": "{appearances.TabBarItem.pressed}",
+        "selected": "{appearances.TabBarItem.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "color": "{palette.color.black}",
+            "iconColor": "{palette.color.black}",
+            "iconSize": "{palette.size.size26}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.purpleDark}",
+            "iconColor": "{palette.color.purpleDark}",
+            "iconSize": "{palette.size.size22}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size26}"
+          }
+        }
+      ],
+      "tokens": {
+        "activeColor": "{palette.color.purple}",
+        "backgroundColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.black}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "iconColor": "{palette.color.black}",
+        "iconSize": "{palette.size.size24}",
+        "lineHeight": "{palette.lineHeight.ratio4to3}",
+        "paddingBottom": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size4}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {
@@ -8840,7 +9115,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
+            "backgroundColor": "{palette.color.silver}",
             "switchColor": "{palette.color.blackLight}"
           }
         },
@@ -8860,7 +9135,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
+            "backgroundColor": "{palette.color.silver}",
             "icon": "{palette.icon.Check}",
             "iconColor": "{palette.color.white}",
             "outerBorderColor": "{palette.color.black}",
@@ -8901,7 +9176,7 @@
             "inactive": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
+            "backgroundColor": "{palette.color.silver}",
             "opacity": "{palette.opacity.opacity5}",
             "switchBorderColor": "{palette.color.transparent}",
             "switchColor": "{palette.color.silver}"
@@ -8913,7 +9188,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
+            "backgroundColor": "{palette.color.silver}",
             "icon": "{palette.icon.Check}",
             "iconColor": "{palette.color.white}",
             "opacity": "{palette.opacity.opacity5}",