feat(toolbar): use components variable

thetaPC · thetaPC · commit 08e834917891 · 2025-12-03T20:35:19.000-08:00
diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss
@@ -293,7 +293,7 @@ ion-ripple-effect {
 
 :host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: #{var(--ion-toolbar-color, var(--background))};
-  color: #{var(--ion-toolbar-background, var(--color))};
+  color: #{var(--ion-components-ion-toolbar-bg, (var(--color)))};
 }
 
 // Button Badge
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-toolbar-background, var(--background), ion-color(primary, contrast))};
+  color: #{var(--ion-components-ion-toolbar-bg, var(--background), ion-color(primary, contrast))};
 }
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-toolbar-background, var(--color));
+  background: var(--ion-components-ion-toolbar-bg, var(--color));
   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: #{$toolbar-md-background};
+  --color: var(--ion-components-ion-toolbar-bg);
   --background: #{$toolbar-md-color};
   --background-activated: transparent;
   --background-focused: currentColor;
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
@@ -17,238 +17,14 @@
   <body>
     <ion-app>
       <ion-header>
-        <ion-toolbar>
-          <ion-title> Toolbar </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-title> This is the title that never ends. It just goes on and on my friend. </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> Toolbar </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> Toolbar with just start button </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="end">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> Toolbar with just end button </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-text slot="end"> Small </ion-text>
-          <ion-title> Toolbar with start content that's long and end content that's short </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-text slot="start"> Small </ion-text>
-          <ion-buttons slot="end">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> Toolbar with start content that's long and end content that's short </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> This is a long title with buttons. It just goes on and on my friend. </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="end">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title> This is a long title with start and end buttons. It just goes on and on my friend. </ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Defaults</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button class="ion-activated">
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" class="ion-activated">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Defaults.activated</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="solid">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="solid">
-              <ion-icon slot="start" name="person-circle"></ion-icon>
-              Solid
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid" color="secondary">
-              Help
-              <ion-icon slot="end" name="help-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button href="#" fill="solid" class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="solid" class="ion-activated">
-              <ion-icon slot="start" name="person-circle"></ion-icon>
-              Solid
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid Activated</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid" color="secondary" class="ion-activated">
-              Help
-              <ion-icon slot="end" name="help-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="outline">
-              <ion-icon slot="start" name="star"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" fill="outline">
-              Info
-              <ion-icon slot="end" name="information-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline" class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="outline" class="ion-activated">
-              <ion-icon slot="start" name="star"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" fill="outline" class="ion-activated">
-              Info
-              <ion-icon slot="end" name="information-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline.activated</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button> Go Back </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button href="#"> Edit </ion-button>
-          </ion-buttons>
-          <ion-title>Text Only</ion-title>
-        </ion-toolbar>
-      </ion-header>
+            <ion-toolbar>
+              <ion-button fill="solid">
+                <ion-icon slot="start" name="person-circle"></ion-icon>
+                Solid
+              </ion-button>
+              <span>Solid</span>
+            </ion-toolbar>
+          </ion-header>
 
       <ion-content id="content" fullscreen="true" class="ion-padding">
         <h1>Content</h1>
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$toolbar-md-background};
+  --background: var(--ion-components-ion-toolbar-bg);
   --color: #{$toolbar-md-color};
   --border-color: var(--ion-components-ion-toolbar-border-color);
   --padding-top: 0;
diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss
@@ -135,6 +135,7 @@ $colors: (
     --ion-text-color-step-850: #262626;
     --ion-text-color-step-900: #1a1a1a;
     --ion-text-color-step-950: #0d0d0d;
+    // TODO(FW-4004): Implement the following components to the dark theme in ionic modular
     --ion-item-background: #000000;
     --ion-card-background: #1c1c1d;
   }
@@ -184,6 +185,7 @@ $colors: (
     --ion-text-color-step-850: #363636;
     --ion-text-color-step-900: #2a2a2a;
     --ion-text-color-step-950: #1e1e1e;
+    // TODO(FW-4004): Implement the following components to the dark theme in ionic modular
     --ion-item-background: #1e1e1e;
     --ion-toolbar-background: #1f1f1f;
     --ion-tab-bar-background: #1f1f1f;
diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts
@@ -23,7 +23,7 @@ export const darkTheme: DarkTheme = {
       background: '#1c1c1d',
     },
     IonItem: {
-      background: '#000000',
+      bg: '#000000',
     },
     IonModal: {
       bg: 'var(--ion-color-gray-100)',
diff --git a/core/src/themes/md/dark.tokens.ts b/core/src/themes/md/dark.tokens.ts
@@ -22,13 +22,13 @@ export const darkTheme: DarkTheme = {
 
   components: {
     IonCard: {
-      background: '#1e1e1e',
+      bg: '#1e1e1e',
     },
     IonItem: {
       background: '#1e1e1e',
     },
     IonToolbar: {
-      background: '#1f1f1f',
+      bg: '#1f1f1f',
     },
     IonTabBar: {
       background: '#1f1f1f',

Original file line number	Diff line number	Diff line change
`@@ -293,7 +293,7 @@ ion-ripple-effect {`
`293`	`293`
`294`	`294`	`:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {`
`295`	`295`	`background: #{var(--ion-toolbar-color, var(--background))};`
`296`		`- color: #{var(--ion-toolbar-background, var(--color))};`
	`296`	`+ color: #{var(--ion-components-ion-toolbar-bg, (var(--color)))};`
`297`	`297`	`}`
`298`	`298`
`299`	`299`	`// Button Badge`
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-toolbar-background, var(--background), ion-color(primary, contrast))};`
	`294`	`+ color: #{var(--ion-components-ion-toolbar-bg, var(--background), ion-color(primary, contrast))};`
`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-toolbar-background, var(--color));`
	`243`	`+ background: var(--ion-components-ion-toolbar-bg, var(--color));`
`244`	`244`	`color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};`
`245`	`245`	`}`