mirror of
https://github.com/weaveworks/scope.git
synced 2026-07-28 17:51:21 +00:00
Merge pull request #3116 from weaveworks/3115-enforce-theme-colors
Enforce theme colors
This commit is contained in:
Filip Barl
GitHub
1
.gitignore
vendored
1
.gitignore
vendored
@@ -54,6 +54,7 @@ extras/copyreport/copyreport
|
||||
*sublime-project
|
||||
*sublime-workspace
|
||||
*npm-debug.log
|
||||
*yarn-error.log
|
||||
app/static.go
|
||||
vendor/github.com/ugorji/go/codec/codecgen/bin/*
|
||||
*.codecgen.go
|
||||
|
||||
7
client/.sass-lint.yml
Normal file
7
client/.sass-lint.yml
Normal file
@@ -0,0 +1,7 @@
|
||||
options:
|
||||
merge-default-rules: false
|
||||
files:
|
||||
include: 'app/styles/*.s+(a|c)ss'
|
||||
rules:
|
||||
no-important: 1
|
||||
no-color-literals: 2
|
||||
19
client/.stylelintrc
Normal file
19
client/.stylelintrc
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"processors": ["stylelint-processor-styled-components"],
|
||||
"extends": [
|
||||
"stylelint-config-styled-components",
|
||||
"stylelint-config-recommended",
|
||||
],
|
||||
"rules": {
|
||||
"block-no-empty": null,
|
||||
"color-named": "never",
|
||||
"color-no-hex": true,
|
||||
"function-blacklist": ["/^rgb/", "/^hsl/"],
|
||||
"no-empty-source": null,
|
||||
"no-duplicate-selectors": null,
|
||||
"property-no-vendor-prefix": [true, {
|
||||
"ignoreProperties": ["tab-size", "hyphens"],
|
||||
}],
|
||||
"selector-type-no-unknown": null,
|
||||
},
|
||||
}
|
||||
@@ -3,4 +3,4 @@ WORKDIR /home/weave
|
||||
COPY package.json yarn.lock /home/weave/
|
||||
ENV NPM_CONFIG_LOGLEVEL=warn NPM_CONFIG_PROGRESS=false
|
||||
RUN yarn --pure-lockfile
|
||||
COPY webpack.local.config.js webpack.production.config.js server.js .babelrc .eslintrc .eslintignore /home/weave/
|
||||
COPY webpack-common.js webpack.local.config.js webpack.production.config.js server.js .babelrc .eslintrc .eslintignore .stylelintrc .sass-lint.yml /home/weave/
|
||||
|
||||
@@ -15,8 +15,8 @@ a {
|
||||
|
||||
.browsehappy {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
background: $color-silver;
|
||||
color: $color-black;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
@@ -66,17 +66,17 @@ a {
|
||||
}
|
||||
|
||||
.shadow-2 {
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 3px 10px transparentize($color-black, 0.84), 0 3px 10px transparentize($color-black, 0.77);
|
||||
}
|
||||
|
||||
.shadow-3 {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 10px 30px transparentize($color-black, 0.81), 0 6px 10px transparentize($color-black, 0.77);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@extend .hideable;
|
||||
|
||||
background-color: white;
|
||||
background-color: $color-white;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -96,7 +96,7 @@ a {
|
||||
|
||||
.overlay-wrapper {
|
||||
align-items: center;
|
||||
background-color: fade-out($background-color, 0.1);
|
||||
background-color: transparentize($background-color, 0.1);
|
||||
border-radius: 4px;
|
||||
color: $text-tertiary-color;
|
||||
display: flex;
|
||||
@@ -172,7 +172,7 @@ a {
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
@@ -267,9 +267,9 @@ a {
|
||||
|
||||
.tooltip {
|
||||
display: none;
|
||||
background-color: black;
|
||||
background-color: $color-black;
|
||||
position: absolute;
|
||||
color: white;
|
||||
color: $color-white;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
border-radius: 3px;
|
||||
@@ -295,7 +295,7 @@ a {
|
||||
width: 0;
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-top-color: black;
|
||||
border-top-color: $color-black;
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
@@ -358,7 +358,7 @@ a {
|
||||
}
|
||||
|
||||
&-matched {
|
||||
border-color: $weave-blue;
|
||||
border-color: $color-weaveblue;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -527,8 +527,8 @@ a {
|
||||
}
|
||||
|
||||
.match {
|
||||
background-color: lighten(rgba(0, 210, 255, 0.5), 30%);
|
||||
border: 1px solid $weave-blue;
|
||||
background-color: transparentize($color-anakiwa, 0.5);
|
||||
border: 1px solid $color-weaveblue;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -539,7 +539,7 @@ a {
|
||||
}
|
||||
.shadow {
|
||||
fill: none;
|
||||
stroke: $weave-blue;
|
||||
stroke: $color-weaveblue;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
&.highlighted {
|
||||
@@ -566,14 +566,14 @@ a {
|
||||
|
||||
.highlight-border {
|
||||
fill: none;
|
||||
stroke: $weave-blue;
|
||||
stroke: $color-weaveblue;
|
||||
stroke-width: 0.7 + $node-highlight-stroke-width * 2;
|
||||
stroke-opacity: $node-highlight-stroke-opacity;
|
||||
}
|
||||
|
||||
.highlight-shadow {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke: $color-white;
|
||||
stroke-width: 0.7;
|
||||
stroke-opacity: $node-highlight-shadow-opacity;
|
||||
}
|
||||
@@ -585,7 +585,7 @@ a {
|
||||
|
||||
.metric-fill {
|
||||
stroke: none;
|
||||
fill: #A0BE7E;
|
||||
fill: $color-olivine;
|
||||
fill-opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -639,7 +639,7 @@ a {
|
||||
display: inline-block;
|
||||
margin: 1px;
|
||||
padding: 2px 4px;
|
||||
background-color: fade-out($weave-blue, .9);
|
||||
background-color: transparentize($color-weaveblue, 0.9);
|
||||
}
|
||||
|
||||
&-label {
|
||||
@@ -651,7 +651,7 @@ a {
|
||||
&-more {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7em;
|
||||
color: darken($weave-blue, 10%);
|
||||
color: $color-cerulean;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
@@ -671,13 +671,13 @@ a {
|
||||
.node-details {
|
||||
height: 100%;
|
||||
width: $details-window-width;
|
||||
background-color: rgba(255, 255, 255, 0.86);
|
||||
background-color: transparentize($color-white, 0.14);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
background-color: $color-white;
|
||||
@extend .shadow-2;
|
||||
// keep node-details above the terminal.
|
||||
z-index: 2;
|
||||
@@ -706,9 +706,9 @@ a {
|
||||
padding: 4px 5px;
|
||||
margin-left: 2px;
|
||||
font-size: 110%;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
|
||||
span {
|
||||
@@ -724,14 +724,14 @@ a {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: transparentize($color-white, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
background-color: fade-out($weave-blue, .7);
|
||||
border: 1px solid $weave-blue;
|
||||
background-color: transparentize($color-weaveblue, 0.7);
|
||||
border: 1px solid $color-weaveblue;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@@ -742,7 +742,7 @@ a {
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: white;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
width: 348px;
|
||||
padding-top: 0;
|
||||
@@ -763,7 +763,7 @@ a {
|
||||
&-relatives {
|
||||
margin-top: 4px;
|
||||
font-size: 120%;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
|
||||
&-link {
|
||||
@extend .truncate;
|
||||
@@ -798,12 +798,12 @@ a {
|
||||
}
|
||||
|
||||
.node-control-button {
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
&-spinner {
|
||||
@extend .hideable;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@@ -813,7 +813,7 @@ a {
|
||||
width: 55%;
|
||||
padding-top: 6px;
|
||||
text-align: left;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
|
||||
&-icon {
|
||||
@extend .blinkable;
|
||||
@@ -1058,7 +1058,7 @@ a {
|
||||
line-height: 1.5;
|
||||
|
||||
&:hover, &.selected {
|
||||
background-color: lighten($background-color, 5%);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
> * {
|
||||
@@ -1135,12 +1135,12 @@ a {
|
||||
}
|
||||
|
||||
.new-image {
|
||||
color: $success-green;
|
||||
color: $color-japanese-laurel;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
background-color: #f1f1f6;
|
||||
background-color: $color-athens-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -1171,10 +1171,10 @@ a {
|
||||
&-metric-box {
|
||||
@extend .palable;
|
||||
cursor: pointer;
|
||||
fill: rgba(150, 150, 150, 0.4);
|
||||
fill: transparentize($color-dusty-gray, 0.6);
|
||||
|
||||
&-info {
|
||||
background-color: rgba(white, 0.6);
|
||||
background-color: transparentize($color-white, 0.4);
|
||||
border-radius: 2px;
|
||||
cursor: inherit;
|
||||
padding: 5px;
|
||||
@@ -1189,8 +1189,8 @@ a {
|
||||
}
|
||||
|
||||
&-layer-topology {
|
||||
background-color: rgba(#eee, 0.95);
|
||||
border: 1px solid #ccc;
|
||||
background-color: transparentize($color-gallery, 0.05);
|
||||
border: 1px solid $color-silver;
|
||||
color: $text-tertiary-color;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
@@ -1208,7 +1208,7 @@ a {
|
||||
.details-wrapper .node-details-table {
|
||||
&-node {
|
||||
&:hover, &.selected {
|
||||
background-color: lighten($background-color, 5%);
|
||||
background-color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1220,14 +1220,14 @@ a {
|
||||
font-size: 110%;
|
||||
color: $text-secondary-color;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10%;
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: transparentize($color-white, 0.4);
|
||||
}
|
||||
&-pending, &-pending:hover {
|
||||
opacity: 0.2;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-color: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@@ -1261,13 +1261,13 @@ a {
|
||||
&-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0px solid #000000;
|
||||
color: #f0f0f0;
|
||||
border: 0px solid $color-black;
|
||||
color: $color-gallery;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@extend .truncate;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
height: $terminal-header-height;
|
||||
padding: 8px 24px;
|
||||
background-color: $text-color;
|
||||
@@ -1288,10 +1288,10 @@ a {
|
||||
&-item, &-item-icon {
|
||||
@extend .palable;
|
||||
padding: 4px 5px;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
border: 1px solid rgba(255, 255, 255, 0);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10%;
|
||||
|
||||
font-size: 0.8em;
|
||||
@@ -1300,7 +1300,7 @@ a {
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: transparentize($color-white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1319,7 +1319,7 @@ a {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: black;
|
||||
background-color: $color-black;
|
||||
padding: 8px;
|
||||
border-radius: 0 0 0 4px;
|
||||
|
||||
@@ -1344,7 +1344,7 @@ a {
|
||||
|
||||
&-message {
|
||||
margin: 4px 0;
|
||||
color: $white;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.link {
|
||||
@@ -1356,8 +1356,8 @@ a {
|
||||
}
|
||||
|
||||
&-cursor {
|
||||
color: #000;
|
||||
background: #f0f0f0;
|
||||
color: $color-black;
|
||||
background: $color-gallery;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1454,7 +1454,7 @@ a {
|
||||
|
||||
.fa {
|
||||
margin-left: 4px;
|
||||
color: darkred;
|
||||
color: $color-red-berry;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
@@ -1622,7 +1622,7 @@ a {
|
||||
}
|
||||
|
||||
.sidebar-gridmode {
|
||||
background-color: #e9e9f1;
|
||||
background-color: $color-athens-gray-dark;
|
||||
border-color: $background-darker-color;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -1687,7 +1687,7 @@ a {
|
||||
|
||||
&-input {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background: $color-white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
@@ -1743,13 +1743,13 @@ a {
|
||||
}
|
||||
|
||||
&-matched &-input {
|
||||
border-color: $weave-blue;
|
||||
border-color: $color-weaveblue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-item {
|
||||
background-color: fade-out($weave-blue, .2);
|
||||
background-color: transparentize($color-weaveblue, 0.2);
|
||||
border-radius: $border-radius / 2;
|
||||
margin: 1px 0 1px 1.5em;
|
||||
display: inline-block;
|
||||
@@ -1790,7 +1790,7 @@ a {
|
||||
|
||||
.help-panel {
|
||||
z-index: 2048;
|
||||
background-color: white;
|
||||
background-color: $color-white;
|
||||
@extend .shadow-2;
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -1806,9 +1806,9 @@ a {
|
||||
}
|
||||
|
||||
&-header {
|
||||
background-color: $weave-blue;
|
||||
background-color: $color-weaveblue;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
color: $color-white;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
@@ -1827,13 +1827,13 @@ a {
|
||||
padding: 4px 5px;
|
||||
margin-left: 2px;
|
||||
font-size: 110%;
|
||||
color: #8383ac;
|
||||
color: $color-lavender;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(131, 131, 172, 0);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10%;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(131, 131, 172, 0.6);
|
||||
border-color: transparentize($color-lavender, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1849,15 +1849,15 @@ a {
|
||||
text-transform: uppercase;
|
||||
line-height: 150%;
|
||||
font-size: 125%;
|
||||
color: #8383ac;
|
||||
color: $color-lavender;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid rgba(131, 131, 172, 0.1);
|
||||
border-bottom: 1px solid transparentize($color-lavender, 0.9);
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 90%;
|
||||
color: #8383ac;
|
||||
color: $color-lavender;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
@@ -1875,13 +1875,13 @@ a {
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
color: $color-dim-gray;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
background-color: $color-alabaster;
|
||||
border: solid 1px $color-silver;
|
||||
border-bottom-color: $color-gray;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
box-shadow: inset 0 -1px 0 $color-gray;
|
||||
}
|
||||
div.key {
|
||||
width: 60px;
|
||||
@@ -1920,7 +1920,7 @@ a {
|
||||
|
||||
&-current-topology {
|
||||
text-transform: uppercase;
|
||||
color: #8383ac;
|
||||
color: $color-lavender;
|
||||
}
|
||||
|
||||
&-fields {
|
||||
@@ -1972,7 +1972,7 @@ a {
|
||||
|
||||
.debug-panel {
|
||||
@extend .shadow-2;
|
||||
background-color: #fff;
|
||||
background-color: $color-white;
|
||||
top: 80px;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
@@ -2059,19 +2059,15 @@ a {
|
||||
// because we want consistent behaviour between the
|
||||
// visual and row locking logic that happens on hover.
|
||||
tbody tr.selected, tbody tr.focused {
|
||||
background-color: #d7ecf5;
|
||||
border: 1px solid $weave-blue;
|
||||
}
|
||||
|
||||
tbody tr.selected {
|
||||
// box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.16);
|
||||
background-color: $color-link-water;
|
||||
border: 1px solid $color-weaveblue;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
|
||||
table {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid $color-silver;
|
||||
}
|
||||
|
||||
thead {
|
||||
@@ -2096,8 +2092,8 @@ a {
|
||||
}
|
||||
|
||||
thead {
|
||||
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.16);
|
||||
border-bottom: 1px solid #aaa;
|
||||
box-shadow: 0 4px 2px -2px transparentize($color-black, 0.84);
|
||||
border-bottom: 1px solid $color-gray;
|
||||
}
|
||||
|
||||
tbody {
|
||||
@@ -2122,7 +2118,7 @@ a {
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
background-color: $color-white;
|
||||
padding: 20px;
|
||||
@extend .shadow-2;
|
||||
z-index: 2048;
|
||||
@@ -2141,7 +2137,7 @@ a {
|
||||
}
|
||||
|
||||
button, a {
|
||||
color: $weave-charcoal-blue;
|
||||
color: $color-primary-charcoal;
|
||||
|
||||
&:hover {
|
||||
color: $text-color;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
@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;
|
||||
$edge-color: black;
|
||||
|
||||
$background-color: $color-white;
|
||||
$background-lighter-color: $color-white;
|
||||
$background-darker-color: $color-blue-haze;
|
||||
$background-darker-secondary-color: $color-blue-haze;
|
||||
$background-dark-color: $color-primary-charcoal;
|
||||
$text-color: $color-black;
|
||||
$text-secondary-color: $color-neutral-black;
|
||||
$text-tertiary-color: $color-tundora;
|
||||
$border-light-color: $color-solid-gray;
|
||||
$text-darker-color: $color-black;
|
||||
$edge-color: $color-black;
|
||||
|
||||
$node-elements-in-background-opacity: 0.4;
|
||||
|
||||
@@ -30,9 +30,9 @@ $btn-opacity-disabled: 0.4;
|
||||
|
||||
$link-opacity-default: 1;
|
||||
|
||||
$search-border-color: $background-darker-color;
|
||||
$search-border-color: $color-blue-haze;
|
||||
$search-border-width: 2px;
|
||||
|
||||
/* specific elements */
|
||||
$body-background-color: #FFF;
|
||||
$label-background-color: #FFF;
|
||||
$body-background-color: $color-white;
|
||||
$label-background-color: $color-white;
|
||||
|
||||
@@ -1,28 +1,19 @@
|
||||
$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
|
||||
$success-green: green;
|
||||
|
||||
$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: #f8f8f8;
|
||||
$background-lighter-color: lighten($background-color, 8%);
|
||||
$background-darker-color: darken($background-color, 16%);
|
||||
$background-darker-secondary-color: darken($background-color, 8%);
|
||||
$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;
|
||||
$background-color: $color-lightgray;
|
||||
$background-lighter-color: $color-white;
|
||||
$background-darker-color: $color-silver;
|
||||
$background-darker-secondary-color: $color-mercury;
|
||||
$background-dark-color: $color-primary-charcoal;
|
||||
$text-color: $color-gunpowder;
|
||||
$text-secondary-color: $color-comet;
|
||||
$text-tertiary-color: $color-lavender;
|
||||
$border-light-color: $color-mischka;
|
||||
$text-darker-color: $color-primary-charcoal;
|
||||
|
||||
$details-window-width: 420px;
|
||||
$details-window-padding-left: 30px;
|
||||
@@ -42,7 +33,7 @@ $node-text-scale: 2;
|
||||
$edge-highlight-opacity: 0.1;
|
||||
$edge-opacity-blurred: 0.2;
|
||||
$edge-opacity: 0.5;
|
||||
$edge-color: rgb(110, 110, 156);
|
||||
$edge-color: $color-kimberly-dark;
|
||||
|
||||
$btn-opacity-default: 0.7;
|
||||
$btn-opacity-hover: 1;
|
||||
@@ -57,5 +48,5 @@ $search-border-width: 1px;
|
||||
$timeline-height: 55px;
|
||||
|
||||
/* specific elements */
|
||||
$body-background-color: $background-color;
|
||||
$label-background-color: fade-out($background-color, .3);
|
||||
$body-background-color: $color-lightgray;
|
||||
$label-background-color: transparentize($color-lightgray, 0.3);
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
"reselect": "3.0.1",
|
||||
"reselect-map": "1.0.3",
|
||||
"styled-components": "2.2.4",
|
||||
"weaveworks-ui-components": "0.4.36",
|
||||
"weaveworks-ui-components": "0.4.42",
|
||||
"whatwg-fetch": "2.0.3",
|
||||
"xterm": "2.9.2"
|
||||
},
|
||||
@@ -79,8 +79,15 @@
|
||||
"mockdate": "2.0.2",
|
||||
"node-sass": "^4.6.0",
|
||||
"postcss-loader": "1.3.3",
|
||||
"sass-lint": "^1.12.1",
|
||||
"sass-loader": "6.0.6",
|
||||
"sasslint-webpack-plugin": "^1.0.4",
|
||||
"style-loader": "0.19.0",
|
||||
"stylelint": "9.1.3",
|
||||
"stylelint-config-recommended": "2.1.0",
|
||||
"stylelint-config-styled-components": "0.1.1",
|
||||
"stylelint-custom-processor-loader": "0.4.0",
|
||||
"stylelint-processor-styled-components": "1.3.1",
|
||||
"url": "0.11.0",
|
||||
"url-loader": "0.6.2",
|
||||
"webpack": "2.4.1",
|
||||
@@ -97,7 +104,7 @@
|
||||
"start-production": "NODE_ENV=production node server.js",
|
||||
"test": "jest",
|
||||
"coveralls": "cat coverage/lcov.info | coveralls",
|
||||
"lint": "eslint app server.js",
|
||||
"lint": "eslint app server.js && stylelint src && sass-lint -v",
|
||||
"clean": "rm build/app.js",
|
||||
"noprobe": "../scope stop && ../scope launch --no-probe --app.window 8760h",
|
||||
"loadreport": "yarn run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report -d"
|
||||
|
||||
25
client/webpack-common.js
Normal file
25
client/webpack-common.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const { isString, kebabCase, forEach } = require('lodash');
|
||||
const theme = require('weaveworks-ui-components/lib/theme').default;
|
||||
|
||||
// Flattens and collects all theme colors, names them
|
||||
// as Scss vars and returns them as query string
|
||||
// TODO: Move this helper to ui-components repo as
|
||||
// it's currently used both here and in service-ui.
|
||||
function themeColorsAsScss() {
|
||||
const colors = [];
|
||||
forEach(theme.colors, (value, name) => {
|
||||
const colorPrefix = `$color-${kebabCase(name)}`;
|
||||
if (isString(value)) {
|
||||
colors.push(`${colorPrefix}: ${value}`);
|
||||
} else {
|
||||
forEach(value, (innerValue, subname) => {
|
||||
colors.push(`${colorPrefix}-${kebabCase(subname)}: ${innerValue}`);
|
||||
});
|
||||
}
|
||||
});
|
||||
return `${colors.join('; ')};`;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
themeColorsAsScss,
|
||||
};
|
||||
@@ -3,7 +3,11 @@ const autoprefixer = require('autoprefixer');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const SassLintPlugin = require('sasslint-webpack-plugin');
|
||||
const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
|
||||
|
||||
const { themeColorsAsScss } = require('./webpack-common');
|
||||
|
||||
/**
|
||||
* This is the Webpack configuration file for local development.
|
||||
* It contains local-specific configuration which includes:
|
||||
@@ -58,6 +62,10 @@ module.exports = {
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
||||
new ExtractTextPlugin('style-[name]-[chunkhash].css'),
|
||||
new SassLintPlugin({
|
||||
context: 'app/styles',
|
||||
ignorePlugins: ['html-webpack-plugin', 'extract-text-webpack-plugin'],
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendors', 'terminal-app'],
|
||||
template: 'app/html/index.html',
|
||||
@@ -86,7 +94,10 @@ module.exports = {
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules|vendor/,
|
||||
loader: 'eslint-loader',
|
||||
loaders: [
|
||||
'eslint-loader',
|
||||
'stylelint-custom-processor-loader',
|
||||
],
|
||||
enforce: 'pre'
|
||||
},
|
||||
{
|
||||
@@ -124,6 +135,7 @@ module.exports = {
|
||||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
data: themeColorsAsScss(),
|
||||
includePaths: [
|
||||
path.resolve(__dirname, './node_modules/xterm'),
|
||||
path.resolve(__dirname, './node_modules/font-awesome'),
|
||||
|
||||
@@ -7,6 +7,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
|
||||
|
||||
const { themeColorsAsScss } = require('./webpack-common');
|
||||
|
||||
const GLOBALS = {
|
||||
'process.env': {NODE_ENV: '"production"'}
|
||||
};
|
||||
@@ -133,6 +135,7 @@ module.exports = {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
minimize: true,
|
||||
data: themeColorsAsScss(),
|
||||
includePaths: [
|
||||
path.resolve(__dirname, './node_modules/xterm'),
|
||||
path.resolve(__dirname, './node_modules/font-awesome'),
|
||||
|
||||
1218
client/yarn.lock
1218
client/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user