fix(tokens): fix usage on components and review scss architecture (#30368)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Added improvements on scss architecture, as identified on past
assessment, on multiple components.

Some of these changes resulted in snapshots differences, all reviewed
and expected:

- Button spinner - pics with no visual differences/false-positive.
- Item slider -  difference due to updated typography token.
- Item - difference as is now using correct disabled styles tokens.
- searchbar: 1px difference on horizontal margin - expected - to start
using a more rounded value from a token.
- Tab/tab-button - difference as is now using correct typography token.
- Spinner/loading - this looks like a false positive, saw no visible
differences.
- Textarea - this looks like a false positive, saw no visible
differences.
- Typography - this looks like a false positive, saw no visible
differences.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/api.txt

@@ -1707,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

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;

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

@@ -10,12 +10,14 @@
   --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
@@ -114,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) {
@@ -127,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) {
@@ -142,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) {
@@ -157,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) {
@@ -239,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,21 @@
 // --------------------------------------------------
 
 :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) {

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;