diff --git a/core/scripts/tokens/utils.mjs b/core/scripts/tokens/utils.mjs
index a00f419115b..aa5784de174 100644
--- a/core/scripts/tokens/utils.mjs
+++ b/core/scripts/tokens/utils.mjs
@@ -151,7 +151,7 @@ export function generateColorUtilityClasses(prop, className) {
   const isBg = className.includes('bg');
   const cssProp = isBg ? 'background-color' : 'color';
   return `.${classAndScssPrefix}-${className} {
-  --${cssProp}: $${classAndScssPrefix}-${prop.name};
+  --${cssProp}: #{$${classAndScssPrefix}-${prop.name}};
   ${cssProp}: $${classAndScssPrefix}-${prop.name};
 }`;
 }
@@ -275,7 +275,7 @@ export function generateSpaceUtilityClasses(prop, className) {
 // Generates a valid box-shadow value from a shadow Design Token structure
 export function generateRadiusUtilityClasses(propName) {
   return `.${classAndScssPrefix}-${propName} {
-  --border-radius: $${classAndScssPrefix}-${propName};
+  --border-radius: #{$${classAndScssPrefix}-${propName}};
   border-radius: $${classAndScssPrefix}-${propName};
 }`;
 }
@@ -296,7 +296,7 @@ export function generateBorderUtilityClasses(prop, propName) {
       attribute = 'border-color';
   }
   return `.${classAndScssPrefix}-${propName} {
-  --${attribute}: $${classAndScssPrefix}-${propName};
+  --${attribute}: #{$${classAndScssPrefix}-${propName}};
   ${attribute}: $${classAndScssPrefix}-${propName};
 }`;
 }
@@ -309,7 +309,7 @@ export function generateFontUtilityClasses(prop, propName) {
 // Generates a valid box-shadow value from a shadow Design Token structure
 export function generateShadowUtilityClasses(propName) {
   return `.${classAndScssPrefix}-${propName} {
-  --box-shadow: $${classAndScssPrefix}-${propName};
+  --box-shadow: #{$${classAndScssPrefix}-${propName}};
   box-shadow: $${classAndScssPrefix}-${propName};
 }`;
 }
diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss
index b1b8dbb4282..54b9db180a2 100644
--- a/core/src/foundations/ionic.utility.scss
+++ b/core/src/foundations/ionic.utility.scss
@@ -484,947 +484,947 @@
 }
 
 .ion-semantics-primary-100 {
-  --color: $ion-semantics-primary-100;
+  --color: #{$ion-semantics-primary-100};
   color: $ion-semantics-primary-100;
 }
 .ion-semantics-primary-200 {
-  --color: $ion-semantics-primary-200;
+  --color: #{$ion-semantics-primary-200};
   color: $ion-semantics-primary-200;
 }
 .ion-semantics-primary-300 {
-  --color: $ion-semantics-primary-300;
+  --color: #{$ion-semantics-primary-300};
   color: $ion-semantics-primary-300;
 }
 .ion-semantics-primary-400 {
-  --color: $ion-semantics-primary-400;
+  --color: #{$ion-semantics-primary-400};
   color: $ion-semantics-primary-400;
 }
 .ion-semantics-primary-500 {
-  --color: $ion-semantics-primary-500;
+  --color: #{$ion-semantics-primary-500};
   color: $ion-semantics-primary-500;
 }
 .ion-semantics-primary-600 {
-  --color: $ion-semantics-primary-600;
+  --color: #{$ion-semantics-primary-600};
   color: $ion-semantics-primary-600;
 }
 .ion-semantics-primary-700 {
-  --color: $ion-semantics-primary-700;
+  --color: #{$ion-semantics-primary-700};
   color: $ion-semantics-primary-700;
 }
 .ion-semantics-primary-800 {
-  --color: $ion-semantics-primary-800;
+  --color: #{$ion-semantics-primary-800};
   color: $ion-semantics-primary-800;
 }
 .ion-semantics-primary-900 {
-  --color: $ion-semantics-primary-900;
+  --color: #{$ion-semantics-primary-900};
   color: $ion-semantics-primary-900;
 }
 .ion-semantics-primary-1000 {
-  --color: $ion-semantics-primary-1000;
+  --color: #{$ion-semantics-primary-1000};
   color: $ion-semantics-primary-1000;
 }
 .ion-semantics-primary-1100 {
-  --color: $ion-semantics-primary-1100;
+  --color: #{$ion-semantics-primary-1100};
   color: $ion-semantics-primary-1100;
 }
 .ion-semantics-primary-1200 {
-  --color: $ion-semantics-primary-1200;
+  --color: #{$ion-semantics-primary-1200};
   color: $ion-semantics-primary-1200;
 }
 .ion-semantics-primary-base {
-  --color: $ion-semantics-primary-base;
+  --color: #{$ion-semantics-primary-base};
   color: $ion-semantics-primary-base;
 }
 .ion-semantics-info-100 {
-  --color: $ion-semantics-info-100;
+  --color: #{$ion-semantics-info-100};
   color: $ion-semantics-info-100;
 }
 .ion-semantics-info-200 {
-  --color: $ion-semantics-info-200;
+  --color: #{$ion-semantics-info-200};
   color: $ion-semantics-info-200;
 }
 .ion-semantics-info-300 {
-  --color: $ion-semantics-info-300;
+  --color: #{$ion-semantics-info-300};
   color: $ion-semantics-info-300;
 }
 .ion-semantics-info-400 {
-  --color: $ion-semantics-info-400;
+  --color: #{$ion-semantics-info-400};
   color: $ion-semantics-info-400;
 }
 .ion-semantics-info-500 {
-  --color: $ion-semantics-info-500;
+  --color: #{$ion-semantics-info-500};
   color: $ion-semantics-info-500;
 }
 .ion-semantics-info-600 {
-  --color: $ion-semantics-info-600;
+  --color: #{$ion-semantics-info-600};
   color: $ion-semantics-info-600;
 }
 .ion-semantics-info-700 {
-  --color: $ion-semantics-info-700;
+  --color: #{$ion-semantics-info-700};
   color: $ion-semantics-info-700;
 }
 .ion-semantics-info-800 {
-  --color: $ion-semantics-info-800;
+  --color: #{$ion-semantics-info-800};
   color: $ion-semantics-info-800;
 }
 .ion-semantics-info-900 {
-  --color: $ion-semantics-info-900;
+  --color: #{$ion-semantics-info-900};
   color: $ion-semantics-info-900;
 }
 .ion-semantics-info-1000 {
-  --color: $ion-semantics-info-1000;
+  --color: #{$ion-semantics-info-1000};
   color: $ion-semantics-info-1000;
 }
 .ion-semantics-info-1100 {
-  --color: $ion-semantics-info-1100;
+  --color: #{$ion-semantics-info-1100};
   color: $ion-semantics-info-1100;
 }
 .ion-semantics-info-1200 {
-  --color: $ion-semantics-info-1200;
+  --color: #{$ion-semantics-info-1200};
   color: $ion-semantics-info-1200;
 }
 .ion-semantics-info-base {
-  --color: $ion-semantics-info-base;
+  --color: #{$ion-semantics-info-base};
   color: $ion-semantics-info-base;
 }
 .ion-semantics-success-100 {
-  --color: $ion-semantics-success-100;
+  --color: #{$ion-semantics-success-100};
   color: $ion-semantics-success-100;
 }
 .ion-semantics-success-200 {
-  --color: $ion-semantics-success-200;
+  --color: #{$ion-semantics-success-200};
   color: $ion-semantics-success-200;
 }
 .ion-semantics-success-300 {
-  --color: $ion-semantics-success-300;
+  --color: #{$ion-semantics-success-300};
   color: $ion-semantics-success-300;
 }
 .ion-semantics-success-400 {
-  --color: $ion-semantics-success-400;
+  --color: #{$ion-semantics-success-400};
   color: $ion-semantics-success-400;
 }
 .ion-semantics-success-500 {
-  --color: $ion-semantics-success-500;
+  --color: #{$ion-semantics-success-500};
   color: $ion-semantics-success-500;
 }
 .ion-semantics-success-600 {
-  --color: $ion-semantics-success-600;
+  --color: #{$ion-semantics-success-600};
   color: $ion-semantics-success-600;
 }
 .ion-semantics-success-700 {
-  --color: $ion-semantics-success-700;
+  --color: #{$ion-semantics-success-700};
   color: $ion-semantics-success-700;
 }
 .ion-semantics-success-800 {
-  --color: $ion-semantics-success-800;
+  --color: #{$ion-semantics-success-800};
   color: $ion-semantics-success-800;
 }
 .ion-semantics-success-900 {
-  --color: $ion-semantics-success-900;
+  --color: #{$ion-semantics-success-900};
   color: $ion-semantics-success-900;
 }
 .ion-semantics-success-1000 {
-  --color: $ion-semantics-success-1000;
+  --color: #{$ion-semantics-success-1000};
   color: $ion-semantics-success-1000;
 }
 .ion-semantics-success-1100 {
-  --color: $ion-semantics-success-1100;
+  --color: #{$ion-semantics-success-1100};
   color: $ion-semantics-success-1100;
 }
 .ion-semantics-success-1200 {
-  --color: $ion-semantics-success-1200;
+  --color: #{$ion-semantics-success-1200};
   color: $ion-semantics-success-1200;
 }
 .ion-semantics-success-base {
-  --color: $ion-semantics-success-base;
+  --color: #{$ion-semantics-success-base};
   color: $ion-semantics-success-base;
 }
 .ion-semantics-danger-100 {
-  --color: $ion-semantics-danger-100;
+  --color: #{$ion-semantics-danger-100};
   color: $ion-semantics-danger-100;
 }
 .ion-semantics-danger-200 {
-  --color: $ion-semantics-danger-200;
+  --color: #{$ion-semantics-danger-200};
   color: $ion-semantics-danger-200;
 }
 .ion-semantics-danger-300 {
-  --color: $ion-semantics-danger-300;
+  --color: #{$ion-semantics-danger-300};
   color: $ion-semantics-danger-300;
 }
 .ion-semantics-danger-400 {
-  --color: $ion-semantics-danger-400;
+  --color: #{$ion-semantics-danger-400};
   color: $ion-semantics-danger-400;
 }
 .ion-semantics-danger-500 {
-  --color: $ion-semantics-danger-500;
+  --color: #{$ion-semantics-danger-500};
   color: $ion-semantics-danger-500;
 }
 .ion-semantics-danger-600 {
-  --color: $ion-semantics-danger-600;
+  --color: #{$ion-semantics-danger-600};
   color: $ion-semantics-danger-600;
 }
 .ion-semantics-danger-700 {
-  --color: $ion-semantics-danger-700;
+  --color: #{$ion-semantics-danger-700};
   color: $ion-semantics-danger-700;
 }
 .ion-semantics-danger-800 {
-  --color: $ion-semantics-danger-800;
+  --color: #{$ion-semantics-danger-800};
   color: $ion-semantics-danger-800;
 }
 .ion-semantics-danger-900 {
-  --color: $ion-semantics-danger-900;
+  --color: #{$ion-semantics-danger-900};
   color: $ion-semantics-danger-900;
 }
 .ion-semantics-danger-1000 {
-  --color: $ion-semantics-danger-1000;
+  --color: #{$ion-semantics-danger-1000};
   color: $ion-semantics-danger-1000;
 }
 .ion-semantics-danger-1100 {
-  --color: $ion-semantics-danger-1100;
+  --color: #{$ion-semantics-danger-1100};
   color: $ion-semantics-danger-1100;
 }
 .ion-semantics-danger-1200 {
-  --color: $ion-semantics-danger-1200;
+  --color: #{$ion-semantics-danger-1200};
   color: $ion-semantics-danger-1200;
 }
 .ion-semantics-danger-base {
-  --color: $ion-semantics-danger-base;
+  --color: #{$ion-semantics-danger-base};
   color: $ion-semantics-danger-base;
 }
 .ion-semantics-warning-100 {
-  --color: $ion-semantics-warning-100;
+  --color: #{$ion-semantics-warning-100};
   color: $ion-semantics-warning-100;
 }
 .ion-semantics-warning-200 {
-  --color: $ion-semantics-warning-200;
+  --color: #{$ion-semantics-warning-200};
   color: $ion-semantics-warning-200;
 }
 .ion-semantics-warning-300 {
-  --color: $ion-semantics-warning-300;
+  --color: #{$ion-semantics-warning-300};
   color: $ion-semantics-warning-300;
 }
 .ion-semantics-warning-400 {
-  --color: $ion-semantics-warning-400;
+  --color: #{$ion-semantics-warning-400};
   color: $ion-semantics-warning-400;
 }
 .ion-semantics-warning-500 {
-  --color: $ion-semantics-warning-500;
+  --color: #{$ion-semantics-warning-500};
   color: $ion-semantics-warning-500;
 }
 .ion-semantics-warning-600 {
-  --color: $ion-semantics-warning-600;
+  --color: #{$ion-semantics-warning-600};
   color: $ion-semantics-warning-600;
 }
 .ion-semantics-warning-700 {
-  --color: $ion-semantics-warning-700;
+  --color: #{$ion-semantics-warning-700};
   color: $ion-semantics-warning-700;
 }
 .ion-semantics-warning-800 {
-  --color: $ion-semantics-warning-800;
+  --color: #{$ion-semantics-warning-800};
   color: $ion-semantics-warning-800;
 }
 .ion-semantics-warning-900 {
-  --color: $ion-semantics-warning-900;
+  --color: #{$ion-semantics-warning-900};
   color: $ion-semantics-warning-900;
 }
 .ion-semantics-warning-1000 {
-  --color: $ion-semantics-warning-1000;
+  --color: #{$ion-semantics-warning-1000};
   color: $ion-semantics-warning-1000;
 }
 .ion-semantics-warning-1100 {
-  --color: $ion-semantics-warning-1100;
+  --color: #{$ion-semantics-warning-1100};
   color: $ion-semantics-warning-1100;
 }
 .ion-semantics-warning-1200 {
-  --color: $ion-semantics-warning-1200;
+  --color: #{$ion-semantics-warning-1200};
   color: $ion-semantics-warning-1200;
 }
 .ion-semantics-warning-base {
-  --color: $ion-semantics-warning-base;
+  --color: #{$ion-semantics-warning-base};
   color: $ion-semantics-warning-base;
 }
 .ion-bg-primary-base-default {
-  --background-color: $ion-bg-primary-base-default;
+  --background-color: #{$ion-bg-primary-base-default};
   background-color: $ion-bg-primary-base-default;
 }
 .ion-bg-primary-base-press {
-  --background-color: $ion-bg-primary-base-press;
+  --background-color: #{$ion-bg-primary-base-press};
   background-color: $ion-bg-primary-base-press;
 }
 .ion-bg-primary-subtle-default {
-  --background-color: $ion-bg-primary-subtle-default;
+  --background-color: #{$ion-bg-primary-subtle-default};
   background-color: $ion-bg-primary-subtle-default;
 }
 .ion-bg-primary-subtle-press {
-  --background-color: $ion-bg-primary-subtle-press;
+  --background-color: #{$ion-bg-primary-subtle-press};
   background-color: $ion-bg-primary-subtle-press;
 }
 .ion-bg-danger-base-default {
-  --background-color: $ion-bg-danger-base-default;
+  --background-color: #{$ion-bg-danger-base-default};
   background-color: $ion-bg-danger-base-default;
 }
 .ion-bg-danger-base-press {
-  --background-color: $ion-bg-danger-base-press;
+  --background-color: #{$ion-bg-danger-base-press};
   background-color: $ion-bg-danger-base-press;
 }
 .ion-bg-danger-subtle-default {
-  --background-color: $ion-bg-danger-subtle-default;
+  --background-color: #{$ion-bg-danger-subtle-default};
   background-color: $ion-bg-danger-subtle-default;
 }
 .ion-bg-danger-subtle-press {
-  --background-color: $ion-bg-danger-subtle-press;
+  --background-color: #{$ion-bg-danger-subtle-press};
   background-color: $ion-bg-danger-subtle-press;
 }
 .ion-bg-success-base-default {
-  --background-color: $ion-bg-success-base-default;
+  --background-color: #{$ion-bg-success-base-default};
   background-color: $ion-bg-success-base-default;
 }
 .ion-bg-success-base-press {
-  --background-color: $ion-bg-success-base-press;
+  --background-color: #{$ion-bg-success-base-press};
   background-color: $ion-bg-success-base-press;
 }
 .ion-bg-success-subtle-default {
-  --background-color: $ion-bg-success-subtle-default;
+  --background-color: #{$ion-bg-success-subtle-default};
   background-color: $ion-bg-success-subtle-default;
 }
 .ion-bg-success-subtle-press {
-  --background-color: $ion-bg-success-subtle-press;
+  --background-color: #{$ion-bg-success-subtle-press};
   background-color: $ion-bg-success-subtle-press;
 }
 .ion-bg-info-base-default {
-  --background-color: $ion-bg-info-base-default;
+  --background-color: #{$ion-bg-info-base-default};
   background-color: $ion-bg-info-base-default;
 }
 .ion-bg-info-base-press {
-  --background-color: $ion-bg-info-base-press;
+  --background-color: #{$ion-bg-info-base-press};
   background-color: $ion-bg-info-base-press;
 }
 .ion-bg-info-subtle-default {
-  --background-color: $ion-bg-info-subtle-default;
+  --background-color: #{$ion-bg-info-subtle-default};
   background-color: $ion-bg-info-subtle-default;
 }
 .ion-bg-info-subtle-press {
-  --background-color: $ion-bg-info-subtle-press;
+  --background-color: #{$ion-bg-info-subtle-press};
   background-color: $ion-bg-info-subtle-press;
 }
 .ion-bg-warning-base-default {
-  --background-color: $ion-bg-warning-base-default;
+  --background-color: #{$ion-bg-warning-base-default};
   background-color: $ion-bg-warning-base-default;
 }
 .ion-bg-warning-base-press {
-  --background-color: $ion-bg-warning-base-press;
+  --background-color: #{$ion-bg-warning-base-press};
   background-color: $ion-bg-warning-base-press;
 }
 .ion-bg-warning-subtle-default {
-  --background-color: $ion-bg-warning-subtle-default;
+  --background-color: #{$ion-bg-warning-subtle-default};
   background-color: $ion-bg-warning-subtle-default;
 }
 .ion-bg-warning-subtle-press {
-  --background-color: $ion-bg-warning-subtle-press;
+  --background-color: #{$ion-bg-warning-subtle-press};
   background-color: $ion-bg-warning-subtle-press;
 }
 .ion-bg-body {
-  --background-color: $ion-bg-body;
+  --background-color: #{$ion-bg-body};
   background-color: $ion-bg-body;
 }
 .ion-bg-neutral-subtle-default {
-  --background-color: $ion-bg-neutral-subtle-default;
+  --background-color: #{$ion-bg-neutral-subtle-default};
   background-color: $ion-bg-neutral-subtle-default;
 }
 .ion-bg-neutral-subtle-press {
-  --background-color: $ion-bg-neutral-subtle-press;
+  --background-color: #{$ion-bg-neutral-subtle-press};
   background-color: $ion-bg-neutral-subtle-press;
 }
 .ion-bg-neutral-base-default {
-  --background-color: $ion-bg-neutral-base-default;
+  --background-color: #{$ion-bg-neutral-base-default};
   background-color: $ion-bg-neutral-base-default;
 }
 .ion-bg-neutral-base-press {
-  --background-color: $ion-bg-neutral-base-press;
+  --background-color: #{$ion-bg-neutral-base-press};
   background-color: $ion-bg-neutral-base-press;
 }
 .ion-bg-neutral-subtlest-default {
-  --background-color: $ion-bg-neutral-subtlest-default;
+  --background-color: #{$ion-bg-neutral-subtlest-default};
   background-color: $ion-bg-neutral-subtlest-default;
 }
 .ion-bg-neutral-subtlest-press {
-  --background-color: $ion-bg-neutral-subtlest-press;
+  --background-color: #{$ion-bg-neutral-subtlest-press};
   background-color: $ion-bg-neutral-subtlest-press;
 }
 .ion-bg-neutral-bold-default {
-  --background-color: $ion-bg-neutral-bold-default;
+  --background-color: #{$ion-bg-neutral-bold-default};
   background-color: $ion-bg-neutral-bold-default;
 }
 .ion-bg-neutral-bold-press {
-  --background-color: $ion-bg-neutral-bold-press;
+  --background-color: #{$ion-bg-neutral-bold-press};
   background-color: $ion-bg-neutral-bold-press;
 }
 .ion-bg-neutral-boldest-default {
-  --background-color: $ion-bg-neutral-boldest-default;
+  --background-color: #{$ion-bg-neutral-boldest-default};
   background-color: $ion-bg-neutral-boldest-default;
 }
 .ion-bg-neutral-boldest-press {
-  --background-color: $ion-bg-neutral-boldest-press;
+  --background-color: #{$ion-bg-neutral-boldest-press};
   background-color: $ion-bg-neutral-boldest-press;
 }
 .ion-bg-surface-default {
-  --background-color: $ion-bg-surface-default;
+  --background-color: #{$ion-bg-surface-default};
   background-color: $ion-bg-surface-default;
 }
 .ion-bg-surface-inverse {
-  --background-color: $ion-bg-surface-inverse;
+  --background-color: #{$ion-bg-surface-inverse};
   background-color: $ion-bg-surface-inverse;
 }
 .ion-bg-input-default {
-  --background-color: $ion-bg-input-default;
+  --background-color: #{$ion-bg-input-default};
   background-color: $ion-bg-input-default;
 }
 .ion-bg-input-read-only {
-  --background-color: $ion-bg-input-read-only;
+  --background-color: #{$ion-bg-input-read-only};
   background-color: $ion-bg-input-read-only;
 }
 .ion-bg-input-press {
-  --background-color: $ion-bg-input-press;
+  --background-color: #{$ion-bg-input-press};
   background-color: $ion-bg-input-press;
 }
 .ion-bg-input-disabled {
-  --background-color: $ion-bg-input-disabled;
+  --background-color: #{$ion-bg-input-disabled};
   background-color: $ion-bg-input-disabled;
 }
 .ion-bg-input-bold-default {
-  --background-color: $ion-bg-input-bold-default;
+  --background-color: #{$ion-bg-input-bold-default};
   background-color: $ion-bg-input-bold-default;
 }
 .ion-bg-input-bold-press {
-  --background-color: $ion-bg-input-bold-press;
+  --background-color: #{$ion-bg-input-bold-press};
   background-color: $ion-bg-input-bold-press;
 }
 .ion-bg-input-bold-read-only {
-  --background-color: $ion-bg-input-bold-read-only;
+  --background-color: #{$ion-bg-input-bold-read-only};
   background-color: $ion-bg-input-bold-read-only;
 }
 .ion-bg-input-bold-disabled {
-  --background-color: $ion-bg-input-bold-disabled;
+  --background-color: #{$ion-bg-input-bold-disabled};
   background-color: $ion-bg-input-bold-disabled;
 }
 .ion-bg-select-default {
-  --background-color: $ion-bg-select-default;
+  --background-color: #{$ion-bg-select-default};
   background-color: $ion-bg-select-default;
 }
 .ion-bg-select-press {
-  --background-color: $ion-bg-select-press;
+  --background-color: #{$ion-bg-select-press};
   background-color: $ion-bg-select-press;
 }
 .ion-bg-extended-pumpkin-base-default {
-  --background-color: $ion-bg-extended-pumpkin-base-default;
+  --background-color: #{$ion-bg-extended-pumpkin-base-default};
   background-color: $ion-bg-extended-pumpkin-base-default;
 }
 .ion-bg-extended-pumpkin-base-press {
-  --background-color: $ion-bg-extended-pumpkin-base-press;
+  --background-color: #{$ion-bg-extended-pumpkin-base-press};
   background-color: $ion-bg-extended-pumpkin-base-press;
 }
 .ion-bg-extended-pumpkin-subtle-default {
-  --background-color: $ion-bg-extended-pumpkin-subtle-default;
+  --background-color: #{$ion-bg-extended-pumpkin-subtle-default};
   background-color: $ion-bg-extended-pumpkin-subtle-default;
 }
 .ion-bg-extended-pumpkin-subtle-press {
-  --background-color: $ion-bg-extended-pumpkin-subtle-press;
+  --background-color: #{$ion-bg-extended-pumpkin-subtle-press};
   background-color: $ion-bg-extended-pumpkin-subtle-press;
 }
 .ion-bg-extended-orange-base-default {
-  --background-color: $ion-bg-extended-orange-base-default;
+  --background-color: #{$ion-bg-extended-orange-base-default};
   background-color: $ion-bg-extended-orange-base-default;
 }
 .ion-bg-extended-orange-base-press {
-  --background-color: $ion-bg-extended-orange-base-press;
+  --background-color: #{$ion-bg-extended-orange-base-press};
   background-color: $ion-bg-extended-orange-base-press;
 }
 .ion-bg-extended-orange-subtle-default {
-  --background-color: $ion-bg-extended-orange-subtle-default;
+  --background-color: #{$ion-bg-extended-orange-subtle-default};
   background-color: $ion-bg-extended-orange-subtle-default;
 }
 .ion-bg-extended-orange-subtle-press {
-  --background-color: $ion-bg-extended-orange-subtle-press;
+  --background-color: #{$ion-bg-extended-orange-subtle-press};
   background-color: $ion-bg-extended-orange-subtle-press;
 }
 .ion-bg-extended-lime-base-default {
-  --background-color: $ion-bg-extended-lime-base-default;
+  --background-color: #{$ion-bg-extended-lime-base-default};
   background-color: $ion-bg-extended-lime-base-default;
 }
 .ion-bg-extended-lime-base-press {
-  --background-color: $ion-bg-extended-lime-base-press;
+  --background-color: #{$ion-bg-extended-lime-base-press};
   background-color: $ion-bg-extended-lime-base-press;
 }
 .ion-bg-extended-lime-subtle-default {
-  --background-color: $ion-bg-extended-lime-subtle-default;
+  --background-color: #{$ion-bg-extended-lime-subtle-default};
   background-color: $ion-bg-extended-lime-subtle-default;
 }
 .ion-bg-extended-lime-subtle-press {
-  --background-color: $ion-bg-extended-lime-subtle-press;
+  --background-color: #{$ion-bg-extended-lime-subtle-press};
   background-color: $ion-bg-extended-lime-subtle-press;
 }
 .ion-bg-extended-teal-base-default {
-  --background-color: $ion-bg-extended-teal-base-default;
+  --background-color: #{$ion-bg-extended-teal-base-default};
   background-color: $ion-bg-extended-teal-base-default;
 }
 .ion-bg-extended-teal-base-press {
-  --background-color: $ion-bg-extended-teal-base-press;
+  --background-color: #{$ion-bg-extended-teal-base-press};
   background-color: $ion-bg-extended-teal-base-press;
 }
 .ion-bg-extended-teal-subtle-default {
-  --background-color: $ion-bg-extended-teal-subtle-default;
+  --background-color: #{$ion-bg-extended-teal-subtle-default};
   background-color: $ion-bg-extended-teal-subtle-default;
 }
 .ion-bg-extended-teal-subtle-press {
-  --background-color: $ion-bg-extended-teal-subtle-press;
+  --background-color: #{$ion-bg-extended-teal-subtle-press};
   background-color: $ion-bg-extended-teal-subtle-press;
 }
 .ion-bg-extended-aqua-base-default {
-  --background-color: $ion-bg-extended-aqua-base-default;
+  --background-color: #{$ion-bg-extended-aqua-base-default};
   background-color: $ion-bg-extended-aqua-base-default;
 }
 .ion-bg-extended-aqua-base-press {
-  --background-color: $ion-bg-extended-aqua-base-press;
+  --background-color: #{$ion-bg-extended-aqua-base-press};
   background-color: $ion-bg-extended-aqua-base-press;
 }
 .ion-bg-extended-aqua-subtle-default {
-  --background-color: $ion-bg-extended-aqua-subtle-default;
+  --background-color: #{$ion-bg-extended-aqua-subtle-default};
   background-color: $ion-bg-extended-aqua-subtle-default;
 }
 .ion-bg-extended-aqua-subtle-press {
-  --background-color: $ion-bg-extended-aqua-subtle-press;
+  --background-color: #{$ion-bg-extended-aqua-subtle-press};
   background-color: $ion-bg-extended-aqua-subtle-press;
 }
 .ion-bg-extended-indigo-base-default {
-  --background-color: $ion-bg-extended-indigo-base-default;
+  --background-color: #{$ion-bg-extended-indigo-base-default};
   background-color: $ion-bg-extended-indigo-base-default;
 }
 .ion-bg-extended-indigo-base-press {
-  --background-color: $ion-bg-extended-indigo-base-press;
+  --background-color: #{$ion-bg-extended-indigo-base-press};
   background-color: $ion-bg-extended-indigo-base-press;
 }
 .ion-bg-extended-indigo-subtle-default {
-  --background-color: $ion-bg-extended-indigo-subtle-default;
+  --background-color: #{$ion-bg-extended-indigo-subtle-default};
   background-color: $ion-bg-extended-indigo-subtle-default;
 }
 .ion-bg-extended-indigo-subtle-press {
-  --background-color: $ion-bg-extended-indigo-subtle-press;
+  --background-color: #{$ion-bg-extended-indigo-subtle-press};
   background-color: $ion-bg-extended-indigo-subtle-press;
 }
 .ion-bg-extended-violet-base-default {
-  --background-color: $ion-bg-extended-violet-base-default;
+  --background-color: #{$ion-bg-extended-violet-base-default};
   background-color: $ion-bg-extended-violet-base-default;
 }
 .ion-bg-extended-violet-base-press {
-  --background-color: $ion-bg-extended-violet-base-press;
+  --background-color: #{$ion-bg-extended-violet-base-press};
   background-color: $ion-bg-extended-violet-base-press;
 }
 .ion-bg-extended-violet-subtle-default {
-  --background-color: $ion-bg-extended-violet-subtle-default;
+  --background-color: #{$ion-bg-extended-violet-subtle-default};
   background-color: $ion-bg-extended-violet-subtle-default;
 }
 .ion-bg-extended-violet-subtle-press {
-  --background-color: $ion-bg-extended-violet-subtle-press;
+  --background-color: #{$ion-bg-extended-violet-subtle-press};
   background-color: $ion-bg-extended-violet-subtle-press;
 }
 .ion-bg-extended-purple-base-default {
-  --background-color: $ion-bg-extended-purple-base-default;
+  --background-color: #{$ion-bg-extended-purple-base-default};
   background-color: $ion-bg-extended-purple-base-default;
 }
 .ion-bg-extended-purple-base-press {
-  --background-color: $ion-bg-extended-purple-base-press;
+  --background-color: #{$ion-bg-extended-purple-base-press};
   background-color: $ion-bg-extended-purple-base-press;
 }
 .ion-bg-extended-purple-subtle-default {
-  --background-color: $ion-bg-extended-purple-subtle-default;
+  --background-color: #{$ion-bg-extended-purple-subtle-default};
   background-color: $ion-bg-extended-purple-subtle-default;
 }
 .ion-bg-extended-purple-subtle-press {
-  --background-color: $ion-bg-extended-purple-subtle-press;
+  --background-color: #{$ion-bg-extended-purple-subtle-press};
   background-color: $ion-bg-extended-purple-subtle-press;
 }
 .ion-bg-extended-magenta-base-default {
-  --background-color: $ion-bg-extended-magenta-base-default;
+  --background-color: #{$ion-bg-extended-magenta-base-default};
   background-color: $ion-bg-extended-magenta-base-default;
 }
 .ion-bg-extended-magenta-base-press {
-  --background-color: $ion-bg-extended-magenta-base-press;
+  --background-color: #{$ion-bg-extended-magenta-base-press};
   background-color: $ion-bg-extended-magenta-base-press;
 }
 .ion-bg-extended-magenta-subtle-default {
-  --background-color: $ion-bg-extended-magenta-subtle-default;
+  --background-color: #{$ion-bg-extended-magenta-subtle-default};
   background-color: $ion-bg-extended-magenta-subtle-default;
 }
 .ion-bg-extended-magenta-subtle-press {
-  --background-color: $ion-bg-extended-magenta-subtle-press;
+  --background-color: #{$ion-bg-extended-magenta-subtle-press};
   background-color: $ion-bg-extended-magenta-subtle-press;
 }
 .ion-bg-extended-pink-base-default {
-  --background-color: $ion-bg-extended-pink-base-default;
+  --background-color: #{$ion-bg-extended-pink-base-default};
   background-color: $ion-bg-extended-pink-base-default;
 }
 .ion-bg-extended-pink-base-press {
-  --background-color: $ion-bg-extended-pink-base-press;
+  --background-color: #{$ion-bg-extended-pink-base-press};
   background-color: $ion-bg-extended-pink-base-press;
 }
 .ion-bg-extended-pink-subtle-default {
-  --background-color: $ion-bg-extended-pink-subtle-default;
+  --background-color: #{$ion-bg-extended-pink-subtle-default};
   background-color: $ion-bg-extended-pink-subtle-default;
 }
 .ion-bg-extended-pink-subtle-press {
-  --background-color: $ion-bg-extended-pink-subtle-press;
+  --background-color: #{$ion-bg-extended-pink-subtle-press};
   background-color: $ion-bg-extended-pink-subtle-press;
 }
 .ion-text-default {
-  --color: $ion-text-default;
+  --color: #{$ion-text-default};
   color: $ion-text-default;
 }
 .ion-text-subtle {
-  --color: $ion-text-subtle;
+  --color: #{$ion-text-subtle};
   color: $ion-text-subtle;
 }
 .ion-text-subtlest {
-  --color: $ion-text-subtlest;
+  --color: #{$ion-text-subtlest};
   color: $ion-text-subtlest;
 }
 .ion-text-primary {
-  --color: $ion-text-primary;
+  --color: #{$ion-text-primary};
   color: $ion-text-primary;
 }
 .ion-text-disabled {
-  --color: $ion-text-disabled;
+  --color: #{$ion-text-disabled};
   color: $ion-text-disabled;
 }
 .ion-text-danger {
-  --color: $ion-text-danger;
+  --color: #{$ion-text-danger};
   color: $ion-text-danger;
 }
 .ion-text-info {
-  --color: $ion-text-info;
+  --color: #{$ion-text-info};
   color: $ion-text-info;
 }
 .ion-text-warning {
-  --color: $ion-text-warning;
+  --color: #{$ion-text-warning};
   color: $ion-text-warning;
 }
 .ion-text-success {
-  --color: $ion-text-success;
+  --color: #{$ion-text-success};
   color: $ion-text-success;
 }
 .ion-text-link-default {
-  --color: $ion-text-link-default;
+  --color: #{$ion-text-link-default};
   color: $ion-text-link-default;
 }
 .ion-text-link-press {
-  --color: $ion-text-link-press;
+  --color: #{$ion-text-link-press};
   color: $ion-text-link-press;
 }
 .ion-text-link-visited {
-  --color: $ion-text-link-visited;
+  --color: #{$ion-text-link-visited};
   color: $ion-text-link-visited;
 }
 .ion-text-inverse {
-  --color: $ion-text-inverse;
+  --color: #{$ion-text-inverse};
   color: $ion-text-inverse;
 }
 .ion-text-select {
-  --color: $ion-text-select;
+  --color: #{$ion-text-select};
   color: $ion-text-select;
 }
 .ion-text-extended-pumpkin {
-  --color: $ion-text-extended-pumpkin;
+  --color: #{$ion-text-extended-pumpkin};
   color: $ion-text-extended-pumpkin;
 }
 .ion-text-extended-orange {
-  --color: $ion-text-extended-orange;
+  --color: #{$ion-text-extended-orange};
   color: $ion-text-extended-orange;
 }
 .ion-text-extended-lime {
-  --color: $ion-text-extended-lime;
+  --color: #{$ion-text-extended-lime};
   color: $ion-text-extended-lime;
 }
 .ion-text-extended-teal {
-  --color: $ion-text-extended-teal;
+  --color: #{$ion-text-extended-teal};
   color: $ion-text-extended-teal;
 }
 .ion-text-extended-aqua {
-  --color: $ion-text-extended-aqua;
+  --color: #{$ion-text-extended-aqua};
   color: $ion-text-extended-aqua;
 }
 .ion-text-extended-indigo {
-  --color: $ion-text-extended-indigo;
+  --color: #{$ion-text-extended-indigo};
   color: $ion-text-extended-indigo;
 }
 .ion-text-extended-violet {
-  --color: $ion-text-extended-violet;
+  --color: #{$ion-text-extended-violet};
   color: $ion-text-extended-violet;
 }
 .ion-text-extended-purple {
-  --color: $ion-text-extended-purple;
+  --color: #{$ion-text-extended-purple};
   color: $ion-text-extended-purple;
 }
 .ion-text-extended-magenta {
-  --color: $ion-text-extended-magenta;
+  --color: #{$ion-text-extended-magenta};
   color: $ion-text-extended-magenta;
 }
 .ion-text-extended-pink {
-  --color: $ion-text-extended-pink;
+  --color: #{$ion-text-extended-pink};
   color: $ion-text-extended-pink;
 }
 .ion-border-default {
-  --border-color: $ion-border-default;
+  --border-color: #{$ion-border-default};
   border-color: $ion-border-default;
 }
 .ion-border-boldest {
-  --border-color: $ion-border-boldest;
+  --border-color: #{$ion-border-boldest};
   border-color: $ion-border-boldest;
 }
 .ion-border-subtle {
-  --border-color: $ion-border-subtle;
+  --border-color: #{$ion-border-subtle};
   border-color: $ion-border-subtle;
 }
 .ion-border-subtlest {
-  --border-color: $ion-border-subtlest;
+  --border-color: #{$ion-border-subtlest};
   border-color: $ion-border-subtlest;
 }
 .ion-border-primary {
-  --border-color: $ion-border-primary;
+  --border-color: #{$ion-border-primary};
   border-color: $ion-border-primary;
 }
 .ion-border-success {
-  --border-color: $ion-border-success;
+  --border-color: #{$ion-border-success};
   border-color: $ion-border-success;
 }
 .ion-border-warning {
-  --border-color: $ion-border-warning;
+  --border-color: #{$ion-border-warning};
   border-color: $ion-border-warning;
 }
 .ion-border-disabled {
-  --border-color: $ion-border-disabled;
+  --border-color: #{$ion-border-disabled};
   border-color: $ion-border-disabled;
 }
 .ion-border-focus-0 {
-  --border-color: $ion-border-focus-0;
+  --border-color: #{$ion-border-focus-0};
   border-color: $ion-border-focus-0;
 }
 .ion-border-focus-default {
-  --border-color: $ion-border-focus-default;
+  --border-color: #{$ion-border-focus-default};
   border-color: $ion-border-focus-default;
 }
 .ion-border-focus-error {
-  --border-color: $ion-border-focus-error;
+  --border-color: #{$ion-border-focus-error};
   border-color: $ion-border-focus-error;
 }
 .ion-border-danger-default {
-  --border-color: $ion-border-danger-default;
+  --border-color: #{$ion-border-danger-default};
   border-color: $ion-border-danger-default;
 }
 .ion-border-danger-press {
-  --border-color: $ion-border-danger-press;
+  --border-color: #{$ion-border-danger-press};
   border-color: $ion-border-danger-press;
 }
 .ion-border-input-default {
-  --border-color: $ion-border-input-default;
+  --border-color: #{$ion-border-input-default};
   border-color: $ion-border-input-default;
 }
 .ion-border-input-press {
-  --border-color: $ion-border-input-press;
+  --border-color: #{$ion-border-input-press};
   border-color: $ion-border-input-press;
 }
 .ion-border-input-read-only {
-  --border-color: $ion-border-input-read-only;
+  --border-color: #{$ion-border-input-read-only};
   border-color: $ion-border-input-read-only;
 }
 .ion-border-style-none {
-  --border-style: $ion-border-style-none;
+  --border-style: #{$ion-border-style-none};
   border-style: $ion-border-style-none;
 }
 .ion-border-style-solid {
-  --border-style: $ion-border-style-solid;
+  --border-style: #{$ion-border-style-solid};
   border-style: $ion-border-style-solid;
 }
 .ion-border-style-dashed {
-  --border-style: $ion-border-style-dashed;
+  --border-style: #{$ion-border-style-dashed};
   border-style: $ion-border-style-dashed;
 }
 .ion-border-style-dotted {
-  --border-style: $ion-border-style-dotted;
+  --border-style: #{$ion-border-style-dotted};
   border-style: $ion-border-style-dotted;
 }
 .ion-border-size-0 {
-  --border-width: $ion-border-size-0;
+  --border-width: #{$ion-border-size-0};
   border-width: $ion-border-size-0;
 }
 .ion-border-size-025 {
-  --border-width: $ion-border-size-025;
+  --border-width: #{$ion-border-size-025};
   border-width: $ion-border-size-025;
 }
 .ion-border-size-050 {
-  --border-width: $ion-border-size-050;
+  --border-width: #{$ion-border-size-050};
   border-width: $ion-border-size-050;
 }
 .ion-border-size-075 {
-  --border-width: $ion-border-size-075;
+  --border-width: #{$ion-border-size-075};
   border-width: $ion-border-size-075;
 }
 .ion-border-radius-0 {
-  --border-radius: $ion-border-radius-0;
+  --border-radius: #{$ion-border-radius-0};
   border-radius: $ion-border-radius-0;
 }
 .ion-border-radius-100 {
-  --border-radius: $ion-border-radius-100;
+  --border-radius: #{$ion-border-radius-100};
   border-radius: $ion-border-radius-100;
 }
 .ion-border-radius-200 {
-  --border-radius: $ion-border-radius-200;
+  --border-radius: #{$ion-border-radius-200};
   border-radius: $ion-border-radius-200;
 }
 .ion-border-radius-300 {
-  --border-radius: $ion-border-radius-300;
+  --border-radius: #{$ion-border-radius-300};
   border-radius: $ion-border-radius-300;
 }
 .ion-border-radius-400 {
-  --border-radius: $ion-border-radius-400;
+  --border-radius: #{$ion-border-radius-400};
   border-radius: $ion-border-radius-400;
 }
 .ion-border-radius-500 {
-  --border-radius: $ion-border-radius-500;
+  --border-radius: #{$ion-border-radius-500};
   border-radius: $ion-border-radius-500;
 }
 .ion-border-radius-800 {
-  --border-radius: $ion-border-radius-800;
+  --border-radius: #{$ion-border-radius-800};
   border-radius: $ion-border-radius-800;
 }
 .ion-border-radius-1000 {
-  --border-radius: $ion-border-radius-1000;
+  --border-radius: #{$ion-border-radius-1000};
   border-radius: $ion-border-radius-1000;
 }
 .ion-border-radius-full {
-  --border-radius: $ion-border-radius-full;
+  --border-radius: #{$ion-border-radius-full};
   border-radius: $ion-border-radius-full;
 }
 .ion-border-radius-025 {
-  --border-radius: $ion-border-radius-025;
+  --border-radius: #{$ion-border-radius-025};
   border-radius: $ion-border-radius-025;
 }
 .ion-icon-default {
-  --color: $ion-icon-default;
+  --color: #{$ion-icon-default};
   color: $ion-icon-default;
 }
 .ion-icon-subtle {
-  --color: $ion-icon-subtle;
+  --color: #{$ion-icon-subtle};
   color: $ion-icon-subtle;
 }
 .ion-icon-subtlest {
-  --color: $ion-icon-subtlest;
+  --color: #{$ion-icon-subtlest};
   color: $ion-icon-subtlest;
 }
 .ion-icon-disabled {
-  --color: $ion-icon-disabled;
+  --color: #{$ion-icon-disabled};
   color: $ion-icon-disabled;
 }
 .ion-icon-primary {
-  --color: $ion-icon-primary;
+  --color: #{$ion-icon-primary};
   color: $ion-icon-primary;
 }
 .ion-icon-select {
-  --color: $ion-icon-select;
+  --color: #{$ion-icon-select};
   color: $ion-icon-select;
 }
 .ion-icon-info {
-  --color: $ion-icon-info;
+  --color: #{$ion-icon-info};
   color: $ion-icon-info;
 }
 .ion-icon-success {
-  --color: $ion-icon-success;
+  --color: #{$ion-icon-success};
   color: $ion-icon-success;
 }
 .ion-icon-danger {
-  --color: $ion-icon-danger;
+  --color: #{$ion-icon-danger};
   color: $ion-icon-danger;
 }
 .ion-icon-warning {
-  --color: $ion-icon-warning;
+  --color: #{$ion-icon-warning};
   color: $ion-icon-warning;
 }
 .ion-icon-inverse {
-  --color: $ion-icon-inverse;
+  --color: #{$ion-icon-inverse};
   color: $ion-icon-inverse;
 }
 .ion-icon-link-default {
-  --color: $ion-icon-link-default;
+  --color: #{$ion-icon-link-default};
   color: $ion-icon-link-default;
 }
 .ion-icon-link-press {
-  --color: $ion-icon-link-press;
+  --color: #{$ion-icon-link-press};
   color: $ion-icon-link-press;
 }
 .ion-icon-link-visited {
-  --color: $ion-icon-link-visited;
+  --color: #{$ion-icon-link-visited};
   color: $ion-icon-link-visited;
 }
 .ion-icon-extended-pumpkin {
-  --color: $ion-icon-extended-pumpkin;
+  --color: #{$ion-icon-extended-pumpkin};
   color: $ion-icon-extended-pumpkin;
 }
 .ion-icon-extended-orange {
-  --color: $ion-icon-extended-orange;
+  --color: #{$ion-icon-extended-orange};
   color: $ion-icon-extended-orange;
 }
 .ion-icon-extended-lime {
-  --color: $ion-icon-extended-lime;
+  --color: #{$ion-icon-extended-lime};
   color: $ion-icon-extended-lime;
 }
 .ion-icon-extended-teal {
-  --color: $ion-icon-extended-teal;
+  --color: #{$ion-icon-extended-teal};
   color: $ion-icon-extended-teal;
 }
 .ion-icon-extended-aqua {
-  --color: $ion-icon-extended-aqua;
+  --color: #{$ion-icon-extended-aqua};
   color: $ion-icon-extended-aqua;
 }
 .ion-icon-extended-indigo {
-  --color: $ion-icon-extended-indigo;
+  --color: #{$ion-icon-extended-indigo};
   color: $ion-icon-extended-indigo;
 }
 .ion-icon-extended-violet {
-  --color: $ion-icon-extended-violet;
+  --color: #{$ion-icon-extended-violet};
   color: $ion-icon-extended-violet;
 }
 .ion-icon-extended-purple {
-  --color: $ion-icon-extended-purple;
+  --color: #{$ion-icon-extended-purple};
   color: $ion-icon-extended-purple;
 }
 .ion-icon-extended-magenta {
-  --color: $ion-icon-extended-magenta;
+  --color: #{$ion-icon-extended-magenta};
   color: $ion-icon-extended-magenta;
 }
 .ion-icon-extended-pink {
-  --color: $ion-icon-extended-pink;
+  --color: #{$ion-icon-extended-pink};
   color: $ion-icon-extended-pink;
 }
 .ion-state-disabled {
-  --color: $ion-state-disabled;
+  --color: #{$ion-state-disabled};
   color: $ion-state-disabled;
 }
 .ion-state-press {
-  --color: $ion-state-press;
+  --color: #{$ion-state-press};
   color: $ion-state-press;
 }
 .ion-elevation-1 {
-  --box-shadow: $ion-elevation-1;
+  --box-shadow: #{$ion-elevation-1};
   box-shadow: $ion-elevation-1;
 }
 .ion-elevation-2 {
-  --box-shadow: $ion-elevation-2;
+  --box-shadow: #{$ion-elevation-2};
   box-shadow: $ion-elevation-2;
 }
 .ion-elevation-3 {
-  --box-shadow: $ion-elevation-3;
+  --box-shadow: #{$ion-elevation-3};
   box-shadow: $ion-elevation-3;
 }
 .ion-elevation-4 {
-  --box-shadow: $ion-elevation-4;
+  --box-shadow: #{$ion-elevation-4};
   box-shadow: $ion-elevation-4;
 }
 
@@ -2644,843 +2644,843 @@
   z-index: $ion-z-index-top;
 }
 .ion-rectangular-2xs {
-  --border-radius: $ion-rectangular-2xs;
+  --border-radius: #{$ion-rectangular-2xs};
   border-radius: $ion-rectangular-2xs;
 }
 .ion-rectangular-xs {
-  --border-radius: $ion-rectangular-xs;
+  --border-radius: #{$ion-rectangular-xs};
   border-radius: $ion-rectangular-xs;
 }
 .ion-rectangular-sm {
-  --border-radius: $ion-rectangular-sm;
+  --border-radius: #{$ion-rectangular-sm};
   border-radius: $ion-rectangular-sm;
 }
 .ion-rectangular-md {
-  --border-radius: $ion-rectangular-md;
+  --border-radius: #{$ion-rectangular-md};
   border-radius: $ion-rectangular-md;
 }
 .ion-rectangular-lg {
-  --border-radius: $ion-rectangular-lg;
+  --border-radius: #{$ion-rectangular-lg};
   border-radius: $ion-rectangular-lg;
 }
 .ion-rectangular-xl {
-  --border-radius: $ion-rectangular-xl;
+  --border-radius: #{$ion-rectangular-xl};
   border-radius: $ion-rectangular-xl;
 }
 .ion-rectangular-2xl {
-  --border-radius: $ion-rectangular-2xl;
+  --border-radius: #{$ion-rectangular-2xl};
   border-radius: $ion-rectangular-2xl;
 }
 .ion-round-2xs {
-  --border-radius: $ion-round-2xs;
+  --border-radius: #{$ion-round-2xs};
   border-radius: $ion-round-2xs;
 }
 .ion-round-xs {
-  --border-radius: $ion-round-xs;
+  --border-radius: #{$ion-round-xs};
   border-radius: $ion-round-xs;
 }
 .ion-round-sm {
-  --border-radius: $ion-round-sm;
+  --border-radius: #{$ion-round-sm};
   border-radius: $ion-round-sm;
 }
 .ion-round-md {
-  --border-radius: $ion-round-md;
+  --border-radius: #{$ion-round-md};
   border-radius: $ion-round-md;
 }
 .ion-round-lg {
-  --border-radius: $ion-round-lg;
+  --border-radius: #{$ion-round-lg};
   border-radius: $ion-round-lg;
 }
 .ion-round-xl {
-  --border-radius: $ion-round-xl;
+  --border-radius: #{$ion-round-xl};
   border-radius: $ion-round-xl;
 }
 .ion-round-2xl {
-  --border-radius: $ion-round-2xl;
+  --border-radius: #{$ion-round-2xl};
   border-radius: $ion-round-2xl;
 }
 .ion-soft-2xs {
-  --border-radius: $ion-soft-2xs;
+  --border-radius: #{$ion-soft-2xs};
   border-radius: $ion-soft-2xs;
 }
 .ion-soft-xs {
-  --border-radius: $ion-soft-xs;
+  --border-radius: #{$ion-soft-xs};
   border-radius: $ion-soft-xs;
 }
 .ion-soft-sm {
-  --border-radius: $ion-soft-sm;
+  --border-radius: #{$ion-soft-sm};
   border-radius: $ion-soft-sm;
 }
 .ion-soft-md {
-  --border-radius: $ion-soft-md;
+  --border-radius: #{$ion-soft-md};
   border-radius: $ion-soft-md;
 }
 .ion-soft-lg {
-  --border-radius: $ion-soft-lg;
+  --border-radius: #{$ion-soft-lg};
   border-radius: $ion-soft-lg;
 }
 .ion-soft-xl {
-  --border-radius: $ion-soft-xl;
+  --border-radius: #{$ion-soft-xl};
   border-radius: $ion-soft-xl;
 }
 .ion-soft-2xl {
-  --border-radius: $ion-soft-2xl;
+  --border-radius: #{$ion-soft-2xl};
   border-radius: $ion-soft-2xl;
 }
 .ion-primitives-neutral-100 {
-  --color: $ion-primitives-neutral-100;
+  --color: #{$ion-primitives-neutral-100};
   color: $ion-primitives-neutral-100;
 }
 .ion-primitives-neutral-200 {
-  --color: $ion-primitives-neutral-200;
+  --color: #{$ion-primitives-neutral-200};
   color: $ion-primitives-neutral-200;
 }
 .ion-primitives-neutral-300 {
-  --color: $ion-primitives-neutral-300;
+  --color: #{$ion-primitives-neutral-300};
   color: $ion-primitives-neutral-300;
 }
 .ion-primitives-neutral-400 {
-  --color: $ion-primitives-neutral-400;
+  --color: #{$ion-primitives-neutral-400};
   color: $ion-primitives-neutral-400;
 }
 .ion-primitives-neutral-500 {
-  --color: $ion-primitives-neutral-500;
+  --color: #{$ion-primitives-neutral-500};
   color: $ion-primitives-neutral-500;
 }
 .ion-primitives-neutral-600 {
-  --color: $ion-primitives-neutral-600;
+  --color: #{$ion-primitives-neutral-600};
   color: $ion-primitives-neutral-600;
 }
 .ion-primitives-neutral-700 {
-  --color: $ion-primitives-neutral-700;
+  --color: #{$ion-primitives-neutral-700};
   color: $ion-primitives-neutral-700;
 }
 .ion-primitives-neutral-800 {
-  --color: $ion-primitives-neutral-800;
+  --color: #{$ion-primitives-neutral-800};
   color: $ion-primitives-neutral-800;
 }
 .ion-primitives-neutral-900 {
-  --color: $ion-primitives-neutral-900;
+  --color: #{$ion-primitives-neutral-900};
   color: $ion-primitives-neutral-900;
 }
 .ion-primitives-neutral-1000 {
-  --color: $ion-primitives-neutral-1000;
+  --color: #{$ion-primitives-neutral-1000};
   color: $ion-primitives-neutral-1000;
 }
 .ion-primitives-neutral-1100 {
-  --color: $ion-primitives-neutral-1100;
+  --color: #{$ion-primitives-neutral-1100};
   color: $ion-primitives-neutral-1100;
 }
 .ion-primitives-neutral-1200 {
-  --color: $ion-primitives-neutral-1200;
+  --color: #{$ion-primitives-neutral-1200};
   color: $ion-primitives-neutral-1200;
 }
 .ion-primitives-base-white {
-  --color: $ion-primitives-base-white;
+  --color: #{$ion-primitives-base-white};
   color: $ion-primitives-base-white;
 }
 .ion-primitives-base-black {
-  --color: $ion-primitives-base-black;
+  --color: #{$ion-primitives-base-black};
   color: $ion-primitives-base-black;
 }
 .ion-primitives-red-100 {
-  --color: $ion-primitives-red-100;
+  --color: #{$ion-primitives-red-100};
   color: $ion-primitives-red-100;
 }
 .ion-primitives-red-200 {
-  --color: $ion-primitives-red-200;
+  --color: #{$ion-primitives-red-200};
   color: $ion-primitives-red-200;
 }
 .ion-primitives-red-300 {
-  --color: $ion-primitives-red-300;
+  --color: #{$ion-primitives-red-300};
   color: $ion-primitives-red-300;
 }
 .ion-primitives-red-400 {
-  --color: $ion-primitives-red-400;
+  --color: #{$ion-primitives-red-400};
   color: $ion-primitives-red-400;
 }
 .ion-primitives-red-500 {
-  --color: $ion-primitives-red-500;
+  --color: #{$ion-primitives-red-500};
   color: $ion-primitives-red-500;
 }
 .ion-primitives-red-600 {
-  --color: $ion-primitives-red-600;
+  --color: #{$ion-primitives-red-600};
   color: $ion-primitives-red-600;
 }
 .ion-primitives-red-700 {
-  --color: $ion-primitives-red-700;
+  --color: #{$ion-primitives-red-700};
   color: $ion-primitives-red-700;
 }
 .ion-primitives-red-800 {
-  --color: $ion-primitives-red-800;
+  --color: #{$ion-primitives-red-800};
   color: $ion-primitives-red-800;
 }
 .ion-primitives-red-900 {
-  --color: $ion-primitives-red-900;
+  --color: #{$ion-primitives-red-900};
   color: $ion-primitives-red-900;
 }
 .ion-primitives-red-1000 {
-  --color: $ion-primitives-red-1000;
+  --color: #{$ion-primitives-red-1000};
   color: $ion-primitives-red-1000;
 }
 .ion-primitives-red-1100 {
-  --color: $ion-primitives-red-1100;
+  --color: #{$ion-primitives-red-1100};
   color: $ion-primitives-red-1100;
 }
 .ion-primitives-red-1200 {
-  --color: $ion-primitives-red-1200;
+  --color: #{$ion-primitives-red-1200};
   color: $ion-primitives-red-1200;
 }
 .ion-primitives-pumpkin-100 {
-  --color: $ion-primitives-pumpkin-100;
+  --color: #{$ion-primitives-pumpkin-100};
   color: $ion-primitives-pumpkin-100;
 }
 .ion-primitives-pumpkin-200 {
-  --color: $ion-primitives-pumpkin-200;
+  --color: #{$ion-primitives-pumpkin-200};
   color: $ion-primitives-pumpkin-200;
 }
 .ion-primitives-pumpkin-300 {
-  --color: $ion-primitives-pumpkin-300;
+  --color: #{$ion-primitives-pumpkin-300};
   color: $ion-primitives-pumpkin-300;
 }
 .ion-primitives-pumpkin-400 {
-  --color: $ion-primitives-pumpkin-400;
+  --color: #{$ion-primitives-pumpkin-400};
   color: $ion-primitives-pumpkin-400;
 }
 .ion-primitives-pumpkin-500 {
-  --color: $ion-primitives-pumpkin-500;
+  --color: #{$ion-primitives-pumpkin-500};
   color: $ion-primitives-pumpkin-500;
 }
 .ion-primitives-pumpkin-600 {
-  --color: $ion-primitives-pumpkin-600;
+  --color: #{$ion-primitives-pumpkin-600};
   color: $ion-primitives-pumpkin-600;
 }
 .ion-primitives-pumpkin-700 {
-  --color: $ion-primitives-pumpkin-700;
+  --color: #{$ion-primitives-pumpkin-700};
   color: $ion-primitives-pumpkin-700;
 }
 .ion-primitives-pumpkin-800 {
-  --color: $ion-primitives-pumpkin-800;
+  --color: #{$ion-primitives-pumpkin-800};
   color: $ion-primitives-pumpkin-800;
 }
 .ion-primitives-pumpkin-900 {
-  --color: $ion-primitives-pumpkin-900;
+  --color: #{$ion-primitives-pumpkin-900};
   color: $ion-primitives-pumpkin-900;
 }
 .ion-primitives-pumpkin-1000 {
-  --color: $ion-primitives-pumpkin-1000;
+  --color: #{$ion-primitives-pumpkin-1000};
   color: $ion-primitives-pumpkin-1000;
 }
 .ion-primitives-pumpkin-1100 {
-  --color: $ion-primitives-pumpkin-1100;
+  --color: #{$ion-primitives-pumpkin-1100};
   color: $ion-primitives-pumpkin-1100;
 }
 .ion-primitives-pumpkin-1200 {
-  --color: $ion-primitives-pumpkin-1200;
+  --color: #{$ion-primitives-pumpkin-1200};
   color: $ion-primitives-pumpkin-1200;
 }
 .ion-primitives-orange-100 {
-  --color: $ion-primitives-orange-100;
+  --color: #{$ion-primitives-orange-100};
   color: $ion-primitives-orange-100;
 }
 .ion-primitives-orange-200 {
-  --color: $ion-primitives-orange-200;
+  --color: #{$ion-primitives-orange-200};
   color: $ion-primitives-orange-200;
 }
 .ion-primitives-orange-300 {
-  --color: $ion-primitives-orange-300;
+  --color: #{$ion-primitives-orange-300};
   color: $ion-primitives-orange-300;
 }
 .ion-primitives-orange-400 {
-  --color: $ion-primitives-orange-400;
+  --color: #{$ion-primitives-orange-400};
   color: $ion-primitives-orange-400;
 }
 .ion-primitives-orange-500 {
-  --color: $ion-primitives-orange-500;
+  --color: #{$ion-primitives-orange-500};
   color: $ion-primitives-orange-500;
 }
 .ion-primitives-orange-600 {
-  --color: $ion-primitives-orange-600;
+  --color: #{$ion-primitives-orange-600};
   color: $ion-primitives-orange-600;
 }
 .ion-primitives-orange-700 {
-  --color: $ion-primitives-orange-700;
+  --color: #{$ion-primitives-orange-700};
   color: $ion-primitives-orange-700;
 }
 .ion-primitives-orange-800 {
-  --color: $ion-primitives-orange-800;
+  --color: #{$ion-primitives-orange-800};
   color: $ion-primitives-orange-800;
 }
 .ion-primitives-orange-900 {
-  --color: $ion-primitives-orange-900;
+  --color: #{$ion-primitives-orange-900};
   color: $ion-primitives-orange-900;
 }
 .ion-primitives-orange-1000 {
-  --color: $ion-primitives-orange-1000;
+  --color: #{$ion-primitives-orange-1000};
   color: $ion-primitives-orange-1000;
 }
 .ion-primitives-orange-1100 {
-  --color: $ion-primitives-orange-1100;
+  --color: #{$ion-primitives-orange-1100};
   color: $ion-primitives-orange-1100;
 }
 .ion-primitives-orange-1200 {
-  --color: $ion-primitives-orange-1200;
+  --color: #{$ion-primitives-orange-1200};
   color: $ion-primitives-orange-1200;
 }
 .ion-primitives-yellow-100 {
-  --color: $ion-primitives-yellow-100;
+  --color: #{$ion-primitives-yellow-100};
   color: $ion-primitives-yellow-100;
 }
 .ion-primitives-yellow-200 {
-  --color: $ion-primitives-yellow-200;
+  --color: #{$ion-primitives-yellow-200};
   color: $ion-primitives-yellow-200;
 }
 .ion-primitives-yellow-300 {
-  --color: $ion-primitives-yellow-300;
+  --color: #{$ion-primitives-yellow-300};
   color: $ion-primitives-yellow-300;
 }
 .ion-primitives-yellow-400 {
-  --color: $ion-primitives-yellow-400;
+  --color: #{$ion-primitives-yellow-400};
   color: $ion-primitives-yellow-400;
 }
 .ion-primitives-yellow-500 {
-  --color: $ion-primitives-yellow-500;
+  --color: #{$ion-primitives-yellow-500};
   color: $ion-primitives-yellow-500;
 }
 .ion-primitives-yellow-600 {
-  --color: $ion-primitives-yellow-600;
+  --color: #{$ion-primitives-yellow-600};
   color: $ion-primitives-yellow-600;
 }
 .ion-primitives-yellow-700 {
-  --color: $ion-primitives-yellow-700;
+  --color: #{$ion-primitives-yellow-700};
   color: $ion-primitives-yellow-700;
 }
 .ion-primitives-yellow-800 {
-  --color: $ion-primitives-yellow-800;
+  --color: #{$ion-primitives-yellow-800};
   color: $ion-primitives-yellow-800;
 }
 .ion-primitives-yellow-900 {
-  --color: $ion-primitives-yellow-900;
+  --color: #{$ion-primitives-yellow-900};
   color: $ion-primitives-yellow-900;
 }
 .ion-primitives-yellow-1000 {
-  --color: $ion-primitives-yellow-1000;
+  --color: #{$ion-primitives-yellow-1000};
   color: $ion-primitives-yellow-1000;
 }
 .ion-primitives-yellow-1100 {
-  --color: $ion-primitives-yellow-1100;
+  --color: #{$ion-primitives-yellow-1100};
   color: $ion-primitives-yellow-1100;
 }
 .ion-primitives-yellow-1200 {
-  --color: $ion-primitives-yellow-1200;
+  --color: #{$ion-primitives-yellow-1200};
   color: $ion-primitives-yellow-1200;
 }
 .ion-primitives-lime-100 {
-  --color: $ion-primitives-lime-100;
+  --color: #{$ion-primitives-lime-100};
   color: $ion-primitives-lime-100;
 }
 .ion-primitives-lime-200 {
-  --color: $ion-primitives-lime-200;
+  --color: #{$ion-primitives-lime-200};
   color: $ion-primitives-lime-200;
 }
 .ion-primitives-lime-300 {
-  --color: $ion-primitives-lime-300;
+  --color: #{$ion-primitives-lime-300};
   color: $ion-primitives-lime-300;
 }
 .ion-primitives-lime-400 {
-  --color: $ion-primitives-lime-400;
+  --color: #{$ion-primitives-lime-400};
   color: $ion-primitives-lime-400;
 }
 .ion-primitives-lime-500 {
-  --color: $ion-primitives-lime-500;
+  --color: #{$ion-primitives-lime-500};
   color: $ion-primitives-lime-500;
 }
 .ion-primitives-lime-600 {
-  --color: $ion-primitives-lime-600;
+  --color: #{$ion-primitives-lime-600};
   color: $ion-primitives-lime-600;
 }
 .ion-primitives-lime-700 {
-  --color: $ion-primitives-lime-700;
+  --color: #{$ion-primitives-lime-700};
   color: $ion-primitives-lime-700;
 }
 .ion-primitives-lime-800 {
-  --color: $ion-primitives-lime-800;
+  --color: #{$ion-primitives-lime-800};
   color: $ion-primitives-lime-800;
 }
 .ion-primitives-lime-900 {
-  --color: $ion-primitives-lime-900;
+  --color: #{$ion-primitives-lime-900};
   color: $ion-primitives-lime-900;
 }
 .ion-primitives-lime-1000 {
-  --color: $ion-primitives-lime-1000;
+  --color: #{$ion-primitives-lime-1000};
   color: $ion-primitives-lime-1000;
 }
 .ion-primitives-lime-1100 {
-  --color: $ion-primitives-lime-1100;
+  --color: #{$ion-primitives-lime-1100};
   color: $ion-primitives-lime-1100;
 }
 .ion-primitives-lime-1200 {
-  --color: $ion-primitives-lime-1200;
+  --color: #{$ion-primitives-lime-1200};
   color: $ion-primitives-lime-1200;
 }
 .ion-primitives-green-100 {
-  --color: $ion-primitives-green-100;
+  --color: #{$ion-primitives-green-100};
   color: $ion-primitives-green-100;
 }
 .ion-primitives-green-200 {
-  --color: $ion-primitives-green-200;
+  --color: #{$ion-primitives-green-200};
   color: $ion-primitives-green-200;
 }
 .ion-primitives-green-300 {
-  --color: $ion-primitives-green-300;
+  --color: #{$ion-primitives-green-300};
   color: $ion-primitives-green-300;
 }
 .ion-primitives-green-400 {
-  --color: $ion-primitives-green-400;
+  --color: #{$ion-primitives-green-400};
   color: $ion-primitives-green-400;
 }
 .ion-primitives-green-500 {
-  --color: $ion-primitives-green-500;
+  --color: #{$ion-primitives-green-500};
   color: $ion-primitives-green-500;
 }
 .ion-primitives-green-600 {
-  --color: $ion-primitives-green-600;
+  --color: #{$ion-primitives-green-600};
   color: $ion-primitives-green-600;
 }
 .ion-primitives-green-700 {
-  --color: $ion-primitives-green-700;
+  --color: #{$ion-primitives-green-700};
   color: $ion-primitives-green-700;
 }
 .ion-primitives-green-800 {
-  --color: $ion-primitives-green-800;
+  --color: #{$ion-primitives-green-800};
   color: $ion-primitives-green-800;
 }
 .ion-primitives-green-900 {
-  --color: $ion-primitives-green-900;
+  --color: #{$ion-primitives-green-900};
   color: $ion-primitives-green-900;
 }
 .ion-primitives-green-1000 {
-  --color: $ion-primitives-green-1000;
+  --color: #{$ion-primitives-green-1000};
   color: $ion-primitives-green-1000;
 }
 .ion-primitives-green-1100 {
-  --color: $ion-primitives-green-1100;
+  --color: #{$ion-primitives-green-1100};
   color: $ion-primitives-green-1100;
 }
 .ion-primitives-green-1200 {
-  --color: $ion-primitives-green-1200;
+  --color: #{$ion-primitives-green-1200};
   color: $ion-primitives-green-1200;
 }
 .ion-primitives-teal-100 {
-  --color: $ion-primitives-teal-100;
+  --color: #{$ion-primitives-teal-100};
   color: $ion-primitives-teal-100;
 }
 .ion-primitives-teal-200 {
-  --color: $ion-primitives-teal-200;
+  --color: #{$ion-primitives-teal-200};
   color: $ion-primitives-teal-200;
 }
 .ion-primitives-teal-300 {
-  --color: $ion-primitives-teal-300;
+  --color: #{$ion-primitives-teal-300};
   color: $ion-primitives-teal-300;
 }
 .ion-primitives-teal-400 {
-  --color: $ion-primitives-teal-400;
+  --color: #{$ion-primitives-teal-400};
   color: $ion-primitives-teal-400;
 }
 .ion-primitives-teal-500 {
-  --color: $ion-primitives-teal-500;
+  --color: #{$ion-primitives-teal-500};
   color: $ion-primitives-teal-500;
 }
 .ion-primitives-teal-600 {
-  --color: $ion-primitives-teal-600;
+  --color: #{$ion-primitives-teal-600};
   color: $ion-primitives-teal-600;
 }
 .ion-primitives-teal-700 {
-  --color: $ion-primitives-teal-700;
+  --color: #{$ion-primitives-teal-700};
   color: $ion-primitives-teal-700;
 }
 .ion-primitives-teal-800 {
-  --color: $ion-primitives-teal-800;
+  --color: #{$ion-primitives-teal-800};
   color: $ion-primitives-teal-800;
 }
 .ion-primitives-teal-900 {
-  --color: $ion-primitives-teal-900;
+  --color: #{$ion-primitives-teal-900};
   color: $ion-primitives-teal-900;
 }
 .ion-primitives-teal-1000 {
-  --color: $ion-primitives-teal-1000;
+  --color: #{$ion-primitives-teal-1000};
   color: $ion-primitives-teal-1000;
 }
 .ion-primitives-teal-1100 {
-  --color: $ion-primitives-teal-1100;
+  --color: #{$ion-primitives-teal-1100};
   color: $ion-primitives-teal-1100;
 }
 .ion-primitives-teal-1200 {
-  --color: $ion-primitives-teal-1200;
+  --color: #{$ion-primitives-teal-1200};
   color: $ion-primitives-teal-1200;
 }
 .ion-primitives-aqua-100 {
-  --color: $ion-primitives-aqua-100;
+  --color: #{$ion-primitives-aqua-100};
   color: $ion-primitives-aqua-100;
 }
 .ion-primitives-aqua-200 {
-  --color: $ion-primitives-aqua-200;
+  --color: #{$ion-primitives-aqua-200};
   color: $ion-primitives-aqua-200;
 }
 .ion-primitives-aqua-300 {
-  --color: $ion-primitives-aqua-300;
+  --color: #{$ion-primitives-aqua-300};
   color: $ion-primitives-aqua-300;
 }
 .ion-primitives-aqua-400 {
-  --color: $ion-primitives-aqua-400;
+  --color: #{$ion-primitives-aqua-400};
   color: $ion-primitives-aqua-400;
 }
 .ion-primitives-aqua-500 {
-  --color: $ion-primitives-aqua-500;
+  --color: #{$ion-primitives-aqua-500};
   color: $ion-primitives-aqua-500;
 }
 .ion-primitives-aqua-600 {
-  --color: $ion-primitives-aqua-600;
+  --color: #{$ion-primitives-aqua-600};
   color: $ion-primitives-aqua-600;
 }
 .ion-primitives-aqua-700 {
-  --color: $ion-primitives-aqua-700;
+  --color: #{$ion-primitives-aqua-700};
   color: $ion-primitives-aqua-700;
 }
 .ion-primitives-aqua-800 {
-  --color: $ion-primitives-aqua-800;
+  --color: #{$ion-primitives-aqua-800};
   color: $ion-primitives-aqua-800;
 }
 .ion-primitives-aqua-900 {
-  --color: $ion-primitives-aqua-900;
+  --color: #{$ion-primitives-aqua-900};
   color: $ion-primitives-aqua-900;
 }
 .ion-primitives-aqua-1000 {
-  --color: $ion-primitives-aqua-1000;
+  --color: #{$ion-primitives-aqua-1000};
   color: $ion-primitives-aqua-1000;
 }
 .ion-primitives-aqua-1100 {
-  --color: $ion-primitives-aqua-1100;
+  --color: #{$ion-primitives-aqua-1100};
   color: $ion-primitives-aqua-1100;
 }
 .ion-primitives-aqua-1200 {
-  --color: $ion-primitives-aqua-1200;
+  --color: #{$ion-primitives-aqua-1200};
   color: $ion-primitives-aqua-1200;
 }
 .ion-primitives-blue-100 {
-  --color: $ion-primitives-blue-100;
+  --color: #{$ion-primitives-blue-100};
   color: $ion-primitives-blue-100;
 }
 .ion-primitives-blue-200 {
-  --color: $ion-primitives-blue-200;
+  --color: #{$ion-primitives-blue-200};
   color: $ion-primitives-blue-200;
 }
 .ion-primitives-blue-300 {
-  --color: $ion-primitives-blue-300;
+  --color: #{$ion-primitives-blue-300};
   color: $ion-primitives-blue-300;
 }
 .ion-primitives-blue-400 {
-  --color: $ion-primitives-blue-400;
+  --color: #{$ion-primitives-blue-400};
   color: $ion-primitives-blue-400;
 }
 .ion-primitives-blue-500 {
-  --color: $ion-primitives-blue-500;
+  --color: #{$ion-primitives-blue-500};
   color: $ion-primitives-blue-500;
 }
 .ion-primitives-blue-600 {
-  --color: $ion-primitives-blue-600;
+  --color: #{$ion-primitives-blue-600};
   color: $ion-primitives-blue-600;
 }
 .ion-primitives-blue-700 {
-  --color: $ion-primitives-blue-700;
+  --color: #{$ion-primitives-blue-700};
   color: $ion-primitives-blue-700;
 }
 .ion-primitives-blue-800 {
-  --color: $ion-primitives-blue-800;
+  --color: #{$ion-primitives-blue-800};
   color: $ion-primitives-blue-800;
 }
 .ion-primitives-blue-900 {
-  --color: $ion-primitives-blue-900;
+  --color: #{$ion-primitives-blue-900};
   color: $ion-primitives-blue-900;
 }
 .ion-primitives-blue-1000 {
-  --color: $ion-primitives-blue-1000;
+  --color: #{$ion-primitives-blue-1000};
   color: $ion-primitives-blue-1000;
 }
 .ion-primitives-blue-1100 {
-  --color: $ion-primitives-blue-1100;
+  --color: #{$ion-primitives-blue-1100};
   color: $ion-primitives-blue-1100;
 }
 .ion-primitives-blue-1200 {
-  --color: $ion-primitives-blue-1200;
+  --color: #{$ion-primitives-blue-1200};
   color: $ion-primitives-blue-1200;
 }
 .ion-primitives-indigo-100 {
-  --color: $ion-primitives-indigo-100;
+  --color: #{$ion-primitives-indigo-100};
   color: $ion-primitives-indigo-100;
 }
 .ion-primitives-indigo-200 {
-  --color: $ion-primitives-indigo-200;
+  --color: #{$ion-primitives-indigo-200};
   color: $ion-primitives-indigo-200;
 }
 .ion-primitives-indigo-300 {
-  --color: $ion-primitives-indigo-300;
+  --color: #{$ion-primitives-indigo-300};
   color: $ion-primitives-indigo-300;
 }
 .ion-primitives-indigo-400 {
-  --color: $ion-primitives-indigo-400;
+  --color: #{$ion-primitives-indigo-400};
   color: $ion-primitives-indigo-400;
 }
 .ion-primitives-indigo-500 {
-  --color: $ion-primitives-indigo-500;
+  --color: #{$ion-primitives-indigo-500};
   color: $ion-primitives-indigo-500;
 }
 .ion-primitives-indigo-600 {
-  --color: $ion-primitives-indigo-600;
+  --color: #{$ion-primitives-indigo-600};
   color: $ion-primitives-indigo-600;
 }
 .ion-primitives-indigo-700 {
-  --color: $ion-primitives-indigo-700;
+  --color: #{$ion-primitives-indigo-700};
   color: $ion-primitives-indigo-700;
 }
 .ion-primitives-indigo-800 {
-  --color: $ion-primitives-indigo-800;
+  --color: #{$ion-primitives-indigo-800};
   color: $ion-primitives-indigo-800;
 }
 .ion-primitives-indigo-900 {
-  --color: $ion-primitives-indigo-900;
+  --color: #{$ion-primitives-indigo-900};
   color: $ion-primitives-indigo-900;
 }
 .ion-primitives-indigo-1000 {
-  --color: $ion-primitives-indigo-1000;
+  --color: #{$ion-primitives-indigo-1000};
   color: $ion-primitives-indigo-1000;
 }
 .ion-primitives-indigo-1100 {
-  --color: $ion-primitives-indigo-1100;
+  --color: #{$ion-primitives-indigo-1100};
   color: $ion-primitives-indigo-1100;
 }
 .ion-primitives-indigo-1200 {
-  --color: $ion-primitives-indigo-1200;
+  --color: #{$ion-primitives-indigo-1200};
   color: $ion-primitives-indigo-1200;
 }
 .ion-primitives-violet-100 {
-  --color: $ion-primitives-violet-100;
+  --color: #{$ion-primitives-violet-100};
   color: $ion-primitives-violet-100;
 }
 .ion-primitives-violet-200 {
-  --color: $ion-primitives-violet-200;
+  --color: #{$ion-primitives-violet-200};
   color: $ion-primitives-violet-200;
 }
 .ion-primitives-violet-300 {
-  --color: $ion-primitives-violet-300;
+  --color: #{$ion-primitives-violet-300};
   color: $ion-primitives-violet-300;
 }
 .ion-primitives-violet-400 {
-  --color: $ion-primitives-violet-400;
+  --color: #{$ion-primitives-violet-400};
   color: $ion-primitives-violet-400;
 }
 .ion-primitives-violet-500 {
-  --color: $ion-primitives-violet-500;
+  --color: #{$ion-primitives-violet-500};
   color: $ion-primitives-violet-500;
 }
 .ion-primitives-violet-600 {
-  --color: $ion-primitives-violet-600;
+  --color: #{$ion-primitives-violet-600};
   color: $ion-primitives-violet-600;
 }
 .ion-primitives-violet-700 {
-  --color: $ion-primitives-violet-700;
+  --color: #{$ion-primitives-violet-700};
   color: $ion-primitives-violet-700;
 }
 .ion-primitives-violet-800 {
-  --color: $ion-primitives-violet-800;
+  --color: #{$ion-primitives-violet-800};
   color: $ion-primitives-violet-800;
 }
 .ion-primitives-violet-900 {
-  --color: $ion-primitives-violet-900;
+  --color: #{$ion-primitives-violet-900};
   color: $ion-primitives-violet-900;
 }
 .ion-primitives-violet-1000 {
-  --color: $ion-primitives-violet-1000;
+  --color: #{$ion-primitives-violet-1000};
   color: $ion-primitives-violet-1000;
 }
 .ion-primitives-violet-1100 {
-  --color: $ion-primitives-violet-1100;
+  --color: #{$ion-primitives-violet-1100};
   color: $ion-primitives-violet-1100;
 }
 .ion-primitives-violet-1200 {
-  --color: $ion-primitives-violet-1200;
+  --color: #{$ion-primitives-violet-1200};
   color: $ion-primitives-violet-1200;
 }
 .ion-primitives-purple-100 {
-  --color: $ion-primitives-purple-100;
+  --color: #{$ion-primitives-purple-100};
   color: $ion-primitives-purple-100;
 }
 .ion-primitives-purple-200 {
-  --color: $ion-primitives-purple-200;
+  --color: #{$ion-primitives-purple-200};
   color: $ion-primitives-purple-200;
 }
 .ion-primitives-purple-300 {
-  --color: $ion-primitives-purple-300;
+  --color: #{$ion-primitives-purple-300};
   color: $ion-primitives-purple-300;
 }
 .ion-primitives-purple-400 {
-  --color: $ion-primitives-purple-400;
+  --color: #{$ion-primitives-purple-400};
   color: $ion-primitives-purple-400;
 }
 .ion-primitives-purple-500 {
-  --color: $ion-primitives-purple-500;
+  --color: #{$ion-primitives-purple-500};
   color: $ion-primitives-purple-500;
 }
 .ion-primitives-purple-600 {
-  --color: $ion-primitives-purple-600;
+  --color: #{$ion-primitives-purple-600};
   color: $ion-primitives-purple-600;
 }
 .ion-primitives-purple-700 {
-  --color: $ion-primitives-purple-700;
+  --color: #{$ion-primitives-purple-700};
   color: $ion-primitives-purple-700;
 }
 .ion-primitives-purple-800 {
-  --color: $ion-primitives-purple-800;
+  --color: #{$ion-primitives-purple-800};
   color: $ion-primitives-purple-800;
 }
 .ion-primitives-purple-900 {
-  --color: $ion-primitives-purple-900;
+  --color: #{$ion-primitives-purple-900};
   color: $ion-primitives-purple-900;
 }
 .ion-primitives-purple-1000 {
-  --color: $ion-primitives-purple-1000;
+  --color: #{$ion-primitives-purple-1000};
   color: $ion-primitives-purple-1000;
 }
 .ion-primitives-purple-1100 {
-  --color: $ion-primitives-purple-1100;
+  --color: #{$ion-primitives-purple-1100};
   color: $ion-primitives-purple-1100;
 }
 .ion-primitives-purple-1200 {
-  --color: $ion-primitives-purple-1200;
+  --color: #{$ion-primitives-purple-1200};
   color: $ion-primitives-purple-1200;
 }
 .ion-primitives-magenta-100 {
-  --color: $ion-primitives-magenta-100;
+  --color: #{$ion-primitives-magenta-100};
   color: $ion-primitives-magenta-100;
 }
 .ion-primitives-magenta-200 {
-  --color: $ion-primitives-magenta-200;
+  --color: #{$ion-primitives-magenta-200};
   color: $ion-primitives-magenta-200;
 }
 .ion-primitives-magenta-300 {
-  --color: $ion-primitives-magenta-300;
+  --color: #{$ion-primitives-magenta-300};
   color: $ion-primitives-magenta-300;
 }
 .ion-primitives-magenta-400 {
-  --color: $ion-primitives-magenta-400;
+  --color: #{$ion-primitives-magenta-400};
   color: $ion-primitives-magenta-400;
 }
 .ion-primitives-magenta-500 {
-  --color: $ion-primitives-magenta-500;
+  --color: #{$ion-primitives-magenta-500};
   color: $ion-primitives-magenta-500;
 }
 .ion-primitives-magenta-600 {
-  --color: $ion-primitives-magenta-600;
+  --color: #{$ion-primitives-magenta-600};
   color: $ion-primitives-magenta-600;
 }
 .ion-primitives-magenta-700 {
-  --color: $ion-primitives-magenta-700;
+  --color: #{$ion-primitives-magenta-700};
   color: $ion-primitives-magenta-700;
 }
 .ion-primitives-magenta-800 {
-  --color: $ion-primitives-magenta-800;
+  --color: #{$ion-primitives-magenta-800};
   color: $ion-primitives-magenta-800;
 }
 .ion-primitives-magenta-900 {
-  --color: $ion-primitives-magenta-900;
+  --color: #{$ion-primitives-magenta-900};
   color: $ion-primitives-magenta-900;
 }
 .ion-primitives-magenta-1000 {
-  --color: $ion-primitives-magenta-1000;
+  --color: #{$ion-primitives-magenta-1000};
   color: $ion-primitives-magenta-1000;
 }
 .ion-primitives-magenta-1100 {
-  --color: $ion-primitives-magenta-1100;
+  --color: #{$ion-primitives-magenta-1100};
   color: $ion-primitives-magenta-1100;
 }
 .ion-primitives-magenta-1200 {
-  --color: $ion-primitives-magenta-1200;
+  --color: #{$ion-primitives-magenta-1200};
   color: $ion-primitives-magenta-1200;
 }
 .ion-primitives-pink-100 {
-  --color: $ion-primitives-pink-100;
+  --color: #{$ion-primitives-pink-100};
   color: $ion-primitives-pink-100;
 }
 .ion-primitives-pink-200 {
-  --color: $ion-primitives-pink-200;
+  --color: #{$ion-primitives-pink-200};
   color: $ion-primitives-pink-200;
 }
 .ion-primitives-pink-300 {
-  --color: $ion-primitives-pink-300;
+  --color: #{$ion-primitives-pink-300};
   color: $ion-primitives-pink-300;
 }
 .ion-primitives-pink-400 {
-  --color: $ion-primitives-pink-400;
+  --color: #{$ion-primitives-pink-400};
   color: $ion-primitives-pink-400;
 }
 .ion-primitives-pink-500 {
-  --color: $ion-primitives-pink-500;
+  --color: #{$ion-primitives-pink-500};
   color: $ion-primitives-pink-500;
 }
 .ion-primitives-pink-600 {
-  --color: $ion-primitives-pink-600;
+  --color: #{$ion-primitives-pink-600};
   color: $ion-primitives-pink-600;
 }
 .ion-primitives-pink-700 {
-  --color: $ion-primitives-pink-700;
+  --color: #{$ion-primitives-pink-700};
   color: $ion-primitives-pink-700;
 }
 .ion-primitives-pink-800 {
-  --color: $ion-primitives-pink-800;
+  --color: #{$ion-primitives-pink-800};
   color: $ion-primitives-pink-800;
 }
 .ion-primitives-pink-900 {
-  --color: $ion-primitives-pink-900;
+  --color: #{$ion-primitives-pink-900};
   color: $ion-primitives-pink-900;
 }
 .ion-primitives-pink-1000 {
-  --color: $ion-primitives-pink-1000;
+  --color: #{$ion-primitives-pink-1000};
   color: $ion-primitives-pink-1000;
 }
 .ion-primitives-pink-1100 {
-  --color: $ion-primitives-pink-1100;
+  --color: #{$ion-primitives-pink-1100};
   color: $ion-primitives-pink-1100;
 }
 .ion-primitives-pink-1200 {
-  --color: $ion-primitives-pink-1200;
+  --color: #{$ion-primitives-pink-1200};
   color: $ion-primitives-pink-1200;
 }
 .ion-shadow-1 {
-  --box-shadow: $ion-shadow-1;
+  --box-shadow: #{$ion-shadow-1};
   box-shadow: $ion-shadow-1;
 }
 .ion-shadow-2 {
-  --box-shadow: $ion-shadow-2;
+  --box-shadow: #{$ion-shadow-2};
   box-shadow: $ion-shadow-2;
 }
 .ion-shadow-3 {
-  --box-shadow: $ion-shadow-3;
+  --box-shadow: #{$ion-shadow-3};
   box-shadow: $ion-shadow-3;
 }
 .ion-shadow-4 {
-  --box-shadow: $ion-shadow-4;
+  --box-shadow: #{$ion-shadow-4};
   box-shadow: $ion-shadow-4;
 }
 .ion-shadow-5 {
-  --box-shadow: $ion-shadow-5;
+  --box-shadow: #{$ion-shadow-5};
   box-shadow: $ion-shadow-5;
 }
 .ion-shadow-6 {
-  --box-shadow: $ion-shadow-6;
+  --box-shadow: #{$ion-shadow-6};
   box-shadow: $ion-shadow-6;
 }
 .ion-shadow-7 {
-  --box-shadow: $ion-shadow-7;
+  --box-shadow: #{$ion-shadow-7};
   box-shadow: $ion-shadow-7;
 }