Variables

The design tokens, and vars() to reference them. Every token is !default: override it before the first @use. The settings are in the configuration page.

27 documented in src/variables.scss.

add-used-variable($var-name)

Records that a design token is used, so that export-css-variables() writes it. Called by vars(): use that one in the stylesheets.

Parameter	Type	Description
$var-name	string	The name of the token, without the leading dashes.

Returns The map of the tokens recorded so far.

vars($var-name)

References a design token as a CSS custom property, and records it so that export-css-variables() writes it on :root. A token that no stylesheet references through vars() is not exported: the CSS stays as small as what it uses.

Parameter	Type	Description
$var-name	string	The name of the token, without the leading dashes (e.g. blue-grey-darken-2, spacing-md).

Returns The var(--name) reference.

.button {
  background: vars('blue-grey-darken-2'); // var(--blue-grey-darken-2)
  padding: vars('spacing-md');            // var(--spacing-md)
}

:root {
  @include mx.export-css-variables(); // --blue-grey-darken-2: #455a64; --blue-grey-darken-2-rgb: 69 90 100; ...
}

get-used-variables()

Lists the tokens recorded by vars().

Returns The names of the tokens in use.

$breakpoints

The width classes, from the smallest screen to the largest. Material 3 window size classes.

The styles are written mobile first: the base rules are for the smallest screen (a phone of 320px), and a media query only redefines what changes from its width up (min-width). What is not in a query is the base: it is for the smallest screen, and a screen narrower than a phone, like a watch, gets it too. That is why the first class starts above 0.

• below medium: phones, up to 599px (the base)
• medium: tablets in portrait, 600px and over
• expanded: tablets in landscape, small laptops, 840px and over
• large: laptops and desktops, 1200px and over
• extra-large: wide desktops, 1600px and over

$breakpoints-height

The height classes, for the screens that are wide but short (a phone in landscape). Below medium is the base (480px: the 320x480 phone is the smallest screen planned).

$containers

The maximum width of a container, for each width class. The base fills the screen. A container is as wide as the class it starts at, so the content never gets wider than the screen that the class is made for.

$grids

The layout grid of each width class (base is the base, below medium), from the Material 2 responsive layout grid: 4 columns on a phone, 8 on a tablet, 12 from expanded on (Material 2 puts it at 905px, the Material 3 expanded class starts at 840px). A class that is not here keeps the grid of the one before it (mobile first), so the grid only changes at medium and expanded. Material makes the margins scale on the large screens: the container does that.

• cols: the number of columns
• gap: the gutter between the columns
• margin: the margin on the sides of the grid

$spacings

Defines common spacing values used throughout the design. These are typically applied for margins, paddings, gaps, and other spacing needs.

Values are stored as rem for consistent spacing across devices. The spacing values range from 0px to larger values like 48px.

$z-index

Defines the z-index of the layers that stack on the page, from the lowest to the highest.

• sticky: bars that stay on the edge while scrolling
• floating: buttons floating over the content
• banner: notices pinned to the viewport
• overlay: dialogs, drawers, skip links

$durations

The durations of Material 3, by the area a transition crosses, plus loop for an animation that repeats.

• short1 to short4 (50 to 200ms): small utility transitions, a state change
• medium1 to medium4 (250 to 400ms): a transition across a medium area of the screen
• long1 to long4 (450 to 600ms): large expressive transitions
• extra-long1 to extra-long4 (700 to 1000ms): ambient transitions with no user input
• loop: one turn of an animation that repeats (skeleton), not from Material

$easings

The easing curves of Material 3, as CSS cubic-bezier(). standard is for simple, small or utility transitions, emphasized for the expressive ones. Material gives no CSS curve for emphasized itself (a path that CSS cannot write): it falls back to standard, as it says.

$motion

What each kind of movement uses by default. A value is a key of $durations or $easings, or a time. The component styles, animations.scss and animate() read it, so changing it here changes them all; a call can still give its own (animate(fade-in, $duration: short2)).

• enter, exit: a large element (dialog, drawer) comes in slowly and decelerating, goes fast
• enter-small, exit-small: the same for a small one (menu, popover, toast), in standard easing
• state: a change of state (hover, a bar that fills)
• ripple-press, ripple-release: the ripple of a press, from Material Web

$focus-ring

The focus ring of the component styles, in px (written in rem). Material 3 draws a 3dp ring; 2px with a 2px offset keeps it visible without crowding what it surrounds.

$animations

The keyframes of animations.scss, that animate() can use. In and out come in pairs.

• fade, scale (from 90%), slide-up, slide-down, slide-start, slide-end: an element enters (-in) or leaves (-out). The slides follow the writing direction.
• spin, pulse, shake: no in or out. A loader that turns, a call for attention, an error.

$font-family

Font family map Defines the font families used throughout the design for consistency.

• sans: Sans-serif fonts
• mono: Monospaced fonts
• brand: the typeface of the large styles of the type scale (display, headline, title-large)
• plain: the typeface of the small styles (title, body, label), made to be read Material 3 sets both to Roboto: set them apart to give the large styles their own voice.

$font-weight

Font weight map Defines the font weights for different text elements.

• light: 300
• base: 400
• bold: 700

$font-size

Font size map Defines the font sizes for various text elements, in px: they are converted to rem from $default-font-size where they are used, so they follow the base font size.

$line-height

Line Heights Defines line heights for various text elements. These are used to ensure appropriate vertical spacing between lines of text.

$letter-spacings

Letter spacing The tracking values of the type scale, in px (converted to rem where they are used). A numeric key is the value in hundredths of a pixel, neg- for a negative one: 25 is 0.25px, neg-150 is -1.5px.

• neg-25, 0, 10, 15, 25, 40, 50: the tracking of the Material 3 type scale
• neg-150, neg-50, 125, 150: the Material 2 values that Material 3 has no equivalent for (large headlines, button, overline)
• tight, wide, widest: names for the common cases

$type-scale

Type scale The 15 baseline styles of the Material 3 type scale, from the md.sys.typescale tokens: display, headline, title, body and label, each in large, medium and small. Sizes, line heights and tracking are in px, converted to rem where they are used, so they follow the base font size. The weight is the name of a key of $font-weight, the font the name of a key of $font-family (brand or plain). emphasized-weight is the weight of the emphasized style of the same role: one step heavier (the values are those of the md.sys.typescale.emphasized.* tokens, whose only difference with the baseline is the weight). Apply a style with type(), or @extend %type-<role>.

$headings

Headings Styles Map defining styles for each heading level (h1 to h6): margins, paddings, line height, weight and letter spacing. The text styles come from the Material 3 type scale: h1 to h3 are the headline styles (large, medium, small), h4 to h6 the title styles (large, medium, small). The font size is the fluid one, from $font-size-fluid.

$shape-radius

Shapes The corner radius scale of Material 3: ten steps, named for the roundness of the corner. Apply one to the four corners with shape(), or to a side (top, end...) with its second argument. full is a pill: a radius larger than any element, so the ends are always round.

$elevations

The elevation levels of Material 3, 0 to 5 (0, 1, 3, 6, 8 and 12dp), as the two layers of shadow that Material builds them from: a close, darker one (1) and a wide, lighter one (2). Each layer has the size of the shadow (x y blur spread), its color and its alpha. The shadows are those of the md-elevation component of Material Web. Use a level with elevation(); a surface rests on level 1 to 3.

$colors

Colors Maps or colors with declination, from the material design.

$states

States

$theme

Theme - Semantic color tokens Default semantic token → Material palette mapping. Override before @use to change individual tokens, or pass overrides to mx.generate-theme().

Example override: @use "@zairakai/mithril-scss/src/variables" with ( $theme: map.merge(variables.$theme, (primary: #ff5722, on-primary: #fff)) );

$theme-roles

The roles of Material 3 that come from the colors of the theme, with the tone of each in the light and the dark mode (Material's baseline values). A role is (source, tone): primary, secondary and error are the colors of $theme, neutral is a grey. color-tone() gives the color: a container is tone 90 of its color in the light mode and 30 in the dark mode, the text on it is tone 10 and 90. generate-theme() writes them with the tokens of $theme.