diff --git a/webapp/apps/gateway-ui/package.json b/webapp/apps/gateway-ui/package.json
index 0a3fd82f7..e307cdda4 100644
--- a/webapp/apps/gateway-ui/package.json
+++ b/webapp/apps/gateway-ui/package.json
@@ -29,7 +29,7 @@
"@devolutions/icons": "^5.0.10",
"@devolutions/iron-remote-desktop": "^0.11.0",
"@devolutions/iron-remote-desktop-rdp": "^0.7.0",
- "@devolutions/iron-remote-desktop-vnc": "^0.7.1",
+ "@devolutions/iron-remote-desktop-vnc": "0.7.0",
"@devolutions/terminal-shared": "^1.4.1",
"@devolutions/web-ssh-gui": "^0.7.0",
"@devolutions/web-telnet-gui": "^0.4.4",
diff --git a/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_dark-theme.scss b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_dark-theme.scss
new file mode 100644
index 000000000..5a305d190
--- /dev/null
+++ b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_dark-theme.scss
@@ -0,0 +1,611 @@
+:root.dark-theme,
+[data-theme='dark'],
+.force-dark-theme {
+ --base-accent-rgb: 58, 163, 255; // #3aa3ff
+ --base-color-rgb: var(--base-white-rgb);
+ --base-color-inverted-rgb: var(--base-black-rgb);
+ --btn-icon-color: rgba(var(--base-color-rgb), 0.8);
+ --base-border-rgb: var(--base-color-rgb);
+ --dvls-logo: 237, 31, 36;
+
+ --title-color: rgba(var(--base-color-rgb), 0.8);
+
+ --neutral-inverted-color: #000;
+
+ --entry-status-background-opacity: 0.8;
+
+ --status-info-banner-color-rgb: 58, 163, 255;
+ --status-warning-banner-color-rgb: 251, 209, 0;
+ --status-success-banner-color-rgb: 106, 185, 52;
+ --status-disabled-banner-color-rgb: 224, 224, 224;
+ --status-error-banner-color-rgb: 242, 0, 0;
+ --status-banner-background-opacity: 0.4;
+ --status-banner-warning-color-rgb: 240, 201, 9;
+ --status-banner-background-opacity-lighter: 0.1;
+ --status-warning-bg-color: rgba(
+ var(--status-banner-warning-color-rgb),
+ var(--status-banner-background-opacity-lighter)
+ );
+
+ --base-background-color: 26, 26, 26;
+
+ // Borders
+ --border-secondary-color: #ffffff1f;
+ --background-secondary-color: #252525;
+ --border-color-primary: rgba(var(--base-color-rgb), 0.3);
+ --border-color-secondary: rgba(var(--base-color-rgb), 0.12);
+ --border-color-tertiary: rgba(var(--base-color-rgb), 0.7);
+ --border-base-100: rgba(51, 51, 51, 1);
+ --border-radius: 4px;
+
+ // loader
+ --loader-background-color: rgba(var(--base-background-color), 1);
+ --loader-logo-color: rgba(var(--dvls-logo), 0.4);
+ --loader-spinner-color: rgba(var(--dvls-logo));
+
+ //Dialog
+ --iframe-dialog-color: #0d111e;
+ --dialog-header-background-color: #000;
+ --dialog-footer-background-color: #292929;
+ --dialog-header-text-color: var(--title-color);
+ --dialog-header-icon-text-color: var(--title-color);
+ --dialog-menu-background-color: #000;
+ --dialog-menu-text-color: #999;
+ --dialog-menu-highlight-text-color: #e0e0e0;
+ --dialog-menu-highlight-background-color: #1f1f1f;
+ --dialog-menu-highlight-border-color: #707070;
+ --dialog-content-background-color: #000;
+ --dialog-border-color: rgba(58, 163, 255, 0.1);
+ --dialog-menu-border-color: #292929;
+ --dialog-footer-default-button-background-color: #1f85eb;
+ --dialog-footer-delete-button-background-color: #ff1a1a;
+ --dialog-footer-default-button-text-color: #fff;
+ --dialog-footer-default-button-background-hover-color: #0068c3;
+ --dialog-footer-delete-button-background-hover-color: #de0000;
+ --dialog-footer-cancel-button-text-color: #a9a9a9;
+ --dialog-footer-disabled-button-background-hover-color: #bdbdbd;
+ --dialog-entry-background-color: #1f1f1f;
+ --dialog-header-confirmation-background-color: #1e1e1e;
+
+ /* Container */
+ --entry-container-bg-color: #222;
+ --entry-container-overview-bg-color: #1f1f1f;
+ --layout-container-bg-color: #292929;
+ --layout-container-admin-border-color: #292929;
+ --layout-container-admin-shadow-color: #292929;
+
+ /* Subset box */
+ --subset-box-bg-color: rgba(31, 31, 31, 0.6);
+ --add-subset-button-border-color: rgba(255, 255, 255, 0.6);
+ --add-subset-button-text-color: #fff;
+ --add-subset-button-small-text-color: rgba(255, 255, 255, 0.4);
+
+ //Main Toolbar
+ --main-toolbar-text-color: #fff;
+ --main-toolbar-background-color: #111;
+ --main-toolbar-icon-text-color: #5aa2f8;
+ --main-toolbar-icon-color: #e0e0e0;
+ --main-toolbar-border-color: #333;
+ --vault-selector-color: #a9a9a9;
+ --vault-selector-icon-color: rgba(255, 255, 255, 0.8);
+ --repo-selector-background: #1f1f1f;
+ --header-element-hover-background: #292929;
+ --repo-selector-search-background: #323232;
+ --header-element-active-background: #292929;
+ --repo-element-hover-background: #323232;
+ --repo-avatar-active-background: #333;
+ --header-border-bottom-color: #292929;
+
+ //Admin section
+ --breadcrumb-text-color: #3aa3ff;
+ --admin-background-section-color: #292929;
+ --admin-section-icon-bg-color: #1f1f1f;
+ --admin-section-bg-hover-color: #3d3d3d;
+ --admin-section-bg-active-color: #525252;
+ --admin-text-icon-color: #3aa3ff;
+ --admin-text-icon-hover-color: #1f1f1f;
+ --admin-section-separator-color: #1f1f1f;
+ --admin-section-header-separator-color: #1f1f1f;
+ --admin-section-item-label-color: #999;
+ --admin-section-item-label-hover-color: #e0e0e0;
+
+ //Main Breadcrumb
+ --main-breadcrumb-text-color: #a9a9a9;
+ --main-breadcrumb-background-color: #1f1f1f;
+ --main-breadcrumb-arrow-icon-color: #3aa3ff;
+ --main-breadcrumb-folder-icon-color: #3aa3ff;
+
+ //Treenode Section
+ --tree-item-highlight-color: #143857;
+ --tree-item-focus-color: #323232;
+ --main-tree-item-highlight-color: #143857;
+ --tree-item-hover-color: #323232;
+ --tree-item-context-menu-hover-color: #1f1f1f;
+ --tree-selector-text-highlight-color: #fff;
+
+ //Labels
+ --label-input-color: #707070;
+ --label-default-color: #d2d2d2;
+ --label-title-color: #3aa3ff;
+ --label-link-color: #3aa3ff;
+ --label-title-input: #a9a9a9;
+ --label-subtitle-color: #999999;
+ --label-version-color: #525252;
+ --label-treenode-color: #999;
+ --label-disabled-color: #525252;
+ --label-readonly-color: #898996;
+
+ //Icons
+ --icon-default-color: #3aa3ff;
+ --icon-hover-color: #a9a9a9;
+ --icon-color: #1f85eb;
+ --search-filter-color: #333;
+
+ //Hotkeys
+ --hotkeys-border-color: #3c3c3c;
+ --hotkeys-text-color: #a6a6a6;
+ --hotkeys-background-color: #212121;
+
+ //Inputs
+ --input-border-color: var(--border-200);
+ --input-background-color: var(--bg-input);
+ --input-shadow: none;
+ --input-hover-border-color: var(--accent-brand-400);
+ --input-text-color: var(--text-400);
+ --input-placeholder-color: rgba(255, 255, 255, 0.4);
+
+ --input-disabled-background-color: #292929;
+
+ // Multiselect
+ --multiselect-background-color: var(--bg-input);
+ --multiselect-border-color: var(--border-200);
+ --multiselect-hover-border-color: var(--accent-brand-400);
+ --multiselect-text-color: var(--text-400);
+
+ --input-icon-color: var(--grey-600);
+
+ --input-accent-color: rgb(var(--base-accent-rgb));
+ --input-label-color: var(--label-default-color);
+ --input-selected-indicator-color: rgb(var(--base-white-rgb));
+
+ --input-disabled-border-color: rgba(var(--base-border-rgb), 0.1);
+ --input-disabled-label-color: rgba(var(--base-border-rgb), 0.3);
+ --input-disabled-selected-indicator-color: rgba(var(--base-border-rgb), 0.3);
+
+ --input-radio-checkbox-border-color: rgba(
+ var(--base-border-rgb),
+ 0.3
+ ); // Needs to avoid conflict with existing --input-border-color
+ --input-radio-checkbox-disabled-background-color: rgba(
+ var(--base-border-rgb),
+ 0.03
+ ); // Needs to avoid conflict with existing --input-disabled-background-color
+ --input-radio-checkbox-box-shadow: none;
+
+ --dropdown-item-separator-color: #d2d2d2;
+ --dropdown-item-highlight-background-color: #163958;
+ --dropdown-item-highlight-text-color: #3aa3ff;
+ --dropdown-item-background-color: #141414;
+ --dropdown-item-hover-background-color: #1f1f1f;
+ --dropdown-background-color: var(--p-select-background);
+ --inputSwitch-active-background-color: #5aa2f8;
+ --inputSwitch-inactive-background-color: #666666;
+ --password-strenght-border-color: #333;
+ --drag-drop-item-background-color: #444;
+ --steps-border-color: #333;
+ --search-border-color: #333;
+ --search-border-active-color: #3aa3ff;
+ --search-border-shadow-color: transparent;
+ --search-button-clear-color: #000;
+ --search-input-color: #424242;
+ --cancel-button-footer-border: rgba(58, 163, 255, 0.25);
+ --cancel-button-footer-border-hover: rgba(0, 104, 195, 0.12);
+ //Menus
+ --main-menu-background-color: #101112;
+ --main-menu-item-message-border-color: #333333;
+ --main-menu-item-hover-background-color: #ffffff14;
+ --main-menu-item-active-background-color: rgba(255, 255, 255, 0.05);
+ --main-menu-item-active-color: #fff;
+ --main-menu-text-color: #e0e0e0;
+ --menu-card-background-color: #000;
+ --menu-card-pam-background-color: #1f1f1f;
+ --menu-pam-card-background-color: #1f1f1f;
+ --menu-pam-card-spinner-background-color: rgba(90, 90, 90, 0.75);
+ --menu-pam-card-border-color: #333;
+ --menu-selected-card-background-color: #444;
+ --menu-pam-card-hover-color: rgb(50, 50, 50);
+ --menu-pam-empty-text-color: var(--label-subtitle-color);
+ --main-menu-border-color: #141414;
+ --card-txt-color: #999;
+
+ //Panel Menu
+ --panel-menu-separator-color: #d2d2d2;
+ --panel-menu-highlight-background-color: #163958;
+ --panel-menu-highlight-text-color: #3aa3ff;
+ --panel-menu-background-color: #141414;
+ --panel-menu-hover-background-color: #1f1f1f;
+
+ //Connection View
+ --connection-sidebar-background-color: #212121;
+ --connection-view-default-background-color: rgb(var(--base-background-color));
+ --connection-view-wrapper-background-color: var(--connection-sidebar-background-color);
+ --connection-view-border-color: #333;
+ --connection-view-title-color: #a9a9a9;
+ --connection-view-link-color: #5aa2f8;
+ --connection-view-text-color: #f8f8f8;
+ --connection-view-quote-color: #444;
+ --dashboard-background-color: #222;
+
+ --dashboard-data-subtitle-color: #999;
+ --dashboard-data-text-color: #e0e0e0;
+
+ //Table
+ --table-column-title-color: #5aa2f8;
+ --table-column-title-background-hover-color: #1a1a1a;
+ --table-column-title-background-color: transparent;
+ --table-row-text-color: #a9a9a9;
+ --table-row-background-color: #1a1a1a;
+ --table-child-row-background-color: #131313;
+ --table-border-color: #333;
+ --table-title-border-color: #5aa2f8;
+ --table-link-color: #5aa2f8;
+ --table-granted-bg-color: #3f5244;
+ --table-header-color: #000;
+
+ //Overview
+ --overview-background-color: rgb(var(--base-background-color));
+ --overview-border-color: #898989;
+
+ //Account divider
+ --divider-border-color: #999999;
+
+ //Messages
+ --message-error-icon-color: #cb4b56;
+ --message-error-color: #f20000;
+ --message-error-background-color: #ffa8a8;
+ --message-info-color: #5aa2f8;
+ --message-info-background-color: #163958;
+ --message-warn-color: #bd8c09;
+ --message-warn-background-color: #f3db9b;
+ --message-success-color: #196b0f;
+ --message-success-background-color: #b7d8b7;
+ --message-font-color: #ffffff;
+ --message-font-opacity: 85%;
+ --message-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
+ --message-high-priority-background-color: #410000;
+ --message-high-priority-color: #ff1a1a;
+
+ --info-message-background-color: #00539c;
+ --success-message-background-color: #2d4e16;
+ --warning-message-background-color: #725f00;
+ --error-message-background-color: #7c0000;
+
+ //Scheduling report
+ --scheduling-datetime-color: #444;
+ --scheduling-title-color: #666;
+ --scheduling-border-color: #333;
+ --scheduling-today-color: #163958;
+ --scheduling-today-text-color: #fff;
+ --scheduling-hover-item-background-color: #163958;
+
+ //Buttons
+ --button-action-background-hover-color: #00539c;
+ --button-action-text-hover-color: #3aa3ff;
+ --button-action-text-active-color: #00539c;
+ --button-action-text-color: #3aa3ff;
+ --button-action-secondary-icon-color: #999999;
+ --button-action-secondary-hover-bg-color: #3d3d3d;
+ --button-action-secondary-pressed-bg-color: #333333;
+ --button-action-secondary-background: #f0f6fb;
+ --button-action-icon-delete-hover-color: #f20000;
+ --button-action-add-icon-color: #6ab934;
+ --button-action-add-hover-bg-color: #3e6d1f;
+ --button-action-add-pressed-bg-color: #2d4e16;
+ --button-action-icon-color: var(--btn-icon-color);
+ --button-action-hover-bg-color: #00539c;
+ --button-action-pressed-bg-color: #003e75;
+ --button-add-shadow-color: #444;
+ --button-floating-background-hover: #508b27;
+ --button-divider-color: #575757;
+
+ --button-primary-fill: #3e9cef;
+ --button-primary-hover-fill: #298dff;
+ --button-primary-pressed-fill: #1a79ff;
+
+ --button-primary-danger-text: rgb(var(--base-white-rgb));
+ --button-primary-danger-border: rgba(var(--base-white-rgb), 0.5);
+ --button-primary-danger-fill: var(--accent-danger-400);
+ --button-primary-danger-hover-fill: #d40000;
+
+ --button-secondary-fill: var(--bg-brand-200);
+ --button-secondary-border: var(--border-brand-400);
+ --button-secondary-text: var(--text-brand);
+
+ --button-secondary-hover-fill: #000;
+ --button-secondary-hover-border: var(--accent-brand-300);
+ --button-secondary-hover-text: var(--text-brand);
+
+ --button-secondary-pressed-fill: var(--accent-brand-200);
+ --button-secondary-pressed-border: var(--accent-brand-300);
+ --button-secondary-pressed-text: var(--accent-brand-600);
+
+ --button-secondary-danger-text: #ff1a1a;
+ --button-secondary-danger-border: rgba(255, 26, 26, 0.25);
+ --button-secondary-danger-fill: #0d0b0b;
+ --button-secondary-danger-hover-fill: #260000;
+
+ --button-tertiary-fill: rgba(0, 0, 0, 0);
+ --button-tertiary-border: var(--border-200);
+ --button-tertiary-text: var(--text-brand);
+
+ --button-tertiary-hover-fill: #141f28;
+ --button-tertiary-hover-border: var(--accent-brand-200);
+
+ --button-tertiary-pressed-fill: #000000;
+ --button-tertiary-pressed-border: var(--accent-brand-200);
+
+ --button-tertiary-danger-text: #ff1a1a;
+ --button-tertiary-danger-border: rgba(255, 26, 26, 0.25);
+ --button-tertiary-danger-fill: rgba(0, 0, 0, 0);
+
+ --button-tertiary-danger-hover-fill: #0b0c0d;
+ --button-tertiary-danger-hover-border: rgba(240, 122, 122, 0.25);
+
+ --button-disabled-fill: rgba(0, 0, 0, 0.08);
+ --button-disabled-border: rgba(0, 0, 0, 0.1);
+ --button-disabled-text: rgba(0, 0, 0, 0.4);
+
+ --border-search: #333;
+ --secondary-action-bg: #151a1e;
+ --fill-base-200: #0a1722;
+ --fill-brand-100: #011221;
+ --fill-brand-200: #0a1722;
+ --fill-brand-300: rgba(33, 55, 79, 1);
+ --fill-200: #1a1a1a;
+ --fill-300: rgba(28, 34, 46, 1);
+ --fill-500: #383838;
+ --box-fill: #252525;
+
+ //Overlay Panel
+ --overlay-panel-background-color: #333;
+ --overlay-panel-text-color: #a9a9a9;
+ --overlay-panel-splitter-color: #525252;
+
+ //SidePanel
+ --side-panel-text-color: #0068c3;
+ --side-panel-background-color: #212121;
+ --side-panel-border-color: #616161;
+ --side-panel-title-color: #e0e0e0;
+
+ //Messages
+ --dataview-text-color: #999;
+ --dataview-border-color: #616161;
+ --dataview-bg-hover-color: #333333;
+ --secondary-text-color: #ffffff;
+ --lighter-default-text-color: #797979;
+ --unread-message-border-color: #0e7ddf;
+ --unread-message-hover-border-color: #707070;
+ --unread-message-background-color: #214266;
+
+ //Scrollbar
+ --scrollbar-color: rgba(255, 255, 255, 0.3);
+ --scrollbar-background-color: transparent;
+
+ //Fieldset
+ --fieldset-title-color: #5aa2f8;
+ --fieldset-sub-title-color: rgba(255, 255, 255, 0.6);
+ --fieldset-border-color: #163958;
+
+ //Administration Dashboard
+ --admin-item-border-color: transparent;
+ --admin-item-icon-color: #a9a9a9;
+ --admin-item-text-color: #a9a9a9;
+ --admin-item-shadow-color: #333;
+
+ //Drag-and-drop
+ --droparea-border-color: #00539c;
+ --droparea-border-color-hover: #3aa3ff;
+ --droparea-border-color-uploaded: #333333;
+ --droparea-background-color: #0f2a42;
+ --droparea-delete-icon-color: #707070;
+ --droparea-delete-icon-color-hover: #3aa3ff;
+ --droparea-filesize-color: #707070;
+ --droparea-filename-color: #ffffff;
+ --droparea-upload-icon-color: #2073b3;
+ --droparea-upload-icon-color-hover: #3aa3ff;
+ --droparea-upload-font-color: #e0e0e0;
+ --droparea-upload-font-color-hover: #ffffff;
+ --droparea-background-color-uploaded: #1f1f1f;
+ --droparea-dragenter-background-color: #333333;
+
+ //Chips
+ --chips-token-background-color: #3d3d3d;
+ --chips-token-font-color: #ffffff;
+
+ //Autocomplete
+ --autocomplete-item-hover-color: #1f1f1f;
+ --autocomplete-item-font-color: #ffffff;
+ --autocomplete-panel-background-color: #000000;
+ --autocomplete-panel-box-shadow: none;
+
+ // Security - Severity Level
+ --severity-level-critical-color: #ffeeee;
+ --severity-level-critical-bg: #8d0000;
+ --severity-level-high-color: #c80000;
+ --severity-level-high-bg: #2a1212;
+ --severity-level-medium-color: #e2a300;
+ --severity-level-medium-bg: #2d2000;
+ --severity-level-low-color: #4bb14b;
+ --severity-level-low-bg: #0d260d;
+ --security-box-bg: #1c1c1c;
+ --security-box-title: #fff;
+ --security-box-action-bg: #0c2944;
+ --security-box-action-color: #88c8ff;
+ --security-box-border-color: rgba(255, 255, 255, 0.1);
+ --security-chart-progress: #00cf00;
+ --security-chart-remaining: #dbdbdb;
+
+ // Checkout
+ --approver-bg-color: rgba(255, 255, 255, 0.04);
+
+ // User tags
+ --user-tags-background-color-external: rgba(161, 184, 7, 0.15);
+ --user-tags-text-color-external: rgba(161, 184, 7, 1);
+ --user-tags-background-color-privileged: rgba(238, 187, 7, 0.15);
+ --user-tags-text-color-privileged: rgba(188, 148, 6, 1);
+ --user-tags-background-color-contractor: rgba(58, 163, 255, 0.15);
+ --user-tags-text-color-contractor: rgba(58, 163, 255, 1);
+
+ //Purple
+ --accent-purple-100: rgba(62,0,97,1);
+ --accent-purple-200: rgba(108,0,168,1);
+ --accent-purple-300: rgba(153,0,238,1);
+ --accent-purple-400: rgba(217,147,255,1); // primary
+ --accent-purple-500: rgba(230,184,255,1);
+ --accent-purple-600: rgba(245,224,255,1);
+
+ //Blue
+ --blue-primary: #3aa3ff;
+ --blue-900: #0087fe;
+ --blue-800: #0068c3;
+ --blue-700: #00539c;
+ --blue-500: #003e75;
+ --blue-300: #00294d;
+
+ --blue-primary-text-color: black;
+ --blue-900-text-color: white;
+ --blue-800-text-color: white;
+ --blue-700-text-color: white;
+ --blue-500-text-color: white;
+ --blue-300-text-color: white;
+
+ //Red
+ --red-primary: #f20000;
+ --red-900: #cb0000;
+ --red-800: #a30000;
+ --red-700: #7c0000;
+ --red-500: #550000;
+ --red-300: #410000;
+ --red-400: #f04438;
+
+ --red-primary-text-color: white;
+ --red-900-text-color: white;
+ --red-800-text-color: white;
+ --red-700-text-color: white;
+ --red-500-text-color: white;
+ --red-300-text-color: white;
+
+ //Green
+ --green-primary: #6ab934;
+ --green-900: #589b2c;
+ --green-800: #9ed977;
+ --green-700: #2d4e16;
+ --green-500: #1b300d;
+ --green-300: #012209;
+
+ --green-primary-text-color: black;
+ --green-900-text-color: white;
+ --green-800-text-color: white;
+ --green-700-text-color: white;
+ --green-500-text-color: white;
+ --green-300-text-color: white;
+
+ //Yellow
+ --yellow-primary: #fbd100;
+ --yellow-900: #d4b100;
+ --yellow-800: #998000;
+ --yellow-700: #725f00;
+ --yellow-500: #4b3e00;
+ --yellow-300: #372e00;
+
+ --yellow-primary-text-color: black;
+ --yellow-900-text-color: black;
+ --yellow-800-text-color: white;
+ --yellow-700-text-color: white;
+ --yellow-500-text-color: white;
+ --yellow-300-text-color: white;
+
+ //Orange
+ --orange-primary: #eb7800;
+ --orange-900: #c46400;
+ --orange-800: #9d5000;
+ --orange-700: #763c00;
+ --orange-500: #4e2800;
+ --orange-300: #3b1e00;
+
+ --orange-primary-text-color: black;
+ --orange-900-text-color: white;
+ --orange-800-text-color: white;
+ --orange-700-text-color: white;
+ --orange-500-text-color: white;
+ --orange-300-text-color: white;
+
+ //Grey
+ --grey-primary: #e0e0e0;
+ --grey-900: #b8b8b8;
+ --grey-800: #999999;
+ --grey-700: #707070;
+ --grey-600: #525252;
+ --grey-500: #3d3d3d;
+ --grey-400: #333333;
+ --grey-300: #292929;
+ --grey-200: #1f1f1f;
+ --grey-100: #141414;
+ --grey-0: #000000;
+
+ --grey-primary-text-color: black;
+ --grey-900-text-color: black;
+ --grey-800-text-color: black;
+ --grey-700-text-color: white;
+ --grey-600-text-color: white;
+ --grey-500-text-color: white;
+ --grey-400-text-color: white;
+ --grey-300-text-color: white;
+ --grey-200-text-color: white;
+ --grey-100-text-color: white;
+ --grey-0-text-color: white;
+
+ //Text
+ --text-color-primary: rgba(255, 255, 255, 0.8);
+ --text-color-secondary: rgba(255, 255, 255, 0.6);
+ --text-color-tertiary: rgba(255, 255, 255, 0.4);
+
+ --text-color-accent: rgba(255, 255, 255, 1);
+
+ //Log event level
+ --log-event-level-error: rgba(255, 26, 26, 1);
+ --log-event-level-warning: rgba(255, 130, 0, 1);
+ --log-event-level-information: rgba(0, 104, 195, 1);
+
+ //swagger
+ --swagger-caret-color-filter: invert(100%) brightness(100%);
+
+ //input switch
+ --input-switch-default-bg-color: #525252;
+ --input-switch-active-bg-color: #3aa3ff;
+ --input-switch-active-hover-bg-color: #00539c;
+
+ input:-webkit-autofill {
+ color-scheme: dark;
+ }
+ --dropdown-border: #4d4d4d;
+ --dropdown-fill: #000000;
+
+ // Entry icon colors for connection type selector (matching _variables.scss)
+ --entry-icons-session-color: #1f85eb;
+ --entry-icons-session-color-rgb: 31, 133, 235;
+ --entry-icons-information-color: #1f85eb; // Same as session
+ --entry-icons-information-color-rgb: 31, 133, 235;
+ --entry-icons-contact-color: #1f85eb; // Same as session
+ --entry-icons-contact-color-rgb: 31, 133, 235;
+ --entry-icons-document-color: #1f85eb; // Same as session
+ --entry-icons-document-color-rgb: 31, 133, 235;
+ --entry-icons-pam-color: #1f85eb; // Same as session
+ --entry-icons-pam-color-rgb: 31, 133, 235;
+ --entry-icons-folder-color: #eab766; // Yellow/gold
+ --entry-icons-folder-color-rgb: 234, 183, 102;
+ --entry-icons-credential-color: #eb7203; // Orange
+ --entry-icons-credential-color-rgb: 235, 114, 3;
+ --entry-icons-vpn-color: #8c644b; // Brown
+ --entry-icons-vpn-color-rgb: 140, 100, 75;
+}
diff --git a/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_light-theme.scss b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_light-theme.scss
new file mode 100644
index 000000000..6f606aa1b
--- /dev/null
+++ b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/theme/_light-theme.scss
@@ -0,0 +1,653 @@
+:root,
+.force-light-theme {
+ --base-black-rgb: 0, 0, 0; // #000
+ --base-accent-rgb: 0, 104, 195; // #0068c3
+ --base-white-rgb: 255, 255, 255; // #fff
+ --base-color-rgb: var(--base-black-rgb);
+ --base-color-inverted-rgb: var(--base-white-rgb);
+ --dvls-logo: 237, 31, 36;
+
+ --title-color: rgba(var(--base-color-rgb), 0.8);
+
+ --neutral-inverted-color: #ffffff;
+
+ --base-border-rgb: var(--base-black-rgb);
+ --base-background-color: var(--base-white-rgb);
+
+ --accent-color: rgb(var(--base-accent-rgb));
+
+ --entry-layout-horizontal-padding: 10px;
+
+ --btn-icon-color: rgba(var(--base-color-rgb), 0.8);
+
+ --entry-status-color: rgba(var(--base-color-rgb), 0.6); // Default
+ --entry-status-background-opacity: 1;
+ --entry-status-by-me-color-rgb: 97, 170, 48;
+ --entry-status-by-others-color-rgb: 255, 26, 26;
+ --entry-status-flag-expired-color-rgb: var(--entry-status-by-others-color-rgb);
+ --entry-status-flag-archived-color-rgb: 139, 69, 19;
+ --entry-status-flag-warning-color-rgb: 0, 104, 195;
+ --entry-status-flag-broken-color-rgb: 245, 208, 0;
+ --entry-status-flag-locked-color-rgb: 255, 130, 0;
+ --entry-status-flag-disabled-color-rgb: 153, 153, 153;
+
+ --status-banner-info-color-rgb: 0, 104, 195;
+ --status-banner-warning-color-rgb: 240, 201, 9;
+ --status-banner-success-color-rgb: 97, 170, 48;
+ --status-banner-disabled-color-rgb: 184, 184, 184;
+ --status-banner-error-color-rgb: 255, 26, 26;
+ --status-banner-background-opacity: 0.25;
+ --status-banner-background-opacity-lighter: 0.1;
+ --status-warning-bg-color: rgba(
+ var(--status-banner-warning-color-rgb),
+ var(--status-banner-background-opacity-lighter)
+ );
+
+ // Borders
+ --border-secondary-color: #0000001f;
+ --background-secondary-color: rgba(var(--base-background-color), 1);
+ --border-color-primary: rgba(var(--base-color-rgb), 0.3);
+ --border-color-secondary: rgba(var(--base-color-rgb), 0.12);
+ --border-color-tertiary: rgba(var(--base-color-rgb), 0.7);
+ --border-base-100: rgba(242, 242, 242, 1);
+ --border-radius: 4px;
+
+ // loader
+ --loader-background-color: rgba(var(--base-background-color), 1);
+ --loader-logo-color: rgba(var(--dvls-logo), 0.4);
+ --loader-spinner-color: rgba(var(--dvls-logo));
+
+ //Dialog
+ --dialog-header-background-color: #fff;
+ --dialog-footer-background-color: #f5f5f5;
+ --dialog-header-text-color: var(--title-color);
+ --dialog-header-icon-text-color: var(--title-color);
+ --dialog-menu-background-color: #fff;
+ --dialog-menu-text-color: #424242;
+ --dialog-menu-highlight-text-color: #424242;
+ --dialog-menu-highlight-background-color: #f5f5f5;
+ --dialog-menu-highlight-border-color: #bdbdbd;
+ --dialog-content-background-color: #fff;
+ --dialog-border-color: rgba(0, 104, 195, 0.1);
+ --dialog-menu-border-color: #f5f5f5;
+ --dialog-footer-default-button-background-color: #0068c3;
+ --dialog-footer-delete-button-background-color: #ff1a1a;
+ --dialog-footer-default-button-text-color: #fff;
+ --dialog-footer-delete-button-background-hover-color: #de0000;
+ --dialog-footer-default-button-background-hover-color: #00539c;
+ --dialog-footer-cancel-button-text-color: #424242;
+ --dialog-footer-disabled-button-background-hover-color: #bdbdbd;
+ --dialog-entry-background-color: #f5f5f5;
+ --dialog-header-confirmation-background-color: #f1f1f1;
+
+ /* Container */
+ --entry-container-bg-color: #f5f5f5;
+ --entry-container-overview-bg-color: #fff;
+ --layout-container-bg-color: #fff;
+ --layout-container-admin-border-color: #fff;
+ --layout-container-admin-shadow-color: #e8e8e8;
+
+ /* Subset box */
+ --subset-box-bg-color: rgba(240, 246, 251, 0.6);
+ --add-subset-button-border-color: #00000012;
+ --add-subset-button-text-color: rgba(0, 0, 0, 0.6);
+ --add-subset-button-small-text-color: rgba(0, 0, 0, 0.4);
+
+ //Main Toolbar
+ --main-toolbar-text-color: #fff;
+ --main-toolbar-background-color: #fff;
+ --main-toolbar-icon-text-color: #0068c3;
+ --main-toolbar-icon-color: #fff;
+ --main-toolbar-border-color: #e8e8e8;
+ --vault-selector-color: #fff;
+ --vault-selector-icon-color: #616161;
+ --repo-selector-background: #f5f5f5;
+ --header-element-hover-background: #00539c;
+ --header-element-active-background: #004f99;
+ --repo-selector-search-background: #fff;
+ --repo-element-hover-background: #f5f5f5;
+ --repo-element-active-background: #f5f5f5;
+ --repo-avatar-active-background: #c8c8c8;
+ --header-border-bottom-color: #bdbdbd;
+
+ //Admin section
+ --breadcrumb-text-color: #424242;
+ --admin-background-section-color: #fff;
+ --admin-section-icon-bg-color: #f5f5f5;
+ --admin-section-bg-hover-color: rgba(58, 163, 255, 0.2);
+ --admin-section-bg-active-color: rgba(58, 163, 255, 0.4);
+ --admin-text-icon-color: #0068c3;
+ --admin-text-icon-hover-color: #fff;
+ --admin-section-separator-color: #e0e0e0;
+ --admin-section-header-separator-color: #eee;
+ --admin-section-item-label-color: #424242;
+ --admin-section-item-label-hover-color: #212121;
+
+ //Main Breadcrumb
+ --main-breadcrumb-text-color: #424242;
+ --main-breadcrumb-background-color: #fff;
+ --main-breadcrumb-arrow-icon-color: #0068c3;
+ --main-breadcrumb-folder-icon-color: #0068c3;
+
+ //Treenode Section
+ --tree-item-highlight-color: #e7f4ff;
+ --tree-item-focus-color: #f5f5f5;
+ --main-tree-item-highlight-color: #e7f4ff;
+ --tree-item-hover-color: #f5f5f5;
+ --tree-item-context-menu-hover-color: #f5f5f5;
+ --tree-selector-text-highlight-color: #000;
+
+ //Labels
+ --label-input-color: #616161;
+ --label-default-color: #424242;
+ --label-title-color: #0068c3;
+ --label-link-color: #0068c3;
+ --label-title-input: #0068c3;
+ --label-subtitle-color: #9e9e9e;
+ --label-version-color: #bdbdbd;
+ --label-treenode-color: #424242;
+ --label-disabled-color: #bdbdbd;
+ --label-readonly-color: #898996;
+
+ //Icons
+ --icon-default-color: #424242;
+ --icon-hover-color: #0068c3;
+ --icon-color: #1f85eb;
+ --search-filter-color: #424242;
+
+ //Hotkeys
+ --hotkeys-border-color: #d7d7d7;
+ --hotkeys-text-color: #424242;
+ --hotkeys-background-color: #f5f5f5;
+
+ //Inputs
+ --input-border-color: var(--border-200);
+ --input-background-color: var(--bg-input);
+ --input-shadow: #e5f0f9;
+ --input-hover-border-color: var(--accent-brand-400);
+ --input-text-color: var(--text-400);
+ --input-placeholder-color: rgba(0, 0, 0, 0.4);
+
+ --input-disabled-background-color: #f5f5f5;
+
+ // Multiselect
+ --multiselect-background-color: var(--bg-input);
+ --multiselect-border-color: var(--border-200);
+ --multiselect-hover-border-color: var(--accent-brand-400);
+ --multiselect-text-color: var(--text-400);
+
+ --input-icon-color: var(--base-color-rgb);
+
+ --input-accent-color: rgb(var(--base-accent-rgb));
+ --input-label-color: var(--label-default-color);
+ --input-selected-indicator-color: rgb(var(--base-white-rgb));
+
+ --input-disabled-border-color: rgba(var(--base-border-rgb), 0.1);
+ --input-disabled-label-color: rgba(var(--base-border-rgb), 0.3);
+ --input-disabled-selected-indicator-color: rgba(var(--base-border-rgb), 0.3);
+
+ --input-radio-checkbox-border-color: rgba(
+ var(--base-border-rgb),
+ 0.3
+ ); // Needs to avoid conflict with exisitng --input-border-color
+ --input-radio-checkbox-disabled-background-color: rgba(
+ var(--base-border-rgb),
+ 0.03
+ ); // Needs to avoid conflict with exisitng --input-disabled-background-color
+ --input-radio-checkbox-box-shadow: 0 0px 0 3px rgba(var(--base-accent-rgb), 0.2);
+
+ --dropdown-item-separator-color: #424242;
+ --dropdown-item-highlight-background-color: #e5f0f9;
+ --dropdown-item-highlight-text-color: #0068c3;
+ --dropdown-item-background-color: #fff;
+ --dropdown-item-hover-background-color: #f5f5f5;
+ --dropdown-background-color: var(--p-select-background);
+ --inputSwitch-active-background-color: #0068c3;
+ --inputSwitch-inactive-background-color: #a9a9a9;
+ --password-strenght-border-color: #e8e8e8;
+ --drag-drop-item-background-color: aliceblue;
+ --steps-border-color: #c8c8c8;
+ --search-border-color: #b2d1ed;
+ --search-border-active-color: #66a4db;
+ --search-border-shadow-color: #e5f0f9;
+ --search-button-clear-color: #e1e1e1;
+ --search-input-color: transparent;
+ --cancel-button-footer-border: rgba(0, 0, 0, 0.15);
+ --cancel-button-footer-border-hover: rgba(0, 104, 195, 0.12);
+
+ //Menus
+ --main-menu-background-color: #1e1f24;
+ --main-menu-item-message-border-color: #1a77c9;
+ --main-menu-item-hover-background-color: rgba(255, 255, 255, 0.1);
+ --main-menu-item-active-background-color: rgba(255, 255, 255, 0.15);
+ --main-menu-item-active-color: #fff;
+ --main-menu-item-color: rgba(255, 255, 255, 0.8);
+ --main-menu-text-color: #484848;
+ --menu-card-background-color: #fff;
+ --menu-card-pam-background-color: #f5f5f5;
+ --menu-pam-card-background-color: #fff;
+ --menu-pam-card-spinner-background-color: rgba(255, 255, 255, 0.75);
+ --menu-pam-card-border-color: #e0e0e0;
+ --menu-selected-card-background-color: #c3e3ff;
+ --menu-pam-card-hover-color: rgb(230, 230, 230);
+ --menu-pam-empty-text-color: #cfd1d0;
+ --main-menu-border-color: #e0e0e0;
+ --card-txt-color: #424242;
+
+ //Panel Menu
+ --panel-menu-separator-color: #424242;
+ --panel-menu-highlight-background-color: #e5f0f9;
+ --panel-menu-highlight-text-color: #0068c3;
+ --panel-menu-background-color: #fff;
+ --panel-menu-hover-background-color: #f5f5f5;
+
+ //Connection View
+ --connection-sidebar-background-color: #f7fbff;
+ --connection-view-default-background-color: #ffffff;
+ --connection-view-wrapper-background-color: #f2f7fc;
+ --connection-view-border-color: #e8e8e8;
+ --connection-view-text-color: #424242;
+ --connection-view-link-color: #0068c3;
+ --connection-view-title-color: #0068c3;
+ --connection-view-quote-color: #f8f8f8;
+ --dashboard-background-color: #f5f5f5;
+
+ --dashboard-data-subtitle-color: #9e9e9e;
+ --dashboard-data-text-color: #757575;
+
+ //Table
+ --table-column-title-color: #0068c3;
+ --table-column-title-background-hover-color: #f8f8f8;
+ --table-column-title-background-color: #fff;
+ --table-row-text-color: #424242;
+ --table-row-background-color: #fff;
+ --table-child-row-background-color: #f3f6f9;
+ --table-border-color: #e8e8e8;
+ --table-title-border-color: #a6c9e2;
+ --table-link-color: #0068c3;
+ --table-granted-bg-color: #dcffe5;
+ --table-header-color: #fff;
+
+ //Overview
+ --overview-background-color: rgb(var(--base-background-color));
+ --overview-border-color: #e8e8e8;
+
+ //Account divider
+ --divider-border-color: #e8e8e8;
+
+ //Messages
+ --message-error-icon-color: #cb091f;
+ --message-error-color: #ff1a1a;
+ --message-error-background-color: #ffa8a8;
+ --message-info-color: #fff;
+ --message-info-background-color: #38a2ff;
+ --message-warn-color: #bd8c09;
+ --message-warn-background-color: #f3db9b;
+ --message-success-color: #196b0f;
+ --message-success-background-color: #b7d8b7;
+ --message-font-color: #000000;
+ --message-font-opacity: 70%;
+ --message-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16);
+ --message-high-priority-background-color: #ffe8e8;
+ --message-high-priority-color: #ff1a1a;
+
+ --info-message-background-color: #afdaff;
+ --success-message-background-color: #caecb4;
+ --warning-message-background-color: #fff5c0;
+ --error-message-background-color: #ffb7b7;
+
+ //Scheduling report
+ --scheduling-datetime-color: #fff;
+ --scheduling-title-color: whitesmoke;
+ --scheduling-border-color: #ddd;
+ --scheduling-today-color: #fcf8e3;
+ --scheduling-today-text-color: #424242;
+ --scheduling-hover-item-background-color: #e3f3ff;
+
+ //Buttons
+ --button-action-background-hover-color: #ebf3fa;
+ --button-action-text-hover-color: #0068c3;
+ --button-action-text-active-color: #00539c;
+ --button-action-text-color: #0068c3;
+ --button-action-secondary-icon-color: #424242;
+ --button-action-secondary-hover-bg-color: #ebebeb;
+ --button-action-secondary-pressed-bg-color: #dbdbdb;
+ --button-action-secondary-background: #f0f6fb;
+ --button-action-icon-delete-hover-color: #ff1a1a;
+ --button-action-add-icon-color: #61aa30;
+ --button-action-add-hover-bg-color: #ebf9d5;
+ --button-action-add-pressed-bg-color: #caecb4;
+ --button-action-icon-color: #0068c3;
+ --button-action-hover-bg-color: #ebf3fa;
+ --button-action-pressed-bg-color: #dbeaf7;
+ --button-add-shadow-color: #999;
+ --button-floating-background-hover: #508b27;
+ --button-divider-color: #e8e8e8;
+
+ --button-primary-text: #ffffff;
+ --button-primary-border: #0068c3;
+ --button-primary-fill: #0068c3;
+
+ --button-primary-hover-text: #ffffff;
+ --button-primary-hover-border: #0051b2;
+ --button-primary-hover-fill: #0051b2;
+
+ --button-primary-pressed-fill: #003ca2;
+
+ --button-primary-danger-text: #ff1a1a;
+ --button-primary-danger-border: rgba(255, 26, 26, 0.25);
+ --button-primary-danger-fill: #fff3f3;
+
+ --button-primary-danger-hover-fill: #ffdbdb;
+ --button-primary-danger-pressed-fill: #b90000;
+
+ --button-secondary-text: var(--text-brand);
+ --button-secondary-border: rgba(var(--base-accent-rgb), 0.15);
+ --button-secondary-fill: var(--bg-brand-200);
+
+ --button-secondary-hover-fill: #dfecf7;
+ --button-secondary-hover-border: var(--accent-brand-200);
+ --button-secondary-hover-text: var(--text-brand);
+
+ --button-secondary-pressed-fill: var(--accent-brand-400);
+ --button-secondary-pressed-border: var(--accent-brand-400);
+ --button-secondary-pressed-text: #ffffff;
+
+ --button-secondary-danger-text: #ff1a1a;
+ --button-secondary-danger-border: rgba(255, 26, 26, 0.25);
+
+ --button-secondary-danger-fill: #fff3f3;
+ --button-secondary-danger-hover-fill: #ffdbdb;
+ --button-secondary-danger-pressed-fill: #b90000;
+
+ --button-tertiary-fill: #ffffff;
+ --button-tertiary-border: var(--border-200);
+ --button-tertiary-text: var(--text-brand);
+
+ --button-tertiary-hover-fill: #e0edf8;
+ --button-tertiary-hover-border: var(--accent-brand-200);
+
+ --button-tertiary-pressed-fill: #cce1f3;
+ --button-tertiary-pressed-border: var(--accent-brand-200);
+
+ --button-tertiary-danger-text: #ff1a1a;
+ --button-tertiary-danger-border: rgba(255, 26, 26, 0.15);
+ --button-tertiary-danger-fill: #ffffff;
+
+ --button-tertiary-danger-hover-fill: #ffdbdb;
+ --button-tertiary-danger-hover-border: rgba(255, 26, 26, 0.15);
+
+ --button-tertiary-danger-pressed-text: #ffffff;
+ --button-tertiary-danger-pressed-fill: #ff1a1a;
+
+ --button-disabled-fill: rgba(0, 0, 0, 0.05);
+ --button-disabled-border: rgba(0, 0, 0, 0.1);
+ --button-disabled-text: rgba(0, 0, 0, 0.3);
+
+ --field-border-width: 1px;
+
+ //Overlay Panel
+ --overlay-panel-background-color: #fff;
+ --overlay-panel-text-color: #424242;
+ --overlay-panel-splitter-color: #f5f5f5;
+
+ //SidePanel
+ --side-panel-text-color: #424242;
+ --side-panel-background-color: #ffffff;
+ --side-panel-border-color: #0068c34d;
+ --side-panel-title-color: #424242;
+
+ //Messages
+ --dataview-text-color: #424242;
+ --dataview-border-color: #e8e8e8;
+ --dataview-bg-hover-color: #eee;
+ --secondary-text-color: #ffffff;
+ --lighter-default-text-color: #999999;
+ --unread-message-border-color: #0068c3;
+ --unread-message-hover-border-color: #b2b2b2;
+ --unread-message-background-color: #f0f8ff;
+
+ //Scrollbar
+ --scrollbar-color: rgba(0, 0, 0, 0.3);
+ --scrollbar-background-color: transparent;
+
+ //Fieldset
+ --fieldset-title-color: #0068c3;
+ --fieldset-sub-title-color: rgba(0, 0, 0, 0.6);
+ --fieldset-border-color: #cce1f3;
+
+ //Administration Dashboard
+ --admin-item-border-color: #fff;
+ --admin-item-icon-color: #0068c3;
+ --admin-item-text-color: #0068c3;
+ --admin-item-shadow-color: #e8e8e8;
+
+ //Drag-and-drop
+ --droparea-border-color: #88c8ff;
+ --droparea-border-color-hover: #0068c3;
+ --droparea-border-color-uploaded: #dcdcdc;
+ --droparea-background-color: #f2f7fc;
+ --droparea-delete-icon-color: #616161;
+ --droparea-delete-icon-color-hover: #0068c3;
+ --droparea-filesize-color: #616161;
+ --droparea-filename-color: #212121;
+ --droparea-upload-icon-color: #60a1d9;
+ --droparea-upload-icon-color-hover: #0068c3;
+ --droparea-upload-font-color: #616161;
+ --droparea-upload-font-color-hover: #212121;
+ --droparea-background-color-uploaded: #f5f5f5;
+ --droparea-dragenter-background-color: #dbeaf7;
+
+ //Chips
+ --chips-token-background-color: #eeeeee;
+ --chips-token-font-color: #212121;
+
+ //Autocomplete
+ --autocomplete-item-font-color: #212121;
+ --autocomplete-panel-background-color: #ffffff;
+ --autocomplete-item-hover-color: #f5f5f5;
+ --autocomplete-panel-box-shadow: 0 3px 6px 0 #e5f0f9;
+
+ // Security Severity Level
+ --severity-level-critical-color: #ffeeee;
+ --severity-level-critical-bg: #c80000;
+ --severity-level-high-color: #c80000;
+ --severity-level-high-bg: #ffeeee;
+ --severity-level-medium-color: #e2a300;
+ --severity-level-medium-bg: #f4f1e9;
+ --severity-level-low-color: #006400;
+ --severity-level-low-bg: #e6ece6;
+ --security-box-title: #000;
+ --security-box-bg: #f5f5f5;
+ --security-box-action-bg: #dceaf7;
+ --security-box-action-color: #0068c3;
+ --security-box-border-color: #ededed;
+ --security-chart-progress: #00cf00;
+ --security-chart-remaining: #bfbfbf;
+
+ // Checkout
+ --approver-bg-color: rgba(0, 0, 0, 0.04);
+
+ // User tags
+ --user-tags-background-color-external: rgba(161, 184, 7, 0.15);
+ --user-tags-text-color-external: rgba(161, 184, 7, 1);
+ --user-tags-background-color-privileged: rgba(238, 187, 7, 0.15);
+ --user-tags-text-color-privileged: rgba(188, 148, 6, 1);
+ --user-tags-background-color-contractor: rgba(0, 104, 195, 0.15);
+ --user-tags-text-color-contractor: rgba(0, 104, 195, 1);
+
+ // MeterGroup
+ --metergroup-text-color: #424242;
+ --metergroup-no-data-text-color: var(--text-100);
+ --metergroucolor-danger: #fb9d9d;
+ --metergroucolor-warn: #f6d623;
+ --metergroucolor-safe: #b5fb9d;
+ --metergroup-color-danger: #fb9d9d;
+ --metergroup-color-warn: #f6d623;
+ --metergroup-color-safe: #b5fb9d;
+ --metergroup-background-color: rgba(var(--base-color-rgb), 0.15);
+ --metergroup-outline-color: var(--neutral-inverted-color);
+
+ //Purple
+ --accent-purple-100: rgba(240,217,252,1);
+ --accent-purple-200: rgba(226,173,255,1);
+ --accent-purple-300: rgba(202,106,255,1);
+ --accent-purple-400: rgba(153,0,238,1); // primary
+ --accent-purple-500: rgba(108,0,168,1);
+ --accent-purple-600: rgba(62,0,97,1);
+
+ //Blue
+ --blue-primary: #0068c3;
+ --blue-900: #3aa3ff;
+ --blue-800: #88c8ff;
+ --blue-700: #afdaff;
+ --blue-500: #d7ecff;
+ --blue-300: #eaf5ff;
+
+ --blue-primary-text-color: white;
+ --blue-900-text-color: black;
+ --blue-800-text-color: black;
+ --blue-700-text-color: black;
+ --blue-500-text-color: black;
+ --blue-300-text-color: black;
+
+ //Red
+ --red-primary: #ff1a1a;
+ --red-900: #ff6868;
+ --red-800: #ff9090;
+ --red-700: #ffb7b7;
+ --red-500: #ffdede;
+ --red-300: #fff2f2;
+ --red-400: #f04438;
+
+ --red-primary-text-color: white;
+ --red-900-text-color: black;
+ --red-800-text-color: black;
+ --red-700-text-color: black;
+ --red-500-text-color: black;
+ --red-300-text-color: black;
+
+ //Green
+ --green-primary: #61aa30;
+ --green-900: #7ecc49;
+ --green-800: #9ed977;
+ --green-700: #caecb4;
+ --green-500: #ebf9d5;
+ --green-300: #eaf7e2;
+
+ --green-primary-text-color: black;
+ --green-900-text-color: black;
+ --green-800-text-color: black;
+ --green-700-text-color: black;
+ --green-500-text-color: black;
+ --green-300-text-color: black;
+
+ //Yellow
+ --yellow-primary: #ffda23;
+ --yellow-900: #ffe772;
+ --yellow-800: #ffee99;
+ --yellow-700: #fff5c0;
+ --yellow-500: #fff8d4;
+ --yellow-300: #fffeb7;
+
+ --yellow-primary-text-color: black;
+ --yellow-900-text-color: black;
+ --yellow-800-text-color: black;
+ --yellow-700-text-color: black;
+ --yellow-500-text-color: black;
+ --yellow-300-text-color: black;
+
+ //Orange
+ --orange-primary: #ff8200;
+ --orange-900: #ff9f3b;
+ --orange-800: #ffbc76;
+ --orange-700: #ffcf9d;
+ --orange-500: #ffecd8;
+ --orange-300: #fff5eb;
+
+ --orange-primary-text-color: black;
+ --orange-900-text-color: black;
+ --orange-800-text-color: black;
+ --orange-700-text-color: black;
+ --orange-500-text-color: black;
+ --orange-300-text-color: black;
+
+ //Grey
+ --grey-primary: #000000;
+ --grey-900: #212121;
+ --grey-800: #424242;
+ --grey-700: #616161;
+ --grey-600: #757575;
+ --grey-500: #9e9e9e;
+ --grey-400: #bdbdbd;
+ --grey-300: #e0e0e0;
+ --grey-200: #eeeeee;
+ --grey-100: #f5f5f5;
+ --grey-0: #fafafa;
+
+ --grey-primary-text-color: white;
+ --grey-900-text-color: white;
+ --grey-800-text-color: white;
+ --grey-700-text-color: white;
+ --grey-600-text-color: white;
+ --grey-500-text-color: black;
+ --grey-400-text-color: black;
+ --grey-300-text-color: black;
+ --grey-200-text-color: black;
+ --grey-100-text-color: black;
+ --grey-0-text-color: black;
+
+ //Text
+ --text-color-primary: rgba(0, 0, 0, 0.8);
+ --text-color-secondary: rgba(0, 0, 0, 0.6);
+ --text-color-tertiary: rgba(0, 0, 0, 0.4);
+
+ --text-color-accent: rgba(0, 0, 0, 1);
+
+ //Log event level
+ --log-event-level-error: rgba(255, 26, 26, 1);
+ --log-event-level-warning: rgba(255, 130, 0, 1);
+ --log-event-level-information: rgba(0, 104, 195, 1);
+
+ //swagger
+ --swagger-caret-color-filter: brightness(100%);
+
+ //font
+ --font-open-sans: 'Open Sans Variable', sans-serif;
+ --font-roboto: 'Roboto Variable', sans-serif;
+ --font-monospace: 'Noto Sans Mono Variable', monospace;
+
+ //input switch
+ --input-switch-default-bg-color: #bdbdbd;
+ --input-switch-active-bg-color: #0068c3;
+ --input-switch-active-hover-bg-color: #00539c;
+ --iframe-dialog-color: #ffffff;
+
+ //Design System
+ --border-search: #dcdcdc;
+ --border-brand-100: rgba(var(--base-accent-rgb), 0.1);
+ --border-brand-200: rgba(var(--base-accent-rgb), 0.15);
+ --border-brand-300: rgba(var(--base-accent-rgb), 0.2);
+ --border-brand-400: rgba(var(--base-accent-rgb), 0.35);
+ --secondary-action-bg: #f0f6fb;
+ --fill-base-200: #f2f2f2;
+ --fill-brand-100: #fafcff;
+ --fill-brand-200: #f1f8fe;
+ --fill-brand-300: #eaf5ff;
+ --fill-200: #f9f9f9;
+ --fill-300: #f2f2f2;
+ --fill-500: #e2e2e2;
+ --box-fill: #ffffff;
+
+ //Text
+ --dropdown-border: #f2f2f2;
+ --dropdown-fill: #ffffff;
+
+ --spacing-0: 0;
+ --spacing-1: 4px;
+ --spacing-15: 6px;
+ --spacing-2: 8px;
+ --spacing-25: 10px;
+ --spacing-3: 12px;
+ --spacing-4: 16px;
+}
diff --git a/webapp/apps/gateway-ui/src/assets/css/dvls-stack/variables.generated.scss b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/variables.generated.scss
new file mode 100644
index 000000000..bfb1706da
--- /dev/null
+++ b/webapp/apps/gateway-ui/src/assets/css/dvls-stack/variables.generated.scss
@@ -0,0 +1,279 @@
+/* Define default theme (e.g., light theme) */
+:root {
+ --main-body-bg: var(--bg-200);
+ --main-header-bg: var(--bg-100);
+ --main-content-bg: var(--bg-brand-200);
+ --main-wrapper-bg: var(--bg-100);
+ --field-disabled-bg: var(--bg-300);
+ --overlay-bg-content: var(--bg-100);
+ --dvl-icon-color: rgba(13, 13, 13, 0.8);
+ --always-white: #ffffff;
+ --always-black: #000000;
+ --accent-brand-100: rgba(231, 247, 254, 1);
+ --accent-brand-200: rgba(157, 218, 251, 1);
+ --accent-brand-300: rgba(84, 182, 248, 1);
+ --accent-brand-400: rgba(0, 104, 195, 1);
+ --accent-brand-500: rgba(5, 74, 122, 1);
+ --accent-brand-600: rgba(2, 33, 49, 1);
+ --accent-caution-100: rgba(255, 248, 214, 1);
+ --accent-caution-200: rgba(251, 240, 157, 1);
+ --accent-caution-300: rgba(246, 214, 35, 1);
+ --accent-caution-400: rgba(250, 208, 0, 1);
+ --accent-caution-500: rgba(194, 165, 0, 1);
+ --accent-caution-600: rgba(49, 44, 2, 1);
+ --accent-danger-100: rgba(255, 224, 224, 1);
+ --accent-danger-200: rgba(251, 157, 157, 1);
+ --accent-danger-300: rgba(248, 84, 84, 1);
+ --accent-danger-400: rgba(255, 1, 1, 1);
+ --accent-danger-500: rgba(177, 1, 1, 1);
+ --accent-danger-600: rgba(83, 3, 3, 1);
+ --accent-success-100: rgba(224, 255, 208, 1);
+ --accent-success-200: rgba(181, 251, 157, 1);
+ --accent-success-300: rgba(111, 248, 84, 1);
+ --accent-success-400: rgba(15, 184, 0, 1);
+ --accent-success-500: rgba(5, 122, 11, 1);
+ --accent-success-600: rgba(4, 49, 2, 1);
+ --accent-warning-100: rgba(255, 238, 219, 1);
+ --accent-warning-200: rgba(251, 206, 157, 1);
+ --accent-warning-300: rgba(255, 176, 87, 1);
+ --accent-warning-400: rgba(255, 136, 0, 1);
+ --accent-warning-500: rgba(221, 118, 9, 1);
+ --accent-warning-600: rgba(132, 71, 6, 1);
+ --alt-100: rgba(0, 0, 0, 0.05);
+ --alt-200: rgba(0, 0, 0, 0.15);
+ --alt-300: rgba(0, 0, 0, 0.25);
+ --alt-400: rgba(0, 0, 0, 0.35);
+ --alt-500: rgba(0, 0, 0, 0.5);
+ --alt-600: rgba(0, 0, 0, 0.65);
+ --alt-contrast-100: rgba(255, 255, 255, 0.07);
+ --alt-contrast-200: rgba(255, 255, 255, 0.14);
+ --alt-contrast-300: rgba(255, 255, 255, 0.21);
+ --alt-contrast-400: rgba(255, 255, 255, 0.28);
+ --alt-contrast-500: rgba(255, 255, 255, 0.35);
+ --alt-contrast-600: rgba(255, 255, 255, 0.42);
+ --bg-100: rgba(255, 255, 255, 1);
+ --bg-200: rgba(249, 249, 249, 1);
+ --bg-300: rgba(242, 242, 242, 1);
+ --bg-400: rgba(236, 236, 236, 1);
+ --bg-500: rgba(226, 226, 226, 1);
+ --bg-600: rgba(217, 217, 217, 1);
+ --bg-brand-100: rgba(250, 252, 255, 1);
+ --bg-brand-200: rgba(241, 248, 254, 1);
+ --bg-brand-300: rgba(234, 245, 255, 1);
+ --bg-brand-400: rgba(225, 240, 255, 1);
+ --bg-brand-500: rgba(209, 233, 255, 1);
+ --bg-brand-600: rgba(189, 223, 255, 1);
+ --bg-contrast-100: rgba(0, 0, 0, 1);
+ --bg-contrast-200: rgba(26, 26, 26, 1);
+ --bg-contrast-300: rgba(37, 37, 37, 1);
+ --bg-contrast-400: rgba(46, 46, 46, 1);
+ --bg-contrast-500: rgba(56, 56, 56, 1);
+ --bg-contrast-600: rgba(70, 70, 70, 1);
+ --bg-contrast-brand-100: rgba(1, 18, 33, 1);
+ --bg-contrast-brand-200: rgba(10, 23, 34, 1);
+ --bg-contrast-brand-300: rgba(21, 28, 34, 1);
+ --bg-contrast-brand-400: rgba(26, 33, 40, 1);
+ --bg-contrast-brand-500: rgba(29, 40, 49, 1);
+ --bg-contrast-brand-600: rgba(30, 47, 60, 1);
+ --border-100: rgba(242, 242, 242, 1);
+ --border-200: rgba(217, 217, 217, 1);
+ --border-300: rgba(178, 178, 178, 1);
+ --border-400: rgba(153, 153, 153, 1);
+ --border-brand-100: rgba(0, 104, 195, 0.1);
+ --border-brand-200: rgba(0, 104, 195, 0.15);
+ --border-brand-300: rgba(0, 104, 195, 0.2);
+ --border-brand-400: rgba(0, 104, 195, 0.35);
+ --border-contrast-100: rgba(26, 26, 26, 1);
+ --border-contrast-200: rgba(38, 38, 38, 1);
+ --border-contrast-300: rgba(77, 77, 77, 1);
+ --border-contrast-400: rgba(89, 89, 89, 1);
+ --border-contrast-brand-100: rgba(58, 163, 255, 0.1);
+ --border-contrast-brand-200: rgba(58, 163, 255, 0.15);
+ --border-contrast-brand-300: rgba(58, 163, 255, 0.2);
+ --border-contrast-brand-400: rgba(58, 163, 255, 0.35);
+ --products-dvls-100: rgba(255, 245, 247, 1);
+ --products-dvls-200: rgba(253, 232, 233, 1);
+ --products-dvls-logo: rgba(237, 31, 36, 1);
+ --products-gateway-100: rgba(247, 245, 248, 1);
+ --products-gateway-200: rgba(245, 234, 250, 1);
+ --products-gateway-logo: rgba(153, 51, 204, 1);
+ --products-hub-100: rgba(255, 250, 246, 1);
+ --products-hub-200: rgba(255, 239, 229, 1);
+ --products-hub-logo: rgba(255, 102, 0, 1);
+ --products-launcher-100: rgba(255, 251, 245, 1);
+ --products-launcher-200: rgba(255, 249, 236, 1);
+ --products-launcher-logo: rgba(255, 170, 0, 1);
+ --products-others-100: rgba(0, 0, 0, 0.03);
+ --products-others-logo: rgba(0, 158, 255, 1);
+ --products-pam-100: rgba(249, 253, 245, 1);
+ --products-pam-200: rgba(240, 249, 229, 1);
+ --products-pam-logo: rgba(104, 195, 0, 1);
+ --products-powershell-100: rgba(245, 251, 255, 1);
+ --products-powershell-200: rgba(224, 243, 255, 1);
+ --products-powershell-logo: rgba(0, 158, 255, 1);
+ --products-rdm-100: rgba(245, 249, 253, 1);
+ --products-rdm-200: rgba(231, 240, 254, 1);
+ --products-rdm-logo: rgba(20, 110, 245, 1);
+ --products-workspace-100: rgba(245, 255, 253, 1);
+ --products-workspace-200: rgba(228, 250, 245, 1);
+ --products-workspace-logo: rgba(29, 211, 176, 1);
+ --text-100: rgba(153, 153, 153, 1);
+ --text-200: rgba(115, 115, 115, 1);
+ --text-300: rgba(64, 64, 64, 1);
+ --text-400: rgba(13, 13, 13, 1);
+ --text-action: rgba(0, 0, 255, 1);
+ --text-brand: rgba(0, 104, 195, 1);
+ --text-caution: rgba(250, 208, 0, 1);
+ --text-contrast-100: rgba(102, 102, 102, 1);
+ --text-contrast-200: rgba(153, 153, 153, 1);
+ --text-contrast-300: rgba(204, 204, 204, 1);
+ --text-contrast-400: rgba(255, 255, 255, 1);
+ --text-contrast-action: rgba(0, 132, 255, 1);
+ --text-contrast-brand: rgba(58, 163, 255, 1);
+ --text-contrast-danger: rgba(249, 118, 108, 1);
+ --text-contrast-success: rgba(188, 234, 138, 1);
+ --text-contrast-warning: rgba(247, 181, 100, 1);
+ --text-danger: rgba(240, 68, 56, 1);
+ --text-success: rgba(134, 203, 60, 1);
+ --text-warning: rgba(255, 158, 43, 1);
+}
+
+/* Define dark theme */
+[data-theme='dark'] {
+ --main-body-bg: var(--bg-200);
+ --main-header-bg: var(--bg-200);
+ --main-content-bg: var(--bg-200);
+ --main-wrapper-bg: var(--bg-200);
+ --field-disabled-bg: var(--bg-500);
+ --overlay-bg-content: var(--bg-200);
+ --dvl-icon-color: rgba(255, 255, 255, 0.8);
+ --always-white: #ffffff;
+ --always-black: #000000;
+ --accent-brand-100: rgba(1, 19, 28, 1);
+ --accent-brand-200: rgba(4, 62, 103, 1);
+ --accent-brand-300: rgba(6, 92, 152, 1);
+ --accent-brand-400: rgba(10, 127, 230, 1);
+ --accent-brand-500: rgba(54, 166, 247, 1);
+ --accent-brand-600: rgba(147, 219, 251, 1);
+ --accent-caution-100: rgba(50, 44, 1, 1);
+ --accent-caution-200: rgba(103, 95, 4, 1);
+ --accent-caution-300: rgba(152, 135, 6, 1);
+ --accent-caution-400: rgba(215, 191, 9, 1);
+ --accent-caution-500: rgba(236, 214, 50, 1);
+ --accent-caution-600: rgba(251, 239, 147, 1);
+ --accent-danger-100: rgba(40, 1, 1, 1);
+ --accent-danger-200: rgba(103, 4, 4, 1);
+ --accent-danger-300: rgba(152, 6, 6, 1);
+ --accent-danger-400: rgba(211, 9, 9, 1);
+ --accent-danger-500: rgba(241, 77, 77, 1);
+ --accent-danger-600: rgba(251, 147, 147, 1);
+ --accent-success-100: rgba(2, 34, 1, 1);
+ --accent-success-200: rgba(4, 103, 4, 1);
+ --accent-success-300: rgba(18, 152, 6, 1);
+ --accent-success-400: rgba(63, 191, 8, 1);
+ --accent-success-500: rgba(73, 229, 21, 1);
+ --accent-success-600: rgba(173, 251, 147, 1);
+ --accent-warning-100: rgba(54, 29, 2, 1);
+ --accent-warning-200: rgba(103, 55, 4, 1);
+ --accent-warning-300: rgba(152, 81, 6, 1);
+ --accent-warning-400: rgba(230, 124, 10, 1);
+ --accent-warning-500: rgba(247, 154, 54, 1);
+ --accent-warning-600: rgba(251, 201, 147, 1);
+ --alt-100: rgba(255, 255, 255, 0.07);
+ --alt-200: rgba(255, 255, 255, 0.14);
+ --alt-300: rgba(255, 255, 255, 0.21);
+ --alt-400: rgba(255, 255, 255, 0.28);
+ --alt-500: rgba(255, 255, 255, 0.35);
+ --alt-600: rgba(255, 255, 255, 0.42);
+ --alt-contrast-100: rgba(0, 0, 0, 0.05);
+ --alt-contrast-200: rgba(0, 0, 0, 0.1);
+ --alt-contrast-300: rgba(0, 0, 0, 0.15);
+ --alt-contrast-400: rgba(0, 0, 0, 0.2);
+ --alt-contrast-500: rgba(0, 0, 0, 0.3);
+ --alt-contrast-600: rgba(0, 0, 0, 0.4);
+ --bg-100: rgba(22, 27, 38, 1);
+ --bg-200: rgba(12, 17, 29, 1);
+ --bg-300: rgba(28, 34, 46, 1);
+ --bg-400: rgba(33, 40, 53, 1);
+ --bg-500: rgba(39, 46, 60, 1);
+ --bg-600: rgba(46, 54, 68, 1);
+ --bg-brand-100: rgba(16, 29, 47, 1);
+ --bg-brand-200: rgba(26, 43, 64, 1);
+ --bg-brand-300: rgba(33, 55, 79, 1);
+ --bg-brand-400: rgba(38, 65, 93, 1);
+ --bg-brand-500: rgba(44, 74, 107, 1);
+ --bg-brand-600: rgba(49, 85, 120, 1);
+ --bg-contrast-100: rgba(255, 255, 255, 1);
+ --bg-contrast-200: rgba(249, 249, 249, 1);
+ --bg-contrast-300: rgba(242, 242, 242, 1);
+ --bg-contrast-400: rgba(236, 236, 236, 1);
+ --bg-contrast-500: rgba(226, 226, 226, 1);
+ --bg-contrast-600: rgba(217, 217, 217, 1);
+ --bg-contrast-brand-100: rgba(250, 252, 255, 1);
+ --bg-contrast-brand-200: rgba(241, 248, 254, 1);
+ --bg-contrast-brand-300: rgba(234, 245, 255, 1);
+ --bg-contrast-brand-400: rgba(225, 240, 255, 1);
+ --bg-contrast-brand-500: rgba(209, 233, 255, 1);
+ --bg-contrast-brand-600: rgba(189, 223, 255, 1);
+ --border-100: rgba(42, 46, 57, 1);
+ --border-200: rgba(47, 52, 65, 1);
+ --border-300: rgba(51, 57, 71, 1);
+ --border-400: rgba(56, 63, 78, 1);
+ --border-brand-100: rgba(58, 163, 255, 0.1);
+ --border-brand-200: rgba(58, 163, 255, 0.15);
+ --border-brand-300: rgba(58, 163, 255, 0.2);
+ --border-brand-400: rgba(58, 163, 255, 0.35);
+ --border-contrast-100: rgba(242, 242, 242, 1);
+ --border-contrast-200: rgba(217, 217, 217, 1);
+ --border-contrast-300: rgba(178, 178, 178, 1);
+ --border-contrast-400: rgba(153, 153, 153, 1);
+ --border-contrast-brand-100: rgba(0, 104, 195, 0.1);
+ --border-contrast-brand-200: rgba(0, 104, 195, 0.15);
+ --border-contrast-brand-300: rgba(0, 104, 195, 0.2);
+ --border-contrast-brand-400: rgba(0, 104, 195, 0.35);
+ --products-dvls-100: rgba(31, 27, 38, 1);
+ --products-dvls-200: rgba(237, 31, 36, 0.1);
+ --products-dvls-logo: rgba(237, 31, 36, 1);
+ --products-gateway-100: rgba(25, 26, 43, 1);
+ --products-gateway-200: rgba(153, 51, 204, 0.1);
+ --products-gateway-logo: rgba(153, 51, 204, 1);
+ --products-hub-100: rgba(31, 31, 37, 1);
+ --products-hub-200: rgba(255, 102, 0, 0.1);
+ --products-hub-logo: rgba(255, 102, 0, 1);
+ --products-launcher-100: rgba(38, 34, 27, 1);
+ --products-launcher-200: rgba(255, 170, 0, 0.1);
+ --products-launcher-logo: rgba(255, 170, 0, 1);
+ --products-others-100: rgba(255, 255, 255, 0.05);
+ --products-others-logo: rgba(0, 158, 255, 1);
+ --products-pam-100: rgba(25, 34, 36, 1);
+ --products-pam-200: rgba(104, 195, 0, 0.1);
+ --products-pam-logo: rgba(104, 195, 0, 1);
+ --products-powershell-100: rgba(38, 34, 27, 1);
+ --products-powershell-200: rgba(0, 158, 255, 0.1);
+ --products-powershell-logo: rgba(0, 158, 255, 1);
+ --products-rdm-100: rgba(21, 30, 44, 1);
+ --products-rdm-200: rgba(20, 110, 245, 0.1);
+ --products-rdm-logo: rgba(20, 110, 245, 1);
+ --products-workspace-100: rgba(27, 38, 35, 1);
+ --products-workspace-200: rgba(29, 211, 176, 0.1);
+ --products-workspace-logo: rgba(29, 211, 176, 1);
+ --text-100: rgba(115, 118, 125, 1);
+ --text-200: rgba(150, 152, 157, 1);
+ --text-300: rgba(194, 195, 198, 1);
+ --text-400: rgba(255, 255, 255, 1);
+ --text-action: rgba(0, 132, 255, 1);
+ --text-brand: rgba(58, 163, 255, 1);
+ --text-caution: rgba(215, 191, 9, 1);
+ --text-contrast-100: rgba(153, 153, 153, 1);
+ --text-contrast-200: rgba(115, 115, 115, 1);
+ --text-contrast-300: rgba(64, 64, 64, 1);
+ --text-contrast-400: rgba(13, 13, 13, 1);
+ --text-contrast-action: rgba(0, 0, 255, 1);
+ --text-contrast-brand: rgba(0, 104, 195, 1);
+ --text-contrast-danger: rgba(240, 68, 56, 1);
+ --text-contrast-success: rgba(134, 203, 60, 1);
+ --text-contrast-warning: rgba(255, 158, 43, 1);
+ --text-danger: rgba(211, 9, 9, 1);
+ --text-success: rgba(188, 234, 138, 1);
+ --text-warning: rgba(247, 181, 100, 1);
+}
diff --git a/webapp/apps/gateway-ui/src/assets/css/main.scss b/webapp/apps/gateway-ui/src/assets/css/main.scss
index 42b02f423..27eea1f40 100644
--- a/webapp/apps/gateway-ui/src/assets/css/main.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/main.scss
@@ -6,6 +6,9 @@
@use 'theme/root-theme' as *;
@use 'theme/dark-theme' as *;
@use 'theme/light-theme' as *;
+@use 'dvls-stack/variables.generated' as *;
+@use 'dvls-stack/theme/light-theme' as *;
+@use 'dvls-stack/theme/dark-theme' as *;
@use 'style/base' as *;
@use 'style/entry-status' as *;
@@ -21,6 +24,7 @@
/* Dropdowns & Selections */
@use 'override/_p-autocomplete' as *;
+@use 'override/_p-dialog' as *;
@use 'override/_p-dropdown' as *;
@use 'override/_p-multiselect' as *;
@use 'override/_p-select' as *;
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-autocomplete.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-autocomplete.scss
index 60123e2c6..255506922 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-autocomplete.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-autocomplete.scss
@@ -98,7 +98,8 @@
}
.p-autocomplete-panel {
- background-color: $dropdown-bg-color;
+ background-color: var(--main-body-bg);
+ color: $dropdown-item-txt-color;
border: 1px solid $dropdown-overlay-border-color;
box-shadow: $defaultBoxShadow;
margin-top: -1px; /* hack to simulate a thin line */
@@ -119,6 +120,7 @@
.p-autocomplete-item {
align-items: center;
+ background: var(--main-body-bg);
display: flex;
margin: 0;
padding: $listItemPadding;
@@ -246,11 +248,13 @@
}
.p-autocomplete-list {
- background: $dropdown-item-bg-color;
+ background: var(--main-body-bg);
color: $dropdown-item-txt-color;
}
.p-autocomplete-overlay {
+ background: var(--main-body-bg);
+ color: $dropdown-item-txt-color;
border-radius: 0 0 $borderRadius $borderRadius;
border: 1px solid $input-txt-border-focus-color;
}
\ No newline at end of file
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-button.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-button.scss
index 01aa20678..7671e72ef 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-button.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-button.scss
@@ -76,7 +76,7 @@ button:after {
color: #fff;
font-weight: 400;
padding: $buttonPadding;
- border: 0;
+ border: 1px solid transparent;
margin-right: 6px;
border-radius: $buttonRadius;
line-height: 14px;
@@ -129,6 +129,29 @@ button:after {
}
}
+.p-button.p-button-secondary {
+ background: var(--button-secondary-fill, var(--action-btn-outline-secondary-bg-color));
+ border-color: var(--button-secondary-border, var(--action-btn-outline-secondary-border-color));
+ color: var(--button-secondary-text, var(--action-btn-outline-secondary-color));
+
+ &:hover:not(.p-disabled):not([disabled]) {
+ background: var(--button-secondary-hover-fill, var(--action-btn-outline-secondary-bg-hover-color));
+ border-color: var(--button-secondary-hover-border, var(--action-btn-outline-secondary-border-hover-color));
+ color: var(--button-secondary-text, var(--action-btn-outline-secondary-color));
+ }
+}
+
+.p-button.p-button-text {
+ background: transparent;
+ border-color: transparent;
+ color: $default-btn-link-text-color;
+
+ &:hover:not(.p-disabled):not([disabled]) {
+ background: var(--action-btn-hover-bg-color);
+ color: $default-btn-link-text-color;
+ }
+}
+
.p-btn-link {
color: $default-btn-link-text-color !important;
cursor: pointer;
@@ -140,21 +163,20 @@ button:after {
.p-button.p-button-outlined {
background-color: transparent;
- color: $checkoutRequestIconNeutralColor;
- border: 0 none;
+ color: var(--button-secondary-text, $checkoutRequestIconNeutralColor);
+ border: 1px solid var(--button-secondary-border, transparent);
.p-button-label {
- color: var(--message-font-color);
+ color: currentColor;
}
&:enabled:hover {
- background: rgba(159, 168, 218, 0.16);
- border: 0 none;
+ background: var(--button-secondary-hover-fill, rgba(159, 168, 218, 0.16));
+ border-color: var(--button-secondary-hover-border, var(--button-secondary-border, transparent));
}
&:enabled:active {
- background: rgba(159, 168, 218, 0.30);
- border: 0 none;
+ background: var(--action-btn-outline-secondary-bg-pressed-color, rgba(159, 168, 218, 0.30));
}
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-component-overlay.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-component-overlay.scss
index 819c8cb67..4ab682273 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-component-overlay.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-component-overlay.scss
@@ -2,17 +2,26 @@
@use '../style/variables' as *;
@use '../theme/theme-mode-variables' as *;
-.p-component-overlay {
+.p-component-overlay,
+.p-dialog-mask {
background-color: $overlay-bg-color;
transition-duration: 0.2s;
z-index: 1;
}
-.p-component-overlay-enter {
+.p-component-overlay-leave,
+.p-dialog-mask.p-overlay-mask-leave,
+.p-dialog-mask:not(:has(.p-dialog)) {
+ pointer-events: none;
+}
+
+.p-component-overlay-enter,
+.p-dialog-mask.p-overlay-mask-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
-.p-component-overlay-leave {
+.p-component-overlay-leave,
+.p-dialog-mask.p-overlay-mask-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-dialog.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-dialog.scss
new file mode 100644
index 000000000..5b87a09b6
--- /dev/null
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-dialog.scss
@@ -0,0 +1,122 @@
+.p-dialog .p-dialog-header {
+ display: flex;
+ height: 4rem;
+ justify-content: space-between;
+ gap: 2rem;
+ line-height: 1.75rem;
+ border-bottom: 1px solid var(--border-brand-100);
+}
+
+.p-dialog .p-dialog-header-icon {
+ color: var(--dialog-header-icon-text-color, var(--text-400));
+}
+
+.p-dialog .p-dialog-close-button {
+ color: var(--dialog-header-icon-text-color, var(--title-color, var(--text-400))) !important;
+}
+
+.p-dialog .p-dialog-close-button timesicon,
+.p-dialog .p-dialog-close-button .p-icon {
+ display: none;
+}
+
+.p-dialog .p-dialog-close-button::before {
+ font-family: devolutions-icons, serif;
+ content: '\e93e';
+ color: currentColor;
+ font-size: 1rem;
+ line-height: 1;
+}
+
+.p-dialog .p-dialog-content {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+
+.p-dialog .p-dialog-content > form {
+ flex: 1 1 auto;
+ min-height: 0;
+}
+
+.p-dialog .p-dialog-content > .dialog-body,
+.p-dialog .p-dialog-content > .content,
+.p-dialog .p-dialog-content > .body {
+ flex: 1 1 auto;
+ min-height: 0;
+}
+
+.p-dialog .p-dialog-footer {
+ border-top: 1px solid var(--border-brand-100);
+ padding-top: 0.875rem !important;
+}
+
+.p-dialog .p-dialog-close-button.p-button-text.p-button-secondary:not(:disabled):hover,
+.p-dialog .p-dialog-maximize-button.p-button-text.p-button-secondary:not(:disabled):hover {
+ background: var(--bg-200) !important;
+ color: var(--text-400) !important;
+ border-color: transparent !important;
+}
+
+.p-dialog .button-default-footer.p-button,
+.p-dialog .button-default-footer .p-button {
+ background: var(--dialog-footer-default-button-background-color);
+ color: var(--dialog-footer-default-button-text-color);
+ font-weight: 600;
+ padding: 7px 10px;
+ border: 0;
+ margin-right: 16px;
+ border-radius: 6px;
+ line-height: 14px;
+ font-size: 14px;
+ height: 33px;
+ min-width: 76px;
+}
+
+.p-dialog .button-default-footer.p-button:not(.p-disabled):hover,
+.p-dialog .button-default-footer .p-button:not(.p-disabled):hover {
+ background: var(--dialog-footer-default-button-background-hover-color);
+ color: var(--dialog-footer-default-button-text-color);
+}
+
+.p-dialog .button-cancel-footer.p-button,
+.p-dialog .button-cancel-footer .p-button {
+ background-color: var(--dialog-header-background-color);
+ border: 1px solid var(--cancel-button-footer-border);
+ color: var(--dialog-footer-default-button-background-color);
+ font-weight: 600;
+ min-width: 76px;
+ font-size: 14px;
+ height: 33px;
+ padding: 7px 10px;
+ line-height: 14px;
+ border-radius: 6px;
+}
+
+.p-dialog .button-cancel-footer.p-button:not(.p-disabled):hover,
+.p-dialog .button-cancel-footer .p-button:not(.p-disabled):hover {
+ background-color: var(--cancel-button-footer-border-hover);
+}
+
+.p-dialog .button-default-footer .p-button-label,
+.p-dialog .button-cancel-footer .p-button-label {
+ line-height: 14px;
+}
+
+.p-confirm-dialog .p-dialog-content .p-confirm-dialog-icon {
+ font-size: 1.5em;
+ margin-right: 10px;
+}
+
+.p-confirm-dialog .p-dialog-footer {
+ gap: 10px;
+ display: flex;
+ justify-content: end;
+ align-items: center;
+}
+
+.p-confirm-dialog.p-dialog .p-dialog-content {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: normal;
+}
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-dropdown.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-dropdown.scss
index ade2e7e10..0df88ecc6 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-dropdown.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-dropdown.scss
@@ -15,6 +15,8 @@
width: 100%;
min-width: 210px;
border: 1px solid $input-default-border-color;
+ background: $input-txt-bg-color;
+ color: $input-txt-color;
@include text-ellipsis();
@include transition(box-shadow $transitionDuration, border-color $transitionDuration);
@@ -23,6 +25,7 @@
.p-dropdown-label:focus,
.p-dropdown-label:hover {
border: none;
+ color: $input-txt-color;
margin-right: 1.5em;
}
@@ -68,7 +71,8 @@
}
.p-dropdown-panel {
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
+ color: $dropdown-item-txt-color;
margin-top: -1px; /* hack to simulate a thin line */
border: 1px solid $dropdown-overlay-border-color;
box-shadow: $defaultBoxShadow;
@@ -89,7 +93,7 @@
.p-dropdown-filter-container {
padding: $headerPadding;
border-bottom: 1px solid $admin-separator-color;
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
.p-dropdown-filter {
width: 100%;
@@ -118,11 +122,11 @@
@include custom-scrollbar();
.p-dropdown-items {
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
padding: 0;
.p-dropdown-item {
- background: $dropdown-item-bg-color;
+ background: var(--main-body-bg);
color: $dropdown-item-txt-color;
margin: 0;
padding: $listItemPadding;
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-input.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-input.scss
index 2c565c68a..827a28d32 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-input.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-input.scss
@@ -5,6 +5,9 @@
body .p-inputtext {
padding: 5px 0 5px 8px;
line-height: 24px;
+ background: var(--input-txt-bg-color);
+ border-color: $input-txt-border-color;
+ color: $input-txt-color;
}
.p-inputtext {
@@ -26,6 +29,29 @@ body .p-inputtext {
border-color: $input-txt-border-hover-color;
}
+ &:enabled:focus:not(.p-state-error) {
+ border-color: $input-txt-border-focus-color;
+ box-shadow: 0 0 0 3px rgba(var(--base-accent-rgb), 0.2);
+ }
+
+ &:disabled {
+ background: var(--input-txt-bg-disabled-color);
+ border-color: $input-txt-border-disabled-color;
+ color: var(--disabled-text-color);
+ }
+
+ &::placeholder {
+ color: var(--input-txt-placeholder);
+ }
+
+ &:-webkit-autofill,
+ &:-webkit-autofill:hover,
+ &:-webkit-autofill:focus {
+ -webkit-text-fill-color: $input-txt-color;
+ box-shadow: 0 0 0 1000px var(--input-txt-bg-color) inset;
+ transition: background-color 9999s ease-in-out 0s;
+ }
+
&.read-only {
color: var(--input-txt-read-only-color);
background-color: var(--input-txt-bg-read-only-color);
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-messages_p-toast.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-messages_p-toast.scss
index e748a1a9c..57db8b060 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-messages_p-toast.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-messages_p-toast.scss
@@ -33,19 +33,19 @@
display: flex;
flex-direction: column;
top: 64px;
- right: 34px;
+ right: 12px;
+ width: min(400px, calc(100vw - 24px));
p-toastItem {
- min-height: 60px;
- width: 285px !important;
+ min-height: 52px;
+ width: 100% !important;
margin-left: auto;
margin-bottom: 8px;
}
.p-toast-message {
- border: 0;
- box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16);
- padding: 20px 12px 20px 20px;
+ box-shadow: none;
+ padding: 0;
}
}
@@ -86,15 +86,13 @@
--status-banner-border-color: rgba(var(--status-banner-color-rgb), var(--status-banner-background-opacity));
--status-banner-radius: 6px;
- // We layer 2 colors (status color + white or black) on top of each other so the bg color isn't transparent but we still maintain 1 color by status
background-image: linear-gradient(0deg, var(--status-banner-background-color), var(--status-banner-background-color)), linear-gradient(0deg, rgb(var(--base-color-inverted-rgb)), rgb(var(--base-color-inverted-rgb)));
border: 1px solid var(--status-banner-border-color);
border-radius: var(--status-banner-radius);
color: $messageFontColor;
margin-bottom: 0;
position: relative;
- text-align: center;
-
+ text-align: left;
&::before {
border-radius: var(--status-banner-radius) 0 0 var(--status-banner-radius);
@@ -129,7 +127,11 @@
}
.p-toast-message-content {
- padding: 0;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ min-height: 52px;
+ padding: 12px 14px;
}
.p-toast-summary,
@@ -142,11 +144,19 @@
.p-toast-detail {
text-align: left;
- max-width: 209px;
+ max-width: 320px;
+ margin: 0;
}
.p-toast-message-text {
- margin: auto;
+ margin: 0;
+ flex: 1 1 auto;
+ text-align: left;
+ }
+
+ .p-toast-summary,
+ .p-toast-detail:empty {
+ display: none;
}
.p-messages-close i {
@@ -191,4 +201,3 @@
padding-left: 1em;
}
}
-
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-multiselect.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-multiselect.scss
index 45febdbb3..fec06f098 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-multiselect.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-multiselect.scss
@@ -46,7 +46,7 @@
}
.p-multiselect-panel .p-multiselect-items-wrapper {
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
@@ -98,7 +98,7 @@
.p-multiselect-panel {
padding: 0;
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
min-width: 12em;
margin-top: -1px; /* hack to simulate a thin line */
border: 1px solid $dropdown-overlay-border-color;
@@ -107,14 +107,14 @@
.p-multiselect-header {
padding: $headerPadding;
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
border-bottom: 1px solid $dropdown-filter-container-separator-color;
border-radius: 0;
.p-multiselect-filter-container {
padding: $headerPadding;
border-bottom: 1px solid $dropdown-filter-container-separator-color;
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
.p-multiselect-filter {
width: 100%;
@@ -160,6 +160,7 @@
.p-multiselect-items {
.p-multiselect-item {
+ background: var(--main-body-bg);
padding: $listItemPadding;
.p-checkbox {
@@ -204,7 +205,7 @@
}
.p-multiselect-list, .p-multiselect-header {
- background: $dropdown-item-bg-color;
+ background: var(--main-body-bg);
color: $dropdown-item-txt-color;
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/override/_p-select.scss b/webapp/apps/gateway-ui/src/assets/css/override/_p-select.scss
index 5973060d9..b2ce0e9a1 100644
--- a/webapp/apps/gateway-ui/src/assets/css/override/_p-select.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/override/_p-select.scss
@@ -18,6 +18,8 @@
width: 100%;
min-width: 210px;
border: 1px solid $input-default-border-color;
+ background: $input-txt-bg-color;
+ color: $input-txt-color;
@include text-ellipsis();
@include transition(box-shadow $transitionDuration, border-color $transitionDuration);
@@ -26,6 +28,7 @@
.p-select-label:focus,
.p-select-label:hover {
border: none;
+ color: $input-txt-color;
margin-right: 1.5em;
}
@@ -71,7 +74,8 @@
}
.p-select-overlay {
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
+ color: $dropdown-item-txt-color;
margin-top: -1px; /* hack to simulate a thin line */
border: 1px solid $dropdown-overlay-border-color;
box-shadow: $defaultBoxShadow;
@@ -92,7 +96,7 @@
.p-select-filter-container {
padding: $headerPadding;
border-bottom: 1px solid $admin-separator-color;
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
.p-select-filter {
width: 100%;
@@ -121,11 +125,11 @@
@include custom-scrollbar();
.p-select-list {
- background: $dropdown-container-bg-color;
+ background: var(--main-body-bg);
padding: 0;
.p-select-option {
- background: $dropdown-item-bg-color;
+ background: var(--main-body-bg);
color: $dropdown-item-txt-color;
margin: 0;
padding: $listItemPadding;
@@ -141,6 +145,12 @@
color: $dropdown-item-selected-txt-color;
}
+ &[data-p-focused='true'],
+ &.p-focus {
+ background-color: $dropdown-item-selected-bg-hover-color;
+ color: $dropdown-item-txt-color;
+ }
+
&:not(.p-select-option-selected):not(.p-disabled):hover {
background-color: $dropdown-item-selected-bg-hover-color;
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/style/base.scss b/webapp/apps/gateway-ui/src/assets/css/style/base.scss
index 77d0b59a5..ebd2fade3 100644
--- a/webapp/apps/gateway-ui/src/assets/css/style/base.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/style/base.scss
@@ -41,7 +41,7 @@ body {
color: $default-text-color;
overflow: hidden;
min-height: 100%;
- background-color: #f5f5f5;
+ background-color: var(--background-secondary-color, #f5f5f5);
}
router-outlet {
@@ -71,6 +71,29 @@ a,
text-decoration: none;
}
+.gateway-icon-action {
+ transition:
+ background-color $transitionDuration ease-in-out,
+ color $transitionDuration ease-in-out;
+}
+
+.gateway-more-settings-link {
+ align-items: center;
+ color: var(--text-brand, $default-btn-link-text-color);
+ display: inline-flex;
+ font-weight: 600;
+ gap: 4px;
+ line-height: 18px;
+
+ &:hover {
+ color: var(--accent-brand-300, $default-btn-link-text-color-darker);
+ }
+}
+
+.gateway-more-settings-indicator {
+ font-weight: 700;
+}
+
label {
line-height: 25px;
@@ -639,6 +662,8 @@ body.login-mobile-device {
top: 0;
right: 0;
bottom: 0;
+ pointer-events: none;
+ z-index: 0;
i.dvl-icon.dvl-icon-logo-gateway
{
diff --git a/webapp/apps/gateway-ui/src/assets/css/theme/_dark-theme.scss b/webapp/apps/gateway-ui/src/assets/css/theme/_dark-theme.scss
index e5b9b2ceb..1f561bf65 100644
--- a/webapp/apps/gateway-ui/src/assets/css/theme/_dark-theme.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/theme/_dark-theme.scss
@@ -281,8 +281,8 @@
/* Inputs */
--input-txt-border-hover-color: #00539c;
--input-txt-border-focus-color: #3aa3ff;
- --input-txt-bg-color: var(--dialog-base-bg-color, #1a1a1a);
- --input-txt-bg-disabled-color: #292929;
+ --input-txt-bg-color: #0f1420;
+ --input-txt-bg-disabled-color: var(--bg-300);
--input-txt-border-disabled-color: #333333;
--input-txt-bg-read-only-color: rgba(var(--base-color-rgb), 0.07);
--input-txt-color: #ffffff;
@@ -293,7 +293,7 @@
--input-txt-error-color: #cb0000;
- --input-background-color: var(--dialog-base-bg-color, #1a1a1a);
+ --input-background-color: #0f1420;
--input-border-color: rgba(var(--base-border-rgb), .3);
--input-box-shadow: none;
--input-accent-color: rgb(var(--base-accent-rgb));
@@ -482,4 +482,13 @@
--bg-primary-color: rgba(30, 31, 36, 1);
--bg-secondary-color: #1a1a1a;
+
+ /* Gateway surface tokens */
+ --gateway-workspace-background-color: var(--main-body-bg);
+ --gateway-session-background-color: var(--main-body-bg);
+ --gateway-panel-background-color: #161b26;
+ --gateway-panel-border-color: #2f3441;
+ --gateway-panel-shadow: none;
+ --gateway-panel-hover-background-color: #1c222e;
+ --gateway-sidebar-border-width: 1px;
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/theme/_light-theme.scss b/webapp/apps/gateway-ui/src/assets/css/theme/_light-theme.scss
index 693087a89..225680423 100644
--- a/webapp/apps/gateway-ui/src/assets/css/theme/_light-theme.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/theme/_light-theme.scss
@@ -254,6 +254,7 @@
--tree-selector-border-color: #e8e8e8;
--tree-selector-text-color: #424242;
--tree-selector-text-highlight-color: #000;
+ --main-tree-item-highlight-color: #e7f4ff;
--tree-item-selected-bg-color: #e7f4ff;
--tree-item-hover-bg-color: #e7f4ff;
--tree-search-input-bg-color: #fff;
@@ -264,7 +265,7 @@
--input-txt-border-hover-color: #88C8FF;
--input-txt-border-focus-color: #0068c3;
--input-txt-bg-color: #fff;
- --input-txt-bg-disabled-color: #f5f5f5;
+ --input-txt-bg-disabled-color: var(--bg-300);
--input-txt-bg-read-only-color: #F3F3F3;
--input-txt-border-disabled-color: #dcdcdc;
--input-txt-color: #212121;
@@ -463,5 +464,14 @@
--bg-secondary-color: rgba(240, 242, 247, 1);
/* Version */
- --label-version-color:rgba(82, 82, 82, 1)
+ --label-version-color: rgba(189, 189, 189, 1);
+
+ /* Gateway surface tokens */
+ --gateway-workspace-background-color: var(--main-body-bg);
+ --gateway-session-background-color: var(--main-body-bg);
+ --gateway-panel-background-color: #ffffff;
+ --gateway-panel-border-color: rgba(0, 0, 0, 0.07);
+ --gateway-panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ --gateway-panel-hover-background-color: #f5f5f5;
+ --gateway-sidebar-border-width: 1px;
}
diff --git a/webapp/apps/gateway-ui/src/assets/css/theme/_root-theme.scss b/webapp/apps/gateway-ui/src/assets/css/theme/_root-theme.scss
index c6d790cb0..4a13163f3 100644
--- a/webapp/apps/gateway-ui/src/assets/css/theme/_root-theme.scss
+++ b/webapp/apps/gateway-ui/src/assets/css/theme/_root-theme.scss
@@ -34,4 +34,55 @@
--status-banner-error-color-rgb: 255, 26, 26;
--status-banner-neutral-color-rgb: 0, 0, 0;
--status-banner-background-opacity: .25;
+
+ --font-open-sans: 'Open Sans', sans-serif;
+ --font-roboto: 'Roboto', sans-serif;
+ --border-radius: 4px;
+
+ --blue-primary: #0068c3;
+ --blue-900: #003e75;
+ --blue-800: #00539c;
+ --blue-700: #0068c3;
+ --blue-500: #1f85eb;
+ --blue-300: #88c8ff;
+
+ --red-primary: #ff1a1a;
+ --red-900: #b70000;
+ --red-800: #de0000;
+ --red-700: #ff1a1a;
+ --red-500: #ff6868;
+ --red-300: #ffb7b7;
+
+ --green-primary: #61aa30;
+ --green-900: #2d4e16;
+ --green-800: #508b27;
+ --green-700: #61aa30;
+ --green-500: #7ecc49;
+ --green-300: #caecb4;
+
+ --yellow-primary: #f0c909;
+ --yellow-900: #725f00;
+ --yellow-800: #946200;
+ --yellow-700: #f0c909;
+ --yellow-500: #ffda23;
+ --yellow-300: #fff5c0;
+
+ --orange-primary: #ff8200;
+ --orange-900: #763c00;
+ --orange-800: #eb7800;
+ --orange-700: #ff8200;
+ --orange-500: #ffa500;
+ --orange-300: #ffcf9d;
+
+ --grey-primary: #424242;
+ --grey-900: #212121;
+ --grey-800: #333333;
+ --grey-700: #525252;
+ --grey-600: #707070;
+ --grey-500: #999999;
+ --grey-400: #b8b8b8;
+ --grey-300: #bdbdbd;
+ --grey-200: #e0e0e0;
+ --grey-100: #f5f5f5;
+ --grey-0: #ffffff;
}
diff --git a/webapp/apps/gateway-ui/src/client/app/app.component.ts b/webapp/apps/gateway-ui/src/client/app/app.component.ts
index 49583e37a..9d0b071d1 100644
--- a/webapp/apps/gateway-ui/src/client/app/app.component.ts
+++ b/webapp/apps/gateway-ui/src/client/app/app.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { BaseComponent } from '@shared/bases/base.component';
import { AuthService } from '@shared/services/auth.service';
import { NavigationService } from '@shared/services/navigation.service';
+import { ThemeService } from '@shared/services/theme.service';
import { BehaviorSubject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -18,11 +19,13 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(
private authService: AuthService,
private readonly navigationService: NavigationService,
+ private readonly themeService: ThemeService,
) {
super();
}
ngOnInit(): void {
+ this.themeService.initialize();
this.subscribeRouteChanged();
this.authService.startExpirationCheck();
}
diff --git a/webapp/apps/gateway-ui/src/client/app/app.module.ts b/webapp/apps/gateway-ui/src/client/app/app.module.ts
index 985c5dccb..704ef91ff 100644
--- a/webapp/apps/gateway-ui/src/client/app/app.module.ts
+++ b/webapp/apps/gateway-ui/src/client/app/app.module.ts
@@ -8,7 +8,6 @@ import { ExtraOptions, RouterModule } from '@angular/router';
import { AuthInterceptor } from '@gateway/app-auth.interceptor';
import { MenuListActiveSessionsComponent } from '@gateway/modules/base/menu/menu-list-active-sessions/menu-list-active-sessions.component';
import { LoginComponent } from '@gateway/modules/login/login.component';
-import Aura from '@primeuix/themes/aura';
import { GatewayAlertMessageComponent } from '@shared/components/gateway-alert-message/gateway-alert-message.component';
import { GatewayAlertMessageService } from '@shared/components/gateway-alert-message/gateway-alert-message.service';
import { LoadingService } from '@shared/services/loading.service';
@@ -32,6 +31,7 @@ import { MainAppComponent } from './modules/base/main-app/main-app.component';
import { AppMenuComponent } from './modules/base/menu/app-menu.component';
import { MenuGroupListItemComponent } from './modules/base/menu/menu-group-list-item/menu-group-list-item.component';
import { MenuListItemComponent } from './modules/base/menu/menu-list-item/menu-list-item.component';
+import DvlPreset from './styles/dvl.preset';
const routerOptions: ExtraOptions = {
paramsInheritanceStrategy: 'always',
@@ -75,13 +75,13 @@ const routerOptions: ExtraOptions = {
provideAnimationsAsync(),
providePrimeNG({
theme: {
- preset: Aura,
+ preset: DvlPreset,
options: {
prefix: 'p',
- darkModeSelector: 'system',
+ darkModeSelector: '.dark-theme',
cssLayer: {
name: 'primeng',
- order: 'primeng, custom',
+ order: 'reset, theme, base, general, components, utilities, primeng, fixes',
},
},
},
diff --git a/webapp/apps/gateway-ui/src/client/app/modules/base/main-app/main-app.component.html b/webapp/apps/gateway-ui/src/client/app/modules/base/main-app/main-app.component.html
index 6dcf1ceb0..3d4dd9843 100644
--- a/webapp/apps/gateway-ui/src/client/app/modules/base/main-app/main-app.component.html
+++ b/webapp/apps/gateway-ui/src/client/app/modules/base/main-app/main-app.component.html
@@ -3,7 +3,8 @@
[ngClass]="{'layout-mobile-active': staticMenuMobileActive}">
-
}
-
+
+
+ } @else {
+
+ }