@ionic/core 8.7.4-dev.11757430138.13649dec → 8.7.4-dev.11758100307.13cc0353

package/dist/collection/components/textarea/textarea.ionic.css

@@ -4,9 +4,7 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/*
-Do not edit directly, this file was auto-generated.
-*/ /**
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -554,8 +552,8 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-fill-outline) {
-  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
-  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
 }
 
 :host(.textarea-fill-outline) .textarea-wrapper {
@@ -593,27 +591,27 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-fill-outline) textarea {
-  margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  margin-top: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 :host(.textarea-fill-outline.has-focus) {
-  --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
 :host {
-  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
-  --color: var(--ion-primitives-neutral-1200, #242424);
-  --highlight-color-valid: var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23));
-  --highlight-color-invalid: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
-  --highlight-color-focused: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
-  --placeholder-color: var(--ion-primitives-neutral-800, #626262);
+  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --color: var(--token-primitives-neutral-1200, #242424);
+  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));
+  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  --highlight-color-focused: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  --placeholder-color: var(--token-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
-  --background: var(--ion-primitives-base-white, #ffffff);
-  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-regular, 400);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  --background: var(--token-primitives-base-white, #ffffff);
+  --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
 }
@@ -627,43 +625,43 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.textarea-size-small) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
-  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
-  min-height: var(--ion-scale-2800, 112px);
+  --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
+  min-height: var(--token-scale-2800, 112px);
 }
 
 :host(.textarea-size-medium) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
-  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
-  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  min-height: var(--ion-scale-3400, 136px);
+  --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  min-height: var(--token-scale-3400, 136px);
 }
 
 :host(.textarea-size-large) .textarea-wrapper-inner {
-  --padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
-  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
-  --padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
-  --padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
-  min-height: var(--ion-scale-3600, 144px);
+  --padding-top: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
+  --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-start: var(--token-space-500, var(--token-scale-500, 20px));
+  min-height: var(--token-scale-3600, 144px);
 }
 
 :host(.textarea-shape-soft) {
-  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
+  --border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
 }
 
 :host(.textarea-shape-round) {
-  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 
 :host(.textarea-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
+  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
 }
 
 .textarea-wrapper {
-  gap: var(--ion-space-100, var(--ion-scale-100, 4px));
+  gap: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 .textarea-wrapper-inner {
@@ -685,15 +683,15 @@ Do not edit directly, this file was auto-generated.
 }
 
 .label-text-wrapper {
-  font-size: var(--ion-font-size-300, 0.75rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
+  font-size: var(--token-font-size-300, 0.75rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
-  max-width: var(--ion-scale-5000, 200px);
-  transition: color var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--ion-primitives-neutral-1000, #3b3b3b);
+  max-width: var(--token-scale-5000, 200px);
+  transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  color: var(--token-primitives-neutral-1000, #3b3b3b);
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -701,13 +699,13 @@ Do not edit directly, this file was auto-generated.
 }
 
 ion-icon {
-  color: var(--ion-primitives-neutral-800, #626262);
-  font-size: var(--ion-scale-400, 16px);
+  color: var(--token-primitives-neutral-800, #626262);
+  font-size: var(--token-scale-400, 16px);
 }
 
 .start-slot-wrapper,
 .end-slot-wrapper {
-  margin-top: var(--ion-space-050, var(--ion-scale-050, 2px));
+  margin-top: var(--token-space-050, var(--token-scale-050, 2px));
 }
 
 .textarea-bottom {
@@ -715,18 +713,18 @@ ion-icon {
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
-  font-size: var(--ion-font-size-300, 0.75rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  font-size: var(--token-font-size-300, 0.75rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
 }
 
 .textarea-bottom .helper-text,
 .textarea-bottom .counter {
-  color: var(--ion-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #626262);
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -735,16 +733,16 @@ ion-icon {
 
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
-  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
 }
 
 .textarea-highlight {
   bottom: -1px;
   position: absolute;
   width: 100%;
-  height: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  height: var(--token-border-size-050, var(--token-scale-050, 2px));
   transform: scale(0);
-  transition: transform var(--ion-transition-time-200, 200ms);
+  transition: transform var(--token-transition-time-200, 200ms);
   background: var(--border-color);
 }
 .textarea-highlight {
@@ -752,7 +750,7 @@ ion-icon {
 }
 
 :host(.has-focus) {
-  --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
 }
 
 :host(.has-focus) .textarea-highlight {
@@ -761,28 +759,28 @@ ion-icon {
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--ion-primitives-neutral-600, #8c8c8c);
+    --border-color: var(--token-primitives-neutral-600, #8c8c8c);
   }
 }
 :host(.textarea-disabled) {
-  --color: var(--ion-primitives-neutral-500, #a2a2a2);
-  --background: var(--ion-primitives-neutral-100, #f5f5f5);
-  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
-  --placeholder-color: var(--ion-primitives-neutral-500, #a2a2a2);
+  --color: var(--token-primitives-neutral-500, #a2a2a2);
+  --background: var(--token-primitives-neutral-100, #f5f5f5);
+  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  --placeholder-color: var(--token-primitives-neutral-500, #a2a2a2);
 }
 
 :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
 :host(.textarea-disabled) .textarea-bottom .counter,
 :host(.textarea-disabled) .label-text-wrapper {
-  color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.textarea-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--ion-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
 }
 
 :host(.textarea-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--ion-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
 }
 
 :host(.textarea-disabled.ion-color) {
@@ -795,7 +793,7 @@ ion-icon {
 }
 
 :host(.textarea-readonly) {
-  --background: var(--ion-primitives-neutral-100, #f5f5f5);
+  --background: var(--token-primitives-neutral-100, #f5f5f5);
 }
 
 /**
@@ -815,7 +813,7 @@ ion-icon {
    * textarea, we need to fade the textarea out so that the
    * label does not overlap with the placeholder.
    */
-  transition: opacity var(--ion-transition-time-150, 150ms) var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 /**
@@ -823,8 +821,8 @@ ion-icon {
  * on the right in RTL. Label also has a fixed width.
  */
 :host(.textarea-label-placement-fixed) .label-text {
-  flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
-  width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
-  min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
-  max-width: var(--ion-scale-5000, 200px);
+  flex: 0 0 calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  min-width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
+  max-width: var(--token-scale-5000, 200px);
 }

package/dist/collection/components/title/title.ionic.css

@@ -4,9 +4,7 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/*
-Do not edit directly, this file was auto-generated.
-*/ /**
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -109,10 +107,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
-  font-size: var(--ion-font-size-450, 1.125rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
   box-sizing: border-box;
@@ -120,10 +118,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.title-large) {
-  font-size: var(--ion-font-size-700, 1.75rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-900, var(--ion-scale-900, 36px));
+  font-size: var(--token-font-size-700, 1.75rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-900, var(--token-scale-900, 36px));
   text-decoration: none;
   text-transform: none;
 }

package/dist/collection/components/toast/toast.ionic.css

@@ -4,9 +4,7 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/*
-Do not edit directly, this file was auto-generated.
-*/ /**
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -237,14 +235,14 @@ Do not edit directly, this file was auto-generated.
   }
 }
 :host {
-  --box-shadow: var(--ion-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+  --box-shadow: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
   --max-width: 343px;
-  --start: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --end: var(--ion-space-200, var(--ion-scale-200, 8px));
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  --start: var(--token-space-200, var(--token-scale-200, 8px));
+  --end: var(--token-space-200, var(--token-scale-200, 8px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   z-index: 1001;
@@ -283,62 +281,62 @@ Do not edit directly, this file was auto-generated.
 }
 
 .toast-container {
-  -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
-  padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
+  -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
 }
 
 :host(.toast-shape-soft) {
-  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
+  --border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
 }
 
 :host(.toast-shape-round) {
-  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 
 :host(.toast-shape-rectangular) {
-  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
+  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
 }
 
 .toast-header {
-  font-size: var(--ion-font-size-450, 1.125rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
   text-decoration: none;
   text-transform: none;
 }
 
 .toast-layout-baseline .toast-button-group-start {
-  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .toast-layout-stacked .toast-button-group-start {
-  margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .toast-layout-baseline .toast-button-group-end {
-  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .toast-layout-stacked .toast-button-group-end {
-  margin-top: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-top: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .toast-button-group {
-  gap: var(--ion-space-400, var(--ion-scale-400, 16px));
+  gap: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .toast-button {
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-regular, 400);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   padding-left: 0;
@@ -354,20 +352,20 @@ Do not edit directly, this file was auto-generated.
 .toast-icon {
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ion-space-200, var(--ion-scale-200, 8px));
-  margin-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  -webkit-margin-end: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 .toast-icon,
 .toast-button-icon {
-  font-size: var(--ion-scale-600, 24px);
+  font-size: var(--token-scale-600, 24px);
 }
 
 :host(.toast-hue-bold) {
-  --background: var(--ion-bg-neutral-boldest-default, var(--ion-primitives-neutral-1200, #242424));
-  --background-activated: var(--ion-bg-neutral-boldest-press, var(--ion-primitives-base-black, #111111));
-  --color: var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff));
-  --button-color: var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff));
+  --background: var(--token-bg-neutral-boldest-default, var(--token-primitives-neutral-1200, #242424));
+  --background-activated: var(--token-bg-neutral-boldest-press, var(--token-primitives-base-black, #111111));
+  --color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
+  --button-color: var(--token-text-inverse, var(--token-primitives-base-white, #ffffff));
 }
 
 :host(.toast-hue-bold.ion-color) .toast-wrapper {
@@ -380,14 +378,14 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.toast-hue-subtle) {
-  --background: var(--ion-bg-neutral-subtlest-default, var(--ion-primitives-base-white, #ffffff));
-  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
-  --color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
-  --button-color: var(--ion-text-link-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef))));
+  --background: var(--token-bg-neutral-subtlest-default, var(--token-primitives-base-white, #ffffff));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --button-color: var(--token-text-link-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
 }
 
 :host(.toast-hue-subtle) .toast-button-cancel {
-  color: var(--ion-icon-subtlest, var(--ion-primitives-neutral-800, #626262));
+  color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));
 }
 
 :host(.toast-hue-subtle.ion-color) .toast-wrapper {

package/dist/collection/components/toggle/toggle.ionic.css

@@ -4,9 +4,7 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
-/*
-Do not edit directly, this file was auto-generated.
-*/ /**
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -368,24 +366,24 @@ input {
 }
 
 :host {
-  --track-background: var(--ion-primitives-neutral-500, #a2a2a2);
-  --track-background-checked: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
-  --border-radius: var(--ion-border-radius-full, 999px);
-  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
-  --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
-  --handle-background: var(--ion-primitives-base-white, #ffffff);
-  --handle-background-checked: var(--ion-primitives-base-white, #ffffff);
-  --handle-border-radius: var(--ion-border-radius-full, 999px);
-  --handle-height: var(--ion-scale-500, 20px);
-  --handle-max-height: var(--ion-scale-500, 20px);
-  --handle-width: var(--ion-scale-500, 20px);
-  --handle-spacing: var(--ion-space-050, var(--ion-scale-050, 2px));
+  --track-background: var(--token-primitives-neutral-500, #a2a2a2);
+  --track-background-checked: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  --border-radius: var(--token-border-radius-full, 999px);
+  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
+  --handle-background: var(--token-primitives-base-white, #ffffff);
+  --handle-background-checked: var(--token-primitives-base-white, #ffffff);
+  --handle-border-radius: var(--token-border-radius-full, 999px);
+  --handle-height: var(--token-scale-500, 20px);
+  --handle-max-height: var(--token-scale-500, 20px);
+  --handle-width: var(--token-scale-500, 20px);
+  --handle-spacing: var(--token-space-050, var(--token-scale-050, 2px));
   --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,
     right 110ms ease-in-out 80ms;
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-regular, 400);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
   width: 100%;
@@ -394,12 +392,12 @@ input {
 
 .toggle-wrapper {
   align-items: center;
-  min-height: var(--ion-scale-1200, 48px);
+  min-height: var(--token-scale-1200, 48px);
 }
 
 .native-wrapper .toggle-icon {
-  width: var(--ion-scale-1100, 44px);
-  height: var(--ion-scale-600, 24px);
+  width: var(--token-scale-1100, 44px);
+  height: var(--token-scale-600, 24px);
   /**
    * The handle box shadow should not
    * overflow outside of the track container.
@@ -412,24 +410,24 @@ input {
 }
 
 .toggle-bottom {
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-regular, 400);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
   text-decoration: none;
   text-transform: none;
 }
 
 .toggle-bottom .error-text {
-  color: var(--ion-semantics-danger-900, var(--ion-primitives-red-900, #991b1b));
+  color: var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b));
 }
 
 .toggle-bottom .helper-text {
-  color: var(--ion-primitives-neutral-900, #4e4e4e);
+  color: var(--token-primitives-neutral-900, #4e4e4e);
 }
 
 :host(.ion-focused) .toggle-icon {
-  outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
   outline-offset: var(--focus-ring-width);
 }
 
@@ -438,11 +436,11 @@ input {
 }
 
 :host(.ion-activated) .toggle-icon {
-  background: var(--ion-bg-neutral-base-press, var(--ion-primitives-neutral-700, #777777));
+  background: var(--token-bg-neutral-base-press, var(--token-primitives-neutral-700, #777777));
 }
 
 :host(.ion-activated.toggle-checked) .toggle-icon {
-  background: var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3)));
+  background: var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
 }
 
 :host(.toggle-disabled) .toggle-icon::after {
@@ -451,7 +449,7 @@ input {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
+  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
   pointer-events: none;
 }
@@ -461,12 +459,12 @@ input {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--ion-primitives-neutral-1200, #242424);
+  color: var(--token-primitives-neutral-1200, #242424);
 }
 
 .toggle-inner .toggle-switch-icon {
-  width: var(--ion-scale-400, 16px);
-  height: var(--ion-scale-400, 16px);
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
 }
 
 /**
@@ -485,9 +483,9 @@ input {
   */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  color: var(--ion-primitives-neutral-1200, #242424);
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  color: var(--token-primitives-neutral-1200, #242424);
 }
 
 /**
@@ -504,8 +502,8 @@ input {
 * when the label sits at the end.
 */
 :host(.toggle-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }