lucid-ui/src/styles/variables.less

A UI component library from AppNexus.

@prefix: lucid;

// -----------------------------------------------------------------------------
// Typography
// -----------------------------------------------------------------------------

// At Xandr here are the font variation we support internally:
// ------ | --------------- | ------
// weight | font            | style
// ------ | --------------- | ------
// 400    | GalanoGrotesque | normal
// 400    | GalanoGrotesque | italic
// 400    | Inter           | normal
// 400    | Inter           | italic
// 500    | GalanoGrotesque | normal
// 500    | GalanoGrotesque | italic
// 600    | GalanoGrotesque | normal
// 600    | GalanoGrotesque | italic
// 600    | Inter           | normal
// 600    | Inter           | italic

@fontSize: 12px;
@fontFamily: GalanoGrotesque, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-tabular: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-feature-settings-tabular: 'tnum' 1;
@font: @fontSize @fontFamily;
@font-chart: 11px sans-serif;

// Our designers have agreed to keep the number of font weight variants to
// what's outlined in these variables.
@font-weight-regular: 400; // Available with GalanoGrotesque and Inter
@font-weight-medium: 500; // Available with GalanoGrotesque
@font-weight-semiBold: 600; // Available with GalanoGrotesque and Inter

// -----------------------------------------------------------------------------
// Sizes
// -----------------------------------------------------------------------------

// Table might use 11px

@size-font-S: 9px;
@size-font: 12px;
@size-font-L: 16px;
@size-font-XL: 18px;
@size-font-XXL: 24px;

// standard border radius
@size-borderRadius: 0;
@size-borderWidth: 1px;
@size-borderWidthFocused: 1px;

@size-standard-height: 28px; // should have been `@size-height-standard`
@size-height-L: 46px;

@size-XXS: 3px;
@size-XS: 6px;
@size-S: 9px;
@size-standard: 12px;
@size-L: 15px;
@size-XL: 24px;
@size-XXL: 30px;

@size-expander-button: 28px;
@size-tag: 20px;

// -----------------------------------------------------------------------------
// Z Indices
// -----------------------------------------------------------------------------

@zindex-base: 1;
@zindex-nav: 3000;
@zindex-modal: 4000;
@zindex-tooltip: 5000;

// -----------------------------------------------------------------------------
// Animations
// -----------------------------------------------------------------------------
@timing-animation-hover: 100ms;
@timing-animation-fade: 300ms;
@timing-function-easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

// -----------------------------------------------------------------------------
// Shadows
// -----------------------------------------------------------------------------

// Standard inset shadow
@shadow-inset: 0 10px 10px -10px @color-transparent-gray-30 inset;
@shadow: 2px 2px 5px 0 fade(@color-darkGray, 8%);

// -----------------------------------------------------------------------------
// Colors
// -----------------------------------------------------------------------------

// General colors
@color-white: #fff;
@color-black: #000;
@color-transparent: rgba(
	255,
	255,
	255,
	0
); // normalize transparent due to Safari bug

// Primary colors
@color-primary: #587eba;
@color-primaryLight: #e6ecf5;
@color-primary-50: fade(@color-primary, 50%);

// Primary accent colors
@color-primary-dark: #4368a1;

// Secondary colors
@color-secondary-1: #fc5047; // coral red
@color-secondary-2: #ab52b0; // magenta
@color-secondary-3: #009fdb; // blue
@color-secondary-4: #49b27b; // green
@color-secondary-5: #00bebe; // teal

@color-secondary-1-hover: shade(@color-secondary-1, 20%);

//neutral colors
@color-neutral-1: #fff;
@color-neutral-2: #f9f8f7;
@color-neutral-3: #f4f2f2;
@color-neutral-4: #e8e6e6;
@color-neutral-5: #d3d1d1;
@color-neutral-6: #a6a3a3;
@color-neutral-7: #7a7878;
@color-neutral-8: #4d4b4b;
@color-neutral-9: #211f1f;
@color-neutral-10: #c4c0c0;

// Transparent grays
@color-transparent-gray-5: fade(@color-black, 5%);
@color-transparent-gray-10: fade(@color-black, 10%);
@color-transparent-gray-25: fade(@color-black, 25%);
@color-transparent-gray-30: fade(@color-black, 30%);
@color-transparent-gray-50: fade(@color-black, 50%);
@color-transparent-gray-60: fade(@color-black, 60%);

@color-transparent-gray-30-new: fade(@color-neutral-9, 30%);
@color-transparent-gray-35: fade(@color-neutral-9, 35%);

// Grays
@color-lightGray: @color-neutral-3;
@color-gray: @color-neutral-4;
@color-mediumGray: @color-neutral-5;
@color-darkGray: @color-neutral-9;

// -------------------------------------
// Semantic Colors
// -------------------------------------

// Standard text color
@color-textColor: @color-neutral-9;
@color-disabledText: tint(@color-textColor, 50%);

// Standard link colors
@color-linkColor: @color-primary;
@color-linkColorHover: darken(@color-linkColor, 7%);

// Standard background color
@color-backgroundColor: @color-lightGray; // TODO: settle on a single background color if possible

// Standard background color
@color-pageBackgroundColor: @color-neutral-2;

@color-borderGray: fade(@color-darkGray, 30%); //@todo remove

// Transparent whites
@color-white-85: fade(@color-white, 85%);

// Transparent background white
@color-background-white-60: fade(@color-pageBackgroundColor, 60%);
@color-background-white-80: fade(@color-pageBackgroundColor, 80%);

// Standard border color
@color-borderColor: @color-neutral-5;
@color-borderColorLight: @color-gray;

// Table colors
@color-table-header-border: @color-neutral-5;
@color-table-row-border: @color-neutral-4;
@border-table-header: 1px solid @color-table-header-border;
@border-table-row: 1px solid @color-table-row-border;

@color-table-header-dark-background: @color-neutral-2;
@color-table-header-dark-background-hover: @color-neutral-3;

@color-table-header-light-background: @color-white;
@color-table-header-light-color: @color-neutral-9;
@color-table-header-light-sort-hover: @color-neutral-3;

@color-table-row-selected-background: @color-primaryLight;
@color-table-row-hover-background: @color-neutral-2;
@color-table-row-active-hover-background: #f0eeed;
@color-table-row-selected-hover-background: #dce5f1;
@color-table-row-active-background: @color-neutral-3;

// -------------------------------------
// Featured Colors
// -------------------------------------
// Featured color variables are intended to only be used for components that
// have "states" to them like `info`, `waring`, `danger` etc.

// Featured default color
@featured-color-default: #333;
@featured-color-default-borderColor: @color-neutral-5;
@featured-color-default-iconColorDisabled: @color-neutral-9;
@featured-color-default-backgroundColor: #fff;
@featured-color-default-backgroundColorHover: @color-neutral-3;
@featured-color-default-backgroundColorFocus: @color-neutral-4;

// Featured primary color
@featured-color-primary: @color-primary;
@featured-color-primary-backgroundColor: @featured-color-primary;
@featured-color-primary-colorActive: #4368a1;
@featured-color-primary-borderColor: @featured-color-primary;

// Featured success color
@featured-color-success: #49b27b;
@featured-color-success-colorHover: shade(@featured-color-success, 20%);
@featured-color-success-backgroundColor: @featured-color-success;
@featured-color-success-borderColor: @featured-color-success;

// Featured info color
@featured-color-info: @color-primary;
@featured-color-info-colorHover: shade(@featured-color-info, 20%);
@featured-color-info-backgroundColor: @featured-color-info;
@featured-color-info-borderColor: @featured-color-info;

// Featured warning color
@featured-color-warning: #f5b701;
@featured-color-warning-colorHover: shade(@featured-color-warning, 20%);
@featured-color-warning-backgroundColor: @featured-color-warning;
@featured-color-warning-borderColor: @featured-color-warning;

// Featured danger color
@featured-color-danger: #f77402;
@featured-color-danger-30: fade(@featured-color-danger, 30%);
@featured-color-danger-colorHover: shade(@featured-color-danger, 20%);
@featured-color-danger-colorActive: #de6700;
@featured-color-danger-backgroundColor: @featured-color-danger;
@featured-color-danger-borderColor: @featured-color-danger;

// -------------------------------------
// Chart Colors
// -------------------------------------
// NOTE: if you make changes to chart colors, you **must** keep their javascript
// counterparts in sync.

// This list should always be in sync with the full set of chart colors
@color-chart-variables: color-chart-0, color-chart-0-lightest,
	color-chart-0-light, color-chart-0-dark, color-chart-0-darkest, color-chart-1,
	color-chart-1-lightest, color-chart-1-light, color-chart-1-dark,
	color-chart-1-darkest, color-chart-2, color-chart-2-lightest,
	color-chart-2-light, color-chart-2-dark, color-chart-2-darkest, color-chart-3,
	color-chart-3-lightest, color-chart-3-light, color-chart-3-dark,
	color-chart-3-darkest, color-chart-4, color-chart-4-lightest,
	color-chart-4-light, color-chart-4-dark, color-chart-4-darkest, color-chart-5,
	color-chart-5-lightest, color-chart-5-light, color-chart-5-dark,
	color-chart-5-darkest, color-chart-6, color-chart-6-lightest,
	color-chart-6-light, color-chart-6-dark, color-chart-6-darkest,
	color-chart-good, color-chart-good-lightest, color-chart-good-light,
	color-chart-good-dark, color-chart-good-darkest, color-chart-bad,
	color-chart-bad-lightest, color-chart-bad-light, color-chart-bad-dark,
	color-chart-bad-darkest, color-chart-neutral;

@color-chart-0: @color-secondary-2;
@color-chart-0-lightest: tint(@color-chart-0, 90%);
@color-chart-0-light: tint(@color-chart-0, 65%);
@color-chart-0-dark: shade(@color-chart-0, 35%);
@color-chart-0-darkest: shade(@color-chart-0, 70%);

@color-chart-1: #00bebe; // TODO: reference secondary-5 when merged
@color-chart-1-lightest: tint(@color-chart-1, 90%);
@color-chart-1-light: tint(@color-chart-1, 65%);
@color-chart-1-dark: shade(@color-chart-1, 35%);
@color-chart-1-darkest: shade(@color-chart-1, 70%);

@color-chart-2: @color-secondary-1;
@color-chart-2-lightest: tint(@color-chart-2, 90%);
@color-chart-2-light: tint(@color-chart-2, 65%);
@color-chart-2-dark: shade(@color-chart-2, 35%);
@color-chart-2-darkest: shade(@color-chart-2, 70%);

@color-chart-3: @color-secondary-3;
@color-chart-3-lightest: tint(@color-chart-3, 90%);
@color-chart-3-light: tint(@color-chart-3, 65%);
@color-chart-3-dark: shade(@color-chart-3, 35%);
@color-chart-3-darkest: shade(@color-chart-3, 70%);

@color-chart-4: #6046a3;
@color-chart-4-lightest: tint(@color-chart-4, 90%);
@color-chart-4-light: tint(@color-chart-4, 65%);
@color-chart-4-dark: shade(@color-chart-4, 35%);
@color-chart-4-darkest: shade(@color-chart-4, 70%);

@color-chart-5: @featured-color-warning;
@color-chart-5-lightest: tint(@color-chart-5, 90%);
@color-chart-5-light: tint(@color-chart-5, 65%);
@color-chart-5-dark: shade(@color-chart-5, 35%);
@color-chart-5-darkest: shade(@color-chart-5, 70%);

@color-chart-6: @color-primary;
@color-chart-6-lightest: tint(@color-chart-6, 90%);
@color-chart-6-light: tint(@color-chart-6, 65%);
@color-chart-6-dark: shade(@color-chart-6, 35%);
@color-chart-6-darkest: shade(@color-chart-6, 70%);

// Semantic colors

@color-chart-good: @featured-color-success;
@color-chart-good-lightest: tint(@color-chart-good, 90%);
@color-chart-good-light: tint(@color-chart-good, 65%);
@color-chart-good-dark: shade(@color-chart-good, 35%);
@color-chart-good-darkest: shade(@color-chart-good, 70%);

@color-chart-bad: @featured-color-danger;
@color-chart-bad-lightest: tint(@color-chart-bad, 90%);
@color-chart-bad-light: tint(@color-chart-bad, 65%);
@color-chart-bad-dark: shade(@color-chart-bad, 35%);
@color-chart-bad-darkest: shade(@color-chart-bad, 70%);

@color-chart-neutral: @color-gray;

// -----------------------------------------------------------------------------
// Borders
// -----------------------------------------------------------------------------

@border-standardBorder: @size-borderWidth solid
	@featured-color-default-borderColor;
@border-lightBorder: @size-borderWidth solid @color-borderColorLight;

// -----------------------------------------------------------------------------
// Patterns
// -----------------------------------------------------------------------------

@pattern-diagonal-striped: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cGF0aCBkPSJNLTEgNUw1IC0xWk01IDNMMyA1Wk0tMSAxTDEgLTEiIHN0cm9rZT0iI2UzZTNlMyIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==');

@opacity-hover: 0.8;
@opacity-disabled: 0.35;