fix(toolbar): use correct colors on activated buttons

thetaPC · thetaPC · commit 75da67f57836 · 2025-12-04T13:38:53.000-08:00
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
@@ -291,5 +291,5 @@
 
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-color, var(--color));
-  color: #{var(--ion-components-ion-toolbar-bg, var(--background), ion-color(primary, contrast))};
+  color: var(--ion-components-ion-toolbar-activated-button-color);
 }
diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss
@@ -118,3 +118,5 @@ $button-ios-clear-opacity-hover: 0.6;
 
 /// @prop - Font weight of the strong button
 $button-ios-strong-font-weight: 600;
+
+$test: $item-ios-background;
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
@@ -240,6 +240,6 @@
 // --------------------------------------------------
 
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
-  background: var(--ion-components-ion-toolbar-bg, var(--color));
+  background: var(--ion-components-ion-toolbar-activated-bg);
   color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
 }
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
@@ -78,7 +78,7 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-solid {
-  --color: var(--ion-components-ion-toolbar-bg);
+  --color: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: transparent;
   --background-focused: currentColor;
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-components-ion-toolbar-bg);
+  --background: #{$toolbar-ios-background};
   --color: #{$toolbar-ios-color};
-  --border-color: var(--ion-components-ion-toolbar-border-color);
+  --border-color: #{$toolbar-ios-border-color};
   --padding-top: #{$toolbar-ios-padding-top};
   --padding-bottom: #{$toolbar-ios-padding-bottom};
   --padding-start: #{$toolbar-ios-padding-start};
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  --background: var(--ion-components-ion-toolbar-bg);
+  --background: #{$toolbar-md-background};
   --color: #{$toolbar-md-color};
-  --border-color: var(--ion-components-ion-toolbar-border-color);
+  --border-color: #{$toolbar-md-border-color};
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 0;
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
@@ -122,6 +122,7 @@ export const defaultTheme: DefaultTheme = {
       borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
     },
     IonToolbar: {
+      activatedButtonColor: 'var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))',
       bg: 'var(--ion-toolbar-background, var(--ion-color-gray-50))',
       borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
     },
diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts
@@ -29,7 +29,7 @@ export const darkTheme: DarkTheme = {
       background: '#1e1e1e',
     },
     IonToolbar: {
-      bg: '#1f1f1f',
+      bg: 'var(--ion-toolbar-background, #1f1f1f)',
     },
     IonTabBar: {
       background: '#1f1f1f',
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
@@ -113,7 +113,8 @@ export const defaultTheme: DefaultTheme = {
       borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
     },
     IonToolbar: {
-      bg: `var(--ion-toolbar-background, ${baseDefaultTheme.color!.white})`,
+      activatedButtonBg: 'var(--ion-toolbar-background, var(--color))',
+      bg: `var(--ion-toolbar-background, var(--ion-background-color, ${baseDefaultTheme.color!.white}))`,
       borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-gray-150)))',
     },
   },
diff --git a/core/src/themes/md/high-contrast-dark.tokens.ts b/core/src/themes/md/high-contrast-dark.tokens.ts
@@ -10,5 +10,8 @@ export const highContrastDarkTheme: HighContrastDarkTheme = {
       /// Borders for elements like toolbars should remain the same
       borderColor: 'var(--ion-color-gray-400)',
     },
+    IonToolbar: {
+      bg: 'var(--ion-toolbar-background, #1f1f1f)',
+    },
   },
 };
diff --git a/core/src/themes/md/light.tokens.ts b/core/src/themes/md/light.tokens.ts
@@ -25,13 +25,12 @@ export const lightTheme: LightTheme = {
     },
     IonRefresher: {
       nativeSpinnerBorder: '#ececec', // Available only in md
-      nativeSpinnerBg: '#ffffff', // Available only in md
+      nativeSpinnerBg: defaultColors.white, // Available only in md
     },
     IonTabBar: {
       borderColor: 'var(--ion-tab-bar-border-color, var(--ion-border-color, rgba(0, 0, 0, 0.07)))',
     },
     IonToolbar: {
-      bg: 'var(--ion-toolbar-background, var(--color))',
       borderColor: 'var(--ion-toolbar-border-color, var(--ion-border-color, #c1c4cd))',
     },
   },
diff --git a/core/src/themes/native/native.theme.default.ios.scss b/core/src/themes/native/native.theme.default.ios.scss
@@ -16,6 +16,8 @@ $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary,
 
 // iOS Toolbar
 // --------------------------------------------------
+$toolbar-ios-background: var(--ion-components-ion-toolbar-bg);
+$toolbar-ios-border-color: var(--ion-components-ion-toolbar-border-color);
 $toolbar-ios-color: var(--ion-toolbar-color, $text-color);
 
 // iOS List & List Items
diff --git a/core/src/themes/native/native.theme.default.md.scss b/core/src/themes/native/native.theme.default.md.scss
@@ -18,6 +18,8 @@ $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary,
 
 // Material Design Toolbar
 // --------------------------------------------------
+$toolbar-md-background: var(--ion-components-ion-toolbar-bg);
+$toolbar-md-border-color: var(--ion-components-ion-toolbar-border-color);
 $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
 
 // Material Design List & List Items

Original file line number	Diff line number	Diff line change
`@@ -291,5 +291,5 @@`
`291`	`291`
`292`	`292`	`:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {`
`293`	`293`	`background: var(--ion-toolbar-color, var(--color));`
`294`		`- color: #{var(--ion-components-ion-toolbar-bg, var(--background), ion-color(primary, contrast))};`
	`294`	`+ color: var(--ion-components-ion-toolbar-activated-button-color);`
`295`	`295`	`}`
Original file line number	Diff line number	Diff line change
`@@ -240,6 +240,6 @@`
`240`	`240`	`// --------------------------------------------------`
`241`	`241`
`242`	`242`	`:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {`
`243`		`- background: var(--ion-components-ion-toolbar-bg, var(--color));`
	`243`	`+ background: var(--ion-components-ion-toolbar-activated-bg);`
`244`	`244`	`color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};`
`245`	`245`	`}`