@datawheel/canon-core
Version:
Reusable React environment and components for creating visualization engines.
234 lines (203 loc) • 8.15 kB
CSS
:root {
/* ------------------------------------------------
shared vars (admin panel & profile)
------------------------------------------------ */
/* grayscale */
--white: #FFFFFF;
--light-1: #F8F9FA;
--light-2: #ECEFF1;
--light-3: #CFDAE2;
--gray: #AEBDCC;
--dark-1: #8A97AE;
--dark-2: #2A2F3B;
--dark-3: #20242E;
--black: #181A21;
/* accent colors */
--accent: #FFCD33;
--accent-light: #FFD65B;
--accent-dark: #C4960B;
--accent-black: #7F6516;
/* ------------------------------------------------
admin panel
------------------------------------------------ */
/* UI colors */
--alert-dark: #75224D;
--alert: #C6315C;
--alert-light: #DB64A6;
--type-number: #8EB6FF;
--type-number-dark: #2D4A7F;
--type-string: #B9E28C;
--type-string-dark: #62873B;
--type-boolean: #FFD65B;
--type-boolean-dark: #7F6516;
--type-error: #DB64A6;
--type-error-dark: #75224D;
/* measurements */
--cms-nav-height: 2.75rem;
--sidebar-width: 17rem;
--toolbox-width: 22.5rem;
/* ------------------------------------------------
profile
------------------------------------------------ */
/* any rem units will scale up with the viewport */
--body-font-scale-sm: 100%;
--body-font-scale-md: 112.5%;
--body-font-scale-xl: 125%;
/* spacing and sizing */
--nav-height: 50px;
--subnav-height: var(--nav-height);
--container-width: 80rem;
--hero-container-width: var(--container-width);
--gutter-xs: 0.5rem;
--gutter-sm: 0.75rem;
--gutter-md: 1.5rem;
--gutter-lg: 2.25rem;
--gutter-xl: 3rem;
/* typography */
--font-xxxs: 0.5rem;
--font-xxs: 0.625rem;
--font-xs: 0.75rem;
--font-sm: 0.875rem;
--font-md: 1rem;
--font-lg: 1.25rem;
--font-xl: 1.5rem;
--font-xxl: 2rem;
/* base (p, li, etc.) */
--base-font-stack: 'Lato', 'Trebuchet MS', sans-serif;
--base-font-weight: 400;
--base-letter-spacing: 0;
--bold-weight: 800;
/* headings (h1, h2, etc.; .heading class) */
--heading-font-stack: var(--base-font-stack);
--heading-font-weight: 600;
--heading-text-transform: none;
--heading-letter-spacing: 0;
/* display (.display class) */
--display-font-stack: var(--base-font-stack);
--display-font-weight: 600;
--display-text-transform: uppercase;
--display-letter-spacing: 0.0125em;
/* label (.label class) */
--label-font-stack: var(--base-font-stack);
--label-font-weight: 400;
--label-text-transform: uppercase;
--label-letter-spacing: 0.0125em;
/* hero AKA header AKA splash */
--hero-bg-color: var(--dark-3);
--hero-img-overlay-opacity: 0.875;
--hero-text-color: var(--light-2);
--hero-paragraph-size: var(--font-xs);
--hero-heading-color: var(--white);
--hero-heading-size: var(--font-xxl);
--hero-subhead-color: var(--white);
--hero-subhead-size: var(--font-md);
--hero-stat-value-color: var(--accent);
--hero-viz-width: 20rem;
/* sections */
--section-bg-odd: var(--white);
--section-bg-even: var(--light-1);
--section-text-color: var(--dark-2);
--section-heading-color: var(--dark-3);
/* sticky sections */
--sticky-section-offset: 50px;
--sticky-section-height: var(--nav-height);
--sticky-section-bg-color: var(--white);
--sticky-section-shadow: 0 1px 0.375rem color(var(--black) a(0.125));
/* handle grouped SingleColumn sections with flex-basis */
--singlecolumn-column-count: 3;
--singlecolumn-min-width: 20rem;
/* handle MultiColumn section with css multicolumn */
--multicolumn-column-count: 3;
--multicolumn-column-width: 20rem;
--multicolumn-column-gap: var(--gutter-xl);
/* InfoCard */
--infocard-viz-min-width: 10rem;
--infocard-border-radius: 4px;
--infocard-border-width: 1px;
--infocard-border-color: var(--light-2);
--infocard-divider-color: var(--dark-3);
--infocard-subhead-color: var(--dark-3);
--infocard-header-bg-color: var(--dark-3);
--infocard-stat-bg-color: var(--accent-light);
--infocard-header-text-color: var(--white);
--infocard-main-bg-color: var(--white);
/* Grouping (intro) section */
--grouping-bg-color: var(--accent-light);
--grouping-text-color: var(--black);
--grouping-paragraph-size: var(--font-md);
--grouping-subhead-color: var(--accent-black);
--grouping-subhead-font-size: var(--font-xl);
--grouping-heading-color: var(--white);
--grouping-heading-font-size: var(--font-xxl);
--grouping-stat-value-color: var(--white);
/* buttons */
--button-border-radius: 2px;
--button-border-width: 1px;
--button-bg-color: color(var(--white) a(0.5));
--button-border-color: var(--light-3);
--button-color: var(--accent-black);
--button-padding: 0.5em 1.25em;
--button-hover-bg-color: var(--accent-black);
--button-hover-border-color: var(--accent-black);
--button-hover-color: var(--white);
/* fields */
--field-border-radius: 1px;
--field-border-width: 1px;
--field-padding: 0.5em 0.5em 0.575em 0.5em;
--field-font-weight: 400;
--field-bg-color: var(--white);
--field-border-color: var(--light-3);
--field-color: var(--dark-2);
--field-placeholder-color: var(--gray);
--field-focus-color: var(--accent-dark);
--field-icon-color: var(--dark-1);
--field-icon-hover-color: var(--dark-3);
--select-border-radius: var(--button-border-radius);
--select-bg-color: var(--light-1);
/* visualizations */
--viz-aspect-ratio: 50%;
--viz-min-height: 40vh;
/* (react-)table visualization */
--table-height: 60vh;
--table-hgroup-bg-color: var(--light-2);
--table-hgroup-border-color: var(--light-3);
--table-hgroup-text-color: var(--dark-3);
--table-thead-bg-color: var(--dark-1);
--table-thead-border-color: color(var(--dark-2) a(0.25));
--table-thead-text-color: var(--light-1);
--table-cell-bg-color: var(--white);
--table-cell-border-color: var(--light-2);
--table-cell-text-color: var(--dark-3);
--table-nested-cell-bg-color: var(--light-1);
--table-icon-color: var(--dark-2);
/* stats */
--stat-label-font-size: var(--font-sm);
--stat-label-color: inherit;
--stat-value-font-size: var(--font-xl);
--stat-value-color: var(--accent-dark);
--stat-subtitle-font-size: var(--font-xs);
--stat-subtitle-color: var(--dark-1);
--stat-group-stat-width: 9rem;
/* ------------------------------------------------
legacy canon vars
------------------------------------------------ */
--light: var(--light-3);
--dark: var(--dark-2);
--gutter: 1rem;
--column: 64px;
--font-family: var(--base-font-stack);
--topic-title-color: var(--black);
--topic-title-family: var(--base-font-stack);
--topic-title-size: 48px;
--topic-title-weight: 300;
--section-title-color: var(--dark);
--section-title-family: var(--base-font-stack);
--section-title-size: 24px;
--section-title-weight: 600;
--section-article-color: var(--dark);
--section-article-family: var(--base-font-stack);
--section-article-size: 16px;
--section-article-weight: 400;
--section-article-small: calc(var(--column) * 3 + var(--gutter) * 2);
--section-article-large: calc(var(--column) * 5 + var(--gutter) * 4);
}