Update styles for modal panels.

src/panel-container-element.coffee

@@ -11,14 +11,14 @@ class PanelContainerElement extends HTMLElement
     @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
-    @setAttribute('location', @model.getLocation())
-
   panelAdded: ({panel, index}) ->
+    panelElement = panel.getView()
+    panelElement.setAttribute('location', @model.getLocation())
     if index >= @childNodes.length
-      @appendChild(panel.getView())
+      @appendChild(panelElement)
     else
       referenceItem = @childNodes[index + 1]
-      @insertBefore(panel.getView(), referenceItem)
+      @insertBefore(panelElement, referenceItem)
 
   panelRemoved: ({panel, index}) ->
     @removeChild(@childNodes[index])

src/workspace.coffee

@@ -674,6 +674,7 @@ class Workspace extends Model
   #
   # Returns a {Panel}
   addModalPanel: (options={}) ->
+    # TODO: remove these default classes. They are to supoprt existing themes.
     options.className ?= 'overlay from-top'
     @addPanel('modal', options)
 

static/overlay.less

@@ -1,6 +1,7 @@
 @import "ui-variables";
 
-.overlay {
+.overlay,
+atom-panel[location="modal"] {
   position: absolute;
   left: 50%;
   width: 500px;
@@ -8,7 +9,9 @@
   z-index: 9999;
   box-sizing: border-box;
 
-  background-color: #fff;
+  color: @text-color;
+  background-color: @overlay-background-color;
+
   padding: 10px;
 
   h1 {
@@ -21,30 +24,32 @@
   h2 {
     font-size: 1.3em;
   }
+
+  atom-text-editor.mini {
+    margin-bottom: 10px;
+  }
+
+  .message {
+    padding-top: 5px;
+    font-size: 11px;
+  }
+
+  &.mini {
+    width: 200px;
+    margin-left: -100px;
+    font-size: 12px;
+  }
 }
 
-.overlay atom-text-editor.mini {
-  margin-bottom: 10px;
-}
-
-.overlay .message {
-  padding-top: 5px;
-  font-size: 11px;
-}
-
-.overlay.mini {
-  width: 200px;
-  margin-left: -100px;
-  font-size: 12px;
-}
-
-.overlay.from-top {
+.overlay.from-top, // TODO: Remove the .from-* classes
+atom-panel[location="modal"] {
   top: 0;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
+// TODO: Remove these!
 .overlay.from-bottom {
   bottom: 0;
   border-bottom: none;