fix(button): vanilla color is usable

ionic-team · Sep 14, 2018 · b8b9b83 · b8b9b83
1 parent b9e42eb
commit b8b9b83
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
@@ -43,6 +43,8 @@
 
   display: inline-block;
 
+  color: var(--color);
+
   font-family: $font-family-base;
 
   text-align: center;
@@ -212,7 +214,6 @@
   outline: none;
 
   background: var(--background);
-  color: var(--color);
 
   line-height: 1;
 

diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
@@ -45,20 +45,20 @@
 // --------------------------------------------------
 
 ::slotted(*) .button-outline {
-  --color: #{$toolbar-md-text-color};
-  --color-activated: #{$toolbar-md-text-color};
+  --color: currentColor;
+  --color-activated: currentColor;
   --background: transparent;
   --background-activated: transparent;
-  --border-color: #{$toolbar-md-text-color};
+  --border-color: currentColor;
 }
 
 
 // Material Design Toolbar Clear Button
 // --------------------------------------------------
 
 ::slotted(*) .button-clear {
-  --color: #{$toolbar-md-text-color};
-  --color-activated: #{$toolbar-md-text-color};
+  --color: currentColor;
+  --color-activated: currentColor;
   --background: transparent;
 }
 

diff --git a/core/src/components/toolbar/test/colors/index.html b/core/src/components/toolbar/test/colors/index.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
+
+  <style>
+    .custom-toolbar {
+      --background: black;
+      --color: white;
+    }
+  </style>
 </head>
 <body>
   <ion-app>
@@ -150,6 +157,20 @@
               </ion-buttons>
           <ion-title>Dark</ion-title>
         </ion-toolbar>
+
+        <ion-toolbar class="custom-toolbar">
+          <ion-buttons slot="start">
+              <ion-button color="danger">
+                <ion-icon slot="icon-only" name="add"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+          <ion-buttons slot="primary">
+              <ion-button>
+                <ion-icon slot="icon-only" name="more"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+        <ion-title>Dark</ion-title>
+      </ion-toolbar>
       </ion-content>
 
   </ion-app>