@telus-uds/theme-allium 5.0.0 → 5.2.0

package/theme.json

@@ -1176,6 +1176,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.",
@@ -1189,6 +1194,7 @@
             "viewport": ["lg", "xl"]
           },
           "tokens": {
+            "gap": "{palette.size.size3}",
             "space": "{system.integer.3}"
           }
         },
@@ -1201,16 +1207,40 @@
             "alignItems": "{system.flexAlign.stretch}",
             "direction": "{system.direction.column}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius99}",
+            "padding": "{palette.size.size8}",
+            "space": "{system.integer.2}"
+          }
+        },
+        {
+          "if": {
+            "style": "contained",
+            "viewport": ["xs", "sm", "md", "lg", "xl"]
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius24}"
+          }
         }
       ],
       "tokens": {
         "alignItems": "{system.flexAlign.center}",
+        "backgroundColor": "{system.color.none}",
+        "borderRadius": "{palette.radius.none}",
         "direction": "{system.direction.row}",
         "fieldSpace": "{system.integer.2}",
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
+        "gap": "{palette.size.size2}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "space": "{system.integer.1}"
+        "padding": "{system.size.zero}",
+        "space": "{system.integer.2}"
       }
     },
     "ButtonGroupItem": {
@@ -1221,6 +1251,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",
@@ -1330,6 +1365,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.size32}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.purpleTelus}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDark}"
+          }
         }
       ],
       "tokens": {
@@ -1773,6 +1885,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}"
       }
@@ -2777,6 +2893,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.greenAccessible}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyCloud}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenSanFelix}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenSanFelix}",
+            "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": [],
@@ -3184,6 +3357,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.greyCharcoal}"
+      }
+    },
     "Footnote": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -3466,7 +3664,16 @@
         },
         "color": {
           "type": "variant",
-          "values": ["brand", "default", "subtle", "success", "danger", "warning", "inverse"]
+          "values": [
+            "brand",
+            "subtle",
+            "offer",
+            "success",
+            "danger",
+            "warning",
+            "inverse",
+            "default"
+          ]
         },
         "padding": {
           "type": "variant",
@@ -3667,6 +3874,14 @@
             "color": "{palette.color.white}"
           }
         },
+        {
+          "if": {
+            "color": "offer"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
         {
           "if": {
             "size": "extraLarge"
@@ -4246,6 +4461,14 @@
             "iconSpace": "{system.integer.1}"
           }
         },
+        {
+          "if": {
+            "iconPosition": "inline"
+          },
+          "tokens": {
+            "iconSpace": "{system.integer.2}"
+          }
+        },
         {
           "if": {
             "focus": true
@@ -4960,14 +5183,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.greyCharcoal}",
         "headerFontName": "{palette.fontName.HNforTELUSSA}",
         "headerFontSize": "{palette.fontSize.size16}",
         "headerFontWeight": "{palette.fontWeight.weight500}",
         "headerLineHeight": "{palette.lineHeight.ratio3to2}",
-        "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.HNforTELUSSA}",
         "subHeaderFontSize": "{palette.fontSize.size14}",
@@ -7538,6 +7767,7 @@
         "icon": "{palette.icon.StatusInfo}",
         "iconColor": "{palette.color.greyCharcoal}",
         "iconGradient": "{system.gradient.none}",
+        "marginLeft": "{palette.size.size8}",
         "paddingBottom": "{palette.size.size0}",
         "paddingLeft": "{palette.size.size0}",
         "paddingRight": "{palette.size.size0}",
@@ -7691,6 +7921,85 @@
         "shadow": "{system.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.greyAlabaster}",
+        "borderTopColor": "{palette.color.greyMystic}",
+        "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.focus}",
+        "hover": "{appearances.TabBarItem.hover}",
+        "pressed": "{appearances.TabBarItem.pressed}",
+        "selected": "{appearances.TabBarItem.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "color": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "iconSize": "{palette.size.size26}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.purpleTelus}",
+            "iconColor": "{palette.color.purpleTelus}",
+            "iconSize": "{palette.size.size22}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size26}"
+          }
+        }
+      ],
+      "tokens": {
+        "activeColor": "{palette.color.purpleTelus}",
+        "backgroundColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.greyShuttle}",
+        "fontName": "{palette.fontName.HNforTELUSSA}",
+        "fontWeight": "{palette.fontWeight.weight500}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconSize": "{palette.size.size24}",
+        "lineHeight": "{palette.lineHeight.ratio8to7}",
+        "paddingBottom": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size4}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {