Branding typography

srcd/superset/assets/src/uast/codemirror_override.less

@@ -0,0 +1,318 @@
+@import "../../stylesheets/less/cosmo/variables.less";
+
+/*
+Solarized theme for code-mirror
+http://ethanschoonover.com/solarized
+*/
+
+/*
+Solarized color palette
+http://ethanschoonover.com/solarized/img/solarized-palette.png
+*/
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("../../stylesheets/fonts/SourceCodePro-Medium.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-Black.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-Bold.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-LightIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-Semibold.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-BoldIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-It.otf.woff2") format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-BlackIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-MediumIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-ExtraLight.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-ExtraLightIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-Light.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceCodePro-Regular.otf.woff2")
+    format("woff2");
+}
+
+.CodeMirror * {
+  font-family: "Source Code Pro", Monaco, Consolas, "Courier New", monospace;
+}
+
+.solarized.base03 {
+  color: #002b36;
+}
+.solarized.base02 {
+  color: #073642;
+}
+.solarized.base01 {
+  color: #586e75;
+}
+.solarized.base00 {
+  color: #657b83;
+}
+.solarized.base0 {
+  color: #839496;
+}
+.solarized.base1 {
+  color: #93a1a1;
+}
+.solarized.base2 {
+  color: #eee8d5;
+}
+.solarized.base3 {
+  color: #fdf6e3;
+}
+.solarized.solar-yellow {
+  color: #b58900;
+}
+.solarized.solar-orange {
+  color: #cb4b16;
+}
+.solarized.solar-red {
+  color: #dc322f;
+}
+.solarized.solar-magenta {
+  color: #d33682;
+}
+.solarized.solar-violet {
+  color: #6c71c4;
+}
+.solarized.solar-blue {
+  color: #268bd2;
+}
+.solarized.solar-cyan {
+  color: #2aa198;
+}
+.solarized.solar-green {
+  color: #859900;
+}
+
+/* Color scheme for code-mirror */
+
+.cm-s-solarized {
+  line-height: 1.45em;
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+.cm-s-solarized.cm-s-dark {
+  color: #839496;
+  background-color: #002b36;
+  text-shadow: #002b36 0 1px;
+}
+.cm-s-solarized.cm-s-light {
+  background-color: #fdf6e3;
+  color: #657b83;
+  text-shadow: #eee8d5 0 1px;
+}
+
+.cm-s-solarized .CodeMirror-widget {
+  text-shadow: none;
+}
+
+.cm-s-solarized .cm-header {
+  color: #586e75;
+}
+.cm-s-solarized .cm-quote {
+  color: #93a1a1;
+}
+
+.cm-s-solarized .cm-keyword {
+  color: #cb4b16;
+}
+.cm-s-solarized .cm-atom {
+  color: #d33682;
+}
+.cm-s-solarized .cm-number {
+  color: #d33682;
+}
+.cm-s-solarized .cm-def {
+  color: #2aa198;
+}
+
+.cm-s-solarized .cm-variable {
+  color: #839496;
+}
+.cm-s-solarized .cm-variable-2 {
+  color: #b58900;
+}
+.cm-s-solarized .cm-variable-3,
+.cm-s-solarized .cm-type {
+  color: #6c71c4;
+}
+
+.cm-s-solarized .cm-property {
+  color: #2aa198;
+}
+.cm-s-solarized .cm-operator {
+  color: #6c71c4;
+}
+
+.cm-s-solarized .cm-comment {
+  color: #586e75;
+  font-style: italic;
+}
+
+.cm-s-solarized .cm-string {
+  color: #859900;
+}
+.cm-s-solarized .cm-string-2 {
+  color: #b58900;
+}
+
+.cm-s-solarized .cm-meta {
+  color: #859900;
+}
+.cm-s-solarized .cm-qualifier {
+  color: #b58900;
+}
+.cm-s-solarized .cm-builtin {
+  color: #d33682;
+}
+.cm-s-solarized .cm-bracket {
+  color: #cb4b16;
+}
+.cm-s-solarized .CodeMirror-matchingbracket {
+  color: #859900;
+}
+.cm-s-solarized .CodeMirror-nonmatchingbracket {
+  color: #dc322f;
+}
+.cm-s-solarized .cm-tag {
+  color: #93a1a1;
+}
+.cm-s-solarized .cm-attribute {
+  color: #2aa198;
+}
+.cm-s-solarized .cm-hr {
+  color: transparent;
+  border-top: 1px solid #586e75;
+  display: block;
+}
+.cm-s-solarized .cm-link {
+  color: #93a1a1;
+  cursor: pointer;
+}
+.cm-s-solarized .cm-special {
+  color: #6c71c4;
+}
+.cm-s-solarized .cm-em {
+  color: #999;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.cm-s-solarized .cm-error,
+.cm-s-solarized .cm-invalidchar {
+  color: #586e75;
+  border-bottom: 1px dotted #dc322f;
+}
+
+.cm-s-solarized.cm-s-dark div.CodeMirror-selected {
+  background: #073642;
+}
+.cm-s-solarized.cm-s-dark.CodeMirror ::selection {
+  background: rgba(7, 54, 66, 0.99);
+}
+.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection,
+.cm-s-dark .CodeMirror-line > span::-moz-selection,
+.cm-s-dark .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(7, 54, 66, 0.99);
+}
+
+.cm-s-solarized.cm-s-light div.CodeMirror-selected {
+  background: #eee8d5;
+}
+.cm-s-solarized.cm-s-light .CodeMirror-line::selection,
+.cm-s-light .CodeMirror-line > span::selection,
+.cm-s-light .CodeMirror-line > span > span::selection {
+  background: #eee8d5;
+}
+.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection,
+.cm-s-ligh .CodeMirror-line > span::-moz-selection,
+.cm-s-ligh .CodeMirror-line > span > span::-moz-selection {
+  background: #eee8d5;
+}
+
+/* Editor styling */
+
+/* Little shadow on the view-port of the buffer view */
+.cm-s-solarized.CodeMirror {
+  -moz-box-shadow: inset 7px 0 12px -6px #000;
+  -webkit-box-shadow: inset 7px 0 12px -6px #000;
+  box-shadow: inset 7px 0 12px -6px #000;
+}
+
+/* Remove gutter border */
+.cm-s-solarized .CodeMirror-gutters {
+  border-right: 0;
+}
+
+/* Gutter colors and line number styling based of color scheme (dark / light) */
+
+/* Dark */
+.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
+  background-color: #073642;
+}
+
+.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
+  color: #586e75;
+  text-shadow: #021014 0 -1px;
+}
+
+/* Light */
+.cm-s-solarized.cm-s-light .CodeMirror-gutters {
+  background-color: #eee8d5;
+}
+
+.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
+  color: #839496;
+}
+
+/* Common */
+.cm-s-solarized .CodeMirror-linenumber {
+  padding: 0 5px;
+}
+.cm-s-solarized .CodeMirror-guttermarker-subtle {
+  color: #586e75;
+}
+.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker {
+  color: #ddd;
+}
+.cm-s-solarized.cm-s-light .CodeMirror-guttermarker {
+  color: #cb4b16;
+}
+
+.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
+  color: #586e75;
+}
+
+/* Cursor */
+.cm-s-solarized .CodeMirror-cursor {
+  border-left: 1px solid #819090;
+}
+
+/* Fat cursor */
+.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor {
+  background: #77ee77;
+}
+.cm-s-solarized.cm-s-light .cm-animate-fat-cursor {
+  background-color: #77ee77;
+}
+.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor {
+  background: #586e75;
+}
+.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor {
+  background-color: #586e75;
+}
+
+/* Active line */
+.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
+  background: rgba(255, 255, 255, 0.06);
+}
+.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.06);
+}

srcd/superset/assets/src/uast/override.less

@@ -1,4 +1,5 @@
-@import '../../stylesheets/less/cosmo/variables.less';
+@import "../../stylesheets/less/cosmo/variables.less";
+@import "codemirror_override.less";
 
 body,
 html {
@@ -29,3 +30,70 @@ html {
 .bblfsh-options__label {
   padding-top: 8px;
 }
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../../stylesheets/fonts/SourceSansPro-Black.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-BlackIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-Bold.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-BoldIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-ExtraLight.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-ExtraLightIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-It.otf.woff2") format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-Light.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-LightIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-Semibold.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-SemiboldIt.otf.woff2")
+    format("woff2");
+  src: url("../../stylesheets/fonts/SourceSansPro-Regular.otf.woff2")
+    format("woff2");
+}
+
+@font-family-sans-serif: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+
+@font-family-serif: Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base: @font-family-sans-serif;
+
+@font-size-base: 16px;
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base: 1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+@headings-font-family: @font-family-base;
+@headings-font-weight: 300;
+@headings-line-height: 1.1;
+@headings-color: inherit;
+
+//== Typography overwrite
+
+body {
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+}