fix(toolbar): add and document custom properties

ionic-team · Aug 8, 2018 · dd114ff · dd114ff
1 parent e37ff08
commit dd114ff
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 11 deletions.
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
@@ -62,6 +62,22 @@ The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
 
 
+## CSS Custom Properties
+
+| Name               | Description                       |
+| ------------------ | --------------------------------- |
+| `--background`     | Background of the toolbar         |
+| `--border-color`   | Color of the toolbar border       |
+| `--border-style`   | Style of the toolbar border       |
+| `--border-width`   | Width of the toolbar border       |
+| `--color`          | Color of the toolbar text         |
+| `--min-height`     | Minimum height of the toolbar     |
+| `--opacity`        | Opacity of the toolbar background |
+| `--padding-bottom` | Bottom padding of the toolbar     |
+| `--padding-end`    | End padding of the toolbar        |
+| `--padding-start`  | Start padding of the toolbar      |
+| `--padding-top`    | Top padding of the toolbar        |
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/toolbar/test/standalone/index.html b/core/src/components/toolbar/test/standalone/index.html
@@ -49,11 +49,20 @@
   <ion-toolbar color="dark">
     <ion-title>Dark</ion-title>
   </ion-toolbar>
+
+  <ion-toolbar class="custom">
+    <ion-title>Custom</ion-title>
+  </ion-toolbar>
 </body>
 
 <style>
   body {
     margin: 0;
   }
+
+  .custom {
+    --background: papayawhip;
+    --color: crimson;
+  }
 </style>
 </html>
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
@@ -5,10 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$toolbar-ios-background-color};
-  --ion-color-contrast: #{$toolbar-ios-text-color};
+  --background: #{$toolbar-ios-background-color};
+  --color: #{$toolbar-ios-text-color};
   --border-color: #{$toolbar-ios-border-color};
-  --translucent-filter: #{$toolbar-ios-translucent-filter};
   --padding-top: #{$toolbar-ios-padding};
   --padding-bottom: #{$toolbar-ios-padding};
   --padding-start: #{$toolbar-ios-padding};

diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -36,9 +36,6 @@ $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;
-
 
 // iOS Title
 // --------------------------------------------------

diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
@@ -5,16 +5,16 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$toolbar-md-background-color};
-  --ion-color-contrast: #{$toolbar-md-text-color};
+  --background: #{$toolbar-md-background-color};
+  --color: #{$toolbar-md-text-color};
   --border-color: #{$toolbar-md-border-color};
   --padding-top: #{$toolbar-md-padding};
   --padding-bottom: #{$toolbar-md-padding};
   --padding-start: #{$toolbar-md-padding};
   --padding-end: #{$toolbar-md-padding};
   --min-height: #{$toolbar-md-height};
 
-  font-family: #{$toolbar-md-font-family};
+  font-family: $toolbar-md-font-family;
 }
 
 

diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss
@@ -4,9 +4,21 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the toolbar
+   * @prop --border-color: Color of the toolbar border
+   * @prop --border-style: Style of the toolbar border
+   * @prop --border-width: Width of the toolbar border
+   * @prop --color: Color of the toolbar text
+   * @prop --min-height: Minimum height of the toolbar
+   * @prop --opacity: Opacity of the toolbar background
+   * @prop --padding-bottom: Bottom padding of the toolbar
+   * @prop --padding-end: End padding of the toolbar
+   * @prop --padding-start: Start padding of the toolbar
+   * @prop --padding-top: Top padding of the toolbar
+   */
   --border-width: 0;
   --border-style: solid;
-  --background: #{current-color(base)};
   --opacity: 1;
 
   @include font-smoothing();
@@ -15,14 +27,22 @@
 
   width: 100%;
 
-  color: #{current-color(contrast)};
+  color: var(--color);
 
   contain: content;
 
   z-index: $z-index-toolbar;
   box-sizing: border-box;
 }
 
+:host(.ion-color) {
+  color: current-color(contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: current-color(base);
+}
+
 .toolbar-container {
   @include padding(
     var(--padding-top),