@eclipse-scout/core/src/style/colors.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
/* -------------------------------- */
/* Scout default theme              */
/* extends: -                       */
/* affects: Scout OSS               */
/* -------------------------------- */

/* -------------------------------- */
/* Color palette                    */
/* -------------------------------- */

@palette-black: #000;
@palette-white: #fff;

@palette-red-0: #FEE0E0;
@palette-red-1: #FFBFBF;
@palette-red-2: #FF8888;
@palette-red-3: #FF5555;
@palette-red-4: #D53F3F; // Accessible
@palette-red-5: #AB3434;

@palette-green-0: #DCFBF5;
@palette-green-1: #BDF2E8;
@palette-green-2: #67E9D1;
@palette-green-3: #1FC9AA;
@palette-green-4: #0DA98C;
@palette-green-5: #00856C; // Accessible

@palette-blue-0: #E9F0F6;
@palette-blue-1: #C1DEF9;
@palette-blue-2: #74A8D8;
@palette-blue-3: #1561A7;
@palette-blue-4: #014786;
@palette-blue-5: #2F3C45;

@palette-gray-0: @palette-white;
@palette-gray-1: #FAFAFA;
@palette-gray-2: #F5F5F5;
@palette-gray-3: #EFEFEF;
@palette-gray-4: #DADADA;
@palette-gray-5: #CFCFCF;
@palette-gray-5-1: #B2B2B2;
@palette-gray-6: #999999;
@palette-gray-6-1: #808080;
@palette-gray-7: #666666; // Accessible
@palette-gray-8: #5C5C5C;
@palette-gray-9: #4C4C4C; // Dark Font
@palette-gray-10: #262626;

@palette-orange-0: #FCF0E5;
@palette-orange-1: #FDE1B1;
@palette-orange-2: #FFBE6B;
@palette-orange-3: #FE9915;
@palette-orange-4: #DA8312;
@palette-orange-5: #AD6200; // Accessible

// Accent colors are used to guide the user (default buttons, focus, selection etc.) and for main layout elements like the header.
// Ideally, only these colors need to be changed for a custom color scheme.
@accent-color-0: @palette-blue-0;
@accent-color-1: @palette-blue-1;
@accent-color-2: @palette-blue-2;
@accent-color-3: @palette-blue-3;
@accent-color-4: @palette-blue-4;
@accent-color-5: @palette-blue-5;

/* -------------------------------- */
/* Global colors                    */
/* -------------------------------- */

@active-color: @accent-color-3;
@active-background-color: fade(@palette-black, 12%);
@active-solid-background-color: darken(@hover-solid-background-color, 5%);
@application-loading-background-color: @palette-white;
@application-loading01-color: fade(@accent-color-3, 90%);
@application-loading02-color: @palette-green-3;
@background-color: @palette-white;
@body-background-color: @palette-white;
@border-color: @palette-gray-4;
@control-background-color: transparent;
@control-border-color: fade(@palette-black, 23%); // Fade to make it work on white as well on darker background. A little more intense than the regular border color to show the control is interactive.
@control-color: @text-color;
@control-disabled-background-color: transparent;
@control-disabled-color: @text-disabled-color;
@control-disabled-border-color: @border-color;
@disabled-color: @palette-gray-6-1;
@disabled-inverted-color: fade(@palette-white, 40%);
@drop-shadow-alpha: 0.2;
@drop-shadow-large-alpha: 0.2;
@error-color: @palette-red-4;
@warning-color: @palette-orange-5;
@info-color: @accent-color-3;
@ok-color: @palette-green-5;
@error-background-color: @palette-red-0;
@error-border-color: @error-color;
@error-default-button-background-hover-color: darken(@error-color, 6%);
@error-default-button-background-active-color: darken(@error-color, 13%);
@error-focus-box-shadow-color: fade(@error-color, 40%);
@warning-default-button-background-hover-color: darken(@warning-color, 6%);
@warning-default-button-background-active-color: darken(@warning-color, 13%);
@warning-focus-box-shadow-color: fade(@warning-color, 40%);
@ok-default-button-background-hover-color: darken(@ok-color, 6%);
@ok-default-button-background-active-color: darken(@ok-color, 13%);
@ok-focus-box-shadow-color: fade(@ok-color, 40%);
@focus-border-color: @accent-color-3;
@focus-box-shadow-color: darken(@accent-color-1, 10%);
@focus-box-shadow-border-color: darken(@focus-box-shadow-color, 10%);
@focus-color: @accent-color-3;
@highlight-color: @palette-orange-3;
@highlight-inverted-background-color: @highlight-color;
@hover-color: @accent-color-3;
@hover-background-color: fade(@palette-black, 8%); // Use fade to make it more independent from the background color
@hover-solid-background-color: darken(@palette-gray-3, 3%);
@icon-color: @text-color;
@icon-disabled-color: @palette-gray-5;
@icon-inverted-color: @palette-white;
@icon-light-color: @palette-gray-6;
@icon-light-hover-color: @palette-gray-10;
@item-selection-background-color: @accent-color-0;
@item-selection-border-color: @selected-background-color;
@item-selection-disabled-background-color: @palette-gray-4;
@item-selection-disabled-border-color: @palette-gray-6;
@item-selection-nonfocus-background-color: @palette-gray-1;
@item-selection-nonfocus-border-color: @palette-gray-5;
@item-active-background-color: @active-background-color;
@label-color: @palette-gray-7;
@label-disabled-color: @palette-gray-6;
@loading-indicator-knight-rider-color: @accent-color-3;
@link-color: @accent-color-3;
@link-active-color: @accent-color-5;
@link-hover-color: lighten(@link-color, 10%);
@panel-background-color: @palette-gray-2;
@read-only-color: @text-color;
@selected-active-background-color: darken(@selected-hover-background-color, 10%);
@selected-background-color: @accent-color-3;
@selected-disabled-background-color: @palette-gray-6-1;
@selected-color: @text-inverted-color;
@selected-hover-background-color: @accent-color-4;
@selected-with-popup-background-color: @active-background-color;
@sub-title-color: @label-color;
@text-color: @palette-black;
@text-color-1: @palette-gray-9;
@text-color-2: @palette-gray-7;
@text-color-3: @palette-gray-6; // Use with care because it is actually not accessible
@text-inverted-color: @palette-white;
@text-disabled-color: @palette-gray-7;
@text-selection-background-color: @accent-color-3;
@text-selection-color: @text-inverted-color;
@text-selection-disabled-background-color: @palette-gray-7;
@text-selection-disabled-color: @palette-gray-3;
@text-field-alternative-background-color: transparent;
@text-field-alternative-border-color: @control-border-color;
@text-field-alternative-disabled-border-color: @palette-gray-5;
@text-field-icon-color: @palette-gray-6-1;
@text-field-icon-hover-color: @closer-hover-color;
@text-field-icon-error-color: @error-border-color;
@text-field-icon-focus-color: @focus-border-color;
@text-field-placeholder-color: fade(@palette-black, 55%); // Should have enough contrast to be readable on dimmed background as well
@title-color: @text-color;

/* -------------------------------- */
/* Component specific colors        */
/* -------------------------------- */

@browser-field-background-color: @palette-white; /* always white to not change the look of the website */
@button-active-color: @active-color;
@button-active-background-color: @active-background-color;
@button-background-color: @control-background-color;
@button-border-color: @button-color;
@button-color: @link-color;
@button-disabled-background-color: transparent;
@button-disabled-border-color: @control-disabled-border-color;
@button-disabled-color: @disabled-color;
@button-hover-color: @button-color;
@busyindicator-color: @accent-color-3;
@calendar-component-color: @palette-black;
@calendar-component-intro-color: @text-color-3;
@calendar-day-color: @text-color-2;
@calendar-day-selected-background-color: @selected-background-color;
@calendar-day-selected-color: @selected-color;
@calendar-line-color: @planner-large-scale-item-line-color;
@calendar-light-line-color: @planner-small-scale-item-line-color;
@calendar-mode-selected-background-color: @item-selection-background-color;
@calendar-mode-selected-color: @accent-color-5;
@calendar-out-background-color: transparent;
@calendar-out-color: @palette-gray-5;
@calendar-title-color: @title-color;
@calendar-week-axis-color: @palette-gray-6;
@calendar-weekend-color: @palette-blue-4;
@calendar-weekend-out-background-color: transparent;
@calendar-weekend-out-color: @palette-blue-2;
@carousel-status-item-color: @palette-gray-5;
@carousel-status-item-hover-color: @palette-gray-6;
@carousel-current-item-color: @palette-black;
@cell-editor-background-color: @palette-white;
@check-box-border-color: @palette-gray-6;
@check-box-checked-color: @selected-color;
@check-box-checked-background-color: @selected-background-color;
@check-box-checked-border-color: @check-box-checked-background-color;
@check-box-checked-disabled-background-color: @selected-disabled-background-color;
@check-box-disabled-border-color: @border-color;
@closer-action-color: @palette-gray-7;
@closer-color: @icon-light-color;
@closer-hover-color: @icon-light-hover-color;
@collapse-handle-active-background-color: @active-solid-background-color;
@collapse-handle-background-color: @background-color;
@collapse-handle-border-color: @palette-gray-4;
@collapse-handle-color: @palette-gray-8;
@collapse-handle-hover-background-color: @hover-solid-background-color; // Don't use @hover-background-color here because it would shine through
@column-background-effect-gradient1-start-background-color: @palette-red-2;
@column-background-effect-gradient1-end-background-color: @palette-green-1;
@column-background-effect-gradient2-start-background-color: @palette-green-1;
@column-background-effect-gradient2-end-background-color: @palette-red-2;
@column-background-effect-bar-chart-background-color: @palette-blue-2;
@command-button-border-color: @border-color;
@command-button-selected-color: @selected-color;
@command-button-selected-border-color: @selected-background-color;
@command-button-selected-background-color: @selected-background-color;
@compact-outline-data-background-color: @dimmed-background-color;
@compact-outline-menu-item-disabled-color: @disabled-inverted-color;
@context-menu-item-color: @text-color;
@context-menu-item-icon-color: @link-color;
@dashboard-tile-border-color: darken(@palette-gray-3, 5%);
@dashboard-tile-default-selected-border-color: @item-selection-border-color;
@dashboard-tile-default-inverted-selected-border-color: @palette-blue-5;
@dashboard-tile-alternative-selected-border-color: @tile-alternative-inverted-background-color;
@dashboard-tile-alternative-inverted-selected-border-color: @palette-black;
@date-picker-day-hover-background-color: @hover-background-color;
@date-picker-day-selected-color: @selected-color;
@date-picker-day-selected-background-color: @selected-background-color;
@date-picker-day-preselected-background-color: fade(@palette-black, 4%);
@date-picker-day-disabled-color: darken(@palette-gray-4, 10%);
@date-picker-now-color: @palette-orange-5;
@date-picker-out-color: @palette-gray-6-1;
@date-picker-weekday-color: @label-color;
@date-picker-arrow-color: @palette-gray-6;
@date-picker-separator-color: fade(@palette-black, 10%);
@default-button-active-background-color: @selected-active-background-color;
@default-button-selected-background-color: @default-button-active-background-color;
@default-button-background-color: @selected-background-color;
@default-button-color: @selected-color;
@default-button-hover-background-color: @selected-hover-background-color;
@default-combo-menu-separator-color: @border-color;
@desktop-bench-background-color: @background-color;
@desktop-bench-drop-shadow-color: fade(@palette-black, 10%);
@desktop-bench-tab-area-background-color: @dimmed-background-color;
@desktop-logo-background-color: @background-color;
@desktop-navigation-handle-active-background-color: @collapse-handle-active-background-color;
@desktop-navigation-handle-background-color: @collapse-handle-background-color;
@desktop-navigation-handle-border-color: @collapse-handle-border-color;
@desktop-navigation-handle-color: @collapse-handle-color;
@desktop-navigation-handle-hover-background-color: @collapse-handle-hover-background-color;
@desktop-navigation-body-in-background-background-color: @palette-gray-2;
@desktop-notification-background-color: @popup-2-background-color;
@desktop-notification-ok-border-color: @ok-color;
@desktop-notification-info-border-color: @info-color;
@desktop-notification-warning-border-color: @warning-color;
@desktop-notification-error-border-color: @error-color;
@desktop-header-color: @palette-white;
@desktop-header-disabled-color: @disabled-inverted-color;
@desktop-header-background-color: @accent-color-3;
@desktop-header-border-color: @border-color;
@desktop-tab-background-color: fade(@palette-black, 10%);
@desktop-tab-border-color: transparent;
@desktop-tab-flash-background-color: fade(@palette-black, 40%);
@desktop-tab-closer-hover-background-color: fade(@palette-black, 14%);
@desktop-tab-closer-active-background-color: fade(@palette-black, 20%);
@desktop-tab-sub-title-color: fade(@desktop-header-color, 70%);
@desktop-tab-status-color: @desktop-tab-sub-title-color;
@desktop-tab-selected-color: @title-color;
@desktop-tab-selected-sub-title-color: @sub-title-color;
@desktop-tab-selected-save-needer-color: fade(@palette-black, 23%);
@desktop-tab-selected-flash-background-color: darken(@simple-tab-selected-background-color, 20%);
@desktop-tab-hover-background-color: @view-tab-hover-background-color;
@desktop-tool-box-item-hover-background-color: @view-tab-hover-background-color;
@desktop-tool-box-item-selected-background-color: fade(@palette-black, 30%);
@detail-table-header-background-color: @table-header-background-color;
@detail-table-header-border-color: @table-header-border-color;
@detail-table-footer-background-color: @table-footer-background-color;
@dimmed-background-color: @palette-gray-2;
@form-menu-popup-main-menubar-background-color: @menubar-background-color;
@group-header-color: inherit;
@key-box-background-color: @palette-orange-1;
@key-box-border-color: @key-box-background-color;
@key-box-background-disabled-color: @palette-gray-5;
@key-box-border-disabled-color: @key-box-background-disabled-color;
@key-box-color: @palette-black;
@main-menubar-background-color: @menubar-background-color;
@menubar-background-color: @control-background-color;
@menu-item-color: @link-color;
@menu-item-disabled-color: @disabled-color;
@mode-color: @palette-gray-7;
@mode-selected-background-disabled-color: @selected-disabled-background-color;
@mode-alternative-selected-background-color: @palette-white;
@mode-alternative-selected-background-disabled-color: @palette-gray-4;
@mode-alternative-background-color: rgba(0, 0, 0, 0.08);
@mode-alternative-hover-background-color: rgba(0, 0, 0, 0.05);
@mode-alternative-active-background-color: rgba(0, 0, 0, 0.1);
@navigate-up-button-border-color: @button-border-color;
@navigate-up-button-color: @button-color;
@desktop-navigation-background-color: @desktop-header-background-color;
@desktop-navigation-body-background-color: @background-color;
@desktop-navigation-color: @palette-gray-10;
@notification-alternative-ok-background-color: @palette-green-0;
@notification-alternative-info-background-color: @accent-color-0;
@notification-alternative-warning-background-color: @palette-orange-0;
@notification-alternative-error-background-color: @palette-red-0;
@notification-alternative-ok-color: darken(@ok-color, 3%); // Colors need to be a little darker on a background to make them accessible
@notification-alternative-info-color: @text-color;
@notification-alternative-warning-color: darken(@warning-color, 3%);
@notification-alternative-error-color: darken(@error-color, 8%);
@notification-alternative-info-marker-color: @info-color;
@notification-ok-border-color: @ok-color;
@notification-info-border-color: @info-color;
@notification-warning-border-color: @warning-color;
@notification-error-border-color: @error-color;
@outline-breadcrumb-border-color: @border-color;
@outline-breadcrumb-ancestor-background-color: @desktop-navigation-body-background-color;
@outline-breadcrumb-child-background-color: @desktop-navigation-body-background-color;
@outline-breadcrumb-node-active-background-color: @hover-background-color;
@outline-group-background-color: @accent-color-0;
@outline-in-background-group-background-color: darken(@desktop-navigation-body-in-background-background-color, 5%);
@outline-in-background-selection-background-color: @selected-disabled-background-color;
@outline-in-background-selection-color: @outline-selection-color;
@outline-selection-background-color: @selected-background-color;
@outline-selection-color: @selected-color;
@outline-title-color: @outline-selection-background-color;
@outline-title-border-color: @border-color;
@outline-node-control-color: @outline-node-font-icon-color;
@outline-node-selected-control-color: fade(@outline-selection-color, 70%);
@outline-node-selected-icon-color: @outline-node-selected-control-color;
@outline-node-font-icon-color: @icon-light-color;
@planner-large-scale-item-line-color: fade(@palette-black, 20%);
@planner-small-scale-item-line-color: fade(@palette-black, 7%);
@planner-mode-selected-color: @calendar-mode-selected-color;
@planner-mode-selected-background-color: @calendar-mode-selected-background-color;
@planner-selector-resize-background-color: @background-color;
@planner-resource-title-color: @palette-gray-7;
@planner-timeline-background-color: @panel-background-color;
@planner-activity-color: @text-color;
@planner-activity-level-background-color: @palette-white;
@popup-background-color: @background-color;
@popup-backdrop-background-color: @background-color;
@popup-backdrop-filter: none;
@popup-2-background-color: @background-color; // relevant for dark theme only
@popup-2-backdrop-background-color: @background-color; // relevant for dark theme only
@popup-2-backdrop-filter: none; // relevant for dark theme only
@popup-border-color: @border-color;
@profile-menu-icon-background: linear-gradient(180deg, @palette-blue-4 -145%, @accent-color-2 56%);
@profile-menu-icon-color: @icon-inverted-color;
@proposal-chooser-status-background-color: @panel-background-color;
@radio-button-border-color: @check-box-border-color;
@radio-button-checked-color: @selected-background-color;
@radio-button-checked-disabled-background-color: @selected-disabled-background-color;
@radio-button-disabled-border-color: @check-box-disabled-border-color;
@save-needer-color: @icon-light-color;
@scrollbar-thumb-main-color: @palette-gray-6;
@scrollbar-thumb-color: fade(@scrollbar-thumb-main-color, 30%);
@scrollbar-thumb-hover-color: fade(@scrollbar-thumb-main-color, 45%);
@scrollbar-thumb-small-color: fade(@scrollbar-thumb-main-color, 15%);
@scrollbar-thumb-small-hover-color: fade(@scrollbar-thumb-main-color, 15%);
@scrollbar-thumb-inverted-main-color: @palette-white;
@scrollbar-thumb-inverted-color: fade(@scrollbar-thumb-inverted-main-color, 20%);
@scrollbar-thumb-inverted-hover-color: fade(@scrollbar-thumb-inverted-main-color, 40%);
@scrollbar-thumb-inverted-small-color: fade(@scrollbar-thumb-inverted-main-color, 15%);
@scrollbar-thumb-inverted-small-hover-color: fade(@scrollbar-thumb-inverted-main-color, 15%);
@scroll-shadow-alpha: 30%;
@scroll-shadow-color: rgba(0, 0, 0, @scroll-shadow-alpha);
@scroll-shadow-gradient-color: @background-color;
@status-menu-color: @palette-gray-7;
@status-menu-hover-color: @text-field-icon-hover-color;
@status-ok-color: @ok-color;
@status-ok-hover-color: darken(@status-ok-color, 10%);
@status-info-color: @text-field-icon-color; /* do not use the @info-color here as the icon should have the same color as field icons */
@status-info-hover-color: @text-field-icon-hover-color;
@status-warning-color: @warning-color;
@status-warning-hover-color: darken(@status-warning-color, 10%);
@status-error-color: @error-color;
@status-error-hover-color: darken(@status-error-color, 10%);
@switch-background-color: fade(@palette-black, 12%);
@switch-border-color: transparent;
@switch-activated-background-color: @selected-background-color;
@switch-disabled-background-color: transparent;
@switch-disabled-border-color: @check-box-disabled-border-color;
@switch-disabled-activated-background-color: @selected-disabled-background-color;
@switch-handle-background-color: @palette-white;
@switch-handle-border-color: @palette-gray-4;
@switch-handle-disabled-background-color: @palette-gray-1;
@switch-handle-disabled-border-color: @palette-gray-4;
@switch-icon-color: @text-disabled-color;
@switch-icon-activated-color: @palette-blue-3;
@switch-icon-disabled-color: @palette-gray-5-1;
@switch-icon-disabled-activated-color: @switch-icon-disabled-color;
@switch-style-default-handle-activated-background-color: @switch-handle-background-color;
@switch-style-slider-background-color: @palette-gray-5-1;
@switch-style-slider-disabled-background-color: @palette-gray-4;
@table-aggregate-cell-selection-color: @accent-color-3;
@table-aggregate-row-background-color: @table-header-background-color;
@table-compact-cell-content-color: @text-color;
@table-control-active-color: @link-active-color;
@table-control-color: @link-color;
@table-control-container-background-color: @background-color;
@table-control-disabled-color: @disabled-color;
@table-control-hover-color: @hover-color;
@table-control-resize-border-color: @border-color;
@table-control-selected-color: @table-control-color;
@table-control-selected-background-color: @selected-with-popup-background-color;
@table-footer-background-color: @background-color;
@table-header-background-color: @panel-background-color;
@table-header-border-color: @border-color;
@table-header-item-color: @palette-gray-9;
@table-header-item-state-color: @palette-gray-7;
@table-header-menu-filter-number-column-color: @palette-gray-8;
@table-header-resize-color: @border-color;
@table-header-resize-hover-color: @table-header-resize-color;
@table-header-sort-color: @table-header-item-state-color;
@table-info-color: @label-color;
@table-info-error-color: @error-color;
@table-info-error-hover-color: @palette-red-4;
@table-info-hover-color: @palette-gray-7;
@table-info-warning-color: @info-color;
@table-info-warning-hover-color: @accent-color-4;
@table-row-active-background-color: @item-active-background-color;
@table-structure-row-background-color: @table-aggregate-row-background-color;
@table-row-border-color: fade(@palette-black, 13%); // Use transparent color to improve the look of cells with a background color
@table-row-checked-background-color: @selected-background-color;
@table-row-checked-color: @selected-color;
@table-row-control-color: @tree-node-control-color;
@tab-area-border-color: @border-color;
@tab-item-color: @text-color;
@tab-item-active-color: @tab-item-hover-color;
@tab-item-focus-color: lighten(@tab-item-hover-color, 5%);
@tab-item-hover-color: @hover-color;
@tab-item-selected-color: @title-color;
@tab-item-marked-border-color: @palette-gray-6;
@tab-item-selection-marker-color: @selected-background-color;
@tag-element-background-color: @palette-blue-1;
@tag-element-hover-background-color: darken(@tag-element-background-color, 8%);
@tag-element-active-background-color: darken(@tag-element-background-color, 12%);
@tag-element-focus-background-color: @tag-element-hover-background-color;
@tag-overflow-element-selected-background-color: darken(@tag-element-background-color, 12%);
@tag-overflow-element-selected-color: @palette-blue-5;
@tag-icon-color: @palette-blue-3;
@tag-text-color: @palette-black;
@tile-background-color: @palette-gray-1;
@tile-border-color: @border-color;
@tile-active-background-color: @active-background-color;
@tile-selection-background-color: @item-selection-background-color;
@tile-selection-border-color: @item-selection-border-color;
@tile-alternative-background-color: @tile-default-background-color;
@tile-alternative-color: @tile-default-color;
@tile-alternative-label-color: @tile-default-label-color;
@tile-alternative-link-color: @tile-default-link-color;
@tile-alternative-link-active-color: @tile-default-link-active-color;
@tile-alternative-link-hover-color: @tile-default-link-hover-color;
@tile-alternative-inverted-background-color: @palette-gray-9;
@tile-alternative-inverted-selection-background-color: @palette-gray-7;
@tile-alternative-inverted-color: @tile-default-inverted-color;
@tile-alternative-inverted-label-color: @tile-alternative-inverted-color;
@tile-alternative-inverted-link-hover-color: fade(@tile-alternative-inverted-color, 85%);
@tile-alternative-inverted-link-active-color: fade(@tile-alternative-inverted-color, 75%);
@tile-alternative-inverted-status-hover-background-color: @tile-default-inverted-status-hover-background-color;
@tile-alternative-inverted-status-active-background-color: @tile-default-inverted-status-active-background-color;
@tile-button-alternative-inverted-active-background-color: darken(@tile-alternative-inverted-background-color, 10);
@tile-button-alternative-inverted-hover-background-color: darken(@tile-alternative-inverted-background-color, 5);
@tile-button-alternative-inverted-color: @tile-button-default-inverted-color;
@tile-button-alternative-inverted-icon-color: @tile-button-default-inverted-icon-color;
@tile-button-default-active-background-color: darken(@tile-default-background-color, 4%);
@tile-button-default-hover-background-color: darken(@tile-default-background-color, 2%);
@tile-button-default-icon-color: @palette-gray-5-1;
@tile-button-default-inverted-active-background-color: darken(@tile-default-inverted-background-color, 10);
@tile-button-default-inverted-hover-background-color: darken(@tile-default-inverted-background-color, 5);
@tile-button-default-inverted-color: @palette-white;
@tile-button-default-inverted-icon-color: @tile-button-default-inverted-color;
@tile-default-background-color: @background-color;
@tile-default-border-color: @palette-gray-4;
@tile-default-color: @label-color;
@tile-default-link-color: @link-color;
@tile-default-link-active-color: @tile-default-link-hover-color;
@tile-default-link-hover-color: @link-hover-color;
@tile-default-label-color: @label-color;
@tile-default-inverted-background-color: @palette-blue-3;
@tile-default-inverted-selection-background-color: @palette-blue-2;
@tile-default-inverted-color: @text-inverted-color;
@tile-default-inverted-label-color: @tile-default-inverted-color;
@tile-default-inverted-link-hover-color: fade(@tile-default-inverted-color, 85%);
@tile-default-inverted-link-active-color: fade(@tile-default-inverted-color, 75%);
@tile-default-inverted-status-hover-background-color: fade(@palette-black, 15%);
@tile-default-inverted-status-active-background-color: fade(@palette-black, 20%);
@tile-default-inverted-error-status-color: @palette-red-3;
@tile-default-inverted-error-status-hover-color: @tile-default-inverted-error-status-color;
@tile-placeholder-background-color: @palette-gray-3;
@tile-scrollbar-thumb-inverted-main-color: @palette-gray-4;
@tile-scrollbar-thumb-inverted-color: fade(@tile-scrollbar-thumb-inverted-main-color, 30%);
@tile-scrollbar-thumb-inverted-hover-color: fade(@tile-scrollbar-thumb-inverted-main-color, 45%);
@tile-scrollbar-thumb-inverted-small-color: fade(@tile-scrollbar-thumb-inverted-main-color, 15%);
@tile-scrollbar-thumb-inverted-small-hover-color: fade(@tile-scrollbar-thumb-inverted-main-color, 15%);
@tile-table-default-color: @text-color-1;
@tile-table-default-inverted-selection-background-color: lighten(@tile-default-inverted-background-color, 5%);
@tile-table-default-inverted-selection-border-color: fade(@palette-white, 50%);
@tile-table-default-inverted-border-color: fade(@palette-white, 25%);
@tile-table-alternative-inverted-selection-background-color: lighten(@tile-alternative-inverted-background-color, 5%);
@tile-table-alternative-inverted-selection-border-color: @tile-table-default-inverted-selection-border-color;
@time-picker-disabled-color: @date-picker-day-disabled-color;
@time-picker-hours-color: @date-picker-weekday-color;
@time-picker-now-color: @date-picker-now-color;
@time-picker-now-selected-color: @time-picker-selected-color;
@time-picker-selected-color: @date-picker-day-selected-color;
@time-picker-selected-background-color: @date-picker-day-selected-background-color;
@time-picker-preselected-background-color: @date-picker-day-preselected-background-color;
@tooltip-ok-background-color: @ok-color;
@tooltip-ok-color: @text-inverted-color;
@tooltip-info-background-color: @palette-gray-9;
@tooltip-border-color: @border-color;
@tooltip-info-color: @text-inverted-color;
@tooltip-menu-color: @text-inverted-color;
@tooltip-small-color: @tooltip-info-color;
@tooltip-warning-background-color: @warning-color;
@tooltip-warning-color: @text-inverted-color;
@tooltip-error-background-color: @error-color;
@tooltip-error-color: @text-inverted-color;
@tooltip-menu-hover-background-color: fade(@palette-white, 15%);
@top-label-color: @label-color;
@top-label-disabled-color: @label-disabled-color;
@tree-node-active-background-color: @item-active-background-color;
@tree-node-control-color: inherit;
@view-tab-selected-color: @outline-title-color;
@view-tab-selected-background-color: @desktop-navigation-body-background-color;
@view-tab-in-background-selected-background-color: @desktop-navigation-body-in-background-background-color;
@view-tab-hover-background-color: fade(@palette-black, 20%);
@view-menu-tab-hover-background-color: fade(@palette-black, 10%);
@view-menu-tab-menu-selected-background-color: fade(@palette-black, 20%);
@view-menu-tab-selected-menu-selected-background-color: @selected-with-popup-background-color;
@view-menu-tab-background-color: @view-tab-hover-background-color;
@view-menu-tile-background-color: @palette-gray-1;
@view-menu-tile-hover-background-color: @hover-background-color;
@view-menu-tile-selected-border-color: @item-selection-border-color;
@simple-tab-sub-title-color: @sub-title-color;
@simple-tab-selected-background-color: @background-color;
@simple-tab-selected-color: @title-color;
@simple-tab-background-color: @panel-background-color;
@simple-tab-status-notification-badge-background-color: @palette-red-4;
@simple-tab-status-notification-badge-color: @palette-white;
@slider-track-background-color: @palette-gray-5-1;
@slider-track-disabled-background-color: @palette-gray-4;
@slider-track-color: @palette-blue-3;
@slider-track-disabled-color: @palette-gray-6-1;
@slider-thumb-color: @palette-white;
@slider-thumb-active-color: @palette-gray-1;
@slider-thumb-border-color: @palette-gray-4;
@slider-thumb-active-border-color: @palette-gray-5;
@slider-thumb-disabled-color: @palette-gray-1;
@slider-thumb-disabled-border-color: @palette-gray-5;
@wizard-steps-border-color: @border-color;
@wizard-step-selected-icon-background-color: @selected-background-color;
@wizard-step-selected-icon-color: @selected-color;
@wizard-step-disabled-background-color: inherit;
@wizard-step-disabled-border-color: @border-color;
@wizard-step-disabled-color: @disabled-color;
@wizard-step-background-color: inherit;
@wizard-step-icon-border-color: @border-color;
@wizard-step-finished-background-color: @palette-green-0;
@wizard-step-finished-color: @ok-color;
@year-panel-range-background-color: @item-selection-background-color;
@year-panel-range-hover-background-color: @year-panel-range-background-color;
@year-panel-range-day-background-color: @selected-background-color;
@year-panel-title-item-color: @text-color-3;
@year-panel-weekend-background-color: @palette-gray-7;