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

package/dist/collection/components/button/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.
  *
@@ -345,12 +343,12 @@ ion-ripple-effect {
 }
 
 :host {
-  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
-  --padding-end: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
+  --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   --padding-bottom: var(--padding-top);
   --padding-start: var(--padding-end);
-  --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));
+  --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));
   position: relative;
 }
 :host::after {
@@ -359,7 +357,7 @@ ion-ripple-effect {
   top: 50%;
   position: absolute;
   height: 100%;
-  min-height: var(--ion-scale-1200, 48px);
+  min-height: var(--token-scale-1200, 48px);
   transform: translateY(-50%);
   content: "";
   cursor: pointer;
@@ -367,39 +365,39 @@ ion-ripple-effect {
 }
 
 :host(.button-clear) {
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
 }
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
-  --background-hover: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --background-activated: var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --background-hover: var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
   --background-focused: transparent;
   --background-hover-opacity: 1;
-  --background: 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)))));
-  --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
+  --background: 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)))));
+  --color: var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-outline) {
-  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
-  --border-style: var(--ion-border-style-solid, solid);
-  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --border-style: var(--token-border-style-solid, solid);
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --border-color: 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)))));
-  --color: 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-color: 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)))));
+  --color: 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)))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
 
 :host(.button-clear) {
-  --background-activated: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
   --background-focused: transparent;
-  --background-hover: var(--ion-bg-neutral-subtlest-press, var(--ion-primitives-neutral-200, #efefef));
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #efefef));
   --background-hover-opacity: 1;
-  --color: var(--ion-color-primary-foreground, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -410,46 +408,46 @@ ion-ripple-effect {
 
 :host(.button-outline.ion-color) ion-ripple-effect,
 :host(.button-clear.ion-color) ion-ripple-effect {
-  color: var(--ion-primitives-neutral-200, #efefef);
+  color: var(--token-primitives-neutral-200, #efefef);
 }
 
 /* Small Button */
 :host(.button-small) {
-  --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
-  font-size: var(--ion-font-size-350, 0.875rem);
-  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));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  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;
-  min-width: var(--ion-scale-1600, 64px);
-  min-height: var(--ion-scale-1000, 40px);
+  min-width: var(--token-scale-1600, 64px);
+  min-height: var(--token-scale-1000, 40px);
 }
 
 /* Medium Button */
 :host(.button-medium) {
-  --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
-  font-size: var(--ion-font-size-400, 1rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
+  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;
-  min-width: var(--ion-scale-1800, 72px);
-  min-height: var(--ion-scale-1200, 48px);
+  min-width: var(--token-scale-1800, 72px);
+  min-height: var(--token-scale-1200, 48px);
 }
 
 /* Large Button */
 :host(.button-large) {
-  --padding-end: var(--ion-space-700, var(--ion-scale-700, 28px));
-  font-size: var(--ion-font-size-500, 1.25rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  --padding-end: var(--token-space-700, var(--token-scale-700, 28px));
+  font-size: var(--token-font-size-500, 1.25rem);
+  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;
-  min-width: var(--ion-scale-2000, 80px);
-  min-height: var(--ion-scale-1400, 56px);
+  min-width: var(--token-scale-2000, 80px);
+  min-height: var(--token-scale-1400, 56px);
 }
 
 /* Button containing only an icon */
@@ -459,15 +457,15 @@ ion-ripple-effect {
 :host(.button-medium) ::slotted(ion-icon[slot=start]),
 :host(.button-medium) ::slotted(ion-icon[slot=end]),
 :host(.button-medium) ::slotted(ion-icon[slot=icon-only]) {
-  width: var(--ion-scale-500, 20px);
-  height: var(--ion-scale-500, 20px);
+  width: var(--token-scale-500, 20px);
+  height: var(--token-scale-500, 20px);
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=start]),
 :host(.button-large) ::slotted(ion-icon[slot=end]),
 :host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
-  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(.button-has-icon-only) {
@@ -484,25 +482,25 @@ ion-ripple-effect {
 ::slotted(ion-spinner[slot=start]),
 ::slotted(ion-spinner[slot=end]),
 ::slotted(ion-spinner[slot=icon-only]) {
-  width: var(--ion-scale-500, 20px);
-  height: var(--ion-scale-500, 20px);
+  width: var(--token-scale-500, 20px);
+  height: var(--token-scale-500, 20px);
 }
 
 :host(.button-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(.button-round) {
-  --border-radius: var(--ion-border-radius-full, 999px);
+  --border-radius: var(--token-border-radius-full, 999px);
 }
 
 :host(.button-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(.ion-focused) .button-native {
-  outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
-  outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
+  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
 :host(.button-solid.ion-color.ion-activated) .button-native::after {
@@ -525,7 +523,7 @@ 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;
   width: inherit;
@@ -533,90 +531,90 @@ ion-ripple-effect {
 }
 
 ::slotted(ion-icon) {
-  font-size: var(--ion-font-size-500, 1.25rem);
+  font-size: var(--token-font-size-500, 1.25rem);
 }
 
 :host(.button-small) ::slotted(ion-icon[slot=start]),
 :host(.button-small) ::slotted(ion-spinner[slot=start]) {
-  -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));
 }
 
 ::slotted(ion-icon[slot=start]),
 ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-250, var(--ion-scale-250, 10px));
-  margin-inline-end: var(--ion-space-250, var(--ion-scale-250, 10px));
+  -webkit-margin-end: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-inline-end: var(--token-space-250, var(--token-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=start]),
 :host(.button-large) ::slotted(ion-spinner[slot=start]) {
-  -webkit-margin-end: var(--ion-space-300, var(--ion-scale-300, 12px));
-  margin-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
+  -webkit-margin-end: var(--token-space-300, var(--token-scale-300, 12px));
+  margin-inline-end: var(--token-space-300, var(--token-scale-300, 12px));
 }
 
 :host(.button-small) ::slotted(ion-icon[slot=end]),
 :host(.button-small) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-200, var(--ion-scale-200, 8px));
-  margin-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
+  -webkit-margin-start: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 ::slotted(ion-icon[slot=end]),
 ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-250, var(--ion-scale-250, 10px));
-  margin-inline-start: var(--ion-space-250, var(--ion-scale-250, 10px));
+  -webkit-margin-start: var(--token-space-250, var(--token-scale-250, 10px));
+  margin-inline-start: var(--token-space-250, var(--token-scale-250, 10px));
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=end]),
 :host(.button-large) ::slotted(ion-spinner[slot=end]) {
-  -webkit-margin-start: var(--ion-space-300, var(--ion-scale-300, 12px));
-  margin-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
+  -webkit-margin-start: var(--token-space-300, var(--token-scale-300, 12px));
+  margin-inline-start: var(--token-space-300, var(--token-scale-300, 12px));
 }
 
 :host(.button-has-badge) {
-  --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
-  --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
+  --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
+  --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
 }
 
 :host(.button-small) ::slotted(ion-badge) {
-  inset-inline-end: calc(-1 * var(--ion-space-050, var(--ion-scale-050, 2px)));
+  inset-inline-end: calc(-1 * var(--token-space-050, var(--token-scale-050, 2px)));
 }
 
 :host(.button-medium) ::slotted(ion-badge.long-badge.badge-vertical-top) {
-  top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  top: var(--token-space-100, var(--token-scale-100, 4px));
 }
 :host(.button-medium) ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
-  bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 :host(.button-medium) ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-  top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  top: var(--token-space-100, var(--token-scale-100, 4px));
 }
 :host(.button-medium) ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-  inset-inline-end: var(--ion-space-150, var(--ion-scale-150, 6px));
+  inset-inline-end: var(--token-space-150, var(--token-scale-150, 6px));
 }
 
 :host(.button-medium) ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-  bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
+  bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 :host(.button-medium) ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-  inset-inline-end: var(--ion-space-150, var(--ion-scale-150, 6px));
+  inset-inline-end: var(--token-space-150, var(--token-scale-150, 6px));
 }
 
 :host(.button-large) ::slotted(ion-badge.long-badge.badge-vertical-top) {
-  top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  top: var(--token-space-200, var(--token-scale-200, 8px));
 }
 :host(.button-large) ::slotted(ion-badge.long-badge.badge-vertical-bottom) {
-  bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  bottom: var(--token-space-200, var(--token-scale-200, 8px));
 }
 :host(.button-large) ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-  top: var(--ion-space-200, var(--ion-scale-200, 8px));
+  top: var(--token-space-200, var(--token-scale-200, 8px));
 }
 :host(.button-large) ::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
-  inset-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  inset-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 :host(.button-large) ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-  bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  bottom: var(--token-space-200, var(--token-scale-200, 8px));
 }
 :host(.button-large) ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
-  inset-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
+  inset-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
 }

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

@@ -41,9 +41,6 @@
  * @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.
-*/
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -83,7 +80,7 @@ Do not edit directly, this file was auto-generated.
 }
 
 ::slotted(*) .button-clear {
-  --color: var(--ion-primitives-neutral-1200, #242424);
+  --color: var(--token-primitives-neutral-1200, #242424);
   --background: transparent;
   --background-activated: transparent;
   --background-focused: transparent;
@@ -91,10 +88,10 @@ Do not edit directly, this file was auto-generated.
 }
 
 ::slotted(*) .button-has-icon-only {
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
+  width: var(--token-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
 }
 
 ::slotted(*) ion-icon[slot=icon-only] {
-  font-size: var(--ion-font-size-600, 1.5rem);
+  font-size: var(--token-font-size-600, 1.5rem);
 }

package/dist/collection/components/card/card.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.
  *
@@ -119,13 +117,13 @@ ion-ripple-effect {
 }
 
 :host {
-  --background: var(--ion-primitives-base-white, #ffffff);
-  --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
-  --border-color: var(--ion-border-default, var(--ion-primitives-neutral-400, #d5d5d5));
-  --border-style: var(--ion-border-style-solid, solid);
-  --border-radius: var(--ion-round-xl, var(--ion-border-radius-400, var(--ion-scale-400, 16px)));
-  --color: var(--ion-primitives-neutral-1200, #242424);
-  min-width: var(--ion-scale-2400, 96px);
+  --background: var(--token-primitives-base-white, #ffffff);
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --border-color: var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  --border-style: var(--token-border-style-solid, solid);
+  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --color: var(--token-primitives-neutral-1200, #242424);
+  min-width: var(--token-scale-2400, 96px);
   border: var(--border-width) var(--border-style) var(--border-color);
 }
 
@@ -134,13 +132,13 @@ ion-ripple-effect {
 }
 
 :host(.card-soft) {
-  --border-radius: var(--ion-soft-xl, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
+  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
 }
 
 :host(.card-round) {
-  --border-radius: var(--ion-round-xl, var(--ion-border-radius-400, var(--ion-scale-400, 16px)));
+  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
 }
 
 :host(.card-rectangular) {
-  --border-radius: var(--ion-rectangular-xl, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
+  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }

package/dist/collection/components/card-content/card-content.ionic.css

@@ -8,9 +8,7 @@ ion-card-content {
  * @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.
  *
@@ -66,27 +64,27 @@ Do not edit directly, this file was auto-generated.
  * convert to a unit other than $baselineUnit.
  */
 .card-content-ionic {
-  -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-400, var(--ion-scale-400, 16px));
-  padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
-  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));
+  -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-400, var(--token-scale-400, 16px));
+  padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  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;
   display: flex;
   flex-direction: column;
-  gap: var(--ion-space-400, var(--ion-scale-400, 16px));
+  gap: var(--token-space-400, var(--token-scale-400, 16px));
 }
 .card-content-ionic img {
   margin-left: 0;
   margin-right: 0;
-  margin-top: var(--ion-space-200, var(--ion-scale-200, 8px));
-  margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-top: var(--token-space-200, var(--token-scale-200, 8px));
+  margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 ion-card-header + .card-content-ionic {

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

@@ -19,9 +19,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.
  *
@@ -77,11 +75,11 @@ Do not edit directly, this file was auto-generated.
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  -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-400, var(--ion-scale-400, 16px));
-  padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
-  gap: var(--ion-space-050, var(--ion-scale-050, 2px));
+  -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-400, var(--token-scale-400, 16px));
+  padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+  gap: var(--token-space-050, var(--token-scale-050, 2px));
 }

package/dist/collection/components/card-subtitle/card-subtitle.ionic.css

@@ -78,9 +78,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.
  *
@@ -136,11 +134,11 @@ Do not edit directly, this file was auto-generated.
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --color: var(--ion-primitives-neutral-800, #626262);
-  font-size: var(--ion-font-size-400, 1rem);
-  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));
+  --color: var(--token-primitives-neutral-800, #626262);
+  font-size: var(--token-font-size-400, 1rem);
+  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;
 }