From 7fce552ee7b51213b8d715e4f664b345c836970c Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Fri, 31 Mar 2023 19:57:15 +0300
Subject: [PATCH] Apply new color variables to webapps

---
 .../src/components/Apigw/CFiltersDropdown.vue |  2 +-
 .../Permissions/CPermissionList.vue           |  4 ++--
 .../src/themes/corteza-base/variables.scss    | 10 ++++-----
 .../components/Chart/Report/ReportEdit.c3.js  |  2 +-
 .../compose/src/components/Common/Grid.vue    |  2 +-
 .../components/Common/RecordListFilter.vue    | 10 ++++-----
 .../FeedSource/configs/Record.c3.js           |  2 +-
 .../FeedSource/configs/Reminder.c3.js         |  2 +-
 .../components/PageBlocks/GeometryBase.vue    |  2 +-
 .../PageBlocks/MetricConfigurator/index.vue   |  2 +-
 .../src/themes/corteza-base/custom.scss       |  2 +-
 .../src/themes/corteza-base/variables.scss    | 10 ++++-----
 .../compose/src/views/Admin/Pages/List.vue    | 10 ++++-----
 .../discovery/src/components/DiscoveryMap.vue |  2 +-
 .../web/discovery/src/components/Search.vue   |  2 +-
 .../src/themes/corteza-base/variables.scss    | 14 ++++++------
 .../src/themes/corteza-base/variables.scss    | 12 +++++-----
 client/web/one/src/views/Bridge/Jitsi.vue     |  2 +-
 .../privacy/src/components/ConnectionMap.vue  |  2 +-
 .../src/themes/corteza-base/variables.scss    | 10 ++++-----
 .../src/components/Common/Prefilter.vue       |  2 +-
 .../Report/Datasources/Aggregate/GroupBy.vue  |  2 +-
 .../reporter/src/components/Report/Grid.vue   |  2 +-
 .../src/themes/corteza-base/variables.scss    | 10 ++++-----
 .../src/components/ExpressionEditor.vue       |  4 ++--
 .../src/components/WorkflowEditor.vue         |  2 +-
 .../src/themes/corteza-base/custom.scss       |  4 ++--
 .../src/themes/corteza-base/mxgraph.scss      |  2 +-
 .../src/themes/corteza-base/variables.scss    | 12 +++++-----
 lib/js/src/compose/types/chart/chart.ts       |  2 +-
 lib/js/src/compose/types/chart/gauge.ts       |  2 +-
 .../compose/types/page-block/calendar/feed.ts |  2 +-
 lib/js/src/corredor/helpers/compose.ts        |  2 +-
 .../types/display-elements/chart/basic.ts     |  2 +-
 .../reporter/types/display-elements/metric.ts |  4 ++--
 .../shared/types/chart/colorschemes/brewer.ts | 14 ++++++------
 .../types/chart/colorschemes/tableau.ts       | 22 +++++++++----------
 lib/vue/src/components/c3/C3.vue              | 14 ++++++------
 .../filePreview/common/types/PDF/PDF.vue      |  4 ++--
 lib/vue/src/components/input/CInputSearch.vue |  2 +-
 lib/vue/src/components/navigation/CTopbar.vue |  2 +-
 .../components/permissions/form/Access.vue    |  2 +-
 .../reporter/Viewers/CReportMetric.vue        |  4 ++--
 server/auth/assets/public/style.css           |  4 ++--
 server/provision/002_templates/general.yml    |  6 ++---
 server/provision/700_crm/1400_pages.yaml      |  2 +-
 .../steinfletcher/apitest/template.go         |  2 +-
 47 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
index 35d39a786..dce778d68 100644
--- a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
@@ -74,6 +74,6 @@ export default {
 
 <style scoped>
 .min-content{
-    max-width: min-content;
+  max-width: min-content;
 }
 </style>
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index e607bad2e..8e5ed4b4b 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -504,7 +504,7 @@ export default {
   cursor: not-allowed;
 }
 .active-cell:hover {
-  background-color: #F3F3F5;
+  background-color: $gray-200;
 }
 .rotate {
   transform: rotate(45deg);
@@ -519,7 +519,7 @@ export default {
 <style lang="scss">
 .mode {
   .btn {
-    background-color: #E4E9EF;
+    background-color: $light;
     border: none;
   }
 
diff --git a/client/web/admin/src/themes/corteza-base/variables.scss b/client/web/admin/src/themes/corteza-base/variables.scss
index 12e7f9f79..9d8077616 100644
--- a/client/web/admin/src/themes/corteza-base/variables.scss
+++ b/client/web/admin/src/themes/corteza-base/variables.scss
@@ -16,18 +16,18 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
 $light:         #E4E9EF !default;
 $extra-light:   #F3F5F7 !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Grid - maybe not the smartest idea to change this but let's see
 $grid-breakpoints: (
diff --git a/client/web/compose/src/components/Chart/Report/ReportEdit.c3.js b/client/web/compose/src/components/Chart/Report/ReportEdit.c3.js
index c1cde41bb..31ea7d963 100644
--- a/client/web/compose/src/components/Chart/Report/ReportEdit.c3.js
+++ b/client/web/compose/src/components/Chart/Report/ReportEdit.c3.js
@@ -5,7 +5,7 @@ const props = {
   report: {
     moduleID: '',
     filter: '',
-    colorScheme: '#fffff',
+    colorScheme: '#FFFFFF',
     metrics: [
       {
         aggregate: 'AVG',
diff --git a/client/web/compose/src/components/Common/Grid.vue b/client/web/compose/src/components/Common/Grid.vue
index d6016e41e..05ce40a28 100644
--- a/client/web/compose/src/components/Common/Grid.vue
+++ b/client/web/compose/src/components/Common/Grid.vue
@@ -207,7 +207,7 @@ export default {
 <style lang="scss">
 .editable {
   .grid-item {
-    background-image: linear-gradient(45deg, #f3f3f5 25%, #ffffff 25%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 75%, #ffffff 75%, #ffffff 100%);
+    background-image: linear-gradient(45deg, $gray-200 25%, $white 25%, $white 50%, $gray-200 50%, $gray-200 75%, $white 75%, $white 100%);
     background-size: 28.28px 28.28px;
   }
 }
diff --git a/client/web/compose/src/components/Common/RecordListFilter.vue b/client/web/compose/src/components/Common/RecordListFilter.vue
index c2cae65bb..fedd15fe4 100644
--- a/client/web/compose/src/components/Common/RecordListFilter.vue
+++ b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -652,7 +652,7 @@ export default {
     padding: 0;
     color: #2d2d2d;
     text-align: center;
-    background: white;
+    background: $white;
     border-radius: 0.25rem;
     opacity: 1 !important;
     box-shadow: 0 3px 48px #00000026;
@@ -665,12 +665,12 @@ export default {
 
   .arrow {
     &::before {
-      border-bottom-color: white;
-      border-top-color: white;
+      border-bottom-color: $white;
+      border-top-color: $white;
     }
 
     &::after {
-      border-top-color: white;
+      border-top-color: $white;
     }
   }
 }
@@ -693,7 +693,7 @@ td {
 .btn-add-group {
   &:hover, &:active {
     background-color: $primary !important;
-    color: white !important;
+    color: $white !important;
   }
 }
 </style>
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.c3.js b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.c3.js
index 63fa87571..2e0835e80 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.c3.js
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.c3.js
@@ -60,7 +60,7 @@ export default {
         ...props,
         feed: {
           options: {
-            color: '#ffff',
+            color: '#FFFFFF',
             moduleID: '5555555',
             prefilter: '',
           },
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.c3.js b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.c3.js
index d35c7a054..d9d995273 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.c3.js
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.c3.js
@@ -25,7 +25,7 @@ export default {
       props: {
         ...props,
         feed: {
-          options: { color: '#ffff' },
+          options: { color: '#FFFFFF' },
         },
       },
     },
diff --git a/client/web/compose/src/components/PageBlocks/GeometryBase.vue b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
index 0bcbabc9d..c95a3895d 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryBase.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryBase.vue
@@ -215,7 +215,7 @@ export default {
     },
 
     getIcon (item) {
-      item.circleColor = '#ffffff'
+      item.circleColor = '#FFFFFF'
 
       return divIcon({
         className: 'marker-pin',
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
index b497a6007..f80e86de0 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -396,7 +396,7 @@ export default {
       const m = {
         labelStyle: {},
         valueStyle: {
-          backgroundColor: '#ffffff',
+          backgroundColor: '#FFFFFF',
         },
       }
       this.metrics.push(m)
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index bd44ddc26..2e0916a99 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -272,7 +272,7 @@ input[type="search"]::-webkit-search-cancel-button {
 
 .modal-content {
   &.card {
-    background-color: #FFF;
+    background-color: $white;
     background-clip: border-box;
     border: 0 solid rgba(0, 0, 0, 0.125);
     border-radius: 1rem;
diff --git a/client/web/compose/src/themes/corteza-base/variables.scss b/client/web/compose/src/themes/corteza-base/variables.scss
index c982d1766..e7a862087 100644
--- a/client/web/compose/src/themes/corteza-base/variables.scss
+++ b/client/web/compose/src/themes/corteza-base/variables.scss
@@ -16,17 +16,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
 $light:         #E4E9EF !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 $theme-colors: () !default;
 $theme-colors: map-merge(
diff --git a/client/web/compose/src/views/Admin/Pages/List.vue b/client/web/compose/src/views/Admin/Pages/List.vue
index 319f758b0..8bdd9e6ea 100644
--- a/client/web/compose/src/views/Admin/Pages/List.vue
+++ b/client/web/compose/src/views/Admin/Pages/List.vue
@@ -191,7 +191,7 @@ $dropping-color: $secondary;
 
   li {
     white-space: nowrap;
-    background: white;
+    background: $white;
 
     &.blank-li {
       height: $blank-li-height !important;
@@ -201,20 +201,20 @@ $dropping-color: $secondary;
       }
 
       &:nth-last-of-type(1)::before {
-        border-left-color: white !important;
+        border-left-color: $white !important;
         height: 0;
       }
     }
 
     &::before {
       top: $content-height / -2 !important;
-      border-left-color: white !important;
+      border-left-color: $white !important;
     }
 
     &::after {
       height: $content-height !important;
       top: $content-height / 2 !important;
-      border-color: #fff !important;
+      border-color: $white !important;
     }
 
     &.parent-li:nth-last-child(2)::before {
@@ -247,7 +247,7 @@ $dropping-color: $secondary;
 
     &.exist-li {
       &::before {
-        border-color: white !important;
+        border-color: $white !important;
       }
 
       .parent-li {
diff --git a/client/web/discovery/src/components/DiscoveryMap.vue b/client/web/discovery/src/components/DiscoveryMap.vue
index d70741d3f..93a547559 100644
--- a/client/web/discovery/src/components/DiscoveryMap.vue
+++ b/client/web/discovery/src/components/DiscoveryMap.vue
@@ -87,6 +87,6 @@ export default {
 
 <style lang="scss">
 .vl-style-text {
-  color: white;
+  color: $white;
 }
 </style>
diff --git a/client/web/discovery/src/components/Search.vue b/client/web/discovery/src/components/Search.vue
index 934f30229..d7395db77 100644
--- a/client/web/discovery/src/components/Search.vue
+++ b/client/web/discovery/src/components/Search.vue
@@ -43,7 +43,7 @@
           <div
             v-if="$store.state.processing || !total.actual"
             class="position-absolute d-flex align-items-center justify-content-center w-100 h-100"
-            style="opacity: 0.8; z-index: 1; background-color: #F3F3F5;"
+            style="opacity: 0.8; z-index: 1; background-color: #F9FAFB;"
           >
             <h5
               class="mb-5"
diff --git a/client/web/discovery/src/themes/corteza-base/variables.scss b/client/web/discovery/src/themes/corteza-base/variables.scss
index 5424412f9..a2b2fcb0c 100644
--- a/client/web/discovery/src/themes/corteza-base/variables.scss
+++ b/client/web/discovery/src/themes/corteza-base/variables.scss
@@ -16,17 +16,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
-$primary:       #0b344e !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
+$primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
-$light:         #E4E9EF !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
+$light:         #F3F5F7 !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Grid - maybe not the smartest idea to change this but let's see
 $grid-breakpoints: (
diff --git a/client/web/one/src/themes/corteza-base/variables.scss b/client/web/one/src/themes/corteza-base/variables.scss
index b5d6750cb..5141ad48e 100644
--- a/client/web/one/src/themes/corteza-base/variables.scss
+++ b/client/web/one/src/themes/corteza-base/variables.scss
@@ -17,17 +17,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
-$light:         #E4E9EF !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
+$light:         #F3F5F7 !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Options
 $enable-rounded:   true !default;
diff --git a/client/web/one/src/views/Bridge/Jitsi.vue b/client/web/one/src/views/Bridge/Jitsi.vue
index 528678405..cc4a57b28 100644
--- a/client/web/one/src/views/Bridge/Jitsi.vue
+++ b/client/web/one/src/views/Bridge/Jitsi.vue
@@ -260,7 +260,7 @@ main {
     &:hover {
       border: 1px solid $primary;
       background: $primary;
-      color: #ffffff;
+      color: $white;
     }
     &:disabled {
       cursor: not-allowed;
diff --git a/client/web/privacy/src/components/ConnectionMap.vue b/client/web/privacy/src/components/ConnectionMap.vue
index 92c20d8ee..e37f888b0 100644
--- a/client/web/privacy/src/components/ConnectionMap.vue
+++ b/client/web/privacy/src/components/ConnectionMap.vue
@@ -105,6 +105,6 @@ export default {
 
 <style lang="scss">
 .vl-style-text {
-  color: white;
+  color: $white;
 }
 </style>
diff --git a/client/web/privacy/src/themes/corteza-base/variables.scss b/client/web/privacy/src/themes/corteza-base/variables.scss
index abe9c3f56..d1e000489 100644
--- a/client/web/privacy/src/themes/corteza-base/variables.scss
+++ b/client/web/privacy/src/themes/corteza-base/variables.scss
@@ -16,17 +16,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
 $light:         #E4E9EF !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Grid - maybe not the smartest idea to change this but let's see
 $grid-breakpoints: (
diff --git a/client/web/reporter/src/components/Common/Prefilter.vue b/client/web/reporter/src/components/Common/Prefilter.vue
index 2568192d0..3b1dfdb2b 100644
--- a/client/web/reporter/src/components/Common/Prefilter.vue
+++ b/client/web/reporter/src/components/Common/Prefilter.vue
@@ -427,7 +427,7 @@ export default {
 .btn-add-group {
   &:hover, &:active {
     background-color: $primary !important;
-    color: white !important;
+    color: $white !important;
   }
 }
 
diff --git a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
index bda0fcbdf..c47ffc161 100644
--- a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
@@ -133,7 +133,7 @@ export default {
 .btn-add-group {
   &:hover, &:active {
     background-color: $primary !important;
-    color: white !important;
+    color: $white !important;
   }
 }
 
diff --git a/client/web/reporter/src/components/Report/Grid.vue b/client/web/reporter/src/components/Report/Grid.vue
index 06c5fd364..594f78e3f 100644
--- a/client/web/reporter/src/components/Report/Grid.vue
+++ b/client/web/reporter/src/components/Report/Grid.vue
@@ -130,7 +130,7 @@ export default {
 <style lang="scss" scoped>
 .editable-grid-item {
   touch-action: none;
-  background-image: linear-gradient(45deg, #f3f3f5 25%, #ffffff 25%, #ffffff 50%, #f3f3f5 50%, #f3f3f5 75%, #ffffff 75%, #ffffff 100%);
+  background-image: linear-gradient(45deg, $gray-200 25%, $white 25%, $white 50%, $gray-200 50%, $gray-200 75%, $white 75%, $white 100%);
   background-size: 28.28px 28.28px;
 }
 </style>
diff --git a/client/web/reporter/src/themes/corteza-base/variables.scss b/client/web/reporter/src/themes/corteza-base/variables.scss
index abe9c3f56..d1e000489 100644
--- a/client/web/reporter/src/themes/corteza-base/variables.scss
+++ b/client/web/reporter/src/themes/corteza-base/variables.scss
@@ -16,17 +16,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
 $light:         #E4E9EF !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Grid - maybe not the smartest idea to change this but let's see
 $grid-breakpoints: (
diff --git a/client/web/workflow/src/components/ExpressionEditor.vue b/client/web/workflow/src/components/ExpressionEditor.vue
index 23a132f6e..6f8cca48e 100644
--- a/client/web/workflow/src/components/ExpressionEditor.vue
+++ b/client/web/workflow/src/components/ExpressionEditor.vue
@@ -107,8 +107,8 @@ export default {
 
 <style lang="scss" scoped>
 .border {
-  background-color: #FFF;
-  border: 2px solid #E4E9EF;
+  background-color: $white;
+  border: 2px solid $light;
   border-radius: 0.25rem;
 }
 
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index 822814095..d79b143a9 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -2557,7 +2557,7 @@ export default {
 }
 
 .toolbar {
-  background-color: #F3F3F5 !important;
+  background-color: $gray-200 !important;
   width: 66px;
 }
 
diff --git a/client/web/workflow/src/themes/corteza-base/custom.scss b/client/web/workflow/src/themes/corteza-base/custom.scss
index 847aa759b..ad293235c 100644
--- a/client/web/workflow/src/themes/corteza-base/custom.scss
+++ b/client/web/workflow/src/themes/corteza-base/custom.scss
@@ -261,8 +261,8 @@ input[type="search"]::-webkit-search-cancel-button {
 
   body {
     margin: 0;
-    color: #000;
-    background-color: #fff;
+    color: $black;
+    background-color: $white;
   }
 
   .block {
diff --git a/client/web/workflow/src/themes/corteza-base/mxgraph.scss b/client/web/workflow/src/themes/corteza-base/mxgraph.scss
index 5d5ed24bd..3ed505b97 100644
--- a/client/web/workflow/src/themes/corteza-base/mxgraph.scss
+++ b/client/web/workflow/src/themes/corteza-base/mxgraph.scss
@@ -23,7 +23,7 @@ div.mxTooltip {
   -webkit-box-shadow: 3px 3px 12px #C0C0C0;
   -moz-box-shadow: 3px 3px 12px #C0C0C0;
   box-shadow: 3px 3px 12px #C0C0C0;
-  background: #FFF;
+  background: $white;
   border-style: solid;
   border-width: 2px;
   border-color: #A7D0E3;
diff --git a/client/web/workflow/src/themes/corteza-base/variables.scss b/client/web/workflow/src/themes/corteza-base/variables.scss
index abe9c3f56..a2b2fcb0c 100644
--- a/client/web/workflow/src/themes/corteza-base/variables.scss
+++ b/client/web/workflow/src/themes/corteza-base/variables.scss
@@ -16,17 +16,17 @@ $font-family-base:      $font-regular !default;
 $headings-font-family:  $font-semibold !default;
 
 // Color system
-$white:         #FFF !default;
-$black:         #000 !default;
+$white:         #FFFFFF !default;
+$black:         #162425 !default;
 $primary:       #0B344E !default;
 $secondary:     #758D9B !default;
 $success:       #43AA8B !default;
-$warning:       #F5D380 !default;
-$danger:        #E24646 !default;
-$light:         #E4E9EF !default;
+$warning:       #E2A046 !default;
+$danger:        #E54122 !default;
+$light:         #F3F5F7 !default;
 $dark:          #162425 !default;
 
-$gray-200:      #F3F3F5 !default;
+$gray-200:      #F9FAFB !default;
 
 // Grid - maybe not the smartest idea to change this but let's see
 $grid-breakpoints: (
diff --git a/lib/js/src/compose/types/chart/chart.ts b/lib/js/src/compose/types/chart/chart.ts
index e1473b958..5eb8cb7c5 100644
--- a/lib/js/src/compose/types/chart/chart.ts
+++ b/lib/js/src/compose/types/chart/chart.ts
@@ -157,7 +157,7 @@ export default class Chart extends BaseChart {
           },
           itemStyle: {
             borderRadius: 5,
-            borderColor: '#fff',
+            borderColor: '#FFFFFF',
             borderWidth: 1,
           },
           emphasis: {
diff --git a/lib/js/src/compose/types/chart/gauge.ts b/lib/js/src/compose/types/chart/gauge.ts
index 759149999..63c740c40 100644
--- a/lib/js/src/compose/types/chart/gauge.ts
+++ b/lib/js/src/compose/types/chart/gauge.ts
@@ -110,7 +110,7 @@ export default class GaugeChart extends BaseChart {
             distance: 0,
             length: 0,
             lineStyle: {
-              color: '#fff',
+              color: '#FFFFFF',
             },
           },
           axisLine: {
diff --git a/lib/js/src/compose/types/page-block/calendar/feed.ts b/lib/js/src/compose/types/page-block/calendar/feed.ts
index e93c12542..c89ca058a 100644
--- a/lib/js/src/compose/types/page-block/calendar/feed.ts
+++ b/lib/js/src/compose/types/page-block/calendar/feed.ts
@@ -20,7 +20,7 @@ export type FeedInput = Partial<Feed> | Feed | LegacyFeed
 
 const defOptions = {
   moduleID: NoID,
-  color: '#ffffff',
+  color: '#FFFFFF',
   prefilter: '',
 }
 
diff --git a/lib/js/src/corredor/helpers/compose.ts b/lib/js/src/corredor/helpers/compose.ts
index 39b6f14e9..435210ef1 100644
--- a/lib/js/src/corredor/helpers/compose.ts
+++ b/lib/js/src/corredor/helpers/compose.ts
@@ -8,7 +8,7 @@ import { IsOf } from '../../guards'
 
 const emailStyle = `
 body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #3A393C; font-family: Verdana,Arial,sans-serif; font-size: 14px; height: 100%; margin: 0; padding: 0; width: 100% !important; }
-table { margin: 20px auto; background: #ffffff; border-collapse: collapse; max-width: 100%; }
+table { margin: 20px auto; background: #FFFFFF; border-collapse: collapse; max-width: 100%; }
 table tr { height: 40px; }
 table td { padding-top: 10px; padding-left: 20px; width:100%; max-width:100%; min-width:100%; width:100%; vertical-align: top; }
 table tbody { border-top: 3px solid #808080; }
diff --git a/lib/js/src/reporter/types/display-elements/chart/basic.ts b/lib/js/src/reporter/types/display-elements/chart/basic.ts
index 0938edde4..234ebb4ba 100644
--- a/lib/js/src/reporter/types/display-elements/chart/basic.ts
+++ b/lib/js/src/reporter/types/display-elements/chart/basic.ts
@@ -60,7 +60,7 @@ export class BasicChartOptions extends ChartOptions {
           },
           itemStyle: {
             borderRadius: 5,
-            borderColor: '#fff',
+            borderColor: '#FFFFFF',
             borderWidth: 1,
           },
           emphasis: {
diff --git a/lib/js/src/reporter/types/display-elements/metric.ts b/lib/js/src/reporter/types/display-elements/metric.ts
index 01b0c9199..18fb9ec7d 100644
--- a/lib/js/src/reporter/types/display-elements/metric.ts
+++ b/lib/js/src/reporter/types/display-elements/metric.ts
@@ -28,8 +28,8 @@ const defaults: Readonly<Options> = Object.freeze({
   prefix: '',
   suffix: '',
 
-  color: '#000000',
-  backgroundColor: '#ffffff',
+  color: '#162425',
+  backgroundColor: '#FFFFFF',
 })
 
 export class DisplayElementMetric extends DisplayElement {
diff --git a/lib/js/src/shared/types/chart/colorschemes/brewer.ts b/lib/js/src/shared/types/chart/colorschemes/brewer.ts
index 59e237a63..8becc671d 100644
--- a/lib/js/src/shared/types/chart/colorschemes/brewer.ts
+++ b/lib/js/src/shared/types/chart/colorschemes/brewer.ts
@@ -141,8 +141,8 @@ export default {
   Greys5: ['#f7f7f7', '#cccccc', '#969696', '#636363', '#252525'],
   Greys6: ['#f7f7f7', '#d9d9d9', '#bdbdbd', '#969696', '#636363', '#252525'],
   Greys7: ['#f7f7f7', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'],
-  Greys8: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'],
-  Greys9: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
+  Greys8: ['#FFFFFF', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525'],
+  Greys9: ['#FFFFFF', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
 
   // Diverging
   PuOr3: ['#f1a340', '#f7f7f7', '#998ec3'],
@@ -195,15 +195,15 @@ export default {
   RdBu10: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
   RdBu11: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
 
-  RdGy3: ['#ef8a62', '#ffffff', '#999999'],
+  RdGy3: ['#ef8a62', '#FFFFFF', '#999999'],
   RdGy4: ['#ca0020', '#f4a582', '#bababa', '#404040'],
-  RdGy5: ['#ca0020', '#f4a582', '#ffffff', '#bababa', '#404040'],
+  RdGy5: ['#ca0020', '#f4a582', '#FFFFFF', '#bababa', '#404040'],
   RdGy6: ['#b2182b', '#ef8a62', '#fddbc7', '#e0e0e0', '#999999', '#4d4d4d'],
-  RdGy7: ['#b2182b', '#ef8a62', '#fddbc7', '#ffffff', '#e0e0e0', '#999999', '#4d4d4d'],
+  RdGy7: ['#b2182b', '#ef8a62', '#fddbc7', '#FFFFFF', '#e0e0e0', '#999999', '#4d4d4d'],
   RdGy8: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d'],
-  RdGy9: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d'],
+  RdGy9: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#FFFFFF', '#e0e0e0', '#bababa', '#878787', '#4d4d4d'],
   RdGy10: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
-  RdGy11: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
+  RdGy11: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#FFFFFF', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
 
   RdYlBu3: ['#fc8d59', '#ffffbf', '#91bfdb'],
   RdYlBu4: ['#d7191c', '#fdae61', '#abd9e9', '#2c7bb6'],
diff --git a/lib/js/src/shared/types/chart/colorschemes/tableau.ts b/lib/js/src/shared/types/chart/colorschemes/tableau.ts
index 139a17bc6..3c70a4569 100644
--- a/lib/js/src/shared/types/chart/colorschemes/tableau.ts
+++ b/lib/js/src/shared/types/chart/colorschemes/tableau.ts
@@ -23,11 +23,11 @@ export default {
   GoldPurple7: ['#ad9024', '#c1a33b', '#d4b95e', '#e3d8cf', '#d4a3c3', '#c189b0', '#ac7299'],
   RedGreenGold7: ['#be2a3e', '#e25f48', '#f88f4d', '#f4d166', '#90b960', '#4b9b5f', '#22763f'],
   SunsetSunrise7: ['#33608c', '#9768a5', '#e7718a', '#f6ba57', '#ed7846', '#d54c45', '#b81840'],
-  OrangeBlueWhite7: ['#9e3d22', '#e36621', '#fcad52', '#ffffff', '#95c5e1', '#5b8fbc', '#2b5c8a'],
-  RedGreenWhite7: ['#ae123a', '#ee574d', '#fdac9e', '#ffffff', '#91d183', '#539e52', '#24693d'],
-  GreenBlueWhite7: ['#24693d', '#529c51', '#8fd180', '#ffffff', '#95c1dd', '#598ab5', '#2a5783'],
-  RedBlueWhite7: ['#a90c38', '#ec534b', '#feaa9a', '#ffffff', '#9ac4e1', '#5c8db8', '#2e5a87'],
-  RedBlackWhite7: ['#ae123a', '#ee574d', '#fdac9d', '#ffffff', '#bdc0bf', '#7d888d', '#49525e'],
+  OrangeBlueWhite7: ['#9e3d22', '#e36621', '#fcad52', '#FFFFFF', '#95c5e1', '#5b8fbc', '#2b5c8a'],
+  RedGreenWhite7: ['#ae123a', '#ee574d', '#fdac9e', '#FFFFFF', '#91d183', '#539e52', '#24693d'],
+  GreenBlueWhite7: ['#24693d', '#529c51', '#8fd180', '#FFFFFF', '#95c1dd', '#598ab5', '#2a5783'],
+  RedBlueWhite7: ['#a90c38', '#ec534b', '#feaa9a', '#FFFFFF', '#9ac4e1', '#5c8db8', '#2e5a87'],
+  RedBlackWhite7: ['#ae123a', '#ee574d', '#fdac9d', '#FFFFFF', '#bdc0bf', '#7d888d', '#49525e'],
   OrangeBlueLight7: ['#ffcc9e', '#f9d4b6', '#f0dccd', '#e5e5e5', '#dae1ea', '#cfdcef', '#c4d8f3'],
   Temperature7: ['#529985', '#6c9e6e', '#99b059', '#dbcf47', '#ebc24b', '#e3a14f', '#c26b51'],
   BlueGreen7: ['#feffd9', '#f2fabf', '#dff3b2', '#c4eab1', '#94d6b7', '#69c5be', '#41b7c4'],
@@ -75,11 +75,11 @@ export default {
   ClassicAreaRedGreen21: ['#bd1100', '#c82912', '#d23a21', '#dc4930', '#e6583e', '#ef654d', '#f7705b', '#fd7e6b', '#fe8e7e', '#fca294', '#e9dabe', '#c7e298', '#b1de7f', '#a0d571', '#90cb68', '#82c162', '#75b65d', '#69aa56', '#5ea049', '#559633', '#4a8c1c'],
   ClassicOrangeBlue13: ['#7b3014', '#a33202', '#d74401', '#f06511', '#fd8938', '#fdab67', '#cacaca', '#7bc8e2', '#67add4', '#3a87b7', '#1c73b1', '#1c5998', '#26456e'],
   ClassicGreenBlue11: ['#09622a', '#1e7735', '#2f8e41', '#69a761', '#a2c18f', '#cacaca', '#67add4', '#3a87b7', '#1c73b1', '#1c5998', '#26456e'],
-  ClassicRedWhiteGreen11: ['#9c0824', '#b41f27', '#cc312b', '#e86753', '#fcb4a5', '#ffffff', '#b9d7b7', '#74af72', '#428f49', '#297839', '#09622a'],
-  ClassicRedWhiteBlack11: ['#9c0824', '#b41f27', '#cc312b', '#e86753', '#fcb4a5', '#ffffff', '#bfbfbf', '#838383', '#575757', '#393939', '#1e1e1e'],
-  ClassicOrangeWhiteBlue11: ['#7b3014', '#a84415', '#d85a13', '#fb8547', '#ffc2a1', '#ffffff', '#b7cde2', '#6a9ec5', '#3679a8', '#2e5f8a', '#26456e'],
-  ClassicRedWhiteBlackLight10: ['#ffc2c5', '#ffd1d3', '#ffe0e1', '#fff0f0', '#ffffff', '#f3f3f3', '#e8e8e8', '#dddddd', '#d1d1d1', '#c6c6c6'],
-  ClassicOrangeWhiteBlueLight11: ['#ffcc9e', '#ffd6b1', '#ffe0c5', '#ffead8', '#fff5eb', '#ffffff', '#f3f7fd', '#e8effa', '#dce8f8', '#d0e0f6', '#c4d8f3'],
-  ClassicRedWhiteGreenLight11: ['#ffb2b6', '#ffc2c5', '#ffd1d3', '#ffe0e1', '#fff0f0', '#ffffff', '#f1faed', '#e3f5db', '#d5f0ca', '#c6ebb8', '#b7e6a7'],
+  ClassicRedWhiteGreen11: ['#9c0824', '#b41f27', '#cc312b', '#e86753', '#fcb4a5', '#FFFFFF', '#b9d7b7', '#74af72', '#428f49', '#297839', '#09622a'],
+  ClassicRedWhiteBlack11: ['#9c0824', '#b41f27', '#cc312b', '#e86753', '#fcb4a5', '#FFFFFF', '#bfbfbf', '#838383', '#575757', '#393939', '#1e1e1e'],
+  ClassicOrangeWhiteBlue11: ['#7b3014', '#a84415', '#d85a13', '#fb8547', '#ffc2a1', '#FFFFFF', '#b7cde2', '#6a9ec5', '#3679a8', '#2e5f8a', '#26456e'],
+  ClassicRedWhiteBlackLight10: ['#ffc2c5', '#ffd1d3', '#ffe0e1', '#fff0f0', '#FFFFFF', '#f3f3f3', '#e8e8e8', '#dddddd', '#d1d1d1', '#c6c6c6'],
+  ClassicOrangeWhiteBlueLight11: ['#ffcc9e', '#ffd6b1', '#ffe0c5', '#ffead8', '#fff5eb', '#FFFFFF', '#f3f7fd', '#e8effa', '#dce8f8', '#d0e0f6', '#c4d8f3'],
+  ClassicRedWhiteGreenLight11: ['#ffb2b6', '#ffc2c5', '#ffd1d3', '#ffe0e1', '#fff0f0', '#FFFFFF', '#f1faed', '#e3f5db', '#d5f0ca', '#c6ebb8', '#b7e6a7'],
   ClassicRedGreenLight11: ['#ffb2b6', '#fcbdc0', '#f8c7c9', '#f2d1d2', '#ecdbdc', '#e5e5e5', '#dde6d9', '#d4e6cc', '#cae6c0', '#c1e6b4', '#b7e6a7'],
 }
diff --git a/lib/vue/src/components/c3/C3.vue b/lib/vue/src/components/c3/C3.vue
index 737665ff5..c6c7c1d93 100644
--- a/lib/vue/src/components/c3/C3.vue
+++ b/lib/vue/src/components/c3/C3.vue
@@ -156,13 +156,13 @@ export default {
     grid-area: main;
     background-image: linear-gradient(
       135deg,
-      #f3f3f5 21.43%,
-      #ffffff 21.43%,
-      #ffffff 50%,
-      #f3f3f5 50%,
-      #f3f3f5 71.43%,
-      #ffffff 71.43%,
-      #ffffff 100%
+      #F9FAFB 21.43%,
+      #FFFFFF 21.43%,
+      #FFFFFF 50%,
+      #F9FAFB 50%,
+      #F9FAFB 71.43%,
+      #FFFFFF 71.43%,
+      #FFFFFF 100%
     );
     background-size: 35.00px 35.00px;
     overflow: auto;
diff --git a/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue b/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue
index 308803c61..5f9ae3553 100644
--- a/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue
+++ b/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue
@@ -293,8 +293,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$white: white !default;
-$danger: red !default;
+$white: #FFFFFF !default;
+$danger: #E54122 !default;
 
 .doc-msg {
   display: flex;
diff --git a/lib/vue/src/components/input/CInputSearch.vue b/lib/vue/src/components/input/CInputSearch.vue
index b1615d868..64de35da5 100644
--- a/lib/vue/src/components/input/CInputSearch.vue
+++ b/lib/vue/src/components/input/CInputSearch.vue
@@ -120,7 +120,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-$border-color: 2px solid #E4E9EF;
+$border-color: 2px solid #F3F5F7;
 
 input:focus::placeholder {
   color: transparent;
diff --git a/lib/vue/src/components/navigation/CTopbar.vue b/lib/vue/src/components/navigation/CTopbar.vue
index da1f4025a..7c1696237 100644
--- a/lib/vue/src/components/navigation/CTopbar.vue
+++ b/lib/vue/src/components/navigation/CTopbar.vue
@@ -285,7 +285,7 @@ $nav-user-icon-size: 50px;
 .header-navigation {
   width: 100vw;
   height: $header-height;
-  background-color: #F3F3F5 !important;
+  background-color: #F9FAFB !important;
   padding-left: calc(3.5rem + 6px);
 }
 
diff --git a/lib/vue/src/components/permissions/form/Access.vue b/lib/vue/src/components/permissions/form/Access.vue
index 569efa5a3..b8fd3434b 100644
--- a/lib/vue/src/components/permissions/form/Access.vue
+++ b/lib/vue/src/components/permissions/form/Access.vue
@@ -66,7 +66,7 @@ export default {
 <style lang="scss">
 .access {
   .btn {
-    background-color: #E4E9EF;
+    background-color: #F3F5F7;
     border: none;
   }
 
diff --git a/lib/vue/src/components/reporter/Viewers/CReportMetric.vue b/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
index b7224b868..70e5b1b00 100644
--- a/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
+++ b/lib/vue/src/components/reporter/Viewers/CReportMetric.vue
@@ -43,8 +43,8 @@ export default {
 
     style () {
       return {
-        fill: this.options.color || '#000000',
-        backgroundColor: this.options.backgroundColor || '#ffffff',
+        fill: this.options.color || '#162425',
+        backgroundColor: this.options.backgroundColor || '#FFFFFF',
       }
     },
 
diff --git a/server/auth/assets/public/style.css b/server/auth/assets/public/style.css
index f4791cd67..cc2a0ddf6 100644
--- a/server/auth/assets/public/style.css
+++ b/server/auth/assets/public/style.css
@@ -1,8 +1,8 @@
 :root {
   --primary: #0B344E;
   --primary-hover: #061E2C;
-  --light: #E4E9EF;
-  --danger: #E24646;
+  --light: #F3F5F7;
+  --danger: #E54122;
 }
 
 html {
diff --git a/server/provision/002_templates/general.yml b/server/provision/002_templates/general.yml
index f800829bd..9cff9b92a 100644
--- a/server/provision/002_templates/general.yml
+++ b/server/provision/002_templates/general.yml
@@ -14,10 +14,10 @@ templates:
                 <table width="800" cellspacing="0" cellpadding="0" border="0">
                   <tbody>
                     <tr>
-                      <td width="800" bgcolor="#ffffff" style="color:#3a393c;font-size:14px;line-height:20px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;text-align:left">
+                      <td width="800" bgcolor="#FFFFFF" style="color:#3a393c;font-size:14px;line-height:20px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;text-align:left">
                         <table width="800" cellspacing="0" cellpadding="0" border="0">
                           <tbody>
-                            <tr style="background-color:#ffffff;height:50px;">
+                            <tr style="background-color:#FFFFFF;height:50px;">
                               <td style="border-bottom:2px solid #568ba2;">
                                 <a href="{{ .BaseURL }}" style="text-decoration:none" target="_blank">
                                   <img src="{{ .Logo }}" style="display: block;margin: 0 auto;padding: 10px;">
@@ -37,7 +37,7 @@ templates:
       </td>
                             </tr>
                             <tr>
-                              <td style="padding:30px;border-top: 1px solid #F3F3F5">
+                              <td style="padding:30px;border-top: 1px solid #F9FAFB">
                                 <p>If you have any questions, please contact <a href="mailto:{{ .SignatureEmail }}" style="color:#568ba2;">{{ .SignatureEmail }}</a>.</p>
                                 <p>Kind regards, <br>
                                 {{ .SignatureName }}</p>
diff --git a/server/provision/700_crm/1400_pages.yaml b/server/provision/700_crm/1400_pages.yaml
index 29ab6b4d2..55a2e92ef 100644
--- a/server/provision/700_crm/1400_pages.yaml
+++ b/server/provision/700_crm/1400_pages.yaml
@@ -3432,7 +3432,7 @@ pages:
               suffix: k
               transformFx: v=v/1000
               valueStyle:
-                backgroundColor: '#ffffff'
+                backgroundColor: '#FFFFFF'
                 color: '#379cd3'
                 fontSize: "100"
           style:
diff --git a/server/vendor/github.com/steinfletcher/apitest/template.go b/server/vendor/github.com/steinfletcher/apitest/template.go
index 43c590ad0..63cbd2987 100644
--- a/server/vendor/github.com/steinfletcher/apitest/template.go
+++ b/server/vendor/github.com/steinfletcher/apitest/template.go
@@ -35,7 +35,7 @@ const reportTemplate = `<!DOCTYPE html>
         }
 
         .copy-to-clipboard-button {
-            background-color: #fff;
+            background-color: #FFFFFF;
             border: 1px solid #eee;
             cursor: pointer;
             font-size: 12px;