feat(dialog): remove dark theme (#2079)

material-components · Jan 25, 2018 · 3af1221 · 3af1221
1 parent ac43276
commit 3af1221
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 82 deletions.
diff --git a/demos/dialog.html b/demos/dialog.html
@@ -34,9 +34,6 @@
       .demo-content > button {
         margin-bottom: 6px;
       }
-      .mdc-theme--dark {
-        background-color: #303030;
-      }
 
       section.demo-content {
         padding: 24px;
@@ -53,11 +50,6 @@
         align-items: center;
         justify-content: center;
       }
-
-      .mdc-theme--dark, .section-dark-theme {
-        background: #262626;
-        color: white;
-      }
     </style>
   </head>
   <body class="mdc-typography">
@@ -197,50 +189,6 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
           <label for="toggle-rtl">Toggle RTL</label>
         </div>
       </section>
-
-      <section class="example mdc-theme--dark">
-        <h2>Dark Theme (mdc-theme--dark)</h2>
-        <div class="dialog-container">
-          <aside class="catalog-dialog-demo mdc-dialog mdc-dialog--open">
-            <div class="mdc-dialog__surface">
-              <header class="mdc-dialog__header">
-                <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
-                  Are you happy?
-                </h2>
-              </header>
-              <section id="mdc-dialog-default-description" class="mdc-dialog__body">
-                Please check the left and right side of this element for fun.
-              </section>
-              <footer class="mdc-dialog__footer">
-                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Cancel</button>
-                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Continue</button>
-              </footer>
-            </div>
-          </aside>
-        </div>
-      </section>
-
-      <section class="example section-dark-theme">
-        <h2>Dark Theme (mdc-dialog--theme-dark)</h2>
-        <div class="dialog-container">
-          <aside class="catalog-dialog-demo mdc-dialog mdc-dialog--theme-dark mdc-dialog--open">
-            <div class="mdc-dialog__surface">
-              <header class="mdc-dialog__header">
-                <h2 id="mdc-dialog-default-label" class="mdc-dialog__header__title">
-                  Are you happy?
-                </h2>
-              </header>
-              <section id="mdc-dialog-default-description" class="mdc-dialog__body">
-                Please check the left and right side of this element for fun.
-              </section>
-              <footer class="mdc-dialog__footer">
-                <button type="button" class="mdc-button mdc-button--theme-dark mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Cancel</button>
-                <button type="button" class="mdc-button mdc-button--theme-dark mdc-dialog__footer__button mdc-dialog__footer__button--accept">Continue</button>
-              </footer>
-            </div>
-          </aside>
-        </div>
-      </section>
     </main>
 
     <script src="/assets/material-components-web.js" async></script>

diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -332,15 +332,3 @@ respectively within those methods.
 The `focusTrapFactory` can be used to override the `focus-trap` function used to create the focus
 trap. It's API is the same as focus-trap's [createFocusTrap](https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions) (which is what it defaults to). You can pass in a custom function for mocking out the
 actual function within tests, or to modify the arguments passed to the function before it's called.
-
-## Theming - Dark Theme Considerations
-
-When using `mdc-theme--dark` / `mdc-dialog--theme-dark`, the dialog by default sets its background color to `#303030`. You can override this by either overridding the
-`--mdc-dialog-dark-theme-bg-color`, overridding the `$mdc-dialog-dark-theme-bg-color` sass variable, or directly in CSS:
-
-```css
-.mdc-theme--dark .mdc-dialog__surface,
-.mdc-dialog--theme-dark .mdc-dialog__surface {
-  background-color: /* custom bg color */;
-}
-```
diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
@@ -17,16 +17,9 @@
 @import "@material/animation/functions";
 @import "@material/elevation/mixins";
 @import "@material/rtl/mixins";
-@import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
 
-$mdc-dialog-dark-theme-bg-color: #303030 !default;
-
-:root {
-  --mdc-dialog-dark-theme-bg-color: #{$mdc-dialog-dark-theme-bg-color};
-}
-
 // postcss-bem-linter: define dialog
 
 .mdc-dialog {
@@ -69,13 +62,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
   border-radius: 2px;
   opacity: 0;
 
-  @include mdc-theme-dark(".mdc-dialog") {
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
-    background-color: $mdc-dialog-dark-theme-bg-color;
-    background-color: var(--mdc-dialog-dark-theme-bg-color, #{$mdc-dialog-dark-theme-bg-color});
-  }
-
   @include mdc-rtl(".mdc-dialog") {
     text-align: right;
   }
@@ -108,10 +94,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
 
   margin-top: 20px;
   padding: 0 24px 24px;
-
-  @include mdc-theme-dark(".mdc-dialog") {
-    @include mdc-theme-prop(color, text-secondary-on-dark);
-  }
 }
 
 .mdc-dialog__body--scrollable {