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

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;
   }

core/src/themes/ionic/test/colors/index.html

@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>