fix(ionic): update colors to import function

core/src/components/input/input.ionic.scss

@@ -140,7 +140,7 @@
 // ----------------------------------------------------------------
 
 .input-bottom {
-  @include padding(7px, 0);
+  @include padding(globals.$ionic-space-100, 0);
 
   font-weight: globals.$ionic-font-weight-medium;
 }

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

@@ -19,8 +19,10 @@
   --padding-end: #{globals.$ionic-space-400};
   --padding-bottom: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-400};
+  --color: #{globals.$ionic-color-neutral-1200};
 
   font-family: globals.$ionic-font-family;
+  font-size: globals.$ionic-font-size-400;
 }
 
 // Inner Item

core/src/components/list-header/list-header.ionic.scss

@@ -4,10 +4,12 @@
 
 :host {
   --background: transparent;
+  --color: #{globals.$ionic-color-neutral-1200};
 
   min-height: 58px;
 
   font-size: globals.$ionic-font-size-350;
+  font-weight: globals.$ionic-font-weight-medium;
 
   line-height: globals.$ionic-line-height-600;
 
@@ -35,12 +37,6 @@
 // --------------------------------------------------
 
 // Label
-::slotted(ion-label) {
-  --color: #{globals.$ionic-color-neutral-1200};
-
-  font-weight: globals.$ionic-font-weight-medium;
-}
-
 ::slotted(ion-label) ::slotted(p) {
   font-weight: globals.$ionic-font-weight-regular;
 }

core/src/components/spinner/spinner.ionic.scss

@@ -4,6 +4,10 @@
 // Ionic Spinner
 // --------------------------------------------------
 
+:host {
+  --color: #{globals.$ionic-color-neutral-800};
+}
+
 // Sizes
 // --------------------------------------------------
 

core/src/themes/ionic/ionic.theme.default.scss

@@ -1,3 +1,5 @@
+@use "../functions.color" as color;
+
 // Ionic Theme
 // -------------------------------------------------------------------------------------------
 // This file contains the theme variables shared
@@ -29,61 +31,61 @@ $ionic-colors: (
   primary: (
     base: $primary,
     contrast: #fff,
-    shade: get-color-shade($primary),
-    tint: get-color-tint($primary),
+    shade: color.get-color-shade($primary),
+    tint: color.get-color-tint($primary),
   ),
   secondary: (
     base: $secondary,
     contrast: $secondary,
-    shade: get-color-shade($secondary),
-    tint: get-color-tint($secondary),
+    shade: color.get-color-shade($secondary),
+    tint: color.get-color-tint($secondary),
   ),
   tertiary: (
     base: $tertiary,
     contrast: $tertiary,
-    shade: get-color-shade($tertiary),
-    tint: get-color-tint($tertiary),
+    shade: color.get-color-shade($tertiary),
+    tint: color.get-color-tint($tertiary),
   ),
   success: (
     base: $success,
     contrast: #000,
-    shade: get-color-shade($success),
-    tint: get-color-tint($success),
+    shade: color.get-color-shade($success),
+    tint: color.get-color-tint($success),
   ),
   warning: (
     base: $warning,
     contrast: #000,
-    shade: get-color-shade($warning),
-    tint: get-color-tint($warning),
+    shade: color.get-color-shade($warning),
+    tint: color.get-color-tint($warning),
   ),
   danger: (
     base: $danger,
     contrast: #fff,
-    shade: get-color-shade($danger),
-    tint: get-color-tint($danger),
+    shade: color.get-color-shade($danger),
+    tint: color.get-color-tint($danger),
   ),
   light: (
     base: $light,
     contrast: #000,
-    shade: get-color-shade($light),
-    tint: get-color-tint($light),
+    shade: color.get-color-shade($light),
+    tint: color.get-color-tint($light),
   ),
   medium: (
     base: $medium,
     contrast: $medium,
-    shade: get-color-shade($medium),
-    tint: get-color-tint($medium),
+    shade: color.get-color-shade($medium),
+    tint: color.get-color-tint($medium),
   ),
   neutral: (
     base: $neutral,
     contrast: #fff,
-    shade: get-color-shade($neutral),
-    tint: get-color-tint($neutral),
+    shade: color.get-color-shade($neutral),
+    tint: color.get-color-tint($neutral),
   ),
   dark: (
     base: $dark,
     contrast: $dark,
-    shade: get-color-shade($dark),
-    tint: get-color-tint($dark),
+    shade: color.get-color-shade($dark),
+    tint: color.get-color-tint($dark),
   ),
 );

core/src/utils/test/playwright/page/utils/set-content.ts

@@ -44,6 +44,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
+        ${theme === 'ionic' ? `<link href="${baseUrl}/css/ionic/bundle.ionic.css" rel="stylesheet" />` : ''}
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
         ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>