animations, transitions

variables

cubic-bezier

Since 0.1.0
$cubic-bezier: cubic-bezier(.25, .46, .45, .94) !default;

Description

Default cubic bezier function

Type

Function

durations

Since 0.1.0
$durations: (
	"xs": ".125s",
	"sm": ".25s",
	"md": ".5s",
	"lg": "1s",
	"xl": "1.5s",
) !default;

Description

Default set of animation durations

Map structure

key Namekey Descriptionkey Typekey Value
xs

extra short amount of time

Number.125s
sm

small amount of time

Number.25s
md

medium amount of time

Number.5s
lg

large amount of time

Number1s
xl

longest amount of time

Number1.5s

Used by

duration

Since 0.1.0
$duration: map.get($durations, "sm") !default;

Description

Default animation duration

Type

Number

Requires

backgrounds & borders

variables

border-colors

Since 0.1.0
$border-colors: (
	dark: rgb(0, 0, 0),
	mid: rgb(128, 128, 128),
	light: rgb(255, 255, 255),
);

Description

Default set of border colors

Map structure

key Namekey Descriptionkey Typekey Value
dark

dark border color

Colorrgb(0, 0, 0)
mid

middle contrasted border color

Colorrgb(128, 128, 128)
light

light border color

Colorrgb(255, 255, 255)

border-radii

Since 0.1.0
$border-radii: (
	"xs": ".125rem",
	"sm": ".25rem",
	"md": ".5rem",
	"lg": "1rem",
	"xl": "2rem",
	"round": "100%",
) !default;

Description

Default set of border radii

Map structure

key Namekey Descriptionkey Typekey Value
xs

extra small border radius

Number.125rem
sm

small border radius

Number.25rem
md

medium border radius

Number.5rem
lg

large border radius

Number1rem
xl

extra large border radius

Number2rem
round

rounded border radius

Number100%

Used by

border-radius

Since 0.1.0
$border-radius: map.get($border-radii, "md") !default;

Description

Default border radius

Type

Number

Requires

border-widths

Since 0.1.0
$border-widths: (
	"xs": ".0625rem",
	"sm": ".125rem",
	"md": ".1875rem",
	"lg": ".25rem",
	"xl": ".5rem",
) !default;

Description

Default set of border-widths

Map structure

key Namekey Descriptionkey Typekey Value
xs

extra small border width

Number.0625rem
sm

small border width

Number.125rem
md

medium border width

Number.1875rem
lg

large border width

Number.25rem
xl

extra large border width

Number.5rem

Used by

border-width

Since 0.1.0
$border-width: map.get($border-widths, "md") !default;

Description

Default border width

Type

Number

Requires

box model

variables

spacer

Since 0.1.0
$spacer: 1 !default;

Description

Base line multiplier for spacing

Type

Number

Used by

spacing

Since 0.1.0
$spacing: (
	"0": 0,
	"eighth": "#{($spacer / 8)}rem",
	"qtr": "#{($spacer / 4)}rem",
	"half": "#{($spacer / 2)}rem",
	"3qtr": "#{($spacer * 3 / 4)}rem",
	"1": "#{$spacer}rem",
	"2": "#{($spacer * 2)}rem",
	"3": "#{($spacer * 3)}rem",
) !default;

Description

Default set of spacing

Map structure

key Namekey Descriptionkey Typekey Value
0

reset the size to 0

Number0
eighth

1/8th the size of the default spacer

Number.125rem
qtr

1/4th the size of the default spacer

Number.25rem
half

1/2 the size of the default spacer

Number.5rem
3qtr

3/4th the size of the default spacer

Number.75rem
1

the size of the default spacer

Number1rem
2

2 times the size of the default spacer

Number2rem
3

3 times the size of the default spacer

Number3rem

Requires

  • [variable] spacer — multiplier for creating map

sizing

Since 0.1.0
$sizing: (
	"auto": "auto",
	"0": 0,
	"25": "25%",
	"50": "50%",
	"75": "75%",
	"100": "100%",
) !default;

Description

Default set of sizing

Map structure

key Namekey Descriptionkey Typekey Value
auto

75% of the total containers space

Stringauto
0

0% of the total containers space

Number0
25

25% of the total containers space

Number25%
50

50% of the total containers space

Number50%
75

75% of the total containers space

Number75%
100

100% of the total containers space

Number100%

sizing-prefixes

Since 0.1.0
$sizing-prefixes: (max-, min-, "") !default;

Description

Sizing prefixes used for widths and heights

Type

List

color

variables

opacities

Since 0.1.0
$opacities: (
	"invisible": 0,
	"disabled": .65,
	"beneath": .99,
	"visible": 1,
) !default;

Description

Base line multiplier for spacing

Map structure

key Namekey Descriptionkey Typekey Value
invisible

set opacity to 0 to be invisible

Number0
disabled

set opacity to appear disabled

Number.65
beneath

set opacity to force stacking context and lay beneath

Number.99
visible

set opacity to 1 to be visible

Number1

fonts

variables

font-families

Since 0.1.0
$font-families: (
	"monospace": #{menlo, monaco, consolas, "Courier New", monospace},
	"sans-serif": #{-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif},
	"serif": #{georgia, "Times New Roman", times, serif},
) !default;

Description

Default set of font families

Map structure

key Namekey Descriptionkey Typekey Value
monospace

the default monospace family

Stringmenlo, monaco, consolas, "Courier New", monospace
sans-serif

the default sans serif font family

String-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif
serif

the default serif font family

Stringgeorgia, "Times New Roman", times, serif

Used by

font-family

Since 0.1.0
$font-family: map.get($font-families, "sans-serif") !default;

Description

Default font family

Type

String

Requires

font-sizes

Since 0.1.0
$font-sizes: (
	"1": ".75rem",
	"2": ".85rem",
	"3": "1rem",
	"4": "1.25rem",
	"5": "1.5rem",
	"6": "2rem",
) !default;

Description

Default set of font sizes

Map structure

key Namekey Descriptionkey Typekey Value
1

smallest font size, about ~14px

Number.75rem
2

smaller font size, about ~16px

Number.85rem
3

medium font size, 18px

Number1rem
4

large font size, about ~21px

Number1.25rem
5

larger font size, about ~27px

Number1.5rem
6

largest font size, 36px

Number2rem

Used by

font-size

Since 0.1.0
$font-size: map.get($font-sizes, "3") !default;

Description

Default font size

Type

Number

Requires

font-weights

Since 0.1.0
$font-weights: (
	"thin": 100,
	"slim": 200,
	"light": 300,
	"normal": 400,
	"demibold": 500,
	"semibold": 600,
	"bold": 700,
	"thick": 800,
	"heavy": 900,
) !default;

Description

Default set of font weights

Map structure

key Namekey Descriptionkey Typekey Value
thin

thin font weight

String100
slim

slim font weight

String200
light

light font weight

String300
normal

normal font weight; matches normal keyword

String400
demibold

demi bold weight

Number500
semibold

semi bold weight

Number600
bold

bold font weight, matches bold keyword

Number700
thick

dark font weight

Number800
heavy

darkest font weight

Number900

line-heights

Since 0.1.0
$line-heights: (
	"xs": 1,
	"sm": 1.2,
	"md": 1.25,
	"lg": 1.5,
	"xl": 2,
) !default;

Description

Default set of line heights

Map structure

key Namekey Descriptionkey Typekey Value
xs

smallest line-height; used to reset

Number1
sm

smaller line-height, typically for headings

Number1.2
md[1.25]

medium line-height

Number none
lg

large line-height, used as the baseline for most type

Number1.5
xl

larger line-height, used for small type

Number2

Used by

line-height

Since 0.1.0
$line-height: map.get($line-heights, "lg") !default;

Description

Default line-height

Type

Number

Requires

line-height-heading

Since 0.1.0
$line-height-heading: map.get($line-heights, "sm") !default;

Description

Default line-height for headings

Type

Number

Requires

fragmentation

variables

box-directions

Since 0.1.0
$box-directions: (
	"all": "",
	"bottom": "bottom",
	"left": "left",
	"right": "right",
	"top": "top",
) !default;

Description

Default set of directions for the box model

Map structure

key Namekey Descriptionkey Typekey Value
all

all sides of the box model

String''
bottom

only the bottom side will be affected

String'bottom'
left

only the left side will be affected

String'left'
right

only the right side will be affected

String'right'
top

only the top will be affected

String'top'

media queries

variables

breakpoints

Since 0.1.0
$breakpoints: (
	"xs": "0",
	"sm": "34em",
	"md": "48em",
	"lg": "62em",
	"xl": "75em",
) !default;

Description

Default set of breakpoints

Map structure

key Namekey Descriptionkey Typekey Value
xs

screens between 0 and 534px

Number0
sm

screens between ~544px and ~767px wide

Number34em
md

screens between ~768px and ~991px wide

Number48em
lg

screens between ~992px and ~1199px wide

Number62em
xl

screens larger than ~1200px wide

Number75em

positioning

variables

z-indices

Since 0.1.0
$z-indices: (
	"level-negative-1": -1000,
	"level-0": 0,
	"level-1": 1000,
	"level-2": 2000,
	"level-3": 3000,
	"level-4": 4000,
	"level-5": 5000,
	"level-6": 6000,
	"level-7": 7000,
	"level-8": 8000,
	"level-9": 9000,
) !default;

Description

Default set of z-indicies

Map structure

key Namekey Descriptionkey Typekey Value
level-negative-1

negative z-index

String-1000
level-0

level 0, base level

Number0
level-1

level 1

Number1000
level-2

level 2

Number2000
level-3

level 3

Number3000
level-4

level 4

Number4000
level-5

level 5

Number5000
level-6

level 6

Number6000
level-7

level 7

Number7000
level-8

level 8

Number8000
level-9

level 9

Number9000