@freecodexyz/design-system-scss

A Sass interface over the design system.

pnpm add -D @freecodexyz/design-system-scss

@use '@freecodexyz/design-system-scss' as ds;

.repository-row {
  @include ds.text(ui);
  @include ds.surface;
  @include ds.focus-ring;

  padding-inline: ds.space(4);
  color: ds.token(color-fg-muted);

  @include ds.up(md) {
    padding-inline: ds.space(6);
  }
}

Sass 1.80+ resolves the package with a pkg: URL:

@use 'pkg:@freecodexyz/design-system-scss' as ds;

Older setups need the workspace root on loadPaths.

This package emits no CSS

It is a build-time convenience, not a second source of truth. You still need the stylesheet:

@use '@freecodexyz/design-system-css';

token() returns a reference, not a value

color: ds.token(color-fg-muted);  // → var(--fcf-color-fg-muted)

That is deliberate and load-bearing. Sass runs at build time and cannot know which theme is active at render time, so compiling the value would freeze the light theme into your stylesheet and silently break dark mode.

ds.value() gives the compiled number, for build-time arithmetic only. It throws on an unknown token, so a typo fails the build rather than emitting an invalid declaration.

API

| Function / mixin | What it does | | ----------------------- | ------------------------------------------------ | | token($name, $fallback) | var(--fcf-$name) | | space($step) | var(--fcf-space-$step) | | value($name) | The compiled value. Build-time arithmetic only. | | rem($px) | px → rem, for translating a redline | | tint($name, $pct, $into) | color-mix(), so it still themes | | @include text($role) | Applies a type role in one line | | @include surface | Background, hairline and radius together | | @include focus-ring | The system's ring | | @include up/down($bp) | Breakpoints, mobile-first | | @include container($w)| A container query | | @include truncate($n) | One line, or clamped to n | | @include visually-hidden | Hidden visually, present for assistive tech | | @include motion-safe / motion-reduce / touch | The relevant media queries |