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

package/dist/collection/components/item-option/item-option.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.
  *
@@ -160,51 +158,51 @@ Do not edit directly, this file was auto-generated.
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
-  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));
+  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;
 }
 
 .button-native {
-  -webkit-padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
-  padding-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
-  -webkit-padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
-  padding-inline-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));
-  min-width: var(--ion-scale-1600, 64px);
-  height: var(--ion-scale-1600, 64px);
+  -webkit-padding-start: var(--token-space-200, var(--token-scale-200, 8px));
+  padding-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
+  -webkit-padding-end: var(--token-space-200, var(--token-scale-200, 8px));
+  padding-inline-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));
+  min-width: var(--token-scale-1600, 64px);
+  height: var(--token-scale-1600, 64px);
 }
 
 ::slotted([slot=top]) {
   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));
 }
 
 ::slotted([slot=bottom]) {
   margin-left: 0;
   margin-right: 0;
-  margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
+  margin-top: var(--token-space-100, var(--token-scale-100, 4px));
   margin-bottom: 0;
 }
 
 ::slotted([slot=start]) {
   -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;
 }
 
 ::slotted([slot=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;
@@ -217,24 +215,24 @@ Do not edit directly, this file was auto-generated.
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  width: var(--ion-scale-500, 20px);
+  width: var(--token-scale-500, 20px);
   min-width: initial;
-  height: var(--ion-scale-500, 20px);
+  height: var(--token-scale-500, 20px);
 }
 
 /* Round */
 :host(.item-option-round) {
-  border-radius: var(--ion-border-radius-300, var(--ion-scale-300, 12px));
+  border-radius: var(--token-border-radius-300, var(--token-scale-300, 12px));
 }
 
 /* Soft */
 :host(.item-option-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));
 }
 
 /* Rectangular */
 :host(.item-option-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));
 }
 
 /* Disabled */
@@ -244,7 +242,7 @@ Do not edit directly, this file was auto-generated.
   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;
 }
@@ -254,9 +252,9 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.item-option-subtle) {
-  --background: var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd))));
-  --background-activated: var(--ion-color-primary-subtle-shade, var(--ion-bg-primary-subtle-press, var(--ion-semantics-primary-300, var(--ion-primitives-blue-300, #d0d7fa))));
-  --color: var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
+  --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f2f4fd))));
+  --background-activated: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
+  --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
 }
 
 :host(.item-option-subtle.ion-color) {
@@ -265,9 +263,9 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.item-option-bold) {
-  --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)))));
-  --background-activated: var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
-  --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)))));
+  --background-activated: var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)));
 }
 
 :host(.item-option-bold.ion-color) {
@@ -276,5 +274,5 @@ Do not edit directly, this file was auto-generated.
 }
 
 :host(.item-option-expandable) {
-  transition-timing-function: var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+  transition-timing-function: var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }

package/dist/collection/components/item-options/item-options.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.
  *
@@ -193,30 +191,30 @@ ion-item-options {
 
 .item-options-ionic {
   align-items: center;
-  background: var(--ion-primitives-base-white, #ffffff);
-  gap: var(--ion-space-100, var(--ion-scale-100, 4px));
+  background: var(--token-primitives-base-white, #ffffff);
+  gap: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 /* stylelint-disable property-disallowed-list */
 [dir=ltr] .item-options-start ion-item-option:last-child,
 [dir=rtl] .item-options-start ion-item-option:first-child {
-  margin-right: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-right: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 [dir=ltr] .item-options-start ion-item-option:first-child,
 [dir=rtl] .item-options-start ion-item-option:last-child {
-  margin-left: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-safe-area-left, 0));
+  margin-left: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-left, 0));
   padding-left: initial;
 }
 
 [dir=ltr] .item-options-end ion-item-option:first-child,
 [dir=rtl] .item-options-end ion-item-option:last-child {
-  margin-left: var(--ion-space-200, var(--ion-scale-200, 8px));
+  margin-left: var(--token-space-200, var(--token-scale-200, 8px));
 }
 
 [dir=ltr] .item-options-end ion-item-option:last-child,
 [dir=rtl] .item-options-end ion-item-option:first-child {
-  margin-right: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-safe-area-right, 0));
+  margin-right: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-right, 0));
   padding-right: initial;
 }
 

package/dist/collection/components/list/list.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.
  *
@@ -98,12 +96,12 @@ ion-list {
 }
 
 .list-ionic.list-inset {
-  -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-end: var(--ion-space-100, var(--ion-scale-100, 4px));
-  margin-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
-  margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
-  margin-bottom: 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: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-top: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
 .list-ionic-lines-none .item-lines-default {
@@ -124,8 +122,8 @@ ion-list {
    */
   border-start-start-radius: initial;
   border-start-end-radius: initial;
-  border-end-end-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
-  border-end-start-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  border-end-end-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  border-end-start-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 .list-ionic:has(ion-list-header).list-round ion-list-header + * {
   /**
@@ -133,8 +131,8 @@ ion-list {
    * The bottom of the first element should not have a border radius
    * because that would not look connected to the rest.
    */
-  border-start-start-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
-  border-start-end-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
+  border-start-start-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+  border-start-end-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
   border-end-end-radius: initial;
   border-end-start-radius: initial;
 }
@@ -146,8 +144,8 @@ ion-list {
    */
   border-start-start-radius: initial;
   border-start-end-radius: initial;
-  border-end-end-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
-  border-end-start-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
+  border-end-end-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
+  border-end-start-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
 }
 .list-ionic:has(ion-list-header).list-soft ion-list-header + * {
   /**
@@ -155,8 +153,8 @@ ion-list {
    * The bottom of the first element should not have a border radius
    * because that would not look connected to the rest.
    */
-  border-start-start-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
-  border-start-end-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
+  border-start-start-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
+  border-start-end-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
   border-end-end-radius: initial;
   border-end-start-radius: initial;
 }
@@ -168,8 +166,8 @@ ion-list {
    */
   border-start-start-radius: initial;
   border-start-end-radius: initial;
-  border-end-end-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
-  border-end-start-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
+  border-end-end-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  border-end-start-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
 }
 .list-ionic:has(ion-list-header).list-rectangular ion-list-header + * {
   /**
@@ -177,8 +175,8 @@ ion-list {
    * The bottom of the first element should not have a border radius
    * because that would not look connected to the rest.
    */
-  border-start-start-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
-  border-start-end-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
+  border-start-start-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  border-start-end-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
   border-end-end-radius: initial;
   border-end-start-radius: initial;
 }
@@ -189,26 +187,26 @@ ion-list {
   /* Rectangular */
 }
 .list-ionic:not(:has(ion-list-header)).list-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));
 }
 .list-ionic:not(:has(ion-list-header)).list-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));
 }
 .list-ionic:not(:has(ion-list-header)).list-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));
 }
 
 .list-ionic-lines-none .item-lines-default {
-  --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
-  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
+  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
 }
 
 .list-ionic-lines-full .item-lines-default {
-  --inner-border-width: var(--ion-border-size-0, var(--ion-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));
+  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --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));
 }
 
 .list-ionic-lines-inset .item-lines-default {
-  --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));
-  --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
+  --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));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
 }

package/dist/collection/components/list-header/list-header.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.
  *
@@ -151,14 +149,14 @@ Do not edit directly, this file was auto-generated.
 
 :host {
   --background: transparent;
-  --color: var(--ion-primitives-neutral-1200, #242424);
-  font-size: var(--ion-font-size-350, 0.875rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
+  --color: var(--token-primitives-neutral-1200, #242424);
+  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;
-  min-height: calc(var(--ion-scale-1400, 56px) + var(--ion-scale-050, 2px));
+  min-height: calc(var(--token-scale-1400, 56px) + var(--token-scale-050, 2px));
   /**
    * The focus rings from components like buttons and links
    * are being cut off. This style ensures that the focus ring
@@ -166,19 +164,19 @@ Do not edit directly, this file was auto-generated.
    */
   overflow: visible;
   /* stylelint-disable */
-  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
   /* stylelint-enable */
 }
 :host-context([dir=rtl]) {
-  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
 }
 
 @supports selector(:dir(rtl)) {
   :host(:dir(rtl)) {
-    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
-    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
+    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--token-space-400, var(--token-scale-400, 16px)));
   }
 }
 
@@ -188,5 +186,5 @@ Do not edit directly, this file was auto-generated.
 }
 
 ::slotted(ion-label) ::slotted(p) {
-  font-weight: var(--ion-font-weight-regular, 400);
+  font-weight: var(--token-font-weight-regular, 400);
 }

package/dist/collection/components/menu-button/menu-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.
  *
@@ -232,7 +230,7 @@ ion-icon {
   --padding-start: 0;
   --padding-end: 0;
   position: relative;
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
-  font-size: var(--ion-font-size-600, 1.5rem);
+  width: var(--token-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
+  font-size: var(--token-font-size-600, 1.5rem);
 }

package/dist/collection/components/modal/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.
  *
@@ -191,40 +189,40 @@ ion-backdrop {
 }
 
 :host {
-  --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white, #ffffff));
-  --box-shadow: var(--ion-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
+  --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
+  --box-shadow: var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
   --backdrop-opacity: 1;
-  color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
 }
 
 :host(.modal-round) {
-  --border-radius: var(--ion-border-radius-1000, var(--ion-scale-1000, 40px));
+  --border-radius: var(--token-border-radius-1000, var(--token-scale-1000, 40px));
 }
 
 :host(.modal-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));
 }
 
 :host(.modal-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));
 }
 
 .modal-handle {
   right: 0px;
   left: 0px;
-  top: var(--ion-space-300, var(--ion-scale-300, 12px));
-  border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
-  width: var(--ion-scale-1100, 44px);
-  height: var(--ion-scale-100, 4px);
-  background-color: var(--ion-primitives-neutral-300, #e0e0e0);
+  top: var(--token-space-300, var(--token-scale-300, 12px));
+  border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
+  width: var(--token-scale-1100, 44px);
+  height: var(--token-scale-100, 4px);
+  background-color: var(--token-primitives-neutral-300, #e0e0e0);
 }
 .modal-handle::before {
-  -webkit-padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
-  padding-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
-  -webkit-padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
-  padding-inline-end: var(--ion-space-100, var(--ion-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));
+  -webkit-padding-start: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
+  -webkit-padding-end: var(--token-space-100, var(--token-scale-100, 4px));
+  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));
 }
 
 :host(.modal-sheet) .modal-wrapper {
@@ -239,5 +237,5 @@ ion-backdrop {
  * completely cover the content.
  */
 :host(.modal-sheet) {
-  --height: calc(100% - (var(--ion-safe-area-top) + var(--ion-scale-250, 10px)));
+  --height: calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)));
 }

package/dist/collection/components/progress-bar/progress-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.
  *
@@ -266,17 +264,17 @@ Do not edit directly, this file was auto-generated.
   }
 }
 :host {
-  --background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
-  --progress-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)))));
-  height: var(--ion-scale-100, 4px);
+  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
+  --progress-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)))));
+  height: var(--token-scale-100, 4px);
 }
 
 :host(.progress-bar-shape-round) {
-  border-radius: var(--ion-round-xs, var(--ion-border-radius-full, 999px));
+  border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
 }
 
 :host(.progress-bar-shape-rectangular) {
-  border-radius: var(--ion-rectangular-xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
+  border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
 }
 
 :host(.ion-color) .progress,