Sass API

Setup and configuration

Use the package importer to resolve the public Sass entry. Compile app.scss with sass --pkg-importer=node app.scss app.css.

@use "pkg:@expressivecss/expressive/scss" as expressive with (
  $md-source: #6750a4,
  $expressive-include-fonts: false
);

.notice {
  @include expressive.typescale("body-large");
  @include expressive.bp-up("expanded") { padding: 2rem; }
}

The main entry emits the stylesheet and forwards the shared abstracts. To use only functions and mixins without emitting framework CSS, load pkg:@expressivecss/expressive/scss/abstracts/index. Those mixins still need the framework tokens in the consuming stylesheet. Sass modules load once; configure a module on its first load.

Use pkg:@expressivecss/expressive/scss/custom to select $components and $utilities. Each is an ordered list of partial names. null loads the full group; () loads none. Tokens and base styles always load. Follow the smaller-build recipes for supporting partials.

Names beginning with _ or - are Sass-private. The forwarded $expressive-disabled selector is a shared implementation value, not a configurable !default setting. $motion-fast-spatial is a compatibility easing value; prefer the spring functions or motion tokens for new styles.

Functions

General mixins

Call mixins with @include expressive.name(...) inside a selector unless the entry says otherwise.

.notice {
  @include expressive.z-depth("1");
  @include expressive.focus-visible();
  &:hover {
    background: expressive.state-layer(var(--md-sys-color-primary), "hover");
  }
  @include expressive.bp-between("medium", "large") { padding: 1rem; }
}

Component mixins

These lower-level mixins build framework components. Prefer the documented HTML and classes for application code. A mixin emits styles only; it does not add semantics, keyboard behavior or labels. choice-fieldset, nav-destination and nav-destination-row are available through the abstracts entry only; the main and custom entries hide them.

Partial directory

Each component and utility partial links to its usage guide below. For the custom entry's lists, remove components/ or utilities/. For example, use "menu" in $components and "spacing" in $utilities. "forms" includes the complete forms group; a path such as "forms/checkboxes" selects one forms partial.

This alphabetical directory is a lookup table, not load order. Preserve the component index's order, with icons first, and include supporting partials. The recipes show working combinations. Base and token partials always load with either public stylesheet entry.