feat(radio): make radio buttons full width for ionic theme

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.4](https://github.com/ionic-team/ionic-framework/compare/v8.5.3...v8.5.4) (2025-04-09)
+
+
+### Bug Fixes
+
+* **config:** properly export LogLevel ([#30335](https://github.com/ionic-team/ionic-framework/issues/30335)) ([835ad52](https://github.com/ionic-team/ionic-framework/commit/835ad52c290a3687dc9e9c6bf4326948a9c3fe0d)), closes [#30255](https://github.com/ionic-team/ionic-framework/issues/30255)
+
+
+
+
+
+## [8.5.3](https://github.com/ionic-team/ionic-framework/compare/v8.5.2...v8.5.3) (2025-04-02)
+
+
+### Bug Fixes
+
+* **checkbox:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30300](https://github.com/ionic-team/ionic-framework/issues/30300)) ([bb40a1e](https://github.com/ionic-team/ionic-framework/commit/bb40a1efe71237075db2f3a536eddeb1d7c400fc))
+* **overlays:** exclude backdrop-no-scroll class when toast is presented ([#30123](https://github.com/ionic-team/ionic-framework/issues/30123)) ([7f9df7a](https://github.com/ionic-team/ionic-framework/commit/7f9df7a89447e51eec0b1516069a1e0c9c9722e5)), closes [#30112](https://github.com/ionic-team/ionic-framework/issues/30112)
+* **segment-view:** prevent vertical scroll while scrolling horizontally ([#30276](https://github.com/ionic-team/ionic-framework/issues/30276)) ([105796f](https://github.com/ionic-team/ionic-framework/commit/105796f6bc8f961f58ecbb101285097cc86891c0)), closes [#30001](https://github.com/ionic-team/ionic-framework/issues/30001)
+
+
+
+
+
+## [8.5.2](https://github.com/ionic-team/ionic-framework/compare/v8.5.1...v8.5.2) (2025-03-26)
+
+
+### Bug Fixes
+
+* **datetime:** support typing time values in a 24-hour format ([#30147](https://github.com/ionic-team/ionic-framework/issues/30147)) ([ac6e6a0](https://github.com/ionic-team/ionic-framework/commit/ac6e6a03174263d09ec55c9742a026862a3df444)), closes [#28877](https://github.com/ionic-team/ionic-framework/issues/28877)
+* **range:** emit ionInput when value changes ([#30293](https://github.com/ionic-team/ionic-framework/issues/30293)) ([7789bb5](https://github.com/ionic-team/ionic-framework/commit/7789bb59ee5c76074ff4872dc6a50ae2d83df8f5)), closes [#29619](https://github.com/ionic-team/ionic-framework/issues/29619)
+* **segment-button:** ensure consistent disabled state for segment-content error handling ([#30288](https://github.com/ionic-team/ionic-framework/issues/30288)) ([1cfa915](https://github.com/ionic-team/ionic-framework/commit/1cfa915e8fe362951c521bce970a9f5f10918ab2))
+
+
+
+
+
 ## [8.5.1](https://github.com/ionic-team/ionic-framework/compare/v8.5.0...v8.5.1) (2025-03-19)
 
 

core/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.5.4](https://github.com/ionic-team/ionic-framework/compare/v8.5.3...v8.5.4) (2025-04-09)
+
+
+### Bug Fixes
+
+* **config:** properly export LogLevel ([#30335](https://github.com/ionic-team/ionic-framework/issues/30335)) ([835ad52](https://github.com/ionic-team/ionic-framework/commit/835ad52c290a3687dc9e9c6bf4326948a9c3fe0d)), closes [#30255](https://github.com/ionic-team/ionic-framework/issues/30255)
+
+
+
+
+
+## [8.5.3](https://github.com/ionic-team/ionic-framework/compare/v8.5.2...v8.5.3) (2025-04-02)
+
+
+### Bug Fixes
+
+* **checkbox:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30300](https://github.com/ionic-team/ionic-framework/issues/30300)) ([bb40a1e](https://github.com/ionic-team/ionic-framework/commit/bb40a1efe71237075db2f3a536eddeb1d7c400fc))
+* **overlays:** exclude backdrop-no-scroll class when toast is presented ([#30123](https://github.com/ionic-team/ionic-framework/issues/30123)) ([7f9df7a](https://github.com/ionic-team/ionic-framework/commit/7f9df7a89447e51eec0b1516069a1e0c9c9722e5)), closes [#30112](https://github.com/ionic-team/ionic-framework/issues/30112)
+* **segment-view:** prevent vertical scroll while scrolling horizontally ([#30276](https://github.com/ionic-team/ionic-framework/issues/30276)) ([105796f](https://github.com/ionic-team/ionic-framework/commit/105796f6bc8f961f58ecbb101285097cc86891c0)), closes [#30001](https://github.com/ionic-team/ionic-framework/issues/30001)
+
+
+
+
+
+## [8.5.2](https://github.com/ionic-team/ionic-framework/compare/v8.5.1...v8.5.2) (2025-03-26)
+
+
+### Bug Fixes
+
+* **datetime:** support typing time values in a 24-hour format ([#30147](https://github.com/ionic-team/ionic-framework/issues/30147)) ([ac6e6a0](https://github.com/ionic-team/ionic-framework/commit/ac6e6a03174263d09ec55c9742a026862a3df444)), closes [#28877](https://github.com/ionic-team/ionic-framework/issues/28877)
+* **range:** emit ionInput when value changes ([#30293](https://github.com/ionic-team/ionic-framework/issues/30293)) ([7789bb5](https://github.com/ionic-team/ionic-framework/commit/7789bb59ee5c76074ff4872dc6a50ae2d83df8f5)), closes [#29619](https://github.com/ionic-team/ionic-framework/issues/29619)
+* **segment-button:** ensure consistent disabled state for segment-content error handling ([#30288](https://github.com/ionic-team/ionic-framework/issues/30288)) ([1cfa915](https://github.com/ionic-team/ionic-framework/commit/1cfa915e8fe362951c521bce970a9f5f10918ab2))
+
+
+
+
+
 ## [8.5.1](https://github.com/ionic-team/ionic-framework/compare/v8.5.0...v8.5.1) (2025-03-19)
 
 

core/api.txt

@@ -314,6 +314,7 @@ ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
@@ -595,17 +596,23 @@ ion-checkbox,part,supporting-text
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
+ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-chip,css-prop,--background,ionic
 ion-chip,css-prop,--background,ios
 ion-chip,css-prop,--background,md
+ion-chip,css-prop,--border-radius,ionic
 ion-chip,css-prop,--border-radius,ios
 ion-chip,css-prop,--border-radius,md
+ion-chip,css-prop,--color,ionic
 ion-chip,css-prop,--color,ios
 ion-chip,css-prop,--color,md
+ion-chip,css-prop,--focus-ring-color,ionic
+ion-chip,css-prop,--focus-ring-width,ionic
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
@@ -1183,6 +1190,7 @@ ion-item-option,prop,disabled,boolean,false,false,false
 ion-item-option,prop,download,string | undefined,undefined,false,false
 ion-item-option,prop,expandable,boolean,false,false,false
 ion-item-option,prop,href,string | undefined,undefined,false,false
+ion-item-option,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
 ion-item-option,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
@@ -1699,10 +1707,8 @@ ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,
 ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
-ion-progress-bar,css-prop,--background,ionic
 ion-progress-bar,css-prop,--background,ios
 ion-progress-bar,css-prop,--background,md
-ion-progress-bar,css-prop,--progress-background,ionic
 ion-progress-bar,css-prop,--progress-background,ios
 ion-progress-bar,css-prop,--progress-background,md
 ion-progress-bar,part,progress
@@ -2428,6 +2434,7 @@ ion-toast,prop,duration,number,config.getNumber('toastDuration', 0),false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-toast,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-toast,prop,icon,string | undefined,undefined,false,false
 ion-toast,prop,isOpen,boolean,false,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.1",
+  "version": "8.5.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.5.1",
+      "version": "8.5.4",
       "license": "MIT",
       "dependencies": {
         "@phosphor-icons/core": "^2.1.1",
@@ -23,7 +23,7 @@
         "@clack/prompts": "^0.10.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.51.0",
+        "@playwright/test": "^1.51.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.10.0",
@@ -44,7 +44,7 @@
         "fs-extra": "^9.0.1",
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
-        "outsystems-design-tokens": "^1.2.2",
+        "outsystems-design-tokens": "^1.2.6",
         "prettier": "^2.8.8",
         "rollup": "^2.26.4",
         "sass": "^1.33.0",
@@ -1952,12 +1952,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.51.0.tgz",
-      "integrity": "sha512-dJ0dMbZeHhI+wb77+ljx/FeC8VBP6j/rj9OAojO08JI80wTZy6vRk9KvHKiDCUh4iMpEiseMgqRBIeW+eKX6RA==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.51.1.tgz",
+      "integrity": "sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.51.0"
+        "playwright": "1.51.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -9181,9 +9181,9 @@
       }
     },
     "node_modules/outsystems-design-tokens": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.2.2.tgz",
-      "integrity": "sha512-QDarAeJQl1C3uCvRvutpK6Vj8J75bFh8fA3UApZxkvtOTKYc5wzhbrz2w0bGm9CV8VVojftl/+2yuwe5I4APZA==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.2.6.tgz",
+      "integrity": "sha512-Wqv7vR1nB6G8WfwKVMqpifhugT+iz5dh25QMWW/XFkblIm2e+mQcUqQw0W9lPSihWKH8wgJfe7zY0mT5G5h3VA==",
       "dev": true,
       "dependencies": {
         "glob": "^11.0.0",
@@ -9665,12 +9665,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.51.0.tgz",
-      "integrity": "sha512-442pTfGM0xxfCYxuBa/Pu6B2OqxqqaYq39JS8QDMGThUvIOCd6s0ANDog3uwA0cHavVlnTQzGCN7Id2YekDSXA==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.51.1.tgz",
+      "integrity": "sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.51.0"
+        "playwright-core": "1.51.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -9683,9 +9683,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.51.0.tgz",
-      "integrity": "sha512-x47yPE3Zwhlil7wlNU/iktF7t2r/URR3VLbH6EknJd/04Qc/PSJ0EY3CMXipmglLG+zyRxW6HNo2EGbKLHPWMg==",
+      "version": "1.51.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.51.1.tgz",
+      "integrity": "sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -11517,9 +11517,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
       "peer": true,

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.5.1",
+  "version": "8.5.4",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -45,7 +45,7 @@
     "@clack/prompts": "^0.10.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -66,7 +66,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.2.2",
+    "outsystems-design-tokens": "^1.2.6",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/scripts/testing/styles.css

@@ -56,7 +56,7 @@ html.ios.ios {
 html.ionic,
 html.ionic.ios,
 html.ionic.md {
-  --ionic-global-background-color: var(--background);
+  --ion-background-color: var(--background);
   --ion-font-family: initial;
 }
 

core/src/components.d.ts

@@ -429,6 +429,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -803,6 +807,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled": boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -1696,6 +1704,10 @@ export namespace Components {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href": string | undefined;
+        /**
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -3832,6 +3844,10 @@ export namespace Components {
           * Additional attributes to pass to the toast.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
          */
@@ -5870,6 +5886,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6279,6 +6299,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled"?: boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -7188,6 +7212,10 @@ declare namespace LocalJSX {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href"?: string | undefined;
+        /**
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -9360,6 +9388,10 @@ declare namespace LocalJSX {
           * Additional attributes to pass to the toast.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
          */

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  min-width: 272px;
+  min-width: calc(#{globals.$ion-scale-6200} + #{globals.$ion-space-600});
 
-  background-color: globals.$ion-primitives-base-white;
+  background-color: globals.$ion-bg-neutral-subtlest-default;
 }
 
 // Inset Accordion Group

core/src/components/accordion/accordion.ionic.scss

@@ -21,7 +21,7 @@
 
   height: globals.$ion-border-size-025;
 
-  background-color: globals.$ion-primitives-neutral-300;
+  background-color: globals.$ion-border-default;
 
   content: "";
 
@@ -43,9 +43,9 @@
 // we are adding a border to the ::after element of the accordion.
 ::slotted(ion-item[slot="header"]) {
   --border-radius: inherit;
-  --color: #{globals.$ion-primitives-neutral-1200};
-  --border-width: 0;
-  --inner-border-width: 0;
+  --color: #{globals.$ion-text-default};
+  --border-width: #{globals.$ion-border-size-0};
+  --inner-border-width: #{globals.$ion-scale-0};
   --min-height: #{globals.$ion-scale-700};
   --padding-top: #{globals.$ion-space-300};
   --padding-end: #{globals.$ion-space-400};
@@ -62,7 +62,7 @@
   @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
-  color: globals.$ion-primitives-neutral-1000;
+  color: globals.$ion-text-default;
 }
 
 // Disabled Accordion

core/src/components/avatar/avatar.common.scss

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins.scss";
 
 // Avatar
 // --------------------------------------------------

core/src/components/avatar/avatar.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar.common";
+@use "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -8,21 +8,19 @@
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
+  @include globals.typography(globals.$ion-heading-h6-medium);
+
   display: flex;
 
   align-items: center;
   justify-content: center;
 
-  background: globals.$ion-primitives-neutral-100;
-  color: globals.$ion-primitives-neutral-800;
-
-  font-weight: globals.$ion-font-weight-medium;
-
-  line-height: globals.$ion-font-line-height-700;
+  background: globals.$ion-bg-neutral-subtlest-default;
+  color: globals.$ion-text-subtlest;
 }
 
 :host(:not(.avatar-image)) {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 }
 
 // Avatar Sizes
@@ -33,12 +31,10 @@
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Extra Small */
@@ -46,12 +42,10 @@
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Small */
@@ -59,12 +53,10 @@
   --padding-end: #{globals.$ion-space-150};
   --padding-start: #{globals.$ion-space-150};
 
+  @include globals.typography(globals.$ion-body-lg-medium);
+
   width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-400;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
 /* Medium */
@@ -74,8 +66,6 @@
 
   width: globals.$ion-scale-1000;
   height: globals.$ion-scale-1000;
-
-  font-size: globals.$ion-font-size-450;
 }
 
 /* Large */
@@ -83,10 +73,10 @@
   --padding-end: #{globals.$ion-space-250};
   --padding-start: #{globals.$ion-space-250};
 
+  @include globals.typography(globals.$ion-heading-h5-medium);
+
   width: globals.$ion-scale-1200;
   height: globals.$ion-scale-1200;
-
-  font-size: globals.$ion-font-size-500;
 }
 
 /* Extra Large */
@@ -94,10 +84,10 @@
   --padding-end: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-300};
 
+  @include globals.typography(globals.$ion-heading-h4-medium);
+
   width: globals.$ion-scale-1400;
   height: globals.$ion-scale-1400;
-
-  font-size: globals.$ion-font-size-550;
 }
 
 // Avatar Shapes
@@ -125,7 +115,7 @@
 // --------------------------------------------------
 
 :host(.avatar-icon) {
-  @include padding(0);
+  @include globals.padding(0);
 }
 
 :host(.avatar-xsmall) ::slotted(ion-icon) {

core/src/components/backdrop/backdrop.common.scss

@@ -1,4 +1,4 @@
-@import "./backdrop.vars";
+@import "../../themes/mixins.scss";
 
 // Backdrop
 // --------------------------------------------------
@@ -15,7 +15,6 @@
   cursor: pointer;
   opacity: 0.01;
   touch-action: none;
-  z-index: $z-index-backdrop;
 }
 
 :host(.backdrop-hide) {

core/src/components/backdrop/backdrop.ionic.scss

@@ -1,6 +1,8 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./backdrop";
+@use "./backdrop.common";
 
 :host {
   background-color: rgba(globals.$ion-primitives-base-black-rgb, 0.7);
+
+  z-index: 2;
 }

core/src/components/backdrop/backdrop.ios.scss

@@ -1,5 +1,5 @@
-@import "./backdrop";
-@import "./backdrop.ios.vars";
+@import "./backdrop.native";
+@import "../../themes/native/native.globals.ios";
 
 :host {
   background-color: $backdrop-ios-color;

core/src/components/backdrop/backdrop.ios.vars.scss

@@ -1 +0,0 @@
-@import "../../themes/native/native.globals.ios";

core/src/components/backdrop/backdrop.md.scss

@@ -1,5 +1,5 @@
-@import "./backdrop";
-@import "./backdrop.md.vars";
+@import "./backdrop.native";
+@import "../../themes/native/native.globals.md.scss";
 
 :host {
   background-color: $backdrop-md-color;

core/src/components/backdrop/backdrop.md.vars.scss

@@ -1 +0,0 @@
-@import "../../themes/native/native.globals.md";

core/src/components/backdrop/backdrop.native.scss

@@ -1,7 +1,9 @@
+@import "./backdrop.common";
 @import "../../themes/native/native.globals";
 
-// Button
+// Backdrop
 // --------------------------------------------------
 
-/// @prop - Badge padding inside button
-$button-badge-padding: 2px;
+:host {
+  z-index: $z-index-backdrop;
+}

core/src/components/backdrop/backdrop.vars.scss

@@ -1 +0,0 @@
-@import "../../themes/native/native.globals";

core/src/components/badge/badge.common.scss

@@ -1,6 +1,5 @@
 @use "../../themes/functions.color" as color;
 @import "../../themes/mixins";
-@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -15,26 +14,14 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --padding-top: #{$badge-padding-top};
-  --padding-end: #{$badge-padding-end};
-  --padding-bottom: #{$badge-padding-bottom};
-  --padding-start: #{$badge-padding-start};
-
   @include font-smoothing();
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: inline-block;
 
-  min-width: $badge-min-width;
-
   background: var(--background);
   color: var(--color);
 
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
-
-  line-height: 1;
-
   text-align: center;
 
   white-space: nowrap;
@@ -43,11 +30,6 @@
   vertical-align: baseline;
 }
 
-:host(.ion-color) {
-  background: #{color.current-color(base)};
-  color: #{color.current-color(contrast)};
-}
-
 // Badge (hint)
 // --------------------------------------------------
 

core/src/components/badge/badge.common.vars.scss

@@ -1,28 +0,0 @@
-@import "../../themes/functions.font";
-
-// Badge
-// --------------------------------------------------
-
-/// @prop - Padding top of the badge
-$badge-padding-top: 3px;
-
-/// @prop - Padding end of the badge
-$badge-padding-end: 8px;
-
-/// @prop - Padding bottom of the badge
-$badge-padding-bottom: $badge-padding-top;
-
-/// @prop - Padding start of the badge
-$badge-padding-start: $badge-padding-end;
-
-/// @prop - Minimum width of the badge
-$badge-min-width: 10px;
-
-/// @prop - Baseline font size of the badge
-$badge-baseline-font-size: 13px;
-
-/// @prop - Font size of the badge
-$badge-font-size: dynamic-font($badge-baseline-font-size);
-
-/// @prop - Font weight of the badge
-$badge-font-weight: bold;

core/src/components/badge/badge.ionic.scss

@@ -5,19 +5,45 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.ion-color(primary, base)};
-  --color: #{globals.ion-color(primary, contrast)};
   --padding-start: #{globals.$ion-space-200};
   --padding-end: #{globals.$ion-space-200};
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   display: inline-flex;
 
   align-items: center;
   justify-content: center;
 
-  font-weight: globals.$ion-font-weight-medium;
+  min-width: globals.$ion-scale-250;
+}
+
+// Bold Badge
+// --------------------------------------------------
+
+:host(.badge-bold) {
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+}
+
+:host(.badge-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
+}
+
+// Subtle Badge
+// --------------------------------------------------
+
+:host(.badge-subtle) {
+  --background: #{globals.ion-color(primary, base, $subtle: true)};
+  --color: #{globals.ion-color(primary, contrast, $subtle: true)};
+}
+
+:host(.badge-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
 }
 
 // Badge Shapes
@@ -90,10 +116,6 @@
 
   min-width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-400;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
 :host(.badge-small) ::slotted(ion-icon) {
@@ -103,12 +125,9 @@
 
 /* Medium Badge */
 :host(.badge-medium) {
+  @include globals.typography(globals.$ion-body-md-medium);
   min-width: globals.$ion-scale-1000;
   height: globals.$ion-scale-1000;
-
-  font-size: globals.$ion-font-size-450;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-medium) ::slotted(ion-icon) {
@@ -118,12 +137,9 @@
 
 /* Large Badge */
 :host(.badge-large) {
+  @include globals.typography(globals.$ion-body-lg-medium);
   min-width: globals.$ion-scale-1200;
   height: globals.$ion-scale-1200;
-
-  font-size: globals.$ion-font-size-500;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-large) ::slotted(ion-icon) {
@@ -133,12 +149,9 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
+  @include globals.typography(globals.$ion-heading-h4-medium);
   min-width: globals.$ion-scale-1400;
   height: globals.$ion-scale-1400;
-
-  font-size: globals.$ion-font-size-550;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-xlarge) ::slotted(ion-icon) {
@@ -215,13 +228,10 @@
 }
 
 :host(:not(:empty).in-button) {
+  @include globals.typography(globals.$ion-body-action-xs);
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
-
   ::slotted(ion-icon) {
     width: globals.$ion-scale-300;
     height: globals.$ion-scale-300;

core/src/components/badge/badge.native.scss

@@ -6,10 +6,26 @@
 // --------------------------------------------------
 
 :host {
+  --padding-top: #{$badge-padding-top};
+  --padding-end: #{$badge-padding-end};
+  --padding-bottom: #{$badge-padding-bottom};
+  --padding-start: #{$badge-padding-start};
   --background: #{ion-color(primary, base)};
   --color: #{ion-color(primary, contrast)};
 
+  min-width: $badge-min-width;
+
   font-family: $font-family-base;
+
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+
+  line-height: 1;
+}
+
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
 }
 
 // TODO(ROU-10747): Review size styles when sizes are defined for native themes.

core/src/components/badge/badge.native.vars.scss

@@ -21,3 +21,27 @@ $badge-line-height-in-button: 20px;
 
 /// @prop - Size of of the badge icon when inside button
 $badge-icon-size-in-button: 12px;
+
+/// @prop - Padding top of the badge
+$badge-padding-top: 3px;
+
+/// @prop - Padding end of the badge
+$badge-padding-end: 8px;
+
+/// @prop - Padding bottom of the badge
+$badge-padding-bottom: $badge-padding-top;
+
+/// @prop - Padding start of the badge
+$badge-padding-start: $badge-padding-end;
+
+/// @prop - Minimum width of the badge
+$badge-min-width: 10px;
+
+/// @prop - Baseline font size of the badge
+$badge-baseline-font-size: 13px;
+
+/// @prop - Font size of the badge
+$badge-font-size: dynamic-font($badge-baseline-font-size);
+
+/// @prop - Font weight of the badge
+$badge-font-weight: bold;

core/src/components/badge/badge.tsx

@@ -28,6 +28,14 @@ export class Badge implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
+   * a badge with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle';
+
   /**
    * Set to `"rectangular"` for non-rounded corners.
    * Set to `"soft"` for slightly rounded corners.
@@ -87,7 +95,33 @@ export class Badge implements ComponentInterface {
     return size;
   }
 
+  // The 'subtle' hue is the default for badges containing text or icons
+  // The 'bold' hue is used when inside of an avatar, button, tab button,
+  // or when the badge is empty (no text or icon).
+  private getHue(): string | undefined {
+    const { hue } = this;
+
+    if (hue !== undefined) {
+      return hue;
+    }
+
+    const inAvatar = hostContext('ion-avatar', this.el);
+    const inButton = hostContext('ion-button', this.el);
+    const inTabButton = hostContext('ion-tab-button', this.el);
+    const hasContent = this.el.textContent?.trim() !== '' || this.el.querySelector('ion-icon') !== null;
+
+    // Return 'bold' if the badge is inside an avatar, button, tab button,
+    // or has no content
+    if (inAvatar || inButton || inTabButton || !hasContent) {
+      return 'bold';
+    }
+
+    // Return 'subtle' if the badge contains visible text or an icon
+    return 'subtle';
+  }
+
   render() {
+    const hue = this.getHue();
     const shape = this.getShape();
     const size = this.getSize();
     const theme = getIonTheme(this);
@@ -96,6 +130,7 @@ export class Badge implements ComponentInterface {
       <Host
         class={createColorClasses(this.color, {
           [theme]: true,
+          [`badge-${hue}`]: hue !== undefined,
           [`badge-${shape}`]: shape !== undefined,
           [`badge-${size}`]: size !== undefined,
           [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,