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/item-option/item-option.common.scss

@@ -69,7 +69,6 @@
 
   transition-duration: 0;
   transition-property: none;
-  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
 }
 
 // Item Option: Disabled

core/src/components/item-option/item-option.ionic.scss

@@ -6,11 +6,7 @@
 
 :host {
   @include globals.padding(0);
-
-  font-size: globals.$ion-font-size-350;
-  font-weight: globals.$ion-font-weight-medium;
-
-  line-height: globals.$ion-font-line-height-500;
+  @include globals.typography(globals.$ion-body-action-sm);
 }
 
 .button-native {
@@ -68,8 +64,8 @@
 // --------------------------------------------------
 
 /* Disabled */
-:host(.item-option-disabled) {
-  opacity: 0.6;
+:host(.item-option-disabled)::after {
+  @include globals.disabled-state();
 }
 
 :host(.item-option-disabled) .button-native {
@@ -103,3 +99,10 @@
   background: globals.current-color(base);
   color: globals.current-color(contrast);
 }
+
+// Item Expandable Animation
+// --------------------------------------------------
+
+:host(.item-option-expandable) {
+  transition-timing-function: globals.$ion-transition-curve-expressive;
+}

core/src/components/item-option/item-option.native.scss

@@ -44,3 +44,10 @@
 :host(.item-option-disabled) .button-native {
   opacity: 0.5;
 }
+
+// Item Expandable Animation
+// --------------------------------------------------
+
+:host(.item-option-expandable) {
+  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
+}