Global Configuration

The lowest layer of Stylament is a global configuration object. From this, a set of CSS custom properties will be generated. In contrast to that flat list of variables, this configuration object is a hierachical map. By using mapping functions and aliases it reflects the relationships between properties.

There is a default configuration tree that will be merged with your custom configuration (unless you opt out).

Structure of the Configuration Map

The map consists of the following sections:

layout (length, container, spacing, …)
typography (font, letter-spacing, line, measure, …)
ui (radius, shadow, stroke, easing, …)
coloring (palettes, color, …)

These sections exist merely for organizational purpose. Their names are not included in the generated CSS custom properties. The maps nested under each section are searched for the following contained maps:

literal (for defining literal values)
logical (for defining aliases)
mapped (for generating series from parameters)

Any map that contains either will be turned into a series of custom properties. Its name will be prefixed with the names of any parent maps (except the top-level section) to make up the property name, e. g. the map typography/font/size containing a map literal will result in properties like --s-font-size-….

See the config examples on how to use literal, logical, and mapped.

$custom (Map)

scss

$custom: () !default;

Configuration to be injected by consumers. This map is defined by passing $config-custom to Stylament. For the structure of this custom configuration see $default.

Example

scss Using Stylament with custom configuration

@use "custom-config" as custom;
@use "stylament/css/axioms" with ($config-custom: custom.$config);

css compiled

@charset "UTF-8";
:root {
  --s-length-0aug: 0.25rlh;
  --s-length-0½: 0.5rlh;
  --s-length-1dim: 0.75rlh;
  --s-length-1: 1rlh;
  --s-length-1aug: 1.25rlh;
  --s-length-1½: 1.5rlh;
  --s-length-2dim: 1.75rlh;
  --s-length-2: 2rlh;
  --s-length-2aug: 2.25rlh;
  --s-length-2½: 2.5rlh;
  --s-length-3dim: 2.75rlh;
  --s-length-3: 3rlh;
}

:root {
  --s-container-xxs: 0rem;
  --s-container-xs: 16rem;
  --s-container-sm: 32rem;
  --s-container-md: 48rem;
  --s-container-lg: 64rem;
  --s-container-xl: 80rem;
  --s-container-xxl: 96rem;
  --s-container-sm: 32rem;
  --s-container-nav-wide: var(--s-container-sm);
  --s-container-page: var(--s-container-sm);
}

:root {
  --s-spacing-sectioning: var(--s-spacing-block);
}

:root {
  --s-spacing-block-xxs: 0.125rlh;
  --s-spacing-block-xs: 0.25rlh;
  --s-spacing-block-sm: 0.5rlh;
  --s-spacing-block-md: 1rlh;
  --s-spacing-block-lg: 2rlh;
  --s-spacing-block-xl: 4rlh;
  --s-spacing-block-xxl: 8rlh;
  --s-spacing-block-default: var(--s-spacing-block-md);
  --s-spacing-block: var(--s-spacing-block-default);
}

:root {
  --s-spacing-inline-xxs: 0.25ch;
  --s-spacing-inline-xs: 0.5ch;
  --s-spacing-inline-sm: 1ch;
  --s-spacing-inline-md: 2ch;
  --s-spacing-inline-lg: 4ch;
  --s-spacing-inline-xl: 8ch;
  --s-spacing-inline-xxl: 16ch;
  --s-spacing-inline-default: var(--s-spacing-inline-md);
  --s-spacing-inline: var(--s-spacing-inline-default);
}

:root {
  --s-spacing-flow-list: 0em;
  --s-spacing-flow-sectioning: clamp(var(--s-spacing-block-md), (100vi - var(--s-container-sm)) / 4, var(--s-spacing-block-lg));
  --s-spacing-flow-default: var(--s-spacing-block-sm);
  --s-spacing-flow-heading: var(--s-spacing-block-md);
  --s-spacing-flow-deflist: var(--s-spacing-block-sm);
  --s-spacing-flow: var(--s-spacing-flow-default);
}

:root {
  --s-spacing-wrap-default: var(--s-spacing-flow-default) var(--s-spacing-inline-default);
  --s-spacing-wrap-sectioning: var(--s-spacing-flow-sectioning) var(--s-spacing-inline-lg);
  --s-spacing-wrap: var(--s-spacing-wrap-default);
}

:root {
  --s-spacing-indent-default: var(--s-spacing-inline-default);
  --s-spacing-indent: var(--s-spacing-indent-default);
}

:root {
  --s-font-family-sans: Helvetica;
  --s-font-family-serif: Times;
  --s-font-family-mono: Courier;
  --s-font-family-body: var(--s-font-family-serif);
  --s-font-family-heading: var(--s-font-family-sans);
  --s-font-family-display: var(--s-font-family-body);
}

:root {
  --s-font-size--2: 0.4444444444em;
  --s-font-size--1: 0.6666666667em;
  --s-font-size-0: 1em;
  --s-font-size-1: 1.5em;
  --s-font-size-2: 2.25em;
  --s-font-size-3: 3.375em;
  --s-font-size-4: 5.0625em;
  --s-font-size-5: 7.59375em;
  --s-font-size-6: 11.390625em;
  --s-font-size-7: 17.0859375em;
  --s-font-size-8: 25.62890625em;
  --s-font-size-9: 38.443359375em;
  --s-font-size-ratio: 1.5;
  --s-font-size-smaller: 66.6666666667%;
  --s-font-size-larger: 150%;
  --s-font-size-root: clamp(0.96875rem, 0.9375rem + 0.1953125vw, 1.25rem);
}

:root {
  --s-font-weight-thin: 100;
  --s-font-weight-extralight: 200;
  --s-font-weight-light: 300;
  --s-font-weight-regular: 400;
  --s-font-weight-book: 500;
  --s-font-weight-medium: 600;
  --s-font-weight-bold: 700;
  --s-font-weight-black: 800;
  --s-font-weight-ultra: 900;
  --s-font-weight-body: var(--s-font-weight-regular);
  --s-font-weight-emphasis: var(--s-font-weight-bold);
  --s-font-weight-heading: var(--s-font-weight-bold);
}

:root {
  --s-letter-spacing-xxs: -0.075em;
  --s-letter-spacing-xs: -0.05em;
  --s-letter-spacing-sm: -0.025em;
  --s-letter-spacing-md: 0em;
  --s-letter-spacing-lg: 0.025em;
  --s-letter-spacing-xl: 0.05em;
  --s-letter-spacing-xxl: 0.075em;
  --s-letter-spacing-none: var(--s-letter-spacing-md);
}

:root {
  --s-measure-xxs: 25ch;
  --s-measure-xs: 36ch;
  --s-measure-sm: 49ch;
  --s-measure-md: 64ch;
  --s-measure-lg: 81ch;
  --s-measure-xl: 100ch;
  --s-measure-xxl: 121ch;
  --s-measure-full: 100%;
  --s-measure-inf: unset;
  --s-measure-default: var(--s-measure-md);
  --s-measure: var(--s-measure-default);
}

:root {
  --s-radius-xxs: 0rem;
  --s-radius-xs: 0.2rem;
  --s-radius-sm: 0.4rem;
  --s-radius-md: 0.6rem;
  --s-radius-lg: 0.8rem;
  --s-radius-xl: 1rem;
  --s-radius-xxl: 1.2rem;
  --s-radius-ellipse: 100%;
  --s-radius-obround: 999rem;
}

:root {
  --s-shadow-xxs: 0rem 0.03125rem 0.0625rem rgb(0 0 0 / 0.203125);
  --s-shadow-xs: 0rem 0.0625rem 0.125rem rgb(0 0 0 / 0.21875);
  --s-shadow-sm: 0rem 0.125rem 0.25rem rgb(0 0 0 / 0.234375);
  --s-shadow-md: 0rem 0.25rem 0.5rem rgb(0 0 0 / 0.25);
  --s-shadow-lg: 0rem 0.5rem 1rem rgb(0 0 0 / 0.265625);
  --s-shadow-xl: 0rem 1rem 2rem rgb(0 0 0 / 0.28125);
  --s-shadow-xxl: 0rem 2rem 4rem rgb(0 0 0 / 0.296875);
}

:root {
  --s-stroke-width-1: 0.0625rem;
  --s-stroke-width-2: 0.125rem;
  --s-stroke-width-3: 0.1875rem;
  --s-stroke-width-4: 0.25rem;
  --s-stroke-width-5: 0.3125rem;
  --s-stroke-width-6: 0.375rem;
  --s-stroke-width-7: 0.4375rem;
  --s-stroke-width-8: 0.5rem;
  --s-stroke-width-default: var(--s-stroke-width-2);
  --s-stroke-width: var(--s-stroke-width-default);
}

:root {
  --s-stroke-style-default: solid;
  --s-stroke-style: var(--s-stroke-style-default);
}

:root {
  --s-stroke-color-default: var(--s-color-tertiary-700);
  --s-stroke-color: var(--s-stroke-color-default);
}

:root {
  --s-easing-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --s-easing-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --s-easing-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --s-easing-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --s-easing-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --s-easing-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --s-easing-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --s-easing-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --s-easing-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --s-easing-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --s-easing-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --s-easing-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --s-easing-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --s-easing-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --s-easing-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --s-easing-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --s-easing-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --s-easing-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --s-easing-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --s-easing-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --s-easing-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --s-easing-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --s-easing-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --s-easing-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --s-easing-default: ease-in-out;
  --s-easing: var(--s-easing-default);
}

:root {
  --s-color-body: PapayaWhip;
  --s-color-body-contra: MidnightBlue;
  --s-color-neutral: LightSlateGray;
}

* {
  margin: unset;
  padding: unset;
  border: unset;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:target {
  scroll-margin-block-start: var(--s-length-3);
}

* {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

:is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
:is(h1, h2, h3, h4, h5, h6, p) :is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: inline;
  max-block-size: 1em;
}

audio,
iframe:not([width]) {
  inline-size: 100%;
}

:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details, div) {
  ---flow-space: var(--s-spacing-flow-default);
}

:is(article, section, nav, aside) {
  ---flow-space: var(--s-spacing-flow-sectioning);
}

:is(h1, h2, h3, h4, h5, h6) {
  ---flow-space: var(--s-spacing-flow-heading, var(--s-spacing-flow-default));
}

li,
li :is(ol, ul, menu) {
  ---flow-space: var(--s-spacing-flow-list, var(--s-spacing-flow-default));
}

dt {
  ---flow-space: var(--s-spacing-flow-defterm, var(--s-spacing-flow-deflist, var(--s-spacing-flow-default)));
}

dd {
  ---flow-space: var(--s-spacing-flow-defdata, var(--s-spacing-flow-deflist, var(--s-spacing-flow-default)));
}

* + :is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details),
:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details) + div {
  margin-block-start: var(---flow-space, 1em);
}

:where(:is(article, section, nav, aside):not(:first-child)) {
  margin-block-start: var(---flow-space);
}
:where(:is(article, section, nav, aside):not(:last-child)) {
  margin-block-end: var(---flow-space);
}

:is(ol, ul, menu) {
  ---indent-root: var(--s-spacing-indent-list-root, 0);
  ---indent: var(--s-spacing-indent-list, var(--s-spacing-indent-list-root, var(--s-spacing-indent-default)));
  padding-inline-start: var(---indent-root);
}

li :is(ol, ul, menu) {
  ---indent: inherit;
  padding-inline-start: var(---indent);
}

dd {
  ---indent: var(--s-spacing-indent-deflist, var(--s-spacing-indent-default));
  margin-inline-start: var(---indent);
}

blockquote {
  ---indent: var(--s-spacing-indent-quotation, var(--s-spacing-indent-default));
  margin-inline: var(---indent);
}

figure {
  ---indent: var(--s-spacing-indent-figure, var(--s-spacing-indent-default));
  margin-inline: var(---indent);
}

html {
  font-size: var(--s-font-size-root, 1rem);
  line-height: var(--s-line-root, var(--s-line-default));
}

body {
  font-family: var(--s-font-family-body);
  font-weight: var(--s-font-weight-body);
  font-size: var(--s-font-size-0);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--s-font-family-heading);
  font-weight: var(--s-font-weight-heading);
}

h1 {
  font-size: var(--s-font-size-3);
}

h2 {
  font-size: var(--s-font-size-2);
}

h3 {
  font-size: var(--s-font-size-1);
}

h4 {
  font-size: var(--s-font-size-0);
}

h5 {
  font-size: var(--s-font-size--1);
}

h6 {
  font-size: var(--s-font-size--2);
}

:is(h1, h2, h3, h4, h5, h6),
:is(p, address, summary, figcaption, caption) {
  max-inline-size: var(---measure, var(--s-measure-default));
}

:is(code, kbd, samp),
pre {
  font-family: var(--s-font-family-mono);
}

:is(small, sub, sup) {
  font-size: var(--s-font-size-smaller);
}

Used By

$merged

$use-default (Boolean)

scss

$use-default: true !default;

Whether to use or to ignore the default configuration. With this set to false only the custom configuration is taken into account.

Example

scss Using Stylament without default configuration

@use "custom-config" as custom;
@use "stylament/css/axioms" with ($config-custom: custom.$config, $config-use-default: false);

css compiled

:root {
  --s-container-sm: 32rem;
  --s-container-page: var(--s-container-sm);
}

:root {
  --s-spacing-sectioning: var(--s-spacing-block);
}

:root {
  --s-font-family-serif: Times;
  --s-font-family-sans: Helvetica;
  --s-font-family-mono: Courier;
  --s-font-family-body: var(--s-font-family-serif);
  --s-font-family-heading: var(--s-font-family-sans);
}

:root {
  --s-color-body: PapayaWhip;
  --s-color-body-contra: MidnightBlue;
  --s-color-neutral: LightSlateGray;
}

* {
  margin: unset;
  padding: unset;
  border: unset;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:target {
  scroll-margin-block-start: var(--s-length-3);
}

* {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

:is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
:is(h1, h2, h3, h4, h5, h6, p) :is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: inline;
  max-block-size: 1em;
}

audio,
iframe:not([width]) {
  inline-size: 100%;
}

:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details, div) {
  ---flow-space: var(--s-spacing-flow-default);
}

:is(article, section, nav, aside) {
  ---flow-space: var(--s-spacing-flow-sectioning);
}

:is(h1, h2, h3, h4, h5, h6) {
  ---flow-space: var(--s-spacing-flow-heading, var(--s-spacing-flow-default));
}

li,
li :is(ol, ul, menu) {
  ---flow-space: var(--s-spacing-flow-list, var(--s-spacing-flow-default));
}

dt {
  ---flow-space: var(--s-spacing-flow-defterm, var(--s-spacing-flow-deflist, var(--s-spacing-flow-default)));
}

dd {
  ---flow-space: var(--s-spacing-flow-defdata, var(--s-spacing-flow-deflist, var(--s-spacing-flow-default)));
}

* + :is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details),
:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details) + div {
  margin-block-start: var(---flow-space, 1em);
}

:where(:is(article, section, nav, aside):not(:first-child)) {
  margin-block-start: var(---flow-space);
}
:where(:is(article, section, nav, aside):not(:last-child)) {
  margin-block-end: var(---flow-space);
}

:is(ol, ul, menu) {
  ---indent-root: var(--s-spacing-indent-list-root, 0);
  ---indent: var(--s-spacing-indent-list, var(--s-spacing-indent-list-root, var(--s-spacing-indent-default)));
  padding-inline-start: var(---indent-root);
}

li :is(ol, ul, menu) {
  ---indent: inherit;
  padding-inline-start: var(---indent);
}

dd {
  ---indent: var(--s-spacing-indent-deflist, var(--s-spacing-indent-default));
  margin-inline-start: var(---indent);
}

blockquote {
  ---indent: var(--s-spacing-indent-quotation, var(--s-spacing-indent-default));
  margin-inline: var(---indent);
}

figure {
  ---indent: var(--s-spacing-indent-figure, var(--s-spacing-indent-default));
  margin-inline: var(---indent);
}

html {
  font-size: var(--s-font-size-root, 1rem);
  line-height: var(--s-line-root, var(--s-line-default));
}

body {
  font-family: var(--s-font-family-body);
  font-weight: var(--s-font-weight-body);
  font-size: var(--s-font-size-0);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--s-font-family-heading);
  font-weight: var(--s-font-weight-heading);
}

h1 {
  font-size: var(--s-font-size-3);
}

h2 {
  font-size: var(--s-font-size-2);
}

h3 {
  font-size: var(--s-font-size-1);
}

h4 {
  font-size: var(--s-font-size-0);
}

h5 {
  font-size: var(--s-font-size--1);
}

h6 {
  font-size: var(--s-font-size--2);
}

:is(h1, h2, h3, h4, h5, h6),
:is(p, address, summary, figcaption, caption) {
  max-inline-size: var(---measure, var(--s-measure-default));
}

:is(code, kbd, samp),
pre {
  font-family: var(--s-font-family-mono);
}

:is(small, sub, sup) {
  font-size: var(--s-font-size-smaller);
}

Used By

$merged

$default (Map)

scss

$default: (
  layout: (
    length: (
      mapped: (
        domain: mapping.$domain-tendency,
        range: (
          // -1: 0aug, 0: 0½, 1: 1dim, 2: 1, …
          start: -1,
          end: 10,
        ),
        function: meta.get-function("quantize", $module: "mapping"),
        params: (
          unit: 1rlh,
          sub: 4,
        ),
      ),
    ),
    container: (
      mapped: (
        domain: mapping.$domain-sizes,
        // Use multiples of 16rem centered around 48rem.
        function: meta.get-function("linear", $module: "function"),
        params: (
          slope: 16rem,
          initial: 48rem,
        ),
      ),
      literal: (),
      logical: (
        nav-wide: "sm",
        page: "xl",
      ),
    ),
    spacing: (
      block: (
        mapped: (
          domain: mapping.$domain-sizes,
          function: meta.get-function("exponential", $module: "function"),
          params: (
            base: 2,
            coefficient: 1rlh,
          ),
        ),
        logical: (
          default: md,
        ),
      ),
      inline: (
        mapped: (
          domain: mapping.$domain-sizes,
          function: meta.get-function("exponential", $module: "function"),
          params: (
            base: 2,
            coefficient: 2ch,
          ),
        ),
        logical: (
          default: md,
        ),
      ),
      flow: (
        literal: (
          list: 0em,
          sectioning:
            clamp(
              svar(spacing-block-md),
              (100vi - svar(container-sm)) / 4,
              svar(spacing-block-lg)
            ),
        ),
        logical: (
          default: "/spacing-block-sm",
          heading: "/spacing-block-md",
          deflist: "/spacing-block-sm",
        ),
      ),
      wrap: (
        logical: (
          default: "/spacing-flow-default" "/spacing-inline-default",
          sectioning: "/spacing-flow-sectioning" "/spacing-inline-lg",
        ),
      ),
      indent: (
        logical: (
          default: "/spacing-inline-default",
        ),
      ),
    ),
  ),
  typography: (
    font: (
      family: (
        literal: (
          sans: (
            "Source Sans",
            sans-serif,
          ),
          serif: (
            "Source Serif",
            serif,
          ),
          mono: (
            "Source Code",
            monospace,
          ),
        ),
        logical: (
          body: "serif",
          heading: "sans",
          display: "body",
        ),
      ),
      size: (
        mapped: (
          range: (
            start: -2,
            end: 9,
          ),
          function: meta.get-function("exponential", $module: "function"),
          params: (
            base: $-scale-ratio,
            coefficient: $-scale-base,
          ),
        ),
        literal: (
          ratio: $-scale-ratio,
          smaller: if($-scale-ratio, math.div(100%, $-scale-ratio), null),
          larger: if($-scale-ratio, 100% * $-scale-ratio, null),
          // Fluid root font size:
          // 1rem + (100vw - 32rem) * (1.125rem - 1rem) / (96rem - 32rem)
          // = 0.9375rem + 0.1953125vw
          root: clamp(0.96875rem, 0.9375rem + 0.1953125vw, 1.25rem),
        ),
      ),
      weight: (
        mapped: (
          domain: mapping.$domain-font-weights,
        ),
        logical: (
          body: "regular",
          emphasis: "bold",
          heading: "bold",
        ),
      ),
    ),
    letter-spacing: (
      mapped: (
        domain: mapping.$domain-sizes,
        function: meta.get-function("linear", $module: "function"),
        params: (
          slope: 0.025em,
        ),
      ),
      logical: (
        none: md,
      ),
    ),
    line: (
      rlh: if($-line-root and $-scale-base, rhythm.rlh($-scale-base, $-line-root), null),
    ),
    measure: (
      mapped: (
        domain: mapping.$domain-sizes,
        // Use square numbers centered around 64ch.
        // math.pow($size + 8, 2) * 1ch;

Default configuration. This also serves as a reference for your custom configuration.

Examples

scss Defining literal properties

$cfg: (
  layout: (
    indent: (
      literal: (
        editor: 4ch,
        extra: "var(--external-var)",
      ),
    ),
  ),
);

css Result

:root {
  --s-indent-editor: 4ch;
  --s-indent-extra: var(--external-var);
}

scss Defining logical properties (aliases)

$cfg: (
  typography: (
    measure: (
      logical: (
        // Link within the same group:
        default: md,
        // Use a leading “/” to refer to any other property:
        container: "/container-md",
      ),
    ),
  ),
);

css Result

:root {
  --s-measure-default: var(--s-measure-md);
  --s-measure-container: var(--s-container-md);
}

scss Defining mapped properties (calculated series)

@function radius($i) { @return (2 + $i) * 0.5rem; }

$cfg: (
  ui: (
    radius: (
      mapped: (
        domain: (sm: -1, md: 0, lg: 1),
        function: meta.get-function("radius"),
      ),
    ),
  ),
);

css Result

:root {
  --s-radius-sm: 0.5rem;
  --s-radius-md: 1rem;
  --s-radius-lg: 1.5rem;
}

Used By

$merged

@mixin set-colors()

$merged (Map)

scss

$merged: if($use-default, map.deep-merge($default, $custom), $custom);

The final map of all configuration values combined. This is used to look up configuration keys.

Requires

$use-default (Boolean)

$custom (Map)

Used By

prose Generated Properties

Color Palettes

$sizes@container

Line Heights

Mapping

Since most sequences of CSS custom properties are based on certain calculation rules, Stylament uses simple functions to map the values of a given domain to property values.

Mapping Domains

These simple maps represent the domains of property sequences.

$sizes

scss

$sizes: (
  "xxs": -3,
  "xs": -2,
  "sm": -1,
  "md": 0,
  "lg": 1,
  "xl": 2,
  "xxl": 3,
);

Map of size labels. Used as domain for mapped properties.

Example

css For generating properties like this

--s-shadow-xxs: …;
--s-shadow-xs: …;
--s-shadow-sm: …;
--s-shadow-md: …;
--s-shadow-lg: …;
--s-shadow-xl: …;
--s-shadow-xxl: …;

$tendency

scss

$tendency: (
  "dim": -0.29,
  "": 0,
  // ⪅ (¼ + ⅓)/2, i. e. approx. equal distance to ¼ and ⅓, slightly closer to ¼.
  "aug": 0.29,
  "½": 0.5,
);

Map of tendency indicators.

This is for specifying sizes that are smaller or bigger than, exactly on a whole step or right between two steps (known from grading at school or musical intervals).

Meant as a recurring domain the labels are appended as suffixes to continuous integer numbers.

Stylament uses this for its length scale to produce a series of tokens based on whole logical units (rlh), while including sub-units as well.

$font-weights

scss

$font-weights: (
  "thin": 100,
  "extralight": 200,
  "light": 300,
  "regular": 400,
  "book": 500,
  "medium": 600,
  "bold": 700,
  "black": 800,
  "ultra": 900,
);

Map of font weights. Used as default domain for font weight properties.

Example

css Complete map of commonly used font weights.

--s-font-weight-thin: 100;
--s-font-weight-extralight: 200;
--s-font-weight-light: 300;
--s-font-weight-regular: 400;
--s-font-weight-book: 500;
--s-font-weight-medium: 600;
--s-font-weight-bold: 700;
--s-font-weight-black: 800;
--s-font-weight-ultra: 900;

Mapping Functions

These functions calculate the final property values corresponding to the given domain value.

@function quantize()

Quantize a given size to (sub-)units.

Parameters & Return

$size: (Number)

The target size to approximate in sub-units.

$unit: (Number)

The unit of whole steps.

$sub: (Number)

The number of subdivisions per main unit.

@return (Number)

Size quantized to subunits.

@function shadow()

Mapping function to generate Shadow Scale.

N.B.: We do without the spread radius, so these shadows can be used as text shadows, too.

Parameters & Return

$size: (Number)

The numerical size index.

$offset: 0.25rem (Number<rem>)

The offset radius of the medium shadow.

$blur: 0.5rem (Number<rem>)

The offset radius of the medium shadow.

$alpha: 0.25 (Number)

The alpha value of the medium shadow.

$angle: 270deg (Number<deg>)

The direction of the shadow.

$color: 0 0 0 (List<Number{3}>)

The color of the shadow (RGB).

@return (String)

The mapped value, a CSS .

Color Configuration

Stylament features quite sophisticated color configuration. While you can always resort to simply defining literal color values you can as well generate whole palettes from just a few variables.

$palettes@brand

scss

$palettes: (
  "grey": (
    hue: $prim,
    sl-curve: 0.1 0.9 0.2 0.9 0.2 0.1 0.1 0.1,
    range: $range,
    suffix: $suffix,
  ),
  "primary": (
    hue: $prim,
    sl-curve: $sl-curve,
    range: $range,
    suffix: $suffix,
  ),
  "secondary": (
    hue: $prim + $dist,
    sl-curve: $sl-curve,
    range: $range,
    suffix: $suffix,
  ),
  "tertiary": (
    hue: $prim - $dist,
    sl-curve: $sl-curve,
    range: $range,
    suffix: $suffix,
  ),
);

Brand colors. Kept separate from the default configuration to make it optional to import.

$mapping@logical

scss

$mapping: (
  body: "grey-600",
  body-contra: "grey-0",
  neutral: "grey-500",
  alternate: "grey-800",
  alternate-contra: "grey-200",
  mark: "grey-700",
  mark-contra: "grey-100",
  heading: "primary-700",
  heading-contra: "primary-200",
  heading-alternate: "tertiary-800",
  heading-alternate-contra: "tertiary-200",
  links: "secondary-700",
  links-contra: "secondary-100",
  links-alternate: "secondary-800",
  links-alternate-contra: "secondary-200",
  nav: "heading",
  nav-contra: "heading-contra",
  hr: "primary-500",
  list-marker: "primary-400",
);

Logical color map. Kept separate from the default configuration to make it optional to import.

$Easing Curves

scss

$penner: (
  in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53),
  in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19),
  in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22),
  in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06),
  in-sine: cubic-bezier(0.47, 0, 0.745, 0.715),
  in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035),
  in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335),
  in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045),
  out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94),
  out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1),
  out-quart: cubic-bezier(0.165, 0.84, 0.44, 1),
  out-quint: cubic-bezier(0.23, 1, 0.32, 1),
  out-sine: cubic-bezier(0.39, 0.575, 0.565, 1),
  out-expo: cubic-bezier(0.19, 1, 0.22, 1),
  out-circ: cubic-bezier(0.075, 0.82, 0.165, 1),
  out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275),
  in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955),
  in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1),
  in-out-quart: cubic-bezier(0.77, 0, 0.175, 1),
  in-out-quint: cubic-bezier(0.86, 0, 0.07, 1),
  in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95),
  in-out-expo: cubic-bezier(1, 0, 0, 1),
  in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86),
  in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55),
  default: ease-in-out,
);

Easing functions introduced by Robert Penner and approximated as cubic Bézier curves by Matthew Lein.