Merge pull request #2174 from weaveworks/2165-contrast

Split stylesheets to fix contrast bug

client/app/styles/_contrast-overrides.scss

@@ -0,0 +1,36 @@
+@import "variables";
+$background-color: lighten($primary-color, 75%);
+$background-lighter-color: lighten($background-color, 10%);
+$background-darker-color: darken($background-color, 20%);
+$background-darker-secondary-color: darken($background-color, 15%);
+$background-dark-color: $primary-color;
+$text-color: black;
+$text-secondary-color: lighten($text-color, 10%);
+$text-tertiary-color: lighten($text-color, 20%);
+$border-light-color: lighten($text-color, 50%);
+$text-darker-color: darken($text-color, 20%);
+$white: white;
+
+$node-opacity-blurred: 0.6;
+$node-highlight-fill-opacity: 0.3;
+$node-highlight-stroke-opacity: 0.5;
+$node-highlight-stroke-width: 3px;
+$node-border-stroke-width: 5px;
+$node-pseudo-opacity: 1;
+$edge-highlight-opacity: 0.3;
+$edge-opacity-blurred: 0;
+$edge-opacity: 0.5;
+$edge-link-stroke-width: 3px;
+
+$btn-opacity-default: 1;
+$btn-opacity-hover: 1;
+$btn-opacity-selected: 1;
+
+$link-opacity-default: 1;
+
+$search-border-color: $background-darker-color;
+$search-border-width: 2px;
+
+/* specific elements */
+$body-background-color: #FFF;
+$label-background-color: #FFF;

client/app/styles/_variables.scss

@@ -0,0 +1,55 @@
+$fa-font-path: "~font-awesome/fonts";
+/* weave company colours */
+$weave-gray-blue: rgb(85,105,145);
+$weave-blue: rgb(0,210,255);
+$weave-orange: rgb(255,75,25);
+$weave-charcoal-blue: rgb(50,50,75); // #32324B
+
+$base-font: "Roboto", sans-serif;
+$mono-font: "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace;
+
+$base-ease: ease-in-out;
+$primary-color: $weave-charcoal-blue;
+
+$background-color: lighten($primary-color, 66%);
+$background-lighter-color: lighten($background-color, 8%);
+$background-average-color: mix($background-color, $background-lighter-color);
+$background-darker-color: darken($background-color, 8%);
+$background-darker-secondary-color: darken($background-color, 4%);
+$background-dark-color: $primary-color;
+$text-color: lighten($primary-color, 5%);
+$text-secondary-color: lighten($text-color, 15%);
+$text-tertiary-color: lighten($text-color, 30%);
+$border-light-color: lighten($text-color, 60%);
+$text-darker-color: $primary-color;
+$white: $background-lighter-color;
+
+$details-window-width: 420px;
+$details-window-padding-left: 36px;
+$border-radius: 4px;
+
+$terminal-header-height: 44px;
+
+$node-opacity-blurred: 0.25;
+$node-highlight-fill-opacity: 0.1;
+$node-highlight-stroke-opacity: 0.4;
+$node-highlight-stroke-width: 1px;
+$node-border-stroke-width: 2.5px;
+$node-pseudo-opacity: 0.8;
+$edge-highlight-opacity: 0.1;
+$edge-opacity-blurred: 0.2;
+$edge-opacity: 0.5;
+$edge-link-stroke-width: 1px;
+
+$btn-opacity-default: 0.7;
+$btn-opacity-hover: 1;
+$btn-opacity-selected: 0.9;
+
+$link-opacity-default: 0.8;
+
+$search-border-color: transparent;
+$search-border-width: 1px;
+
+/* specific elements */
+$body-background-color: linear-gradient(30deg, $background-color 0%, $background-lighter-color 100%);
+$label-background-color: fade-out($background-average-color, .3);

client/app/styles/contrast.scss

@@ -1,37 +1,3 @@
-@import "main";
-
-$background-color: lighten($primary-color, 75%);
-$background-lighter-color: lighten($background-color, 10%);
-$background-darker-color: darken($background-color, 20%);
-$background-darker-secondary-color: darken($background-color, 15%);
-$background-dark-color: $primary-color;
-$text-color: black;
-$text-secondary-color: lighten($text-color, 10%);
-$text-tertiary-color: lighten($text-color, 20%);
-$border-light-color: lighten($text-color, 50%);
-$text-darker-color: darken($text-color, 20%);
-$white: white;
-
-$node-opacity-blurred: 0.6;
-$node-highlight-fill-opacity: 0.3;
-$node-highlight-stroke-opacity: 0.5;
-$node-highlight-stroke-width: 3px;
-$node-border-stroke-width: 5px;
-$node-pseudo-opacity: 1;
-$edge-highlight-opacity: 0.3;
-$edge-opacity-blurred: 0;
-$edge-opacity: 0.5;
-$edge-link-stroke-width: 3px;
-
-$btn-opacity-default: 1;
-$btn-opacity-hover: 1;
-$btn-opacity-selected: 1;
-
-$link-opacity-default: 1;
-
-$search-border-color: $background-darker-color;
-$search-border-width: 2px;
-
-/* specific elements */
-$body-background-color: #FFF;
-$label-background-color: #FFF;
+@import "variables";
+@import "contrast-overrides";
+@import "base";