@namespace "Base";
:import {
-st-from: "../../common/project.st.css";
-st-default: Project;
-st-named:
tiny,
tiny-max,
mobile,
mobile-max,
tablet,
tablet-max,
laptop,
laptop-max,
widelaptop,
desktop,
large,
color-blue,
color-indigo,
color-grey,
color-yellow,
color-pink,
color-petrol,
color-teal,
color-dark-grey,
color-dark-blue,
color-dark-purple,
color-dark-red,
color-dark-orange,
color-dark-green,
color-dark-pink,
color-dark-yellow,
color-dark-teal,
color-light-blue,
color-light-grey,
color-light-teal,
color-light-yellow,
color-black,
color-red,
color-white;
}
:import {
-st-from: "../../formatters/setAlpha";
-st-default: setAlpha;
}
:vars {
/* Alpha adjustments - can't use setAlpha as CSS. */
color-overlay: setAlpha(value(color-indigo), .5);
color-shadow: setAlpha(value(color-dark-grey), .2);
color-faint: setAlpha(value(color-light-grey), .3);
color-erratum: setAlpha(value(color-red), .3);
color-success: setAlpha(value(color-light-teal), .5);
color-warning: setAlpha(value(color-light-yellow), .5);
}
/* Runtime variables. */
.root {
/* = Core light - always light or dark regardless of theme. */
--light-rgb: 255, 255, 255;
--light: rgb(var(--light-rgb));
/* = Core dark . */
/* rgb(84 86 90) AKA color-dark-grey: #54565A;*/
--dark-rgb: 84, 86, 90;
--dark: rgb(var(--dark-rgb));
/**
* 'rgb' are just the raw rgb values we we can use them with rgba
* where we can provide the alpha.
*
* e.g color: rgba(var(--color-ui-rgb), 0.9);
*/
/* = Forground colours - main and inverted plus rgb versions as 'raw'. */
--color-ui: var(--dark);
--color-ui-inverse: var(--light);
--color-ui-rgb: var(--dark-rgb);
--color-ui-rgb-inverse: var(--light-rgb);
--color-ui-alpha1: rgba(var(--color-ui-rgb), 0.68);
/* Other alpha values - runtime mapping of setAlpha's set within :vars{} section above. */
--color-overlay: value(color-overlay);
--color-shadow: value(color-shadow);
--color-faint: value(color-faint);
--color-erratum: value(color-erratum);
--color-success: value(color-success);
--color-warning: value(color-warning);
/* = Accent colours */
--color-accent-1: value(color-indigo);
--color-accent-2: value(color-pink);
--color-accent-3: value(color-petrol);
--color-accent-4: value(color-blue);
--color-accent-5: value(color-teal);
--color-accent-6: value(color-light-blue);
/* = Background colours */
--color-background-main: #fff;
--color-background-1: value(color-light-grey);
/*
--color-background-3: rgba(160, 160, 160, 0.06);
--color-background-4: rgba(11, 13, 18, 0.34);
--color-background-modal: rgba(23, 26, 35, 0.98);
--color-background-menu: rgb(23, 26, 35);
*/
/* Semantic color referances */
--color-low-contrast: value(color-light-grey);
--color-mid-contrast: value(color-grey);
--color-high-contrast: value(color-dark-grey);
--color-heading: var(--color-accent-1);
--color-body: var(--color-ui);
--color-link: var(--color-accent-1);
--color-link-hover: value(color-dark-blue);
--color-link-visited: value(color-dark-purple);
--color-link-active: var(--color-accent-1);
--color-border: value(color-grey);
--color-border-light: value(color-light-grey);
--color-label: var(--color-ui);
--color-hint: value(color-dark-grey);
--color-disabled: var(--color-ui-alpha1);
--color-focus: value(color-yellow);
--color-selected: value(color-light-grey);
--color-focus-text: var(--color-accent-1);
--color-error: value(color-dark-red);
--color-warn: value(color-dark-orange);
--color-valid: value(color-dark-green);
--color-form-accent: var(--color-accent-1);
/* Special border rads */
--border-radius-special-md: 48px 0 32px 0;
--border-radius-special-lg: 0 50px 0 50px;
--border-radius-lg: 100px;
--background-hover-color: value(color-pink);
/* Gutters */
--gutter-width-sm: 16px;
--gutter-width-md: 24px;
--gutter-width-lg: 32px;
/* Spacing - Use in conjunction with calc() */
--spacing-unit: 8px;
/* Fonts */
--font-family-base: Arial, sans-serif;
--font-family-heading: "BCSans", var(--font-family-base);
--font-family-title: "BCSansHeading", var(--font-family-base);
/* Font sizes */
--base-font-size: 16px;
--base-font-size-sm: 14px;
--base-font-size-md: 16px;
--base-font-size-lg: 18px;
--base-font-size-xl: 20px;
/* Line heights */
--base-line-height: 24px;
/**
* GRID:
* We can name the grid lines what we like:
*
* grid-column-start: full-bleed-start;
* grid-column-end: full-bleed-end;
*
* grid-column-start: content-start;
* grid-column-end: content-end;
*
* grid-column-start: outset-start;
* grid-column-end: outset-end;
*
* Good as it is easy to maintain as the grid lines can be remapped at a theme level.
*
* The grid-template-column values on mobile and desktop differ slightly in that they map the grid
* lines differently. On mobile outset and content use the same grid lines but on desktop
* content sits 2 columns inside.
*
*/
/* Grid gaps */
--grid-gap-xs: 12px;
--grid-gap-md: 24px;
/* This is a calc that will give you mobile column width. */
--grid-base-column-width-sm: calc((100vw - 24px - (13 * 12px)) / 12);
/* This is the column width that aligns with the design when viewport is 1400px (as the design is). */
--grid-base-column-width-md: 4.011vw;
/* Base grid-template-column values for the 14 column grid, 2 columns are auto and we have 12 that make up the main working area. */
--grid-base-columns-sm: [full-bleed-start] 12px [outset-start content-start] repeat(12, 1fr) [content-end outset-end] 12px [full-bleed-end];
--grid-base-columns-md: [full-bleed-start] auto [outset-start] repeat(2, minmax(0, 4.011vw)) [content-start] repeat(8, minmax(0, 4.011vw)) [content-end] repeat(2, minmax(0, 4.011vw)) [outset-end] auto [full-bleed-end];
/* When we use the grid inside a grid we want to define the columns iniside above grid rule. So use this when using a grid inside a container */
--grid-inner-base-columns: repeat(12, minmax(0, 4.011vw));
/* SVG's */
/* Forms, checkbox */
--svg-checkbox-checked: url("data:image/svg+xml;utf8,");
--svg-checkbox-checked-disabled: url("data:image/svg+xml;utf8,");
/* Forms, switch */
--svg-switch-default: url("data:image/svg+xml;utf8,");
--svg-switch-checked: url("data:image/svg+xml;utf8,");
--svg-switch-disabled: url("data:image/svg+xml;utf8,");
--svg-switch-checked-disabled: url("data:image/svg+xml;utf8,");
/* Forms, radio */
--svg-radio-checked: url("data:image/svg+xml;utf8,");
--svg-radio-disabled: url("data:image/svg+xml;utf8,");
--svg-select: url("data:image/svg+xml;utf8,");
--svg-select-disabled: url("data:image/svg+xml;utf8,");
--svg-input-number: url("data:image/svg+xml;utf8,");
--svg-check: url("data:image/svg+xml;utf8,");
/* Set base font family on root */
font-family: var(--font-family-base);
}