From e3b0cd8a143086bb3e5173b8d30f2cc8e8e42eca Mon Sep 17 00:00:00 2001 From: Elad Bezalel Date: Sun, 22 Nov 2015 02:08:41 +0200 Subject: [PATCH] style(theme): all components looks good on dark theme Components didn't looked like the spec on dark theme, Made all dialogs/menus stay white on dark theme. Changed card color to be as spec. Changed background color to be `50` (on light theme) as spec defines. fixes #5744. Closes #5868. --- .../autocomplete/autocomplete-theme.scss | 4 +- src/components/button/button-theme.scss | 2 +- src/components/card/card-theme.scss | 2 +- src/components/datepicker/calendar-theme.scss | 10 ++-- .../datepicker/datePicker-theme.scss | 9 ++-- src/components/dialog/dialog-theme.scss | 3 +- src/components/menu/menu-theme.scss | 21 +++++++- .../menuBar/demoBasicUsage/index.html | 8 ++-- .../menuBar/demoBasicUsage/style.css | 1 - src/components/menuBar/menu-bar-theme.scss | 10 ++-- .../select/demoBasicUsage/index.html | 2 +- src/components/select/select-theme.scss | 48 +++++++++++-------- src/components/sidenav/sidenav-theme.scss | 4 +- src/core/services/theming/theme.palette.js | 2 +- src/core/services/theming/theming.js | 17 ++++--- 15 files changed, 84 insertions(+), 59 deletions(-) diff --git a/src/components/autocomplete/autocomplete-theme.scss b/src/components/autocomplete/autocomplete-theme.scss index a80fdd2d456..c7063bd9d35 100644 --- a/src/components/autocomplete/autocomplete-theme.scss +++ b/src/components/autocomplete/autocomplete-theme.scss @@ -1,5 +1,5 @@ md-autocomplete.md-THEME_NAME-theme { - background: '{{background-50}}'; + background: '{{background-A100}}'; &[disabled] { background: '{{background-100}}'; } @@ -15,7 +15,7 @@ md-autocomplete.md-THEME_NAME-theme { } } .md-autocomplete-suggestions-container.md-THEME_NAME-theme { - background: '{{background-50}}'; + background: '{{background-A100}}'; li { color: '{{background-900}}'; .highlight { diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss index e1479087228..6fb9d0520e0 100644 --- a/src/components/button/button-theme.scss +++ b/src/components/button/button-theme.scss @@ -141,7 +141,7 @@ a.md-button.md-THEME_NAME-theme, &.md-fab[disabled], &.md-accent[disabled], &.md-warn[disabled] { - color: '{{foreground-3}}' !important; + color: '{{foreground-3}}'; cursor: default; md-icon { diff --git a/src/components/card/card-theme.scss b/src/components/card/card-theme.scss index f12378bfa95..238406235e5 100644 --- a/src/components/card/card-theme.scss +++ b/src/components/card/card-theme.scss @@ -1,7 +1,7 @@ $card-border-radius: 2px !default; md-card.md-THEME_NAME-theme { - background-color: '{{background-color}}'; + background-color: '{{background-hue-1}}'; border-radius: $card-border-radius; .md-card-image { diff --git a/src/components/datepicker/calendar-theme.scss b/src/components/datepicker/calendar-theme.scss index 3b326bda7ce..db254f5f73b 100644 --- a/src/components/datepicker/calendar-theme.scss +++ b/src/components/datepicker/calendar-theme.scss @@ -1,17 +1,17 @@ /** Theme styles for mdCalendar. */ .md-calendar.md-THEME_NAME-theme { - color: '{{foreground-1}}'; + background: '{{background-A100}}'; + color: '{{background-1000-0.87}}'; tr:last-child td { border-bottom-color: '{{background-200}}'; } } .md-THEME_NAME-theme { - .md-calendar-day-header { - background: '{{background-hue-1}}'; - color: '{{foreground-1}}'; + background: '{{background-300}}'; + color: '{{background-1000-0.87}}'; } .md-calendar-date.md-calendar-date-today { @@ -34,7 +34,7 @@ } .md-calendar-date-selection-indicator:hover { - background: '{{background-hue-1}}'; + background: '{{background-300}}'; } // Selected style goes after hover and focus so that it takes priority. diff --git a/src/components/datepicker/datePicker-theme.scss b/src/components/datepicker/datePicker-theme.scss index 371e19f99bc..15abe9b615e 100644 --- a/src/components/datepicker/datePicker-theme.scss +++ b/src/components/datepicker/datePicker-theme.scss @@ -8,7 +8,7 @@ md-datepicker.md-THEME_NAME-theme { .md-datepicker-input { @include input-placeholder-color('{{foreground-3}}'); - color: '{{background-contrast}}'; + color: '{{foreground-1}}'; background: '{{background-color}}'; } @@ -25,7 +25,7 @@ md-datepicker.md-THEME_NAME-theme { } .md-datepicker-calendar-pane { - border-color: '{{background-300}}'; + border-color: '{{background-hue-1}}'; } .md-datepicker-triangle-button { @@ -45,7 +45,10 @@ md-datepicker.md-THEME_NAME-theme { } } - .md-datepicker-calendar, + .md-datepicker-calendar { + background: '{{background-A100}}'; + } + .md-datepicker-input-mask-opaque { background: '{{background-color}}'; } diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss index e51d10a06a4..2d874601ee2 100644 --- a/src/components/dialog/dialog-theme.scss +++ b/src/components/dialog/dialog-theme.scss @@ -2,7 +2,7 @@ $dialog-border-radius: 4px !default; md-dialog.md-THEME_NAME-theme { border-radius: $dialog-border-radius; - background-color: '{{background-color}}'; + background-color: '{{background-hue-1}}'; &.md-content-overflow { .md-actions, md-dialog-actions { @@ -10,4 +10,3 @@ md-dialog.md-THEME_NAME-theme { } } } - diff --git a/src/components/menu/menu-theme.scss b/src/components/menu/menu-theme.scss index 4a3134ddd4c..127996200d4 100644 --- a/src/components/menu/menu-theme.scss +++ b/src/components/menu/menu-theme.scss @@ -1,7 +1,24 @@ md-menu-content.md-THEME_NAME-theme { - background-color: '{{background-color}}'; + background-color: '{{background-A100}}'; + + md-menu-item { + color: '{{background-1000-0.87}}'; + + md-icon { + color: '{{background-1000-0.54}}'; + } + + .md-button[disabled] { + color: '{{background-1000-0.25}}'; + + md-icon { + color: '{{background-1000-0.25}}'; + } + } + + } md-menu-divider { - background-color: '{{foreground-4}}'; + background-color: '{{background-1000-0.11}}'; } } diff --git a/src/components/menuBar/demoBasicUsage/index.html b/src/components/menuBar/demoBasicUsage/index.html index ee75930ef95..524f270e2d0 100644 --- a/src/components/menuBar/demoBasicUsage/index.html +++ b/src/components/menuBar/demoBasicUsage/index.html @@ -176,12 +176,12 @@

Untitled document

-
-
+ +

Untitled document

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-
-
+ + diff --git a/src/components/menuBar/demoBasicUsage/style.css b/src/components/menuBar/demoBasicUsage/style.css index 01623dc0bac..ee84a8c018e 100644 --- a/src/components/menuBar/demoBasicUsage/style.css +++ b/src/components/menuBar/demoBasicUsage/style.css @@ -5,7 +5,6 @@ .page { margin: 0 auto; - background-color: white; padding: 24px; max-width: 680px; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); diff --git a/src/components/menuBar/menu-bar-theme.scss b/src/components/menuBar/menu-bar-theme.scss index abb87d59df1..ac0fce985c5 100644 --- a/src/components/menuBar/menu-bar-theme.scss +++ b/src/components/menuBar/menu-bar-theme.scss @@ -23,7 +23,7 @@ md-menu-bar.md-THEME_NAME-theme { md-menu-content.md-THEME_NAME-theme { .md-menu > .md-button:after { - color: '{{foreground-2}}'; + color: '{{background-1000-0.54}}'; } .md-menu._md-open > .md-button { @@ -32,13 +32,13 @@ md-menu-content.md-THEME_NAME-theme { } md-toolbar.md-THEME_NAME-theme.md-menu-toolbar { - background-color: '{{background-color}}'; - color: '{{foreground-1}}'; + background-color: '{{background-A100}}'; + color: '{{background-1000}}'; md-toolbar-filler { background-color: '{{primary-color}}'; - color: '{{primary-contrast}}'; + color: '{{background-A100-0.87}}'; md-icon { - color: '{{primary-contrast}}'; + color: '{{background-A100-0.87}}'; } } diff --git a/src/components/select/demoBasicUsage/index.html b/src/components/select/demoBasicUsage/index.html index 8c288bf83c7..4c3b25b8441 100755 --- a/src/components/select/demoBasicUsage/index.html +++ b/src/components/select/demoBasicUsage/index.html @@ -16,7 +16,7 @@

Enter an address

- + {{state.abbrev}} diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss index 250e67e32fb..ee704ff5e55 100644 --- a/src/components/select/select-theme.scss +++ b/src/components/select/select-theme.scss @@ -42,30 +42,36 @@ md-select.md-THEME_NAME-theme { } md-select-menu.md-THEME_NAME-theme { - md-option[disabled] { - color: '{{foreground-3}}'; - } + md-content { + background: '{{background-A100}}'; - md-optgroup { - color: '{{foreground-2}}'; - md-option { - color: '{{foreground-1}}'; - } - } - md-option[selected] { - color: '{{primary-500}}'; - &:focus { - color: '{{primary-600}}'; + md-optgroup { + color: '{{background-600-0.87}}'; } - &.md-accent { - color: '{{accent-500}}'; - &:focus { - color: '{{accent-600}}'; + + md-option { + color: '{{background-900-0.87}}'; + + &[disabled] { + color: '{{background-400-0.87}}'; + } + + &:focus:not([disabled]) { + background: '{{background-200}}'; + } + + &[selected] { + color: '{{primary-500}}'; + &:focus { + color: '{{primary-600}}'; + } + &.md-accent { + color: '{{accent-500}}'; + &:focus { + color: '{{accent-600}}'; + } + } } } } - md-option:focus:not([disabled]):not([selected]) { - background: '{{background-200}}'; - } - } diff --git a/src/components/sidenav/sidenav-theme.scss b/src/components/sidenav/sidenav-theme.scss index 23ea2e33f21..94a74d365c4 100644 --- a/src/components/sidenav/sidenav-theme.scss +++ b/src/components/sidenav/sidenav-theme.scss @@ -1,3 +1,5 @@ md-sidenav.md-THEME_NAME-theme { - background-color: '{{background-color}}'; + &, md-content { + background-color: '{{background-hue-1}}'; + } } diff --git a/src/core/services/theming/theme.palette.js b/src/core/services/theming/theme.palette.js index af6df4fea6a..1a4cef66648 100644 --- a/src/core/services/theming/theme.palette.js +++ b/src/core/services/theming/theme.palette.js @@ -333,7 +333,7 @@ angular.module('material.core.theming.palette', []) '1000': '#000000', 'A100': '#ffffff', 'A200': '#eeeeee', - 'A400': '#bdbdbd', + 'A400': '#303030', 'A700': '#616161', 'contrastDefaultColor': 'dark', 'contrastLightColors': '600 700 800 900' diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js index 25a7314d7eb..05b4f89875a 100644 --- a/src/core/services/theming/theming.js +++ b/src/core/services/theming/theming.js @@ -97,19 +97,19 @@ var LIGHT_DEFAULT_HUES = { 'hue-3': 'A700' }, 'background': { - 'default': 'A100', - 'hue-1': '300', - 'hue-2': '800', - 'hue-3': '900' + 'default': '50', + 'hue-1': 'A100', + 'hue-2': '100', + 'hue-3': '300' } }; var DARK_DEFAULT_HUES = { 'background': { - 'default': '800', - 'hue-1': '600', - 'hue-2': '300', - 'hue-3': '900' + 'default': 'A400', + 'hue-1': '800', + 'hue-2': '900', + 'hue-3': '1000' } }; THEME_COLOR_TYPES.forEach(function(colorType) { @@ -675,4 +675,3 @@ function rgba(rgbArray, opacity) { 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' : 'rgb(' + rgbArray.join(',') + ')'; } -