From 14e7105cf87e6b9bb9978abf27581ff69d8ffff1 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 9 Sep 2016 18:49:12 -0700 Subject: [PATCH 1/9] wip theming mega change --- .../button-toggle/_button-toggle-theme.scss | 14 + src/lib/button-toggle/button-toggle.scss | 15 +- src/lib/button/_button-base.scss | 37 +- src/lib/button/_button-theme.scss | 98 ++- src/lib/button/button.scss | 2 - src/lib/card/_card-theme.scss | 17 + src/lib/card/card.scss | 8 +- src/lib/checkbox/_checkbox-theme.scss | 64 ++ src/lib/checkbox/checkbox.scss | 50 +- src/lib/core/overlay/overlay.scss | 8 +- src/lib/core/style/_default-theme.scss | 13 - src/lib/core/style/_elevation.scss | 1 + src/lib/core/style/_ripple.scss | 3 +- src/lib/core/style/_theme-functions.scss | 62 -- src/lib/core/style/_variables.scss | 2 +- src/lib/core/{style => theming}/_palette.scss | 641 +++++++++--------- src/lib/core/theming/_theming.scss | 94 +++ .../core/theming/prebuilt/indigo-pink.scss | 9 + src/lib/core/typography/_typography.scss | 6 + src/lib/dialog/_dialog-theme.scss | 11 + src/lib/dialog/dialog-container.scss | 12 +- src/lib/dialog/dialog-container.ts | 5 +- src/lib/grid-list/_grid-list-theme.scss | 6 + src/lib/grid-list/grid-list.scss | 3 +- src/lib/icon/_icon-theme.scss | 6 + src/lib/icon/icon.scss | 8 +- src/lib/input/_input-theme.scss | 64 ++ src/lib/input/input.scss | 46 +- src/lib/list/_list-theme.scss | 28 + src/lib/list/list.scss | 24 +- src/lib/menu/_menu-theme.scss | 24 + src/lib/menu/menu.scss | 21 +- src/lib/progress-bar/_progress-bar-theme.scss | 79 +++ src/lib/progress-bar/progress-bar.scss | 84 +-- .../_progress-circle-theme.scss | 23 + src/lib/progress-circle/progress-circle.scss | 16 +- src/lib/radio/_radio-theme.scss | 31 + src/lib/radio/radio.scss | 20 +- src/lib/sidenav/_sidenav-theme.scss | 30 + src/lib/sidenav/sidenav-transitions.scss | 4 +- src/lib/sidenav/sidenav.scss | 22 +- src/lib/slide-toggle/_slide-toggle-theme.scss | 29 + src/lib/slide-toggle/slide-toggle.scss | 26 +- src/lib/slider/_slider-theme.scss | 5 + src/lib/tabs/_tab-group-theme.scss | 5 + src/lib/tabs/tab-group.scss | 4 +- src/lib/toolbar/_toolbar-theme.scss | 5 + src/lib/toolbar/toolbar.scss | 6 +- src/lib/tooltip/_tooltip-theme.scss | 5 + src/lib/tooltip/tooltip.scss | 7 +- 50 files changed, 1042 insertions(+), 761 deletions(-) create mode 100644 src/lib/button-toggle/_button-toggle-theme.scss create mode 100644 src/lib/card/_card-theme.scss create mode 100644 src/lib/checkbox/_checkbox-theme.scss delete mode 100644 src/lib/core/style/_default-theme.scss delete mode 100644 src/lib/core/style/_theme-functions.scss rename src/lib/core/{style => theming}/_palette.scss (92%) create mode 100644 src/lib/core/theming/_theming.scss create mode 100644 src/lib/core/theming/prebuilt/indigo-pink.scss create mode 100644 src/lib/core/typography/_typography.scss create mode 100644 src/lib/dialog/_dialog-theme.scss create mode 100644 src/lib/grid-list/_grid-list-theme.scss create mode 100644 src/lib/icon/_icon-theme.scss create mode 100644 src/lib/input/_input-theme.scss create mode 100644 src/lib/list/_list-theme.scss create mode 100644 src/lib/menu/_menu-theme.scss create mode 100644 src/lib/progress-bar/_progress-bar-theme.scss create mode 100644 src/lib/progress-circle/_progress-circle-theme.scss create mode 100644 src/lib/radio/_radio-theme.scss create mode 100644 src/lib/sidenav/_sidenav-theme.scss create mode 100644 src/lib/slide-toggle/_slide-toggle-theme.scss create mode 100644 src/lib/slider/_slider-theme.scss create mode 100644 src/lib/tabs/_tab-group-theme.scss create mode 100644 src/lib/toolbar/_toolbar-theme.scss create mode 100644 src/lib/tooltip/_tooltip-theme.scss diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss new file mode 100644 index 000000000000..23ede0f16c3b --- /dev/null +++ b/src/lib/button-toggle/_button-toggle-theme.scss @@ -0,0 +1,14 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-button-toggle-theme($theme) { + $foreground: map-get($theme, foreground); + + .md-button-toggle-checked .md-button-toggle-label-content { + background-color: md-color($md-grey, 300); + } + .md-button-toggle-disabled .md-button-toggle-label-content { + background-color: md-color($foreground, disabled); + } +} diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss index d85806a96053..8584f28d7f8a 100644 --- a/src/lib/button-toggle/button-toggle.scss +++ b/src/lib/button-toggle/button-toggle.scss @@ -1,7 +1,6 @@ -@import 'elevation'; -@import 'default-theme'; -@import 'palette'; -@import 'mixins'; +@import '../core/style/elevation'; +@import '../core/style/mixins'; + $md-button-toggle-padding: 0 16px !default; $md-button-toggle-line-height: 36px !default; @@ -16,14 +15,8 @@ md-button-toggle-group { white-space: nowrap; } - -.md-button-toggle-checked .md-button-toggle-label-content { - background-color: md-color($md-grey, 300); -} - .md-button-toggle-disabled .md-button-toggle-label-content { - background-color: md-color($md-foreground, disabled); - cursor: not-allowed; + cursor: default; } md-button-toggle { diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss index 3d705629f735..f466e513d7bd 100644 --- a/src/lib/button/_button-base.scss +++ b/src/lib/button/_button-base.scss @@ -1,11 +1,25 @@ - -@import 'variables'; -@import 'elevation'; -@import 'button-mixins'; - -// TODO(jelbourn): This goes away. -@import 'default-theme'; -@import 'button-theme'; +@import '../core/style/variables'; +@import '../core/style/elevation'; +@import '../core/style/button-mixins'; + + +/** Applies a focus style to an md-button element. */ +@mixin md-button-focus { + &::after { + // 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). + // We do this by placing an :after psuedo-element with the appropriate shade over the button. + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; + background-color: rgba(black, 0.12); + border-radius: inherit; + pointer-events: none; + } +} // Flat and raised button standards $md-button-padding: 0 16px !default; @@ -29,8 +43,6 @@ $md-mini-fab-padding: 8px !default; // Applies base styles to all button types. %md-button-base { - @include md-button-theme('color'); - box-sizing: border-box; position: relative; @@ -71,10 +83,7 @@ $md-mini-fab-padding: 8px !default; @extend %md-button-base; @include md-elevation(2); - @include md-button-theme('color', default-contrast); - @include md-button-theme('background-color'); - background-color: md-color($md-background, background); // Force hardware acceleration. transform: translate3d(0, 0, 0); @@ -97,8 +106,6 @@ $md-mini-fab-padding: 8px !default; min-width: 0; border-radius: $md-fab-border-radius; - background-color: md-color($md-accent); - color: md-color($md-accent, default-contrast); width: $size; height: $size; padding: 0; diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index b9f29887c6fa..c6aa9e4908b1 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -1,49 +1,75 @@ -/** Applies a property to an md-button element for each of the supported palettes. */ -@mixin md-button-theme($property, $color: 'default', $opacity: 1) { - &.md-primary { - #{$property}: md-color($md-primary, $color, $opacity); - } - &.md-accent { - #{$property}: md-color($md-accent, $color, $opacity); - } - &.md-warn { - #{$property}: md-color($md-warn, $color, $opacity); +@import '../core/theming/theming'; + + +@mixin md-button-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + /** Applies a focus style to an md-button element for each of the supported palettes. */ + @mixin button-focus-color() { + &.md-primary::after { + background-color: md-color($primary, 0.12); + } + + &.md-accent::after { + background-color: md-color($accent, 0.12); + } + + &.md-warn::after { + background-color: md-color($warn, 0.12); + } } - &.md-primary, &.md-accent, &.md-warn, &[disabled] { - &[disabled] { - $palette: if($property == 'color', $md-foreground, $md-background); - #{$property}: md-color($palette, disabled-button); + /** Applies a property to an md-button element for each of the supported palettes. */ + @mixin button-theme-color($property, $color: 'default', $opacity: 1) { + &.md-primary { + #{$property}: md-color($primary, $color, $opacity); + } + &.md-accent { + #{$property}: md-color($accent, $color, $opacity); + } + &.md-warn { + #{$property}: md-color($warn, $color, $opacity); + } + + &.md-primary, &.md-accent, &.md-warn, &[disabled] { + &[disabled] { + $palette: if($property == 'color', $foreground, $background); + #{$property}: md-color($palette, disabled-button); + } } } -} -/** Applies a focus style to an md-button element for each of the supported palettes. */ -@mixin md-button-focus { - &::after { - // 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). - // We do this by placing an :after psuedo-element with the appropriate shade over the button. - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - content: ''; - background-color: rgba(black, 0.12); - border-radius: inherit; - pointer-events: none; + + [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] { + &.md-button-focus { + @include md-button-focus-color(); + } } - &.md-primary::after { - background-color: md-color($md-primary, 0.12); + [md-button], [md-icon-button] { + @include button-theme-color('color'); + + // Only flat buttons and icon buttons (not raised or fabs) have a hover style. + // Use the same visual treatment for hover as for focus. + &:hover { + @include md-button-focus-color(); + } } - &.md-accent::after { - background-color: md-color($md-accent, 0.12); + [md-raised-button], [md-fab], [md-mini-fab] { + @include button-theme-color('color', default-contrast); + @include button-theme-color('background-color'); + background-color: md-color($background, background); } - &.md-warn::after { - background-color: md-color($md-warn, 0.12); + [md-fab], [md-mini-fab] { + background-color: md-color($accent); + color: md-color($accent, default-contrast); } } + + diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 0dec470956ab..5f1a78b4755c 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -33,8 +33,6 @@ } [md-icon-button] { - @extend %md-button-base; - min-width: 0; padding: 0; diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss new file mode 100644 index 000000000000..d00e76412edd --- /dev/null +++ b/src/lib/card/_card-theme.scss @@ -0,0 +1,17 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-card-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + md-card { + background: md-color($background, card); + color: md-color($foreground, base); + } + + md-card-subtitle { + color: md-color($foreground, secondary-text); + } +} diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss index 6d8683269b80..7dfe13a78b6c 100644 --- a/src/lib/card/card.scss +++ b/src/lib/card/card.scss @@ -1,7 +1,6 @@ +@import '../core/style/variables'; +@import '../core/style/elevation'; -@import 'variables'; -@import 'elevation'; -@import 'default-theme'; // TODO: Remove this $md-card-default-padding: 24px !default; $md-card-mobile-padding: 24px 16px !default; @@ -16,8 +15,6 @@ md-card { padding: $md-card-default-padding; border-radius: $md-card-border-radius; font-family: $md-font-family; - background: md-color($md-background, card); - color: md-color($md-foreground, base); } md-card:hover { @@ -43,7 +40,6 @@ md-card-title { md-card-subtitle { @extend %md-card-section-base; font-size: $md-body-font-size-base; - color: md-color($md-foreground, secondary-text); } md-card-content { diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss new file mode 100644 index 000000000000..111a53112c73 --- /dev/null +++ b/src/lib/checkbox/_checkbox-theme.scss @@ -0,0 +1,64 @@ +@import '../core/theming/theming'; + + +@mixin md-checkbox-theme($theme) { + $is-dark-theme: map-get($theme, is-dark); + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $background: map-get($theme, background); + + + /** The color of the checkbox border. */ + $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default; + + /** The color of the checkbox's checkmark / mixedmark. */ + $checkbox-mark-color: md-color($background, background); + + /** The color that is used as the checkbox background when it is checked. */ + $checkbox-background-color: md-color($accent, 500); + + // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, + // this does not work well with elements layered on top of one another. To get around this we + // blend the colors together based on the base color and the theme background. + $white-30pct-opacity-on-dark: #686868; + $black-26pct-opacity-on-light: #b0b0b0; + $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light); + + .md-checkbox-frame { + border-color: $checkbox-border-color; + } + + .md-checkbox-checkmark { + fill: $checkbox-mark-color; + } + + .md-checkbox-checkmark-path { + // !important is needed here because a stroke must be set as an attribute on the SVG in order + // for line animation to work properly. + stroke: $checkbox-mark-color !important; + } + + .md-checkbox-mixedmark { + background-color: $checkbox-mark-color; + } + + .md-checkbox-indeterminate, .md-checkbox-checked { + .md-checkbox-background { + background-color: $checkbox-background-color; + } + } + + .md-checkbox-disabled { + &.md-checkbox-checked, &.md-checkbox-indeterminate { + .md-checkbox-background { + background-color: $disabled-color; + } + } + + &:not(.md-checkbox-checked) { + .md-checkbox-frame { + border-color: $disabled-color; + } + } + } +} diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 3c1ab171dbb3..a4b730332987 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -1,7 +1,7 @@ -@import 'default-theme'; -@import 'theme-functions'; -@import 'variables'; -@import 'mixins'; +@import '../core/theming/theming'; +@import '../core/style/variables'; +@import '../core/style/mixins'; + /** The width/height of the checkbox element. */ $md-checkbox-size: $md-toggle-size !default; @@ -9,12 +9,6 @@ $md-checkbox-size: $md-toggle-size !default; $md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default; /** The width of the checkbox border shown when the checkbox is unchecked. */ $md-checkbox-border-width: 2px; -/** The color of the checkbox border. */ -$md-checkbox-border-color: if($md-is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default; -/** The color of the checkbox's checkmark / mixedmark. */ -$md-checkbox-mark-color: md-color($md-background, background); -/** The color that is used as the checkbox background when it is checked. */ -$md-checkbox-background-color: md-color($md-accent, 500); /** The base duration used for the majority of transitions for the checkbox. */ $md-checkbox-transition-duration: 90ms; /** The amount of spacing between the checkbox and its label. */ @@ -258,7 +252,7 @@ md-checkbox { @extend %md-checkbox-outer-box; background-color: transparent; - border: $md-checkbox-border-width solid $md-checkbox-border-color; + border: $md-checkbox-border-width solid; transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function; will-change: border-color; } @@ -279,14 +273,10 @@ md-checkbox { @extend %md-checkbox-cover-element; @extend %md-checkbox-mark; - fill: $md-checkbox-mark-color; width: 100%; } .md-checkbox-checkmark-path { - // !important is needed here because a stroke must be set as an attribute on the SVG in order - // for line animation to work properly. - stroke: $md-checkbox-mark-color !important; stroke: { dashoffset: $_md-checkbox-mark-path-length; dasharray: $_md-checkbox-mark-path-length; @@ -297,7 +287,6 @@ md-checkbox { .md-checkbox-mixedmark { @extend %md-checkbox-mark; - background-color: $md-checkbox-mark-color; height: floor($md-checkbox-mark-stroke-size); opacity: 0; transform: scaleX(0) rotate(0deg); @@ -332,17 +321,9 @@ md-checkbox { .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } - - .md-checkbox-background { - background-color: $md-checkbox-background-color; - } } .md-checkbox-indeterminate { - .md-checkbox-background { - background-color: $md-checkbox-background-color; - } - .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); @@ -366,28 +347,7 @@ md-checkbox { } .md-checkbox-disabled { - // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors, - // this does not work well with elements layered on top of one another. To get around this we - // blend the colors together based on the base color and the theme background. - $white-30pct-opacity-on-dark-theme: #686868; - $black-26pct-opacity-on-light-theme: #b0b0b0; - $disabled-color: if( - $md-is-dark-theme, $white-30pct-opacity-on-dark-theme, $black-26pct-opacity-on-light-theme); - cursor: default; - - &.md-checkbox-checked, - &.md-checkbox-indeterminate { - .md-checkbox-background { - background-color: $disabled-color; - } - } - - &:not(.md-checkbox-checked) { - .md-checkbox-frame { - border-color: $disabled-color; - } - } } .md-checkbox-anim { diff --git a/src/lib/core/overlay/overlay.scss b/src/lib/core/overlay/overlay.scss index 473b7111539d..90ac11f87517 100644 --- a/src/lib/core/overlay/overlay.scss +++ b/src/lib/core/overlay/overlay.scss @@ -1,12 +1,12 @@ -@import 'variables'; -@import 'palette'; +@import '../style/variables'; +@import '../theming/palette'; +@import '../theming/theming'; + $md-backdrop-color: md-color($md-grey, 900); // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit. -@import 'variables'; - /** The overlay-container is an invisible element which contains all individual overlays. */ .md-overlay-container { position: absolute; diff --git a/src/lib/core/style/_default-theme.scss b/src/lib/core/style/_default-theme.scss deleted file mode 100644 index 34149400a25b..000000000000 --- a/src/lib/core/style/_default-theme.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import 'theme-functions'; -@import 'palette'; - - -// Person creating a theme writes variables like this: -$md-is-dark-theme: false; - - -$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes); -$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes); -$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes); -$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground); -$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background); diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss index c929bb0f1847..78701b44ec4d 100644 --- a/src/lib/core/style/_elevation.scss +++ b/src/lib/core/style/_elevation.scss @@ -1,5 +1,6 @@ @import 'variables'; + /** * A collection of mixins and CSS classes that can be used to apply elevation to a material * element. diff --git a/src/lib/core/style/_ripple.scss b/src/lib/core/style/_ripple.scss index 61355366f2e7..7700f8d2f222 100644 --- a/src/lib/core/style/_ripple.scss +++ b/src/lib/core/style/_ripple.scss @@ -1,5 +1,4 @@ -@import 'default-theme'; -@import 'theme-functions'; +@import '../core/theming/theming'; $md-ripple-focused-opacity: 0.1; $md-ripple-background-fade-duration: 300ms; diff --git a/src/lib/core/style/_theme-functions.scss b/src/lib/core/style/_theme-functions.scss deleted file mode 100644 index 30c4002b7391..000000000000 --- a/src/lib/core/style/_theme-functions.scss +++ /dev/null @@ -1,62 +0,0 @@ -// ** Two main functions for users ** -// md-palette: used for defining your theme in terms of Material hues. -// md-color: apply colors to components from the palette. Consumes the output of md-palette - -// Implement the rem unit with SCSS so we don't have to actually set a font-size on -// the user's body element. -@function rem($multiplier) { - $font-size: 10px; - @return $multiplier * $font-size; -} - -// For a given hue in a palette, return the contrast color from the map of contrast palettes. -@function md-contrast($color-map, $hue, $contrast-color-map) { - @return map-get(map-get($contrast-color-map, $color-map), $hue); -} - - -// Creates a map of hues to colors for a theme. -// $color-map -// $primary -// $lighter -// $darker -@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) { - $result: map_merge($color-map, ( - default: map-get($color-map, $primary), - lighter: map-get($color-map, $lighter), - darker: map-get($color-map, $darker), - - default-contrast: md-contrast($color-map, $primary, $contrast-color-map), - lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map), - darker-contrast: md-contrast($color-map, $darker, $contrast-color-map) - )); - - // For each hue in the palette, add a "-contrast" color to the map. - @each $hue, $color in $color-map { - $result: map_merge($result, ( - '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map) - )); - } - - @return $result; -} - -// Gets a color for a material design component. -// $color-map: a map of {key: color}. -// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default' -// If $hue-key is a number between 0 and 1, it will be treated as $opacity. -// $opacity: the opacity to apply to the color. -@function md-color($color-map, $hue-key: default, $opacity: 1) { - // If hueKey is a number between zero and one, then it actually contains an - // opacity value, so recall this function with the default hue and that given opacity. - @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 { - @return md-color($color-map, default, $hue-key); - } - - $color: map-get($color-map, $hue-key); - $opacity: if(opacity($color) < 1, opacity($color), $opacity); - - @return rgba($color, $opacity); -} - - diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss index 818d33755804..b66d335e7abd 100644 --- a/src/lib/core/style/_variables.scss +++ b/src/lib/core/style/_variables.scss @@ -1,4 +1,4 @@ -@import 'theme-functions'; +@import '../typography/typography'; // Typography diff --git a/src/lib/core/style/_palette.scss b/src/lib/core/theming/_palette.scss similarity index 92% rename from src/lib/core/style/_palette.scss rename to src/lib/core/theming/_palette.scss index e64a111a3bae..e1cd6e23577c 100644 --- a/src/lib/core/style/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -1,5 +1,14 @@ -// Color palettes from the Material Design spec. -// See https://www.google.com/design/spec/style/color.html +/** + * Color palettes from the Material Design spec. + * See https://www.google.com/design/spec/style/color.html + * + * Contrast colors are hard-coded because it is too difficult (probably impossible) to + * calculate them. These contrast colors are pulled from the public Material Design spec swatches. + * While the contrast colors in the spec are not perscriptive, we use them for convenience. + */ + +$black-87-opacity: rgba(black, 0.87); +$white-87-opacity: rgba(white, 0.87); $md-red: ( 50: #ffebee, @@ -16,6 +25,22 @@ $md-red: ( A200: #ff5252, A400: #ff1744, A700: #d50000, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) ); $md-pink: ( @@ -33,6 +58,22 @@ $md-pink: ( A200: #ff4081, A400: #f50057, A700: #c51162, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) ); $md-purple: ( @@ -50,6 +91,22 @@ $md-purple: ( A200: #e040fb, A400: #d500f9, A700: #aa00ff, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: white, + 400: white, + 500: $white-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) ); $md-deep-purple: ( @@ -67,6 +124,22 @@ $md-deep-purple: ( A200: #7c4dff, A400: #651fff, A700: #6200ea, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: white, + 400: white, + 500: $white-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: $white-87-opacity, + A700: $white-87-opacity, + ) ); $md-indigo: ( @@ -84,6 +157,22 @@ $md-indigo: ( A200: #536dfe, A400: #3d5afe, A700: #304ffe, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: white, + 400: white, + 500: $white-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: $white-87-opacity, + ) ); $md-blue: ( @@ -101,6 +190,22 @@ $md-blue: ( A200: #448aff, A400: #2979ff, A700: #2962ff, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: white, + A400: white, + A700: white, + ) ); $md-light-blue: ( @@ -118,6 +223,22 @@ $md-light-blue: ( A200: #40c4ff, A400: #00b0ff, A700: #0091ea, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: white, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: white, + ) ); $md-cyan: ( @@ -135,6 +256,22 @@ $md-cyan: ( A200: #18ffff, A400: #00e5ff, A700: #00b8d4, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: white, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-teal: ( @@ -152,6 +289,22 @@ $md-teal: ( A200: #64ffda, A400: #1de9b6, A700: #00bfa5, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-green: ( @@ -169,6 +322,22 @@ $md-green: ( A200: #69f0ae, A400: #00e676, A700: #00c853, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-light-green: ( @@ -186,6 +355,22 @@ $md-light-green: ( A200: #b2ff59, A400: #76ff03, A700: #64dd17, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $black-87-opacity, + 700: $black-87-opacity, + 800: white, + 900: white, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-lime: ( @@ -203,6 +388,22 @@ $md-lime: ( A200: #eeff41, A400: #c6ff00, A700: #aeea00, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $black-87-opacity, + 700: $black-87-opacity, + 800: $black-87-opacity, + 900: white, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-yellow: ( @@ -220,6 +421,22 @@ $md-yellow: ( A200: #ffff00, A400: #ffea00, A700: #ffd600, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $black-87-opacity, + 700: $black-87-opacity, + 800: $black-87-opacity, + 900: $black-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-amber: ( @@ -237,6 +454,22 @@ $md-amber: ( A200: #ffd740, A400: #ffc400, A700: #ffab00, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $black-87-opacity, + 700: $black-87-opacity, + 800: $black-87-opacity, + 900: $black-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $black-87-opacity, + ) ); $md-orange: ( @@ -254,6 +487,22 @@ $md-orange: ( A200: #ffab40, A400: #ff9100, A700: #ff6d00, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $black-87-opacity, + 700: $black-87-opacity, + 800: white, + 900: white, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: black, + ) ); $md-deep-orange: ( @@ -271,6 +520,22 @@ $md-deep-orange: ( A200: #ff6e40, A400: #ff3d00, A700: #dd2c00, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: white, + A700: white, + ) ); $md-brown: ( @@ -288,6 +553,22 @@ $md-brown: ( A200: #bcaaa4, A400: #8d6e63, A700: #5d4037, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: white, + 400: white, + 500: $white-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: white, + A700: $white-87-opacity, + ) ); $md-grey: ( @@ -307,6 +588,24 @@ $md-grey: ( A200: #eeeeee, A400: #bdbdbd, A700: #616161, + contrast: ( + 0: $black-87-opacity, + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: $black-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + 1000: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: $white-87-opacity, + ) ); $md-blue-grey: ( @@ -324,7 +623,23 @@ $md-blue-grey: ( A200: #b0bec5, A400: #78909c, A700: #455a64, -); + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: white, + 500: white, + 600: $white-87-opacity, + 700: $white-87-opacity, + 800: $white-87-opacity, + 900: $white-87-opacity, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: white, + A700: $white-87-opacity, + ) +); // Background palette for light themes. @@ -378,323 +693,3 @@ $md-dark-theme-foreground: ( icons: white, text: white ); - - - -// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground -// colors are used may have made this obsolete. - -// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to -// calculate them. These contrast colors are pulled from the public Material Design spec swatches. -// While the contrast colors in the spec are not perscriptive, we will use them for convenience. -$black-87-opacity: rgba(black, 0.870588); -$white-87-opacity: rgba(white, 0.870588); - -$md-contrast-palettes: ( - $md-red: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ), - $md-pink: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ), - $md-purple: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: white, - 400: white, - 500: $white-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ), - $md-deep-purple: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: white, - 400: white, - 500: $white-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: $white-87-opacity, - A700: $white-87-opacity, - ), - $md-indigo: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: white, - 400: white, - 500: $white-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: $white-87-opacity, - ), - $md-blue: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: white, - A400: white, - A700: white, - ), - $md-light-blue: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: white, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: white, - ), - $md-cyan: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: white, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-teal: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-green: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-light-green: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $black-87-opacity, - 700: $black-87-opacity, - 800: white, - 900: white, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-lime: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $black-87-opacity, - 700: $black-87-opacity, - 800: $black-87-opacity, - 900: white, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-yellow: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $black-87-opacity, - 700: $black-87-opacity, - 800: $black-87-opacity, - 900: $black-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-amber: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $black-87-opacity, - 700: $black-87-opacity, - 800: $black-87-opacity, - 900: $black-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $black-87-opacity, - ), - $md-orange: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $black-87-opacity, - 700: $black-87-opacity, - 800: white, - 900: white, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: black, - ), - $md-deep-orange: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: white, - 600: white, - 700: white, - 800: white, - 900: white, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: white, - A700: white, - ), - $md-brown: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: white, - 400: white, - 500: $white-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: white, - A700: $white-87-opacity, - ), - $md-grey: ( - 0: $black-87-opacity, - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: $black-87-opacity, - 500: $black-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - 1000: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: $black-87-opacity, - A700: $white-87-opacity, - ), - $md-blue-grey: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: $black-87-opacity, - 400: white, - 500: white, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $black-87-opacity, - A400: white, - A700: $white-87-opacity, - ), -); diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss new file mode 100644 index 000000000000..e897ad9fbb22 --- /dev/null +++ b/src/lib/core/theming/_theming.scss @@ -0,0 +1,94 @@ +@import 'palette'; + + +/** + * For a given hue in a palette, return the contrast color from the map of contrast palettes. + * @param $color-map + * @param $hue + */ +@function md-contrast($palette, $hue) { + @return map-get(map-get($palette, contrast), $hue) +} + + +/** + * Creates a map of hues to colors for a theme. This is used to define a theme palette in terms + * of the Material Design hues. + * @param $color-map + * @param $primary + * @param $lighter + */ +@function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) { + $result: map_merge($base-palette, ( + default: map-get($base-palette, $default), + lighter: map-get($base-palette, $lighter), + darker: map-get($base-palette, $darker), + + default-contrast: md-contrast($base-palette, $default), + lighter-contrast: md-contrast($base-palette, $lighter), + darker-contrast: md-contrast($base-palette, $darker) + )); + + // For each hue in the palette, add a "-contrast" color to the map. + @each $hue, $color in $base-palette { + $result: map_merge($result, ( + '#{$hue}-contrast': md-contrast($base-palette, $hue) + )); + } + + @return $result; +} + + +/** + * Gets a color from a theme palette (the output of md-palette). + * The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured + * hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast". + * + * @param $color-map The theme palette (output of md-palette). + * @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will + * be treated as opacity. + * @param $opacity The alpha channel value for the color. + */ +@function md-color($palette, $hue: default, $opacity: 1) { + // If hueKey is a number between zero and one, then it actually contains an + // opacity value, so recall this function with the default hue and that given opacity. + @if type-of($hue) == number and $hue >= 0 and $hue <= 1 { + @return md-color($palette, default, $hue); + } + + $color: map-get($palette, $hue); + $opacity: if(opacity($color) < 1, opacity($color), $opacity); + + @return rgba($color, $opacity); +} + + +/** + * Creates a container object for a light theme to be given to individual component theme mixins. + */ +@function md-light-theme($primary, $accent, $warn) { + @return ( + primary: $primary, + accent: $accent, + warn: $warn, + is-dark: false, + foreground: $md-light-theme-foreground, + background: $md-light-theme-background, + ) +} + + +/** + * Creates a container object for a dark theme to be given to individual component theme mixins. + */ +@function md-dark-theme($primary, $accent, $warn) { + @return ( + primary: $primary, + accent: $accent, + warn: $warn, + is-dark: true, + foreground: $md-dark-theme-foreground, + background: $md-dark-theme-background, + ) +} diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss new file mode 100644 index 000000000000..3528d4962237 --- /dev/null +++ b/src/lib/core/theming/prebuilt/indigo-pink.scss @@ -0,0 +1,9 @@ +@import '../theming'; +@import '../palette'; + +$primary: md-palette($md-indigo); +$accent: md-palette($md-pink, A200, A100, A400); +$warn: md-palette($md-red); + +$theme: md-light-theme($primary, $accent, $warn); + diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss new file mode 100644 index 000000000000..e8ff4eb9d248 --- /dev/null +++ b/src/lib/core/typography/_typography.scss @@ -0,0 +1,6 @@ +// Implement the rem unit with SCSS so we don't have to actually set a font-size on +// the user's body element. +@function rem($multiplier) { + $font-size: 10px; + @return $multiplier * $font-size; +} diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss new file mode 100644 index 000000000000..3ebf0f231ce7 --- /dev/null +++ b/src/lib/dialog/_dialog-theme.scss @@ -0,0 +1,11 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-dialog-theme($theme) { + $background: map-get($theme, background); + + md-dialog-container { + background: md-color($md-background, dialog); + } +} diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss index 16d44466db02..aa5b9909200c 100644 --- a/src/lib/dialog/dialog-container.scss +++ b/src/lib/dialog/dialog-container.scss @@ -1,14 +1,12 @@ -@import 'elevation'; -@import 'default-theme'; +@import '../core/style/elevation'; + $md-dialog-padding: 24px !default; -:host { +md-dialog-container { + @include md-elevation(24); + display: block; overflow: hidden; - padding: $md-dialog-padding; - - background: md-color($md-background, dialog); - @include md-elevation(24); } diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index 6fe610c702e2..43ec0f390ba5 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -1,4 +1,4 @@ -import {Component, ComponentRef, ViewChild} from '@angular/core'; +import {Component, ComponentRef, ViewChild, ViewEncapsulation} from '@angular/core'; import { BasePortalHost, ComponentPortal, @@ -20,7 +20,8 @@ import {MdDialogContentAlreadyAttachedError} from './dialog-errors'; host: { 'class': 'md-dialog-container', '[attr.role]': 'dialogConfig?.role' - } + }, + encapsulation: ViewEncapsulation.None, }) export class MdDialogContainer extends BasePortalHost { /** The portal host inside of this container into which the dialog content will be loaded. */ diff --git a/src/lib/grid-list/_grid-list-theme.scss b/src/lib/grid-list/_grid-list-theme.scss new file mode 100644 index 000000000000..0d55720d590c --- /dev/null +++ b/src/lib/grid-list/_grid-list-theme.scss @@ -0,0 +1,6 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +// Include this empty mixin for consistency with the other components. +@mixin md-grid-list-theme($theme) { } diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss index 37dd9b9432b5..d28367591ebc 100644 --- a/src/lib/grid-list/grid-list.scss +++ b/src/lib/grid-list/grid-list.scss @@ -1,4 +1,5 @@ -@import 'list-shared'; +@import '../core/style/list-shared'; + /* height of tile header or footer if it has one line */ $md-grid-list-one-line-height: 48px; diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss new file mode 100644 index 000000000000..860538e4a6e4 --- /dev/null +++ b/src/lib/icon/_icon-theme.scss @@ -0,0 +1,6 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +// Include this empty mixin for consistency with the other components. +@mixin md-icon-theme($theme) { } diff --git a/src/lib/icon/icon.scss b/src/lib/icon/icon.scss index acfe82459986..2cbe0b11df43 100644 --- a/src/lib/icon/icon.scss +++ b/src/lib/icon/icon.scss @@ -1,13 +1,9 @@ -@import 'variables'; -@import 'default-theme'; +@import '../core/style/variables'; + /** The width/height of the icon element. */ $md-icon-size: 24px !default; -/** -This works because we're using ViewEncapsulation.None. If we used the default -encapsulation, the selector would need to be ":host". -*/ md-icon { background-repeat: no-repeat; display: inline-block; diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss new file mode 100644 index 000000000000..4003d089cc2e --- /dev/null +++ b/src/lib/input/_input-theme.scss @@ -0,0 +1,64 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-input-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + // Placeholder colors. Required is used for the `*` star shown in the placeholder. + $input-placeholder-color: md-color($foreground, hint-text); + $input-floating-placeholder-color: md-color($primary); + $input-required-placeholder-color: md-color($accent); + + // Underline colors. + $input-underline-color: md-color($foreground, hint-text); + $input-underline-color-accent: md-color($accent); + $input-underline-color-warn: md-color($warn); + $input-underline-disabled-color: md-color($foreground, hint-text); + $input-underline-focused-color: md-color($primary); + + .md-input-placeholder { + color: $input-placeholder-color; + + // :focus is applied to the input, but we apply md-focused to the other elements + // that need to listen to it. + &.md-focused { + color: $input-floating-placeholder-color; + + &.md-accent { + color: $input-underline-color-accent; + } + &.md-warn { + color: $input-underline-color-warn; + } + } + } + + // See md-input-placeholder-floating mixin in input.scss + md-input input:-webkit-autofill + .md-input-placeholder, + .md-input-placeholder.md-float:not(.md-empty), &.md-float.md-focused { + + .md-placeholder-required { + color: $input-required-placeholder-color; + } + } + + .md-input-underline { + border-color: $input-underline-color; + + .md-input-ripple { + background-color: $input-underline-focused-color; + + &.md-accent { + background-color: $input-underline-color-accent; + } + &.md-warn { + background-color: $input-underline-color-warn; + } + } + } +} diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss index ac9c6ed996a4..91312bfb2492 100644 --- a/src/lib/input/input.scss +++ b/src/lib/input/input.scss @@ -1,20 +1,8 @@ -@import 'default-theme'; -@import 'mixins'; -@import 'variables'; +@import '../core/style/variables'; +@import '../core/style/mixins'; -$md-input-floating-placeholder-scale-factor: 0.75 !default; - -// Placeholder colors. Required is used for the `*` star shown in the placeholder. -$md-input-placeholder-color: md-color($md-foreground, hint-text); -$md-input-floating-placeholder-color: md-color($md-primary); -$md-input-required-placeholder-color: md-color($md-accent); -// Underline colors. -$md-input-underline-color: md-color($md-foreground, hint-text); -$md-input-underline-color-accent: md-color($md-accent); -$md-input-underline-color-warn: md-color($md-warn); -$md-input-underline-disabled-color: md-color($md-foreground, hint-text); -$md-input-underline-focused-color: md-color($md-primary); +$md-input-floating-placeholder-scale-factor: 0.75 !default; // Gradient for showing the dashed line when the input is disabled. $md-input-underline-disabled-background-image: linear-gradient(to right, @@ -36,10 +24,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, padding-bottom: 5px; transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor); width: 100% / $md-input-floating-placeholder-scale-factor; - - .md-placeholder-required { - color: $md-input-required-placeholder-color; - } } :host { @@ -107,7 +91,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, font-size: 100%; pointer-events: none; // We shouldn't catch mouse events (let them through). - color: $md-input-placeholder-color; z-index: 1; // Put ellipsis text overflow. @@ -133,19 +116,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, &.md-float:not(.md-empty), &.md-float.md-focused { @include md-input-placeholder-floating; } - - // :focus is applied to the input, but we apply md-focused to the other elements - // that need to listen to it. - &.md-focused { - color: $md-input-floating-placeholder-color; - - &.md-accent { - color: $md-input-underline-color-accent; - } - &.md-warn { - color: $md-input-underline-color-warn; - } - } } // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to @@ -164,7 +134,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, height: 1px; width: 100%; margin-top: 4px; - border-top: 1px solid $md-input-underline-color; + border-top: 1px solid; &.md-disabled { border-top: 0; @@ -178,7 +148,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, position: absolute; height: 2px; z-index: 1; - background-color: $md-input-underline-focused-color; top: -1px; width: 100%; transform-origin: top; @@ -187,13 +156,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, opacity $swift-ease-out-duration $swift-ease-out-timing-function; - &.md-accent { - background-color: $md-input-underline-color-accent; - } - &.md-warn { - background-color: $md-input-underline-color-warn; - } - &.md-focused { opacity: 1; transform: scaleY(1); diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss new file mode 100644 index 000000000000..0aee643510cb --- /dev/null +++ b/src/lib/list/_list-theme.scss @@ -0,0 +1,28 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-list-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + md-list, md-nav-list { + md-list-item, a[md-list-item] { + color: md-color($foreground, base); + } + + [md-subheader] { + color: md-color($foreground, secondary-text); + } + } + + md-divider { + border-top-color: md-color($foreground, divider); + } + + md-nav-list .md-list-item { + &:hover, &.md-list-item-focus { + background: md-color($background, 'hover'); + } + } +} diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 3c001d6f5136..89270542a5f2 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -1,6 +1,6 @@ -@import 'variables'; -@import 'default-theme'; -@import 'list-shared'; +@import '../core/style/variables'; +@import '../core/style/list-shared'; + $md-list-side-padding: 16px; $md-list-avatar-size: 40px; @@ -27,9 +27,9 @@ $md-dense-two-line-height: 60px; $md-dense-three-line-height: 76px; /* -This mixin provides all list-item styles, changing font size and height -based on whether the list is in dense mode. -*/ + * This mixin provides all list-item styles, changing font size and height + * based on whether the list is in dense mode. + */ @mixin md-list-item-base($font-size, $base-height, $avatar-height, $two-line-height, $three-line-height) { @@ -42,7 +42,6 @@ based on whether the list is in dense mode. font-size: $font-size; height: $base-height; padding: 0 $md-list-side-padding; - color: md-color($md-foreground, base); } &.md-list-avatar .md-list-item { @@ -81,9 +80,9 @@ based on whether the list is in dense mode. } /* -This mixin provides all subheader styles, adjusting heights and padding -based on whether the list is in dense mode. -*/ + * This mixin provides all subheader styles, adjusting heights and padding + * based on whether the list is in dense mode. + */ @mixin md-subheader-base($top-padding, $secondary-size, $base-height) { display: block; box-sizing: border-box; @@ -93,7 +92,6 @@ based on whether the list is in dense mode. font-size: $secondary-size; font-weight: 500; - color: md-color($md-foreground, secondary-text); &:first-child { margin-top: -$top-padding; @@ -150,12 +148,11 @@ md-list[dense], md-nav-list[dense] { @include md-line-base($md-dense-font-size); } - } md-divider { display: block; - border-top: 1px solid md-color($md-foreground, divider); + border-top: 1px solid; margin: 0; } @@ -170,7 +167,6 @@ md-nav-list { &:hover, &.md-list-item-focus { outline: none; - background: md-color($md-background, 'hover'); } } } diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss new file mode 100644 index 000000000000..9ec1ae002c88 --- /dev/null +++ b/src/lib/menu/_menu-theme.scss @@ -0,0 +1,24 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-menu-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .md-menu { + background: md-color($background, 'card'); + } + + [md-menu-item] { + color: md-color($foreground, 'text'); + + &[disabled] { + color: md-color($foreground, 'disabled'); + } + + &:hover:not([disabled]), &:focus:not([disabled]) { + background: md-color($background, 'hover'); + } + } +} diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index c5c35b8221e5..f303625a8fb2 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -1,11 +1,11 @@ // TODO(kara): update vars for desktop when MD team responds // TODO(kara): animation for menu opening -@import 'variables'; -@import 'elevation'; -@import 'default-theme'; -@import 'button-mixins'; -@import 'sidenav-mixins'; -@import 'list-shared'; +@import '../core/style/variables'; +@import '../core/style/elevation'; +@import '../core/style/button-mixins'; +@import '../core/style/sidenav-mixins'; +@import '../core/style/list-shared'; + // menu width must be a multiple of 56px $md-menu-overlay-min-width: 112px !default; // 56 * 2 @@ -26,7 +26,6 @@ $md-menu-vertical-padding: 8px !default; overflow: auto; -webkit-overflow-scrolling: touch; // for momentum scroll on mobile - background: md-color($md-background, 'card'); padding-top: $md-menu-vertical-padding; padding-bottom: $md-menu-vertical-padding; } @@ -45,16 +44,10 @@ $md-menu-vertical-padding: 8px !default; font-family: $md-font-family; text-align: start; text-decoration: none; // necessary to reset anchor tags - color: md-color($md-foreground, 'text'); &[disabled] { - color: md-color($md-foreground, 'disabled'); cursor: default; } - - &:hover:not([disabled]), &:focus:not([disabled]) { - background: md-color($md-background, 'hover'); - } } button[md-menu-item] { @@ -63,4 +56,4 @@ button[md-menu-item] { .md-menu-click-catcher { @include md-fullscreen(); -} \ No newline at end of file +} diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss new file mode 100644 index 000000000000..9b3fd8f3da6a --- /dev/null +++ b/src/lib/progress-bar/_progress-bar-theme.scss @@ -0,0 +1,79 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-progress-bar-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + + // TODO(josephperrott): Find better way to inline svgs. + /** In buffer mode a repeated SVG object is used as a background. + Each of the following defines the SVG object for each of the class defined colors. + + Each string is a URL encoded version of: + + + + + + */ + $buffer-bubbles-primary-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; + $buffer-bubbles-accent-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; + $buffer-bubbles-warn-url: url( + 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + + '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + + 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + + '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + + md-color($warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; + + .md-progress-bar-background { + background: $buffer-bubbles-primary-url; + } + + .md-progress-bar-buffer { + background-color: md-color($primary, 100); + } + + md-progress-bar[color='accent'] { + .md-progress-bar-background { + background: $buffer-bubbles-accent-url; + } + + .md-progress-bar-buffer { + background-color: md-color($accent, 100); + } + .md-progress-bar-fill::after { + background-color: md-color($accent, 600); + } + } + + md-progress-bar[color='warn'] { + .md-progress-bar-background { + background: $buffer-bubbles-warn-url; + } + + .md-progress-bar-buffer { + background-color: md-color($warn, 100); + } + .md-progress-bar-fill::after { + background-color: md-color($warn, 600); + } + } + + .md-progress-bar-fill::after { + background-color: md-color($primary, 600); + } +} diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss index bfc052fa2745..8e6b9fae9de6 100644 --- a/src/lib/progress-bar/progress-bar.scss +++ b/src/lib/progress-bar/progress-bar.scss @@ -1,41 +1,10 @@ -@import 'variables'; -@import 'default-theme'; +@import '../core/style/variables'; + $md-progress-bar-height: 5px !default; $md-progress-bar-full-animation-duration: 2000ms !default; $md-progress-bar-piece-animation-duration: 250ms !default; -// TODO(josephperrott): Find better way to inline svgs. -/** In buffer mode a repeated SVG object is used as a background. Each of the following defines the SVG object for each - of the class defined colors. - - Each string is a URL encoded version of: - - - - - - */ -$md-buffer-bubbles-primary-url: url( - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + - '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + - 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + - '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + - md-color($md-primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; -$md-buffer-bubbles-accent-url: url( - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + - '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + - 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + - '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + - md-color($md-accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; -$md-buffer-bubbles-warn-url: url( - 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' + - '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' + - 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' + - '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' + - md-color($md-warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default; :host { display: block; @@ -48,9 +17,9 @@ $md-buffer-bubbles-warn-url: url( transition: opacity $md-progress-bar-piece-animation-duration linear; width: 100%; - // The progress bar background is used to show the bubble animation scrolling behind a buffering progress bar. + // The progress bar background is used to show the bubble animation scrolling behind a + // buffering progress bar. .md-progress-bar-background { - background: $md-buffer-bubbles-primary-url; background-repeat: repeat-x; background-size: 10px 4px; height: 100%; @@ -60,11 +29,10 @@ $md-buffer-bubbles-warn-url: url( } /** - * The progress bar buffer is the bar indicator showing the buffer value and is only visible beyond the current value - * of the primary progress bar. + * The progress bar buffer is the bar indicator showing the buffer value and is only visible + * beyond the current value of the primary progress bar. */ .md-progress-bar-buffer { - background-color: md-color($md-primary, 100); height: 100%; position: absolute; transform-origin: top left; @@ -73,15 +41,14 @@ $md-buffer-bubbles-warn-url: url( } /** - * The secondary progress bar is only used in the indeterminate animation, because of this it is hidden in other uses. + * The secondary progress bar is only used in the indeterminate animation, because of this it + * is hidden in other uses. */ .md-progress-bar-secondary { visibility: hidden; } - /** - * The progress bar fill fills the progress bar with the indicator color. - */ + /** The progress bar fill fills the progress bar with the indicator color. */ .md-progress-bar-fill { animation: none; height: 100%; @@ -91,12 +58,9 @@ $md-buffer-bubbles-warn-url: url( width: 100%; } - /** - * A pseudo element is created for each progress bar bar that fills with the indicator color. - */ + /** A pseudo element is created for each progress bar bar that fills with the indicator color. */ .md-progress-bar-fill::after { animation: none; - background-color: md-color($md-primary, 600); content: ''; display: inline-block; height: 100%; @@ -104,34 +68,6 @@ $md-buffer-bubbles-warn-url: url( width: 100%; } - &[color='accent'] { - .md-progress-bar-background { - background: $md-buffer-bubbles-accent-url; - background-repeat: repeat-x; - background-size: 10px 4px; - } - .md-progress-bar-buffer { - background-color: md-color($md-accent, 100); - } - .md-progress-bar-fill::after { - background-color: md-color($md-accent, 600); - } - } - - &[color='warn'] { - .md-progress-bar-background { - background: $md-buffer-bubbles-warn-url; - background-repeat: repeat-x; - background-size: 10px 4px; - } - .md-progress-bar-buffer { - background-color: md-color($md-warn, 100); - } - .md-progress-bar-fill::after { - background-color: md-color($md-warn, 600); - } - } - &[mode='query'] { transform: rotateZ(180deg); } diff --git a/src/lib/progress-circle/_progress-circle-theme.scss b/src/lib/progress-circle/_progress-circle-theme.scss new file mode 100644 index 000000000000..c29e59f74ba8 --- /dev/null +++ b/src/lib/progress-circle/_progress-circle-theme.scss @@ -0,0 +1,23 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-progress-circle-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + + md-progress-circle { + path { + stroke: md-color($primary, 600); + } + + &[color='accent'] path { + stroke: md-color($accent, 600); + } + + &[color='warn'] path { + stroke: md-color($warn, 600); + } + } +} diff --git a/src/lib/progress-circle/progress-circle.scss b/src/lib/progress-circle/progress-circle.scss index 2fa7a4f588d8..2cf579921331 100644 --- a/src/lib/progress-circle/progress-circle.scss +++ b/src/lib/progress-circle/progress-circle.scss @@ -1,6 +1,5 @@ -@import 'variables'; +@import '../core/style/variables'; -@import 'default-theme'; /* Animation Durations */ $md-progress-circle-duration: 5250ms !default; @@ -33,18 +32,9 @@ $md-progress-circle-viewport-size: 100px !default; path { fill: transparent; - stroke: md-color($md-primary, 600); - /** Stroke width of 10px defines stroke as 10% of the viewBox */ - stroke-width: $md-progress-circle-stroke-width; - } - - &[color='accent'] path { - stroke: md-color($md-accent, 600); - } - - &[color='warn'] path { - stroke: md-color($md-warn, 600); + // Stroke width of 10px defines stroke as 10% of the viewBox. + stroke-width: $md-progress-circle-stroke-width; } diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss new file mode 100644 index 000000000000..203368d61d56 --- /dev/null +++ b/src/lib/radio/_radio-theme.scss @@ -0,0 +1,31 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-radio-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .md-radio-outer-circle { + border-color: md-color($foreground, secondary-text); + + .md-radio-checked & { + border-color: md-color($accent); + } + + .md-radio-disabled & { + border-color: md-color($foreground, disabled); + } + } + + .md-radio-inner-circle { + background-color: md-color($accent); + + .md-radio-disabled & { + background-color: md-color($foreground, disabled); + } + } +} diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index 5dd61c20d649..a2d6b88fd82a 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -1,6 +1,6 @@ -@import 'default-theme'; -@import 'variables'; -@import 'mixins'; +@import '../core/style/variables'; +@import '../core/style/mixins'; + $md-radio-size: $md-toggle-size !default; @@ -30,7 +30,6 @@ md-radio-button { // The outer circle for the radio, always present. .md-radio-outer-circle { - border-color: md-color($md-foreground, secondary-text); border: solid 2px; border-radius: 50%; box-sizing: border-box; @@ -40,19 +39,10 @@ md-radio-button { top: 0; transition: border-color ease 280ms; width: $md-radio-size; - - .md-radio-checked & { - border-color: md-color($md-accent); - } - - .md-radio-disabled & { - border-color: md-color($md-foreground, disabled); - } } // The inner circle for the radio, shown when checked. .md-radio-inner-circle { - background-color: md-color($md-accent); border-radius: 50%; box-sizing: border-box; height: $md-radio-size; @@ -66,10 +56,6 @@ md-radio-button { .md-radio-checked & { transform: scale(0.5); } - - .md-radio-disabled & { - background-color: md-color($md-foreground, disabled); - } } // Text label next to radio. diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss new file mode 100644 index 000000000000..c06036feeabe --- /dev/null +++ b/src/lib/sidenav/_sidenav-theme.scss @@ -0,0 +1,30 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-sidenav-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + // We use invert() here to have the darken the background color expected to be used. If the + // background is light, we use a dark backdrop. If the background is dark, + // we use a light backdrop. + $sidenav-backdrop-color: invert(md-color($background, card, 0.6)) !default; + $sidenav-background-color: md-color($background, dialog) !default; + $sidenav-push-background-color: md-color($background, dialog) !default; + + md-sidenav { + background-color: $sidenav-background-color; + + &.md-sidenav-push { + background-color: $sidenav-push-background-color; + } + } + + .md-sidenav-backdrop.md-sidenav-shown { + background-color: $sidenav-backdrop-color; + } +} diff --git a/src/lib/sidenav/sidenav-transitions.scss b/src/lib/sidenav/sidenav-transitions.scss index 0d5e1e7ac700..bcb52bac9920 100644 --- a/src/lib/sidenav/sidenav-transitions.scss +++ b/src/lib/sidenav/sidenav-transitions.scss @@ -1,7 +1,7 @@ /** - * We separate transitions to be able to disable them in unit tests, by simply not loading this file. + * Separate transitions to be able to disable them in unit tests by omitting this file. */ -@import 'variables'; +@import '../core/style/variables'; md-sidenav { transition: transform $swift-ease-out-duration $swift-ease-out-timing-function; diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 4baa30963961..3752605acb1b 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/src/lib/sidenav/sidenav.scss @@ -1,14 +1,7 @@ -@import 'default-theme'; -@import 'mixins'; -@import 'variables'; -@import 'elevation'; -@import 'sidenav-mixins'; - -// We use invert() here to have the darken the background color expected to be used. If the -// background is light, we use a dark backdrop. If the background is dark, we use a light backdrop. -$md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default; -$md-sidenav-background-color: md-color($md-background, dialog) !default; -$md-sidenav-push-background-color: md-color($md-background, dialog) !default; +@import '../core/style/mixins'; +@import '../core/style/variables'; +@import '../core/style/elevation'; +@import '../core/style/sidenav-mixins'; /** @@ -85,7 +78,6 @@ md-sidenav-layout { &.md-sidenav-shown { visibility: visible; - background-color: $md-sidenav-backdrop-color; } } @@ -110,14 +102,8 @@ md-sidenav { // TODO(kara): revisit scrolling behavior for sidenavs overflow-y: auto; - background-color: $md-sidenav-background-color; - @include md-sidenav-transition(0, -100%); - &.md-sidenav-push { - background-color: $md-sidenav-push-background-color; - } - &.md-sidenav-side { z-index: 1; } diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss new file mode 100644 index 000000000000..8d087173dab4 --- /dev/null +++ b/src/lib/slide-toggle/_slide-toggle-theme.scss @@ -0,0 +1,29 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-slide-toggle-theme($theme) { + + @mixin switch-checked($palette) { + &.md-checked { + .md-slide-toggle-thumb { + background-color: md-color($palette); + } + + .md-slide-toggle-bar { + background-color: md-color($palette, 0.5); + } + } + } + + @mixin switch-ripple($palette) { + &.md-slide-toggle-focused { + &:not(.md-checked) .md-ink-ripple { + // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity + // of black in light themes and 12% of white in dark themes. + background-color: md-color($md-foreground, divider); + } + } + } + +} diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index a0c4f0133384..34e528d1a535 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -1,9 +1,7 @@ -@import 'variables'; -@import 'mixins'; -@import 'elevation'; +@import '../core/style/variables'; +@import '../core/style/mixins'; +@import '../core/style/elevation'; -//TODO(): remove the default theme. -@import 'default-theme'; $md-slide-toggle-width: 36px !default; $md-slide-toggle-height: 24px !default; @@ -11,30 +9,12 @@ $md-slide-toggle-bar-height: 14px !default; $md-slide-toggle-thumb-size: 20px !default; $md-slide-toggle-margin: 16px !default; -@mixin md-switch-checked($palette) { - &.md-checked { - .md-slide-toggle-thumb { - background-color: md-color($palette); - } - .md-slide-toggle-bar { - background-color: md-color($palette, 0.5); - } - } -} @mixin md-switch-ripple($palette) { // Temporary ripple effect for the thumb of the slide-toggle. // Bind to the parent selector and specify the current palette. @include md-temporary-ink-ripple(slide-toggle, true, $palette); - - &.md-slide-toggle-focused { - &:not(.md-checked) .md-ink-ripple { - // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity - // of black in light themes and 12% of white in dark themes. - background-color: md-color($md-foreground, divider); - } - } } :host { diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss new file mode 100644 index 000000000000..4a06987cb4f8 --- /dev/null +++ b/src/lib/slider/_slider-theme.scss @@ -0,0 +1,5 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + +@mixin md-xxx-theme($theme) { +} diff --git a/src/lib/tabs/_tab-group-theme.scss b/src/lib/tabs/_tab-group-theme.scss new file mode 100644 index 000000000000..4a06987cb4f8 --- /dev/null +++ b/src/lib/tabs/_tab-group-theme.scss @@ -0,0 +1,5 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + +@mixin md-xxx-theme($theme) { +} diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index a009c1d2e7aa..501a4f5d4b67 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import 'default-theme'; +@import '../core/style/variables'; + $md-tab-bar-height: 48px !default; diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss new file mode 100644 index 000000000000..4a06987cb4f8 --- /dev/null +++ b/src/lib/toolbar/_toolbar-theme.scss @@ -0,0 +1,5 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + +@mixin md-xxx-theme($theme) { +} diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss index 28bda539d58a..2b536d27f6a5 100644 --- a/src/lib/toolbar/toolbar.scss +++ b/src/lib/toolbar/toolbar.scss @@ -1,6 +1,6 @@ -@import 'variables'; -@import 'mixins'; -@import 'default-theme'; //TODO: remove that soon. +@import '../core/style/variables'; +@import '../core/style/mixins'; + $md-toolbar-min-height: 64px !default; $md-toolbar-font-size: 20px !default; diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss new file mode 100644 index 000000000000..4a06987cb4f8 --- /dev/null +++ b/src/lib/tooltip/_tooltip-theme.scss @@ -0,0 +1,5 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + +@mixin md-xxx-theme($theme) { +} diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss index 8b32906046e4..640f5473aa8f 100644 --- a/src/lib/tooltip/tooltip.scss +++ b/src/lib/tooltip/tooltip.scss @@ -1,6 +1,7 @@ -@import 'variables'; -@import 'theme-functions'; -@import 'palette'; +@import '../core/style/variables'; +@import '../core/theming/theming'; +@import '../core/theming/palette'; + $md-tooltip-height: 22px; $md-tooltip-margin: 14px; From 533b64362fb435960dc2ac6e8728f10445e39d7e Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Mon, 12 Sep 2016 14:22:00 -0700 Subject: [PATCH 2/9] it works! --- src/demo-app/index.html | 2 +- src/lib/button/_button-theme.scss | 79 +++++++------ src/lib/checkbox/_checkbox-theme.scss | 5 + src/lib/core/overlay/overlay.scss | 4 +- src/lib/core/style/_core.scss | 18 +++ src/lib/core/style/_elevation.scss | 84 +++++++------- src/lib/core/style/_mixins.scss | 34 ++---- src/lib/core/style/_ripple.scss | 107 +++++++++--------- src/lib/core/style/core.scss | 14 --- src/lib/core/theming/_palette.scss | 15 ++- src/lib/core/theming/_theming.scss | 46 +++----- .../core/theming/prebuilt/indigo-pink.scss | 40 +++++++ src/lib/dialog/_dialog-theme.scss | 2 +- src/lib/radio/_radio-theme.scss | 5 + src/lib/slide-toggle/_slide-toggle-theme.scss | 78 ++++++++++--- src/lib/slide-toggle/slide-toggle.scss | 33 +----- src/lib/slider/_slider-theme.scss | 17 ++- src/lib/slider/slider.scss | 10 +- src/lib/tabs/_tab-group-theme.scss | 5 - src/lib/tabs/_tabs-theme.scss | 23 ++++ src/lib/tabs/tab-group.scss | 3 - src/lib/toolbar/_toolbar-theme.scss | 30 ++++- src/lib/toolbar/toolbar.scss | 20 ---- src/lib/tooltip/_tooltip-theme.scss | 6 +- src/lib/tooltip/tooltip.scss | 4 +- 25 files changed, 389 insertions(+), 295 deletions(-) create mode 100644 src/lib/core/style/_core.scss delete mode 100644 src/lib/core/style/core.scss delete mode 100644 src/lib/tabs/_tab-group-theme.scss create mode 100644 src/lib/tabs/_tabs-theme.scss diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 02da2647b9d4..45384eb6713f 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index c6aa9e4908b1..e82a810b358b 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -1,68 +1,77 @@ @import '../core/theming/theming'; -@mixin md-button-theme($theme) { +/** Applies a focus style to an md-button element for each of the supported palettes. */ +@mixin _md-button-focus-color($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - /** Applies a focus style to an md-button element for each of the supported palettes. */ - @mixin button-focus-color() { - &.md-primary::after { - background-color: md-color($primary, 0.12); - } + &.md-primary::after { + background-color: md-color($primary, 0.12); + } - &.md-accent::after { - background-color: md-color($accent, 0.12); - } + &.md-accent::after { + background-color: md-color($accent, 0.12); + } - &.md-warn::after { - background-color: md-color($warn, 0.12); - } + &.md-warn::after { + background-color: md-color($warn, 0.12); } +} - /** Applies a property to an md-button element for each of the supported palettes. */ - @mixin button-theme-color($property, $color: 'default', $opacity: 1) { - &.md-primary { - #{$property}: md-color($primary, $color, $opacity); - } - &.md-accent { - #{$property}: md-color($accent, $color, $opacity); - } - &.md-warn { - #{$property}: md-color($warn, $color, $opacity); - } +/** Applies a property to an md-button element for each of the supported palettes. */ +@mixin _md-button-theme-color($theme, $property, $color: 'default') { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + &.md-primary { + #{$property}: md-color($primary, $color); + } + &.md-accent { + #{$property}: md-color($accent, $color); + } + &.md-warn { + #{$property}: md-color($warn, $color); + } - &.md-primary, &.md-accent, &.md-warn, &[disabled] { - &[disabled] { - $palette: if($property == 'color', $foreground, $background); - #{$property}: md-color($palette, disabled-button); - } + &.md-primary, &.md-accent, &.md-warn, &[disabled] { + &[disabled] { + $palette: if($property == 'color', $foreground, $background); + #{$property}: md-color($palette, disabled-button); } } +} +@mixin md-button-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] { &.md-button-focus { - @include md-button-focus-color(); + @include _md-button-focus-color($theme); } } [md-button], [md-icon-button] { - @include button-theme-color('color'); + @include _md-button-theme-color($theme, 'color'); // Only flat buttons and icon buttons (not raised or fabs) have a hover style. // Use the same visual treatment for hover as for focus. &:hover { - @include md-button-focus-color(); + @include _md-button-focus-color($theme); } } [md-raised-button], [md-fab], [md-mini-fab] { - @include button-theme-color('color', default-contrast); - @include button-theme-color('background-color'); + @include _md-button-theme-color($theme, 'color', default-contrast); + @include _md-button-theme-color($theme, 'background-color'); background-color: md-color($background, background); } diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss index 111a53112c73..0405f66b5b13 100644 --- a/src/lib/checkbox/_checkbox-theme.scss +++ b/src/lib/checkbox/_checkbox-theme.scss @@ -61,4 +61,9 @@ } } } + + // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. + .md-checkbox-focused .md-ink-ripple { + background-color: md-color($accent, 0.26); + } } diff --git a/src/lib/core/overlay/overlay.scss b/src/lib/core/overlay/overlay.scss index 90ac11f87517..55851ec9135d 100644 --- a/src/lib/core/overlay/overlay.scss +++ b/src/lib/core/overlay/overlay.scss @@ -7,7 +7,7 @@ $md-backdrop-color: md-color($md-grey, 900); // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit. -/** The overlay-container is an invisible element which contains all individual overlays. */ +// The overlay-container is an invisible element which contains all individual overlays. .md-overlay-container { position: absolute; @@ -22,7 +22,7 @@ $md-backdrop-color: md-color($md-grey, 900); z-index: $md-z-index-overlay-container; } -/** A single overlay pane. */ +// A single overlay pane. .md-overlay-pane { position: absolute; pointer-events: auto; diff --git a/src/lib/core/style/_core.scss b/src/lib/core/style/_core.scss new file mode 100644 index 000000000000..bb6ffb759c3f --- /dev/null +++ b/src/lib/core/style/_core.scss @@ -0,0 +1,18 @@ +// Core styles that can be used to apply material design treatments to any element. +@import '../a11y/live-announcer'; +@import 'elevation'; +@import '../overlay/overlay'; +@import 'ripple'; + +@mixin md-core-theme($theme) { + // Provides external CSS classes for each elevation value. Each CSS class is formatted as + // `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is + // elevated. + @for $zValue from 0 through 24 { + .md-elevation-z#{$zValue} { + @include md-elevation($zValue); + } + } + + @include md-ripple-theme($theme); +} diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss index 78701b44ec4d..7b37fb6d85e4 100644 --- a/src/lib/core/style/_elevation.scss +++ b/src/lib/core/style/_elevation.scss @@ -1,26 +1,24 @@ @import 'variables'; -/** - * A collection of mixins and CSS classes that can be used to apply elevation to a material - * element. - * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html - * Examples: - * - * - * .md-foo { - * @include $md-elevation(2); - * - * &:active { - * @include $md-elevation(8); - * } - * } - * - *

Some content

- * - * For an explanation of the design behind how elevation is implemented, see the design doc at - * https://goo.gl/Kq0k9Z. - */ +// A collection of mixins and CSS classes that can be used to apply elevation to a material +// element. +// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html +// Examples: +// +// +// .md-foo { +// @include $md-elevation(2); +// +// &:active { +// @include $md-elevation(8); +// } +// } +// +//

Some content

+// +// For an explanation of the design behind how elevation is implemented, see the design doc at +// https://goo.gl/Kq0k9Z. // Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation // level is created using a set of 3 shadow values, one for umbra (the shadow representing the @@ -121,23 +119,20 @@ $_ambient-elevation-map: ( 24: '0px 9px 46px 8px #{$_ambient-color}' ); -/** - * The css property used for elevation. In most cases this should not be changed. It is exposed - * as a variable for abstraction / easy use when needing to reference the property directly, for - * example in a will-change rule. - */ + +// The css property used for elevation. In most cases this should not be changed. It is exposed +// as a variable for abstraction / easy use when needing to reference the property directly, for +// example in a will-change rule. $md-elevation-property: box-shadow !default; -/** The default duration value for elevation transitions. */ +// The default duration value for elevation transitions. $md-elevation-transition-duration: 280ms !default; -/** The default easing value for elevation transitions. */ +// The default easing value for elevation transitions. $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function; -/** - * Applies the correct css rules to an element to give it the elevation specified by $zValue. - * The $zValue must be between 0 and 24. - */ +// Applies the correct css rules to an element to give it the elevation specified by $zValue. +// The $zValue must be between 0 and 24. @mixin md-elevation($zValue) { @if type-of($zValue) != number or not unitless($zValue) { @error '$zValue must be a unitless number'; @@ -151,27 +146,24 @@ $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function; #{map-get($_ambient-elevation-map, $zValue)}; } -/** - * Returns a string that can be used as the value for a transition property for elevation. - * Calling this function directly is useful in situations where a component needs to transition - * more than one property. - * - * .foo { - * transition: md-elevation-transition-property-value(), opacity 100ms ease; - * will-change: $md-elevation-property, opacity; - * } - */ +// Returns a string that can be used as the value for a transition property for elevation. +// Calling this function directly is useful in situations where a component needs to transition +// more than one property. +// +// .foo { +// transition: md-elevation-transition-property-value(), opacity 100ms ease; +// will-change: $md-elevation-property, opacity; +// } @function md-elevation-transition-property-value( $duration: $md-elevation-transition-duration, $easing: $md-elevation-transition-timing-function) { @return #{$md-elevation-property} #{$duration} #{$easing}; } -/** - * Applies the correct css rules needed to have an element transition between elevations. - * This mixin should be applied to elements whose elevation values will change depending on their - * context (e.g. when active or disabled). - */ +// Applies the correct css rules needed to have an element transition between elevations. +// This mixin should be applied to elements whose elevation values will change depending on their +// context (e.g. when active or disabled). +// // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can // be used in the same way by clients. @mixin md-elevation-transition( diff --git a/src/lib/core/style/_mixins.scss b/src/lib/core/style/_mixins.scss index 8839a765f9c9..8dbe13187847 100644 --- a/src/lib/core/style/_mixins.scss +++ b/src/lib/core/style/_mixins.scss @@ -1,8 +1,5 @@ - -/** - * Mixin that creates a new stacking context. - * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - */ +// Mixin that creates a new stacking context. +// see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context @mixin md-stacking-context() { position: relative; @@ -10,10 +7,8 @@ transform: translate3d(0, 0, 0); } -/** - * This mixin hides an element visually. - * That means it's still accessible for screen-readers but not visible in view. - */ +// This mixin hides an element visually. +// That means it's still accessible for screen-readers but not visible in view. @mixin md-visually-hidden { border: 0; clip: rect(0 0 0 0); @@ -26,10 +21,8 @@ width: 1px; } -/** - * Forces an element to grow to fit floated contents; used as as an alternative to - * `overflow: hidden;` because it doesn't cut off contents. - */ +// Forces an element to grow to fit floated contents; used as as an alternative to +// `overflow: hidden;` because it doesn't cut off contents. @mixin md-clearfix { &::before, &::after { content: ''; @@ -38,14 +31,12 @@ } } -/** - * A mixin, which generates temporary ink ripple on a given component. - * When $bindToParent is set to true, it will check for the focused class on the same selector as you included - * that mixin. - * It is also possible to specify the color palette of the temporary ripple. By default it uses the - * accent palette for its background. - */ -@mixin md-temporary-ink-ripple($component, $bindToParent: false, $palette: $md-accent) { +// A mixin, which generates temporary ink ripple on a given component. +// When $bindToParent is set to true, it will check for the focused class on the same selector as you included +// that mixin. +// It is also possible to specify the color palette of the temporary ripple. By default it uses the +// accent palette for its background. +@mixin md-temporary-ink-ripple($component, $bindToParent: false) { // TODO(mtlin): Replace when ink ripple component is implemented. // A placeholder ink ripple, shown when keyboard focused. .md-ink-ripple { @@ -65,7 +56,6 @@ // Fade in when radio focused. #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple { opacity: 1; - background-color: md-color($palette, 0.26); } // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into diff --git a/src/lib/core/style/_ripple.scss b/src/lib/core/style/_ripple.scss index 7700f8d2f222..b9f013feedad 100644 --- a/src/lib/core/style/_ripple.scss +++ b/src/lib/core/style/_ripple.scss @@ -1,61 +1,64 @@ -@import '../core/theming/theming'; - -$md-ripple-focused-opacity: 0.1; -$md-ripple-background-fade-duration: 300ms; -$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588); -$md-ripple-foreground-initial-opacity: 0.25; -$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); - -/** - * The host element of an md-ripple directive should always have a position of "absolute" or - * "relative" so that the ripple divs it creates inside itself are correctly positioned. - */ -[md-ripple] { - overflow: hidden; -} +@import '../theming/theming'; -[md-ripple].md-ripple-unbounded { - overflow: visible; -} -.md-ripple-background { - background-color: $md-ripple-background-default-color; - opacity: 0; - transition: opacity $md-ripple-background-fade-duration linear; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; -} +@mixin md-ripple-theme($theme) { + $accent: map-get($theme, accent); -.md-ripple-unbounded .md-ripple-background { - display: none; -} + $md-ripple-focused-opacity: 0.1; + $md-ripple-background-fade-duration: 300ms; + $md-ripple-background-default-color: rgba(0, 0, 0, 0.0588); + $md-ripple-foreground-initial-opacity: 0.25; + $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588); -.md-ripple-background.md-ripple-active { - opacity: 1; -} + // The host element of an md-ripple directive should always have a position of "absolute" or + // "relative" so that the ripple divs it creates inside itself are correctly positioned. + [md-ripple] { + overflow: hidden; + } -.md-ripple-focused .md-ripple-background { - background-color: md-color($md-accent, $md-ripple-focused-opacity); - opacity: 1; -} + [md-ripple].md-ripple-unbounded { + overflow: visible; + } -.md-ripple-foreground { - background-color: $md-ripple-foreground-default-color; - border-radius: 50%; - pointer-events: none; - opacity: $md-ripple-foreground-initial-opacity; - position: absolute; - // The transition duration is manually set based on the ripple size. - transition: 'opacity, transform' 0ms cubic-bezier(0, 0, 0.2, 1); -} + .md-ripple-background { + background-color: $md-ripple-background-default-color; + opacity: 0; + transition: opacity $md-ripple-background-fade-duration linear; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } -.md-ripple-foreground.md-ripple-fade-in { - opacity: 1; -} + .md-ripple-unbounded .md-ripple-background { + display: none; + } + + .md-ripple-background.md-ripple-active { + opacity: 1; + } + + .md-ripple-focused .md-ripple-background { + background-color: md-color($accent, $md-ripple-focused-opacity); + opacity: 1; + } + + .md-ripple-foreground { + background-color: $md-ripple-foreground-default-color; + border-radius: 50%; + pointer-events: none; + opacity: $md-ripple-foreground-initial-opacity; + position: absolute; + // The transition duration is manually set based on the ripple size. + transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1); + } + + .md-ripple-foreground.md-ripple-fade-in { + opacity: 1; + } -.md-ripple-foreground.md-ripple-fade-out { - opacity: 0; + .md-ripple-foreground.md-ripple-fade-out { + opacity: 0; + } } diff --git a/src/lib/core/style/core.scss b/src/lib/core/style/core.scss deleted file mode 100644 index 856d9eddf53d..000000000000 --- a/src/lib/core/style/core.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Core styles that can be used to apply material design treatments to any element. -@import '../a11y/live-announcer'; -@import 'elevation'; -@import '../overlay/overlay'; -@import 'ripple'; - -// Provides external CSS classes for each elevation value. Each CSS class is formatted as -// `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is -// elevated. -@for $zValue from 0 through 24 { - .md-elevation-z#{$zValue} { - @include md-elevation($zValue); - } -} diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss index e1cd6e23577c..f825ef4e7cc6 100644 --- a/src/lib/core/theming/_palette.scss +++ b/src/lib/core/theming/_palette.scss @@ -1,11 +1,10 @@ -/** - * Color palettes from the Material Design spec. - * See https://www.google.com/design/spec/style/color.html - * - * Contrast colors are hard-coded because it is too difficult (probably impossible) to - * calculate them. These contrast colors are pulled from the public Material Design spec swatches. - * While the contrast colors in the spec are not perscriptive, we use them for convenience. - */ +// Color palettes from the Material Design spec. +// See https://www.google.com/design/spec/style/color.html +// +// Contrast colors are hard-coded because it is too difficult (probably impossible) to +// calculate them. These contrast colors are pulled from the public Material Design spec swatches. +// While the contrast colors in the spec are not perscriptive, we use them for convenience. + $black-87-opacity: rgba(black, 0.87); $white-87-opacity: rgba(white, 0.87); diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss index e897ad9fbb22..a26ecc14d348 100644 --- a/src/lib/core/theming/_theming.scss +++ b/src/lib/core/theming/_theming.scss @@ -1,23 +1,19 @@ @import 'palette'; -/** - * For a given hue in a palette, return the contrast color from the map of contrast palettes. - * @param $color-map - * @param $hue - */ +// For a given hue in a palette, return the contrast color from the map of contrast palettes. +// @param $color-map +// @param $hue @function md-contrast($palette, $hue) { @return map-get(map-get($palette, contrast), $hue) } -/** - * Creates a map of hues to colors for a theme. This is used to define a theme palette in terms - * of the Material Design hues. - * @param $color-map - * @param $primary - * @param $lighter - */ +// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms +// of the Material Design hues. +// @param $color-map +// @param $primary +// @param $lighter @function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) { $result: map_merge($base-palette, ( default: map-get($base-palette, $default), @@ -40,16 +36,14 @@ } -/** - * Gets a color from a theme palette (the output of md-palette). - * The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured - * hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast". - * - * @param $color-map The theme palette (output of md-palette). - * @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will - * be treated as opacity. - * @param $opacity The alpha channel value for the color. - */ +// Gets a color from a theme palette (the output of md-palette). +// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured +// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast". +// +// @param $color-map The theme palette (output of md-palette). +// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will +// be treated as opacity. +// @param $opacity The alpha channel value for the color. @function md-color($palette, $hue: default, $opacity: 1) { // If hueKey is a number between zero and one, then it actually contains an // opacity value, so recall this function with the default hue and that given opacity. @@ -64,9 +58,7 @@ } -/** - * Creates a container object for a light theme to be given to individual component theme mixins. - */ +// Creates a container object for a light theme to be given to individual component theme mixins. @function md-light-theme($primary, $accent, $warn) { @return ( primary: $primary, @@ -79,9 +71,7 @@ } -/** - * Creates a container object for a dark theme to be given to individual component theme mixins. - */ +// Creates a container object for a dark theme to be given to individual component theme mixins. @function md-dark-theme($primary, $accent, $warn) { @return ( primary: $primary, diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss index 3528d4962237..20dfdc21a004 100644 --- a/src/lib/core/theming/prebuilt/indigo-pink.scss +++ b/src/lib/core/theming/prebuilt/indigo-pink.scss @@ -1,5 +1,26 @@ @import '../theming'; @import '../palette'; +@import '../../style/core'; +@import '../../../button/button-theme'; +@import '../../../button-toggle/button-toggle-theme'; +@import '../../../card/card-theme'; +@import '../../../checkbox/checkbox-theme'; +@import '../../../dialog/dialog-theme'; +@import '../../../grid-list/grid-list-theme'; +@import '../../../icon/icon-theme'; +@import '../../../input/input-theme'; +@import '../../../list/list-theme'; +@import '../../../menu/menu-theme'; +@import '../../../progress-bar/progress-bar-theme'; +@import '../../../progress-circle/progress-circle-theme'; +@import '../../../radio/radio-theme'; +@import '../../../sidenav/sidenav-theme'; +@import '../../../slide-toggle/slide-toggle-theme'; +@import '../../../slider/slider-theme'; +@import '../../../tabs/tabs-theme'; +@import '../../../toolbar/toolbar-theme'; +@import '../../../tooltip/tooltip-theme'; + $primary: md-palette($md-indigo); $accent: md-palette($md-pink, A200, A100, A400); @@ -7,3 +28,22 @@ $warn: md-palette($md-red); $theme: md-light-theme($primary, $accent, $warn); +@include md-button-theme($theme); +@include md-button-toggle-theme($theme); +@include md-card-theme($theme); +@include md-checkbox-theme($theme); +@include md-dialog-theme($theme); +@include md-grid-list-theme($theme); +@include md-icon-theme($theme); +@include md-input-theme($theme); +@include md-list-theme($theme); +@include md-menu-theme($theme); +@include md-progress-bar-theme($theme); +@include md-progress-circle-theme($theme); +@include md-radio-theme($theme); +@include md-sidenav-theme($theme); +@include md-slide-toggle-theme($theme); +@include md-slider-theme($theme); +@include md-tabs-theme($theme); +@include md-toolbar-theme($theme); +@include md-tooltip-theme($theme); diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss index 3ebf0f231ce7..77b2a9d37e40 100644 --- a/src/lib/dialog/_dialog-theme.scss +++ b/src/lib/dialog/_dialog-theme.scss @@ -6,6 +6,6 @@ $background: map-get($theme, background); md-dialog-container { - background: md-color($md-background, dialog); + background: md-color($background, dialog); } } diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss index 203368d61d56..a6e2229a7a29 100644 --- a/src/lib/radio/_radio-theme.scss +++ b/src/lib/radio/_radio-theme.scss @@ -28,4 +28,9 @@ background-color: md-color($foreground, disabled); } } + + // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. + .md-radio-focused .md-ink-ripple { + background-color: md-color($accent, 0.26); + } } diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss index 8d087173dab4..338dfb691164 100644 --- a/src/lib/slide-toggle/_slide-toggle-theme.scss +++ b/src/lib/slide-toggle/_slide-toggle-theme.scss @@ -2,28 +2,76 @@ @import '../core/theming/theming'; +@mixin _md-slide-toggle-checked($palette) { + &.md-checked { + .md-slide-toggle-thumb { + background-color: md-color($palette); + } + + .md-slide-toggle-bar { + background-color: md-color($palette, 0.5); + } + } +} + +// TODO(jelbourn): remove this when the real ripple has been applied to slide-toggle. +@mixin _md-slide-toggle-ripple($palette, $foreground) { + &.md-slide-toggle-focused { + &:not(.md-checked) .md-ink-ripple { + // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity + // of black in light themes and 12% of white in dark themes. + background-color: md-color($foreground, divider); + } + } + + &.md-slide-toggle-focused .md-ink-ripple { + background-color: md-color($palette, 0.26); + } +} + @mixin md-slide-toggle-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); - @mixin switch-checked($palette) { - &.md-checked { - .md-slide-toggle-thumb { - background-color: md-color($palette); - } + md-slide-toggle { + @include _md-slide-toggle-checked($accent); + @include _md-slide-toggle-ripple($accent, $foreground); + - .md-slide-toggle-bar { - background-color: md-color($palette, 0.5); - } + &.md-primary { + @include _md-slide-toggle-checked($primary); + @include _md-slide-toggle-ripple($primary, $foreground); } + + &.md-warn { + @include _md-slide-toggle-checked($warn); + @include _md-slide-toggle-ripple($warn, $foreground); + } + } - @mixin switch-ripple($palette) { - &.md-slide-toggle-focused { - &:not(.md-checked) .md-ink-ripple { - // When the slide-toggle is not checked and it shows its focus indicator, it should use a 12% opacity - // of black in light themes and 12% of white in dark themes. - background-color: md-color($md-foreground, divider); - } + .md-disabled { + .md-slide-toggle-thumb { + // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes. + // Since this is very specific to the slide-toggle component, we're not providing + // it in the background palette. + background-color: md-color($md-grey, 400); } + .md-slide-toggle-bar { + background-color: md-color($foreground, divider); + } + } + + .md-slide-toggle-thumb { + background-color: md-color($background, background); } + .md-slide-toggle-bar { + // The slide-toggle bar always uses grey-500 for both dark and light themes. + // Since this is very specific to slide-toggle, it's not part of the common background palette. + background-color: md-color($md-grey, 500); + } } diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index 34e528d1a535..51ccd0b35176 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -11,10 +11,10 @@ $md-slide-toggle-margin: 16px !default; -@mixin md-switch-ripple($palette) { +@mixin md-switch-ripple() { // Temporary ripple effect for the thumb of the slide-toggle. // Bind to the parent selector and specify the current palette. - @include md-temporary-ink-ripple(slide-toggle, true, $palette); + @include md-temporary-ink-ripple(slide-toggle, true); } :host { @@ -35,34 +35,13 @@ $md-slide-toggle-margin: 16px !default; } } - @include md-switch-checked($md-accent); - @include md-switch-ripple($md-accent); - - &.md-primary { - @include md-switch-checked($md-primary); - @include md-switch-ripple($md-primary); - } - - &.md-warn { - @include md-switch-checked($md-warn); - @include md-switch-ripple($md-warn); - } + @include md-switch-ripple(); &.md-disabled { .md-slide-toggle-label, .md-slide-toggle-container { cursor: default; } - - .md-slide-toggle-thumb { - // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark or light themes. - // Since this is very specific to the slide-toggle component, we're not providing - // it in the background palette. - background-color: md-color($md-grey, 400); - } - .md-slide-toggle-bar { - background-color: md-color($md-foreground, divider); - } } } @@ -129,7 +108,6 @@ $md-slide-toggle-margin: 16px !default; width: $md-slide-toggle-thumb-size; border-radius: 50%; - background-color: md-color($md-background, background); @include md-elevation(1); } @@ -143,11 +121,6 @@ $md-slide-toggle-margin: 16px !default; width: $md-slide-toggle-width - 2px; height: $md-slide-toggle-bar-height; - // The bar of the slide-toggle always uses the hue 500 of the grey palette in dark or light themes. - // Since this is very specific to the slide-toggle component, we're not providing - // it in the background palette. - background-color: md-color($md-grey, 500); - border-radius: 8px; } diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss index 4a06987cb4f8..5850db6f7986 100644 --- a/src/lib/slider/_slider-theme.scss +++ b/src/lib/slider/_slider-theme.scss @@ -1,5 +1,20 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@mixin md-xxx-theme($theme) { + +@mixin md-slider-theme($theme) { + $accent: map-get($theme, accent); + + .md-slider-track-fill { + background-color: md-color($accent); + } + + .md-slider-thumb::after { + background-color: md-color($accent); + border-color: md-color($accent); + } + + .md-slider-thumb-label { + background-color: md-color($accent); + } } diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index d69743f875a0..ca99c82c49b3 100644 --- a/src/lib/slider/slider.scss +++ b/src/lib/slider/slider.scss @@ -1,5 +1,5 @@ -@import 'default-theme'; -@import '_variables'; +@import '../core/style/variables'; + // This refers to the thickness of the slider. On a horizontal slider this is the height, on a // vertical slider this is the width. @@ -102,7 +102,6 @@ md-slider *::after { transition-duration: $swift-ease-out-duration; transition-timing-function: $swift-ease-out-timing-function; transition-property: width, height; - background-color: md-color($md-accent); } .md-slider-tick-container, .md-slider-last-tick-container { @@ -140,11 +139,10 @@ md-slider *::after { width: $md-slider-thumb-size; height: $md-slider-thumb-size; border-radius: max($md-slider-thumb-size, $md-slider-thumb-size); + // Separate border properties because, if you combine them into "border", it defaults to 'black'. border-width: 3px; border-style: solid; transition: inherit; - background-color: md-color($md-accent); - border-color: md-color($md-accent); } .md-slider-thumb-label { @@ -162,8 +160,6 @@ md-slider *::after { transform: scale(0.4) translate3d(0, (-$md-slider-thumb-label-top + 10) / 0.4, 0) rotate(45deg); transition: 300ms $swift-ease-in-out-timing-function; transition-property: transform, border-radius; - - background-color: md-color($md-accent); } .md-slider-thumb-label-text { diff --git a/src/lib/tabs/_tab-group-theme.scss b/src/lib/tabs/_tab-group-theme.scss deleted file mode 100644 index 4a06987cb4f8..000000000000 --- a/src/lib/tabs/_tab-group-theme.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../core/theming/palette'; -@import '../core/theming/theming'; - -@mixin md-xxx-theme($theme) { -} diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss new file mode 100644 index 000000000000..abb5ceeb4d5a --- /dev/null +++ b/src/lib/tabs/_tabs-theme.scss @@ -0,0 +1,23 @@ +@import '../core/theming/palette'; +@import '../core/theming/theming'; + + +@mixin md-tabs-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .md-tab-header { + border-bottom: 1px solid md-color($background, status-bar); + } + + .md-tab-label:focus { + background-color: md-color($primary, 100, 0.3); + } + + md-ink-bar { + background-color: md-color($primary, 500); + } +} diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index 501a4f5d4b67..6d193da9b3e7 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -15,7 +15,6 @@ $md-tab-bar-height: 48px !default; position: relative; display: flex; flex-direction: row; - border-bottom: 1px solid md-color($md-background, status-bar); flex-shrink: 0; } @@ -36,7 +35,6 @@ $md-tab-bar-height: 48px !default; &:focus { outline: none; opacity: 1; - background-color: md-color($md-primary, 100, 0.3); } } @@ -70,6 +68,5 @@ md-ink-bar { position: absolute; bottom: 0; height: 2px; - background-color: md-color($md-primary, 500); transition: 350ms ease-out; } diff --git a/src/lib/toolbar/_toolbar-theme.scss b/src/lib/toolbar/_toolbar-theme.scss index 4a06987cb4f8..6320b51dd5f9 100644 --- a/src/lib/toolbar/_toolbar-theme.scss +++ b/src/lib/toolbar/_toolbar-theme.scss @@ -1,5 +1,33 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@mixin md-xxx-theme($theme) { + +@mixin _md-toolbar-color($palette) { + background: md-color($palette); + color: md-color($palette, default-contrast); +} + +@mixin md-toolbar-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + md-toolbar { + background: md-color($background, app-bar); + color: md-color($foreground, text); + + &.md-primary { + @include _md-toolbar-color($primary); + } + + &.md-accent { + @include _md-toolbar-color($accent); + } + + &.md-warn { + @include _md-toolbar-color($warn); + } + } } diff --git a/src/lib/toolbar/toolbar.scss b/src/lib/toolbar/toolbar.scss index 2b536d27f6a5..2a15df795834 100644 --- a/src/lib/toolbar/toolbar.scss +++ b/src/lib/toolbar/toolbar.scss @@ -6,10 +6,6 @@ $md-toolbar-min-height: 64px !default; $md-toolbar-font-size: 20px !default; $md-toolbar-padding: 16px !default; -@mixin toolbar-theme($palette) { - background: md-color($palette); - color: md-color($palette, default-contrast); -} md-toolbar { display: flex; @@ -27,21 +23,6 @@ md-toolbar { flex-direction: column; - background: md-color($md-background, app-bar); - color: md-color($md-foreground, text); - - &.md-primary { - @include toolbar-theme($md-primary); - } - - &.md-accent { - @include toolbar-theme($md-accent); - } - - &.md-warn { - @include toolbar-theme($md-warn); - } - md-toolbar-row { display: flex; box-sizing: border-box; @@ -53,5 +34,4 @@ md-toolbar { flex-direction: row; align-items: center; } - } diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss index 4a06987cb4f8..aaa6516ad9b0 100644 --- a/src/lib/tooltip/_tooltip-theme.scss +++ b/src/lib/tooltip/_tooltip-theme.scss @@ -1,5 +1,9 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; -@mixin md-xxx-theme($theme) { + +@mixin md-tooltip-theme($theme) { + .md-tooltip { + background: md-color($md-grey, 700, 0.9); + } } diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss index 640f5473aa8f..f8578a8f7a19 100644 --- a/src/lib/tooltip/tooltip.scss +++ b/src/lib/tooltip/tooltip.scss @@ -1,6 +1,4 @@ @import '../core/style/variables'; -@import '../core/theming/theming'; -@import '../core/theming/palette'; $md-tooltip-height: 22px; @@ -10,8 +8,8 @@ $md-tooltip-padding: 8px; :host { pointer-events: none; } + .md-tooltip { - background: md-color($md-grey, 700, 0.9); color: white; padding: 0 $md-tooltip-padding; border-radius: 2px; From e2b4a46e8b8285afc263ff3c4a3f2c75bd20686f Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Mon, 12 Sep 2016 14:33:34 -0700 Subject: [PATCH 3/9] fix slider specificity --- src/lib/slider/_slider-theme.scss | 13 +++++++++++++ src/lib/slider/slider.scss | 7 ------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/lib/slider/_slider-theme.scss b/src/lib/slider/_slider-theme.scss index 5850db6f7986..28f67927e7b3 100644 --- a/src/lib/slider/_slider-theme.scss +++ b/src/lib/slider/_slider-theme.scss @@ -5,6 +5,15 @@ @mixin md-slider-theme($theme) { $accent: map-get($theme, accent); + // TODO(iveysaur): Find an implementation to hide the track under a disabled thumb. + $md-slider-off-color: rgba(black, 0.26); + $md-slider-focused-color: rgba(black, 0.38); + $md-slider-disabled-color: rgba(black, 0.26); + + .md-slider-track { + background-color: $md-slider-off-color; + } + .md-slider-track-fill { background-color: md-color($accent); } @@ -17,4 +26,8 @@ .md-slider-thumb-label { background-color: md-color($accent); } + + .md-slider-thumb-label-text { + color: md-color($accent, default-contrast); + } } diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index ca99c82c49b3..862573c0bb75 100644 --- a/src/lib/slider/slider.scss +++ b/src/lib/slider/slider.scss @@ -13,11 +13,6 @@ $md-slider-thumb-size: 20px !default; $md-slider-thumb-default-scale: 0.7 !default; $md-slider-thumb-focus-scale: 1 !default; -// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb. -$md-slider-off-color: rgba(black, 0.26); -$md-slider-focused-color: rgba(black, 0.38); -$md-slider-disabled-color: rgba(black, 0.26); - $md-slider-thumb-arrow-height: 16px !default; $md-slider-thumb-arrow-width: 28px !default; @@ -95,7 +90,6 @@ md-slider *::after { left: 0; right: 0; height: 100%; - background-color: $md-slider-off-color; } .md-slider-track-fill { @@ -169,7 +163,6 @@ md-slider *::after { opacity: 0; transform: rotate(-45deg); transition: opacity 300ms $swift-ease-in-out-timing-function; - color: white; } .md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label { From 4bb1b47881f305598fc5456f3f615e2141633012 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Mon, 12 Sep 2016 14:44:43 -0700 Subject: [PATCH 4/9] all package theme --- src/lib/all/_all_theme.scss | 43 +++++++++++++++++++ .../_core.scss => theming/_core-theme.scss} | 4 +- .../theming/prebuilt/deeppurple-amber.scss | 13 ++++++ .../core/theming/prebuilt/indigo-pink.scss | 42 ++---------------- 4 files changed, 61 insertions(+), 41 deletions(-) create mode 100644 src/lib/all/_all_theme.scss rename src/lib/core/{style/_core.scss => theming/_core-theme.scss} (90%) create mode 100644 src/lib/core/theming/prebuilt/deeppurple-amber.scss diff --git a/src/lib/all/_all_theme.scss b/src/lib/all/_all_theme.scss new file mode 100644 index 000000000000..387d403bd8ac --- /dev/null +++ b/src/lib/all/_all_theme.scss @@ -0,0 +1,43 @@ +@import '../core/theming/core-theme'; +@import '../button/button-theme'; +@import '../button-toggle/button-toggle-theme'; +@import '../card/card-theme'; +@import '../checkbox/checkbox-theme'; +@import '../dialog/dialog-theme'; +@import '../grid-list/grid-list-theme'; +@import '../icon/icon-theme'; +@import '../input/input-theme'; +@import '../list/list-theme'; +@import '../menu/menu-theme'; +@import '../progress-bar/progress-bar-theme'; +@import '../progress-circle/progress-circle-theme'; +@import '../radio/radio-theme'; +@import '../sidenav/sidenav-theme'; +@import '../slide-toggle/slide-toggle-theme'; +@import '../slider/slider-theme'; +@import '../tabs/tabs-theme'; +@import '../toolbar/toolbar-theme'; +@import '../tooltip/tooltip-theme'; + + +@mixin angular-material-theme($theme) { + @include md-button-theme($theme); + @include md-button-toggle-theme($theme); + @include md-card-theme($theme); + @include md-checkbox-theme($theme); + @include md-dialog-theme($theme); + @include md-grid-list-theme($theme); + @include md-icon-theme($theme); + @include md-input-theme($theme); + @include md-list-theme($theme); + @include md-menu-theme($theme); + @include md-progress-bar-theme($theme); + @include md-progress-circle-theme($theme); + @include md-radio-theme($theme); + @include md-sidenav-theme($theme); + @include md-slide-toggle-theme($theme); + @include md-slider-theme($theme); + @include md-tabs-theme($theme); + @include md-toolbar-theme($theme); + @include md-tooltip-theme($theme); +} diff --git a/src/lib/core/style/_core.scss b/src/lib/core/theming/_core-theme.scss similarity index 90% rename from src/lib/core/style/_core.scss rename to src/lib/core/theming/_core-theme.scss index bb6ffb759c3f..a0aadf72a04e 100644 --- a/src/lib/core/style/_core.scss +++ b/src/lib/core/theming/_core-theme.scss @@ -1,8 +1,8 @@ // Core styles that can be used to apply material design treatments to any element. @import '../a11y/live-announcer'; -@import 'elevation'; +@import '../style/elevation'; @import '../overlay/overlay'; -@import 'ripple'; +@import '../style/ripple'; @mixin md-core-theme($theme) { // Provides external CSS classes for each elevation value. Each CSS class is formatted as diff --git a/src/lib/core/theming/prebuilt/deeppurple-amber.scss b/src/lib/core/theming/prebuilt/deeppurple-amber.scss new file mode 100644 index 000000000000..6c509d893468 --- /dev/null +++ b/src/lib/core/theming/prebuilt/deeppurple-amber.scss @@ -0,0 +1,13 @@ +@import '../theming'; +@import '../palette'; +@import '../core-theme'; +@import '../../../all/all_theme'; + + +$primary: md-palette($md-deep-purple); +$accent: md-palette($md-amber, A200, A100, A400); +$warn: md-palette($md-red); + +$theme: md-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss index 20dfdc21a004..ae9b7f8fcb59 100644 --- a/src/lib/core/theming/prebuilt/indigo-pink.scss +++ b/src/lib/core/theming/prebuilt/indigo-pink.scss @@ -1,25 +1,7 @@ @import '../theming'; @import '../palette'; -@import '../../style/core'; -@import '../../../button/button-theme'; -@import '../../../button-toggle/button-toggle-theme'; -@import '../../../card/card-theme'; -@import '../../../checkbox/checkbox-theme'; -@import '../../../dialog/dialog-theme'; -@import '../../../grid-list/grid-list-theme'; -@import '../../../icon/icon-theme'; -@import '../../../input/input-theme'; -@import '../../../list/list-theme'; -@import '../../../menu/menu-theme'; -@import '../../../progress-bar/progress-bar-theme'; -@import '../../../progress-circle/progress-circle-theme'; -@import '../../../radio/radio-theme'; -@import '../../../sidenav/sidenav-theme'; -@import '../../../slide-toggle/slide-toggle-theme'; -@import '../../../slider/slider-theme'; -@import '../../../tabs/tabs-theme'; -@import '../../../toolbar/toolbar-theme'; -@import '../../../tooltip/tooltip-theme'; +@import '../core-theme'; +@import '../../../all/all_theme'; $primary: md-palette($md-indigo); @@ -28,22 +10,4 @@ $warn: md-palette($md-red); $theme: md-light-theme($primary, $accent, $warn); -@include md-button-theme($theme); -@include md-button-toggle-theme($theme); -@include md-card-theme($theme); -@include md-checkbox-theme($theme); -@include md-dialog-theme($theme); -@include md-grid-list-theme($theme); -@include md-icon-theme($theme); -@include md-input-theme($theme); -@include md-list-theme($theme); -@include md-menu-theme($theme); -@include md-progress-bar-theme($theme); -@include md-progress-circle-theme($theme); -@include md-radio-theme($theme); -@include md-sidenav-theme($theme); -@include md-slide-toggle-theme($theme); -@include md-slider-theme($theme); -@include md-tabs-theme($theme); -@include md-toolbar-theme($theme); -@include md-tooltip-theme($theme); +@include angular-material-theme($theme); From a8c5425104c5cf8a79597488b4c7523672ab5abd Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Mon, 12 Sep 2016 17:54:55 -0700 Subject: [PATCH 5/9] fix scss imports --- src/lib/core/a11y/live-announcer.scss | 3 ++- src/lib/core/theming/prebuilt/indigo-pink.scss | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/core/a11y/live-announcer.scss b/src/lib/core/a11y/live-announcer.scss index 6ea7cfb6fa52..707e637e0df4 100644 --- a/src/lib/core/a11y/live-announcer.scss +++ b/src/lib/core/a11y/live-announcer.scss @@ -1,4 +1,5 @@ -@import 'mixins'; +@import '../style/mixins'; + .md-live-announcer { @include md-visually-hidden(); diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss index ae9b7f8fcb59..c8ee6df7803b 100644 --- a/src/lib/core/theming/prebuilt/indigo-pink.scss +++ b/src/lib/core/theming/prebuilt/indigo-pink.scss @@ -1,6 +1,5 @@ @import '../theming'; @import '../palette'; -@import '../core-theme'; @import '../../../all/all_theme'; From 477f8896e96fc8b2b4e44ff734b621f2a5cee63a Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Tue, 13 Sep 2016 14:40:58 -0700 Subject: [PATCH 6/9] use consistent comment style --- src/lib/all/_all_theme.scss | 3 +- src/lib/button-toggle/button-toggle.html | 2 +- src/lib/button-toggle/button-toggle.scss | 5 - src/lib/button/_button-base.scss | 4 +- src/lib/button/_button-theme.scss | 4 +- src/lib/card/card.scss | 8 +- src/lib/checkbox/_checkbox-theme.scss | 6 +- src/lib/checkbox/checkbox.html | 2 +- src/lib/checkbox/checkbox.scss | 92 ++---- .../{theming/_core-theme.scss => _core.scss} | 18 +- src/lib/core/a11y/_a11y.scss | 13 + src/lib/core/a11y/live-announcer.scss | 6 - src/lib/core/a11y/live-announcer.ts | 2 +- src/lib/core/overlay/overlay.scss | 96 ++++--- src/lib/core/ripple/_ripple.scss | 106 +++++++ ...button-mixins.scss => _button-common.scss} | 5 +- .../{_list-shared.scss => _list-common.scss} | 39 +-- src/lib/core/style/_mixins.scss | 66 ----- src/lib/core/style/_ripple.scss | 64 ----- src/lib/core/style/_sidenav-mixins.scss | 4 +- .../theming/prebuilt/deeppurple-amber.scss | 6 +- .../core/theming/prebuilt/indigo-pink.scss | 5 + src/lib/grid-list/grid-list.scss | 10 +- src/lib/icon/icon.scss | 2 +- src/lib/input/input.scss | 268 +++++++++--------- src/lib/input/input.ts | 4 +- src/lib/list/list.scss | 18 +- src/lib/menu/menu.scss | 4 +- src/lib/progress-bar/_progress-bar-theme.scss | 23 +- src/lib/progress-bar/progress-bar.scss | 60 ++-- src/lib/progress-circle/progress-circle.scss | 17 +- src/lib/radio/radio.html | 2 +- src/lib/radio/radio.scss | 8 +- src/lib/sidenav/sidenav-transitions.scss | 4 +- src/lib/sidenav/sidenav.scss | 24 +- src/lib/slide-toggle/slide-toggle.html | 2 +- src/lib/slide-toggle/slide-toggle.scss | 10 +- src/lib/slider/slider.scss | 21 +- src/lib/tabs/tab-group.scss | 10 +- src/lib/toolbar/toolbar.scss | 1 - 40 files changed, 484 insertions(+), 560 deletions(-) rename src/lib/core/{theming/_core-theme.scss => _core.scss} (60%) create mode 100644 src/lib/core/a11y/_a11y.scss delete mode 100644 src/lib/core/a11y/live-announcer.scss create mode 100644 src/lib/core/ripple/_ripple.scss rename src/lib/core/style/{_button-mixins.scss => _button-common.scss} (53%) rename src/lib/core/style/{_list-shared.scss => _list-common.scss} (66%) delete mode 100644 src/lib/core/style/_mixins.scss delete mode 100644 src/lib/core/style/_ripple.scss diff --git a/src/lib/all/_all_theme.scss b/src/lib/all/_all_theme.scss index 387d403bd8ac..368e5851f1cb 100644 --- a/src/lib/all/_all_theme.scss +++ b/src/lib/all/_all_theme.scss @@ -1,4 +1,4 @@ -@import '../core/theming/core-theme'; +@import '../core/core'; @import '../button/button-theme'; @import '../button-toggle/button-toggle-theme'; @import '../card/card-theme'; @@ -21,6 +21,7 @@ @mixin angular-material-theme($theme) { + @include md-core-theme($theme); @include md-button-theme($theme); @include md-button-toggle-theme($theme); @include md-card-theme($theme); diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html index c08e5370c55d..a4945b9ca8c5 100644 --- a/src/lib/button-toggle/button-toggle.html +++ b/src/lib/button-toggle/button-toggle.html @@ -1,5 +1,5 @@