151 строка
5.0 KiB
SCSS
151 строка
5.0 KiB
SCSS
// This file contains style rules that define fonts, colors, etc. that give
|
|
// a theme to the site.
|
|
|
|
@import "vars";
|
|
|
|
// These colors should be the complete palette of the app, with no
|
|
// other colors defined. These are a subset of
|
|
// https://material.io/design/color/the-color-system.html.
|
|
:root {
|
|
--md-red-50: #ffebee;
|
|
--md-red-600: #E53935;
|
|
--md-red-700: #d32f2f;
|
|
--md-light-blue-50: #e1f5fe;
|
|
--md-blue-50: #E3F2FD;
|
|
--md-blue-100: #bbdefb;
|
|
--md-blue-700: #1976d2;
|
|
--md-blue-800: #1565C0;
|
|
--md-blue-900: #01579b;
|
|
--md-green-50: #E8F5E9;
|
|
--md-green-600: #43A047;
|
|
--md-green-700: #388E3C;
|
|
--md-orange-50: #fff3e0;
|
|
--md-orange-200: #ffcc80;
|
|
--md-deep-orange-900: #BF360C;
|
|
--md-yellow-100: #FFF9C4;
|
|
--md-yellow-200: #FFF59D;
|
|
// TODO(jrobbins): Add all colors from pallet selected in Figma mocks.
|
|
--md-gray-50: #fafafa;
|
|
--md-gray-100: #F5F5F5;
|
|
--md-gray-300: #e0e0e0;
|
|
--md-gray-800: #424242;
|
|
/* To make grays used for font styles and icons maintain consistent
|
|
* contrast ratios across colored backgrounds, we repesent them as pure black
|
|
* with opacity set. */
|
|
--md-gray-50-alpha: hsla(0, 0%, 0%, 0.04);
|
|
--md-gray-100-alpha: hsla(0, 0%, 0%, 0.12);
|
|
--md-gray-700-alpha: hsla(0, 0%, 0%, 0.62);
|
|
--md-gray-900-alpha: hsla(0, 0%, 0%, 0.87);
|
|
}
|
|
|
|
|
|
// These are logical colors, borders, padding, etc. that are used consistently
|
|
// throughout the app.
|
|
:root {
|
|
--page-background: var(--md-gray-50);
|
|
--default-font: 14px 'Roboto', sans-serif;
|
|
--form-element-font: system-ui;
|
|
--default-color: var(--md-gray-900-alpha);
|
|
--unimportant-text-color: var(--md-gray-700-alpha);
|
|
|
|
--content-padding-large: 24px;
|
|
--content-padding: 16px;
|
|
--content-padding-half: 8px;
|
|
--content-padding-quarter: 4px;
|
|
|
|
--max-content-width: 860px;
|
|
--border-radius: 4px;
|
|
--large-border-radius: 8px;
|
|
--logo-color: var(--default-color);
|
|
--logo-size: 32px;
|
|
--icon-size: 22px;
|
|
--link-color: var(--md-blue-700);
|
|
--link-hover-color: var(--md-blue-900);
|
|
|
|
--light-accent-color: var(--md-light-blue-50);
|
|
--dark-spot-color: var(--md-blue-900);
|
|
|
|
--heading-background: transparent;
|
|
--heading-color: var(--md-gray-700-alpha);
|
|
--heading-underbar: 2px solid var(--md-blue-700);
|
|
|
|
--leftnav-link-color: var(--md-blue-900);
|
|
--leftnav-selected-color: var(--md-blue-900);
|
|
--leftnav-divider-border: 1px solid var(--md-gray-100-alpha);
|
|
|
|
--sidebar-space: 410px;
|
|
--sidebar-width: 400px;
|
|
--sidebar-max-width: 96vw;
|
|
--sidebar-bg: white;
|
|
--sidebar-border: 2px solid hsl(0, 0%, 85%);
|
|
--sidebar-radius: var(--large-border-radius);
|
|
|
|
--button-background: inherit;
|
|
--button-color: var(--md-gray-900-alpha);
|
|
--button-font-size: 10pt;
|
|
--button-small-font-size: 9pt;
|
|
--button-border: 0;
|
|
--button-border-radius: var(--border-radius);
|
|
--primary-button-background: var(--md-blue-700);
|
|
--primary-button-color: white;
|
|
|
|
--default-border: 1px solid hsl(0, 0%, 85%);
|
|
|
|
--card-background: white;
|
|
--card-border: var(--default-border);
|
|
--shadow-color: var(--md-gray-100-alpha);
|
|
--card-box-shadow: var(--shadow-color) 1px 1px 4px;
|
|
--spot-card-border: 1px solid var(--dark-spot-color);
|
|
--spot-card-box-shadow: none;
|
|
|
|
--accordion-background: var(--md-gray-100-alpha);
|
|
--accordion-color: var(--default-color);
|
|
--accordion-border-radius: var(--border-radius);
|
|
|
|
--warning-background: var(--md-orange-200);
|
|
--warning-color: var(--md-gray-900-alpha);
|
|
--invalid-color: var(--md-red-700);
|
|
--error-color: var(--md-red-700);
|
|
|
|
--table-header-background: var(--md-gray-300);
|
|
--table-row-background: white;
|
|
--table-divider: var(--default-border);
|
|
--table-alternate-background: var(--md-gray-50-alpha);
|
|
|
|
--callout-bg-color: var(--dark-spot-color);
|
|
--callout-text-color: white;
|
|
|
|
--barchart-background: var(--md-blue-100);
|
|
--barchart-foreground: var(--md-blue-700);
|
|
--barchart-color: white;
|
|
|
|
--toast-background: var(--md-gray-900-alpha);
|
|
--toast-color: var(--md-gray-50);
|
|
--toast-action-color: var(--md-orange-200);
|
|
|
|
--chip-border: none;
|
|
--gate-fyi-background: var(--md-gray-100);
|
|
--gate-fyi-color: var(--md-gray-800);
|
|
--gate-fyi-icon-color: var(--md-gray-800);
|
|
--gate-preparing-background: var(--md-gray-100);
|
|
--gate-preparing-color: var(--md-gray-800);
|
|
--gate-preparing-icon-color: var(--md-gray-800);
|
|
--gate-pending-background: var(--md-blue-50);
|
|
--gate-pending-color: var(--md-blue-900);
|
|
--gate-pending-icon-color: var(--md-blue-900);
|
|
--gate-needs-work-background: var(--md-yellow-100);
|
|
--gate-needs-work-color: var(--md-deep-orange-900);
|
|
--gate-needs-work-icon-color: var(--md-deep-orange-900);
|
|
--gate-approved-background: var(--md-green-50);
|
|
--gate-approved-color: var(--md-green-700);
|
|
--gate-approved-icon-color: var(--md-green-600);
|
|
--gate-denied-background: var(--md-red-50);
|
|
--gate-denied-color: var(--md-red-700);
|
|
--gate-denided-icon-color: var(--md-red-600);
|
|
--gate-complete-background: var(--gate-approved-background);
|
|
--gate-complete-color: var(--gate-approved-color);
|
|
--gate-complete-icon-color: var(--gate-approved-icon-color);
|
|
|
|
--slo-overdue-color: var(--md-deep-orange-900);
|
|
}
|