Add 0.12 opacity white and black.

angular · Feb 18, 2017 · 4c71669 · 4c71669
1 parent 1818993
commit 4c71669
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 38 deletions.
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -3,20 +3,10 @@
 
 // Applies a focus style to an md-button-toggle element for each of the supported palettes.
 @mixin _mat-button-toggle-focus-color($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-
-  &.mat-primary .mat-button-toggle-focus-overlay {
-    background-color: mat-color($primary, 0.12);
-  }
-
-  &.mat-accent .mat-button-toggle-focus-overlay {
-    background-color: mat-color($accent, 0.12);
-  }
+  $foreground: map-get($theme, foreground);
 
-  &.mat-warn .mat-button-toggle-focus-overlay {
-    background-color: mat-color($warn, 0.12);
+  .mat-button-toggle-focus-overlay {
+    background-color: mat-color($foreground, divider);
   }
 }
 

diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
@@ -1,5 +1,6 @@
-@import '../core/style/elevation';
 @import '../core/a11y/a11y';
+@import '../core/style/elevation';
+@import '../core/style/layout-common';
 
 $mat-button-toggle-padding: 0 16px !default;
 $mat-button-toggle-line-height: 36px !default;
@@ -58,22 +59,8 @@ $mat-button-toggle-border-radius: 2px !default;
 // element, however we use a proper DOM element in order to be able to disable the default
 // touch action. This makes the buttons more responsive on touch devices.
 .mat-button-toggle-focus-overlay {
-  // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-  // black, 12% opacity shade over the normal color (for both light and dark themes).
-  background-color: rgba(black, 0.12);
   border-radius: inherit;
   pointer-events: none;
   opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  @include cdk-high-contrast {
-    // Note that IE will render this in the same way, no
-    // matter whether the theme is light or dark. This helps
-    // with the readability of focused buttons.
-    background-color: rgba(white, 0.5);
-  }
+  @include mat-fill;
 }
diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts
@@ -14,15 +14,13 @@ import {
     MdButtonToggleGroupMultiple,
     MdButtonToggleChange, MdButtonToggleModule,
 } from './button-toggle';
-import {FocusOriginMonitor} from '../core';
 
 
 describe('MdButtonToggle', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MdButtonToggleModule.forRoot(), FormsModule, ReactiveFormsModule],
-      providers: [FocusOriginMonitor],
       declarations: [
         ButtonTogglesInsideButtonToggleGroup,
         ButtonToggleGroupWithNgModel,

diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
@@ -480,7 +480,7 @@ export class MdButtonToggle implements OnInit {
     CompatibilityModule,
   ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
-  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
+  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, FocusOriginMonitor]
 })
 export class MdButtonToggleModule {
   /** @deprecated */

diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
@@ -8,6 +8,8 @@
 
 $black-87-opacity: rgba(black, 0.87);
 $white-87-opacity: rgba(white, 0.87);
+$black-12-opacity: rgba(black, 0.12);
+$white-12-opacity: rgba(white, 0.12);
 
 $mat-red: (
   50: #ffebee,
@@ -649,7 +651,7 @@ $mat-light-theme-background: (
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
-  disabled-button: rgba(black, 0.12),
+  disabled-button: $black-12-opacity,
   raised-button: white,
 );
 
@@ -661,15 +663,15 @@ $mat-dark-theme-background: (
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($mat-grey, 800),
   dialog:     map_get($mat-grey, 800),
-  disabled-button: rgba(white, 0.12),
+  disabled-button: $white-12-opacity,
   raised-button: map-get($mat-grey, 800),
 );
 
 // Foreground palette for light themes.
 $mat-light-theme-foreground: (
   base:            black,
-  divider:         rgba(black, 0.12),
-  dividers:        rgba(black, 0.12),
+  divider:         $black-12-opacity,
+  dividers:        $black-12-opacity,
   disabled:        rgba(black, 0.38),
   disabled-button: rgba(black, 0.38),
   disabled-text:   rgba(black, 0.38),
@@ -683,8 +685,8 @@ $mat-light-theme-foreground: (
 // Foreground palette for dark themes.
 $mat-dark-theme-foreground: (
   base:            white,
-  divider:         rgba(white, 0.12),
-  dividers:        rgba(white, 0.12),
+  divider:         $white-12-opacity,
+  dividers:        $white-12-opacity,
   disabled:        rgba(white, 0.3),
   disabled-button: rgba(white, 0.3),
   disabled-text:   rgba(white, 0.3),