bimplus-styles/src/less/_variables.less

Shared style files for BIMPLUS projects

@import (once) "_tokens";
@import (once) "_cursors";

:root {
  // Primary Button
  --primary-button-background-color-enabled: var(--color-background-button-primary-enabled);
  --primary-button-background-color-hovered: var(--color-background-button-primary-hover);
  --primary-button-background-color-pressed: var(--color-background-button-primary-pressed);
  --primary-button-background-color-focused: @colors-semantic-cyan-c-900;
  --primary-button-background-color-disabled: var(--color-background-button-primary-disabled);
  --primary-button-border-color-enabled: var(--primary-button-background-color-enabled);
  --primary-button-border-color-hovered: var(--primary-button-background-color-hovered);
  --primary-button-border-color-pressed: var(--primary-button-background-color-pressed);
  --primary-button-border-color-focused: var(--primary-button-background-color-focused);
  --primary-button-border-color-disabled: var(--primary-button-background-color-disabled);
  --primary-button-text-color-enabled: @colors-neutral-white;
  --primary-button-text-color-hovered: @colors-neutral-white;
  --primary-button-text-color-pressed: @colors-neutral-white;
  --primary-button-text-color-focused: @colors-neutral-white;
  --primary-button-text-color-disabled: var(--color-text-button-primary-disabled);

  // Secondary Button
  --secondary-button-background-color-enabled: var(--color-background-button-secondary-enabled);
  --secondary-button-background-color-hovered: var(--color-background-button-secondary-hover);
  --secondary-button-background-color-pressed: @colors-brand-allpan-100;
  --secondary-button-background-color-focused: @colors-brand-allpan-50;
  --secondary-button-background-color-disabled: var(--color-background-button-secondary-disabled);
  --secondary-button-border-color-enabled: var(--primary-button-border-color-enabled);
  --secondary-button-border-color-hovered: var(--primary-button-border-color-hovered);
  --secondary-button-border-color-pressed: var(--primary-button-border-color-pressed);
  --secondary-button-border-color-focused: var(--primary-button-border-color-focused);
  --secondary-button-border-color-disabled: var(--primary-button-border-color-disabled);
  --secondary-button-text-color-enabled: var(--secondary-button-border-color-enabled);
  --secondary-button-text-color-hovered: var(--secondary-button-border-color-hovered);
  --secondary-button-text-color-pressed: var(--secondary-button-border-color-pressed);
  --secondary-button-text-color-focused: var(--secondary-button-border-color-focused);
  --secondary-button-text-color-disabled: var(--secondary-button-border-color-disabled);

  // tertiary Button
  --tertiary-button-background-color-enabled: var(--color-background-button-tertiary-enabled);
  --tertiary-button-background-color-hovered: var(--color-background-button-tertiary-hover);
  --tertiary-button-background-color-pressed: var(--color-background-button-tertiary-pressed);
  --tertiary-button-background-color-disabled: var(--color-background-button-tertiary-disabled);
  --tertiary-button-text-color: var(--color-text-highlight-light);
  --tertiary-button-text-color-disabled: var(--color-text-button-tertiary-disabled);

  // Main Menu Start
  --brand-sidebar-background: var(--colors-neutral-black);
  --main-menu-backgroud-default: var(--color-background-sidebar-default);
  --main-menu-backgroud-hover: var(--color-background-sidebar-hover);
  --main-menu-backgroud-pressed: var(--color-background-sidebar-pressed);
  --main-menu-text-default: var(--color-text-on-primary);
  --main-menu-separator: var(--color-text-muted);
  --main-menu-border-active: var(--color-brand-light);
  --main-menu-submenu-backgroud-default: var(--color-background-sidebar-default);
  --main-menu-submenu-backgroud-hover: var(--color-background-sidebar-hover);
  --main-menu-submenu-backgroud-pressed: var(--color-background-sidebar-pressed);
  --main-menu-submenu-text-default: var(--color-text-on-primary);
  --main-menu-submenu-text-active: var(--color-text-highlight-dark);
  --main-menu-submenu-text-disabled: var(--color-text-muted);
  --main-menu-app-item-text-color-enabled: var(--color-text-main-menu-app-item-enabled);
  --main-menu-app-item-text-color-disabled: @colors-neutral-grey-400;
  // MainMenu End

  // Scrollbar Start
  --color-scrollbar-bar: var(--color-fill-color);
  --color-scrollbar-background: var(--color-background-layer-2);
  --fast-scroll-box-shadow-color: var(--color-fast-scroll-box-shadow);
  // Scrollbar End

  // Card Start
  --card-background-color: var(--colors-neutral-white);
  --card-box-shadow-default: var(--drop-shadow-default);
  // Card End

  // Inputs Start
  --input-background-color-default: var(--colors-neutral-white);
  --input-background-color-disabled: var(--color-background-layer-1);
  --input-border-color-default: var(--color-border-input-default);
  --input-border-color-hover: var(--color-border-input-hover);
  --input-border-color-focus: var(--color-border-input-focus);
  --input-border-color-focus-shadow: var(--color-border-input-focus-shadow);
  --input-border-color-disabled: var(--color-border-input-disabled);
  --input-border-color-success-default: var(--color-border-input-success-default);
  --input-border-color-success-dark: var(--color-border-input-success-dark);
  --input-border-color-error-default: var(--color-border-input-error-default);
  --input-border-color-error-dark: var(--color-border-input-error-dark);
  --input-border-color-warning-default: var(--color-border-input-warning-default);
  --input-border-color-warning-dark: var(--color-border-input-warning-dark);
  --input-message-color-error: var(--color-text-feedback-error-dark);
  --input-message-color-warning: var(--color-text-feedback-warning-dark);
  --input-message-color-success: var(--color-text-muted);
  --input-flyout-backgroud-color-default: var(--color-background-layer-1);
  --input-flyout-backgroud-color-hover: var(--color-background-layer-2);
  --input-flyout-backgroud-color-focus: var(--color-background-layer-3);
  --input-flyout-backgroud-color-disabled: var(--color-background-layer-3);
  --input-placeholder-color-default: var(--color-background-layer-1);
  --input-text-color-disabled: var(--color-text-muted);
  --checkbox-background-color-hovered: var(--colors-brand-allpan-100);
  // Inputs End

  // Toaster Start
  --toaster-border-error: var(--color-border-error-default);
  --toaster-border-warning: var(--color-border-warning-default);
  --toaster-border-success: var(--color-border-success-default);
  --toaster-border-info: var(--color-border-info-default);
  --toaster-background-error: var(--color-background-toaster-error);
  --toaster-background-warning: var(--color-background-toaster-warning);
  --toaster-background-success: var(--color-background-toaster-success);
  --toaster-background-info: var(--color-background-toaster-info);
  --toaster-box-shadow-color: var(--color-toaster-box-shadow);
  --toaster-message-background-color: var(--color-background-toaster-message);
  --toaster-message-info-background-color: var(--color-background-toaster-message-info);
  --toaster-message-warning-background-color: var(--color-background-toaster-message-warning);
  --toaster-message-warning-border-color: var(--color-border-toaster-message-warning);
  // Toaster End

  // Status Start
  --status-open-background: var(--color-background-chip-open);
  --status-in-progress-background: var(--color-background-chip-in-progress);
  --status-on-hold-background: var(--color-background-chip-on-hold);
  --status-resolved-background: var(--color-background-chip-resolved);
  --status-cancelled-background: var(--color-background-chip-cancelled);
  --status-open-border: var(--color-border-chip-open);
  --status-in-progress-border: var(--color-border-chip-in-progress);
  --status-on-hold-border: var(--color-border-chip-on-hold);
  --status-resolved-border: var(--color-border-chip-resolved);
  --status-cancelled-border: var(--color-border-chip-cancelled);
  --status-message-background-color: var(--color-background-status-message);
  --status-message-close-button-color: var(--color-status-message-close-button);
  // Status End

  // Table Start
  --table-header-background: var(--color-background-table-header);
  --table-row-background: var(--color-background-table-row);
  --table-row-background-hover: var(--color-background-table-row_hover);
  --table-line-background: var(--color-background-table-line);
  --table-sub-background: var(--color-background-table-sub);
  --table-sub-background-hover: var(--color-background-table-sub_hover);
  --table-selected-row-higlight: var(--color-border-highlight);
  --table-border-width-row-highlighted: 0.15rem;
  --table-border-color-default: var(--color-background-layer-1);
  --table-text-search-color: var(--color-table-text-search);
  --table-portal-header-background-color: var(--color-background-table-portal-header);
  --table-portal-toolbar-background-color: var(--color-background-table-portal-toolbar);
  --table-row-border-color: var(--color-table-row-border-color);
  --table-row-selected-border-color: var(--color-table-row-selected-border-color);
  --table-toolbar-text-search-border-color: var(--color-table-toolbar-text-search-border-color);
  --table-toolbar-text-search-background-color: var(--color-table-toolbar-text-search-background-color);
  --table-container-text-search-border-color: var(--color-table-container-text-search-border-color);
  --table-columns-selection-border-color: var(--color-table-columns-selection-border-color);
  --table-portal-border-color: var(--color-table-portal-border);
  --table-portal-toolbar-border-color: var(--color-table-portal-toolbar-border);
  --table-stripe-dark-color: var(--color-table-stripe-dark);
  // Table End

  // Text Start
  --text-link-color-default: var(--color-text-link-default);
  --text-link-color-pressed: var(--color-text-link-pressed);
  --text-color-default: var(--color-text-body);

  // Stepper Start
  --stepper-circle-color-default: var(--color-brand-primary);
  --stepper-circle-color-active: var(--color-brand-light);
  --stepper-circle-color-separator: var(--color-brand-light);
  // Stepper End

  // datepicker start
  --datepicker-background-color: var(--color-datepicker-background);
  --datepicker-border-color: var(--color-datepicker-border);
  --datepicker-border-color-disabled: var(--color-datepicker-border);
  --datepicker-border-color-hover: var(--color-datepicker-border-hover);
  --datepicker-color-disabled: var(--color-datepicker-disabled);
  --datepicker-background-color-disabled: var(--color-datepicker-background-disabled);
  --datepicker-color: var(--color-datepicker);
  --datepicker-container-error-background-color: var(--color-datepicker-container-error-background);
  // datepicker end

  // jstree start
  --jstree-background-color: var(--color-background-general);
  --jstree-multiselect-tree-color: var(--color-jstree-multiselect-tree);
  --jstree-multiselect-tree-selected-color: var(--color-jstree-multiselect-tree);
  --jstree-multiselect-tree-undetermined-color: var(--color-jstree-multiselect-tree);
  --jstree-search-color: var(--color-jstree-search);
  --jstree-search-background-color-focus: var(--color-jstree-search-background-focus);
  --jstree-colorpicker-border-color-disabled: var(--color-jstree-colorpicker-border-disabled);
  --jstree-anchor-clicked-color: var(--color-jstree-anchor-clicked);
  --jstree-selection-undetermined-color: var(--color-jstree-selection-undetermined);
  --jstree-custom-buttons-draggable-background-color-hovered: var(--color-jstree-custom-buttons-draggable-background-hovered);
  --jstree-body-istouch-anchor-background-color: var(--color-jstree-body-istouch-anchor-background);
  --jstree-body-istouch-li-background-color-hovered: var(--color-jstree-body-istouch-li-background-hovered);
  --colorpicker-trigger-border-color: var(--color-colorpicker-trigger-border);
  --colorpicker-default-opaque-chessboard-container-background-color: var(--color-colorpicker-default-opaque-chessboard-container-background);
  --jstree-checkbox-divider-color: var(--color-jstree-checkbox-divider);
  --colorpicker-color-border-color: var(--color-colorpicker-color-border);
  --colorpicker-modable-slider-border-color: var(--color-colorpicker-modable-slider-border);
  --colorpicker-colorpreview-border-color: var(--color-colorpicker-colorpreview-border);
  // jstree end

  // widgets start
  --widget-header-color: var(--color-widget-header);
  --widget-header-background-color: var(--color-widget-header-background);
  // widgets end


  // popup and modal dialogs start
  --popup-dialog-input-background-color: var(--color-background-general);
  --popup-dialog-background-color: var(--color-background-general);
  --popup-dialog-background-color-disabled: var(--color-background-general-disabled);
  --popup-dialog-border-color: var(--color-background-general);
  --popup-dialog-bkg-color: var(--color-popup-dialog-bkg);
  --popup-dialog-title-color: var(--color-popup-dialog-title);
  --popup-dialog-shadow-color: var(--color-popup-dialog-shadow);
  --modal-content-shadow-color: var(--color-modal-content-shadow);
  --modal-content-border-color: var(--color-modal-content-border);
  --button-active-not-disabled-color: var(--color-button-active-not-disabled);
  --popup-menu-content-background-color: var(--color-popup-menu-content-background);
  --pdmodal-select-color: var(--color-pdmodal-select);
  --pdmodal-select-background: var(--color-pdmodal-select-background);
  --pdmodal-select-background-highlighted: var(--color-pdmodal-select-background-highlighted);
  --pdmodal-checkbox-title-disabled-color: var(--color-pdmodal-checkbox-title-disabled);
  --pdmodal-content-background-color: var(--color-pdmodal-content-background);
  --modal-header-border-color: var(--color-modal-header-border);
  --help-popup-title-background-color: var(--color-help-popup-title-background);
  --help-popup-title-color: var(--color-help-popup-title);
  --help-popup-close-button-color: var(--color-help-popup-close-button);
  --popup-dialog-modal-subbody-row-disabled: var(--color-popup-dialog-modal-subbody-row-disabled);
  --popup-dialog-textarea-border-color: var(--color-popup-dialog-textarea-border);
  --popup-dialog-textarea-border-color-hover: var(--color-popup-dialog-textarea-border-hover);
  --popup-dialog-textarea-background-color-hover: var(--color-popup-dialog-textarea-background-hover);
  --popup-dialog-textarea-color-disabled: var(--color-popup-dialog-textarea-disabled);
  --popup-dialog-textinput-color-disabled: var(--color-popup-dialog-textinput-disabled);
  --popup-dialog-textinput-border-color: var(--color-popup-dialog-textinput-border);
  --popup-dialog-text-input-wrapper-color-disabled: var(--color-popup-dialog-text-input-wrapper-disabled);
  --popupwin-item-color-disabled: var(--color-popupwin-item-color-disabled);
  --popupwin-item-color-disabled-hover: var(--color-popupwin-item-color-disabled-hover);
  // popup and modal dialogs end

  // center menu  start
  --center-menu-circle-background-color: var(--color-center-menu-circle-background);
  --center-menu-submenu-border-color: var(--color-center-menu-submenu-border);
  --center-menu-background-color: var(--color-center-menu-background);
  --center-menu-sub-menu-dead-zone-background-color: var(--color-center-menu-sub-menu-dead-zone-background);
  --center-menu-border-color: var(--color-center-menu-border);
  --center-menu-active-color-hovered: var(--color-center-menu-active-color-hovered);
  // center  menu end

  // floating panels start
  --section-cut-settings-background-color-disabled: var(--color-section-cut-settings-background-disabled);
  --section-cut-settings-dialog-background-color: var(--color-section-cut-settings-dialog-background);
  --floating-panel-block-item-color: var(--color-floating-panel-block-item);
  // floating panels end

  --pdmodal-select-dropdown-color: var(--color-pdmodal-select-dropdown);
  --dropdown-caret-color: var(--color-dropdown-caret);
  --login-button-error-background-color: var(--color-login-button-error-background);
  --pdmodal-select-color-disabled: var(--color-pdmodal-select-disabled);
  --app-footer-wormhole-destination-border-color: var(--color-app-footer-wormhole-destination-border);
  --dropdown-content-border-color: var(--color-dropdown-content-border);

  // slides slidelists slideshows start
  --slideslist-border-color: var(--color-brand-light);
  --slideshow-slide-name-edit-border-color: var(--color-slideshow-slide-name-edit-border);
  --slideshow-slide-name-edit-border-color-hover: var(--color-slideshow-slide-name-edit-border-hover);
  --slideshow-slide-name-edit-background-color-focus: var(--color-slideshow-slide-name-edit-background-focus);
  --slideshow-hr-background-color: var(--color-slideshow-hr-background);
  --slide-list-item-image-background-color: var(--color-slide-list-item-image-background);
  // slides slidelists slideshows end

  // overlays start
  --modal-overlay-background-color: var(--color-modal-overlay-background);
  --portal-modal-background-color-overlay: var(--color-background-overlay);
  --portal-modal-background-color-overlay-clear: var(--color-background-overlay-clear);
  --overlay-progress-step-background-color: var(--color-overlay-progress-step-background);
  --overlay-progress-arrow-color: var(--color-overlay-progress-arrow);
  --new-overlay-cover-background-color: var(--color-new-overlay-cover-background);
  --overlay-set-items-background-color: var(--color-overlay-set-items-background);
  --overlay-message-color: var(--color-overlay-message);
  // overlays end

  // issues start
  --issue-details-select-border-color: var(--color-issue-details-select-border);
  --issue-details-bulk-set-color: var(--color-issue-details-bulk-set);
  --issue-emailcc-dropdown-background-color: var(--color-issue-emailcc-dropdown-background);
  --issue-details-img-selobj-background-color: var(--color-issue-details-img-selobj-background);
  --issue-details-view-select-background-color: var(--color-issue-details-view-select-background);
  --issue-details-input-name-background-color-disabled: var(--color-issue-details-input-name-background-disabled);
  // issues end

  // object details start
  --details-object-list-border-color: var(--color-details-object-list-border);
  --object-scenes-tiles-divider-background-color: var(--color-object-scenes-tiles-divider-background);
  --object-scenes-tiles-divider-border-color: var(--color-object-scenes-tiles-divider-border);
  --object-props-table-value-textfield-background-color: var(--color-object-props-table-value-textfield-background);
  --object-props-subheader-background-color: var(--color-object-props-subheader-background);
  // object details end

  // clashdetection start
  --clashdetection-activate-footer: var(--color-clashdetection-activate-footer);
  --clashdetection-newclashset-header-color: var(--color-clashdetection-newclashset-header);
  --clashdetection-tolerance-border-color: var(--color-clashdetection-tolerance-border);
  --clashdetection-tolerance-input-border-color-hover: var(--color-clashdetection-tolerance-input-border-hover);
  --clashdetection-description-tolerance-border-color: var(--color-clashdetection-description-tolerance-border);
  --clashdetection-button-color: var(--color-clashdetection-button);
  --clashdetection-empty-line-image-background-color: var(--color-clashdetection-empty-line-image-background);
  // clashdetection end

  // revisions start
  --revisions-title-background-color: var(--color-revisions-title-background);
  --revisions-popupwin-content-background-color: var(--color-revisions-popupwin-content-background);
  --revisions-title-color: var(--color-revisions-title);
  --revisions-popupwin-close-button-color: var(--color-revisions-popupwin-close-button);
  // revisions end

  // drofus start
  --drofus-settings-list-value-input-disabled: var(--color-drofus-settings-list-value-input-disabled);
  --drofus-settings-list-value-input-background-color-disabled: var(--color-drofus-settings-list-value-input-background-disabled);
  // drofus end

  // radio buttons start
  --radio-button-group-border-color: var(--color-radio-button-group-border);
  --radio-button-group-background-color: var(--color-radio-button-group-background);
  --radio-button-group-input-color-disabled: var(--color-radio-button-group-input-disabled);
  // radio buttons end

  // Miscellaneous Start
  --header-hight: 48px;
  --upload-dropdown-border-color: var(--color-border-default);
  --upload-dropdown-border-color-hover: var(--color-border-hover);
  --page-title-bar: var(--color-brand-light);
  --text-highlight-light-color: var(--color-text-highlight-light);
  --scene-selector-bacground-color: var(--color-scene-selector-background);
  --general-background-color: var(--color-background-general);
  --general-border-color: var(--color-border-general);
  --general-border-color-disabled: var(--color-border-general);
  --brand-dark-color: var(--color-brand-dark);
  --brand-white-color: var(--color-brand-white);
  --brand-primary-color: var(--color-brand-primary);
  --brand-air-color: var(--color-brand-air);
  --brand-light-color: var(--color-brand-light);
  --spinner-wheel-border-color: var(--color-spinner-border);

  --spinner-container-background-color: var(--color-spinner-container-background);
  --params-block-text-item-active-color: var(--color-params-block-text-item-active);
  --project-view-link-hovered: var(--color-project-view-link-hovered);
  --project-view-props-background-color: var(--color-project-view-props-background);
  --project-view-map-content-background-color: var(--color-project-view-map-content-background);
  --project-view-map-content-toolbar-color: var(--color-project-view-map-content-toolbar);
  --project-view-table-content-background-color: var(--color-project-view-table-content-background);
  --project-view-table-tbody-recycle-bin-color: var(--color-project-view-table-tbody-recycle-bin);
  --modable-slider-transparent-background-color: var(--color-modable-slider-transparent-background);
  --modable-slider-background-color: var(--color-modable-slider-background);
  --ui-slider-range-background-color: var(--color-ui-slider-range-background);
  --tabs-panel-title-color: var(--color-tabs-panel-title);
  --structure-details-list-value-color: var(--color-structure-details-list-value);
  --structure-details-pin-invisible-color: var(--color-structure-details-pin-invisible);
  --structure-details-pin-border-color: var(--color-structure-details-pin-border);
  --structure-details-comment-color: var(--color-structure-details-comment);
  --structure-details-name-border-color: var(--color-structure-details-name-border);
  --structure-details-button-border-bottom-color: var(--color-structure-details-button-border-bottom);
  --structure-details-modified-color: var(--color-structure-details-modified);
  --structure-details-img-background-color: var(--color-structure-details-img-background);
  --structure-details-list-value-background-hover-disabled: var(--color-structure-details-list-value-background-hover-disabled);
  --structure-details-img-selobj-background-color: var(--color-structure-details-img-selobj-background);
  --structure-history-input-border-color-hover: var(--color-structure-history-input-border-hover);
  --structure-details-input-text-short-color-hover-enabled: var(--color-structure-details-input-text-short-color-hover-enabled);
  --structure-details-input-name-background-color-disabled: var(--color-structure-details-input-name-background-disabled);
  --context-menu-item-disabled-color: var(--color-context-menu-item-disabled);
  --context-menu-item-background-color-hover: var(--color-context-menu-item-background-hover);
  --context-menu-background-color: var(--color-context-menu-background);
  --context-menu-close-icon-color: var(--color-context-menu-close-icon);
  --context-menu-list-background-color: var(--color-context-menu-list-background);
  --context-menu-list-border-color: var(--color-context-menu-list-border);
  --context-menu-item-label-color: var(--color-context-menu-item-label);

  --top-menu-toolbar-user-color: var(--color-top-menu-toolbar-user);
  --top-menu-toolbar-company-color: var(--color-top-menu-toolbar-company);
  --power-select-multiple-remove-btn-color: var(--color-power-select-multiple-remove-btn);
  --power-select-trigger-color: var(--color-power-select-trigger);
  --power-select-trigger-color-disabled: var(--color-power-select-trigger-disabled);
  --power-select-trigger-color-hover: var(--color-power-select-trigger-hover);
  --power-select-trigger-border-color: var(--color-power-select-trigger-border);
  --power-select-trigger-border-color-hover: var(--color-power-select-trigger-border-hover);
  --power-select-placeholder-color: var(--color-power-select-placeholder);
  --power-select-status-border-color: var(--color-power-select-status-border);
  --power-select-trigger-status-border-color: var(--color-power-select-trigger-status-border);
  --power-select-multiple-options-btn-color: var(--color-power-select-multiple-options-btn);
  --power-select-multiple-options-background-color: var(--color-power-select-multiple-options-background);
  --power-select-search-border-color: var(--color-power-select-search-border);
  --combobox-objectproperty-disabled-power-select-triger-background-color: var(--color-combobox-objectproperty-disabled-power-select-triger-background);
  --input-webkit-autofill-color: var(--color-input-webkit-autofill);
  --forms-input-webkit-autofill-color: var(--color-forms-input-webkit-autofill);
  --ui-text-1-color: var(--color-ui-text-1);
  --dark-gray-color: var(--color-dark-gray); // color not resolved yet
  --obj-prop-view-list-color: var(--color-obj-prop-view-list);
  --obj-prop-table-value-border-color: var(--color-obj-prop-table-value-border);
  --sidemenu-background-color: var(--color-sidemenu-background);
  --sidemenu-contextmenu-mode-background-gradient: linear-gradient(to right, @colors-neutral-white, var(--color-neutral-white-transparency50));
  --sidemenu-navigation-background-color: var(--color-sidemenu-navigation-background);
  --sidemenu-navigation-row-a-color: var(--color-sidemenu-navigation-row-a);
  --sidemenu-navigation-row-a-active-color: var(--color-sidemenu-navigation-row-a-active);
  --sidemenu-navigation-parent-row-color-disabled: var(--color-sidemenu-navigation-parent-row-disabled);
  --sidemenu-navigation-parent-container-color-hovered: var(--color-sidemenu-navigation-parent-container-hovered);
  --sidemenu-navigation-parent-row-color-hovered: var(--color-sidemenu-navigation-parent-row-hovered);
  --sidemenu-navigation-projectinfo-thumbnail-background-color: var(--color-sidemenu-navigation-projectinfo-thumbnail-background);
  --sidemenu-navigation-projectinfo-thumbnail-background-gradient: linear-gradient(var(--colors-neutral-grey-50-transparency80), var(--colors-neutral-grey-50-transparency50) 25%, 75%, var(--colors-neutral-grey-50-transparency80));
  --sidemenu-navigation-projectinfo-thumbnail-projectname-container-background-color: var(--color-sidemenu-navigation-projectinfo-thumbnail-projectname-container-background);
  --form-control-placeholder-color: var(--color-form-control-placeholder);
  --form-control-placeholder-color-disabled: var(--color-form-control-placeholder-disabled);
  --form-help-block-color: var(--color-form-help-block);
  --form-control-border-color: var(--color-form-control-border);
  --form-control-color: var(--color-form-control);
  --components-form-control-color: var(--color-components-form-control);
  --components-form-control-text-field-description-color: var(--color-components-form-control-text-field-description);
  --components-form-control-text-field-control-color: var(--color-components-form-control-text-field-control);
  --components-form-control-border-color: var(--color-components-form-control-border);
  --components-form-control-white-background-color: var(--color-components-form-control-white-background);
  --components-form-control-text-underline-link-border-color: var(--color-components-form-control-text-underline-link-border);
  --components-form-control-white-border-color: var(--color-components-form-control-white-border);
  --components-form-control-white-color: var(--color-components-form-control-white);
  --components-form-control-white-border-color-disabled: var(--color-components-form-control-white-border-disabled);
  --project-list-text-color: var(--color-project-list-text);
  --project-list-border-color: var(--color-project-list-border);
  --project-list-font-color: var(--color-project-list-font);
  --embedded-modal-shadow-color: var(--color-embedded-modal-shadow);
  --embbedded-table-border-color: var(--color-embbedded-table-border);
  --embedded-table-sorted-arrow-color: var(--color-embedded-table-sorted-arrow);
  --embbedded-table-head-background-color: var(--color-embbedded-table-head-background);
  --embedded-table-tbody-tr-nth-of-type: var(--color-embedded-table-tbody-tr-nth-of-type);
  --browser-banner-warning-shadow: var(--color-browser-banner-warning-shadow);
  --params-block-text-item-border-bottom: var(--color-params-block-text-item-border-bottom);
  --comments-list-item-date-color: var(--color-comments-list-item-date);
  --comments-list-item-container-background-color: var(--color-comments-list-item-container-background);
  --middle-light-gray-color: var(--color-middle-light-gray);
  --file-view-border-color: var(--color-file-view-border);
  --navigation-map-floating-panel-border-color: var(--color-navigation-map-floating-panel-border);
  --reports-container-date-color: var(--color-reports-container-date);
  --reports-container-task-report-border-color: var(--color-reports-container-task-report-border);
  --floating-panel-border: var(--color-floating-panel-border);
  --render-info-color: var(--color-render-info);
  --renderer-viewport-background-color: var(--color-renderer-viewport-background);
  --qto-table-resize-handler-border-color: var(--color-qto-table-resize-handler-border);
  --qto-table-resize-handler-background-color: var(--color-qto-table-resize-handler-background);
  --attachmentlink-list-not-found-color: var(--app-footer-wormhole-destination-border-color);
  --control-color-disabled: var(--color-control-color-disabled);
  --control-normal-background-color: var(--color-control-normal-background);
  --clashdetection-filter-selection-head-background-color: var(--color-clashdetection-filter-selection-head-background);
  --projectinfo-grid-column-background-color: var(--color-projectinfo-grid-column-background);
  --projectinfo-grid-toolbar-background-color: var(--color-projectinfo-grid-toolbar-background);
  --projectinfo-grid-column-resizer-background-color: var(--color-projectinfo-grid-column-resizer-background);
  --projectinfo-grid-content-nth-child-background-color: var(--color-projectinfo-grid-content-nth-child-background);
  --projectinfo-grid-header-background-color: var(--color-projectinfo-grid-header-background);
  --projectinfo-grid-content-border-color: var(--color-projectinfo-grid-content-border);
  --projectinfo-grid-content-resizer-fill-background-color: var(--color-projectinfo-grid-content-resizer-fill-background);
  --projectinfo-grid-content-groupheader-background-color: var(--color-projectinfo-grid-content-groupheader-background);
  --projectinfo-grid-content-group-title-background-color: var(--color-projectinfo-grid-content-group-title-background);
  --projectinfo-grid-content-data-background-color: var(--color-projectinfo-grid-content-data-background);
  --kpi-chart-settings-border-color: var(--color-kpi-chart-settings-border);
  --left-menu-content-border-color: var(--color-left-menu-content-border);
  --right-menu-content-border-color: var(--color-right-menu-content-border);
  --drofus-settings-list-value-input-border-color-disabled: var(--color-drofus-settings-list-value-input-border-disabled);
  --underline-switcher-item-highlight-color-hover: var(--color-underline-switcher-item-highlight-hover);
  --underline-switcher-highlight-background-color: var(--color-underline-switcher-highlight-background);
  --underline-switcher-item-highlight-color-hover-disabled: var(--color-underline-switcher-item-highlight-hover-disabled);
  --sidebar-divider-border-color: var(--color-sidebar-divider-border);
  --sidebar-item-name-color-disabled: var(--color-sidebar-item-name-disabled);
  --portal-modal-select-color: var(--color-portal-modal-select);
  --portal-modal-select-color-disabled: var(--color-portal-modal-select-disabled);
  --portal-modal-header-border-color: var(--color-portal-modal-header-border);
  --portal-modal-destination-border-color: var(--color-portal-modal-destination-border);
  --portal-modal-btn-default-border-color: var(--color-portal-modal-btn-default-border);
  --portal-modal-select-background-color: var(--color-portal-modal-select-background);
  --portal-modal-content-header-color: var(--color-portal-modal-content-header);
  --portal-modal-content-header-h1-color: var(--color-portal-modal-content-header-h1);
  --portal-modal-content-header-background-color: var(--color-portal-modal-content-header-background);
  --portal-modal-content-row-color-disabled: var(--color-portal-modal-content-row-disabled);
  --portal-modal-power-select-trigger-color: var(--color-portal-modal-power-select-trigger);
  --portal-modal-power-select-trigger-color-disabled: var(--color-portal-modal-power-select-trigger-disabled);
  --portal-modal-power-select-trigger-border-color-hovered: var(--color-portal-modal-power-select-trigger-border-hovered);
  --portal-modal-power-select-trigger-background-color-hovered: var(--color-portal-modal-power-select-trigger-background-hovered);
  --portal-modal-power-select-trigger-border-color-disabled: var(--color-portal-modal-power-select-trigger-border-disabled);
  --portal-modal-power-select-trigger-background-color-disabled: var(--color-portal-modal-power-select-trigger-background-disabled);
  --portal-modal-power-select-status-icon-border-color: var(--color-portal-modal-power-select-status-icon-border);
  --portal-modal-power-select-placeholder-color: var(--color-portal-modal-power-select-placeholder);
  --portal-modal-close-button-color: var(--color-portal-modal-close-button);
  --project-details-bottom-buttons-background-color: var(--color-project-details-bottom-buttons-background);
  --four-oh-four-pill-btn-color: var(--color-four-oh-four-pill-btn);
  --four-oh-four-pill-btn-background-color: var(--color-four-oh-four-pill-background-btn);
  --four-oh-four-message-color: var(--color-four-oh-four-message);
  --four-oh-four-background-color: var(--color-four-oh-four-background);
  --ui-background-2-color: var(--color-ui-background-2);
  --pd-project-progress-background-color: var(--color-pd-project-progress-background);
  --pd-project-progress-background-two-color: var(--color-pd-project-progress-background-two);
  --pd-project-anchor-button-color: var(--color-pd-project-anchor-button);
  --pd-project-edit-button-color: var(--color-pd-project-edit-button);
  --alternate-row-background-color: var(--color-alternate-row-background);
  --control-background-hover-color: var(--color-control-background-hover);
  --table-settings-stripe-background-color: var(--color-table-settings-stripe-background);
  --header-global-warning-color: var(--color-header-global-warning);
  --header-global-warning-anchor-color: var(--color-header-global-warning-anchor);
  --header-global-warning-background-color: var(--color-header-global-warning-background);

  --header-global-warning-top-menu-webkit-box-shadow-color: var(--color-header-global-warning-top-menu-webkit-box-shadow);
  --header-global-warning-top-menu-moz-box-shadow-color: var(--color-header-global-warning-top-menu-moz-box-shadow);
  --header-global-warning-top-menu-box-shadow-color: var(--color-header-global-warning-top-menu-box-shadow);

  --table-loader-fountain-background-color: var(--color-table-loader-fountain-background);
  --progress-bar-color: var(--color-progress-bar);
  --progress-shadow-color: var(--color-progress-shadow);
  --progress-bar-shadow-color: var(--color-progress-bar-shadow);
  --panel-shadow-color: var(--color-panel-shadow);
  --status-bar-color: var(--color-status-bar);
  --browser-warning-info-background-color: var(--color-browser-warning-info-background);
  --loader-background-color: var(--color-loader-background);
  --browser-banner-background-color: var(--color-browser-banner-background);
  --variantype-popupwin-content-background-color: var(--color-variantype-popupwin-content-background);
  --modal-dialog-content-background-color: var(--color-modal-dialog-content-background);
  --modal-dialog-content-button-border-color: var(--color-modal-dialog-content-button-border);
  --card-box-shadow-title-color: var(--color-card-box-shadow-title);
  --card-box-shadow-subheading-color: var(--color-card-box-shadow-subheading);
  --card-box-shadow-row-color: var(--color-card-box-shadow-row);
  --card-box-shadow-message-color: var(--color-card-box-shadow-message);
  --card-box-shadow-advanced-color: var(--color-card-box-shadow-advanced);
  --card-box-shadow-anchor-color: var(--color-card-box-shadow-anchor);
  --sg-checkbox_span-color: var(--color-sg-checkbox-span);
  --main-background-color: var(--color-main-background);
  --main-background-color-transparent: var(--color-main-background-transparent);
  --main-background-color-transparent-90: var(--color-main-background-transparent-90);
  --main-error-color: var(--color-main-error);
  --main-warning-color: var(--color-main-warning);
  --main-info-color: var(--color-main-info);
  --main-box-shadow08-color: var(--color-main-box-shadow08);
  --main-box-shadow30-color: var(--color-main-box-shadow30);
  --main-box-shadow50-color: var(--color-main-box-shadow50);

  --project-view-background-color: var(--color-main-background-transparent);
  --panel-background-color: var(--color-panel-background);
  --panel-background-color-opaque: var(--color-panel-background-opaque);
  --new-overlay-finished-background-color: var(--color-new-overlay-finished-background);
  --issues-data-grid-background-color: var(--color-issues-data-grid-background);
  --table-transparent-color: var(--color-table-transparent);
  --debug-background-color: var(--color-debug-background);
  --center-menu-circle-border-background-color: var(--color-center-menu-circle-border-background);
  --portal-navbar-box-shadow-color: var(--color-portal-navbar-box-shadow);
  --portal-navbar-color: var(--color-portal-navbar);
  --project-team-selector-thumbnail-fade-background-color: var(--color-project-team-selector-thumbnail-fade-background);
  --project-team-selector-thumbnail-fade-background-color2: var(--color-project-team-selector-thumbnail-fade-background2);
  --project-team-selector-thumbnail-fade-background-color8: var(--color-project-team-selector-thumbnail-fade-background8);
  --left-menu-content-sidebar-topmenu-background-color: var(--color-left-menu-content-sidebar-topmenu-background);
  --window-resize-handler-arrow-background-color: var(--color-window-resize-handler-arrow-background);
  --drop-shadow-default-background-color: var(--color-drop-shadow-default-background);
  --modelviewer-open-file-footer-color: var(--color-modelviewer-open-file-footer);
  --file-view-canvas-background-color: var(--color-file-view-canvas-background);
  --file-view-canvas-background-color-dark: var(--color-file-view-canvas-background-dark);
  --table-scrollable-background-color: var(--color-table-scrollable-background);
  --table-header-row-cell-background-color: var(--color-table-header-row-cell-background);
  --alert-danger-simple-color: var(--color-alert-danger-simple);
  --objects-container-upload-image-cover-gradient8: var(--color-objects-container-upload-image-cover-gradient8);
  --objects-container-upload-image-cover-gradient5: var(--color-objects-container-upload-image-cover-gradient5);
  --objects-container-properties-content-background-color: var(--color-objects-container-properties-content-background);
  --objects-container-properties-upload-image-background-color: var(--colors-neutral-grey-50-transparency60);

  --tab-icon-gray-background-color: var(--color-tab-icon-gray-background);
  --tab-icon-white-background-color: var(--color-tab-icon-white-background);
  --tabs-panel-content-background-color: var(--color-tabs-panel-content-background);
  --tabs-panel-content-span-color: var(--color-tabs-panel-content-span);
  --tabs-panel-control-background-color: var(--color-tabs-panel-control-background);
  --tabs-panel-collapsed-background-color: var(--color-tabs-panel-collapsed-background);
  --tabs-panel-collapsed-navigation-background-color: var(--color-tabs-panel-collapsed-navigation-background);
  --tabs-panel-navigation-border-color: var(--color-tabs-panel-navigation-border);
  --tabs-panel-navigation-background-color: var(--color-tabs-panel-navigation-background);
  --tabs-panel-grouping-icon-backround-color: var(--color-tabs-panel-grouping-icon-backround);
  --upload-image-color: var(--color-upload-image);
  --upload-image-background-color: var(--color-upload-image-background);
  --upload-image-text-shadow-color: var(--color-upload-image-text-shadow);
  --upload-image-border-color: var(--color-upload-image-border);
  --files-modal-with-separator-border-color: var(--color-files-modal-with-separator-border);
  --footer-border-color: var(--color-footer-border);
  --footer-body-background-color: var(--color-footer-body-background);
  --footer-list-item-color: var(--color-footer-list-item);
  --tabs-pd-project-btn-border-color: var(--color-tabs-pd-project-btn-border);
  --tabs-pd-project-btn-group-color: var(--color-tabs-pd-project-btn-group);
  --tabs-pd-project-btn-group-border-color: var(--color-tabs-pd-project-btn-group-border);
  --pd-project-tabs-li-background-color: var(--color-pd-project-tabs-li-background);
  --pd-project-tabs-li-a-background-color: var(--color-pd-project-tabs-li-a-background);
  --upload-dlg-vertical-line-separator-background-color: var(--color-upload-dlg-vertical-line-separator-background);
  --touch-upload-dlg-has-error-border-color: var(--color-touch-upload-dlg-has-error-border);
  --progress-circle-background-color: var(--color-progress-circle-background);
  --progress-circle-span-color: var(--color-progress-circle-span);
  --progress-circle-loader-background-color: var(--color-progress-circle-loader-background);
  --value-bar-border-color: var(--color-value-bar-border);
  --progress-circle-over50-first50-bar-background-color: var(--color-progress-circle-over50-first50-bar-background);
  --upload-dlg-loader-background-color: var(--color-upload-dlg-loader-background);
  --upload-dlg-loader-second-background-color: var(--color-upload-dlg-loader-second-background);
  --upload-dlg-upload-model-name-border-color: var(--color-upload-dlg-upload-model-name-border);
  --upload-dlg-upload-model-name-background-color: var(--color-upload-color-dlg-upload-model-name-background);
  --upload-dlg-transparent-background-color: var(--color-upload-dlg-transparent-background);
  --table-loader-background-color: var(--color-table-loader-background);
  --m-forms-background-color: var(--color-m-forms-background);
  --m-forms-border-color: var(--color-m-forms-border);
  // Miscellaneous End

  --main-menu-app-item-background-color-hovered: @colors-brand-allpan-50;
  --item-divider-border-color-enabled: @colors-brand-allpan-primary-800;

  --project-menu-project-name-background-color: @colors-brand-allpan-primary-800;
  --project-menu-project-name-background-color-disabled: @colors-neutral-grey-600;
  --project-menu-project-name-text-color: @colors-neutral-white;
  --project-menu-background-color: var(--color-project-menu-background);

  --dashboard-tile-bottom-bar-background: linear-gradient(to right, var(--color-neutral-white-transparency70), @colors-brand-allpan-primary-800);
  --dashboard-tile-bottom-bar-background-disabled: linear-gradient(to right, var(--color-neutral-white-transparency70), @colors-neutral-grey-600);
  --dashboard-tile-bottom-bar-label-text-color: @colors-neutral-grey-700;
  --dashboard-tile-bottom-bar-value-text-color: @colors-neutral-white;
  --dashboard-tile-project-info-background-color: @colors-brand-allpan-primary-800;
  --dashboard-tile-project-info-background-color-disabled: @colors-neutral-grey-600;
  --dashboard-tile-project-info-text-color: @colors-neutral-white;
  --dashboard-tile-project-info-text-color-disabled: var(--color-neutral-white-transparency50);
  --dashboard-tile-top-bar-background-color: var(--color-dashboard-tile-top-bar-background);

  --tile-item-box-background-color-selected: @colors-brand-allpan-100;
  --tile-item-box-background-color-hovered: @colors-brand-allpan-50;

  --table-row-odd-background-color-enabled: @colors-neutral-grey-100;
  --table-row-odd-background-color-selected: @colors-brand-allpan-100;
  --table-row-even-background-color-enabled: @colors-neutral-white;
  --table-row-even-background-color-selected: @colors-brand-allpan-50;
  --table-row-border-color-hovered: @colors-neutral-grey-700;

  --dashboard-application-buttons-days-left-color: var(--color-dashboard-application-buttons-days-left);
  --dashboard-application-buttons-link-button-color: var(--color-dashboard-application-buttons-link-button);
  --dashboard-application-buttons-link-button-text-decoration-color: var(--color-dashboard-application-buttons-link-buttontext-decoration);
  --dashboard-info-box-background-color: var(--color-dashboard-info-box-background);
  --dashboard-info-box-hover-box-shadow-color: var(--color-dashboard-info-box-hover-box-shadow);
  --dashboard-info-box-buttons-background-linear-gradient-one-color: var(--color-dashboard-info-box-buttons-background-linear-gradient-one);
  --dashboard-info-box-buttons-background-linear-gradient-two-color: var(--color-dashboard-info-box-buttons-background-linear-gradient-two);
  --dashboard-detail-box-subtitle-color: var(--color-dashboard-detail-box-subtitle);
  --dashboard-documentation-title-underline-background-color: var(--color-dashboard-documentation-title-underline-background);
  --dashboard-message-content-color: var(--color-dashboard-message-content);
  --dashboard-message-item-background-color: var(--color-dashboard-message-item-background);
  --dashboard-message-content-container-background-color: var(--color-dashboard-message-content-container);
  --dashboard-message-title-color: var(--color-dashboard-message-title);
  --dashboard-message-messagelink-color: var(--color-dashboard-message-messagelink);
  --dashboard-message-messagelink-hover-focus-color: var(--color-dashboard-message-messagelink-hover-focus);
  --dashboard-application-container-multiarticle-body-color: var(--color-dashboard-application-container-multiarticle-body);
  --dashboard-application-container-article-breadcrumbs-color: var(--color-dashboard-application-container-article-breadcrumbs);
  --dashboard-application-container-nobullets-color: var(--color-dashboard-application-container-nobullets);
  --dashboard-application-container-promo-msg-color: var(--color-dashboard-application-container-promo-msg);
  --link-inline-color: var(--color-link-inline);
  --darkmode-leaflet-container-background-color: var(--color-darkmode-leaflet-container-background);
  --dashboard-cover-bottom-background-linear-gradient-one-color: var(--color-dashboard-cover-bottom-background-linear-gradient-one);
  --dashboard-cover-bottom-background-linear-gradient-two-color: var(--color-dashboard-cover-bottom-background-linear-gradient-two);
  --dashboard-textpanel-subtitle-color: var(--color-dashboard-textpanel-subtitle);
  --tile-item-box-background-color: var(--color-tile-item-box-background);
  --tile-item-box-share-background-color: var(--color-tile-item-box-share-background);
  --tile-item-box-lock-background-color: var(--color-tile-item-box-lock-background);
  --tile-item-box-lock-name-background-color: var(--color-tile-item-box-lock-name-background);
  --tile-item-box-recycle-bin-color: var(--color-tile-item-box-recycle-bin);
  --tile-item-box-body-background-color: var(--color-tile-item-box-body-background);

  --table-dropdown-item-background-color-selected: @colors-brand-allpan-50;

  --text-area-background-color-focused: @colors-brand-allpan-50;

  --language-submenu-item-background-color-selected: @colors-brand-allpan-50;

  --dropdown-menu-item-background-color-selected: @colors-brand-allpan-50;

  --underline-switcher-background-color-selected: @colors-brand-allpan-primary-800;
  --breadcrumbs-dropdown-hover-background-color: var(--color-breadcrumbs-dropdown-hover-background);
  --notify-modal-server-warning-background-color: var(--color-notify-modal-server-warning-background);
  --notify-modal-checkbox-span-border-color: var(--color-notify-modal-checkbox-span-border);
  --notify-modal-checkbox-span-color: var(--color-notify-modal-checkbox-span);
  --notify-modal-input-checked-border-color: var(--color-notify-modal-input-checked-border);
  --objects-container-center-panel-loading-overlay-background-color: var(--color-objects-container-center-panel-loading-overlay-background);
  --content-sidebar-background-color: var(--color-content-sidebar-background);
  --custom-filter-attribute-name-color: var(--color-custom-filter-attribute-name);
  --custom-filter