Moving static colors over to Less vars (#8563)

* Sweep #1 * moving a few more colors, fixing an import issue. * another include, another color nabbed. * more whittling. * moving filterbox css to less, standardizing colors in there. * nixing the css file I meant to nab in the last commit * Moving the variables file to a more global/sensible (I hope?) location. * FilterableTable moved from CSS to LESS, using color vars now. * more whittling * standardizing opacity stops * nails more colors, removes some old (seemingly unused) css * removing more dead css * DatasourceControl moved from CSS to LESS * BootstrapSliderWrapper CSS -> LESS * reactable-pagination CSS->LESS, color-conformed * FilterBadgeIcon CSS->LESS, conformed * deleting unused/deprecated css * welcome.css -> welcome.less (is this even being used?) * main.css -> main.less, standardized * there were two main.css files - this should have been in the last commit. * explore.css -> explore.less (not used anywhere?) * sql.css -> sql.less (also not used anywhere?) * another main.css -> main.less, standardized on colors * time to add shades and tints! * caught some colors in SVG that should be in LESS. * nixing commented css * deleting commented code * pulling in z-index vars lost in a conflict resolution
apache · Nov 20, 2019 · 6919ee4 · 6919ee4
1 parent e490414
commit 6919ee4
Show file tree

Hide file tree

Showing 43 changed files with 292 additions and 462 deletions.
diff --git a/superset/assets/src/SqlLab/App.jsx b/superset/assets/src/SqlLab/App.jsx
@@ -32,8 +32,8 @@ import { BYTES_PER_CHAR, KB_STORAGE } from './constants';
 import setupApp from '../setup/setupApp';
 
 import './main.less';
-import '../../stylesheets/reactable-pagination.css';
-import '../components/FilterableTable/FilterableTableStyles.css';
+import '../../stylesheets/reactable-pagination.less';
+import '../components/FilterableTable/FilterableTableStyles.less';
 
 setupApp();
 

diff --git a/superset/assets/src/SqlLab/main.less b/superset/assets/src/SqlLab/main.less
@@ -17,6 +17,7 @@
  * under the License.
  */
 @import "../../stylesheets/less/cosmo/variables.less";
+@import "../../stylesheets/less/variables.less";
 
 body {
   overflow: hidden;
@@ -48,7 +49,7 @@ body {
 .tab-content {
   height: 100%;
   position: relative;
-  background-color: #fff;
+  background-color: @lightest;
 
   > .tab-pane {
     position: absolute;
@@ -60,7 +61,7 @@ body {
 }
 
 .Workspace .btn-sm {
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 2px fade(@darkest, @opacity-light);
   margin-top: 2px;
   padding: 4px;
 }
@@ -117,10 +118,10 @@ div.Workspace {
 }
 .sql-toolbar {
   padding: 10px;
-  background-color: #e8e8e8;
+  background-color: @gray-bg;
   display: flex;
   justify-content: space-between;
-  border: 1px solid #ccc;
+  border: 1px solid @gray-light;
   border-top: 0;
 
   form {
@@ -140,7 +141,7 @@ div.Workspace {
   width: 10px;
   height: 10px;
   display: inline-block;
-  background-color: #ccc;
+  background-color: @gray-light;
   line-height: 8px;
   text-align: center;
   vertical-align: middle;
@@ -149,14 +150,14 @@ div.Workspace {
   font-weight: bold;
 }
 .running {
-  background-color: lime;
-  color: black;
+  background-color: fade(@success, @opacity-heavy);
+  color: @darkest;
 }
 .success {
-  background-color: #4ac15f;
+  background-color: @success;
 }
 .failed {
-  background-color: red;
+  background-color: @error;
 }
 
 .handle {
@@ -167,9 +168,9 @@ div.Workspace {
   position: absolute;
   width: 300px;
   opacity: 0.85;
-  border: 1px solid #aaa;
+  border: 1px solid @gray-heading;
   max-height: 600px;
-  box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px;
+  box-shadow: fade(@darkest, @opacity-heavy) 5px 5px 25px;
 }
 .SqlLab pre {
   padding: 0px !important;
@@ -235,11 +236,6 @@ div.Workspace {
   height: 100%;
   padding: 10px;
 
-  .clock {
-    background-color: orange;
-    padding: 5px;
-  }
-
   .schemaPane {
     flex: 0 0 300px;
     max-width: 300px;
@@ -250,42 +246,6 @@ div.Workspace {
     flex: 1 1 auto;
     padding-left: 10px;
   }
-
-  .schemaPane-enter-done,
-  .schemaPane-exit {
-    transform: translateX(0);
-  }
-
-  .schemaPane-exit-active {
-    transform: translateX(-120%);
-  }
-
-  .schemaPane-enter-active {
-    transform: translateX(0);
-    max-width: 300px;
-  }
-
-  .schemaPane-enter,
-  .schemaPane-exit-done {
-    max-width: 0;
-    transform: translateX(-120%);
-    overflow: hidden;
-  }
-
-  .schemaPane-exit-done + .queryPane {
-    margin-left: 0;
-  }
-
-  .gutter {
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    width: 3%;
-    margin: 3px 47%;
-  }
-
-  .gutter.gutter-vertical {
-    cursor: row-resize;
-  }
 }
 
 .SqlEditorLeftBar {
@@ -294,7 +254,7 @@ div.Workspace {
   flex-direction: column;
 
   .divider {
-    border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid @gray-bg;
     margin: 15px 0;
   }
 
@@ -327,7 +287,7 @@ div.tablePopover:hover {
 }
 
 .ace_editor {
-  border: 1px solid #ccc;
+  border: 1px solid @gray-light;
 }
 
 .Select-menu-outer {
@@ -345,7 +305,7 @@ div.tablePopover:hover {
 }
 
 .ace_scroller {
-  background-color: #f4f4f4;
+  background-color: @gray-bg;
 }
 
 .TableElement {
@@ -385,7 +345,7 @@ a.Link {
   background: transparent;
   border: none;
   text-align: left;
-  color: white;
+  color: @lightest;
   font-size: 10px;
 }
 .tooltip-inner {

diff --git a/superset/assets/src/components/BootstrapSliderWrapper.jsx b/superset/assets/src/components/BootstrapSliderWrapper.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import ReactBootstrapSlider from 'react-bootstrap-slider';
 import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';
-import './BootstrapSliderWrapper.css';
+import './BootstrapSliderWrapper.less';
 
 export default function BootstrapSliderWrapper(props) {
   return (

diff --git a/...src/components/BootstrapSliderWrapper.css → ...rc/components/BootstrapSliderWrapper.less b/...src/components/BootstrapSliderWrapper.css → ...rc/components/BootstrapSliderWrapper.less
@@ -16,10 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+@import "../../stylesheets/less/variables.less";
+
 .BootstrapSliderWrapper .slider-selection {
-  background: #efefef;
+  background: @gray-bg;
 }
 
 .BootstrapSliderWrapper .slider-handle {
-  background: #b3b3b3;
+  background: @gray-light;
 }
diff --git a/superset/assets/src/components/FilterBadgeIcon.jsx b/superset/assets/src/components/FilterBadgeIcon.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './FilterBadgeIcon.css';
+import './FilterBadgeIcon.less';
 
 const propTypes = {
   colorCode: PropTypes.string,
@@ -28,7 +28,7 @@ const propTypes = {
 export default function FilterBadgeIcon({ colorCode = '' }) {
   return (
     <svg className={`filter-badge ${colorCode}`} width="20" height="20" viewBox="0 0 20 20">
-      <path d="M4 5H16V7H4V5ZM6 9H14V11H6V9ZM12 13H8V15H12V13Z" fill="#fff" />
+      <path d="M4 5H16V7H4V5ZM6 9H14V11H6V9ZM12 13H8V15H12V13Z" />
     </svg>
   );
 }

diff --git a/...assets/src/components/FilterBadgeIcon.css → ...ssets/src/components/FilterBadgeIcon.less b/...assets/src/components/FilterBadgeIcon.css → ...ssets/src/components/FilterBadgeIcon.less
@@ -16,19 +16,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+@import "../../stylesheets/less/variables.less";
+
 .filter-badge {
   width: 20px;
   height: 20px;
-  background-color: #bababa;
+  background-color: @gray-light;
   border-radius: 2px;
   z-index: 10;
+  path {
+    fill: @lightest;
+  }
 }
 .filter-badge:hover {
   cursor: pointer;
-  background-color: #9e9e9e;
+  background-color: @gray;
 }
 
 .color-bar.badge-group,
 .filter-badge.badge-group {
-  background-color: rgb(72, 72, 72);
+  background-color: @gray-dark;
 }
diff --git a/superset/assets/src/components/FilterEditIcon.jsx b/superset/assets/src/components/FilterEditIcon.jsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './FilterEditIcon.css';
+import './FilterEditIcon.less';
 
 const propTypes = {
   clickIconHandler: PropTypes.func,
@@ -34,7 +34,7 @@ export default function FilterEditIcon({ clickIconHandler = () => {} }) {
       className="filter-edit"
       viewBox="0 0 12 12"
     >
-      <path d="M11.8049 1.75476C12.0649 2.01472 12.0649 2.43466 11.8049 2.69463L10.5851 3.91446L8.08547 1.4148L9.3053 0.194973C9.56526 -0.064991 9.9852 -0.064991 10.2452 0.194973L11.8049 1.75476ZM0 12V9.50035L7.37231 2.12804L9.87196 4.62769L2.49965 12H0Z" fill="#fff" />
+      <path d="M11.8049 1.75476C12.0649 2.01472 12.0649 2.43466 11.8049 2.69463L10.5851 3.91446L8.08547 1.4148L9.3053 0.194973C9.56526 -0.064991 9.9852 -0.064991 10.2452 0.194973L11.8049 1.75476ZM0 12V9.50035L7.37231 2.12804L9.87196 4.62769L2.49965 12H0Z" />
     </svg>
   );
 }

diff --git a/.../assets/src/components/FilterEditIcon.css → ...assets/src/components/FilterEditIcon.less b/.../assets/src/components/FilterEditIcon.css → ...assets/src/components/FilterEditIcon.less
@@ -16,6 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+@import "../../stylesheets/less/variables.less";
+
 .filter-edit {
   cursor: pointer;
+  path {
+    fill: @lightest;
+  }
 }
diff --git a/...FilterableTable/FilterableTableStyles.css → ...ilterableTable/FilterableTableStyles.less b/...FilterableTable/FilterableTableStyles.css → ...ilterableTable/FilterableTableStyles.less
@@ -16,15 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+@import '../../../stylesheets/less/variables.less';
+
 .ReactVirtualized__Grid__innerScrollContainer {
-  border: 1px solid #ccc;
+  border: 1px solid;
 }
 .ReactVirtualized__Table__headerRow {
   font-weight: 700;
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: 1px solid #ccc;
+  border: 1px solid @gray-light;
 }
 .ReactVirtualized__Table__row {
   display: flex;
@@ -42,7 +45,7 @@
 .ReactVirtualized__Table__rowColumn,
 .grid-cell {
   min-width: 0px;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid @gray-light;
   align-self: center;
   padding: 12px;
   font-size: 12px;
@@ -75,8 +78,8 @@
   width: 1em;
   fill: currentColor;
 }
-.even-row { background: #f2f2f2; }
-.odd-row { background: #ffffff; }
+.even-row { background: @gray-bg; }
+.odd-row { background: @lightest; }
 .header-style {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -86,7 +89,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #aaa;
+  color: @gray-heading;
 }
 .cell-text-for-measuring {
   font-family: Helvetica, Arial, sans-serif;

diff --git a/superset/assets/src/components/TableLoader.jsx b/superset/assets/src/components/TableLoader.jsx
@@ -24,7 +24,7 @@ import { SupersetClient } from '@superset-ui/connection';
 
 import withToasts from '../messageToasts/enhancers/withToasts';
 import Loading from '../components/Loading';
-import '../../stylesheets/reactable-pagination.css';
+import '../../stylesheets/reactable-pagination.less';
 
 const propTypes = {
   dataEndpoint: PropTypes.string.isRequired,

diff --git a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
@@ -50,12 +50,12 @@
     overflow: hidden;
     width: @builder-pane-width;
     height: 100%;
-    box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: -4px 0 4px 0 fade(@darkest, @opacity-light);
   }
 
   .slider-container {
     position: absolute;
-    background: white;
+    background: @lightest;
     width: @builder-pane-width * 2;
     height: 100vh;
     display: flex;
@@ -97,7 +97,7 @@
       margin: 0 16px 16px 16px;
       position: relative;
       cursor: move;
-      background: rgba(255, 255, 255, 0.4);
+      background: fade(@lightest, @opacity-medium-light);
 
       &:hover {
         background: @gray-bg;
@@ -132,7 +132,7 @@
 
     .is-added-label {
       background: @almost-black;
-      color: white;
+      color: @lightest;
       font-size: 12px;
       line-height: 1em;
       text-transform: uppercase;