fix usage of correct global default tokens

BenOsodrac · BenOsodrac · commit 29bb36d91790 · 2025-09-09T18:11:11.000+01:00
diff --git a/core/src/components/buttons/buttons.ionic.scss b/core/src/components/buttons/buttons.ionic.scss
@@ -13,7 +13,7 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-clear {
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --background: transparent;
   --background-activated: transparent;
   --background-focused: transparent;
diff --git a/core/src/components/card-title/card-title.ionic.scss b/core/src/components/card-title/card-title.ionic.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
 
   @include globals.typography(globals.$ion-heading-h5-medium);
 }
diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss
@@ -5,12 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --border-width: #{globals.$ion-border-size-025};
   --border-color: #{globals.$ion-border-default};
   --border-style: #{globals.$ion-border-style-solid};
   --border-radius: #{globals.$ion-round-xl};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   min-width: globals.$ion-scale-2400;
 
   border: var(--border-width) var(--border-style) var(--border-color);
diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss
@@ -30,7 +30,7 @@
   --checkbox-background: #{globals.$ion-bg-input-default};
   --checkbox-background-checked: #{globals.$ion-bg-primary-base-default};
   --border-color-checked: #{globals.$ion-semantics-primary-base};
-  --checkmark-color: #{globals.$ion-primitives-base-white};
+  --checkmark-color: #{globals.$ion-bg-surface-default};
   --transition: none;
 
   z-index: 2;
@@ -60,7 +60,7 @@
 }
 
 .label-text-wrapper {
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 :host(.in-item) .label-text-wrapper {
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
@@ -117,13 +117,13 @@
 
 :host(.chip-bold) {
   --background: #{globals.$ion-bg-neutral-bold-default};
-  --color: #{globals.$ion-primitives-base-white};
+  --color: #{globals.$ion-bg-surface-default};
 }
 
 :host(.chip-outline.chip-bold) {
   // TODO(FW-6450): this is a made up design choice based on a
   // darker shade of the background color
-  border-color: globals.$ion-primitives-neutral-1200;
+  border-color: globals.$ion-text-default;
 }
 
 // Chip Colors
diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss
@@ -9,7 +9,7 @@
    * @prop --focus-ring-color: The color of the ring around the focused element.
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
 }
@@ -140,7 +140,7 @@
 
   height: globals.$ion-scale-1200;
 
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Disabled Day
@@ -211,7 +211,7 @@
   height: globals.$ion-scale-800;
 
   background-color: globals.$ion-primitives-neutral-100;
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Calendar / Footer / Action Buttons
diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss
@@ -1,6 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
 :host(.input-fill-outline) {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --border-color: #{globals.$ion-primitives-neutral-500};
 }
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
@@ -6,7 +6,7 @@
 // --------------------------------------------------
 
 :host {
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --border-width: #{globals.$ion-border-size-025};
   --highlight-color-valid: #{globals.$ion-semantics-success-900};
   --highlight-color-invalid: #{globals.$ion-border-danger-default};
diff --git a/core/src/components/item-options/item-options.ionic.scss b/core/src/components/item-options/item-options.ionic.scss
@@ -11,7 +11,7 @@ ion-item-options {
 .item-options-ionic {
   align-items: center;
 
-  background: #{globals.$ion-primitives-base-white};
+  background: #{globals.$ion-bg-surface-default};
 
   gap: globals.$ion-space-100;
 }
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
@@ -5,12 +5,12 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --background-activated: #{globals.$ion-primitives-neutral-200};
   --border-color: #{globals.$ion-primitives-neutral-300};
   --border-style: #{globals.$ion-border-style-solid};
   --border-width: #{0 0 globals.$ion-border-size-025 0};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --detail-icon-color: #{globals.$ion-primitives-neutral-800};
   --detail-icon-font-size: #{globals.$ion-scale-600};
   --detail-icon-opacity: 1;
diff --git a/core/src/components/list-header/list-header.ionic.scss b/core/src/components/list-header/list-header.ionic.scss
@@ -3,7 +3,7 @@
 
 :host {
   --background: transparent;
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
 
   @include globals.typography(globals.$ion-body-md-medium);
 
diff --git a/core/src/components/radio/radio.ionic.scss b/core/src/components/radio/radio.ionic.scss
@@ -17,7 +17,7 @@
 
   min-height: globals.$ion-scale-1200;
 
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Radio Color
@@ -55,7 +55,7 @@
   border-style: var(--border-style);
   border-color: var(--color);
 
-  background-color: globals.$ion-primitives-base-white;
+  background-color: globals.$ion-bg-surface-default;
 }
 
 // Ionic Radio Inner Circle: Unchecked
@@ -67,7 +67,7 @@
   width: calc(32% + var(--border-width));
   height: calc(32% + var(--border-width));
 
-  background-color: globals.$ion-primitives-base-white;
+  background-color: globals.$ion-bg-surface-default;
 }
 
 // Ionic Radio Outer Circle: Checked
diff --git a/core/src/components/searchbar/searchbar.ionic.scss b/core/src/components/searchbar/searchbar.ionic.scss
@@ -14,7 +14,7 @@
   --box-shadow: none;
   --cancel-button-color: #{globals.$ion-primitives-neutral-800};
   --clear-button-color: #{globals.$ion-primitives-neutral-1000};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --icon-color: #{globals.$ion-icon-subtlest};
   --placeholder-color: #{globals.$ion-text-subtlest};
   --focus-ring-color: #{globals.$ion-border-focus-default};
diff --git a/core/src/components/segment/segment.ionic.scss b/core/src/components/segment/segment.ionic.scss
@@ -5,5 +5,5 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
 }
diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss
@@ -6,7 +6,7 @@
 // -------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
   // ios and md. This will allow us to have a single color map.
   --border-color: #{globals.$ion-primitives-neutral-500};
@@ -162,7 +162,7 @@
    */
   transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
 
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 :host(.select-label-placement-stacked) .native-wrapper,
diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss
@@ -7,13 +7,13 @@
 
 :host {
   --border-color: #{globals.$ion-primitives-neutral-500};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --color: #{globals.$ion-text-default};
   --highlight-color-valid: #{globals.$ion-semantics-success-900};
   --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --highlight-color-focused: #{globals.ion-color(primary, base)};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
-  --background: #{globals.$ion-primitives-base-white};
+  --background: #{globals.$ion-bg-surface-default};
   --padding-bottom: #{globals.$ion-space-200};
 
   @include globals.typography(globals.$ion-body-md-regular);
diff --git a/core/src/components/toggle/toggle.ionic.scss b/core/src/components/toggle/toggle.ionic.scss
@@ -10,8 +10,8 @@
   --border-radius: #{globals.$ion-border-radius-full};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
-  --handle-background: #{globals.$ion-primitives-base-white};
-  --handle-background-checked: #{globals.$ion-primitives-base-white};
+  --handle-background: #{globals.$ion-bg-surface-default};
+  --handle-background-checked: #{globals.$ion-bg-surface-default};
   --handle-border-radius: #{globals.$ion-border-radius-full};
   --handle-height: #{globals.$ion-scale-500};
   --handle-max-height: #{globals.$ion-scale-500};
@@ -111,7 +111,7 @@
   align-items: center;
   justify-content: center;
 
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 .toggle-inner .toggle-switch-icon {
@@ -137,7 +137,7 @@
   * when the label sits at the start.
   */
   @include globals.margin(null, globals.$ion-space-400, null, 0);
-  color: globals.$ion-primitives-neutral-1200;
+  color: globals.$ion-text-default;
 }
 
 // Toggle Label Placement - End
diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-base-white};
-  --color: #{globals.$ion-primitives-neutral-1200};
+  --background: #{globals.$ion-bg-surface-default};
+  --color: #{globals.$ion-text-default};
   --border-color: currentColor;
   --padding-top: #{globals.$ion-space-200};
   --padding-bottom: #{globals.$ion-space-200};
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
@@ -16,6 +16,9 @@
       @include globals.generate-color($color-name);
     }
   }
+
+  /* Default background color of all components to default background surface token */
+  --background: #{globals.$ion-bg-surface-default};
 }
 
 html {
@@ -24,7 +27,7 @@ html {
 
 body {
   background: var(--ion-background-color, #{globals.$ion-bg-body});
-  color: var(--ion-text-color);
+  color: var(--ion-text-color, #{globals.$ion-text-default});
 }
 
 body.backdrop-no-scroll {
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
@@ -210,7 +210,7 @@ $ionic-colors: (
 // Ionic Tabs & Tab Bar
 // --------------------------------------------------
 
-$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-base-white);
+$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-bg-surface-default);
 $tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
 $tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
 $tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`// --------------------------------------------------`
`6`	`6`
`7`	`7`	`:host {`
`8`		`- --color: #{globals.$ion-primitives-neutral-1200};`
	`8`	`+ --color: #{globals.$ion-text-default};`
`9`	`9`
`10`	`10`	`@include globals.typography(globals.$ion-heading-h5-medium);`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`--checkbox-background: #{globals.$ion-bg-input-default};`
`31`	`31`	`--checkbox-background-checked: #{globals.$ion-bg-primary-base-default};`
`32`	`32`	`--border-color-checked: #{globals.$ion-semantics-primary-base};`
`33`		`- --checkmark-color: #{globals.$ion-primitives-base-white};`
	`33`	`+ --checkmark-color: #{globals.$ion-bg-surface-default};`
`34`	`34`	`--transition: none;`
`35`	`35`
`36`	`36`	`z-index: 2;`
`@@ -60,7 +60,7 @@`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`.label-text-wrapper {`
`63`		`- color: globals.$ion-primitives-neutral-1200;`
	`63`	`+ color: globals.$ion-text-default;`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`:host(.in-item) .label-text-wrapper {`
Original file line number	Diff line number	Diff line change
`@@ -117,13 +117,13 @@`
`117`	`117`
`118`	`118`	`:host(.chip-bold) {`
`119`	`119`	`--background: #{globals.$ion-bg-neutral-bold-default};`
`120`		`- --color: #{globals.$ion-primitives-base-white};`
	`120`	`+ --color: #{globals.$ion-bg-surface-default};`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`:host(.chip-outline.chip-bold) {`
`124`	`124`	`// TODO(FW-6450): this is a made up design choice based on a`
`125`	`125`	`// darker shade of the background color`
`126`		`- border-color: globals.$ion-primitives-neutral-1200;`
	`126`	`+ border-color: globals.$ion-text-default;`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`// Chip Colors`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`@use "../../themes/ionic/ionic.globals.scss" as globals;`
`2`	`2`
`3`	`3`	`:host(.input-fill-outline) {`
`4`		`- --background: #{globals.$ion-primitives-base-white};`
	`4`	`+ --background: #{globals.$ion-bg-surface-default};`
`5`	`5`	`--border-color: #{globals.$ion-primitives-neutral-500};`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ ion-item-options {`
`11`	`11`	`.item-options-ionic {`
`12`	`12`	`align-items: center;`
`13`	`13`
`14`		`- background: #{globals.$ion-primitives-base-white};`
	`14`	`+ background: #{globals.$ion-bg-surface-default};`
`15`	`15`
`16`	`16`	`gap: globals.$ion-space-100;`
`17`	`17`	`}`