Font styling consolidation (#8633)

* Font weights standardized * now with more glob! * Linting touchups * caught a low-value color declaration * first wave of font size alignment * getting the CRUD styles caught up to speed. * unneeded inline-block - float does that for ya. * a few errant colors that snuck in. * more font stylings. * caught some more colors that needed variable alignment * le typo * whittle, whittle * dead styles * whittling * whittling * whittling away at font sizes * since we appear to be adjusting icon sizes for optics, let's get this one too. * Prettier ✨ * whittling at line height standardization. * placing vars, take 1 * 2 more down... * cleaning out some styles that had no real effect. * seemingly no change if this is removed for consistency. * allowing one 8px line height for proper icon placement - adding comment. * last one, I reckon. * linting fixes
2019-11-27 10:36:25 -08:00 · 2019-11-27 10:36:25 -08:00 · 172b90ec50
parent f3555486f5
commit 172b90ec50
36 changed files with 224 additions and 191 deletions
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@ -17,7 +17,7 @@
    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors --progress",
    "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json ./{src,spec}/**/*.ts{,x}",
    "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x} && npm run clean-css",
-    "clean-css": "prettier --write src/**/*.{css,less,sass,scss}",
+    "clean-css": "prettier --write 'src/**/*.{css,less,sass,scss}'",
    "cypress": "cypress",
    "cypress-debug": "cypress open --config watchForFileChanges=true",
    "install-cypress": "npm install cypress@3.6.1"
--- a/superset/assets/src/CRUD/crud.less
+++ b/superset/assets/src/CRUD/crud.less
@ -16,6 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import "../../stylesheets/less/variables.less";
+
 .CRUD {
  .text-right {
    text-align: right;
@ -24,24 +26,24 @@
    padding: 10px;
  }
  .control-label {
-    font-weight: bold;
-    font-size: 16px;
+    font-weight: @font-weight-bold;
+    font-size: @font-size-l;
  }
  .tiny-cell {
    width: 5px;
  }
  i.fa-caret-down,
  i.fa-caret-up {
-    width: "5px";
+    width: 5px;
  }
  td.expanded {
-    border-top: "0px";
-    padding: "0px";
+    border-top: 0;
+    padding: 0;
  }
  .frame {
-    border: "1px solid #AAA";
+    border: 1px solid @gray-heading;
    border-radius: 5;
    padding: 10;
-    background: "#F4F4F4";
+    background: @gray-bg;
  }
 }
--- a/superset/assets/src/SqlLab/components/TableElement.jsx
+++ b/superset/assets/src/SqlLab/components/TableElement.jsx
@ -196,7 +196,7 @@ class TableElement extends React.PureComponent {
        <div className="pull-left">
          <a
            href="#"
-            className="table-name text-bigger"
+            className="table-name"
            onClick={(e) => { this.toggleTable(e); }}
          >
            <strong>
--- a/superset/assets/src/SqlLab/main.less
+++ b/superset/assets/src/SqlLab/main.less
@ -126,7 +126,8 @@ div.Workspace {
  form {
    margin-block-end: 0;
  }
-  .leftItems form, .rightItems {
+  .leftItems form,
+  .rightItems {
    & > span {
      margin-right: 5px;
      margin-bottom: 5px;
@ -151,12 +152,12 @@ div.Workspace {
  height: 10px;
  display: inline-block;
  background-color: @gray-light;
-  line-height: 8px;
+  line-height: 8px; // set specifically for closing 'x'
  text-align: center;
  vertical-align: middle;
-  font-size: 15px;
+  font-size: @font-size-m;
  margin-top: -3px;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
 }
 .running {
  background-color: fade(@success, @opacity-heavy);
@ -185,7 +186,7 @@ div.Workspace {
  padding: 0px !important;
  margin: 0px;
  border: none;
-  font-size: 12px;
+  font-size: @font-size-s;
  background-color: transparent !important;
 }

@ -233,7 +234,7 @@ div.Workspace {

  .ddbtn-tab {
    font-size: inherit;
-    font-weight: bold;
+    font-weight: @font-weight-bold;

    &:active {
      background: none;
@ -361,7 +362,7 @@ a.Link {
  border: none;
  text-align: left;
  color: @lightest;
-  font-size: 10px;
+  font-size: @font-size-xs;
 }
 .tooltip-inner {
  max-width: 500px;
@ -414,5 +415,5 @@ a.Link {
 }

 .cost-estimate {
-  font-size: 12px;
+  font-size: @font-size-s;
 }
--- a/superset/assets/src/chart/chart.less
+++ b/superset/assets/src/chart/chart.less
@ -16,7 +16,9 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import "../../stylesheets/less/variables.less";
+
 .chart-tooltip {
  opacity: 0.75;
-  font-size: 12px;
+  font-size: @font-size-s;
 }
--- a/superset/assets/src/components/FilterableTable/FilterableTableStyles.less
+++ b/superset/assets/src/components/FilterableTable/FilterableTableStyles.less
@ -17,13 +17,13 @@
 * under the License.
 */

-@import '../../../stylesheets/less/variables.less';
+@import "../../../stylesheets/less/variables.less";

 .ReactVirtualized__Grid__innerScrollContainer {
  border: 1px solid;
 }
 .ReactVirtualized__Table__headerRow {
-  font-weight: 700;
+  font-weight: @font-weight-bold;
  display: flex;
  flex-direction: row;
  align-items: center;
@ -48,10 +48,10 @@
  border-right: 1px solid @gray-light;
  align-self: center;
  padding: 12px;
-  font-size: 12px;
+  font-size: @font-size-s;
 }
 .grid-header-cell {
-  font-weight: 700;
+  font-weight: @font-weight-bold;
 }
 .ReactVirtualized__Table__headerColumn:last-of-type,
 .ReactVirtualized__Table__rowColumn:last-of-type {
@ -78,8 +78,12 @@
  width: 1em;
  fill: currentColor;
 }
-.even-row { background: @gray-bg; }
-.odd-row { background: @lightest; }
+.even-row {
+  background: @gray-bg;
+}
+.odd-row {
+  background: @lightest;
+}
 .header-style {
  overflow: hidden;
  text-overflow: ellipsis;
@ -93,5 +97,5 @@
 }
 .cell-text-for-measuring {
  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: @font-size-s;
 }
--- a/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
+++ b/superset/assets/src/dashboard/stylesheets/builder-sidepane.less
@ -22,8 +22,8 @@
  position: relative;

  .dashboard-builder-sidepane-header {
-    font-size: 15px;
-    font-weight: 700;
+    font-size: @font-size-l;
+    font-weight: @font-weight-bold;
    border-top: 1px solid @gray-light;
    border-bottom: 1px solid @gray-light;
    padding: 16px;
@ -32,7 +32,7 @@
  }

  .trigger {
-    font-size: 16px;
+    font-size: @font-size-l;
    color: @almost-black;
    opacity: 1;
    margin-left: auto;
@ -92,7 +92,7 @@
  .chart-card-container {
    .chart-card {
      border: 1px solid @gray-light;
-      font-weight: 200;
+      font-weight: @font-weight-light;
      padding: 16px;
      margin: 0 16px 16px 16px;
      position: relative;
@ -107,7 +107,7 @@
    .card-title {
      margin-right: 60px;
      margin-bottom: 8px;
-      font-weight: 800;
+      font-weight: @font-weight-bold;
    }

    .card-body {
@ -119,7 +119,7 @@
          word-break: break-all;

          &:first-child {
-            font-weight: 400;
+            font-weight: @font-weight-normal;
          }
        }
      }
@ -133,8 +133,8 @@
    .is-added-label {
      background: @almost-black;
      color: @lightest;
-      font-size: 12px;
-      line-height: 1em;
+      font-size: @font-size-s;
+      line-height: @line-height-tight;
      text-transform: uppercase;
      position: absolute;
      padding: 4px 8px;
@ -164,8 +164,7 @@

      .dropdown.btn-group button,
      input {
-        font-size: 14px;
-        line-height: 16px;
+        font-size: @font-size-m;
        padding: 7px 12px;
        height: 32px;
        border: 1px solid @gray-light;
--- a/superset/assets/src/dashboard/stylesheets/buttons.less
+++ b/superset/assets/src/dashboard/stylesheets/buttons.less
@ -16,9 +16,11 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import '../../../stylesheets/less/variables.less';
+
 .icon-button {
  color: @gray;
-  font-size: 1.2em;
+  font-size: @font-size-l;
  display: flex;
  flex-direction: row;
  align-items: center;
@ -37,5 +39,5 @@
 .icon-button-label {
  color: @gray-dark;
  padding-left: 8px;
-  font-size: 0.9em;
+  font-size: @font-size-m;
 }
--- a/superset/assets/src/dashboard/stylesheets/components/chart.less
+++ b/superset/assets/src/dashboard/stylesheets/components/chart.less
@ -31,7 +31,7 @@
    overflow-y: auto;

    .missing-chart-body {
-      font-size: 12px;
+      font-size: @font-size-s;
    }

    .loading-container {
@ -42,7 +42,8 @@

  &.fade-in {
    border-radius: 4px;
-    box-shadow: inset 0 0 0 2px fade(@shadow-highlight, 1), 0 0 0 3px fade(@shadow-highlight, @opacity-light);
+    box-shadow: inset 0 0 0 2px fade(@shadow-highlight, 1),
+      0 0 0 3px fade(@shadow-highlight, @opacity-light);
    transition: box-shadow 1s ease-in-out;
  }

--- a/superset/assets/src/dashboard/stylesheets/components/divider.less
+++ b/superset/assets/src/dashboard/stylesheets/components/divider.less
@ -23,7 +23,7 @@
 }

 .dashboard-component-divider:after {
-  content: "";
+  content: '';
  height: 1px;
  width: 100%;
  background-color: @gray-light;
@ -31,7 +31,7 @@
 }

 .new-component-placeholder.divider-placeholder:after {
-  content: "";
+  content: '';
  height: 2px;
  width: 100%;
  background-color: @gray-light;
--- a/superset/assets/src/dashboard/stylesheets/components/header.less
+++ b/superset/assets/src/dashboard/stylesheets/components/header.less
@ -18,8 +18,7 @@
 */
 .dashboard-component-header {
  width: 100%;
-  line-height: 1.1;
-  font-weight: 700;
+  font-weight: @font-weight-bold;
  padding: 16px 0;
  color: @almost-black;
 }
@ -42,36 +41,30 @@
 }

 .dashboard-header .dashboard-component-header {
-  font-weight: 300;
+  font-weight: @font-weight-light;
  width: auto;
 }

-.dashboard-header .undo-action,
-.dashboard-header .redo-action {
-  line-height: 18px;
-  font-size: 12px;
-}
-
 .dashboard--editing .dragdroppable-row .dashboard-component-header {
  cursor: move;
 }

 .header-style-option {
-  font-weight: 700;
+  font-weight: @font-weight-bold;
  color: @almost-black;
 }

 /* note: sizes should be a multiple of the 8px grid unit so that rows in the grid align */
 .header-small {
-  font-size: 16px;
+  font-size: @font-size-l;
 }

 .header-medium {
-  font-size: 24px;
+  font-size: @font-size-xl;
 }

 .header-large {
-  font-size: 32px;
+  font-size: @font-size-xxl;
 }

 .background--white .dashboard-component-header,
--- a/superset/assets/src/dashboard/stylesheets/components/index.less
+++ b/superset/assets/src/dashboard/stylesheets/components/index.less
@ -23,4 +23,4 @@
@import './new-component.less';
@import './row.less';
@import './tabs.less';
-@import './markdown.less';
+@import './markdown.less';
--- a/superset/assets/src/dashboard/stylesheets/components/markdown.less
+++ b/superset/assets/src/dashboard/stylesheets/components/markdown.less
@ -19,15 +19,16 @@
 .dashboard-markdown {
  overflow: hidden;

-  h4, h5 {
-    font-weight: 300;
+  h4,
+  h5 {
+    font-weight: @font-weight-light;
  }
  h5 {
    color: @gray-heading;
  }
  h6 {
-    font-weight: 400;
-    font-size: 12px;
+    font-weight: @font-weight-normal;
+    font-size: @font-size-s;
  }

  .dashboard-component-chart-holder {
--- a/superset/assets/src/dashboard/stylesheets/components/new-component.less
+++ b/superset/assets/src/dashboard/stylesheets/components/new-component.less
@ -16,6 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import '../../../../stylesheets/less/variables.less';
+
 .new-component {
  display: flex;
  flex-direction: row;
@ -41,9 +43,11 @@
  align-items: center;
  justify-content: center;
  color: @gray;
-  font-size: 1.5em;
-}
-
-.new-component-placeholder.fa-window-restore {
-  font-size: 1em;
+  font-size: @font-size-xxl;
+  &.fa-window-restore {
+    font-size: @font-size-l;
+  }
+  &.fa-area-chart {
+    font-size: @font-size-xl;
+  }
 }
--- a/superset/assets/src/dashboard/stylesheets/components/tabs.less
+++ b/superset/assets/src/dashboard/stylesheets/components/tabs.less
@ -31,7 +31,7 @@
        color: @almost-black;
        border: none;
        padding: 12px 0 14px 0;
-        font-size: 15px;
+        font-size: @font-size-m;
        margin-right: 0;
      }

@ -71,7 +71,7 @@

      & .fa-plus {
        color: @gray-dark;
-        font-size: 14px;
+        font-size: @font-size-m;
        margin-top: 3px;
      }

@ -90,7 +90,11 @@
      height: 3px;
      width: 100%;
      bottom: 0;
-      background: linear-gradient(to right, @indicator-color, shade(@indicator-color, @colorstop-two));
+      background: linear-gradient(
+        to right,
+        @indicator-color,
+        shade(@indicator-color, @colorstop-two)
+      );
    }
  }

--- a/superset/assets/src/dashboard/stylesheets/dashboard.less
+++ b/superset/assets/src/dashboard/stylesheets/dashboard.less
@ -23,17 +23,17 @@ header.top {

 body {
  h1 {
-    font-weight: 600;
-    line-height: normal;
-    font-size: 24px;
+    font-weight: @font-weight-bold;
+    line-height: @line-height-base;
+    font-size: @font-size-xxl;
    letter-spacing: -0.2px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  h2 {
-    font-weight: 600;
-    line-height: normal;
-    font-size: 20px;
+    font-weight: @font-weight-bold;
+    line-height: @line-height-base;
+    font-size: @font-size-xl;
    margin-top: 12px;
    margin-bottom: 8px;
  }
@ -41,9 +41,9 @@ body {
  h4,
  h5,
  h6 {
-    font-weight: 600;
-    line-height: normal;
-    font-size: 16px;
+    font-weight: @font-weight-bold;
+    line-height: @line-height-base;
+    font-size: @font-size-l;
    letter-spacing: 0.2px;
    margin-top: 8px;
    margin-bottom: 4px;
@ -55,8 +55,8 @@ body {

 .dashboard .chart-header {
  position: relative;
-  font-size: 16px;
-  font-weight: bold;
+  font-size: @font-size-l;
+  font-weight: @font-weight-bold;

  .dropdown.btn-group {
    position: absolute;
@ -77,14 +77,6 @@ body {
    margin: 5px 0;
  }

-  .fa-circle {
-    position: absolute;
-    left: 7px;
-    top: 18px;
-    font-size: 4px;
-    color: @pink;
-  }
-
  .refresh-tooltip {
    display: block;
    height: 16px;
@ -142,9 +134,7 @@ body {
  .dropdown-menu li a {
    padding: 3px 16px;
    color: @almost-black;
-    line-height: 16px;
-    font-size: 14px;
-    letter-spacing: 0.4px;
+    font-size: @font-size-m;

    &:hover,
    &:focus {
@ -217,7 +207,7 @@ body {
  align-items: center;

  .favstar {
-    font-size: 24px;
+    font-size: @font-size-xl;
    position: relative;
    margin-left: 8px;
  }
--- a/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-indicator-tooltip.less
@ -16,8 +16,10 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import '../../../stylesheets/less/variables.less';
+
 #filter-indicator-tooltip {
-  font-size: 15px;
+  font-size: @font-size-m;
  text-align: left;

  > .tooltip-arrow {
@ -40,7 +42,6 @@
  position: relative;

  .filter-content {
-    line-height: 22px;
    margin-right: 22px;
    text-align: left;
    display: flex;
@ -48,7 +49,7 @@
    align-items: stretch;

    label {
-      font-weight: 700;
+      font-weight: @font-weight-bold;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
--- a/superset/assets/src/dashboard/stylesheets/filter-indicator.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-indicator.less
@ -59,7 +59,8 @@
 }

 .show-outline .filter-indicator-group {
-  box-shadow: @shadow-highlight -2px 0 0 0, @lightest -4px 0 0 0, @gray-light -6px 0 0 0;
+  box-shadow: @shadow-highlight -2px 0 0 0, @lightest -4px 0 0 0,
+    @gray-light -6px 0 0 0;
 }

 .dashboard-component-chart-holder,
@ -85,4 +86,3 @@
    box-shadow: @lightest -4px 0 0 0, @gray-light -6px 0 0 0;
  }
 }
-
--- a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
+++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
@ -16,14 +16,14 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-@import "../../../stylesheets/less/cosmo/variables.less";
+@import '../../../stylesheets/less/cosmo/variables.less';

 .filter-scope-container {
  display: flex;
  flex-direction: column;
  height: 80%;
  margin-right: -24px;
-  font-size: 14px;
+  font-size: @font-size-m;

  .nav.nav-tabs {
    border: none;
@ -41,7 +41,7 @@

  .dashboard-modal-actions-container {
    height: 64px;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid @gray-light;
    padding: 24px;
    margin: 0 0 0 -24px;
  }
@ -53,7 +53,7 @@

 .filter-scope-header {
  height: 64px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid @gray-light;
  padding-left: 24px;
  margin-left: -24px;

@ -81,14 +81,16 @@
  position: relative;
  height: 100%;

-  a, a:active, a:hover {
+  a,
+  a:active,
+  a:hover {
    color: @almost-black;
    text-decoration: none;
  }

  .react-checkbox-tree .rct-icon.rct-icon-expand-all,
  .react-checkbox-tree .rct-icon.rct-icon-collapse-all {
-    font-size: 13px;
+    font-size: @font-size-m;
    font-family: @font-family-sans-serif;
    color: @brand-primary;

@ -109,11 +111,11 @@
    position: relative;
    width: 40%;
    padding: 16px 16px 16px 0;
-    border-right: 1px solid #ccc;
+    border-right: 1px solid @gray-light;

    .filter-container {
      label {
-        font-weight: normal;
+        font-weight: @font-weight-normal;
        margin: 0 0 0 16px;
        word-break: break-all;
      }
@ -127,16 +129,16 @@
      margin-left: -24px;

      &.is-selected {
-        border: 1px solid #aaa;
+        border: 1px solid @gray-heading;
        border-radius: 4px;
-        background-color: #eee;
+        background-color: @gray-bg;
        margin-left: -25px;
      }
    }

    .react-checkbox-tree {
      .rct-title .root {
-        font-weight: bold;
+        font-weight: @font-weight-bold;
      }

      .rct-text {
@ -154,7 +156,7 @@
  .react-checkbox-tree {
    flex-direction: column;
    color: @almost-black;
-    font-size: 14px;
+    font-size: @font-size-m;

    .filter-scope-type {
      padding: 8px 0;
@ -167,16 +169,16 @@
      }

      &.chart {
-        font-weight: normal;
+        font-weight: @font-weight-normal;
      }

      &.selected-filter {
        padding-left: 28px;
        position: relative;
-        color: #aaa;
+        color: @gray-heading;

        &::before {
-          content: " ";
+          content: ' ';
          position: absolute;
          left: 0;
          top: 50%;
@ -184,13 +186,13 @@
          height: 18px;
          border-radius: 2px;
          margin-top: -9px;
-          box-shadow: inset 0 0 0 2px #ccc;
+          box-shadow: inset 0 0 0 2px @gray-light;
          background: #f2f2f2;
        }
      }

      &.root {
-        font-weight: bold;
+        font-weight: @font-weight-bold;
      }
    }

@ -256,9 +258,9 @@
    right: 16px;
    top: 16px;
    border-radius: 4px;
-    border: 1px solid #ccc;
+    border: 1px solid @gray-light;
    padding: 4px 8px 4px 8px;
-    font-size: 13px;
+    font-size: @font-size-m;
    outline: none;

    &:focus {
--- a/superset/assets/src/dashboard/stylesheets/hover-menu.less
+++ b/superset/assets/src/dashboard/stylesheets/hover-menu.less
@ -20,7 +20,7 @@
  opacity: 0;
  position: absolute;
  z-index: 10;
-  font-size: 14px;
+  font-size: @font-size-m;
 }

 .hover-menu--left {
--- a/superset/assets/src/dashboard/stylesheets/popover-menu.less
+++ b/superset/assets/src/dashboard/stylesheets/popover-menu.less
@ -51,7 +51,7 @@
  padding: 0 16px;
  background: @lightest;
  box-shadow: 0 1px 2px 1px fade(@darkest, @opacity-medium-light);
-  font-size: 14px;
+  font-size: @font-size-m;
  cursor: default;
  z-index: 1000;
 }
@ -115,7 +115,7 @@
 .hover-dropdown li.dropdown-item.active a,
 .popover-menu li.dropdown-item.active a {
  background: @gray-light;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  color: @almost-black;
 }

--- a/superset/assets/src/dashboard/stylesheets/resizable.less
+++ b/superset/assets/src/dashboard/stylesheets/resizable.less
@ -23,7 +23,7 @@

 /* after ensures border visibility on top of any children */
 .resizable-container--resizing:after {
-  content: "";
+  content: '';
  position: absolute;
  top: 0;
  left: 0;
@ -37,10 +37,10 @@
  z-index: 10;
 }

-  .resizable-container:hover .resize-handle,
-  .resizable-container--resizing .resize-handle {
-    opacity: 1;
-  }
+.resizable-container:hover .resize-handle,
+.resizable-container--resizing .resize-handle {
+  opacity: 1;
+}

 .resize-handle--bottom-right {
  position: absolute;
@ -54,7 +54,6 @@
  height: 8px;
 }

-
 .resize-handle--right {
  width: 2px;
  height: 20px;
--- a/superset/assets/src/datasource/main.less
+++ b/superset/assets/src/datasource/main.less
@ -29,5 +29,5 @@
 }

 .Datasource .change-warning .bold {
-  font-weight: bold;
+  font-weight: @font-weight-bold;
 }
--- a/superset/assets/src/explore/components/controls/CollectionControl.less
+++ b/superset/assets/src/explore/components/controls/CollectionControl.less
@ -17,5 +17,5 @@
 * under the License.
 */
 .CollectionControl .list-group-item i.fa {
-    padding-top: 5px;
+  padding-top: 5px;
 }
--- a/superset/assets/src/explore/components/controls/DatasourceControl.less
+++ b/superset/assets/src/explore/components/controls/DatasourceControl.less
@ -19,19 +19,19 @@
@import "../../../../stylesheets/less/variables.less";

 #datasource_menu {
-    border-radius: 2px;
-    padding-left: 8px;
-    padding-right: 8px;
+  border-radius: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
 }

 #datasource_menu .caret {
-    position: relative;
-    padding-right: 8px;
-    margin-left: 4px;
-    color: @lightest;
-    top: -8px;
+  position: relative;
+  padding-right: 8px;
+  margin-left: 4px;
+  color: @lightest;
+  top: -8px;
 }

 #datasource_menu + ul {
-    margin-top: 26px;
+  margin-top: 26px;
 }
--- a/superset/assets/src/explore/components/controls/DateFilterControl.less
+++ b/superset/assets/src/explore/components/controls/DateFilterControl.less
@ -16,6 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import "../../../../stylesheets/less/variables.less";
+
 .rdtPicker table {
-    font-size: 12;
+  font-size: @font-size-s;
 }
--- a/superset/assets/src/explore/components/controls/VizTypeControl.less
+++ b/superset/assets/src/explore/components/controls/VizTypeControl.less
@ -16,10 +16,12 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+@import "../../../../stylesheets/less/variables.less";
+
 .viztype-label {
  margin-top: 10px;
  text-align: center;
-  font-size: 14px;
+  font-size: @font-size-m;
 }

 .viztype-selector-container {
@ -29,7 +31,7 @@
 }

 .viztype-selector-container:hover img {
-  border: 1px solid #aaa;
+  border: 1px solid @gray-heading;
 }

 .viztype-selector-container.selected {
@ -38,13 +40,13 @@
 }

 .viztype-selector-container.selected img {
-  border: 1px solid #333;
+  border: 1px solid @almost-black;
 }

 .viztype-selector-container img {
-  border: 1px solid #ddd;
+  border: 1px solid @gray-light;
  border-radius: 4px;
-  transition: border-color .2s;
+  transition: border-color 0.2s;
 }

 .viztype-control-search-box {
--- a/superset/assets/src/explore/main.less
+++ b/superset/assets/src/explore/main.less
@ -39,7 +39,7 @@
 .fave-unfave-icon,
 .edit-desc-icon {
  padding: 0 0 0 0.5em;
-  font-size: 14px;
+  font-size: @font-size-m;
 }

 .checkbox {
@ -99,7 +99,6 @@
 }
 .input-inline {
  float: left;
-  display: inline-block;
  padding-right: 3px;
 }
 .input-inline .Select-control {
@ -131,7 +130,7 @@
  width: 30px;
  display: inline-block;
  text-align: center;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
 }

 .datasource-container {
@ -179,7 +178,7 @@
 }

 .filter-edit-clause-info {
-  font-size: 10px;
+  font-size: @font-size-xs;
  padding-left: 5px;
 }

@ -197,12 +196,12 @@

 .label-default {
  background-color: @gray;
-  font-weight: normal;
+  font-weight: @font-weight-normal;
 }

 .btn.label-btn {
  background-color: @gray;
-  font-weight: normal;
+  font-weight: @font-weight-normal;
  color: @lightest;
  padding: 5px 4px 4px;
  border: 0;
@ -230,7 +229,7 @@
 }

 .adhoc-label-arrow {
-  font-size: 9px;
+  font-size: @font-size-xxs;
  margin-left: 3px;
  position: static;
 }
@ -245,14 +244,14 @@

 .custom-sql-disabled-message {
  color: @gray;
-  font-size: 11px;
+  font-size: @font-size-xs;
  text-align: center;
  margin-top: 60px;
 }

 h1.section-header {
-  font-size: 14px;
-  font-weight: bold;
+  font-size: @font-size-m;
+  font-weight: @font-weight-bold;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: 5px;
@ -260,8 +259,8 @@ h1.section-header {
 }

 h2.section-header {
-  font-size: 13px;
-  font-weight: bold;
+  font-size: @font-size-s;
+  font-weight: @font-weight-bold;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: 5px;
--- a/superset/assets/src/visualizations/FilterBox/FilterBox.less
+++ b/superset/assets/src/visualizations/FilterBox/FilterBox.less
@ -16,8 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-@import '../../../stylesheets/less/variables.less';
- 
+@import "../../../stylesheets/less/variables.less";
+
 .select2-highlighted > .filter_box {
  background-color: transparent;
  border: 1px superset @darkest;
@ -66,7 +66,7 @@ ul.select2-results div.filter_box {

 .filter-container label {
  display: flex;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  margin: 0 0 8px 8px;
 }

--- a/superset/assets/stylesheets/less/cosmo/bootswatch.less
+++ b/superset/assets/stylesheets/less/cosmo/bootswatch.less
@ -94,7 +94,7 @@

 .caret:before {
  font-family: "FontAwesome";
-  font-size: 10px;
+  font-size: @font-size-xs;
  content: "\f078";
 }

@ -281,7 +281,7 @@ table,
  border-radius: 2px;
 }
 label {
-  font-weight: normal;
+  font-weight: @font-weight-normal;
 }

 // Progress bars ==============================================================
@ -290,7 +290,7 @@ label {
  height: 14px;
  .box-shadow(none);
  .progress-bar {
-    font-size: 12px;
+    font-size: @font-size-s;
    line-height: 12px;
    padding-top: 1px;
  }
@ -317,7 +317,7 @@ label {
      border-bottom: 1px solid @gray-light;
      h1, h2, h3, h4, h5, h6 {
        margin: 10px 0 0 0;
-        font-weight: bold;
+        font-weight: @font-weight-bold;
      }
    }
    .close {
@ -335,7 +335,7 @@ label {
      border-bottom: 1px solid @gray-light;
      h1, h2, h3, h4, h5, h6 {
        margin: 10px 0 0 0;
-        font-weight: bold;
+        font-weight: @font-weight-bold;
      }
    }
    .close {
@ -402,7 +402,7 @@ a.list-group-item {

 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background-color: #fff;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  border-top: 3px solid @brand-primary;
 }

--- a/superset/assets/stylesheets/less/index.less
+++ b/superset/assets/stylesheets/less/index.less
@ -21,9 +21,12 @@
@import "~bootstrap/less/bootstrap.less";
@import "./cosmo/variables.less";
@import "./cosmo/bootswatch.less";
+@import "../../stylesheets/less/variables.less";

-@stroke-primary:  @brand-primary;
-
+html, body {
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+}
 body {
  position: absolute;
  top: 0;
--- a/superset/assets/stylesheets/less/variables.less
+++ b/superset/assets/stylesheets/less/variables.less
@ -122,4 +122,33 @@
 /* Try to keep these to a minimum                                       */
 /************************************************************************/
@z-index-max: 1000;
-@z-index-dropdown: 11;
+@z-index-dropdown: 11;
+
+/************************************************************************/
+/* TYPOGRAPHY                                                           */
+/* Commonly used font weights, line heights, etc. These should be the   */
+/* core values used to build more complex styles for headers, etc.      */
+/************************************************************************/
+
+// Weights
+@font-weight-light: 200;
+@font-weight-normal: 400;
+@font-weight-bold: 700;
+
+// Font Sizes
+@font-size-base: 14px; // Base `rem` units on this, as needed.
+// Ranged Sizes
+@font-size-xxs: 9px;
+@font-size-xs: 10px;
+@font-size-s: 12px; // mapping 11px;
+@font-size-m: @font-size-base; // maps to @font-size-base; for now
+@font-size-l: 16px;
+@font-size-xl: 21px; // mapping 20px, 24px when there's a 32 aboves it
+@font-size-xxl: 28px;
+
+// Line Heights
+@line-height-base: 1.4;
+// Ranged Sizes
+@line-height-tight: 1;
+@line-height-normal: @line-height-base;
+@line-height-loose: 2;
--- a/superset/assets/stylesheets/react-select/select.less
+++ b/superset/assets/stylesheets/react-select/select.less
@ -66,5 +66,5 @@
  opacity: 0.5;
 }
 .VirtualizedSelectSelectedOption {
-  font-weight: bold;
+  font-weight: @font-weight-bold;
 }
--- a/superset/assets/stylesheets/reactable-pagination.less
+++ b/superset/assets/stylesheets/reactable-pagination.less
@ -34,8 +34,7 @@
  border: 1px solid @gray-light  ;
  color: @gray-dark;
  display: inline-block;
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: @font-size-s;
  margin-right: 5px;
  padding: 5px 10px;
  text-align: center;
@ -46,7 +45,7 @@
 .reactable-current-page {
  border: 1px solid @gray-light;
  color: @gray-dark;
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  pointer-events: none;
  opacity: 0.65;
 }
--- a/superset/assets/stylesheets/superset.less
+++ b/superset/assets/stylesheets/superset.less
@ -23,10 +23,6 @@

@datasource-sql-expression-width: 450px;

-.emph {
-  font-weight: bold !important;
-}
-
 .alert.alert-danger > .debugger {
    color: @error;
 }
@ -69,7 +65,7 @@ input.form-control {
    border: 1px solid @gray-light;
    background-color: @gray-bg;
    border-radius: 5px;
-    font-size: 12px;
+    font-size: @font-size-s;
 }

 .slice_info {
@ -124,7 +120,7 @@ span.title-block {
    border-radius: 4px;
    padding: 6px 12px;
    margin: 0px 10px;
-    font-size: 20px;
+    font-size: @font-size-xl;
 }

 .nvtooltip {
@ -137,14 +133,14 @@ span.title-block {
    -webkit-transition-delay: 0ms;
 }
 .nvtooltip table td {
-    font-size: 11px !important;
+    font-size: @font-size-s !important;
 }
 div.navbar {
  z-index: 999;
  .dropdown-menu .fineprint {
    padding: 10px 20px 0 20px;
    color: @gray-light;
-    font-size: 1rem;
+    font-size: @font-size-m;
    div {
      white-space: nowrap;
    }
@ -181,7 +177,7 @@ li.widget:hover {
 }

 .chart-header .header-text {
-  font-size: 20px;
+  font-size: @font-size-xl;
  line-height: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid @gray;
@ -206,7 +202,7 @@ li.widget:hover {
 }

 .table-condensed {
-    font-size: 12px;
+    font-size: @font-size-s;
 }

 .table-condensed input[type="checkbox"] {
@ -243,7 +239,6 @@ table.table-no-hover tr:hover {

 .editable-title.datasource-sql-expression {
  font-family: @font-family-monospace;
-  font-size: 95%;
  display: inline-block;
  min-width: @datasource-sql-expression-width;
 }
@ -261,7 +256,6 @@ table.table-no-hover tr:hover {
  border-color: transparent;
  background: transparent;
  font-size: inherit;
-  line-height: inherit;
  white-space: normal;
  text-align: left;
  cursor: initial;
@ -292,7 +286,7 @@ table.table-no-hover tr:hover {
    top: 2px;
    right: 0;
    visibility: hidden;
-    font-size: 11px;
+    font-size: @font-size-s;
    text-align: center;
    vertical-align: middle;
  }
@ -305,7 +299,7 @@ table.table-no-hover tr:hover {

 .dashboard-component.dashboard-component-header .anchor-link-container {
  .fa.fa-link {
-    font-size: 16px;
+    font-size: @font-size-l;
  }
 }

@ -455,7 +449,7 @@ table.table-no-hover tr:hover {

 .list-add-action .btn.btn-sm {
  padding: 5px 6px;
-  font-size: 10px;
+  font-size: @font-size-xs;
  line-height: 2px;
  border-radius: 50%;
  box-shadow: 2px 2px 4px -1px fade(@darkest, @opacity-light);
@ -490,11 +484,11 @@ iframe {

 g.annotation-container {
  line {
-    stroke: @stroke-primary;
+    stroke: @brand-primary;
  }

  rect.annotation {
-    stroke: @stroke-primary;
+    stroke: @brand-primary;
    fill-opacity: 0.1;
    stroke-width: 1;
  }
@ -534,12 +528,12 @@ tr.reactable-column-header th.reactable-header-sortable {
 }

 .refresh-overlay-btn {
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  margin-right: 10px;
 }

 .dismiss-overlay-btn {
-  font-weight: bold;
+  font-weight: @font-weight-bold;
  background: @lightest;
  color: @brand-primary;
  border-color: @brand-primary;
@ -567,6 +561,6 @@ tr.reactable-column-header th.reactable-header-sortable {
 td.filtered {
  background-color: lighten(desaturate(@brand-primary, 50%), 50%);
 }
-.text-bigger {
-  font-size: 110%;
+.table-name {
+  font-size: @font-size-l;
 }
--- a/superset/examples/css_templates.py
+++ b/superset/examples/css_templates.py
@ -48,7 +48,7 @@ def load_css_templates():
        opacity: 1;
    }
    .chart-header .header{
-        font-weight: normal;
+        font-weight: @font-weight-normal;
        font-size: 12px;
    }
    /*
@ -96,7 +96,7 @@ def load_css_templates():
        opacity: 1;
    }
    .chart-header .header{
-        font-weight: normal;
+        font-weight: @font-weight-normal;
        font-size: 12px;
    }
    .nvd3 text {