@telus-uds/theme-public-mobile 2.28.0 → 2.30.0

package/theme.json

@@ -1157,7 +1157,7 @@
         "borderRadius": "{palette.radius.radius8}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.slate100}",
-        "dividerColor": "{palette.color.apricot50}",
+        "dividerColor": "{palette.color.slate25}",
         "fontName": "{palette.fontName.SofiaPro}",
         "fontSize": "{palette.fontSize.size18}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -1191,6 +1191,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.",
@@ -1204,6 +1209,7 @@
             "viewport": ["lg", "xl"]
           },
           "tokens": {
+            "gap": "{palette.size.size3}",
             "space": "{system.integer.3}"
           }
         },
@@ -1216,15 +1222,31 @@
             "alignItems": "{system.flexAlign.stretch}",
             "direction": "{system.direction.column}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link25}",
+            "borderRadius": "{palette.radius.radius12}",
+            "gap": "{palette.size.size2}",
+            "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.1}"
       }
     },
@@ -1236,6 +1258,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",
@@ -1344,6 +1371,85 @@
           "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.link100}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate100}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link100}",
+            "color": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.slate100}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate120}",
+            "color": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -1797,6 +1903,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}"
       }
@@ -2797,6 +2907,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.link100}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.link50}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.link50}",
+            "borderRadius": "{palette.radius.radius4}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.link50}",
+            "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": [],
@@ -3232,6 +3399,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.white}"
+      }
+    },
     "Footnote": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -5024,14 +5216,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.slate100}",
         "headerFontName": "{palette.fontName.SofiaPro}",
         "headerFontSize": "{palette.fontSize.size24}",
         "headerFontWeight": "{palette.fontWeight.weight700}",
         "headerLineHeight": "{palette.lineHeight.ratio9to7}",
-        "maxHeightSize": "{system.size.zero}",
+        "maxHeightSize": "{palette.size.size480}",
         "maxWidthSize": "{system.size.zero}",
-        "minHeight": "{palette.size.size320}",
+        "minHeight": "{system.size.zero}",
         "minWidth": "{palette.size.size320}",
         "subHeaderFontName": "{palette.fontName.SofiaPro}",
         "subHeaderFontSize": "{palette.fontSize.size18}",
@@ -7580,6 +7778,7 @@
         "icon": "{palette.icon.WarningError}",
         "iconColor": "{palette.color.slate100}",
         "iconGradient": "{system.gradient.none}",
+        "marginLeft": "{palette.size.size8}",
         "paddingBottom": "{palette.size.size0}",
         "paddingLeft": "{palette.size.size0}",
         "paddingRight": "{palette.size.size0}",
@@ -7733,6 +7932,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.pressed}",
+        "hover": "{appearances.TabBarItem.pressed}",
+        "pressed": "{appearances.TabBarItem.pressed}",
+        "selected": "{appearances.TabBarItem.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate5}",
+            "color": "{palette.color.slate120}",
+            "iconColor": "{palette.color.slate120}",
+            "iconSize": "{palette.size.size26}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.slate25}",
+            "iconColor": "{palette.color.slate25}",
+            "iconSize": "{palette.size.size22}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "iconSize": "{palette.size.size26}"
+          }
+        }
+      ],
+      "tokens": {
+        "activeColor": "{palette.color.slate100}",
+        "backgroundColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.radius4}",
+        "color": "{palette.color.slate75}",
+        "fontName": "{palette.fontName.SofiaPro}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "iconColor": "{palette.color.slate75}",
+        "iconSize": "{palette.size.size24}",
+        "lineHeight": "{palette.lineHeight.ratio4to3}",
+        "paddingBottom": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size4}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {