Use Primary/Accent color for button background

[pingshunhuangalex]

Reproduction Steps:

1. Update to Material UI 2.0
2. Update packages or do something to trigger notifications with buttons
3. Button background is the same as notification background which needs more contrast

Expected behavior:

Button background should have more contrast to notification background

Observed behavior:

Button background is the same as notification background, and if I have a close look at it, there seems to have a black border outside the button shadow when I hover over the button.

Screenshots and GIFs

Atom version: Atom 1.17.0-beta4 OS and version: Windows 10 64-bit

Installed packages:

Built-in Atom Packages (90)
├── atom-dark-syntax@0.28.0
├── atom-dark-ui@0.53.0
├── atom-light-syntax@0.29.0
├── atom-light-ui@0.46.0
├── base16-tomorrow-dark-theme@1.5.0
├── base16-tomorrow-light-theme@1.5.0
├── one-dark-ui@1.10.3
├── one-light-ui@1.10.3
├── one-dark-syntax@1.7.1
├── one-light-syntax@1.7.1
├── solarized-dark-syntax@1.1.2
├── solarized-light-syntax@1.1.2
├── about@1.7.6
├── archive-view@0.63.2
├── autocomplete-atom-api@0.10.1
├── autocomplete-css@0.16.1
├── autocomplete-html@0.7.3
├── autocomplete-plus@2.35.3
├── autocomplete-snippets@1.11.0
├── autoflow@0.29.0
├── autosave@0.24.2
├── background-tips@0.27.0
├── bookmarks@0.44.3
├── bracket-matcher@0.85.5
├── command-palette@0.40.4
├── dalek@0.2.1
├── deprecation-cop@0.56.7
├── dev-live-reload@0.47.1
├── encoding-selector@0.23.3
├── exception-reporting@0.41.3
├── find-and-replace@0.207.5
├── fuzzy-finder@1.5.4
├── git-diff@1.3.5
├── go-to-line@0.32.0
├── grammar-selector@0.49.4
├── image-view@0.61.2
├── incompatible-packages@0.27.2
├── keybinding-resolver@0.38.0
├── line-ending-selector@0.6.3
├── link@0.31.3
├── markdown-preview@0.159.11
├── metrics@1.2.2
├── notifications@0.67.1
├── open-on-github@1.2.1
├── package-generator@1.1.1
├── settings-view@0.249.4
├── snippets@1.1.4
├── spell-check@0.71.4
├── status-bar@1.8.7
├── styleguide@0.49.6
├── symbols-view@0.115.5
├── tabs@0.105.4
├── timecop@0.36.0
├── tree-view@0.217.0-5
├── update-package-dependencies@0.11.0
├── welcome@0.36.2
├── whitespace@0.36.2
├── wrap-guide@0.40.1
├── language-c@0.57.0
├── language-clojure@0.22.2
├── language-coffee-script@0.48.6
├── language-csharp@0.14.2
├── language-css@0.42.2
├── language-gfm@0.88.1
├── language-git@0.19.0
├── language-go@0.43.1
├── language-html@0.47.2
├── language-hyperlink@0.16.1
├── language-java@0.27.0
├── language-javascript@0.126.1
├── language-json@0.19.0
├── language-less@0.32.0
├── language-make@0.22.3
├── language-mustache@0.13.1
├── language-objective-c@0.15.1
├── language-perl@0.37.0
├── language-php@0.38.0
├── language-property-list@0.9.1
├── language-python@0.45.2
├── language-ruby@0.71.0
├── language-ruby-on-rails@0.25.2
├── language-sass@0.59.0
├── language-shellscript@0.25.0
├── language-source@0.9.0
├── language-sql@0.25.4
├── language-text@0.7.2
├── language-todo@0.29.1
├── language-toml@0.18.1
├── language-xml@0.35.0
└── language-yaml@0.29.0

Community Packages (56) C:\Users\Pingshun Huang\.atom\packages
├── advanced-open-file@0.16.6
├── aligner@0.22.3
├── atom-beautify@0.29.23
├── atom-material-syntax-dark@0.2.7
├── atom-material-ui@2.0.2
├── atom-terminal@0.8.0
├── atom-ternjs@0.18.3
├── autocomplete-modules@1.6.9
├── autocomplete-paths@1.0.5
├── autocomplete-python@1.8.63
├── autoprefixer@3.6.1
├── busy-signal@1.4.1
├── color-picker@2.2.5
├── cursor-history@0.10.1
├── d3-snippets@1.0.0
├── django-atom@0.2.4
├── emmet@2.4.3
├── expand-region@0.2.7
├── file-icons@2.1.4
├── git-log@0.4.1
├── git-plus@7.8.0
├── git-time-machine@1.5.9
├── highlight-selected@0.13.1
├── Hydrogen@1.12.1
├── hyperclick@0.0.40
├── intentions@1.1.2
├── js-hyperclick@1.11.0
├── language-babel@2.58.0
├── language-vue@0.21.2
├── linter@2.1.4
├── linter-coffeelint@1.2.1
├── linter-eslint@8.1.7
├── linter-flake8@2.2.1
├── linter-jsonlint@1.3.0
├── linter-markdown@4.0.1
├── linter-stylelint@3.10.0
├── linter-ui-default@1.3.0
├── linter-xmllint@1.4.1
├── merge-conflicts@1.4.4
├── minimap@4.28.2
├── minimap-pigments@0.2.2
├── open-recent@5.0.0
├── pigments@0.39.1
├── postcss-sorting@2.10.0
├── project-manager@3.3.4
├── qolor@0.4.1
├── regex-railroad-diagram@0.17.0
├── relative-numbers@0.7.1
├── sass-autocompile@0.13.3
├── sort-lines@0.14.0
├── source-preview@0.5.0
├── split-diff@1.3.1
├── sync-settings@0.8.1
├── tree-view-git-status@1.3.1
├── vim-mode-plus@0.91.0
└── vue-hyperclick@0.2.0

[silvestreh]

Your background is nearly black (#141414). Now that you bring this up I realize I'm not yet done with buttons. Ideally, they'll receive the theme's primary color if they're primary buttons (btn-primary I think was the className), otherwise they should match the background color.

[pingshunhuangalex]

Cool. I thought the background is just material-ui-dark background right? I didn't customise background using CSS on my own. Anyway, using primary color would be nice, or using accent color like what we had in 1.x is also fine.

Don't forget to check the shadow when the button is hovered over. I think I saw a thin black border outside the hovered shadow which may be a bug.

[pingshunhuangalex]

The theme doesn't seem to cover the Package rebuild section (div with class incompatible-package).