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/button/button.ionic.scss

@@ -39,6 +39,11 @@
 // Button Fills
 // -------------------------------------------------------------------------------
 
+// Default Clear Color
+:host(.button-clear) {
+  --color: #{globals.ion-color(primary, foreground)};
+}
+
 // Solid Button
 // --------------------------------------------------
 
@@ -47,6 +52,8 @@
   --background-hover: #{globals.ion-color(primary, shade)};
   --background-focused: transparent;
   --background-hover-opacity: 1;
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -61,6 +68,8 @@
   --background-focused: transparent;
   --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
+  --border-color: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, base)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -73,6 +82,7 @@
   --background-focused: transparent;
   --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
+  --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -240,8 +250,11 @@
 // Button: Disabled
 // --------------------------------------------------
 
-:host(.button-disabled) {
-  opacity: 0.6;
+:host(.button-disabled) .button-native::after {
+  @include globals.disabled-state();
+
+  width: inherit;
+  height: inherit;
 }
 
 // Button Icons
@@ -288,3 +301,9 @@
 :host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
+
+// Button Badge
+// --------------------------------------------------
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(globals.$ion-space-050);
+}