@ionic/core 8.8.20-dev.11790000033.12788d65 → 8.8.20-dev.11790063553.1c664fbb

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

@@ -450,7 +450,7 @@
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --focus-ring-width: var(--token-border-radius-025, var(--token-scale-050, 2px));
   /**
    * TODO(FW-6931): Remove these variables upon solving the root cause
@@ -491,27 +491,25 @@
   justify-content: space-between;
   height: var(--token-scale-1400, 56px);
   margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
-  border-bottom: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
+  border-bottom: solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);
 }
 
 :host .datetime-header .datetime-title {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
-  color: var(--token-primitives-neutral-800, #626262);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 :host .datetime-header .datetime-selected-date {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 .calendar-action-buttons {
@@ -528,12 +526,11 @@
 
 .calendar-month-year-toggle {
   border-radius: var(--token-border-radius-full, 999px);
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-1, 1%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   -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));
@@ -542,13 +539,13 @@
   padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   min-width: var(--token-scale-1600, 64px);
   min-height: var(--token-scale-1000, 40px);
-  border: var(--focus-ring-width) var(--token-border-style-solid, solid) transparent;
+  border: var(--focus-ring-width) solid transparent;
   color: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
 }
 
 @media (any-hover: hover) {
   .calendar-month-year-toggle:hover {
-    background: var(--token-primitives-neutral-200, #eae9e9);
+    background: var(--token-primitives-neutral-200, #ebeef2);
   }
 }
 .calendar-month-year-toggle.ion-focused {
@@ -556,32 +553,32 @@
 }
 
 .calendar-month-year-toggle.ion-activated {
-  background: var(--token-primitives-neutral-200, #eae9e9);
+  background: var(--token-primitives-neutral-200, #ebeef2);
 }
 
 .calendar-next-prev ion-button.button-has-icon-only {
-  --color: var(--token-primitives-neutral-1000, #3b3b3b);
-  --background-activated: var(--token-primitives-neutral-200, #eae9e9);
-  --background-hover: var(--token-primitives-neutral-200, #eae9e9);
+  --color: var(--token-primitives-neutral-1000, #383e45);
+  --background-activated: var(--token-primitives-neutral-200, #ebeef2);
+  --background-hover: var(--token-primitives-neutral-200, #ebeef2);
   --background-hover-opacity: 1;
   min-height: var(--token-scale-1000, 40px);
 }
 
 .calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native) {
-  border: 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: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   outline: none;
 }
 
 .calendar-days-of-week {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-2, 1.5%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
+  letter-spacing: var(--token-font-letter-spacing-150, 0.015em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   text-transform: uppercase;
   align-content: center;
   height: var(--token-scale-1200, 48px);
-  color: var(--token-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 .calendar-day {
@@ -592,20 +589,19 @@
   padding-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
   padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-1, 1%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   width: var(--token-scale-1200, 48px);
   min-width: var(--token-scale-1200, 48px);
   height: var(--token-scale-1200, 48px);
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 .calendar-day[disabled]:not(.calendar-day-constrained) {
-  color: var(--token-primitives-neutral-500, #a2a2a2);
+  color: var(--token-primitives-neutral-500, #9fa5ad);
 }
 
 .calendar-day.calendar-day-today {
@@ -614,11 +610,11 @@
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active.calendar-day-adjacent-day {
-  background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc));
+  background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff));
 }
 
 .calendar-day:focus-visible {
-  border: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  border: var(--focus-ring-width) solid var(--focus-ring-color);
 }
 
 @media (any-hover: hover) {
@@ -632,11 +628,11 @@
 }
 
 .calendar-day.calendar-day-adjacent-day {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 .calendar-day.calendar-day-active.calendar-day-adjacent-day {
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host .datetime-time {
@@ -649,13 +645,12 @@
 }
 
 :host .datetime-time .time-header {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-1, 1%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
-  color: var(--token-primitives-neutral-800, #626262);
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-600, 1.5rem);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 :host .datetime-time button {
@@ -665,18 +660,17 @@
   padding-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
   padding-top: var(--token-space-0, var(--token-scale-0, 0px));
   padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   border-radius: var(--token-border-radius-full, 999px);
   display: flex;
   align-items: center;
   height: var(--token-scale-800, 32px);
-  background-color: var(--token-primitives-neutral-100, #f3f3f3);
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  background-color: var(--token-primitives-neutral-100, #f6f7fa);
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host .datetime-footer {
@@ -690,7 +684,7 @@
   margin-bottom: 0;
   border-left: 0;
   border-right: 0;
-  border-top: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
+  border-top: solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);
   border-bottom: 0;
 }
 

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

@@ -109,7 +109,7 @@
 }
 
 :host hr {
-  border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) solid var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 :host(.divider-inset) {

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

@@ -227,7 +227,7 @@ ion-header {
   z-index: 10;
 }
 ion-header.header-divider {
-  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) solid var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 ion-toolbar + ion-toolbar {
@@ -242,14 +242,9 @@ ion-toolbar + ion-toolbar {
     top: 0;
     bottom: 0;
     position: absolute;
-    backdrop-filter: blur(var(--token-scale-1600, 64px));
-    mask-image: linear-gradient(to bottom, #000 32.5%, transparent 91%);
+    backdrop-filter: saturate(180%) blur(var(--token-scale-100, 4px));
   }
   .header-translucent-ionic ion-toolbar {
-    --background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0.1)
-    );
+    --opacity: 0.7;
   }
 }

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

@@ -523,12 +523,12 @@
 
 :host(.input-fill-outline) {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --border-color: var(--token-primitives-neutral-500, #9fa5ad);
 }
 
 :host(.input-fill-solid) {
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 /**
@@ -546,17 +546,17 @@
  */
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-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(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :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(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 /**
@@ -564,22 +564,21 @@
  * 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(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
 }
 
 :host {
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --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);
+  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #037046));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
+  --placeholder-color: var(--token-primitives-neutral-800, #6c727a);
   --placeholder-opacity: 1;
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 .input-outline {
@@ -707,15 +706,15 @@
 }
 
 :host(.input-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xl, 12px);
 }
 
 :host(.input-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.input-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host(.input-size-medium) ion-input-password-toggle {
@@ -765,12 +764,12 @@
 .input-clear-icon {
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 .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));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   opacity: 1;
 }
 
@@ -797,13 +796,12 @@
 }
 
 .label-text-wrapper {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -815,21 +813,20 @@
   padding-right: 0;
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
   padding-bottom: 0;
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .input-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
 }
 
 .input-bottom .helper-text,
 .input-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -843,29 +840,29 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-primitives-neutral-600, #8c8c8c);
+    --border-color: var(--token-primitives-neutral-600, #7e858e);
   }
 }
 :host(.input-disabled) {
-  --color: var(--token-primitives-neutral-500, #a2a2a2);
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --placeholder-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --color: var(--token-primitives-neutral-500, #9fa5ad);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
+  --placeholder-color: var(--token-primitives-neutral-500, #9fa5ad);
   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(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :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(--token-semantics-success-base-rgb, 74, 174, 131), 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(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.input-disabled.ion-color) {
@@ -878,11 +875,11 @@
 }
 
 :host(.input-readonly) {
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 

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

@@ -242,23 +242,22 @@
   --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));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --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-600, #8c8c8c));
+  --border-style: solid;
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --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)));
+  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-300, #e6eaee));
+  --highlight-color-focused: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  --highlight-color-valid: var(--token-border-success, var(--token-semantics-success-500, var(--token-primitives-green-500, #94d9bb)));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 :host(.has-focus) .native-input:focus {
@@ -266,13 +265,12 @@
 }
 
 .input-otp-description {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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;
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.input-otp-size-small) {
@@ -300,15 +298,15 @@
 }
 
 :host(.input-otp-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.input-otp-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xl, 12px);
 }
 
 :host(.input-otp-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host(.input-otp-fill-outline) {
@@ -316,31 +314,31 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.input-otp-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
 }
 
 :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(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :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(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.ion-color) {
@@ -356,14 +354,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(--token-bg-danger-base-default, var(--token-semantics-danger-700, var(--token-primitives-red-700, #e0243a))));
 }
 
 :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(--token-bg-success-base-default, var(--token-semantics-success-800, var(--token-primitives-green-800, #038855))));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {

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

@@ -60,7 +60,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host ion-button {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--token-primitives-neutral-800, #6c727a);
   --margin-end: calc(-1 * var(--padding-end));
   --padding-end: inherit;
   --icon-size: var(--token-font-size-400, 1rem);

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

@@ -409,12 +409,12 @@ ion-ripple-effect {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-activated-opacity: 1;
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --border-style: var(--token-border-style-solid, solid);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
+  --border-style: solid;
   --border-width: 0 0 var(--token-border-size-025, var(--token-scale-025, 1px)) 0;
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --detail-icon-font-size: var(--token-scale-600, 24px);
   --detail-icon-opacity: 1;
   --min-height: var(--token-scale-1800, 72px);
@@ -422,12 +422,11 @@ ion-ripple-effect {
   --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-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   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));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 .item-inner {
@@ -449,7 +448,7 @@ slot[name=end]::slotted(*) {
 }
 
 ::slotted(ion-icon:not(.item-detail-icon)) {
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--token-primitives-neutral-1000, #383e45);
   font-size: var(--token-scale-1000, 40px);
 }
 
@@ -471,7 +470,7 @@ slot[name=end]::slotted(*) {
   top: 0;
   bottom: 0;
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  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));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   position: absolute;
   outline-offset: calc(var(--token-border-size-050, var(--token-scale-050, 2px)) * -1);
   content: "";