style(all): Removed all less color variables and using CSS4 consolida…

…ted colors (#4204) * Cleaned all colors using colors.less and remove the file * Fixing alerts in pills and tags * more color fixes
spinnaker · Oct 3, 2017 · 3c3eccc · 3c3eccc
1 parent fbb90cb
commit 3c3eccc
Show file tree

Hide file tree

Showing 24 changed files with 76 additions and 145 deletions.
diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/common/configure.less b/app/scripts/modules/amazon/src/loadBalancer/configure/common/configure.less
@@ -1,14 +1,12 @@
-@import (reference) "~coreColors";
-
 .wizard-pod {
   padding-bottom: 15px;
   > div {
-    border: 1px solid @lighter_grey;
+    border: 1px solid var(--color-cirrus);
   }
   .wizard-pod-row {
     display: flex;
     padding: 5px;
-    border-bottom: 1px solid @lighter_grey;
+    border-bottom: 1px solid var(--color-cirrus);
 
     label {
       font-weight: 400;
@@ -32,7 +30,7 @@
           padding: 0 10px 0 0;
         }
       }
-      background-color: @lighter_grey;
+      background-color: var(--color-cirrus);
     }
     .wizard-pod-row-title {
       display: flex;
@@ -125,7 +123,7 @@
 // that angular uses for invalid, even if pristine. This should/will go away
 // when converting to react, so doing it this way to not waste more time.
 .target-group-name.ng-invalid {
-  border-color: #843534;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  border-color: var(--color-danger);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--color-danger-light);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--color-danger-light);
 }
diff --git a/app/scripts/modules/amazon/src/loadBalancer/targetGroup.less b/app/scripts/modules/amazon/src/loadBalancer/targetGroup.less
@@ -1,7 +1,5 @@
-@import (reference) "~coreColors";
-
 .target-group-title {
-  color: @dark_grey;
+  color: var(--color-mineshaft);
   font-weight: 600;
   font-size: 14px;
   padding-right: 15px;

diff --git a/.../modules/amazon/src/serverGroup/details/scalingPolicy/scalingPolicySummary.component.less b/.../modules/amazon/src/serverGroup/details/scalingPolicy/scalingPolicySummary.component.less
@@ -5,7 +5,7 @@ scaling-policy-summary {
   .actions {
     font-size: 85%;
     margin: 0 0 15px 0;
-    border-bottom: 1px solid #cccccc;
+    border-bottom: 1px solid var(--color-alto);
 
     .btn-left {
       padding-left: 0;

diff --git a/app/scripts/modules/amazon/webpack.config.js b/app/scripts/modules/amazon/webpack.config.js
@@ -49,7 +49,6 @@ module.exports = {
     alias: {
       '@spinnaker/amazon': path.join(__dirname, 'src'),
       'coreImports': path.resolve(basePath, 'app', 'scripts', 'modules', 'core', 'src', 'presentation', 'less', 'imports', 'commonImports.less'),
-      'coreColors': path.resolve(basePath, 'app', 'scripts', 'modules', 'core', 'src', 'presentation', 'less', 'imports', 'colors.less'),
       'amazon': path.join(__dirname, 'src')
     }
   },

diff --git a/app/scripts/modules/canary/canary.less b/app/scripts/modules/canary/canary.less
@@ -1,5 +1,3 @@
-@import (reference) "~core/presentation/less/imports/colors.less";
-
 div.canary-score {
   div.progress {
     border-radius: 0;
@@ -13,13 +11,13 @@ div.canary-score {
     -webkit-box-shadow: none;
   }
   div.progress-bar-danger {
-    background-color: @unhealthy_red;
+    background-color: var(--color-danger);
   }
   div.progress-bar.progress-bar-warning {
-    background-color: @mid_light_grey;
+    background-color: var(--color-alto);
   }
   div.progress-bar.progress-bar-success {
-    background-color: @healthy_green;
+    background-color: var(--color-success-light);
   }
 }
 
@@ -34,15 +32,15 @@ div.canary-score {
 
 .canary-details {
   .section-title {
-    border-bottom: 1px solid @mid_lighter_grey;
+    border-bottom: 1px solid var(--color-concrete);
     margin-bottom: 20px;
     h4 {
       border-bottom: 0;
     }
   }
   h4 {
     margin-bottom: 10px;
-    border-bottom: 1px solid @mid_lighter_grey;
+    border-bottom: 1px solid var(--color-silver);
   }
   .canary-config-section {
     margin-bottom: 20px;

diff --git a/app/scripts/modules/canary/canary/canaryScore.component.less b/app/scripts/modules/canary/canary/canaryScore.component.less
@@ -7,27 +7,27 @@
   height: 20px;
   line-height: 14px;
   &.label-failing {
-    background-color: @unhealthy_orange;
+    background-color: var(--color-alert-light);
     &.inverse {
-      color: @unhealthy_orange;
+      color: var(--color-alert);
     }
   }
   &.label-healthy {
-    background-color: @healthy_green_border;
+    background-color: var(--color-success);
     &.inverse {
-      color: @healthy_green_border;
+      color: var(--color-success);
     }
   }
   &.label-unhealthy {
-    background-color: @unhealthy_red;
+    background-color: var(--color-danger);
     &.inverse {
-      color: @unhealthy_red;
+      color: var(--color-danger);
     }
   }
   &.label-unknown {
-    background-color: @unknown-label-color;
+    background-color: var(--color-text-caption);
     &.inverse {
-      color: @unknown-label-color;
+      color: var(--color-text-caption);
     }
   }
   &.inverse {

diff --git a/app/scripts/modules/core/src/account/accountTag.less b/app/scripts/modules/core/src/account/accountTag.less
@@ -1,5 +1,3 @@
-@import (reference) "~core/presentation/less/imports/colors.less";
-
 .account-tag {
   &:empty {
     display: none;

diff --git a/app/scripts/modules/core/src/application/config/links/applicationLinks.component.less b/app/scripts/modules/core/src/application/config/links/applicationLinks.component.less
@@ -1,5 +1,3 @@
-@import (reference) "~core/presentation/less/imports/colors.less";
-
 application-links {
   .row-heading {
     padding: 10px 0;

diff --git a/app/scripts/modules/core/src/application/nav/applicationNav.component.less b/app/scripts/modules/core/src/application/nav/applicationNav.component.less
@@ -1,5 +1,3 @@
-@import (reference) "~core/presentation/less/imports/colors.less";
-
 application-nav, application-nav-secondary, .application-nav {
   display: inline-block;
   .nav-section {

diff --git a/app/scripts/modules/core/src/modal/wizard/modalWizard.less b/app/scripts/modules/core/src/modal/wizard/modalWizard.less
@@ -75,7 +75,7 @@ v2-modal-wizard {
       }
       &.dirty {
         a:before {
-          color: @state-danger-text;
+          color: var(--color-danger);
           background-color: transparent;
           content: "\e088";
           top: 11px;
@@ -115,7 +115,7 @@ v2-modal-wizard {
           }
           &.dirty {
             &:before {
-              color: @state-danger-text;
+              color: var(--color-danger);
               background-color: transparent;
               content: "\e088";
               top: 11px;

diff --git a/app/scripts/modules/core/src/pipeline/config/pipelineConfig.less b/app/scripts/modules/core/src/pipeline/config/pipelineConfig.less
@@ -11,8 +11,8 @@
     opacity: .6;
   }
   .invalid {
-    border-color: @state-danger-text;
-    @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@state-danger-text, 20%);
+    border-color: var(--color-danger);
+    @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--color-danger-light);
     .box-shadow(@shadow);
   }
 }

diff --git a/app/scripts/modules/core/src/pipeline/config/stages/group/groupStage.less b/app/scripts/modules/core/src/pipeline/config/stages/group/groupStage.less
@@ -1,5 +1,3 @@
-@import (reference) "~core/presentation/less/imports/colors.less";
-
 .group-execution-label-list {
   list-style-type: none;
   padding: 3px 10px 0 10px;
@@ -16,7 +14,7 @@
     }
     font-size: 13px;
     >:hover {
-      background-color: lighten(@dark_blue_background, 10%);
+      background-color: var(--color-primary-g1);
     }
     span+span {
       padding-left: 20px;
@@ -38,24 +36,24 @@
 }
 
 .group-stages-list-popover {
-  background-color: @dark_blue_background !important;
+  background-color: var(--color-primary) !important;
   .popover-content, &.inverse {
-    background-color: @dark_blue_background;
-    color: white;
+    background-color: var(--color-primary);
+    color: var(--color-white);
     padding: 5px;
   }
 
   &.top > div.arrow:after {
-    border-top-color: @dark_blue_background;
+    border-top-color: var(--color-primary);
   }
 
   &.bottom > div.arrow:after {
-    border-bottom-color: @dark_blue_background;
+    border-bottom-color: var(--color-primary);
   }
 
   .group-name {
-    color: @dark_blue_background_title;
-    border-bottom: 1px #7e94a4 solid;
+    color: var(--color-accessory-light);
+    border-bottom: 1px var(--color-accessory-light) solid;
     margin: 5px 10px 7px 10px;
   }
 }

diff --git a/app/scripts/modules/core/src/pipeline/config/templates/Variable.less b/app/scripts/modules/core/src/pipeline/config/templates/Variable.less
@@ -6,7 +6,7 @@
   }
 
   code {
-    color: black;
+    color: var(--color-black);
     margin-right: 3px;
     max-width: 100px;
     word-break: break-all;

diff --git a/app/scripts/modules/core/src/presentation/less/imports/animations.less b/app/scripts/modules/core/src/presentation/less/imports/animations.less
@@ -1,5 +1,3 @@
-@import (reference) "./colors.less";
-
 .glowing(@duration: 1.75) {
   -webkit-animation: animate-glow ~"@{duration}s" steps(12*@duration) infinite;
   -moz-animation: animate-glow ~"@{duration}s" steps(12*@duration) infinite;

diff --git a/app/scripts/modules/core/src/presentation/less/imports/colors.less b/app/scripts/modules/core/src/presentation/less/imports/colors.less
diff --git a/app/scripts/modules/core/src/presentation/less/imports/commonImports.less b/app/scripts/modules/core/src/presentation/less/imports/commonImports.less
@@ -1,5 +1,4 @@
-@import "./colors.less";
 @import "./animations.less";
 @import "./mixins.less";
 @import "~bootstrap/less/mixins.less";
-@import "~bootstrap/less/variables.less";
+@import "~bootstrap/less/variables.less";
diff --git a/app/scripts/modules/core/src/presentation/less/imports/mixins.less b/app/scripts/modules/core/src/presentation/less/imports/mixins.less
@@ -1,7 +1,5 @@
 /* Common mixins extracted from Bootstrap */
 
-@import (reference) "./colors.less";
-
 .text-right() {
   text-align: right;
 }

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -508,11 +508,11 @@ body > .container {
 }
 
 .no-highlight{
-  color: black;
+  color: var(--color-black);
 
   &:hover, &:focus {
     text-decoration: none;
-    color: black;
+    color: var(--color-black);
   }
 }
 
@@ -728,11 +728,11 @@ tfoot .add-new {
 .form-control {
   &.ng-invalid {
     &.ng-dirty, &.ng-invalid-validate-min, &.ng-invalid-validate-max, &.highlight-pristine {
-      border-color: @state-danger-text;
+      border-color: var(--color-danger);
       .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
       &:focus {
-        border-color: darken(@state-danger-text, 10%);
-        @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@state-danger-text, 20%);
+        border-color: var(--color-danger);
+        @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px var(--color-danger-light);
         .box-shadow(@shadow);
       }
     }
@@ -785,14 +785,14 @@ tfoot .add-new {
   text-align: left;
   display: block;
   font-weight: 600;
-  color: @state-danger-text;
+  color: var(--color-danger);
 }
 
 .warn-message {
   text-align: left;
   display: block;
   font-weight: 600;
-  color: @state-warning-text
+  color: var(--color-warning);
 }
 
 .application-list {

diff --git a/app/scripts/modules/core/src/styleguide/public/styleguide.html b/app/scripts/modules/core/src/styleguide/public/styleguide.html
diff --git a/app/scripts/modules/core/src/styleguide/src/styles/colors.css b/app/scripts/modules/core/src/styleguide/src/styles/colors.css
@@ -18,7 +18,7 @@
     --color-danger-light: #F1C0BF;
     --color-warning: #EEBB3C;
     --color-warning-light: #FFE7AB;
-    --color-alert: #EEBB3C;
+    --color-alert: #DF8D3B;
     --color-alert-light: #FAD6AA;
 
     --color-black: #000000;
@@ -42,7 +42,7 @@
     --color-text-accent: var(--color-accent);
     --color-text-caption: #747474;
     --color-text-link: #478CC8;
-    --color-text-on-dark: #FFFFFF;
+    --color-text-on-dark: var(--color-white);
 }
 /* @end color */