lucid-ui/docs/color-palette.less

A UI component library from Xandr.

@import '../src/styles/variables.less';

.ColorPalette {
	padding: 15px;

	&-item {
		display: flex;
		justify-content: space-between;
		padding: @size-standard;
		font-size: @size-font;
		font-family: monospace;
	}

	&-hex-string {
		font-style: italic;
		font-size: 0.8em;
		margin: 0;
	}

	&-color-chart-neutral {
		background-color: @color-chart-neutral;
		color: contrast(@color-chart-neutral);
	}

	&-color-chart-bad-darkest {
		background-color: @color-chart-bad-darkest;
		color: contrast(@color-chart-bad-darkest);
	}

	&-color-chart-bad-dark {
		background-color: @color-chart-bad-dark;
		color: contrast(@color-chart-bad-dark);
	}

	&-color-chart-bad-light {
		background-color: @color-chart-bad-light;
		color: contrast(@color-chart-bad-light);
	}

	&-color-chart-bad-lightest {
		background-color: @color-chart-bad-lightest;
		color: contrast(@color-chart-bad-lightest);
	}

	&-color-chart-bad {
		background-color: @color-chart-bad;
		color: contrast(@color-chart-bad);
	}

	&-color-chart-good-darkest {
		background-color: @color-chart-good-darkest;
		color: contrast(@color-chart-good-darkest);
	}

	&-color-chart-good-dark {
		background-color: @color-chart-good-dark;
		color: contrast(@color-chart-good-dark);
	}

	&-color-chart-good-light {
		background-color: @color-chart-good-light;
		color: contrast(@color-chart-good-light);
	}

	&-color-chart-good-lightest {
		background-color: @color-chart-good-lightest;
		color: contrast(@color-chart-good-lightest);
	}

	&-color-chart-good {
		background-color: @color-chart-good;
		color: contrast(@color-chart-good);
	}

	&-color-chart-6-darkest {
		background-color: @color-chart-6-darkest;
		color: contrast(@color-chart-6-darkest);
	}

	&-color-chart-6-dark {
		background-color: @color-chart-6-dark;
		color: contrast(@color-chart-6-dark);
	}

	&-color-chart-6 {
		background-color: @color-chart-6;
		color: contrast(@color-chart-6);
	}

	&-color-chart-6-light {
		background-color: @color-chart-6-light;
		color: contrast(@color-chart-6-light);
	}

	&-color-chart-6-lightest {
		background-color: @color-chart-6-lightest;
		color: contrast(@color-chart-6-lightest);
	}

	&-color-chart-5-darkest {
		background-color: @color-chart-5-darkest;
		color: contrast(@color-chart-5-darkest);
	}

	&-color-chart-5-dark {
		background-color: @color-chart-5-dark;
		color: contrast(@color-chart-5-dark);
	}

	&-color-chart-5 {
		background-color: @color-chart-5;
		color: contrast(@color-chart-5);
	}

	&-color-chart-5-light {
		background-color: @color-chart-5-light;
		color: contrast(@color-chart-5-light);
	}

	&-color-chart-5-lightest {
		background-color: @color-chart-5-lightest;
		color: contrast(@color-chart-5-lightest);
	}

	&-color-chart-4-darkest {
		background-color: @color-chart-4-darkest;
		color: contrast(@color-chart-4-darkest);
	}

	&-color-chart-4-dark {
		background-color: @color-chart-4-dark;
		color: contrast(@color-chart-4-dark);
	}

	&-color-chart-4 {
		background-color: @color-chart-4;
		color: contrast(@color-chart-4);
	}

	&-color-chart-4-light {
		background-color: @color-chart-4-light;
		color: contrast(@color-chart-4-light);
	}

	&-color-chart-4-lightest {
		background-color: @color-chart-4-lightest;
		color: contrast(@color-chart-4-lightest);
	}

	&-color-chart-3-darkest {
		background-color: @color-chart-3-darkest;
		color: contrast(@color-chart-3-darkest);
	}

	&-color-chart-3-dark {
		background-color: @color-chart-3-dark;
		color: contrast(@color-chart-3-dark);
	}

	&-color-chart-3 {
		background-color: @color-chart-3;
		color: contrast(@color-chart-3);
	}

	&-color-chart-3-light {
		background-color: @color-chart-3-light;
		color: contrast(@color-chart-3-light);
	}

	&-color-chart-3-lightest {
		background-color: @color-chart-3-lightest;
		color: contrast(@color-chart-3-lightest);
	}

	&-color-chart-2-darkest {
		background-color: @color-chart-2-darkest;
		color: contrast(@color-chart-2-darkest);
	}

	&-color-chart-2-dark {
		background-color: @color-chart-2-dark;
		color: contrast(@color-chart-2-dark);
	}

	&-color-chart-2 {
		background-color: @color-chart-2;
		color: contrast(@color-chart-2);
	}

	&-color-chart-2-light {
		background-color: @color-chart-2-light;
		color: contrast(@color-chart-2-light);
	}

	&-color-chart-2-lightest {
		background-color: @color-chart-2-lightest;
		color: contrast(@color-chart-2-lightest);
	}

	&-color-chart-1-darkest {
		background-color: @color-chart-1-darkest;
		color: contrast(@color-chart-1-darkest);
	}

	&-color-chart-1-dark {
		background-color: @color-chart-1-dark;
		color: contrast(@color-chart-1-dark);
	}

	&-color-chart-1 {
		background-color: @color-chart-1;
		color: contrast(@color-chart-1);
	}

	&-color-chart-1-light {
		background-color: @color-chart-1-light;
		color: contrast(@color-chart-1-light);
	}

	&-color-chart-1-lightest {
		background-color: @color-chart-1-lightest;
		color: contrast(@color-chart-1-lightest);
	}

	&-color-chart-0-darkest {
		background-color: @color-chart-0-darkest;
		color: contrast(@color-chart-0-darkest);
	}

	&-color-chart-0-dark {
		background-color: @color-chart-0-dark;
		color: contrast(@color-chart-0-dark);
	}

	&-color-chart-0 {
		background-color: @color-chart-0;
		color: contrast(@color-chart-0);
	}

	&-color-chart-0-light {
		background-color: @color-chart-0-light;
		color: contrast(@color-chart-0-light);
	}

	&-color-chart-0-lightest {
		background-color: @color-chart-0-lightest;
		color: contrast(@color-chart-0-lightest);
	}

	&-featured-color-danger-colorHover {
		background-color: @featured-color-danger-colorHover;
		color: contrast(@featured-color-danger-colorHover);
	}

	&-featured-color-danger-backgroundColor {
		background-color: @featured-color-danger-backgroundColor;
		color: contrast(@featured-color-danger-backgroundColor);
	}

	&-featured-color-danger-borderColor {
		background-color: @featured-color-danger-borderColor;
		color: contrast(@featured-color-danger-borderColor);
	}

	&-featured-color-warning-colorHover {
		background-color: @featured-color-warning-colorHover;
		color: contrast(@featured-color-warning-colorHover);
	}

	&-featured-color-warning-backgroundColor {
		background-color: @featured-color-warning-backgroundColor;
		color: contrast(@featured-color-warning-backgroundColor);
	}

	&-featured-color-warning-borderColor {
		background-color: @featured-color-warning-borderColor;
		color: contrast(@featured-color-warning-borderColor);
	}

	&-featured-color-info-colorHover {
		background-color: @featured-color-info-colorHover;
		color: contrast(@featured-color-info-colorHover);
	}

	&-featured-color-info-backgroundColor {
		background-color: @featured-color-info-backgroundColor;
		color: contrast(@featured-color-info-backgroundColor);
	}

	&-featured-color-info-borderColor {
		background-color: @featured-color-info-borderColor;
		color: contrast(@featured-color-info-borderColor);
	}

	&-featured-color-success-colorHover {
		background-color: @featured-color-success-colorHover;
		color: contrast(@featured-color-success-colorHover);
	}

	&-featured-color-success-backgroundColor {
		background-color: @featured-color-success-backgroundColor;
		color: contrast(@featured-color-success-backgroundColor);
	}

	&-featured-color-success-borderColor {
		background-color: @featured-color-success-borderColor;
		color: contrast(@featured-color-success-borderColor);
	}

	&-featured-color-primary-backgroundColor {
		background-color: @featured-color-primary-backgroundColor;
		color: contrast(@featured-color-primary-backgroundColor);
	}

	&-featured-color-primary-borderColor {
		background-color: @featured-color-primary-borderColor;
		color: contrast(@featured-color-primary-borderColor);
	}

	&-featured-color-default-backgroundColor {
		background-color: @featured-color-default-backgroundColor;
		color: contrast(@featured-color-default-backgroundColor);
	}

	&-featured-color-default-borderColor {
		background-color: @featured-color-default-borderColor;
		color: contrast(@featured-color-default-borderColor);
	}

	&-featured-color-danger {
		background-color: @featured-color-danger;
		color: contrast(@featured-color-danger);
	}

	&-featured-color-warning {
		background-color: @featured-color-warning;
		color: contrast(@featured-color-warning);
	}

	&-featured-color-info {
		background-color: @featured-color-info;
		color: contrast(@featured-color-info);
	}

	&-featured-color-success {
		background-color: @featured-color-success;
		color: contrast(@featured-color-success);
	}

	&-featured-color-primary {
		background-color: @featured-color-primary;
		color: contrast(@featured-color-primary);
	}

	&-featured-color-default {
		background-color: @featured-color-default;
		color: contrast(@featured-color-default);
	}

	&-color-pageBackgroundColor {
		background-color: @color-pageBackgroundColor;
		color: contrast(@color-pageBackgroundColor);
	}

	&-color-backgroundColor {
		background-color: @color-backgroundColor;
		color: contrast(@color-backgroundColor);
	}

	&-color-borderColor {
		background-color: @color-borderColor;
		color: contrast(@color-borderColor);
	}

	&-color-neutral-1 {
		background-color: @color-neutral-1;
		color: contrast(@color-neutral-1);
	}

	&-color-neutral-2 {
		background-color: @color-neutral-2;
		color: contrast(@color-neutral-2);
	}

	&-color-neutral-3 {
		background-color: @color-neutral-3;
		color: contrast(@color-neutral-3);
	}

	&-color-neutral-4 {
		background-color: @color-neutral-4;
		color: contrast(@color-neutral-4);
	}

	&-color-neutral-5 {
		background-color: @color-neutral-5;
		color: contrast(@color-neutral-5);
	}

	&-color-neutral-6 {
		background-color: @color-neutral-6;
		color: contrast(@color-neutral-6);
	}

	&-color-neutral-7 {
		background-color: @color-neutral-7;
		color: contrast(@color-neutral-7);
	}

	&-color-neutral-8 {
		background-color: @color-neutral-8;
		color: contrast(@color-neutral-8);
	}

	&-color-neutral-9 {
		background-color: @color-neutral-9;
		color: contrast(@color-neutral-9);
	}

	&-color-linkColorHover {
		background-color: @color-linkColorHover;
		color: contrast(@color-linkColorHover);
	}

	&-color-linkColor {
		background-color: @color-linkColor;
		color: contrast(@color-linkColor);
	}

	&-color-disabledText {
		background-color: @color-disabledText;
		color: contrast(@color-disabledText);
	}

	&-color-textColor {
		background-color: @color-textColor;
		color: contrast(@color-textColor);
	}

	&-color-primary {
		background-color: @color-primary;
		color: contrast(@color-primary);
	}

	&-color-primaryLight {
		background-color: @color-primary-light;
		color: contrast(@color-primary-light);
	}

	&-color-primaryLightHover {
		background-color: @color-primary-light-hover;
		color: contrast(@color-primary-light-hover);
	}

	&-color-primaryDark {
		background-color: @color-primary-dark;
		color: contrast(@color-primary-dark);
	}

	&-color-secondary-1 {
		background-color: @color-secondary-1;
		color: contrast(@color-secondary-1);
	}

	&-color-secondary-2 {
		background-color: @color-secondary-2;
		color: contrast(@color-secondary-2);
	}

	&-color-secondary-3 {
		background-color: @color-secondary-3;
		color: contrast(@color-secondary-3);
	}

	&-color-secondary-4 {
		background-color: @color-secondary-4;
		color: contrast(@color-secondary-4);
	}

	&-color-secondary-5 {
		background-color: @color-secondary-5;
		color: contrast(@color-secondary-5);
	}

	&-color-black {
		background-color: @color-black;
		color: contrast(@color-black);
	}

	&-color-white {
		background-color: @color-white;
		color: contrast(@color-white);
	}
}