fix(css): improve tokens support on global css ionic files (#30364)

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

- Add tokens usage on global css files for Ionic theme.
- Removed global background an text variables and fixed variables names
used on `body`. This resulted in some changes on test pages colors,
hence the snapshots differences.

## Does this introduce a breaking change?

- [ ] Yes
- [x] 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/css/ionic/core.ionic.scss

@@ -4,9 +4,6 @@
 // --------------------------------------------------
 
 :root {
-  --ionic-global-background-color: #{globals.$ion-primitives-neutral-100};
-  --ionic-global-text-color: #{globals.$ion-primitives-neutral-900};
-
   /**
    * Set the theme colors from the
    * `ionic.theme.default.scss` file.
@@ -26,8 +23,8 @@ html {
 }
 
 body {
-  background: var(--ionic-global-background-color);
-  color: var(--ionic-global-text-color);
+  background: var(--ion-background-color);
+  color: var(--ion-text-color);
 }
 
 body.backdrop-no-scroll {
@@ -312,7 +309,7 @@ ion-accordion > [slot="header"] .ion-accordion-toggle-icon {
 }
 
 ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
-  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
+  transition: globals.$ion-transition-time-300 transform globals.$ion-transition-curve-quick;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -376,8 +373,8 @@ ion-input input::-webkit-date-and-time-value {
  * sized grid interface.
  */
 .ion-datetime-button-overlay ion-datetime.datetime-grid {
-  width: 320px;
-  min-height: 320px;
+  width: calc(#{globals.$ion-scale-7400} + #{globals.$ion-space-600});
+  min-height: calc(#{globals.$ion-scale-7400} + #{globals.$ion-space-600});
 }
 
 // Popover Styles

core/src/css/ionic/ionic-swiper.ionic.scss

@@ -1,15 +1,15 @@
-@use "../../foundations/ionic.vars.scss" as tokens;
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 
 // Slides
 // --------------------------------------------------
 
 .swiper {
-  --bullet-background: #{tokens.$ion-primitives-neutral-800};
-  --bullet-background-active: #{tokens.$ion-semantics-primary-base};
-  --progress-bar-background: rgba(#010408, 0.25);
-  --progress-bar-background-active: #{tokens.$ion-semantics-primary-600};
-  --scroll-bar-background: rgba(#010408, 0.1);
-  --scroll-bar-background-active: rgba(#010408, 0.5);
+  --bullet-background: #{globals.$ion-primitives-neutral-800};
+  --bullet-background-active: #{globals.$ion-semantics-primary-base};
+  --progress-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
+  --progress-bar-background-active: #{globals.$ion-semantics-primary-600};
+  --scroll-bar-background: #{globals.$ion-bg-neutral-boldest-default-rgb};
+  --scroll-bar-background-active: #{globals.$ion-bg-neutral-boldest-press-rgb};
   /**
    * @prop --bullet-background: Background of the pagination bullets
    * @prop --bullet-background-active: Background of the active pagination bullet
@@ -70,6 +70,8 @@
 }
 
 .swiper .swiper-slide {
+  @include globals.typography(globals.$ion-heading-h6-bold);
+
   // Center slide text vertically
   display: flex;
   position: relative;
@@ -81,8 +83,6 @@
   width: 100%;
   height: 100%;
 
-  font-size: 18px;
-
   text-align: center;
   box-sizing: border-box;
 }

core/src/css/ionic/link.ionic.scss

@@ -9,13 +9,13 @@
 
   gap: globals.$ion-space-100;
 
-  transition: color 0.2s ease-in-out;
+  transition: color globals.$ion-transition-time-200 ease-in-out;
 
   font-weight: globals.$ion-font-weight-regular;
 
   text-decoration-color: inherit;
 
-  text-underline-offset: 2px;
+  text-underline-offset: globals.$ion-scale-050;
 
   cursor: pointer;
 
@@ -51,8 +51,7 @@
 
   &:focus,
   &.ion-focused {
-    outline: 2px solid globals.$ion-text-link-default;
-    outline-offset: 2px;
+    @include globals.focused-state(null, null, globals.$ion-text-link-default);
 
     text-decoration: underline;
   }
@@ -97,10 +96,7 @@ a.ionic-link,
 
   &:focus,
   &.ion-focused {
-    outline: 2px solid globals.$ion-text-link-default;
-    outline-offset: 2px;
-
-    color: currentColor;
+    @include globals.focused-state(null, null, globals.$ion-text-link-default);
 
     text-decoration: none;
   }