@nova-ui/bits/sdk/less/nui-framework-colors.less

SolarWinds Nova Framework

//
// Defines the color scheme of the Apollo look and feel.
//
// Add '/* SECTION: nameOfSection' to create a named section and include
// colors into it (all colors from that point until next section will
// be included)
// Add '// unofficial' at the end of line for not including the color
// into section and thus not to display it in api-docs/demo
// --------------------------------------------------

//Warning!  Any variable in this file will set a css variable

@import (reference) "nui-framework-palette.less";

/* backgrounds */
/* SECTION: backgrounds */
@nui-color-bg-transparent: @transparent;
@nui-color-bg-content: @white;
@nui-color-bg-content-hover: shade(@white, 5%);
@nui-color-bg-content_popover: @white;
@nui-color-bg-secondary: shade(@white, 2%);
@nui-color-bg-workspace: shade(@white, 6%);
@nui-color-bg-transparent-hover: fade(@black, 5%);
@nui-color-bg-table_header: shade(@white, 6%);
@nui-color-bg-accordion_header: fade(@black, 6%);
@nui-color-bg-accordion_header-hover: fade(@black, 11%);
@nui-color-bg-inverse: @black;
@nui-color-bg-platformbar: @black;
@nui-color-bg-platformbar-secondary: tint(@black, 10%);
@nui-color-bg-platformbar-secondary-hover: @black;
@nui-color-bg-table_header-hover: shade(@white, 11%);
@nui-color-bg-inverse-hover: tint(@black, 10%);
@nui-color-bg-platformbar-hover: tint(@black, 15%);
@nui-color-bg-light: @white; // unofficial
@nui-color-bg-light-hover: darken(@white, 5%); // unofficial
@nui-color-bg-dark: @black; // unofficial
@nui-color-bg-dark-offset: fade(@black, 5%); // unofficial
@nui-color-bg-dark-offset-hover: fade(@black, 10%); // unofficial
@nui-color-bg-mid_dark: @light_black; // unofficial
@nui-color-bg-dark-hover: lighten(@black, 15%); // unofficial
@nui-color-bg-mid_dark-hover: darken(@light_black, 15%); // unofficial

/* effects & interactions */
/* SECTION: effects and interactions */
@nui-color-active: @primary_blue;
@nui-color-active-hover: shade(@primary_blue, 10%);
@nui-color-selected: fade(@cyan, 10%);
@nui-color-selected-hover: fade(@cyan, 20%);
@nui-color-selected-active: fade(@cyan, 20%); // unofficial
@nui-color-selected-contrast: @cyan;
@nui-color-selected-contrast-hover: shade(@cyan, 10%);
@nui-color-drag_selection: shade(@cyan, 40%);
@nui-color-on: @ok_green;
@nui-color-off: shade(@white, 70%);
@nui-color-off-offset: lighten(@nui-color-off, 30%); // unofficial
@nui-color-off-offset2: fade(@nui-color-off, 30%); // unofficial
@nui-color-disabled: shade(@white, 30%);
@nui-color-disabled-secondary: shade(@white, 9%);
@nui-color-disabled-light: @color-disabled-light; // unofficial
@nui-color-progress: @cyan;
@nui-color-focus: fade(@cyan, 50%);
@nui-color-busy-default: fade(@cyan, 20%);
@nui-color-busy-destructive: fade(@critical_red, 20%);
@nui-color-search_highlight: fade(@swi_orange, 30%);

/* texts */
/* SECTION: texts */
@nui-color-text-default: @black;
@nui-color-text-default-hover: darken(
    @nui-color-text-default,
    10%
); // unofficial
@nui-color-text-secondary: fade(@black, 60%);
@nui-color-text-link: @primary_blue;
@nui-color-text-link-inverse: tint(@primary_blue, 30%);
@nui-color-text-disabled: fade(@black, 30%);
@nui-color-text-light: @white;
@nui-color-text-inverse: @white;
@nui-color-text-light-secondary: fade(@white, 60%); // unofficial
@nui-color-text-inverse-secondary: fade(@white, 60%);
@nui-color-text-inverse-disabled: fade(@white, 30%);
@nui-color-text-highlight-platform_bar: @swi_orange;
@nui-color-text-highlight-platform_bar-blue: @blue_cyan;
@nui-color-text-critical: @critical_red;
@nui-color-text-ok: @ok_green;
@nui-color-text-warning: @black;

/* lines */
/* SECTION: lines */
@nui-color-line-default: shade(@white, 15%);
@nui-color-line-default-hover: shade(@white, 30%);
@nui-color-line-default-transparent: fade(@black, 15%);
@nui-color-line-secondary: fade(@nui-color-line-default, 70%);
@nui-color-line-strong: shade(@white, 40%);
@nui-color-line-dark: shade(@white, 40%);
@nui-color-line-inverse: @white;
@nui-color-line-highlight: @black;
@nui-color-line-light: @white; // unofficial
@nui-color-line-active: @primary_blue;
@nui-color-line-critical: @critical_red;
@nui-color-line-warning: @warning_yellow;
@nui-color-line-info: @info_blue;
@nui-color-line-ok: @ok_green;
@nui-color-line-ok-secondary: fade(@ok_green, 40%);
@nui-color-line-ok-secondary-hover: fade(@ok_green, 50%);
@nui-color-line-ok-graph: fade(@ok_green, 40%); // unofficial
@nui-color-line-ok-graph-hover: fade(@ok_green, 50%); // unofficial
@nui-color-line-action: @cyan; // unofficial
@nui-color-line-selected-contrast: @cyan;
@nui-color-line-threshold-critical: fade(@nui-color-line-critical, 60%);
@nui-color-line-threshold-warning: @nui-color-line-warning;

/* icons */
/* SECTION: icons */
@nui-color-icon-active: @primary_blue;
@nui-color-icon-default: fade(@black, 50%);
@nui-color-icon-light: @white; // unofficial
@nui-color-icon-inverse: @white;
@nui-color-icon-critical: @critical_red;
@nui-color-icon-disabled: fade(@black, 30%);
@nui-color-icon-highlight-platform_bar: @swi_orange;
@nui-color-icon-highlight: @black;
@nui-color-icon-highlight-default: @black; // unofficial
@nui-color-icon-warning: @warning_yellow;
@nui-color-icon-ok: @ok_green;
@nui-color-icon-info: @info_blue;

/* overlays */
/* SECTION: overlays */
@nui-color-overlay-dark: fade(@black, 50%); // unofficial
@nui-color-overlay-light: fade(@white, 90%); // unofficial
@nui-color-overlay-modal: fade(@black, 50%);
@nui-color-overlay-busy: fade(@nui-color-bg-content, 90%);
@nui-color-overlay-busy-secondary: fade(@nui-color-bg-secondary, 90%);

/* SECTION: scrollbars */
@nui-color-bg-scroll_handle_container: @transparent;
@nui-color-bg-scroll_handle: fade(@black, 20%);
@nui-color-bg-scroll_handle-hover: fade(@black, 30%);

/* brand */
/* SECTION: brand */
@nui-color-brand: @swi_orange;
@nui-color-brand-hover: shade(@swi_orange, 10%);
@nui-color-brand-two: @swi_gray;
@nui-color-brand-three: @swi_green;
@nui-color-brand-four: @swi_yellow;
@nui-color-brand-five: @swi_blue;
@nui-color-brand-six: @swi_dark_gray;
@nui-color-brand-seven: @swi_light_gray;

//status and severity
//these colors were removed from the official palette in UIF-1173
//keeping them here pending final decision
/* SECTION: status and severity */
@nui-color-semantic-down: @down_red;
@nui-color-semantic-down-hover: shade(@down_red, 10%);
@nui-color-semantic-critical: @critical_red;
@nui-color-semantic-critical-hover: shade(@critical_red, 10%);
@nui-color-semantic-critical-bg: tint(@critical_red, 90%);
@nui-color-semantic-critical-bg-hover: tint(@critical_red, 80%);
@nui-color-semantic-critical-bg-threshold: fade(
    @nui-color-semantic-critical,
    30%
);
@nui-color-semantic-warning: @warning_yellow;
@nui-color-semantic-warning-hover: shade(@warning_yellow, 10%);
@nui-color-semantic-warning-bg: tint(@warning_yellow, 90%);
@nui-color-semantic-warning-bg-hover: tint(@warning_yellow, 80%);
@nui-color-semantic-warning-bg-threshold: fade(
    @nui-color-semantic-warning,
    30%
);
@nui-color-semantic-down-bg: tint(@down_red, 90%);
@nui-color-semantic-down-bg-hover: tint(@down_red, 80%);
@nui-color-semantic-ok: @ok_green;
@nui-color-semantic-ok-hover: shade(@ok_green, 10%);
@nui-color-semantic-info: @info_blue;
@nui-color-semantic-info-hover: shade(@info_blue, 10%);
@nui-color-semantic-unknown: @unknown_gray;
@nui-color-semantic-unknown-hover: shade(@unknown_gray, 10%);
@nui-color-semantic-ok-bg: tint(@ok_green, 90%);
@nui-color-semantic-ok-bg-hover: tint(@ok_green, 80%);
@nui-color-semantic-info-bg: tint(@info_blue, 90%);
@nui-color-semantic-info-bg-hover: tint(@info_blue, 80%);
@nui-color-semantic-unknown-bg: tint(@unknown_gray, 90%);
@nui-color-semantic-unknown-bg-hover: tint(@unknown_gray, 80%);

/* chart colors */
/* SECTION: charts */
@nui-color-chart-one-dark: shade(@chart-blue, 40%);
@nui-color-chart-two-dark: shade(@chart-pink, 40%);
@nui-color-chart-three-dark: shade(@chart-seagreen, 40%);
@nui-color-chart-four-dark: shade(@chart-violet, 40%);
@nui-color-chart-five-dark: shade(@chart-limegreen, 40%);
@nui-color-chart-six-dark: shade(@chart-orange, 40%);
@nui-color-chart-seven-dark: shade(@chart-ultramarine, 40%);
@nui-color-chart-eight-dark: shade(@chart-bordeaux, 40%);
@nui-color-chart-nine-dark: shade(@chart-ochroid, 40%);
@nui-color-chart-ten-dark: shade(@chart-anthracite, 40%);

@nui-color-chart-one: @chart-blue;
@nui-color-chart-two: @chart-pink;
@nui-color-chart-three: @chart-seagreen;
@nui-color-chart-four: @chart-violet;
@nui-color-chart-five: @chart-limegreen;
@nui-color-chart-six: @chart-orange;
@nui-color-chart-seven: @chart-ultramarine;
@nui-color-chart-eight: @chart-bordeaux;
@nui-color-chart-nine: @chart-ochroid;
@nui-color-chart-ten: @chart-anthracite;

@nui-color-chart-one-light: tint(@chart-blue, 60%);
@nui-color-chart-two-light: tint(@chart-pink, 60%);
@nui-color-chart-three-light: tint(@chart-seagreen, 60%);
@nui-color-chart-four-light: tint(@chart-violet, 60%);
@nui-color-chart-five-light: tint(@chart-limegreen, 60%);
@nui-color-chart-six-light: tint(@chart-orange, 60%);
@nui-color-chart-seven-light: tint(@chart-ultramarine, 60%);
@nui-color-chart-eight-light: tint(@chart-bordeaux, 60%);
@nui-color-chart-nine-light: tint(@chart-ochroid, 60%);
@nui-color-chart-ten-light: tint(@chart-anthracite, 60%);

@nui-color-chart-sum: @black;
@nui-color-chart-percentile: fade(@black, 80%);

/*  Legacy Chart colors
    Chart color names changed with v8 release. These are now deprecated.
    It is strongly recommended to switch to new naming before v9.
*/
@nui-chart-one-dark: shade(@chart-blue, 40%); // unofficial
@nui-chart-two-dark: shade(@chart-pink, 40%); // unofficial
@nui-chart-three-dark: shade(@chart-seagreen, 40%); // unofficial
@nui-chart-four-dark: shade(@chart-violet, 40%); // unofficial
@nui-chart-five-dark: shade(@chart-limegreen, 40%); // unofficial
@nui-chart-six-dark: shade(@chart-orange, 40%); // unofficial
@nui-chart-seven-dark: shade(@chart-ultramarine, 40%); // unofficial
@nui-chart-eight-dark: shade(@chart-bordeaux, 40%); // unofficial
@nui-chart-nine-dark: shade(@chart-ochroid, 40%); // unofficial
@nui-chart-ten-dark: shade(@chart-anthracite, 40%); // unofficial

@nui-chart-one: @chart-blue; // unofficial
@nui-chart-two: @chart-pink; // unofficial
@nui-chart-three: @chart-seagreen; // unofficial
@nui-chart-four: @chart-violet; // unofficial
@nui-chart-five: @chart-limegreen; // unofficial
@nui-chart-six: @chart-orange; // unofficial
@nui-chart-seven: @chart-ultramarine; // unofficial
@nui-chart-eight: @chart-bordeaux; // unofficial
@nui-chart-nine: @chart-ochroid; // unofficial
@nui-chart-ten: @chart-anthracite; // unofficial

@nui-chart-one-light: tint(@chart-blue, 60%); // unofficial
@nui-chart-two-light: tint(@chart-pink, 60%); // unofficial
@nui-chart-three-light: tint(@chart-seagreen, 60%); // unofficial
@nui-chart-four-light: tint(@chart-violet, 60%); // unofficial
@nui-chart-five-light: tint(@chart-limegreen, 60%); // unofficial
@nui-chart-six-light: tint(@chart-orange, 60%); // unofficial
@nui-chart-seven-light: tint(@chart-ultramarine, 60%); // unofficial
@nui-chart-eight-light: tint(@chart-bordeaux, 60%); // unofficial
@nui-chart-nine-light: tint(@chart-ochroid, 60%); // unofficial
@nui-chart-ten-light: tint(@chart-anthracite, 60%); // unofficial
// end of legacy chart colors

@nui-progress-ripple-color: fade(@white, 40%); // unofficial
@nui-border-fade: fade(@nui-color-line-default, 70%); // unofficial
@nui-color-tab-link: @mid_gray; // unofficial
@nui-color-line-offset: fade(@nui-color-line-default, 50%); // unofficial

@nui-color-btn1-focusBrd: darken(@nui-color-line-default, 5.5%); // unofficial
@nui-color-btn1-activeOpenBrd: darken(
    @nui-color-line-default,
    12%
); // unofficial
@nui-color-btn1-activeHoverBrd: darken(
    @nui-color-line-default,
    25%
); // unofficial
@nui-color-btn2-focusBk: darken(@nui-color-text-link, 5.5%); // unofficial
@nui-color-btn2-activeOpenBk: darken(@nui-color-text-link, 12%); // unofficial
@nui-color-btn2-activeHoverBk: darken(@nui-color-text-link, 25%); // unofficial
@nui-color-btn4-focus: darken(@nui-color-active, 5.5%); // unofficial
@nui-color-btn4-activeOpen: darken(@nui-color-active, 12%); // unofficial
@nui-color-btn4-activeHover: darken(@nui-color-active, 25%); // unofficial

@nui-color-input-box-shadow: fade(@nui-color-line-default, 50%); // unofficial
@nui-color-input-box-shadow-hover: fade(
    @nui-color-line-default,
    60%
); // unofficial

//** Shadow color
@nui-shadow-color: fade(@black, 30%);
@nui-shadow-color-stronger: fade(@black, 60%);

//** Background color for `<body>`.
@body-bg: @nui-color-bg-workspace; // unofficial
//** Global text color on `<body>`.
@text-color: @nui-color-text-default; // unofficial

//** Global textual link color.
@link-color: @nui-color-text-link; // unofficial
//** Link hover color set via `darken()` function.
@link-hover-color: @nui-color-text-link; // unofficial

//** Border color for inputs on focus
@input-border-focus: @nui-color-line-active; // unofficial

//** Placeholder text color
@input-color-placeholder: @nui-color-text-secondary; // unofficial

@kbd-color: @white; // unofficial
@kbd-bg: @light_black; // unofficial

@pre-color: @light_black; // unofficial
@pre-border-color: @nui-color-line-default; // unofficial

//** Text muted color
@text-muted: @nui-color-text-secondary; // unofficial
//** Abbreviations and acronyms border color
@abbr-border-color: @nui-color-line-default; // unofficial
//** Headings small color
@headings-small-color: @nui-color-text-secondary; // unofficial
//** Blockquote small color
@blockquote-small-color: @nui-color-text-secondary; // unofficial

//** Page header border color
@page-header-border-color: @nui-color-line-default; // unofficial

//** Horizontal line color.
@hr-border: @nui-color-line-default; // unofficial

//** Thumbnail background color
@thumbnail-bg: @body-bg; // unofficial

//** Background color, that .nui-scroll-shadow class will try to simulate
@nui-color-bg-scroll: @nui-color-bg-content; // unofficial

//** Code component colors
@nui-code-bg-color: @nui-color-bg-mid_dark; // unofficial
@nui-code-color: @nui-color-bg-content; // unofficial