From c993b975daaa60e7f18d3361ec6154e8986e9ed7 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 27 Jul 2021 21:12:21 +0200
Subject: [PATCH] Color fixes.

---
 .../pages/restore/restore-page.component.scss |  2 +-
 .../pages/onboarding-dialog.component.scss    |  2 +-
 .../assets/pages/asset-tags.component.scss    |  2 +-
 .../forms/stock-photo-editor.component.scss   |  4 +-
 .../rules/pages/rule/rule-page.component.scss |  2 +-
 .../rules/pages/rules/rule.component.scss     |  2 +-
 .../pages/schemas/schema-form.component.scss  |  6 +--
 .../settings/pages/plans/plan.component.scss  |  2 +-
 .../forms/editors/toggle.component.scss       |  2 +-
 .../assets/asset-uploader.component.scss      |  4 +-
 .../components/assets/asset.component.scss    |  2 +-
 .../assets/assets-list.component.scss         |  2 +-
 .../comments/comments.component.scss          |  2 +-
 .../internal/internal-area.component.scss     |  2 +-
 frontend/app/theme/_bootstrap-vars.scss       | 10 +++--
 frontend/app/theme/_bootstrap.scss            | 44 +++++++++----------
 frontend/app/theme/_common.scss               | 14 +++---
 frontend/app/theme/_forms.scss                | 10 ++---
 frontend/app/theme/_lists.scss                |  8 ++--
 frontend/app/theme/_panels2.scss              | 10 ++---
 frontend/app/theme/_vars.scss                 | 24 +++++-----
 21 files changed, 77 insertions(+), 79 deletions(-)

diff --git a/frontend/app/features/administration/pages/restore/restore-page.component.scss b/frontend/app/features/administration/pages/restore/restore-page.component.scss
index 438e94d31..46729444a 100644
--- a/frontend/app/features/administration/pages/restore/restore-page.component.scss
+++ b/frontend/app/features/administration/pages/restore/restore-page.component.scss
@@ -40,7 +40,7 @@ h3 {
 
         &-success {
             @extend %default-color;
-            background: $color-theme-green;
+            background: $color-theme-success;
         }
     }
 
diff --git a/frontend/app/features/apps/pages/onboarding-dialog.component.scss b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
index 69cecc1a0..668ff8345 100644
--- a/frontend/app/features/apps/pages/onboarding-dialog.component.scss
+++ b/frontend/app/features/apps/pages/onboarding-dialog.component.scss
@@ -48,7 +48,7 @@ p {
 }
 
 .header-focus {
-    color: $color-theme-blue;
+    color: $color-theme-brand;
 }
 
 .header-left {
diff --git a/frontend/app/features/assets/pages/asset-tags.component.scss b/frontend/app/features/assets/pages/asset-tags.component.scss
index ed5675cec..158da1b45 100644
--- a/frontend/app/features/assets/pages/asset-tags.component.scss
+++ b/frontend/app/features/assets/pages/asset-tags.component.scss
@@ -3,6 +3,6 @@
         background: none;
         border: 0;
         border-radius: 0;
-        color: $color-theme-blue;
+        color: $color-theme-brand;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss b/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
index cf37e2c5b..c0450faa4 100644
--- a/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
+++ b/frontend/app/features/content/shared/forms/stock-photo-editor.component.scss
@@ -74,11 +74,11 @@ sqx-list-view {
     position: relative;
 
     &:hover {
-        border-color: $color-theme-blue;
+        border-color: $color-theme-brand;
     }
 
     &.selected {
-        border-color: $color-theme-blue;
+        border-color: $color-theme-brand;
     }
 
     &-user {
diff --git a/frontend/app/features/rules/pages/rule/rule-page.component.scss b/frontend/app/features/rules/pages/rule/rule-page.component.scss
index 073f7e29b..97b8f169e 100644
--- a/frontend/app/features/rules/pages/rule/rule-page.component.scss
+++ b/frontend/app/features/rules/pages/rule/rule-page.component.scss
@@ -32,7 +32,7 @@
 }
 
 .btn-run {
-    color: $color-theme-blue !important;
+    color: $color-theme-brand !important;
 }
 
 .btn-enabled {
diff --git a/frontend/app/features/rules/pages/rules/rule.component.scss b/frontend/app/features/rules/pages/rules/rule.component.scss
index 1060ed243..b40377227 100644
--- a/frontend/app/features/rules/pages/rules/rule.component.scss
+++ b/frontend/app/features/rules/pages/rules/rule.component.scss
@@ -7,7 +7,7 @@
 }
 
 .btn-run {
-    color: $color-theme-blue !important;
+    color: $color-theme-brand !important;
 }
 
 a {
diff --git a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
index e3c5bf030..2b7484bed 100644
--- a/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
+++ b/frontend/app/features/schemas/pages/schemas/schema-form.component.scss
@@ -28,7 +28,7 @@ $icon-size: 4.5rem;
         background: transparent;
         border: 1px solid $color-border;
         border-radius: $border-radius;
-        color: $color-theme-blue;
+        color: $color-theme-brand;
         cursor: pointer;
         font-size: 1.75rem;
         font-weight: normal;
@@ -45,8 +45,8 @@ $icon-size: 4.5rem;
 
         &.active {
             @include box-shadow-outer(0, 0, 10px, .5);
-            background: $color-theme-blue;
-            border-color: $color-theme-blue;
+            background: $color-theme-brand;
+            border-color: $color-theme-brand;
             color: $color-white;
 
             &:hover {
diff --git a/frontend/app/features/settings/pages/plans/plan.component.scss b/frontend/app/features/settings/pages/plans/plan.component.scss
index 017fa160c..645898095 100644
--- a/frontend/app/features/settings/pages/plans/plan.component.scss
+++ b/frontend/app/features/settings/pages/plans/plan.component.scss
@@ -1,6 +1,6 @@
 .plan {
     &-price {
-        color: $color-theme-blue;
+        color: $color-theme-brand;
         margin-bottom: 0;
         margin-top: 0;
     }
diff --git a/frontend/app/framework/angular/forms/editors/toggle.component.scss b/frontend/app/framework/angular/forms/editors/toggle.component.scss
index dfb364fb0..e6e9d466d 100644
--- a/frontend/app/framework/angular/forms/editors/toggle.component.scss
+++ b/frontend/app/framework/angular/forms/editors/toggle.component.scss
@@ -31,7 +31,7 @@ $toggle-button-size: $toggle-height - .25rem;
         width: $toggle-width;
 
         &.checked {
-            background: $color-theme-green-dark;
+            background: $color-theme-success-dark;
 
             .toggle-button {
                 left: $toggle-height * .5;
diff --git a/frontend/app/shared/components/assets/asset-uploader.component.scss b/frontend/app/shared/components/assets/asset-uploader.component.scss
index 8d65186b3..97bd76cbe 100644
--- a/frontend/app/shared/components/assets/asset-uploader.component.scss
+++ b/frontend/app/shared/components/assets/asset-uploader.component.scss
@@ -60,12 +60,12 @@ $circle-size: 1.6rem;
     }
 
     &-success {
-        background: $color-theme-green;
+        background: $color-theme-success;
     }
 }
 
 .drag {
     & > .uploads {
-        border-color: $color-theme-blue;
+        border-color: $color-theme-brand;
     }
 }
\ No newline at end of file
diff --git a/frontend/app/shared/components/assets/asset.component.scss b/frontend/app/shared/components/assets/asset.component.scss
index e16956b90..237e33a70 100644
--- a/frontend/app/shared/components/assets/asset.component.scss
+++ b/frontend/app/shared/components/assets/asset.component.scss
@@ -178,7 +178,7 @@ $list-height: 2.25rem;
         width: 4px;
 
         &.selected {
-            background: $color-theme-blue;
+            background: $color-theme-brand;
         }
     }
 
diff --git a/frontend/app/shared/components/assets/assets-list.component.scss b/frontend/app/shared/components/assets/assets-list.component.scss
index 732643854..e56a951fd 100644
--- a/frontend/app/shared/components/assets/assets-list.component.scss
+++ b/frontend/app/shared/components/assets/assets-list.component.scss
@@ -24,7 +24,7 @@ h5 {
 
     &-over {
         @include absolute(-6px, -6px, -6px, -6px);
-        border: 2px solid $color-theme-blue;
+        border: 2px solid $color-theme-brand;
         opacity: 0;
     }
 
diff --git a/frontend/app/shared/components/comments/comments.component.scss b/frontend/app/shared/components/comments/comments.component.scss
index 4f1cea021..b78298977 100644
--- a/frontend/app/shared/components/comments/comments.component.scss
+++ b/frontend/app/shared/components/comments/comments.component.scss
@@ -4,7 +4,7 @@
     }
 
     .mention-active > a {
-        background: $color-theme-blue !important;
+        background: $color-theme-brand !important;
     }
 }
 
diff --git a/frontend/app/shell/pages/internal/internal-area.component.scss b/frontend/app/shell/pages/internal/internal-area.component.scss
index 616b66729..2ec8c5459 100644
--- a/frontend/app/shell/pages/internal/internal-area.component.scss
+++ b/frontend/app/shell/pages/internal/internal-area.component.scss
@@ -5,7 +5,7 @@
 
 .navbar-brand {
     @include absolute(0, null, 0, 0);
-    background: $color-theme-blue;
+    background: $color-theme-brand;
     color: $color-white !important;
     cursor: pointer;
     font-size: 1.8rem;
diff --git a/frontend/app/theme/_bootstrap-vars.scss b/frontend/app/theme/_bootstrap-vars.scss
index 68764b3bf..67f28d7bc 100644
--- a/frontend/app/theme/_bootstrap-vars.scss
+++ b/frontend/app/theme/_bootstrap-vars.scss
@@ -30,13 +30,14 @@ $text-muted:                    $color-text-decent;
 $min-contrast-ratio:            1.5;
 
 // Primary color.
-$primary:                       $color-theme-blue;
+$primary:                       $color-theme-brand;
 
 // Theme colors.
 $danger:                        $color-theme-error;
+$info:                          $color-theme-info;
 $secondary:                     $color-theme-secondary;
-$success:                       $color-theme-green;
-$warning:                       $color-theme-orange;
+$success:                       $color-theme-success;
+$warning:                       $color-theme-warning;
 
 // Background.
 $body-bg:                       $color-background;
@@ -55,6 +56,7 @@ $btn-white-space:               nowrap;
 // Alerts
 $alert-color-scale:             -100%;
 $alert-bg-scale:                0%;
+$alert-border-scale:                0%;
 $alert-link-font-weight:        normal;
 
 // Labels
@@ -74,7 +76,7 @@ $badge-bg-level: 2;
 $dropdown-border-color:         0;
 $dropdown-box-shadow:           0 3px 16px rgba(0, 0, 0, .2);
 $dropdown-divider-bg:           $color-border-dark;
-$dropdown-link-hover-bg:        $color-theme-blue-lightest;
+$dropdown-link-hover-bg:        $color-theme-brand-light;
 
 // Horizontal separator
 $hr-opacity:                    1;
diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss
index 82e154b02..7f6aebdff 100644
--- a/frontend/app/theme/_bootstrap.scss
+++ b/frontend/app/theme/_bootstrap.scss
@@ -65,7 +65,7 @@
 }
 
 .alert-hint {
-    background: lighten($color-theme-blue, 35%);
+    background: lighten($color-theme-brand, 35%);
     border: 0;
     border-radius: $border-radius;
     color: $color-text;
@@ -76,7 +76,7 @@
 
     i {
         @include absolute(1rem, null, null, 1rem);
-        color: $color-theme-blue;
+        color: $color-theme-brand;
         font-size: 1.3rem;
         font-weight: normal;
         vertical-align: text-bottom;
@@ -102,7 +102,7 @@ a {
 
     &.force {
         & {
-            color: $color-theme-blue !important;
+            color: $color-theme-brand !important;
         }
 
         &:hover {
@@ -229,10 +229,10 @@ a {
             }
 
             &.done {
-                color: $color-theme-green !important;
+                color: $color-theme-success !important;
 
                 a {
-                    color: $color-theme-green !important;
+                    color: $color-theme-success !important;
                 }
             }
 
@@ -256,10 +256,10 @@ a {
         }
 
         &.done {
-            color: $color-theme-green;
+            color: $color-theme-success;
 
             a {
-                color: $color-theme-green !important;
+                color: $color-theme-success !important;
             }
 
             i {
@@ -290,7 +290,7 @@ a {
 
         &.active,
         &:hover {
-            border-color: $color-theme-blue;
+            border-color: $color-theme-brand;
         }
     }
 }
@@ -372,28 +372,28 @@ a {
         &.active {
             & {
                 background: none;
-                border-color: $color-theme-blue;
-                color: $color-theme-blue;
+                border-color: $color-theme-brand;
+                color: $color-theme-brand;
             }
 
             i {
-                color: $color-theme-blue;
+                color: $color-theme-brand;
             }
 
             &:hover {
-                color: $color-theme-blue-dark;
+                color: $color-theme-brand-dark;
 
                 i {
-                    color: $color-theme-blue-dark;
+                    color: $color-theme-brand-dark;
                 }
             }
         }
 
         &:hover {
-            color: $color-theme-blue;
+            color: $color-theme-brand;
 
             i {
-                color: $color-theme-blue;
+                color: $color-theme-brand;
             }
         }
     }
@@ -407,7 +407,7 @@ a {
             }
 
             &.btn-primary {
-                @include build-toggle-button($color-theme-blue, $color-badge-primary-background);
+                @include build-toggle-button($color-theme-brand, $color-badge-primary-background);
             }
 
             &.btn-info {
@@ -419,11 +419,11 @@ a {
             }
 
             &.btn-success {
-                @include build-toggle-button($color-theme-green, $color-badge-success-background);
+                @include build-toggle-button($color-theme-success, $color-badge-success-background);
             }
 
             &.btn-warning {
-                @include build-toggle-button($color-theme-orange, $color-badge-warning-background);
+                @include build-toggle-button($color-theme-warning, $color-badge-warning-background);
             }
         }
 
@@ -435,7 +435,7 @@ a {
     // Link buttons only exists with blue text color in bootstrap. Provide them for all colors.
     &-text {
         &-primary {
-            @include build-text-button($color-theme-blue);
+            @include build-text-button($color-theme-brand);
         }
 
         &-secondary {
@@ -447,7 +447,7 @@ a {
         }
 
         &-success {
-            @include build-text-button($color-theme-green);
+            @include build-text-button($color-theme-success);
         }
 
         &-info {
@@ -455,7 +455,7 @@ a {
         }
 
         &-warning {
-            @include build-text-button($color-theme-orange);
+            @include build-text-button($color-theme-warning);
         }
 
         &-secondary2 {
@@ -497,7 +497,7 @@ $icon-size: 4.5rem;
         }
 
         i {
-            color: $color-theme-blue;
+            color: $color-theme-brand;
         }
 
         .radio-input {
diff --git a/frontend/app/theme/_common.scss b/frontend/app/theme/_common.scss
index 97221ce7f..fc032bc2d 100644
--- a/frontend/app/theme/_common.scss
+++ b/frontend/app/theme/_common.scss
@@ -131,7 +131,7 @@ hr {
 .item-published {
     & {
         @include circle(.5rem);
-        background: $color-theme-green;
+        background: $color-theme-success;
         border: 0;
         margin-left: .4rem;
     }
@@ -223,7 +223,7 @@ hr {
 
 .sidebar {
     @include absolute($size-navbar-height, null, 0, 0);
-    background: $color-theme-blue;
+    background: $color-theme-brand;
     color: $color-white;
     font-size: $font-small;
     font-weight: default;
@@ -239,7 +239,7 @@ hr {
     }
 
     .nav-link {
-        background: $color-theme-blue;
+        background: $color-theme-brand;
         color: $color-white !important;
         cursor: pointer;
         padding: 1rem 0;
@@ -248,11 +248,11 @@ hr {
         text-decoration: none;
 
         &:hover {
-            background: $color-theme-blue-darker;
+            background: $color-theme-brand-darker;
         }
 
         &.active {
-            background: $color-theme-blue-darker;
+            background: $color-theme-brand-darker;
         }
 
         i {
@@ -291,7 +291,7 @@ hr {
     }
 
     &-warning {
-        background: $color-theme-orange;
+        background: $color-theme-warning;
     }
 
     &-failed {
@@ -299,7 +299,7 @@ hr {
     }
 
     &-success {
-        background: $color-theme-green;
+        background: $color-theme-success;
     }
 }
 
diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss
index 011418fed..9c4729ddf 100644
--- a/frontend/app/theme/_forms.scss
+++ b/frontend/app/theme/_forms.scss
@@ -86,7 +86,7 @@
     }
 
     &-success {
-        background: $color-theme-green-dark;
+        background: $color-theme-success-dark;
     }
 
     &.closeable {
@@ -182,18 +182,18 @@
 
         &:active,
         &.active {
-            background: $color-theme-blue;
+            background: $color-theme-brand;
 
             &.separated {
-                border-color: $color-theme-blue;
+                border-color: $color-theme-brand;
             }
         }
 
         &:hover {
-            background: $color-theme-blue;
+            background: $color-theme-brand;
 
             &.separated {
-                border-color: $color-theme-blue;
+                border-color: $color-theme-brand;
             }
         }
 
diff --git a/frontend/app/theme/_lists.scss b/frontend/app/theme/_lists.scss
index fa8bfd1ca..4f12e5583 100644
--- a/frontend/app/theme/_lists.scss
+++ b/frontend/app/theme/_lists.scss
@@ -87,7 +87,7 @@
             // Blue background and white text when active.
             &.active {
                 td {
-                    border-color: $color-theme-blue;
+                    border-color: $color-theme-brand;
                 }
             }
         }
@@ -117,9 +117,9 @@
             position: relative;
 
             &.expanded {
-                background-color: $color-theme-blue-lightest;
-                border-color: $color-theme-blue-lightest;
-                color: $color-theme-blue;
+                background-color: $color-theme-brand-light;
+                border-color: $color-theme-brand-light;
+                color: $color-theme-brand;
                 font-size: inherit;
                 font-weight: 500;
 
diff --git a/frontend/app/theme/_panels2.scss b/frontend/app/theme/_panels2.scss
index 63c65fd2a..4c809c970 100644
--- a/frontend/app/theme/_panels2.scss
+++ b/frontend/app/theme/_panels2.scss
@@ -26,7 +26,7 @@
     }
 
     &.active {
-        color: $color-theme-blue;
+        color: $color-theme-brand;
     }
 }
 
@@ -250,7 +250,7 @@
     display: block;
 
     &:hover {
-        color: $color-theme-blue-dark;
+        color: $color-theme-brand-dark;
     }
 
     &.active {
@@ -286,14 +286,14 @@
         }
 
         &.active {
-            background-color: $color-theme-blue-lightest;
-            color: $color-theme-blue;
+            background-color: $color-theme-brand-light;
+            color: $color-theme-brand;
             cursor: default;
             font-weight: 500;
         }
 
         &:hover {
-            background-color: $color-theme-blue-lightest;
+            background-color: $color-theme-brand-light;
             color: $color-text;
         }
     }
diff --git a/frontend/app/theme/_vars.scss b/frontend/app/theme/_vars.scss
index 057fee44f..1a34e96e1 100644
--- a/frontend/app/theme/_vars.scss
+++ b/frontend/app/theme/_vars.scss
@@ -14,32 +14,28 @@ $color-tooltip:             #1a2129;
 $color-code-background:     #f5f7f9;
 $color-code-text:           #708090;
 
+$color-extern-github:       #353535;
 $color-extern-google:       #d34836;
 $color-extern-microsoft:    #004185;
-$color-extern-github:       #353535;
 $color-extern-twitter:      #1da1f2;
 
-$color-theme-blue:          #3389ff;
-$color-theme-blue-dark:     #3284f4;
-$color-theme-blue-darker:   #2f7deb;
-$color-theme-blue-lighter:  #d0e6ff;
-$color-theme-blue-light:    #edf5fe;
-$color-theme-blue-lightest: #d9e8fc;
+$color-theme-brand:         #3389ff;
+$color-theme-brand-dark:    #3284f4;
+$color-theme-brand-darker:  #2f7deb;
+$color-theme-brand-light:   #d9e8fc;
 $color-theme-secondary:     #e0e1e5;
 
-$color-theme-green:         #3ab480;
-$color-theme-green-dark:    #38a678;
-$color-theme-orange:        #ffb136;
-$color-theme-orange-dark:   #a65b00;
-
 $color-theme-error:         #eb3142;
 $color-theme-error-dark:    #c00;
+$color-theme-info:          #0eafcc;
+$color-theme-success-dark:  #38a678;
+$color-theme-success:       #3ab480;
+$color-theme-warning-dark:  #a65b00;
+$color-theme-warning:       #ffb136;
 
 $color-black:   #000;
 $color-white:   #fff;
 
-$color-theme-info:          #5bc0de;
-
 $color-asset-bg:            #f7f8fa;
 
 $color-input:               #e0e1e5;