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/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

@@ -0,0 +1,9 @@
+@import "./backdrop.common";
+@import "../../themes/native/native.globals";
+
+// Backdrop
+// --------------------------------------------------
+
+:host {
+  z-index: $z-index-backdrop;
+}

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

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