From 24c1815b69b4069a48ae9e5359e6e56219c2f858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 11 Apr 2022 19:44:57 +0300
Subject: [PATCH] RED-3800: Remove some variables.$color usage

---
 .../notifications.component.scss              | 10 ++---
 .../spotlight-search.component.scss           |  8 ++--
 .../base-account-screen-component.scss        |  3 +-
 .../notifications-screen.component.scss       | 11 +++---
 ...delete-dossier-state-dialog.component.scss |  6 +--
 .../active-fields-listing.component.scss      |  6 +--
 ...ssier-states-listing-screen.component.scss |  4 +-
 .../general-config-screen.component.scss      |  3 +-
 ...ossier-template-info-screen.component.scss |  1 -
 .../license-information-screen.component.scss |  5 +--
 .../reports-screen.component.scss             | 11 +++---
 .../watermark-screen.component.scss           | 10 ++---
 .../dossier-details-stats.component.scss      |  3 +-
 .../dossier-details.component.scss            |  2 +-
 .../table-item/table-item.component.scss      |  3 +-
 .../view-mode-selection.component.scss        |  4 +-
 .../dossier-overview-screen.component.scss    |  4 +-
 .../edit-dossier-attributes.component.scss    |  6 +--
 .../edit-dossier-dialog.component.scss        |  3 +-
 .../edit-dossier-team.component.scss          |  3 +-
 .../file-actions/file-actions.component.scss  |  3 +-
 .../annotation-actions.component.scss         |  4 +-
 .../annotation-card.component.scss            |  4 +-
 .../annotation-details.component.scss         | 10 ++---
 .../annotation-references-list.component.scss |  2 -
 .../annotations-list.component.scss           |  1 -
 .../document-info.component.scss              |  3 +-
 .../file-workload.component.scss              | 11 +++---
 .../page-exclusion.component.scss             |  9 ++---
 .../page-indicator.component.scss             | 12 +++---
 .../pdf-viewer/pdf-viewer.component.scss      | 14 +++----
 .../view-switch/view-switch.component.scss    |  6 +--
 .../remove-annotations-dialog.component.scss  |  4 +-
 .../file-preview-screen.component.scss        |  6 +--
 .../annotation-icon.component.scss            |  8 ++--
 .../user-button/user-button.component.scss    |  2 +-
 .../dictionary-manager.component.scss         |  8 ++--
 .../dossier-state.component.scss              |  4 +-
 .../initials-avatar.component.scss            |  4 +-
 .../pagination/pagination.component.scss      |  4 +-
 .../components/select/select.component.scss   | 18 ++++-----
 .../simple-doughnut-chart.component.scss      |  2 +-
 .../team-members/team-members.component.scss  |  8 ++--
 .../upload-status-overlay.component.scss      | 20 +++++-----
 .../src/assets/styles/red-components.scss     | 38 +++++++++----------
 apps/red-ui/src/assets/styles/red-editor.scss |  2 +-
 libs/common-ui                                |  2 +-
 47 files changed, 130 insertions(+), 185 deletions(-)

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index 10f488a96..b0c2303ea 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -41,24 +41,24 @@
                     white-space: normal;
 
                     a {
-                        color: variables.$accent;
+                        color: var(--iqser-accent);
                         font-weight: bold;
                     }
                 }
             }
 
             .dot {
-                background-color: variables.$grey-4;
+                background-color: var(--iqser-grey-4);
                 top: 8px;
                 right: 8px;
                 cursor: pointer;
             }
 
             &:hover {
-                background-color: variables.$grey-6;
+                background-color: var(--iqser-grey-6);
 
                 .dot {
-                    background-color: variables.$grey-5;
+                    background-color: var(--iqser-grey-5);
                 }
 
                 a {
@@ -70,7 +70,7 @@
                 background-color: rgba(variables.$primary, 0.1);
 
                 .dot {
-                    background-color: variables.$primary;
+                    background-color: var(--iqser-primary);
                 }
             }
         }
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
index 98c76a703..d725c9d04 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .spotlight-row {
     width: 300px;
     display: flex;
@@ -9,13 +7,13 @@
     font-size: 13px;
     border: none;
     outline: none;
-    color: variables.$accent;
-    background-color: variables.$white;
+    color: var(--iqser-accent);
+    background-color: var(--iqser-white);
 }
 
 .highlight {
     border-radius: 4px;
-    background-color: variables.$grey-2;
+    background-color: var(--iqser-grey-2);
 }
 
 .wrapper {
diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss
index 787f8c31e..b8778a2b1 100644
--- a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss
+++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss
@@ -1,8 +1,7 @@
-@use 'variables';
 @use 'common-mixins';
 
 .content-container {
-    background-color: variables.$grey-2;
+    background-color: var(--iqser-grey-2);
     justify-content: center;
     @include common-mixins.scroll-bar;
     overflow: auto;
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
index 4e0c1ce0b..5bfd95db4 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 .dialog-content {
@@ -8,8 +7,8 @@
         grid-column: span 2;
         padding: 10px 10px;
         margin-bottom: -1px;
-        border-top: 1px solid variables.$separator;
-        border-bottom: 1px solid variables.$separator;
+        border-top: 1px solid var(--iqser-separator);
+        border-bottom: 1px solid var(--iqser-separator);
     }
 
     .options-content {
@@ -17,7 +16,7 @@
 
         .statement {
             opacity: 0.7;
-            color: variables.$grey-1;
+            color: var(--iqser-grey-1);
             font-weight: 500;
             padding: 10px 0;
         }
@@ -25,10 +24,12 @@
         .radio-container {
             display: flex;
             padding: 10px 0 10px;
+
             .radio-button {
                 display: flex;
                 align-items: center;
                 padding-right: 30px;
+
                 iqser-round-checkbox {
                     margin-right: 8px;
                 }
@@ -39,7 +40,7 @@
             padding: 10px 0;
 
             .group-title {
-                color: variables.$grey-1;
+                color: var(--iqser-grey-1);
                 font-weight: 600;
             }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
index 616e7b39c..4128c859f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.scss
@@ -1,14 +1,12 @@
-@use 'variables';
-
 .replacement-suggestion {
     font-size: 13px;
     line-height: 18px;
-    color: variables.$grey-1;
+    color: var(--iqser-grey-1);
     margin-bottom: 24px;
 }
 
 .dialog-header {
-    color: variables.$primary;
+    color: var(--iqser-primary);
 }
 
 .heading {
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index 053574610..ac98fbfef 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 :host ::ng-deep iqser-table {
     iqser-table-header {
         iqser-table-column-name .name {
@@ -8,7 +6,7 @@
 
         .header-item {
             box-shadow: none;
-            border-top: 1px solid variables.$separator;
+            border-top: 1px solid var(--iqser-separator);
 
             .all-caps-label {
                 margin-right: 10px;
@@ -20,7 +18,7 @@
 
             .separator {
                 margin-left: 14px;
-                background-color: variables.$separator;
+                background-color: var(--iqser-separator);
                 width: 1px;
                 height: 30px;
                 margin-right: 16px;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
index 1492972d9..1c40bf617 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .dossier-state-square {
     height: 16px;
     width: 16px;
@@ -11,7 +9,7 @@
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
-    color: variables.$grey-1;
+    color: var(--iqser-grey-1);
 }
 
 .right-container {
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
index 98e4dc474..fc571e7bc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
@@ -1,8 +1,7 @@
-@use 'variables';
 @use 'common-mixins';
 
 .content-container {
-    background-color: variables.$grey-2;
+    background-color: var(--iqser-grey-2);
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.scss
index ec2f71ce4..907042503 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
index 4fb9dc336..04fde6620 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
@@ -1,5 +1,4 @@
 @use 'common-mixins';
-@use 'variables';
 
 .content-container {
     overflow: auto;
@@ -28,7 +27,7 @@
 
             &:hover {
                 > div {
-                    background-color: variables.$grey-2;
+                    background-color: var(--iqser-grey-2);
                 }
             }
         }
@@ -37,7 +36,7 @@
             grid-column: span 2;
             padding: 20px 20px 8px;
             margin-bottom: 8px;
-            border-bottom: 1px solid variables.$separator;
+            border-bottom: 1px solid var(--iqser-separator);
         }
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
index 09dc44a65..e2b5ad16b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
@@ -27,7 +26,7 @@
 
     .template {
         padding: 8px 10px;
-        background-color: variables.$grey-6;
+        background-color: var(--iqser-grey-6);
         border-radius: 4px;
         transition: background-color 0.2s;
         position: relative;
@@ -54,7 +53,7 @@
         }
 
         &:hover {
-            background-color: variables.$grey-4;
+            background-color: var(--iqser-grey-4);
 
             .actions {
                 display: flex;
@@ -86,8 +85,8 @@
         grid-template-columns: 1fr 2fr;
 
         .all-caps-label {
-            border-top: 1px solid variables.$separator;
-            border-bottom: 1px solid variables.$separator;
+            border-top: 1px solid var(--iqser-separator);
+            border-bottom: 1px solid var(--iqser-separator);
             padding: 8px 32px;
 
             &:nth-child(2) {
@@ -98,7 +97,7 @@
         .placeholder,
         .description {
             padding: 16px 16px;
-            border-bottom: 1px solid variables.$separator;
+            border-bottom: 1px solid var(--iqser-separator);
         }
 
         .placeholder {
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
index 7b0777c44..74143cc02 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.scss
@@ -21,7 +21,7 @@
     min-width: 353px;
     padding: 24px;
     border-left: none;
-    border-right: 1px solid variables.$separator;
+    border-right: 1px solid var(--iqser-separator);
 
     &.has-scrollbar:hover {
         padding-right: 13px;
@@ -38,8 +38,8 @@
             width: 60px;
             height: 60px;
             border-radius: 8px;
-            background-color: variables.$grey-6;
-            color: variables.$grey-7;
+            background-color: var(--iqser-grey-6);
+            color: var(--iqser-grey-7);
             align-items: center;
             justify-content: center;
             text-align: center;
@@ -60,8 +60,8 @@
             }
 
             &.active {
-                background-color: variables.$primary;
-                color: variables.$white;
+                background-color: var(--iqser-primary);
+                color: var(--iqser-white);
             }
 
             &.times-new-roman {
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
index 7f225ce33..aa6d3e1a6 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-components';
 @use 'common-texts';
 
@@ -22,7 +21,7 @@
             transition: background-color 0.2s;
 
             &:hover {
-                background-color: variables.$grey-6;
+                background-color: var(--iqser-grey-6);
             }
         }
     }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss
index a70828056..73039cfb8 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss
@@ -29,7 +29,7 @@
         padding: 3px 8px;
 
         &:hover {
-            background-color: variables.$grey-6;
+            background-color: var(--iqser-grey-6);
         }
 
         &.active {
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
index d89397c3e..396e6bfb4 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.scss
@@ -1,8 +1,7 @@
 @use 'common-mixins';
-@use 'variables';
 
 .error {
-    color: variables.$primary;
+    color: var(--iqser-primary);
 }
 
 .extend-cols {
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
index 7e96bbb4e..83c4b6a5f 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
@@ -1,7 +1,5 @@
-@use 'variables';
-
 .view-mode-selection {
-    border-right: 1px solid variables.$separator;
+    border-right: 1px solid var(--iqser-separator);
     padding-right: 16px;
     margin-right: 16px !important;
     display: flex;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.scss
index e27270951..d6417fe17 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.scss
@@ -1,5 +1,5 @@
-@use 'variables';
 @use 'common-mixins';
+@use 'variables';
 
 .file-upload-input {
     display: none;
@@ -9,7 +9,7 @@
     &.last-opened {
         .selection-column {
             padding-left: 6px !important;
-            border-left: 4px solid variables.$primary;
+            border-left: 4px solid var(--iqser-primary);
         }
 
         .selection-column,
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
index 1354748b7..bb8b9318c 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 :host {
     display: flex;
     min-height: 100%;
@@ -18,7 +16,7 @@
             height: 100%;
             width: 1px;
             padding: 0;
-            background-color: variables.$separator;
+            background-color: var(--iqser-separator);
         }
 
         .datepicker-wrapper {
@@ -60,7 +58,7 @@
                 height: 50px;
                 object-fit: cover;
                 object-position: center;
-                border: 1px solid variables.$grey-5;
+                border: 1px solid var(--iqser-grey-5);
                 margin-right: 15px;
             }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
index 73e9c5654..47f54c0b8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
@@ -1,10 +1,9 @@
-@use 'variables';
 @use 'common-mixins';
 
 .dialog-content {
     padding: 0;
     margin-top: 24px;
-    border-top: 1px solid variables.$separator;
+    border-top: 1px solid var(--iqser-separator);
     overflow: hidden;
     flex-direction: row;
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
index ba22b9f9f..0d427a120 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
@@ -1,5 +1,4 @@
 @use 'common-mixins';
-@use 'variables';
 
 .search-container {
     margin-top: 16px;
@@ -55,7 +54,7 @@ redaction-team-members {
 
         &.selected,
         &:hover {
-            background-color: variables.$grey-2;
+            background-color: var(--iqser-grey-2);
 
             .actions {
                 display: flex;
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss
index 759479c3d..845f42238 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss
@@ -1,9 +1,8 @@
 @use 'common-mixins';
-@use 'variables';
 
 .file-actions {
     display: flex;
-    color: variables.$grey-1;
+    color: var(--iqser-grey-1);
 
     > *:not(:last-child) {
         margin-right: 2px;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
index 79ed0f815..f77411ebb 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .annotation-actions {
     display: none;
 
@@ -8,7 +6,7 @@
     }
 
     .confirm.active {
-        background-color: variables.$grey-2;
+        background-color: var(--iqser-grey-2);
     }
 
     > *:not(:last-child) {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
index 5e8de6b86..bda37fef8 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .details {
     display: flex;
     position: relative;
@@ -17,5 +15,5 @@ redaction-type-annotation-icon {
 }
 
 .pending-analysis {
-    color: variables.$red-1;
+    color: var(--iqser-red-1);
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss
index 39f778b05..a3b6a8184 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 :host {
     display: flex;
     position: absolute;
@@ -11,11 +9,11 @@
     width: 260px;
     padding: 10px;
     border-radius: 3px;
-    background-color: variables.$grey-1;
-    color: variables.$white;
+    background-color: var(--iqser-grey-1);
+    color: var(--iqser-white);
 
     mat-icon {
-        color: variables.$white;
+        color: var(--iqser-white);
         flex-shrink: 0;
     }
 
@@ -30,7 +28,7 @@
     height: 24px;
 
     &:hover {
-        background-color: variables.$grey-6;
+        background-color: var(--iqser-grey-6);
         border-radius: 12px;
 
         mat-icon {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.scss
index 02888fb62..1d0165d1f 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .uppercase {
     text-transform: uppercase;
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
index 863712648..5f41248b8 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
index 4ff5ff6c0..38a5345f4 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
@@ -42,7 +41,7 @@
     }
 
     &:not(:last-child) {
-        border-bottom: 1px solid variables.$separator;
+        border-bottom: 1px solid var(--iqser-separator);
     }
 }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
index f6b409b33..c7ddef779 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
@@ -7,7 +6,7 @@
 
 .banner {
     padding: 13px 16px;
-    color: variables.$white;
+    color: var(--iqser-white);
     justify-content: space-between;
 
     .read-only-text,
@@ -40,11 +39,11 @@
 }
 
 .read-only {
-    background-color: variables.$primary;
+    background-color: var(--iqser-primary);
 }
 
 .disabled-auto-analysis {
-    background-color: variables.$yellow-2;
+    background-color: var(--iqser-yellow-2);
 }
 
 .right-content {
@@ -84,7 +83,7 @@
     }
 
     .quick-navigation {
-        border-right: 1px solid variables.$separator;
+        border-right: 1px solid var(--iqser-separator);
         min-width: 61px;
         overflow: hidden;
         display: flex;
@@ -99,7 +98,7 @@
             transition: background-color 0.25s;
 
             &:not(.disabled):hover {
-                background-color: variables.$grey-6;
+                background-color: var(--iqser-grey-6);
             }
 
             mat-icon {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.scss b/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.scss
index 7d6774afd..03b21d706 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'common-mixins';
 
 :host {
@@ -7,13 +6,13 @@
     flex-direction: column;
 
     .exclude-pages-input-container {
-        background-color: variables.$grey-6;
+        background-color: var(--iqser-grey-6);
         padding: 15px 15px 16px 14px;
     }
 
     .all-caps-label-container {
         padding: 8px 16px;
-        border-bottom: 1px solid variables.$separator;
+        border-bottom: 1px solid var(--iqser-separator);
     }
 
     .ranges {
@@ -22,7 +21,7 @@
         .range {
             padding-left: 17px;
             padding-right: 16px;
-            border-bottom: 1px solid variables.$separator;
+            border-bottom: 1px solid var(--iqser-separator);
             transition: background-color 0.2s;
             display: flex;
             align-items: center;
@@ -34,7 +33,7 @@
             }
 
             &:hover {
-                background-color: variables.$grey-8;
+                background-color: var(--iqser-grey-8);
 
                 iqser-circle-button {
                     display: initial;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss
index a6cc77d4e..818da8a29 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss
@@ -1,18 +1,16 @@
-@use 'variables';
-
 .page-wrapper {
-    color: variables.$accent;
+    color: var(--iqser-accent);
     position: relative;
     padding: 12px 14px 12px 8px;
     cursor: pointer;
     border-left: 4px solid transparent;
 
     &:hover {
-        background-color: variables.$grey-2;
+        background-color: var(--iqser-grey-2);
     }
 
     &.active {
-        border-left: 4px solid variables.$primary;
+        border-left: 4px solid var(--iqser-primary);
     }
 
     mat-icon {
@@ -35,10 +33,10 @@
     }
 
     &.read {
-        color: variables.$grey-5;
+        color: var(--iqser-grey-5);
 
         .text {
-            color: variables.$accent;
+            color: var(--iqser-accent);
         }
     }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.scss
index 40e50e4c7..faea956be 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-viewer/pdf-viewer.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .page {
     display: flex;
     flex-direction: column;
@@ -28,9 +26,9 @@
     bottom: 20px;
     left: 50%;
     transform: translate(-50%);
-    background: variables.$white;
-    color: variables.$grey-7;
-    border: 1px solid variables.$grey-7;
+    background: var(--iqser-white);
+    color: var(--iqser-grey-7);
+    border: 1px solid var(--iqser-grey-7);
     border-radius: 8px;
     padding: 6px 2px;
     display: flex;
@@ -56,7 +54,7 @@
             margin: 0;
         }
 
-        color: variables.$grey-7;
+        color: var(--iqser-grey-7);
         text-decoration: none;
         outline: none;
         border: none;
@@ -67,7 +65,7 @@
         &:hover,
         &:focus {
             font-weight: bold;
-            border-bottom: 1px solid variables.$grey-7;
+            border-bottom: 1px solid var(--iqser-grey-7);
         }
     }
 
@@ -79,7 +77,7 @@
         padding-right: 4px;
 
         &:hover {
-            color: variables.$accent;
+            color: var(--iqser-accent);
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.scss b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.scss
index 502187c53..ede860ad2 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.scss
@@ -1,11 +1,9 @@
-@use 'variables';
-
 :host {
     display: contents;
 }
 
 .disabled {
-    background-color: variables.$grey-6;
-    color: variables.$grey-3;
+    background-color: var(--iqser-grey-6);
+    color: var(--iqser-grey-3);
     cursor: default;
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
index f54f398c1..676104d29 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .content-wrapper {
     padding-top: 20px;
     padding-bottom: 8px;
@@ -18,6 +16,6 @@ ul {
     td {
         padding: 8px;
         text-align: left;
-        border: 1px solid variables.$separator;
+        border: 1px solid var(--iqser-separator);
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
index 83d8a5aca..f149bcbab 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@@ -1,9 +1,7 @@
-@use 'variables';
-
 .vertical-line {
     width: 1px;
     height: 30px;
-    background-color: variables.$grey-4;
+    background-color: var(--iqser-grey-4);
     margin: 0 16px;
 }
 
@@ -29,7 +27,7 @@
     ::ng-deep .right-title {
         min-height: 70px;
         display: flex;
-        border-bottom: 1px solid variables.$separator;
+        border-bottom: 1px solid var(--iqser-separator);
         align-items: center;
         justify-content: space-between;
         padding: 0 24px;
diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
index 056c8a268..34ce718fd 100644
--- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .icon {
     height: 16px;
     width: 16px;
@@ -11,7 +9,7 @@
     align-items: center;
     text-align: center;
     text-transform: uppercase;
-    color: variables.$white;
+    color: var(--iqser-white);
     position: relative;
     background-color: var(--color);
 }
@@ -60,9 +58,9 @@
 }
 
 .skipped {
-    background-color: variables.$grey-5;
+    background-color: var(--iqser-grey-5);
 }
 
 .none {
-    color: variables.$accent;
+    color: var(--iqser-accent);
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
index eb363230f..c9d2d061d 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
@@ -1,5 +1,5 @@
-@use 'variables';
 @use 'common-buttons';
+@use 'variables';
 
 :host {
     @extend .user-button;
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
index f9b6d62e8..59033e579 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 :host {
     width: 100%;
     height: 100%;
@@ -68,7 +66,7 @@ form {
                 position: absolute;
                 right: 12px;
                 top: 8px;
-                color: variables.$accent;
+                color: var(--iqser-accent);
 
                 .with-input {
                     display: flex;
@@ -96,7 +94,7 @@ form {
     padding: 0 100px;
     box-sizing: border-box;
     text-align: center;
-    border: 1px solid variables.$grey-5;
+    border: 1px solid var(--iqser-grey-5);
 
     > mat-icon {
         height: 60px;
@@ -106,6 +104,6 @@ form {
     }
 
     .heading-l {
-        color: variables.$grey-7;
+        color: var(--iqser-grey-7);
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss
index c6f74191a..ce8a15efc 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .dossier-state-container {
     justify-content: flex-end;
     width: 100%;
@@ -12,5 +10,5 @@ redaction-small-chip {
 .dossier-state-text {
     font-size: 13px;
     line-height: 16px;
-    color: variables.$grey-1;
+    color: var(--iqser-grey-1);
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
index cba801a89..dad8a5dee 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .wrapper {
     display: flex;
     align-items: center;
@@ -15,5 +13,5 @@
 }
 
 .border {
-    border: 1px solid variables.$grey-7;
+    border: 1px solid var(--iqser-grey-7);
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
index f8dc457ed..fae36a8b2 100644
--- a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 :host {
     display: flex;
 
@@ -22,7 +20,7 @@
         }
 
         &.active {
-            color: variables.$primary;
+            color: var(--iqser-primary);
             font-weight: bold;
         }
     }
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
index cfd073e35..afcada18e 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
@@ -1,9 +1,9 @@
-@use 'variables';
 @use 'common-mixins';
+@use 'variables';
 
 :host {
     border-radius: 8px;
-    border: 1px solid variables.$grey-5;
+    border: 1px solid var(--iqser-grey-5);
     min-height: 100%;
     display: block;
 
@@ -65,23 +65,23 @@ mat-chip {
 }
 
 .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
-    background-color: variables.$grey-6;
-    color: variables.$accent;
+    background-color: var(--iqser-grey-6);
+    color: var(--iqser-accent);
 }
 
 .mat-chip.mat-standard-chip {
-    background-color: variables.$white;
-    color: variables.$accent;
+    background-color: var(--iqser-white);
+    color: var(--iqser-accent);
     margin: 0 0 2px 0;
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: variables.$grey-8;
+        background-color: var(--iqser-grey-8);
     }
 }
 
 .mat-chip.mat-standard-chip::after {
-    background: variables.$grey-8;
+    background: var(--iqser-grey-8);
 }
 
 .mat-standard-chip:focus::after {
@@ -90,5 +90,5 @@ mat-chip {
 
 .disabled {
     pointer-events: none;
-    color: variables.$grey-5;
+    color: var(--iqser-grey-5);
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
index 50f6f089a..2e474e4dd 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
@@ -57,7 +57,7 @@
         }
 
         &:hover:not(.active):not(.filter-disabled) {
-            background-color: variables.$grey-6;
+            background-color: var(--iqser-grey-6);
         }
 
         &.active {
diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss
index c424beb86..03fc6cf21 100644
--- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss
@@ -1,5 +1,3 @@
-@use 'variables';
-
 .container {
     flex-wrap: wrap;
     margin-top: 4px;
@@ -27,8 +25,8 @@
                 width: 16px;
                 height: 16px;
                 border-radius: 50%;
-                background-color: variables.$accent;
-                color: variables.$white;
+                background-color: var(--iqser-accent);
+                color: var(--iqser-white);
                 position: absolute;
                 right: -8px;
                 bottom: -2px;
@@ -48,6 +46,6 @@
 
 .see-less {
     opacity: 1;
-    color: variables.$primary;
+    color: var(--iqser-primary);
     margin-top: 16px;
 }
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
index 58d734dae..c2569c204 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@@ -1,8 +1,8 @@
-@use 'variables';
 @use 'common-mixins';
+@use 'variables';
 
 .red-upload-download-overlay {
-    background: variables.$white;
+    background: var(--iqser-white);
     position: fixed;
     bottom: 20px;
     right: 20px;
@@ -19,14 +19,14 @@
         padding: 16px 14px 16px 16px;
         cursor: pointer;
 
-        color: variables.$accent;
+        color: var(--iqser-accent);
         font-size: 13px;
         font-weight: 600;
         line-height: 16px;
 
         mat-icon {
             height: 13px;
-            color: variables.$accent;
+            color: var(--iqser-accent);
 
             &.collapse-icon {
                 height: 15px;
@@ -34,7 +34,7 @@
         }
 
         &.expanded {
-            border-bottom: 1px solid variables.$separator;
+            border-bottom: 1px solid var(--iqser-separator);
         }
     }
 
@@ -45,14 +45,14 @@
 
         > div:not(:first-child) {
             .dossier-name-wrapper {
-                border-top: 1px solid variables.$separator;
+                border-top: 1px solid var(--iqser-separator);
             }
         }
 
         .dossier-name-wrapper {
             display: flex;
             padding: 4px 16px;
-            background-color: variables.$grey-2;
+            background-color: var(--iqser-grey-2);
 
             > span {
                 @include common-mixins.line-clamp(1);
@@ -63,7 +63,7 @@
             padding: 10px 16px 12px 16px;
             font-size: 11px;
             line-height: 14px;
-            border-top: 1px solid variables.$separator;
+            border-top: 1px solid var(--iqser-separator);
             position: relative;
 
             .upload-download-line {
@@ -95,7 +95,7 @@
 
                 .error-message {
                     margin-top: 2px;
-                    color: variables.$primary;
+                    color: var(--iqser-primary);
                 }
             }
 
@@ -119,7 +119,7 @@
             }
 
             &:not(.error):hover {
-                background-color: variables.$grey-2;
+                background-color: var(--iqser-grey-2);
 
                 .actions {
                     display: flex;
diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss
index 06e080399..e9f484584 100644
--- a/apps/red-ui/src/assets/styles/red-components.scss
+++ b/apps/red-ui/src/assets/styles/red-components.scss
@@ -1,5 +1,5 @@
-@use 'variables';
 @use 'common-mixins';
+@use 'variables';
 
 .NEW {
     stroke: var(--iqser-grey-5);
@@ -13,45 +13,45 @@
 
 .UNDER_REVIEW,
 .REGULAR {
-    stroke: variables.$yellow-1;
-    background-color: variables.$yellow-1;
+    stroke: var(--iqser-yellow-1);
+    background-color: var(--iqser-yellow-1);
 }
 
 .UNDER_APPROVAL {
-    stroke: variables.$blue-4;
-    background-color: variables.$blue-4;
+    stroke: var(--iqser-blue-4);
+    background-color: var(--iqser-blue-4);
 }
 
 .APPROVED,
 .ADMIN {
-    stroke: variables.$blue-3;
-    background-color: variables.$blue-3;
+    stroke: var(--iqser-blue-3);
+    background-color: var(--iqser-blue-3);
 }
 
 .PROCESSING {
-    stroke: variables.$accent;
-    background-color: variables.$accent;
+    stroke: var(--iqser-accent);
+    background-color: var(--iqser-accent);
 }
 
 .OCR_PROCESSING,
 .USER_ADMIN {
-    stroke: variables.$green-2;
-    background-color: variables.$green-2;
+    stroke: var(--iqser-green-2);
+    background-color: var(--iqser-green-2);
 }
 
 .REPROCESS {
-    stroke: variables.$accent;
-    background-color: variables.$accent;
+    stroke: var(--iqser-accent);
+    background-color: var(--iqser-accent);
 }
 
 .FULLREPROCESS {
-    stroke: variables.$accent;
-    background-color: variables.$accent;
+    stroke: var(--iqser-accent);
+    background-color: var(--iqser-accent);
 }
 
 .EXCLUDED {
-    stroke: variables.$pink-1;
-    background-color: variables.$pink-1;
+    stroke: var(--iqser-pink-1);
+    background-color: var(--iqser-pink-1);
 }
 
 .ERROR {
@@ -76,8 +76,8 @@
 
 .MANAGER,
 .MANAGER_ADMIN {
-    stroke: variables.$primary;
-    background-color: variables.$primary;
+    stroke: var(--iqser-primary);
+    background-color: var(--iqser-primary);
 }
 
 .workload-separator {
diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss
index 447ecdc50..4f1a692d1 100644
--- a/apps/red-ui/src/assets/styles/red-editor.scss
+++ b/apps/red-ui/src/assets/styles/red-editor.scss
@@ -60,7 +60,7 @@
     right: 40px;
     border-radius: 8px;
     padding: 16px 32px 16px 16px;
-    background-color: variables.$white;
+    background-color: var(--iqser-white);
     box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     z-index: 5000;
 
diff --git a/libs/common-ui b/libs/common-ui
index 5adbd5342..6a0e22e68 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 5adbd5342fe94e2d1292054e7f0a8c6185b9420e
+Subproject commit 6a0e22e68441a1dbbaaa38cfebed1aa8e8bb91be