turretcss

Globals

An overview of turretcss and basic styling behaviours including global variables, fonts, color palettes, and media queries.

Contents

Base

Root

Sets @root-size on the :root element with responsive breakpoints.

--root-size: 16px;
--root-size-xl: var(--root-size);
--root-size-l: var(--root-size);
--root-size-m: var(--root-size);
--root-size-s: var(--root-size);
--root-size-xs: var(--root-size);

Focus Outline

Outline property and outline offset defintion for focusable elements.

--focus-outline: var(--border-width) dotted currentColor;
--focus-outline-offset: var(--border-width);

Gutter

Default ‘–gutter’ property definition for horizontal container padding.

--gutter: var(--space-xs);

Container

Default ‘.container’ width property definition element with responsive breakpoints.

--container-xl: 90rem;
--container-l: 80rem;
--container-m: 70rem;
--container-s: 100%;
--container-xs: 100%;

Color

Default ‘color’ property definition.

--color: var(--dark);

Background

Default ‘background’ property definition.

--background: var(--white);

Border

Default border-width, border-style, border-color, and border-radius definitions for buttons, inputs, tables, etc.

--border-width: 1px;
--border-style: solid;
--border-color: var(--light);
--border-radius: 2px;

Box Shadow

Default box-shadow property definitions including states.

--box-shadow: none;
--hover-box-shadow: none;
--focus-box-shadow: none;
--active-box-shadow: none;

Z-Index

Z-index utility definitions for general use.

--z-index-high: 999;
--z-index-m: 99;
--z-index-low: 9;

Speed

Default speeds for transitions.

--speed: var(--speed-fast);
--speed-fast: 200ms;
--speed-medium: 300ms;
--speed-slow: 500ms;

Sizes

Height

Height sizes for buttons, inputs, and selects.

--height-xl: 4rem;
--height-l: 3.5rem;
--height-m: 3rem;
--height-s: 2.5rem;
--height-xs: 2rem;

Space

Space sizes (xl, l, m, s, xs) for use globally, including utility classes.

--space-xl: calc(5rem + 1.5vw);
--space-l: calc(4rem + 1.25vw);
--space-m: calc(3rem + 1vw);
--space-s: calc(2rem + 0.75vw);
--space-xs: calc(1rem + 0.5vw);

Margin

Margin sizes (xl, l, m, s, xs) for use globally, including utility classes.

--margin-xl: var(--space-xl);
--margin-l: var(--space-l);
--margin-m: var(--space-m);
--margin-s: var(--space-s);
--margin-xs: var(--space-xs);

Padding

Padding sizes (xl, l, m, s, xs) for use globally, including utility classes.

--padding-xl: var(--space-xl);
--padding-l: var(--space-l);
--padding-m: var(--space-m);
--padding-s: var(--space-s);
--padding-xs: var(--space-xs);

Max Width

Max Width sizes (xl, l, m, s, xs) for use globally, including utility classes.

--max-width-xl: 80rem;
--max-width-l: 70rem;
--max-width-m: 60rem;
--max-width-s: 50rem;
--max-width-xs: 40rem;

Typography

Some top level definitions for the base font-size styles on the <html> tag, with breakpoints.

Font Family

Font Family System

Font Family Sans Serif

Font Family Serif

Font Family Monospace

--font-family: var(--font-family-system);
--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-serif: Georgia, "Times New Roman", Times, serif;
--font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;

Font Weight

Font Weight Thin

Font Weight Light

Font Weight Regular

Font Weight Medium

Font Weight Semibold

Font Weight Bold

Font Weight Black

--font-weight: normal;
--font-weight-thin: 200;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 800;

Font Size

Font Size Extra Large

Font Size Large

Font Size Medium

Font Size Small

Font Size Extra Small

--font-size-xl: 1.25rem;
--font-size-l: 1.125rem;
--font-size-m: 1rem;
--font-size-s: 0.875rem;
--font-size-xs: 0.75rem;

Line Height

Line Height Extra Large

Line Height Large

Line Height Medium

Line Height Small

Line Height Extra Small

--line-height: var(--line-height-s);
--line-height-xl: 1.8;
--line-height-l: 1.65;
--line-height-m: 1.5;
--line-height-s: 1.35;
--line-height-xs: 1.2;

Letter Spacing

Letter Spacing Extra Large

Letter Spacing Large

Letter Spacing Medium

Letter Spacing Small

Letter Spacing Extra Small

--letter-spacing: 0;
--letter-spacing-xl: 0.15em;
--letter-spacing-l: 0.1em;
--letter-spacing-m: 0.05em;
--letter-spacing-s: 0.025em;
--letter-spacing-xs: 0.01em;

Colors

White
Black
--white: #FFFFFF;
--white-hover: color(var(--white) shade(5%));
--white-active: color(var(--white) shade(10%));

--black: #000000;
--black-hover: color(var(--black) tint(20%));
--black-active: color(var(--black) tint(10%));

Shades

Light

Light
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900
--light: #D3D3D9;
--light-hover: var(--light-400);
--light-active: var(--light-600);
--light-100: color(var(--light) tint(80%));
--light-200: color(var(--light) tint(60%));
--light-300: color(var(--light) tint(40%));
--light-400: color(var(--light) tint(20%));
--light-500: var(--light);
--light-600: color(var(--light) shade(5%));
--light-700: color(var(--light) shade(10%));
--light-800: color(var(--light) shade(15%));
--light-900: color(var(--light) shade(20%));

Grey

Grey
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900
--grey: #616166;
--grey-hover: var(--grey-400);
--grey-active: var(--grey-600);
--grey-100: color(var(--grey) tint(30%));
--grey-200: color(var(--grey) tint(22.5%));
--grey-300: color(var(--grey) tint(15%));
--grey-400: color(var(--grey) tint(7.5%));
--grey-500: var(--grey);
--grey-600: color(var(--grey) shade(7.5%));
--grey-700: color(var(--grey) shade(15%));
--grey-800: color(var(--grey) shade(22.5%));
--grey-900: color(var(--grey) shade(30%));

Dark

Dark
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900
--dark: #323236;
--dark-hover: var(--dark-400);
--dark-active: var(--dark-600);
--dark-100: color(var(--dark) tint(20%));
--dark-200: color(var(--dark) tint(15%));
--dark-300: color(var(--dark) tint(10%));
--dark-400: color(var(--dark) tint(5%));
--dark-500: var(--dark);
--dark-600: color(var(--dark) shade(7.5%));
--dark-700: color(var(--dark) shade(15%));
--dark-800: color(var(--dark) shade(22.5%));
--dark-900: color(var(--dark) shade(30%));

Palettes

Primary

Primary
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
--primary: #3455DB;
--primary-hover: var(--primary-400);
--primary-active: var(--primary-600);
--primary-100: color(var(--primary) tint(40%));
--primary-200: color(var(--primary) tint(30%));
--primary-300: color(var(--primary) tint(20%));
--primary-400: color(var(--primary) tint(10%));
--primary-500: var(--primary);
--primary-600: color(var(--primary) shade(10%));
--primary-700: color(var(--primary) shade(20%));
--primary-800: color(var(--primary) shade(30%));
--primary-900: color(var(--primary) shade(40%));

Secondary

Secondary
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
--secondary: rebeccapurple;
--secondary-hover: var(--secondary-400);
--secondary-active: var(--secondary-600);
--secondary-100: color(var(--secondary) tint(40%));
--secondary-200: color(var(--secondary) tint(30%));
--secondary-300: color(var(--secondary) tint(20%));
--secondary-400: color(var(--secondary) tint(10%));
--secondary-500: var(--secondary);
--secondary-600: color(var(--secondary) shade(10%));
--secondary-700: color(var(--secondary) shade(20%));
--secondary-800: color(var(--secondary) shade(30%));
--secondary-900: color(var(--secondary) shade(40%));

Tertiary

Tertiary
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900
--tertiary: #8B008B;
--tertiary-hover: var(--tertiary-400);
--tertiary-active: var(--tertiary-600);
--tertiary-100: color(var(--tertiary) tint(40%));
--tertiary-200: color(var(--tertiary) tint(30%));
--tertiary-300: color(var(--tertiary) tint(20%));
--tertiary-400: color(var(--tertiary) tint(10%));
--tertiary-500: var(--tertiary);
--tertiary-600: color(var(--tertiary) shade(10%));
--tertiary-700: color(var(--tertiary) shade(20%));
--tertiary-800: color(var(--tertiary) shade(30%));
--tertiary-900: color(var(--tertiary) shade(40%));

Indicators

Error

Error
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900
--error: #D91E18;
--error-hover: var(--error-400);
--error-active: var(--error-600);
--error-100: color(var(--error) tint(40%));
--error-200: color(var(--error) tint(30%));
--error-300: color(var(--error) tint(20%));
--error-400: color(var(--error) tint(10%));
--error-500: var(--error);
--error-600: color(var(--error) shade(10%));
--error-700: color(var(--error) shade(20%));
--error-800: color(var(--error) shade(30%));
--error-900: color(var(--error) shade(40%));

Warning

Warning
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
--warning: #FF4500;
--warning-hover: var(--warning-400);
--warning-active: var(--warning-600);
--warning-100: color(var(--warning) tint(40%));
--warning-200: color(var(--warning) tint(30%));
--warning-300: color(var(--warning) tint(20%));
--warning-400: color(var(--warning) tint(10%));
--warning-500: var(--warning);
--warning-600: color(var(--warning) shade(10%));
--warning-700: color(var(--warning) shade(20%));
--warning-800: color(var(--warning) shade(30%));
--warning-900: color(var(--warning) shade(40%));

Success

Success
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
--success: #00AA00;
--success-hover: var(--success-400);
--success-active: var(--success-600);
--success-100: color(var(--success) tint(40%));
--success-200: color(var(--success) tint(30%));
--success-300: color(var(--success) tint(20%));
--success-400: color(var(--success) tint(10%));
--success-500: var(--success);
--success-600: color(var(--success) shade(10%));
--success-700: color(var(--success) shade(20%));
--success-800: color(var(--success) shade(30%));
--success-900: color(var(--success) shade(40%));

Info

Info
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900
--info: #1E90FF;
--info-hover: var(--info-400);
--info-active: var(--info-600);
--info-100: color(var(--info) tint(40%));
--info-200: color(var(--info) tint(30%));
--info-300: color(var(--info) tint(20%));
--info-400: color(var(--info) tint(10%));
--info-500: var(--info);
--info-600: color(var(--info) shade(10%));
--info-700: color(var(--info) shade(20%));
--info-800: color(var(--info) shade(30%));
--info-900: color(var(--info) shade(40%));