2019-11-22 22:04:03 +01:00
|
|
|
:root {
|
|
|
|
|
// Generic colors
|
|
|
|
|
--color-primary: #257761;
|
|
|
|
|
--color-primary-alt: #e4f4ef;
|
|
|
|
|
--color-primary-alt-2: #4b8576;
|
|
|
|
|
--color-secondary: #295284;
|
|
|
|
|
--color-secondary-alt: #d9eaff;
|
|
|
|
|
--color-tertiary: #552470;
|
|
|
|
|
--color-tertiary-alt: #f7e8ff;
|
|
|
|
|
--color-danger: #9b2023;
|
|
|
|
|
--color-danger-alt: #fccdce;
|
|
|
|
|
--color-warning: #fff58c;
|
|
|
|
|
--color-cost: #f4e866;
|
|
|
|
|
--color-focus: #93cff2;
|
|
|
|
|
--color-border: #ddd;
|
|
|
|
|
|
|
|
|
|
--color-black: #111;
|
|
|
|
|
--color-white: #fdfdfd;
|
|
|
|
|
--color-white-alt: #fafafa;
|
|
|
|
|
--color-gray-1: #e2e5e9;
|
|
|
|
|
--color-gray-2: #d8dde1;
|
|
|
|
|
--color-gray-3: #ced4da;
|
|
|
|
|
--color-gray-4: #abb1b7;
|
|
|
|
|
--color-gray-5: #666a6d;
|
|
|
|
|
|
|
|
|
|
// Text
|
|
|
|
|
--color-text: var(--color-black);
|
|
|
|
|
--color-text-subtitle: var(--color-gray-5);
|
|
|
|
|
--color-text-inverse: #fdfdfd;
|
|
|
|
|
|
|
|
|
|
// Components
|
|
|
|
|
|
|
|
|
|
// Button
|
|
|
|
|
--color-button-primary-bg: var(--color-primary);
|
|
|
|
|
--color-button-primary-text: var(--color-primary-alt);
|
|
|
|
|
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
|
|
|
|
--color-button-primary-hover-text: var(--color-primary-alt);
|
|
|
|
|
--color-button-secondary-bg: var(--color-secondary-alt);
|
|
|
|
|
--color-button-secondary-text: var(--color-secondary);
|
|
|
|
|
--color-button-secondary-bg-hover: var(--color-gray-3);
|
|
|
|
|
--color-link: var(--color-primary);
|
|
|
|
|
--color-link-hover: var(--color-black);
|
|
|
|
|
|
|
|
|
|
// Input
|
|
|
|
|
--color-input-color: #111111;
|
|
|
|
|
--color-input-label: var(--color-gray-5);
|
|
|
|
|
--color-input-placeholder: #212529;
|
|
|
|
|
--color-input-bg: #f2f2f2;
|
|
|
|
|
--color-input-bg-copyable: #434b53;
|
|
|
|
|
--color-input-border: var(--color-border);
|
|
|
|
|
--color-input-border-active: var(--color-secondary);
|
|
|
|
|
|
|
|
|
|
// Table
|
|
|
|
|
--color-table-highlight: var(--color-white-alt);
|
|
|
|
|
|
|
|
|
|
// Tag
|
|
|
|
|
--color-tag: var(--color-primary);
|
|
|
|
|
--color-tag-bg: var(--color-primary-alt);
|
|
|
|
|
--color-tag-hover: var(--color-white);
|
|
|
|
|
--color-tag-bg-hover: var(--color-primary-alt-2);
|
|
|
|
|
}
|
