fix(toolbar): style all slotted content in order not only buttons (#16617)

- style all slotted content to order properly in a toolbar, not only buttons
- removes duplicated sass variables
- use current color in select so icon will inherit toolbar color

BREAKING CHANGES

- Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity

core/src/components/buttons/buttons.ios.scss

@@ -94,25 +94,3 @@
 //   }
 // }
 
-// iOS Toolbar Button Placement
-// --------------------------------------------------
-
-:host([slot="start"]) {
-  order: map-get($toolbar-order-ios, buttons-start);
-}
-
-:host([slot="secondary"]) {
-  order: map-get($toolbar-order-ios, buttons-secondary);
-}
-
-:host([slot="primary"]) {
-  order: map-get($toolbar-order-ios, buttons-primary);
-
-  text-align: end;
-}
-
-:host([slot="end"]) {
-  order: map-get($toolbar-order-ios, buttons-end);
-
-  text-align: end;
-}

core/src/components/buttons/buttons.ios.vars.scss

@@ -1,40 +1,5 @@
 @import "../../themes/ionic.globals.ios";
+@import "../toolbar/toolbar.ios.vars";
 
-// iOS Toolbar
+// iOS Buttons
 // --------------------------------------------------
-
-/// @prop - Order of the toolbar elements
-$toolbar-order-ios: (
-  back-button: 0,
-  menu-toggle-start: 1,
-  buttons-start: 2,
-  buttons-secondary: 3,
-  content: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
-  menu-toggle-end: 7,
-);
-
-/// @prop - Font size of the toolbar button
-$toolbar-ios-button-font-size:                      17px !default;
-
-/// @prop - Text color of the toolbar button
-$toolbar-ios-button-color:                          ion-color(primary, base) !default;
-
-/// @prop - Background color of the toolbar button
-$toolbar-ios-button-background-color:               $toolbar-ios-background !default;
-
-/// @prop - Background color of the toolbar button when activated
-$toolbar-ios-button-background-color-activated:     $toolbar-ios-color-activated !default;
-
-/// @prop - Border radius of the toolbar button
-$toolbar-ios-button-border-radius:                  4px !default;
-
-/// @prop - Font weight of the strong toolbar button
-$toolbar-ios-button-strong-font-weight:             600 !default;
-
-/// @prop - Fill color of the toolbar button icon
-$toolbar-ios-button-icon-fill-color:                currentColor !default;
-
-/// @prop - Filter of the translucent toolbar
-$toolbar-ios-translucent-filter:                    saturate(180%) blur(20px) !default;

core/src/components/buttons/buttons.md.scss

@@ -87,27 +87,3 @@
 
   font-size: 1.8em;
 }
-
-
-// Material Design Toolbar Button Placement
-// --------------------------------------------------
-
-:host([slot="start"]) {
-  order: map-get($toolbar-order-md, buttons-start);
-}
-
-:host([slot="secondary"]) {
-  order: map-get($toolbar-order-md, buttons-secondary);
-}
-
-:host([slot="primary"]) {
-  order: map-get($toolbar-order-md, buttons-primary);
-
-  text-align: end;
-}
-
-:host([slot="end"]) {
-  order: map-get($toolbar-order-md, buttons-end);
-
-  text-align: end;
-}

core/src/components/buttons/buttons.md.vars.scss

@@ -1,37 +1,5 @@
 @import "../../themes/ionic.globals.md";
+@import "../toolbar/toolbar.md.vars";
 
-// Material Design Toolbar
+// Material Design Buttons
 // --------------------------------------------------
-
-/// @prop - Order of the toolbar elements
-$toolbar-order-md: (
-  back-button: 0,
-  menu-toggle-start: 1,
-  buttons-start: 2,
-  content: 3,
-  buttons-secondary: 4,
-  buttons-primary: 5,
-  buttons-end: 6,
-  menu-toggle-end: 7,
-);
-
-/// @prop - Font size of the toolbar button
-$toolbar-md-button-font-size:                     14px !default;
-
-/// @prop - Text color of the toolbar button
-$toolbar-md-button-color:                         $toolbar-md-color !default;
-
-/// @prop - Background color of the toolbar button
-$toolbar-md-button-background-color:              $toolbar-md-background !default;
-
-/// @prop - Background color of the toolbar button when activated
-$toolbar-md-button-background-color-activated:    $toolbar-md-color-activated !default;
-
-/// @prop - Border radius of the toolbar button
-$toolbar-md-button-border-radius:                 2px !default;
-
-/// @prop - Fill color of the toolbar button icon
-$toolbar-md-button-icon-fill-color:               currentColor !default;
-
-/// @prop - Font weight of the strong toolbar button
-$toolbar-md-button-strong-font-weight:            bold !default;