Stylescape Theme

The starter theme

---

The brand-neutral starter theme for the Stylescape design system, and the template every brand theme is copied from. It has the full layout of a fleet theme (see stylescape-mesmera, the reference brand) — --ss-* token overrides on top of stylescape core, a dark variant for whole pages or single bands, the Sass tools, the font plumbing, the tests — with a placeholder palette that is exactly stylescape core's own defaults. Installed under a site, it changes nothing; that is the point. Change a value in src/scss/tokens/_brand.scss and you see exactly that change.

To make a brand theme from it, follow doc/template.md.

Install

npm install -D github:stylescape/stylescape-theme stylescape sass

The package name is stylescape_npm, kept from the repository's first life; a theme copied from it takes its own.

Use

// The whole thing: stylescape core, the tokens, the dark theme, headings.
@use "pkg:stylescape_npm";

// Or just the tokens and the dark theme, without core:
@use "pkg:stylescape_npm/tokens";
@use "pkg:stylescape_npm/themes";

// The Sass tools, which emit nothing: breakpoints, fade(), dark(), heading().
@use "pkg:stylescape_npm/abstracts" as *;
@use "pkg:stylescape_npm/base" as type;

// The faces, once, as plain CSS (empty in the template).
import "stylescape_npm/font/fonts.css";

Light is the default. Stamp data-theme="dark" on <html> for a dark page, or on any one element for a dark band inside a light page.

Entry	What you get
.	core + tokens + dark theme + the heading setting on h1-h6
./tokens	the light token set at :root, no core
./themes	the dark set under [data-theme="dark"]
./abstracts	breakpoints, fade(), the dark mixin, the raw swatches
./base	the heading, body and eyebrow mixins, $preload
./font/*	fonts.css (and a brand's woff2 files)
./css	the compiled dist/css/ss.css (and ./css/min)
./stylelint	the consumer lint contract: no hex, no --ss-* declarations

Develop

make install   # npm ci
make check     # typecheck, ESLint, Prettier, tests
make build     # dist/css/ss{,.min}.css

The documentation is in doc/.