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

package/dist/collection/components/select/select.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.
  *
@@ -514,7 +512,7 @@ button {
 }
 
 :host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
-  --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
 /**
@@ -527,44 +525,44 @@ button {
 }
 
 :host {
-  --background: var(--ion-primitives-base-white, #ffffff);
-  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
-  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
-  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
-  --padding-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));
-  --placeholder-color: var(--ion-primitives-neutral-800, #626262);
+  --background: var(--token-primitives-base-white, #ffffff);
+  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-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));
+  --placeholder-color: var(--token-primitives-neutral-800, #626262);
   --placeholder-opacity: 1;
-  --highlight-color-focused: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
-  --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));
-  min-height: var(--ion-scale-1100, 44px);
+  --highlight-color-focused: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --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));
+  min-height: var(--token-scale-1100, 44px);
 }
 
 .select-bottom {
-  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;
 }
 
 .select-bottom .helper-text {
-  color: var(--ion-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #626262);
 }
 
 .select-text {
-  min-width: var(--ion-space-400, var(--ion-scale-400, 16px));
+  min-width: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
 .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;
   /**
@@ -575,9 +573,9 @@ button {
    * only the label would show and users
    * would not be able to see what they are typing.
    */
-  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(.select-label-placement-start) .label-text-wrapper,
@@ -589,17 +587,17 @@ button {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: var(--ion-space-100, var(--ion-scale-100, 4px));
-  margin-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
+  -webkit-margin-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
   margin-top: 0;
   margin-bottom: 0;
 }
 
 :host(.select-label-placement-fixed) .label-text-wrapper {
-  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);
 }
 
 :host(.select-label-placement-end) .label-text-wrapper {
@@ -608,8 +606,8 @@ button {
    * the select should be on the start
    * when the label sits at the end.
    */
-  -webkit-margin-start: var(--ion-space-100, var(--ion-scale-100, 4px));
-  margin-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
+  -webkit-margin-start: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
   -webkit-margin-end: 0;
   margin-inline-end: 0;
   margin-top: 0;
@@ -626,11 +624,11 @@ button {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
-  margin-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 .select-wrapper {
-  min-width: var(--ion-scale-5000, 200px);
+  min-width: var(--token-scale-5000, 200px);
   background: transparent;
 }
 
@@ -640,7 +638,7 @@ button {
    * select, we need to fade the text 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));
 }
 
 .select-wrapper-inner {
@@ -654,7 +652,7 @@ button {
   position: relative;
   background: var(--background);
   box-sizing: border-box;
-  gap: var(--ion-space-200, var(--ion-scale-200, 8px));
+  gap: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 :host(.select-label-placement-stacked) .select-wrapper-inner,
@@ -663,10 +661,10 @@ button {
 }
 
 .native-wrapper {
-  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;
   /**
@@ -674,8 +672,8 @@ button {
    * input, we need to fade the input 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));
-  color: var(--ion-primitives-neutral-1200, #242424);
+  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  color: var(--token-primitives-neutral-1200, #242424);
 }
 
 :host(.select-label-placement-stacked) .native-wrapper,
@@ -685,7 +683,7 @@ button {
    * This is done by setting the width to the full width minus
    * the icon width and the gap between the icon and the text.
    */
-  width: calc(100% - var(--ion-scale-400, 16px) - var(--ion-space-200, var(--ion-scale-200, 8px)));
+  width: calc(100% - var(--token-scale-400, 16px) - var(--token-space-200, var(--token-scale-200, 8px)));
 }
 
 /**
@@ -699,21 +697,21 @@ button {
 ::slotted(ion-button[slot=start].button-has-icon-only),
 ::slotted(ion-button[slot=end].button-has-icon-only) {
   --border-radius: 50%;
-  --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
-  --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   aspect-ratio: 1;
 }
 
 .select-icon,
 ::slotted(ion-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);
 }
 
 .select-icon {
-  transition: transform 0.15s var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  transition: transform 0.15s var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 /**
@@ -726,40 +724,40 @@ button {
 }
 
 .select-icon {
-  color: var(--ion-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #626262);
 }
 
 :host(.select-disabled) {
-  --background: var(--ion-primitives-neutral-100, #f5f5f5);
-  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
+  --background: var(--token-primitives-neutral-100, #f5f5f5);
+  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
 }
 
 :host(.select-disabled) .label-text-wrapper,
 :host(.select-disabled) .select-text,
 :host(.select-disabled) .select-icon {
-  color: var(--ion-primitives-neutral-500, #a2a2a2);
+  color: var(--token-primitives-neutral-500, #a2a2a2);
 }
 
 :host(.select-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(.select-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(.select-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));
 }
 
 :host(.select-size-small) .select-wrapper-inner {
-  height: var(--ion-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
 }
 
 :host(.select-size-medium) .select-wrapper-inner {
-  height: var(--ion-scale-1200, 48px);
+  height: var(--token-scale-1200, 48px);
 }
 
 :host(.select-size-large) .select-wrapper-inner {
-  height: var(--ion-scale-1400, 56px);
+  height: var(--token-scale-1400, 56px);
 }

package/dist/collection/components/select-modal/select-modal.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.
  *
@@ -74,10 +72,10 @@ ion-item.ion-focused::part(native)::after {
 }
 
 ion-toolbar {
-  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;
 }
@@ -95,18 +93,18 @@ ion-list ion-radio::part(label) {
 
 ion-list ion-radio::part(label),
 ion-list ion-checkbox::part(label) {
-  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));
+  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;
 }
 
 .item-radio-checked,
 .item-checkbox-checked {
-  --background: var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd));
-  --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  --background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f2f4fd));
+  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 
 ion-content {
@@ -117,9 +115,9 @@ ion-content {
    * padding of the modal sheet in the core.
    */
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px)) !important;
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px)) !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px)) !important;
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px)) !important;
   /* stylelint-disable-next-line declaration-no-important */
-  --padding-bottom: var(--ion-space-1200, var(--ion-scale-1200, 48px)) !important;
+  --padding-bottom: var(--token-space-1200, var(--token-scale-1200, 48px)) !important;
 }

package/dist/collection/components/spinner/spinner.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.
  *
@@ -251,51 +249,51 @@ svg {
   }
 }
 :host {
-  --color: var(--ion-primitives-neutral-800, #626262);
-  width: var(--ion-scale-700, 28px);
-  height: var(--ion-scale-700, 28px);
+  --color: var(--token-primitives-neutral-800, #626262);
+  width: var(--token-scale-700, 28px);
+  height: var(--token-scale-700, 28px);
 }
 
 :host(.ion-color-medium) {
-  color: var(--ion-color-medium-subtle-contrast, var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262)));
+  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
 }
 
 :host(.spinner-lines) line,
 :host(.spinner-lines-small) line {
-  stroke-width: var(--ion-scale-150, 6px);
+  stroke-width: var(--token-scale-150, 6px);
 }
 
 :host(.spinner-lines-sharp) line,
 :host(.spinner-lines-sharp-small) line {
-  stroke-width: var(--ion-scale-100, 4px);
+  stroke-width: var(--token-scale-100, 4px);
 }
 
 /* Extra Small */
 :host(.spinner-xsmall) {
-  width: var(--ion-scale-600, 24px);
-  height: var(--ion-scale-600, 24px);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 /* Small */
 :host(.spinner-small) {
-  width: var(--ion-scale-800, 32px);
-  height: var(--ion-scale-800, 32px);
+  width: var(--token-scale-800, 32px);
+  height: var(--token-scale-800, 32px);
 }
 
 /* Medium */
 :host(.spinner-medium) {
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
+  width: var(--token-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
 }
 
 /* Large */
 :host(.spinner-large) {
-  width: var(--ion-scale-1200, 48px);
-  height: var(--ion-scale-1200, 48px);
+  width: var(--token-scale-1200, 48px);
+  height: var(--token-scale-1200, 48px);
 }
 
 /* Extra Large */
 :host(.spinner-xlarge) {
-  width: var(--ion-scale-1400, 56px);
-  height: var(--ion-scale-1400, 56px);
+  width: var(--token-scale-1400, 56px);
+  height: var(--token-scale-1400, 56px);
 }

package/dist/collection/components/tab-bar/tab-bar.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.
  *
@@ -115,12 +113,12 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host {
-  --background: var(--ion-tab-bar-background, var(--ion-primitives-base-white, #ffffff));
-  --background-activated: var(--ion-tab-bar-background-activated, var(--ion-primitives-neutral-100, #f5f5f5));
+  --background: var(--ion-tab-bar-background, var(--token-primitives-base-white, #ffffff));
+  --background-activated: var(--ion-tab-bar-background-activated, var(--token-primitives-neutral-100, #f5f5f5));
   --background-focused: var(--ion-tab-bar-background-focused, transparent);
-  --border: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
-  --color: var(--ion-tab-bar-color, var(--ion-primitives-neutral-800, #626262));
-  --color-selected: var(--ion-tab-bar-color-selected, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
+  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
   /**
    * Tab bar has a box sizing of content-box to ensure the padding
    * is not included in the height. This is important for the
@@ -129,35 +127,35 @@ Do not edit directly, this file was auto-generated.
    * In order for the height to be calculated correctly, the padding
    * top and bottom must be excluded from the height calculation.
    */
-  min-height: calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, var(--ion-scale-100, 4px)) * 2);
-  gap: var(--ion-space-300, var(--ion-scale-300, 12px));
-  box-shadow: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
+  min-height: calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);
+  gap: var(--token-space-300, var(--token-scale-300, 12px));
+  box-shadow: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
   z-index: 10;
 }
 
 /* Full */
 :host(.tab-bar-full) {
   /* stylelint-disable */
-  padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
-  padding-bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
-  padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0));
-  padding-left: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0));
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-bottom: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
+  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));
+  padding-left: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));
   /* stylelint-enable */
 }
 
 :host([slot=top].tab-bar-full) {
-  padding-top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
-  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  padding-top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 /* Compact */
 :host(.tab-bar-compact) {
-  -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-100, var(--ion-scale-100, 4px));
-  padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  -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-100, var(--token-scale-100, 4px));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
   position: absolute;
   align-self: center;
   width: fit-content;
@@ -165,24 +163,24 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host([slot=top].tab-bar-compact) {
-  top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
+  top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));
 }
 
 :host([slot=bottom].tab-bar-compact) {
-  bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
+  bottom: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
 }
 
 /* Soft */
 :host(.tab-bar-soft) {
-  border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 
 /* Round */
 :host(.tab-bar-round) {
-  border-radius: var(--ion-border-radius-full, 999px);
+  border-radius: var(--token-border-radius-full, 999px);
 }
 
 /* Rectangular */
 :host(.tab-bar-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));
 }

package/dist/collection/components/tab-button/tab-button.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.
  *
@@ -196,18 +194,18 @@ ion-ripple-effect {
 }
 
 :host {
-  --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
-  --focus-ring-width: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
-  font-size: var(--ion-font-size-300, 0.75rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-width: var(--token-border-radius-025, var(--token-scale-050, 2px));
+  font-size: var(--token-font-size-300, 0.75rem);
+  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;
   position: relative;
   align-content: center;
-  min-height: var(--ion-scale-1200, 48px);
-  max-height: var(--ion-scale-1800, 72px);
+  min-height: var(--token-scale-1200, 48px);
+  max-height: var(--token-scale-1800, 72px);
 }
 
 .button-native {
@@ -253,14 +251,14 @@ ion-ripple-effect {
   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;
   z-index: 1;
 }
 
 .button-native {
-  min-width: var(--ion-scale-1200, 48px);
+  min-width: var(--token-scale-1200, 48px);
   overflow: visible;
 }
 .button-native::after {
@@ -277,24 +275,24 @@ ion-ripple-effect {
 }
 
 ::slotted(ion-icon) {
-  width: var(--ion-scale-600, 24px);
-  height: var(--ion-scale-600, 24px);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 :host(.tab-button-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(.tab-button-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(.tab-button-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));
 }
 
 :host ::slotted(ion-badge) {
-  inset-inline-start: calc(50% + var(--ion-scale-300, 12px));
+  inset-inline-start: calc(50% + var(--token-scale-300, 12px));
 }
 
 :host ::slotted(ion-badge.badge-vertical-top) {
@@ -302,35 +300,35 @@ ion-ripple-effect {
 }
 
 :host ::slotted(ion-badge.badge-vertical-top:empty) {
-  top: calc(var(--ion-scale-100, 4px) * -1);
+  top: calc(var(--token-scale-100, 4px) * -1);
 }
 
 :host ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% - var(--ion-scale-200, 8px));
+  top: calc(50% - var(--token-scale-200, 8px));
 }
 
 :host ::slotted(ion-badge.badge-vertical-bottom:empty) {
-  top: calc(50% - var(--ion-scale-100, 4px));
+  top: calc(50% - var(--token-scale-100, 4px));
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: var(--ion-scale-100, 4px);
-  padding-inline-start: var(--ion-scale-100, 4px);
-  -webkit-padding-end: var(--ion-scale-100, 4px);
-  padding-inline-end: var(--ion-scale-100, 4px);
-  padding-top: var(--ion-scale-100, 4px);
-  padding-bottom: var(--ion-scale-100, 4px);
+  -webkit-padding-start: var(--token-scale-100, 4px);
+  padding-inline-start: var(--token-scale-100, 4px);
+  -webkit-padding-end: var(--token-scale-100, 4px);
+  padding-inline-end: var(--token-scale-100, 4px);
+  padding-top: var(--token-scale-100, 4px);
+  padding-bottom: var(--token-scale-100, 4px);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
-  top: calc(50% - var(--ion-scale-100, 4px));
+  top: calc(50% - var(--token-scale-100, 4px));
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
-  top: calc(50% + var(--ion-scale-100, 4px));
+  top: calc(50% + var(--token-scale-100, 4px));
 }
 
 :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {