Merge branch 'theme'

2022-06-29 19:55:04 +03:00 · 2022-06-29 19:55:04 +03:00 · f12e9a2094
commit f12e9a2094
parent 45dc0f0f11 64b28cfb03
44 changed files with 177 additions and 132 deletions
--- a/src/assets/icons/help-outline.svg
+++ b/src/assets/icons/help-outline.svg
@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
+>
+    <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
            <g id="help-button" transform="translate(1294.000000, 635.000000)">
                <g id="help" transform="translate(114.000000, 10.000000)">
-                    <path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
+                    <path
+                        d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
                </g>
            </g>
        </g>
--- a/src/assets/icons/list.svg
+++ b/src/assets/icons/list.svg
@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
-        <g fill="#283241" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
+        <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
            <g id="list" transform="translate(969.000000, 284.000000)">
                <g id="list-view" transform="translate(10.000000, 10.000000)">
                    <path
--- a/src/assets/icons/sort-asc.svg
+++ b/src/assets/icons/sort-asc.svg
@ -2,9 +2,9 @@
 <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
        <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
-            <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon fill="#28324180" id="Fill-1"
-                     points="1215 330 1218 326 1212 326"
+            <polygon id="Fill-1"
+                     points="1215 338 1218 334 1212 334" style="fill: var(--iqser-primary)"></polygon>
+            <polygon fill="currentColor" id="Fill-1" points="1215 330 1218 326 1212 326"
                     transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
        </g>
    </g>
--- a/src/assets/icons/sort-desc.svg
+++ b/src/assets/icons/sort-desc.svg
@ -2,9 +2,9 @@
 <svg height="14px" version="1.1" viewBox="0 0 6 14" width="6px" xmlns="http://www.w3.org/2000/svg">
    <g fill="none" fill-rule="evenodd" id="Icons" stroke="none" stroke-width="1">
        <g id="Artboard" transform="translate(-1212.000000, -325.000000)">
-            <polygon fill="#28324180" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
-            <polygon fill="currentColor" id="Fill-1"
-                     points="1215 330 1218 326 1212 326"
+            <polygon fill="currentColor" id="Fill-1" points="1215 338 1218 334 1212 334"></polygon>
+            <polygon id="Fill-1" points="1215 330 1218 326 1212 326"
+                     style="fill: var(--iqser-primary)"
                     transform="translate(1215.000000, 328.000000) rotate(-180.000000) translate(-1215.000000, -328.000000) "></polygon>
        </g>
    </g>
--- a/src/assets/styles/_common-mixins.scss
+++ b/src/assets/styles/_common-mixins.scss
@ -21,30 +21,34 @@
 }

@mixin scroll-bar {
-    scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
+    scrollbar-color: var(--iqser-inputs-outline) var(--iqser-alt-background);
    scrollbar-width: thin;

+    ::-webkit-scrollbar-corner {
+        background: var(--iqser-alt-background);
+    }
+
    &::-webkit-scrollbar {
        width: 11px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
-        background: var(--iqser-grey-2);
+        background: var(--iqser-alt-background);
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-inputs-outline);
    }
 }

@mixin inset-shadow {
-    box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover);
+    box-shadow: inset 0 4px 3px -2px var(--iqser-shadow);
 }

@mixin drop-shadow {
-    box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover);
+    box-shadow: 0 1px 6px 0 var(--iqser-shadow);
 }

@mixin clear-btn {
@ -59,9 +63,9 @@

@mixin clear-a {
    text-decoration: none;
-    color: initial;
+    color: var(--iqser-text);

    &:hover {
-        color: initial;
+        color: var(--iqser-text);
    }
 }
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@ -1,11 +1,13 @@
@use 'sass:meta';

-:root {
+body {
    --iqser-primary: lightblue;
    --iqser-primary-rgb: 220, 230, 234;
    --iqser-primary-2: orange;
    --iqser-accent: blue;
    --iqser-accent-rgb: 123, 234, 111;
+    --iqser-background: white;
+    --iqser-text: black;
    --iqser-disabled: #9398a0;
    --iqser-not-disabled-table-item: #f9fafb;
    --iqser-btn-bg-hover: #e2e4e9;
@ -15,18 +17,15 @@
    --iqser-black: black;
    --iqser-light: white;
    --iqser-separator: rgba(226, 228, 233, 0.9);
-    --iqser-quick-filter-border: #d3d5da;
-    --iqser-grey-1: #283241;
-    --iqser-grey-2: #f4f5f7;
-    --iqser-grey-3: #aaacb3;
-    --iqser-grey-4: #e2e4e9;
-    --iqser-grey-5: #d3d5da;
-    --iqser-grey-6: #f0f1f4;
-    --iqser-grey-7: #9398a0;
-    --iqser-grey-8: #f9fafb;
-    --iqser-grey-9: #f5f5f7;
-    --iqser-grey-10: #313d4e;
-    --iqser-grey-11: #ecedf0;
+    --iqser-grey-1: #283241; // ebony clay
+    --iqser-grey-10: #313d4e; // oxford blue - manual only
+    --iqser-grey-7: #9398a0; // manatee
+    --iqser-grey-3: #aaacb3; // aluminium
+    --iqser-grey-5: #d3d5da; // iron
+    --iqser-grey-4: #e2e4e9; // athens gray
+    --iqser-grey-6: #f0f1f4; // athens gray
+    --iqser-grey-2: #f4f5f7; // athens gray
+    --iqser-grey-8: #f9fafb; // athens gray
    --iqser-green-1: #00ff00;
    --iqser-green-2: #5ce594;
    --iqser-orange-1: #ff801a;
@ -44,8 +43,16 @@
    --iqser-helpmode-primary: green;
 }

-@mixin configure($args...) {
-    :root {
+@mixin configureLight($args...) {
+    body.light {
+        @each $name, $value in meta.keywords($args) {
+            --#{$name}: #{$value};
+        }
+    }
+}
+
+@mixin configureDark($args...) {
+    body.dark {
        @each $name, $value in meta.keywords($args) {
            --#{$name}: #{$value};
        }
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@ -8,6 +8,7 @@
    padding: 0 24px;
    border-bottom: 1px solid var(--iqser-separator);
    box-sizing: border-box;
+    background-color: var(--iqser-background);

    > *:not(:last-child) {
        margin-right: 50px;
@ -28,6 +29,7 @@
        letter-spacing: 0;
        line-height: 20px;
        white-space: nowrap;
+        color: var(--iqser-text);
    }

    .menu {
--- a/src/assets/styles/common-breadcrumbs.scss
+++ b/src/assets/styles/common-breadcrumbs.scss
@ -18,7 +18,7 @@
        color: var(--iqser-primary);

        &[aria-expanded='true'] .mat-button-wrapper > span {
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
        }
    }
 }
@ -30,7 +30,7 @@

 .breadcrumb {
    text-decoration: none;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
    font-weight: 600;
    width: fit-content;
    white-space: nowrap;
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@ -21,9 +21,13 @@
            margin: auto;
        }
    }
+}

+.mat-button,
+.mat-icon-button,
+.mat-flat-button {
    &.mat-button-disabled .mat-button-wrapper {
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
        opacity: 0.3;
    }
 }
@ -84,6 +88,7 @@ iqser-circle-button {

        &.help:hover {
            background-color: var(--iqser-helpmode-primary);
+            color: var(--iqser-grey-1);
        }
    }

--- a/src/assets/styles/common-checkbox.scss
+++ b/src/assets/styles/common-checkbox.scss
@ -19,7 +19,7 @@

    .mat-checkbox-label {
        font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);

        display: flex;
        align-items: center;
--- a/src/assets/styles/common-color-picker.scss
+++ b/src/assets/styles/common-color-picker.scss
@ -0,0 +1,7 @@
+.color-picker {
+    background-color: var(--iqser-background) !important;
+
+    input {
+        color: var(--iqser-text) !important;
+    }
+}
--- a/src/assets/styles/common-components.scss
+++ b/src/assets/styles/common-components.scss
@ -23,20 +23,22 @@
    }

    &.gray-dark {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
+        color: var(--iqser-text);
    }

    &.gray-primary {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
        color: var(--iqser-primary);
    }

    &.lightgray-dark {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
+        color: var(--iqser-text);
    }

    &.lightgray-primary {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
        color: var(--iqser-primary);
    }

@ -56,11 +58,12 @@
    }

    &.white-dark {
-        border: 1px solid var(--iqser-grey-4);
+        background-color: var(--iqser-user-avatar-2);
+        color: var(--iqser-accent);
    }

    &.inactive {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-user-avatar-1);
        color: var(--iqser-grey-7);
    }
 }
@ -79,8 +82,7 @@

        mat-icon {
            width: 10px;
-            height: 10px;
-            line-height: 13px;
+            height: 11px;
            margin-right: 6px;
        }

@ -97,6 +99,7 @@

        &.warn {
            background-color: rgba(var(--iqser-yellow-rgb), 0.7);
+            color: var(--iqser-accent);
        }

        &.error {
--- a/src/assets/styles/common-dialogs.scss
+++ b/src/assets/styles/common-dialogs.scss
@ -2,7 +2,8 @@

 .mat-dialog-container {
    display: flex !important;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
+    background-color: var(--iqser-background);
    padding: 0 !important;
    border-radius: 8px !important;
    @include common-mixins.scroll-bar;
--- a/src/assets/styles/common-file-drop.scss
+++ b/src/assets/styles/common-file-drop.scss
@ -9,7 +9,7 @@
    z-index: 1000;
    padding: 12px;
    opacity: 0.7;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
    justify-content: center;
    align-items: center;
    display: flex;
--- a/src/assets/styles/common-full-pages.scss
+++ b/src/assets/styles/common-full-pages.scss
@ -6,7 +6,7 @@

 .full-page-section {
    opacity: 0.7;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
    z-index: 900;
 }

--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
        position: absolute;
        left: 114px;
        bottom: 1px;
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-grey-5);
        height: 34px;
        width: 34px;
-        border-left: 1px solid var(--iqser-quick-filter-border);
+        border-left: 1px solid var(--iqser-inputs-outline);
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        cursor: pointer;
@ -59,7 +59,7 @@ form .iqser-input-group:not(first-of-type) {

    .mat-form-field-label {
        opacity: 0.7 !important;
-        color: var(--iqser-accent) !important;
+        color: var(--iqser-text) !important;
        transform: translateY(-1.34em) !important;
    }

@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) {
        box-sizing: border-box;
        padding-left: 11px;
        padding-right: 11px;
-        border: 1px solid var(--iqser-quick-filter-border);
+        border: 1px solid var(--iqser-inputs-outline);
        font-family: Inter, sans-serif;
        font-size: 13px;
-        background-color: #ffffff;
+        background-color: var(--iqser-background);
+        color: var(--iqser-text);
        border-radius: 8px;
        outline: none;
        margin-top: 3px;
@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) {
        }

        &:focus:not(:disabled):not(.mat-select-disabled) {
-            border-color: var(--iqser-accent);
+            border-color: var(--iqser-text);
        }

        &::placeholder {
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
            opacity: 0.7;
        }

@ -129,8 +130,8 @@ form .iqser-input-group:not(first-of-type) {

        &:disabled,
        &.mat-select-disabled {
-            background-color: var(--iqser-grey-2);
-            color: rgba(var(--iqser-accent-rgb), 0.3);
+            background-color: var(--iqser-alt-background);
+            color: rgba(var(--iqser-text-rgb), 0.3);
        }
    }

@ -143,13 +144,23 @@ form .iqser-input-group:not(first-of-type) {
        max-width: 150px;
    }

-    mat-select {
+    mat-select,
+    .mat-select.mat-select-disabled {
        .mat-select-trigger {
            height: 32px;
        }

+        .mat-select-placeholder {
+            color: rgba(var(--iqser-text-rgb), 0.4);
+        }
+
        .mat-select-value {
            vertical-align: middle;
+            color: var(--iqser-text);
+        }
+
+        .mat-select-arrow {
+            color: rgba(var(--iqser-text-rgb), 0.7);
        }
    }

@ -171,7 +182,7 @@ form .iqser-input-group:not(first-of-type) {
        letter-spacing: 0;
        line-height: 14px;
        margin-bottom: 2px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);

        &.mat-checkbox-layout {
            opacity: 1;
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@ -6,7 +6,8 @@ body {
    padding: 0;
    height: 100vh;
    font-family: 'Inter', sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
+    background-color: var(--iqser-background);
    font-size: 13px;
    line-height: 16px;
    display: flex;
@ -44,7 +45,7 @@ section.settings {
    height: 50px;
    width: 100vw;
    box-sizing: border-box;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
    border-bottom: 1px solid var(--iqser-separator);

    .filters {
@ -121,10 +122,10 @@ section.settings {
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 70px;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
    max-width: 650px;
    height: fit-content;
-    box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
+    @include common-mixins.drop-shadow;
    position: unset;

    .heading-l {
@ -158,9 +159,9 @@ section.settings {
 }

 .right-container {
-    border-left: 1px solid var(--iqser-grey-4);
+    border-left: 1px solid var(--iqser-separator);
    box-sizing: border-box;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
    overflow: hidden;
    transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;

--- a/src/assets/styles/common-loading.scss
+++ b/src/assets/styles/common-loading.scss
@ -6,15 +6,15 @@
@keyframes dots {
    0%,
    20% {
-        color: rgba(40, 50, 65, 0);
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+        color: rgba(var(--iqser-accent-rgb), 0);
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    40% {
        color: #283241;
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    60% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0);
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    80%,
    100% {
--- a/src/assets/styles/common-menu.scss
+++ b/src/assets/styles/common-menu.scss
@ -2,11 +2,12 @@

 .mat-menu-panel {
    border-radius: 8px !important;
-    box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
    max-width: none !important;
    min-width: 180px !important;
    margin-top: 10px;
+    background-color: var(--iqser-popup-background);
    @include common-mixins.scroll-bar;
+    @include common-mixins.drop-shadow;

    .mat-menu-content:not(:empty) {
        padding-top: 8px;
@ -23,7 +24,7 @@

    .mat-menu-item {
        font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
        padding: 0 26px 0 8px;
        margin: 0 8px 2px 8px;
        border-radius: 4px;
@ -32,6 +33,10 @@
        display: flex;
        align-items: center;

+        mat-icon {
+            color: var(--iqser-text);
+        }
+
        .dot {
            right: 8px;
        }
--- a/src/assets/styles/common-select.scss
+++ b/src/assets/styles/common-select.scss
@ -2,20 +2,21 @@

 .mat-select-panel {
    padding: 7px 0 !important;
+    background-color: var(--iqser-background);
    @include common-mixins.scroll-bar;

    .mat-option {
        margin: 1px 8px;
        border-radius: 4px;
+        color: var(--iqser-text);

        &:hover:not(.mat-option-disabled),
        &:focus:not(.mat-option-disabled) {
-            background-color: var(--iqser-grey-6);
+            background-color: var(--iqser-btn-bg);
        }

        &.mat-selected:not(.mat-option-multiple) {
            background-color: rgba(var(--iqser-primary-rgb), 0.2);
-            color: var(--iqser-accent);
        }
    }
 }
--- a/src/assets/styles/common-side-nav.scss
+++ b/src/assets/styles/common-side-nav.scss
@ -5,7 +5,7 @@ iqser-side-nav {
    flex-direction: column;
    min-width: 200px;
    max-width: 200px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
    border-right: 1px solid var(--iqser-separator);
    box-sizing: border-box;
    padding: 8px;
@ -24,7 +24,7 @@ iqser-side-nav {
        cursor: pointer;
        transition: background-color 0.2s;
        font-weight: 500;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
        text-decoration: none;
        display: flex;
        align-items: center;
--- a/src/assets/styles/common-slider.scss
+++ b/src/assets/styles/common-slider.scss
@ -22,7 +22,7 @@
        height: 4px !important;
        margin-top: 1px;
        border-radius: 3px;
-        background-color: var(--iqser-grey-4) !important;
+        background-color: var(--iqser-toggle-bg) !important;
    }

    .mat-slider-focus-ring {
--- a/src/assets/styles/common-styles.scss
+++ b/src/assets/styles/common-styles.scss
@ -29,3 +29,4 @@
@use 'common-file-drop';
@use 'common-side-nav';
@use 'common-radio';
+@use 'common-color-picker';
--- a/src/assets/styles/common-tabs.scss
+++ b/src/assets/styles/common-tabs.scss
@ -16,7 +16,7 @@
    cursor: pointer;

    &:not([disabled]):not(.active):hover {
-        background-color: var(--iqser-grey-6);
+        background-color: var(--iqser-tab-hover);
    }

    &.active {
@ -26,7 +26,7 @@
    }

    &[disabled] {
-        color: rgba(var(--iqser-accent-rgb), 0.3);
+        color: rgba(var(--iqser-text-rgb), 0.3);
        cursor: not-allowed;
    }
 }
--- a/src/assets/styles/common-texts.scss
+++ b/src/assets/styles/common-texts.scss
@ -52,7 +52,7 @@ a {

 pre {
    font-family: Inter, sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
 }

 .heading-xl {
@ -95,7 +95,7 @@ pre {
 }

 .link-action {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
    font-size: 11px;
    line-height: 14px;
    text-decoration: underline;
@ -103,12 +103,12 @@ pre {

    &:hover {
        text-decoration: none;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
    }
 }

 .large-label {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
    font-size: 13px;
    line-height: 16px;
 }
--- a/src/assets/styles/common-toggle-button.scss
+++ b/src/assets/styles/common-toggle-button.scss
@ -6,7 +6,7 @@

    .mat-button-toggle:not(.mat-button-toggle-checked) {
        .mat-button-toggle-button {
-            background: var(--iqser-grey-6);
+            background: var(--iqser-btn-bg);
            color: var(--iqser-grey-7);
        }
    }
--- a/src/assets/styles/common-toggle.scss
+++ b/src/assets/styles/common-toggle.scss
@ -3,7 +3,7 @@
        height: 16px !important;
        width: 30px !important;
        border-radius: 16px !important;
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-toggle-bg);
    }

    .mat-slide-toggle-thumb-container {
@ -17,7 +17,7 @@
        height: 12px !important;
        width: 12px !important;
        box-shadow: none;
-        background-color: var(--iqser-grey-2);
+        background-color: var(--iqser-alt-background);
    }

    .mat-ripple {
@ -27,11 +27,11 @@
    &.mat-primary.mat-checked {
        .mat-slide-toggle-bar {
            background-color: var(--iqser-primary);
-            border: 1px solid var(--iqser-white);
+            border: 1px solid var(--iqser-background);
        }

        .mat-slide-toggle-thumb {
-            background-color: var(--iqser-white);
+            background-color: var(--iqser-background);
        }

        .mat-slide-toggle-thumb-container {
--- a/src/lib/buttons/help-button/help-button.component.html
+++ b/src/lib/buttons/help-button/help-button.component.html
@ -1,14 +1,6 @@
-<iqser-icon-button
-    *ngIf="dialogButton"
-    (action)="activateHelpMode()"
-    icon="iqser:help-outline"
-    type="help"
-    [label]="'help-mode.button-text' | translate"
-></iqser-icon-button>
 <iqser-circle-button
-    *ngIf="!dialogButton"
    (action)="activateHelpMode()"
+    [tooltip]="'help-mode.button-text' | translate"
    icon="iqser:help-outline"
    type="help"
-    [tooltip]="'help-mode.button-text' | translate"
 ></iqser-circle-button>
--- a/src/lib/buttons/help-button/help-button.component.ts
+++ b/src/lib/buttons/help-button/help-button.component.ts
@ -8,7 +8,6 @@ import { HelpModeService } from '@iqser/common-ui';
    styleUrls: ['./help-button.component.scss'],
 })
 export class HelpButtonComponent implements OnInit, OnDestroy {
-    @Input() dialogButton = true;
    @Input() helpButtonKey?: string;

    constructor(private readonly _helpModeService: HelpModeService) {}
@ -27,6 +26,6 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
            window.open(url, '_blank');
            return;
        }
-        this._helpModeService.activateHelpMode(this.dialogButton);
+        this._helpModeService.activateHelpMode();
    }
 }
--- a/src/lib/filtering/popup-filter/popup-filter.component.scss
+++ b/src/lib/filtering/popup-filter/popup-filter.component.scss
@ -28,7 +28,7 @@
 }

 .filter-options {
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
    padding-bottom: 8px;
 }

--- a/src/lib/filtering/quick-filters/quick-filters.component.scss
+++ b/src/lib/filtering/quick-filters/quick-filters.component.scss
@ -6,7 +6,7 @@

 .quick-filter {
    box-sizing: border-box;
-    border: 1px solid var(--iqser-quick-filter-border);
+    border: 1px solid var(--iqser-inputs-outline);
    border-radius: 17px;
    background-color: var(--iqser-btn-bg);
    padding: 0 14px;
@ -17,11 +17,11 @@
    transition: background-color 0.2s;

    &:hover {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
    }

    &.active {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
        font-weight: 600;
        border: none;
    }
--- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
+++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
@ -1,5 +1,5 @@
 section {
-    background: var(--iqser-grey-11);
+    background: var(--iqser-btn-bg-hover);
    align-items: center;

    .content {
--- a/src/lib/help-mode/help-mode/help-mode.component.scss
+++ b/src/lib/help-mode/help-mode/help-mode.component.scss
@ -23,10 +23,11 @@
        justify-content: space-between;
        align-items: center;
        pointer-events: visiblePainted;
+        color: var(--iqser-grey-1);

        a {
-            color: black;
            text-decoration: underline;
+            color: var(--iqser-grey-1);
        }

        .close {
--- a/src/lib/inputs/details-radio/details-radio.component.scss
+++ b/src/lib/inputs/details-radio/details-radio.component.scss
@ -5,7 +5,7 @@ label {
 .option {
    padding: 16px;
    border-radius: 8px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-alt-background);

    &.active {
        background-color: rgba(var(--iqser-primary-rgb), 0.1);
--- a/src/lib/inputs/round-checkbox/round-checkbox.component.scss
+++ b/src/lib/inputs/round-checkbox/round-checkbox.component.scss
@ -9,8 +9,8 @@
    border-radius: 50%;

    &.inactive {
-        border: 1px solid #d3d5da;
-        background-color: var(--iqser-white);
+        border: 1px solid var(--iqser-inputs-outline);
+        background-color: var(--iqser-background);
    }

    .mat-icon {
--- a/src/lib/listing/scroll-button/scroll-button.component.scss
+++ b/src/lib/listing/scroll-button/scroll-button.component.scss
@ -1,12 +1,14 @@
+@use '../../../assets/styles/common-mixins' as mixins;
+
 .scroll-button {
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-popup-background);
    position: absolute;
    right: 0;
    height: 40px;
    width: 44px;
    border: none;
    border-radius: 8px 0 0 8px;
-    box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25);
+    @include mixins.drop-shadow;

    &.bottom {
        bottom: 30px;
--- a/src/lib/listing/table-column-name/table-column-name.component.scss
+++ b/src/lib/listing/table-column-name/table-column-name.component.scss
@ -36,7 +36,7 @@

    .sort-arrows-container {
        display: none;
-        color: var(--iqser-primary);
+        color: rgba(var(--iqser-text-rgb), 0.5);
        margin-left: 8px;

        mat-icon {
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@ -3,6 +3,7 @@
 :host cdk-virtual-scroll-viewport {
    height: calc(100vh - 50px - 31px - 111px);
    overflow-y: hidden !important;
+    background-color: var(--iqser-background);
    @include mixins.scroll-bar;

    &.no-data {
--- a/src/lib/listing/table-content/table-item/table-item.component.scss
+++ b/src/lib/listing/table-content/table-item/table-item.component.scss
@ -17,6 +17,7 @@
        border-bottom: 1px solid var(--iqser-separator);
        height: var(--itemSize);
        padding: 0 10px;
+        background-color: var(--iqser-background);

        &.center {
            align-items: center;
@ -68,7 +69,7 @@
        padding-left: 100px;
        padding-right: 21px;
        z-index: 1;
-        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
+        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-side-nav) 35%);

        mat-icon {
            width: 14px;
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@ -16,7 +16,7 @@
        display: flex;
        flex-direction: column;
        flex: 1;
-        background-color: var(--iqser-grey-2);
+        background-color: var(--iqser-alt-background);
        border-radius: 6px;
        padding-top: 18px;
        position: relative;
@ -51,8 +51,8 @@
                    -45deg,
                    var(--iqser-separator),
                    var(--iqser-separator) 1px,
-                    var(--iqser-white) 1px,
-                    var(--iqser-white) 8px
+                    var(--iqser-background) 1px,
+                    var(--iqser-background) 8px
                );

                > .heading,
@ -76,8 +76,8 @@
 }

 .item {
-    background-color: var(--iqser-white);
-    border: 2px solid var(--iqser-white);
+    background-color: var(--iqser-background);
+    border: 2px solid var(--iqser-background);

    &:last-child {
        margin-bottom: 8px;
@ -99,7 +99,7 @@
 }

 .add-btn {
-    background-color: var(--iqser-grey-6);
+    background-color: var(--iqser-btn-bg);
    padding: 10px;
    text-align: center;
    cursor: pointer;
@ -110,7 +110,7 @@
    }

    &:hover {
-        background-color: var(--iqser-grey-4);
+        background-color: var(--iqser-btn-bg-hover);
    }
 }

--- a/src/lib/misc/progress-bar/progress-bar.component.scss
+++ b/src/lib/misc/progress-bar/progress-bar.component.scss
@ -3,11 +3,11 @@
 }

 .wrapper {
-    background-color: var(--iqser-grey-6);
+    background-color: var(--iqser-btn-bg);

    .indicator {
        width: calc(100% / var(--total) * var(--count));
-        background-color: var(--iqser-grey-7);
+        background-color: var(--iqser-loading-progress);
    }
 }

@ -28,5 +28,5 @@
 }

 .active .indicator {
-    background-color: rgba(var(--iqser-primary-rgb), 0.4);
+    background-color: rgba(var(--iqser-primary-rgb), 0.7);
 }
--- a/src/lib/upload-file/drag-drop-file-upload.directive.ts
+++ b/src/lib/upload-file/drag-drop-file-upload.directive.ts
@ -1,21 +1,18 @@
-import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
-
-const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd';
-const DEFAULT_BACKGROUND_COLOR = '#f4f5f7';
+import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';

@Directive({
    selector: '[iqserDragDropFileUpload]',
 })
 export class DragDropFileUploadDirective {
    @Output() readonly fileDropped = new EventEmitter();
-    @HostBinding('style.background-color') private _background = DEFAULT_BACKGROUND_COLOR;
+    @HostBinding('class.drag-over') private _dragOver = false;

    @HostListener('dragover', ['$event'])
    onDragOver(event: DragEvent) {
        event.preventDefault();
        event.stopPropagation();
        if (event.dataTransfer?.types.includes('Files')) {
-            this._background = DRAG_OVER_BACKGROUND_COLOR;
+            this._dragOver = true;
        }
    }

@ -23,7 +20,7 @@ export class DragDropFileUploadDirective {
    onDragLeave(event: DragEvent) {
        event.preventDefault();
        event.stopPropagation();
-        this._background = DEFAULT_BACKGROUND_COLOR;
+        this._dragOver = false;
    }

    @HostListener('drop', ['$event'])
@ -31,7 +28,7 @@ export class DragDropFileUploadDirective {
        event.preventDefault();
        event.stopPropagation();
        if (event?.dataTransfer?.types.includes('Files')) {
-            this._background = DEFAULT_BACKGROUND_COLOR;
+            this._dragOver = false;
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                this.fileDropped.emit({ target: { files } });
--- a/src/lib/upload-file/upload-file.component.scss
+++ b/src/lib/upload-file/upload-file.component.scss
@ -1,12 +1,14 @@
-@import '../../assets/styles/common-variables';
-
 .upload-area,
 .file-area {
    display: flex;
    align-items: center;
    border-radius: 8px;
    width: 100%;
-    background: var(--iqser-grey-2);
+    background: var(--iqser-alt-background);
+
+    &.drag-over {
+        background-color: var(--iqser-file-drop-drag-over);
+    }
 }

 .upload-area {
--- a/test.json
+++ b/test.json