From cd19eb036bae979e784bb8a2b89878a5b87cc231 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Mon, 27 Jun 2022 22:16:28 +0300
Subject: [PATCH] refactor(app): use colors with tailwind [EE-3601] (#7133)

* refactor(app): use colors with tailwind
---
 app/assets/css/app.css                        |   3 +-
 app/assets/css/bootstrap-override.css         |  52 +--
 app/assets/css/colors.json                    | 355 ++++++++++++++++++
 app/assets/css/colors.ts                      |  11 +
 app/assets/css/index.js                       |   2 +
 app/assets/css/theme.css                      |  78 ++--
 .../components/datatables/datatable.css       |   2 +-
 .../PageHeader/HeaderTitle.module.css         |   2 +-
 .../pagination-controls.css                   |   2 +-
 tailwind.config.js                            | 106 +-----
 10 files changed, 447 insertions(+), 166 deletions(-)
 create mode 100644 app/assets/css/colors.json
 create mode 100644 app/assets/css/colors.ts

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 3cc59643e..d6177c31f 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -241,9 +241,10 @@ a[ng-click] {
 }
 
 .blocklist-item:hover {
+  @apply border border-blue-7;
+
   background-color: var(--bg-blocklist-hover-color);
   color: var(--text-blocklist-hover-color);
-  border: 1px solid var(--ui-blue-4);
 }
 
 .blocklist-item-box {
diff --git a/app/assets/css/bootstrap-override.css b/app/assets/css/bootstrap-override.css
index fb72d65e5..0786def1b 100644
--- a/app/assets/css/bootstrap-override.css
+++ b/app/assets/css/bootstrap-override.css
@@ -10,7 +10,7 @@
 }
 
 .btn-primary {
-  background-color: var(--ui-blue-1);
+  background-color: var(--ui-blue-8);
 }
 
 .btn-primary:hover,
@@ -20,11 +20,11 @@
 }
 
 .btn-danger {
-  background-color: var(--ui-red-1);
+  background-color: var(--ui-error-8);
 }
 
 .btn-success {
-  background-color: var(--ui-green-1);
+  background-color: var(--ui-success-7);
 }
 
 /* Toggle switch */
@@ -68,11 +68,11 @@
 }
 
 input:checked + .slider {
-  background-color: var(--ui-blue-1);
+  background-color: var(--ui-blue-8);
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--ui-blue-1);
+  box-shadow: 0 0 1px var(--ui-blue-8);
 }
 
 input:checked + .slider:before {
@@ -102,9 +102,9 @@ input:checked + .slider:before {
 }
 
 .md-checkbox input[type='checkbox']:checked + label:before {
-  background-color: var(--ui-blue-1) !important;
-  color: var(--ui-blue-1) !important;
-  border: 1px solid var(--ui-blue-1) !important;
+  background-color: var(--ui-blue-8) !important;
+  color: var(--ui-blue-8) !important;
+  border: 1px solid var(--ui-blue-8) !important;
 }
 
 .md-checkbox input[type='checkbox']:checked + .checkmark {
@@ -116,20 +116,20 @@ input:checked + .slider:before {
 
 .rzslider .rz-pointer {
   background-color: var(--white-color);
-  border: 3px solid var(--ui-blue-1);
+  border: 3px solid var(--ui-blue-8);
   width: 25px;
   height: 25px;
   top: -10px;
 }
 
 .rzslider .rz-bar {
-  background-color: var(--ui-grey-1);
+  background-color: var(--ui-gray-5);
   height: 8px;
   border-radius: 5px;
 }
 
 .rzslider .rz-selection {
-  background-color: var(--ui-blue-1);
+  background-color: var(--ui-blue-8);
 }
 
 .rzslider .rz-pointer:after {
@@ -205,7 +205,7 @@ input:checked + .slider:before {
 /* Widget */
 
 .widget .widget-icon i {
-  color: var(--ui-blue-1);
+  color: var(--ui-blue-8);
 }
 
 .widget .widget-body table thead {
@@ -245,9 +245,9 @@ input:checked + .slider:before {
 }
 
 .btn-group .btn-dangerlight {
-  background-color: var(--ui-red-2);
+  background-color: var(--ui-error-2);
   border: 1px solid var(--border-button-group);
-  color: var(--ui-red-1);
+  color: var(--ui-error-8);
 }
 
 .btn.active {
@@ -271,17 +271,17 @@ input:checked + .slider:before {
 }
 
 .toast-success .toast-progress {
-  background-color: var(--ui-green-1);
+  background-color: var(--ui-success-7);
 }
 .toast-warning .toast-progress {
-  background-color: var(--ui-yellow);
+  background-color: var(--ui-warning-6);
 }
 .toast-error .toast-progress {
-  background-color: var(--ui-red-1);
+  background-color: var(--ui-error-8);
 }
 
 #toast-container > div {
-  color: var(--ui-grey-4);
+  color: var(--ui-gray-7);
   background-color: var(--white-color);
   border-radius: 8px;
   padding: 20px 20px 20px 80px;
@@ -292,9 +292,9 @@ input:checked + .slider:before {
 }
 
 #toast-container > div:hover {
-  -moz-box-shadow: 0 0 12px var(--ui-grey-4);
-  -webkit-box-shadow: 0 0 12px var(--ui-grey-4);
-  box-shadow: 0 0 12px var(--ui-grey-4);
+  -moz-box-shadow: 0 0 12px var(--ui-gray-7);
+  -webkit-box-shadow: 0 0 12px var(--ui-gray-7);
+  box-shadow: 0 0 12px var(--ui-gray-7);
 }
 
 .toast-close-button {
@@ -382,17 +382,17 @@ input:checked + .slider:before {
   background: var(--ui-blue-3) !important;
   color: black !important;
   border-radius: 8px;
-  border-color: var(--ui-blue-4);
+  border-color: var(--ui-blue-7);
   padding: 15px;
   box-shadow: none;
 }
 
 .boxselector_wrapper input[type='radio']:not(:disabled) + label,
 .box-selector-item input[type='radio']:not(:disabled) + label {
-  background: var(--ui-grey-2);
+  background: var(--ui-gray-2);
   color: var(--black-color) !important;
   border-radius: 8px;
-  border-color: var(--ui-grey-1);
+  border-color: var(--ui-gray-5);
   padding: 15px;
   box-shadow: none;
 }
@@ -449,11 +449,11 @@ input:checked + .slider:before {
 }
 
 .label-danger {
-  background-color: var(--ui-red-1);
+  background-color: var(--ui-error-8);
 }
 
 .label-success {
-  background-color: var(--ui-green-1);
+  background-color: var(--ui-success-7);
 }
 
 /* Feather Icon */
diff --git a/app/assets/css/colors.json b/app/assets/css/colors.json
new file mode 100644
index 000000000..53b2f2a84
--- /dev/null
+++ b/app/assets/css/colors.json
@@ -0,0 +1,355 @@
+{
+  "black": "#000000",
+  "white": "#ffffff",
+  "gray": {
+    "1": "#fcfcfd",
+    "2": "#f9fafb",
+    "3": "#f2f4f7",
+    "4": "#eaecf0",
+    "5": "#d0d5dd",
+    "6": "#98a2b3",
+    "7": "#667085",
+    "8": "#475467",
+    "9": "#344054",
+    "10": "#1d2939",
+    "11": "#101828"
+  },
+  "blue": {
+    "1": "#f5fbff",
+    "2": "#f0f9ff",
+    "3": "#e0f2fe",
+    "4": "#b9e6fe",
+    "5": "#7cd4fd",
+    "6": "#36bffa",
+    "7": "#0ba5ec",
+    "8": "#0086c9",
+    "9": "#026aa2",
+    "10": "#065986",
+    "11": "#0b4a6f"
+  },
+  "error": {
+    "1": "#fffbfa",
+    "2": "#fef3f2",
+    "3": "#fee4e2",
+    "4": "#fecdca",
+    "5": "#fda29b",
+    "6": "#f97066",
+    "7": "#f04438",
+    "8": "#d92d20",
+    "9": "#b42318",
+    "10": "#912018",
+    "11": "#7a271a"
+  },
+  "warning": {
+    "1": "#fffcf5",
+    "2": "#fffaeb",
+    "3": "#fef0c7",
+    "4": "#fedf89",
+    "5": "#fec84b",
+    "6": "#fdb022",
+    "7": "#f79009",
+    "8": "#dc6803",
+    "9": "#b54708",
+    "10": "#93370d",
+    "11": "#7a2e0e"
+  },
+  "success": {
+    "1": "#f6fef9",
+    "2": "#ecfdf3",
+    "3": "#d1fadf",
+    "4": "#a6f4c5",
+    "5": "#6ce9a6",
+    "6": "#32d583",
+    "7": "#12b76a",
+    "8": "#039855",
+    "9": "#027a48",
+    "10": "#05603a",
+    "11": "#054f31"
+  },
+  "gray-blue": {
+    "1": "#fcfcfd",
+    "2": "#f8f9fc",
+    "3": "#eaecf5",
+    "4": "#d5d9eb",
+    "5": "#b3b8db",
+    "6": "#717bbc",
+    "7": "#4e5ba6",
+    "8": "#3e4784",
+    "9": "#363f72",
+    "10": "#293056",
+    "11": "#293056"
+  },
+  "gray-cool": {
+    "1": "#fcfcfd",
+    "2": "#f9f9fb",
+    "3": "#eff1f5",
+    "4": "#dcdfea",
+    "5": "#b9c0d4",
+    "6": "#7d89b0",
+    "7": "#5d6b98",
+    "8": "#4a5578",
+    "9": "#404968",
+    "10": "#30374f",
+    "11": "#111322"
+  },
+  "gray-modern": {
+    "1": "#fcfcfd",
+    "2": "#f8fafc",
+    "3": "#eef2f6",
+    "4": "#e3e8ef",
+    "5": "#cdd5df",
+    "6": "#9aa4b2",
+    "7": "#697586",
+    "8": "#4b5565",
+    "9": "#364152",
+    "10": "#202939",
+    "11": "#121926"
+  },
+  "gray-neutral": {
+    "1": "#fcfcfd",
+    "2": "#f9fafb",
+    "3": "#f3f4f6",
+    "4": "#e5e7eb",
+    "5": "#d2d6db",
+    "6": "#9da4ae",
+    "7": "#6c737f",
+    "8": "#4d5761",
+    "9": "#384250",
+    "10": "#1f2a37",
+    "11": "#111927"
+  },
+  "gray-iron": {
+    "1": "#fcfcfc",
+    "2": "#fafafa",
+    "3": "#f4f4f5",
+    "4": "#e4e4e7",
+    "5": "#d1d1d6",
+    "6": "#d1d1d6",
+    "7": "#70707b",
+    "8": "#51525c",
+    "9": "#3f3f46",
+    "10": "#26272b",
+    "11": "#18181b"
+  },
+  "gray-true": {
+    "1": "#fcfcfc",
+    "2": "#fafafa",
+    "3": "#f5f5f5",
+    "4": "#e5e5e5",
+    "5": "#d6d6d6",
+    "6": "#a3a3a3",
+    "7": "#737373",
+    "8": "#525252",
+    "9": "#424242",
+    "10": "#292929",
+    "11": "#141414"
+  },
+  "gray-warm": {
+    "1": "#fdfdfc",
+    "2": "#fafaf9",
+    "3": "#f5f5f4",
+    "4": "#e7e5e4",
+    "5": "#d7d3d0",
+    "6": "#d7d3d0",
+    "7": "#79716b",
+    "8": "#57534e",
+    "9": "#44403c",
+    "10": "#292524",
+    "11": "#1c1917"
+  },
+  "moss": {
+    "1": "#fafdf7",
+    "2": "#f5fbee",
+    "3": "#e6f4d7",
+    "4": "#ceeab0",
+    "5": "#acdc79",
+    "6": "#86cb3c",
+    "7": "#669f2a",
+    "8": "#4f7a21",
+    "9": "#3f621a",
+    "10": "#335015",
+    "11": "#2b4212"
+  },
+  "green-light": {
+    "1": "#fafef5",
+    "2": "#f3fee7",
+    "3": "#e4fbcc",
+    "4": "#d0f8ab",
+    "5": "#a6ef67",
+    "6": "#85e13a",
+    "7": "#66c61c",
+    "8": "#4ca30d",
+    "9": "#3b7c0f",
+    "10": "#326212",
+    "11": "#2b5314"
+  },
+  "green": {
+    "1": "#f6fef9",
+    "2": "#edfcf2",
+    "3": "#d3f8df",
+    "4": "#aaf0c4",
+    "5": "#73e2a3",
+    "6": "#73e2a3",
+    "7": "#16b364",
+    "8": "#099250",
+    "9": "#087443",
+    "10": "#095c37",
+    "11": "#084c2e"
+  },
+  "teal": {
+    "1": "#f6fefc",
+    "2": "#f0fdf9",
+    "3": "#ccfbef",
+    "4": "#99f6e0",
+    "5": "#5fe9d0",
+    "6": "#2ed3b7",
+    "7": "#15b79e",
+    "8": "#0e9384",
+    "9": "#107569",
+    "10": "#125d56",
+    "11": "#134e48"
+  },
+  "cyan": {
+    "1": "#f5feff",
+    "2": "#ecfdff",
+    "3": "#cff9fe",
+    "4": "#a5f0fc",
+    "5": "#67e3f9",
+    "6": "#22ccee",
+    "7": "#06aed4",
+    "8": "#088ab2",
+    "9": "#0e7090",
+    "10": "#155b75",
+    "11": "#164c63"
+  },
+  "blue-dark": {
+    "1": "#f5f8ff",
+    "2": "#eff4ff",
+    "3": "#d1e0ff",
+    "4": "#b2ccff",
+    "5": "#84adff",
+    "6": "#528bff",
+    "7": "#2970ff",
+    "8": "#155eef",
+    "9": "#004eeb",
+    "10": "#0040c1",
+    "11": "#00359e"
+  },
+  "indigo": {
+    "1": "#f5f8ff",
+    "2": "#eef4ff",
+    "3": "#e0eaff",
+    "4": "#c7d7fe",
+    "5": "#a4bcfd",
+    "6": "#8098f9",
+    "7": "#8098f9",
+    "8": "#444ce7",
+    "9": "#3538cd",
+    "10": "#2d31a6",
+    "11": "#2d3282"
+  },
+  "violet": {
+    "1": "#fbfaff",
+    "2": "#f5f3ff",
+    "3": "#ece9fe",
+    "4": "#ddd6fe",
+    "5": "#c3b5fd",
+    "6": "#a48afb",
+    "7": "#875bf7",
+    "8": "#7839ee",
+    "9": "#6927da",
+    "10": "#5720b7",
+    "11": "#491c96"
+  },
+  "purple": {
+    "1": "#fafaff",
+    "2": "#f4f3ff",
+    "3": "#ebe9fe",
+    "4": "#d9d6fe",
+    "5": "#bdb4fe",
+    "6": "#9b8afb",
+    "7": "#7a5af8",
+    "8": "#6938ef",
+    "9": "#5925dc",
+    "10": "#4a1fb8",
+    "11": "#3e1c96"
+  },
+  "fuchsia": {
+    "1": "#fefaff",
+    "2": "#fdf4ff",
+    "3": "#fbe8ff",
+    "4": "#f6d0fe",
+    "5": "#eeaafd",
+    "6": "#e478fa",
+    "7": "#d444f1",
+    "8": "#ba24d5",
+    "9": "#9f1ab1",
+    "10": "#821890",
+    "11": "#6f1877"
+  },
+  "pink": {
+    "1": "#fef6fb",
+    "2": "#fdf2fa",
+    "3": "#fce7f6",
+    "4": "#fce7f6",
+    "5": "#faa7e0",
+    "6": "#f670c7",
+    "7": "#ee46bc",
+    "8": "#dd2590",
+    "9": "#c11574",
+    "10": "#9e165f",
+    "11": "#851651"
+  },
+  "rose": {
+    "1": "#fff5f6",
+    "2": "#fff1f3",
+    "3": "#ffe4e8",
+    "4": "#fecdd6",
+    "5": "#fea3b4",
+    "6": "#fd6f8e",
+    "7": "#f63d68",
+    "8": "#e31b54",
+    "9": "#c01048",
+    "10": "#a11043",
+    "11": "#89123e"
+  },
+  "orange-dark": {
+    "1": "#fff9f5",
+    "2": "#fff4ed",
+    "3": "#ffe6d5",
+    "4": "#ffd6ae",
+    "5": "#ff9c66",
+    "6": "#ff692e",
+    "7": "#ff4405",
+    "8": "#e62e05",
+    "9": "#bc1b06",
+    "10": "#97180c",
+    "11": "#771a0d"
+  },
+  "orange": {
+    "1": "#fefaf5",
+    "2": "#fef6ee",
+    "3": "#fdead7",
+    "4": "#f9dbaf",
+    "5": "#f7b27a",
+    "6": "#f38744",
+    "7": "#ef6820",
+    "8": "#e04f16",
+    "9": "#b93815",
+    "10": "#932f19",
+    "11": "#772917"
+  },
+  "yellow": {
+    "1": "#fefdf0",
+    "2": "#fefbe8",
+    "3": "#fef7c3",
+    "4": "#feee95",
+    "5": "#feee95",
+    "6": "#fac515",
+    "7": "#eaaa08",
+    "8": "#ca8504",
+    "9": "#a15c07",
+    "10": "#854a0e",
+    "11": "#713b12"
+  }
+}
diff --git a/app/assets/css/colors.ts b/app/assets/css/colors.ts
new file mode 100644
index 000000000..d2aa623c8
--- /dev/null
+++ b/app/assets/css/colors.ts
@@ -0,0 +1,11 @@
+import colors from './colors.json';
+
+const element = document.createElement('style');
+
+element.innerHTML = `:root {  
+  ${Object.entries(colors)
+    .map(([color, hex]) => `--ui-${color}: ${hex}`)
+    .join(';\n')}
+}`;
+
+document.head.prepend(element);
diff --git a/app/assets/css/index.js b/app/assets/css/index.js
index 8c510efe3..a731fc1d8 100644
--- a/app/assets/css/index.js
+++ b/app/assets/css/index.js
@@ -15,6 +15,8 @@ import 'angular-multiselect/isteven-multi-select.css';
 import 'spinkit/spinkit.min.css';
 import '@reach/menu-button/styles.css';
 
+import './colors';
+
 import './rdash.css';
 import './app.css';
 
diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 672ba2ec5..5e70dcd73 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -1,22 +1,7 @@
 /* Color Variable */
 :root {
-  --ui-blue-1: #0086c9;
-  --ui-blue-2: #026aa2;
-  --ui-blue-3: #e0f2fe;
-  --ui-blue-4: #0ba5ec;
-  --ui-red-1: #d92d20;
-  --ui-red-2: #fef3f2;
-  --ui-green-1: #12b76a;
-  --ui-yellow: #fdb022;
-  --ui-grey-1: #d0d5dd;
-  --ui-grey-2: #f9fafb;
-  --ui-grey-3: #344054;
-  --ui-grey-4: #667085;
-  --ui-grey-5: #101828;
-  --ui-grey-6: #f2f4f7;
-
-  --black-color: #000;
-  --white-color: #fff;
+  --black-color: var(--ui-black);
+  --white-color: var(--ui-white);
 
   --grey-1: #212121;
   --grey-2: #181818;
@@ -68,7 +53,6 @@
   --grey-49: rgba(0, 0, 0, 0.54);
   --grey-50: rgba(161, 170, 166, 0.5);
   --grey-51: rgba(0, 0, 0, 0.15);
-  --grey-52: rgba(255, 255, 255, 0.3);
   --grey-53: rgba(255, 255, 255, 0.6);
   --grey-54: rgb(54, 54, 54);
   --grey-55: rgba(255, 255, 255, 0.8);
@@ -91,7 +75,6 @@
   --blue-10: #61b6ff;
   --blue-11: #3ea5ff;
   --blue-12: #41a6ff;
-  --blue-13: #2361ae;
   --blue-14: #357ebd;
 
   --red-1: #a94442;
@@ -99,7 +82,6 @@
   --red-3: #a11;
   --red-4: #d9534f;
   --red-5: #ff2727;
-  --red-6: #ff00e0;
   --red-7: #f00;
 
   --green-1: #164;
@@ -121,8 +103,8 @@
   --bg-widget-table-color: var(--grey-13);
   --bg-header-color: var(--white-color);
   --bg-hover-table-color: var(--grey-14);
-  --bg-switch-box-color: var(--ui-grey-1);
-  --bg-input-group-addon-color: var(--ui-grey-6);
+  --bg-switch-box-color: var(--ui-gray-5);
+  --bg-input-group-addon-color: var(--ui-gray-3);
   --bg-btn-default-color: var(--white-color);
   --bg-blocklist-hover-color: var(--ui-blue-3);
   --bg-boxselector-color: var(--white-color);
@@ -154,7 +136,7 @@
   --bg-panel-body-color: var(--white-color);
   --bg-codemirror-color: var(--white-color);
   --bg-codemirror-selected-color: var(--grey-22);
-  --bg-tooltip-color: var(--ui-grey-5);
+  --bg-tooltip-color: var(--ui-gray-11);
   --bg-input-sm-color: var(--white-color);
   --bg-service-datatable-thead: var(--grey-23);
   --bg-app-datatable-thead: var(--grey-23);
@@ -181,9 +163,9 @@
   --bg-stepper-item-counter: var(--grey-61);
   --bg-sortbutton-color: var(--white-color);
   --bg-dashboard-item: var(--ui-blue-3);
-  --bg-searchbar: var(--ui-grey-2);
-  --bg-inputbox: var(--ui-grey-2);
-  --bg-dropdown-hover: var(--ui-grey-6);
+  --bg-searchbar: var(--ui-gray-2);
+  --bg-inputbox: var(--ui-gray-2);
+  --bg-dropdown-hover: var(--ui-gray-3);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -215,7 +197,7 @@
   --text-blocklist-item-selected-color: var(--grey-37);
   --text-progress-bar-color: var(--grey-27);
   --text-pagination-color: var(--grey-26);
-  --text-pagination-span-color: var(--ui-grey-6);
+  --text-pagination-span-color: var(--ui-gray-3);
   --text-pagination-span-hover-color: var(--blue-4);
   --text-ui-select-color: var(--grey-6);
   --text-ui-select-hover-color: var(--grey-28);
@@ -229,7 +211,7 @@
   --text-input-autofill-color: var(--black-color);
   --text-button-hover-color: var(--grey-6);
   --text-small-select-color: var(--grey-25);
-  --text-bootbox: var(--ui-grey-4);
+  --text-bootbox: var(--ui-gray-7);
 
   --border-color: var(--grey-42);
   --border-widget-color: var(--grey-43);
@@ -264,9 +246,9 @@
   --border-tooltip-color: var(--grey-47);
   --border-modal: 0px;
   --border-sortbutton: var(--grey-8);
-  --border-bootbox: var(--ui-grey-1);
-  --border-blocklist: var(--ui-grey-1);
-  --border-widget: var(--ui-grey-1);
+  --border-bootbox: var(--ui-gray-5);
+  --border-blocklist: var(--ui-gray-5);
+  --border-widget: var(--ui-gray-5);
 
   --shadow-box-color: 0 3px 10px -2px var(--grey-50);
   --shadow-boxselector-color: 0 3px 10px -2px var(--grey-50);
@@ -288,12 +270,12 @@
   --bg-multiselect-helpercontainer: var(--white-color);
   --text-input-textarea: var(--white-color);
 
-  --border-checkbox: var(--ui-grey-1);
+  --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-grey-1);
+  --border-searchbar: var(--ui-gray-5);
   --bg-button-group: var(--white-color);
-  --border-button-group: var(--ui-grey-1);
-  --text-button-group: var(--ui-grey-3);
+  --border-button-group: var(--ui-gray-5);
+  --text-button-group: var(--ui-gray-9);
 }
 
 :root[theme='dark'] {
@@ -396,7 +378,7 @@
   --text-blocklist-item-selected-color: var(--white-color);
   --text-progress-bar-color: var(--white-color);
   --text-pagination-color: var(--white-color);
-  --text-pagination-span-color: var(--ui-grey-6);
+  --text-pagination-span-color: var(--ui-gray-3);
   --text-pagination-span-hover-color: var(--white-color);
   --text-ui-select-color: var(--white-color);
   --text-ui-select-hover-color: var(--white-color);
@@ -446,9 +428,9 @@
   --border-tooltip-color: var(--grey-3);
   --border-modal: 0px;
   --border-sortbutton: var(--grey-3);
-  --border-bootbox: var(--ui-grey-3);
-  --border-blocklist: var(--ui-grey-3);
-  --border-widget: var(--ui-grey-3);
+  --border-bootbox: var(--ui-gray-9);
+  --border-blocklist: var(--ui-gray-9);
+  --border-widget: var(--ui-gray-9);
 
   --blue-color: var(--blue-2);
   --button-close-color: var(--white-color);
@@ -468,12 +450,12 @@
   --bg-multiselect-helpercontainer: var(--grey-1);
   --text-input-textarea: var(--grey-1);
 
-  --border-checkbox: var(--ui-grey-1);
+  --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-grey-1);
+  --border-searchbar: var(--ui-gray-5);
   --bg-button-group: var(--white-color);
-  --border-button-group: var(--ui-grey-1);
-  --text-button-group: var(--ui-grey-3);
+  --border-button-group: var(--ui-gray-5);
+  --text-button-group: var(--ui-gray-9);
 }
 
 :root[theme='highcontrast'] {
@@ -586,7 +568,7 @@
   --text-btn-default-color: var(--white-color);
   --text-small-select-color: var(--white-color);
   --text-multiselect-item-color: var(--white-color);
-  --text-pagination-span-color: var(--ui-grey-6);
+  --text-pagination-span-color: var(--ui-gray-3);
   --text-bootbox: var(--white-color);
 
   --border-color: var(--grey-55);
@@ -640,10 +622,10 @@
   --text-cm-string-color: var(--red-7);
   --text-progress-bar-color: var(--black-color);
 
-  --border-checkbox: var(--ui-grey-1);
+  --border-checkbox: var(--ui-gray-5);
   --bg-checkbox: var(--white-color);
-  --border-searchbar: var(--ui-grey-1);
+  --border-searchbar: var(--ui-gray-5);
   --bg-button-group: var(--white-color);
-  --border-button-group: var(--ui-grey-1);
-  --text-button-group: var(--ui-grey-3);
+  --border-button-group: var(--ui-gray-5);
+  --text-button-group: var(--ui-gray-9);
 }
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 16f56713f..ac2115524 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -25,7 +25,7 @@
 }
 
 .datatable .toolBar .setting-active {
-  color: var(--ui-blue-4);
+  @apply text-blue-7;
 }
 
 .datatable .searchBar {
diff --git a/app/react/components/PageHeader/HeaderTitle.module.css b/app/react/components/PageHeader/HeaderTitle.module.css
index cfa8c406f..12fb824c1 100644
--- a/app/react/components/PageHeader/HeaderTitle.module.css
+++ b/app/react/components/PageHeader/HeaderTitle.module.css
@@ -8,7 +8,7 @@
 .menu-list {
   background: var(--bg-dropdown-menu-color);
   border-radius: 8px;
-  border: 1px solid var(--ui-grey-1) !important;
+  border: 1px solid var(--ui-gray-5) !important;
   width: 180px;
   padding: 5px !important;
   box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
diff --git a/app/react/components/PaginationControls/pagination-controls.css b/app/react/components/PaginationControls/pagination-controls.css
index bbda83fbd..fa15086d9 100644
--- a/app/react/components/PaginationControls/pagination-controls.css
+++ b/app/react/components/PaginationControls/pagination-controls.css
@@ -64,8 +64,8 @@
 .pagination > .active > a:focus,
 .pagination > .active > span:focus,
 .pagination > .active > button:focus {
+  @apply text-blue-7;
   z-index: 3;
-  color: #1d2939;
   cursor: default;
   background-color: var(--text-pagination-span-color);
   border-color: var(--text-pagination-span-color);
diff --git a/tailwind.config.js b/tailwind.config.js
index 9bf76dcaf..8b190f25c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,7 @@
+const plugin = require('tailwindcss/plugin');
+const colors = require('./app/assets/css/colors.json');
+
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./app/**/*.{html,tsx}'],
   corePlugins: {
@@ -7,94 +11,20 @@ module.exports = {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      white: 'var(--white-color)',
-      black: 'var(--black-color)',
-      'grey-1': 'var(--grey-1)',
-      'grey-2': 'var(--grey-2)',
-      'grey-3': 'var(--grey-3)',
-      'grey-4': 'var(--grey-4)',
-      'grey-5': 'var(--grey-5)',
-      'grey-6': 'var(--grey-6)',
-      'grey-7': 'var(--grey-7)',
-      'grey-8': 'var(--grey-8)',
-      'grey-9': 'var(--grey-9)',
-      'grey-10': 'var(--grey-10)',
-      'grey-11': 'var(--grey-11)',
-      'grey-12': 'var(--grey-12)',
-      'grey-13': 'var(--grey-13)',
-      'grey-14': 'var(--grey-14)',
-      'grey-15': 'var(--grey-15)',
-      'grey-16': 'var(--grey-16)',
-      'grey-17': 'var(--grey-17)',
-      'grey-18': 'var(--grey-18)',
-      'grey-19': 'var(--grey-19)',
-      'grey-20': 'var(--grey-20)',
-      'grey-21': 'var(--grey-21)',
-      'grey-22': 'var(--grey-22)',
-      'grey-23': 'var(--grey-23)',
-      'grey-24': 'var(--grey-24)',
-      'grey-25': 'var(--grey-25)',
-      'grey-26': 'var(--grey-26)',
-      'grey-27': 'var(--grey-27)',
-      'grey-28': 'var(--grey-28)',
-      'grey-29': 'var(--grey-29)',
-      'grey-30': 'var(--grey-30)',
-      'grey-31': 'var(--grey-31)',
-      'grey-32': 'var(--grey-32)',
-      'grey-33': 'var(--grey-33)',
-      'grey-34': 'var(--grey-34)',
-      'grey-35': 'var(--grey-35)',
-      'grey-36': 'var(--grey-36)',
-      'grey-37': 'var(--grey-37)',
-      'grey-38': 'var(--grey-38)',
-      'grey-39': 'var(--grey-39)',
-      'grey-40': 'var(--grey-40)',
-      'grey-41': 'var(--grey-41)',
-      'grey-42': 'var(--grey-42)',
-      'grey-43': 'var(--grey-43)',
-      'grey-44': 'var(--grey-44)',
-      'grey-45': 'var(--grey-45)',
-      'grey-46': 'var(--grey-46)',
-      'grey-47': 'var(--grey-47)',
-      'grey-48': 'var(--grey-48)',
-      'grey-49': 'var(--grey-49)',
-      'grey-50': 'var(--grey-50)',
-      'grey-51': 'var(--grey-51)',
-      'grey-52': 'var(--grey-52)',
-      'grey-53': 'var(--grey-53)',
-      'grey-54': 'var(--grey-54)',
-      'grey-55': 'var(--grey-55)',
-      'grey-56': 'var(--grey-56)',
-      'grey-57': 'var(--grey-57)',
-      'grey-58': 'var(--grey-58)',
-      'grey-59': 'var(--grey-59)',
-      'grey-60': 'var(--grey-60)',
-      'grey-61': 'var(--grey-61)',
-      'blue-1': 'var(--blue-1)',
-      'blue-2': 'var(--blue-2)',
-      'blue-3': 'var(--blue-3)',
-      'blue-4': 'var(--blue-4)',
-      'blue-5': 'var(--blue-5)',
-      'blue-6': 'var(--blue-6)',
-      'blue-7': 'var(--blue-7)',
-      'blue-8': 'var(--blue-8)',
-      'blue-9': 'var(--blue-9)',
-      'blue-10': 'var(--blue-10)',
-      'blue-11': 'var(--blue-11)',
-      'blue-12': 'var(--blue-12)',
-      'blue-13': 'var(--blue-13)',
-      'blue-14': 'var(--blue-14)',
-      'red-1': 'var(--red-1)',
-      'red-2': 'var(--red-2)',
-      'red-3': 'var(--red-3)',
-      'red-4': 'var(--red-4)',
-      'red-5': 'var(--red-5)',
-      'red-6': 'var(--red-6)',
-      'red-7': 'var(--red-7)',
-      'green-1': 'var(--green-1)',
-      'green-2': 'var(--green-2)',
-      'green-3': 'var(--green-3)',
-      'orange-1': 'var(--orange-1)',
+      inherit: 'inherit',
+      ...colors,
+
+      'legacy-grey-3': 'var(--grey-3)',
+      'legacy-blue-2': 'var(--blue-2)',
+      'legacy-blue-9': 'var(--blue-9)',
     },
   },
+
+  plugins: [
+    plugin(({ addVariant }) => {
+      addVariant('be', '[data-edition="BE"] &');
+      addVariant('th-highcontrast', '[theme="highcontrast"] &');
+      addVariant('th-dark', '[theme="dark"] &');
+    }),
+  ],
 };