@ionic/core 8.7.4-dev.11757083062.19f546ed → 8.7.4-dev.11757091109.1d47c1bd

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

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -518,13 +520,13 @@
 }
 
 :host(.input-fill-outline) {
-  --background: var(--token-primitives-base-white, #ffffff);
-  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --background: var(--ion-primitives-base-white, #ffffff);
+  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
 }
 
 :host(.input-fill-solid) {
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #efefef));
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #efefef));
+  --background: var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef));
+  --border-color: var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef));
 }
 
 /**
@@ -542,17 +544,17 @@
  */
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
   }
 }
 :host(.input-fill-solid.input-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --background: var(--ion-bg-input-bold-disabled, var(--ion-primitives-neutral-300, #e0e0e0));
+  --placeholder-color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-fill-solid.input-readonly) {
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0));
+  --border-color: var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0));
 }
 
 /**
@@ -560,20 +562,20 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
 }
 
 :host {
-  --color: var(--token-primitives-neutral-1200, #242424);
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));
-  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
-  --placeholder-color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--ion-primitives-neutral-1200, #242424);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  --highlight-color-valid: var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23));
+  --highlight-color-invalid: var(--ion-border-danger-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222)));
+  --placeholder-color: var(--ion-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
-  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));
+  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));
   text-decoration: none;
   text-transform: none;
 }
@@ -596,8 +598,8 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
-  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
 }
 
 .input-wrapper {
@@ -667,7 +669,7 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  min-height: var(--token-scale-1000, 40px);
+  min-height: var(--ion-scale-1000, 40px);
   /**
   * Apply the background to the native input
   * wrapper to only style the input.
@@ -676,54 +678,54 @@
 }
 
 :host(.input-size-medium) {
-  --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
-  --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
+  --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host(.input-size-large) {
-  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
-  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 :host(.input-size-xlarge) {
-  --padding-start: var(--token-space-500, var(--token-scale-500, 20px));
-  --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
+  --padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
+  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
 }
 
 :host(.input-size-medium) .native-wrapper {
-  min-height: var(--token-scale-1000, 40px);
+  min-height: var(--ion-scale-1000, 40px);
 }
 
 :host(.input-size-large) .native-wrapper {
-  min-height: var(--token-scale-1200, 48px);
+  min-height: var(--ion-scale-1200, 48px);
 }
 
 :host(.input-size-xlarge) .native-wrapper {
-  min-height: var(--token-scale-1400, 56px);
+  min-height: var(--ion-scale-1400, 56px);
 }
 
 :host(.input-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--ion-soft-xl, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
 }
 
 :host(.input-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--ion-round-xl, var(--ion-border-radius-400, var(--ion-scale-400, 16px)));
 }
 
 :host(.input-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--ion-rectangular-xl, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
 }
 
 :host(.input-size-medium) ion-input-password-toggle {
-  --size: var(--token-scale-1000, 40px);
+  --size: var(--ion-scale-1000, 40px);
 }
 
 :host(.input-size-large) ion-input-password-toggle {
-  --size: var(--token-scale-1200, 48px);
+  --size: var(--ion-scale-1200, 48px);
 }
 
 :host(.input-size-xlarge) ion-input-password-toggle {
-  --size: var(--token-scale-1400, 56px);
+  --size: var(--ion-scale-1400, 56px);
 }
 
 .native-wrapper::after {
@@ -732,7 +734,7 @@
   top: 50%;
   position: absolute;
   height: 100%;
-  min-height: var(--token-scale-1200, 48px);
+  min-height: var(--ion-scale-1200, 48px);
   transform: translateY(-50%);
   content: "";
   cursor: text;
@@ -751,22 +753,22 @@
 }
 
 ::slotted([slot=start]) {
-  margin-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 ::slotted([slot=end]) {
-  margin-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 .input-clear-icon {
-  width: var(--token-scale-400, 16px);
-  height: var(--token-scale-400, 16px);
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
+  color: var(--ion-primitives-neutral-1000, #3b3b3b);
 }
 
 .input-clear-icon:focus-visible {
-  border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
+  outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
   opacity: 1;
 }
 
@@ -791,13 +793,13 @@
 }
 
 .label-text-wrapper {
-  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));
+  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));
   text-decoration: none;
   text-transform: none;
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--ion-primitives-neutral-1000, #3b3b3b);
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -807,19 +809,19 @@
 .input-bottom {
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
   padding-bottom: 0;
-  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));
+  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));
   text-decoration: none;
   text-transform: none;
 }
 
 .input-bottom .helper-text,
 .input-bottom .counter {
-  color: var(--token-primitives-neutral-800, #626262);
+  color: var(--ion-primitives-neutral-800, #626262);
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -828,34 +830,34 @@
 
 :host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
 }
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-primitives-neutral-600, #8c8c8c);
+    --border-color: var(--ion-primitives-neutral-600, #8c8c8c);
   }
 }
 :host(.input-disabled) {
-  --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);
+  --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);
   pointer-events: none;
 }
 
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--ion-semantics-success-base-rgb, 27, 164, 51), 0.6);
 }
 
 :host(.input-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--ion-semantics-danger-base-rgb, 229, 41, 41), 0.6);
 }
 
 :host(.input-disabled.ion-color) {
@@ -868,12 +870,12 @@
 }
 
 :host(.input-readonly) {
-  --background: var(--token-primitives-neutral-100, #f5f5f5);
+  --background: var(--ion-primitives-neutral-100, #f5f5f5);
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
+  --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
 }
 
 :host(.has-focus) .input-highlight {

package/dist/collection/components/input-otp/input-otp.ionic.css

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -240,105 +242,105 @@
 }
 
 :host {
-  --padding-top: var(--token-space-400, var(--token-scale-400, 16px));
-  --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
-  --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
-  --padding-start: var(--token-space-0, var(--token-scale-0, 0px));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
-  --min-width: var(--token-scale-1000, 40px);
-  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-500, #a2a2a2));
-  --separator-width: var(--token-scale-200, 8px);
-  --separator-border-radius: var(--token-border-radius-full, 999px);
-  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-400, #d5d5d5));
-  --highlight-color-focused: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --highlight-color-valid: var(--token-border-success, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23)));
-  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
-  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));
+  --padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-end: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-start: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  --min-width: var(--ion-scale-1000, 40px);
+  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
+  --border-style: var(--ion-border-style-solid, solid);
+  --border-color: var(--ion-border-input-default, var(--ion-primitives-neutral-500, #a2a2a2));
+  --separator-width: var(--ion-scale-200, 8px);
+  --separator-border-radius: var(--ion-border-radius-full, 999px);
+  --separator-color: var(--ion-bg-neutral-subtle-press, var(--ion-primitives-neutral-400, #d5d5d5));
+  --highlight-color-focused: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
+  --highlight-color-valid: var(--ion-border-success, var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23)));
+  --highlight-color-invalid: var(--ion-border-danger-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222)));
+  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));
   text-decoration: none;
   text-transform: none;
 }
 
 :host(.has-focus) .native-input:focus {
-  --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
+  --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
 }
 
 .input-otp-description {
-  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));
+  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));
   text-decoration: none;
   text-transform: none;
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
 }
 
 :host(.input-otp-size-small) {
-  --width: var(--token-scale-1000, 40px);
-  --height: var(--token-scale-1000, 40px);
+  --width: var(--ion-scale-1000, 40px);
+  --height: var(--ion-scale-1000, 40px);
 }
 
 :host(.input-otp-size-small) .input-otp-group {
-  gap: var(--token-space-200, var(--token-scale-200, 8px));
+  gap: var(--ion-space-200, var(--ion-scale-200, 8px));
 }
 
 :host(.input-otp-size-medium) {
-  --width: var(--token-scale-1200, 48px);
-  --height: var(--token-scale-1200, 48px);
+  --width: var(--ion-scale-1200, 48px);
+  --height: var(--ion-scale-1200, 48px);
 }
 
 :host(.input-otp-size-large) {
-  --width: var(--token-scale-1400, 56px);
-  --height: var(--token-scale-1400, 56px);
+  --width: var(--ion-scale-1400, 56px);
+  --height: var(--ion-scale-1400, 56px);
 }
 
 :host(.input-otp-size-medium) .input-otp-group,
 :host(.input-otp-size-large) .input-otp-group {
-  gap: var(--token-space-300, var(--token-scale-300, 12px));
+  gap: var(--ion-space-300, var(--ion-scale-300, 12px));
 }
 
 :host(.input-otp-shape-round) {
-  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
 }
 
 :host(.input-otp-shape-soft) {
-  --border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
+  --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
 }
 
 :host(.input-otp-shape-rectangular) {
-  --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #efefef));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #efefef));
+  --border-color: var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef));
+  --background: var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef));
 }
 
 :host(.input-otp-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f5f5f5));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--ion-bg-input-disabled, var(--ion-primitives-neutral-100, #f5f5f5));
+  --border-color: var(--ion-border-disabled, var(--ion-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f5f5f5));
+  --background: var(--ion-bg-input-read-only, var(--ion-primitives-neutral-100, #f5f5f5));
 }
 
 :host(.input-otp-fill-solid.input-otp-disabled) {
-  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --border-color: var(--ion-bg-input-bold-disabled, var(--ion-primitives-neutral-300, #e0e0e0));
+  --background: var(--ion-bg-input-bold-disabled, var(--ion-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.input-otp-fill-solid.input-otp-readonly) {
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --border-color: var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0));
+  --background: var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0));
 }
 
 :host(.ion-color) {
@@ -354,14 +356,14 @@
 :host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
-  border-color: var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222))));
+  border-color: var(--ion-color-danger, var(--ion-bg-danger-base-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222))));
 }
 
 :host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
-  border-color: var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23))));
+  border-color: var(--ion-color-success, var(--ion-bg-success-base-default, var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23))));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {

package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -60,10 +62,10 @@
  * convert to a unit other than $baselineUnit.
  */
 :host ion-button {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--ion-primitives-neutral-800, #626262);
   --margin-end: calc(-1 * var(--padding-end));
   --padding-end: inherit;
-  --icon-size: var(--token-font-size-400, 1rem);
+  --icon-size: var(--ion-font-size-400, 1rem);
   -webkit-margin-start: 0;
   margin-inline-start: 0;
   -webkit-margin-end: var(--margin-end);

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

@@ -4,7 +4,9 @@
  * @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.
  *
@@ -408,24 +410,24 @@ ion-ripple-effect {
 }
 
 :host {
-  --background: var(--token-primitives-base-white, #ffffff);
-  --background-activated: var(--token-primitives-neutral-200, #efefef);
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --border-style: var(--token-border-style-solid, solid);
-  --border-width: 0 0 var(--token-border-size-025, var(--token-scale-025, 1px)) 0;
-  --color: var(--token-primitives-neutral-1200, #242424);
-  --detail-icon-color: var(--token-primitives-neutral-800, #626262);
-  --detail-icon-font-size: var(--token-scale-600, 24px);
+  --background: var(--ion-primitives-base-white, #ffffff);
+  --background-activated: var(--ion-primitives-neutral-200, #efefef);
+  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
+  --border-style: var(--ion-border-style-solid, solid);
+  --border-width: 0 0 var(--ion-border-size-025, var(--ion-scale-025, 1px)) 0;
+  --color: var(--ion-primitives-neutral-1200, #242424);
+  --detail-icon-color: var(--ion-primitives-neutral-800, #626262);
+  --detail-icon-font-size: var(--ion-scale-600, 24px);
   --detail-icon-opacity: 1;
-  --min-height: var(--token-scale-1800, 72px);
-  --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
-  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
-  --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
-  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
-  font-size: var(--token-font-size-400, 1rem);
-  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));
+  --min-height: var(--ion-scale-1800, 72px);
+  --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  font-size: var(--ion-font-size-400, 1rem);
+  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));
   text-decoration: none;
   text-transform: none;
 }
@@ -439,18 +441,18 @@ ion-ripple-effect {
 }
 
 slot[name=start]::slotted(*) {
-  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
-  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 slot[name=end]::slotted(*) {
-  -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-start: var(--ion-space-400, var(--ion-scale-400, 16px));
+  margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
 }
 
 ::slotted(ion-icon:not(.item-detail-icon)) {
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
-  font-size: var(--token-scale-1000, 40px);
+  color: var(--ion-primitives-neutral-1000, #3b3b3b);
+  font-size: var(--ion-scale-1000, 40px);
 }
 
 :host(.item-disabled) .item-native::after {
@@ -459,7 +461,7 @@ slot[name=end]::slotted(*) {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
   pointer-events: none;
 }
@@ -475,26 +477,26 @@ slot[name=end]::slotted(*) {
   top: 0;
   bottom: 0;
   position: absolute;
-  border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
-  border-style: var(--token-border-style-solid, solid);
-  border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  border-style: var(--ion-border-style-solid, solid);
+  border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
   content: "";
 }
 
 :host(.item-lines-full) {
-  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-size-0, var(--ion-scale-0, 0px));
 }
 
 :host(.item-lines-inset) {
-  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px));
+  --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-size-0, var(--ion-scale-0, 0px));
 }
 
 :host(.item-lines-inset),
 :host(.item-lines-none) {
-  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
 }
 
 :host(.item-lines-full),
 :host(.item-lines-none) {
-  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
 }