chromium-dashboard/client-src/sass/theme.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);
}