@c8y/style/variables/_color-vars.less

Styles for Cumulocity IoT applications

@import '_color-defaults.less';
@import '_forms-vars.less';

@palette-high: var(--c8y-palette-high);
@palette-low: var(--c8y-palette-low);
@black: black; // we need it as a color object

/* grays */
@gray-100: var(--c8y-palette-gray-100);
@gray-90: var(--c8y-palette-gray-90);
@gray-80: var(--c8y-palette-gray-80);
@gray-70: var(--c8y-palette-gray-70);
@gray-60: var(--c8y-palette-gray-60);
@gray-50: var(--c8y-palette-gray-50);
@gray-40: var(--c8y-palette-gray-40);
@gray-30: var(--c8y-palette-gray-30);
@gray-20: var(--c8y-palette-gray-20);
@gray-10: var(--c8y-palette-gray-10);

/* TYPOGRAPHY COLORS - Defined early as used throughout */
/* Text */
@text-color: var(--text-color, var(--c8y-text-color));
@text-muted: var(--text-muted, var(--c8y-text-muted));

/* Brand */
@brand-primary: var(--brand-primary, var(--c8y-brand-primary));
@brand-primary-light: var(--brand-light, var(--c8y-brand-light));
@brand-primary-dark: var(--brand-dark, var(--c8y-brand-dark));
@brand-complementary: var(--brand-complementary, var(--c8y-brand-complementary));
@brand-10: var(--brand-10, var(--c8y-brand-10));
@brand-20: var(--brand-20, var(--c8y-brand-20));
@brand-30: var(--brand-30, var(--c8y-brand-30));
@brand-40: var(--brand-40, var(--c8y-brand-40));
@brand-50: var(--brand-50, var(--c8y-brand-50));
@brand-60: var(--brand-60, var(--c8y-brand-60));
@brand-70: var(--brand-70, var(--c8y-brand-70));
@brand-80: var(--brand-80, var(--c8y-brand-80));
@brand-accent: var(--brand-accent, var(--c8y-brand-accent));
@brand-accent-dark: var(--brand-accent-dark, var(--c8y-brand-accent-dark));
@brand-accent-light: var(--brand-accent-light, var(--c8y-brand-accent-light));

/* Status, feedback states and alerts */
@status-success: var(--palette-status-success, var(--c8y-palette-status-success));
@status-info: var(--palette-status-info, var(--c8y-palette-status-info));
@status-danger: var(--palette-status-danger, var(--c8y-palette-status-danger));
@status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
@status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
@status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
@status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
@status-info-dark: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
@status-danger-light: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
@status-danger-dark: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
@status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
@status-warning-high: var(--c8y-palette-status-warning-high);
@status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
@status-system: var(--palette-status-system, var(--c8y-palette-status-system));

@state-success-text: @text-color;
@state-success-bg: transparent;
@state-success-border: var(--c8y-palette-status-success);

@state-info-text: @text-color;
@state-info-bg: transparent;
@state-info-border: var(--c8y-palette-status-info);

@state-system-text: @text-color;
@state-system-bg: transparent;
@state-system-border: var(--brand-primary, var(--c8y-brand-primary));

@state-warning-text: @text-color;
@state-warning-bg: transparent;
@state-warning-border: var(--c8y-palette-status-warning);

@state-danger-text: @text-color;
@state-danger-bg: transparent;
@state-danger-border: var(--c8y-palette-status-danger);

/* NAVIGATOR */
@navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-bg-color));
@navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-bg));
@navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
@navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
@navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
@navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-text-color-active, var(--c8y-navigator-text-color-selected))));
@navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
@navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
@navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
@navigator-scrollbar-track-color: var(--c8y-navigator-scrollbar-track);
@navigator-scrollbar-thumb-color: var(--c8y-navigator-scrollbar-thumb-default);
@navigator-scrollbar-thumb-color-hover: var(--c8y-navigator-scrollbar-thumb-hover);

@navColor: @navigator-background-default;
@navColorHeader: @navigator-header-background;
@navigator-text-color-default: @navigator-text-color;
@navigator-title-color: @navigator-header-color;
@navigator-color-active: @navigator-text-color-selected;
@navigator-active-bg: @navigator-background-selected;

// when set, adds a gradient in navbar and header
@grad-top: "";
@grad-bottom: "";

/* RIGHT DRAWER */

@drawer-bg: var(--right-drawer-background-default, var(--navigator-bg-color, var(--c8y-right-drawer-background-default)));
@drawer-background-default: @drawer-bg;
@drawer-color: var(--right-drawer-text-color-default, var(--navigator-text-color, var(--c8y-right-drawer-text-color-default)));
@drawer-separator-color: var(--c8y-right-drawer-separator-color);
@drawer-background-active: var(--c8y-right-drawer-background-active);
@drawer-border-selected: var(--c8y-right-drawer-border-selected);
@drawer-legend: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));

/* change the used icons. Available options are:
-'white'for using the same colors as .c8y-icon-white
-'duo'for using the same colors as .c8y-icon-duocolor
-'none' to use the default @drawer-color
*/
@drawer-c8y-icon: 'none';


/* MAIN HEADER */
@headerColor: var(--header-color, var(--c8y-header-color));
@header-background-hover: var(--c8y-main-header-background-hover);
@header-background-active: var(--c8y-main-header-background-active);
@header-text-color: var(--header-text-color, var(--c8y-main-header-text-color-default));
@header-text-color-hover: var(--header-hover-color, var(--c8y-header-hover-color));
@header-border-color: var(--header-border-color, var(--c8y-main-header-border-color));
@header-shadow: var(--c8y-main-header-shadow);

/* TYPOGRAPHY COLORS */

/* Text - @text-color and @text-muted defined at top of file */
@headings-color: var(--c8y-headings-color);
@abbr-border-color: var(--c8y-abbr-border-color);
@blockquote-small-color: @text-muted;
@blockquote-border-color: var(--c8y-blockquote-border-color);

/* Headings */
@headings-small-color: @text-muted;

/* Links */
@link-color: var(--link-color, var(--c8y-component-color-link, var(--c8y-root-component-color-link)));
@link-color-hover: var(--link-hover-color, var(--c8y-component-color-link-hover, var(--c8y-root-component-color-link-hover)));

/* COMPONENTS */
@component-background-active: var(--c8y-component-background-active, var(--c8y-root-component-background-active));
@component-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
@component-background-expanded: var(--c8y-component-background-expanded, var(--c8y-root-component-background-expanded));
@component-background-odd: var(--c8y-component-background-odd, var(--c8y-root-component-background-odd));
@component-background-expanded-gradient: var(--c8y-component-background-expanded-gradient, var(--c8y-root-component-background-expanded-gradient));
@component-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
@component-background-hover: var(--c8y-component-background-hover, var(--c8y-root-component-background-hover));

@component-border-color: var(--c8y-component-border-color, var(--c8y-root-component-border-color));

@component-color-actions: var(--c8y-component-color-actions, var(--c8y-root-component-color-actions));
@component-color-actions-hover: var(--c8y-component-color-actions-hover, var(--c8y-root-component-color-actions-hover));
@component-color-active: var(--c8y-component-color-active, var(--c8y-root-component-color-active));
@component-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
@component-color-expanded: var(--c8y-component-color-expanded, var(--c8y-root-component-color-expanded));
@component-color-link: @link-color;
@component-color-link-hover: @link-color-hover;
@component-color-odd: var(--c8y-component-color-odd, var(--c8y-root-component-color-odd));
@component-color-text-muted: var(--c8y-component-color-text-muted, var(--c8y-root-component-color-text-muted));
@component-color-accent: var(--c8y-component-color-accent, var(--c8y-root-component-color-accent));
@component-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));

@component-color-focus: var(--c8y-component-color-focus, var(--c8y-root-component-color-focus));
@component-background-focus: var(--c8y-component-background-focus, var(--c8y-root-component-background-focus));

@component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));

@component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
@component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-form-legend-color));

@component-form-control-border-color: var(--c8y-component-form-control-border-color, var(--c8y-form-control-border-color-default));
@component-placeholder-color: var(--c8y-component-placeholder-color, var(--c8y-root-component-placeholder-color));

@component-accent-color: var(--c8y-component-accent-color, var(--c8y-root-component-accent-color));

@component-brand-primary: var(--c8y-component-brand-primary, var(--c8y-root-component-brand-primary));
@component-realtime-added: var(--c8y-component-realtime-added, var(--c8y-root-component-realtime-added));
@component-pulse-color: var(--c8y-component-pulse-color, var(--c8y-root-component-pulse-color));
@component-spinner-color: var(--c8y-component-spinner-color, var(--c8y-root-component-spinner-color));

@component-disabled-opacity: var(--c8y-component-disabled-opacity, var(--c8y-root-component-opacity-disabled));

@component-icon-white-color-light: var(--c8y-component-icon-white-color-light, var(--c8y-root-component-icon-white-color-light, @brand-primary-light));
@component-icon-white-color-dark: var(--c8y-component-icon-white-color-dark, var(--c8y-root-component-icon-white-color-dark, @palette-high));
@component-icon-dark-color-light: var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, @brand-primary-light));
@component-icon-dark-color-dark: var(--c8y-component-icon-dark-color-dark, var(--c8y-root-component-icon-dark-color-dark, @brand-primary-dark));
@component-icon-color: var(--c8y-component-icon-color, var(--c8y-root-component-icon-color));

@component-scrollbar-thumb-default: var(--c8y-component-scrollbar-thumb-default, var(--c8y-root-component-scrollbar-thumb-default));
@component-scrollbar-thumb-hover: var(--c8y-component-scrollbar-thumb-hover, var(--c8y-root-component-scrollbar-thumb-hover));
@component-scrollbar-track: var(--c8y-component-scrollbar-track, var(--c8y-root-component-scrollbar-track));

/* Icons */
@icon-white-color-light: @component-icon-white-color-light;
@icon-white-color-dark: @component-icon-white-color-dark;
@icon-dark-color-light: @component-icon-dark-color-light;
@icon-dark-color-dark: @component-icon-dark-color-dark;

/* Page sticky header */
@page-sticky-header-background-default: var(--c8y-page-sticky-header-background-default);
@page-sticky-header-color-default: var(--c8y-page-sticky-header-color-default);
@page-sticky-header-color-hover: var(--c8y-page-sticky-header-color-hover);
@page-sticky-header-color-active: var(--c8y-page-sticky-header-color-active);

/* Layout */
@body-background-color: var(--body-background-color, var(--c8y-body-background-color));

@hr-border: @component-border-color;

@spinner-color: @component-spinner-color;

@expanded-bg-color: @component-background-expanded;

// realtime pulse color
@pulse-color: @component-pulse-color;

//SELECTIZE COLORS
// ** from selectize-vars.less
@selectize-color-text: @form-control-color-default;
@selectize-color-border: @form-control-border-color-default;
@selectize-color-highlight: var(--c8y-brand-7);
@selectize-color-input: @palette-high;
@selectize-color-input-full: @selectize-color-input;
@selectize-color-disabled: @gray-100;
@selectize-color-item: @gray-90;
@selectize-color-item-text: @selectize-color-text;
@selectize-color-item-border: @gray-80;
@selectize-color-item-active: @gray-90;
@selectize-color-item-active-text: @component-color-active;
@selectize-color-item-active-border: @gray-80;
@selectize-color-dropdown: @component-background-default;
@selectize-color-dropdown-border: @selectize-color-border;
@selectize-color-dropdown-border-top: @component-background-default;
@selectize-color-dropdown-item-active: @component-background-active;
@selectize-color-dropdown-item-active-text: @component-color-active;
@selectize-color-dropdown-item-create-text: @selectize-color-dropdown-item-active-text;
@selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
@selectize-color-optgroup: @selectize-color-dropdown;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-arrow-color: @component-brand-primary;