Stylament 0.23.2

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.

$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.375rem;
  --s-length-0½: 0.75rem;
  --s-length-1dim: 1.125rem;
  --s-length-1: 1.5rem;
  --s-length-1aug: 1.875rem;
  --s-length-1½: 2.25rem;
  --s-length-2dim: 2.625rem;
  --s-length-2: 3rem;
  --s-length-2aug: 3.375rem;
  --s-length-2½: 3.75rem;
  --s-length-3dim: 4.125rem;
  --s-length-3: 4.5rem;
}

: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-page: var(--s-container-sm);
}

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

:root {
  --s-spacing-block-xxs: 0.1875rem;
  --s-spacing-block-xs: 0.375rem;
  --s-spacing-block-sm: 0.75rem;
  --s-spacing-block-md: 1.5rem;
  --s-spacing-block-lg: 3rem;
  --s-spacing-block-xl: 6rem;
  --s-spacing-block-xxl: 12rem;
  --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: Source Sans Pro, sans-serif;
  --s-font-family-serif: Source Serif Pro, serif;
  --s-font-family-mono: Source Code Pro, monospace;
  --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-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-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;
}

:root {
  --s-line-root: 1.5;
  --s-line-root-abs: 1.5rem;
  --s-line--2: 1.6875;
  --s-line--1: 1.125;
  --s-line-0: 1.5;
  --s-line-1: 1;
  --s-line-2: 1;
  --s-line-3: 1.1111111111;
  --s-line-4: 1.037037037;
  --s-line-5: 1.0864197531;
  --s-line-6: 1.0534979424;
  --s-line-7: 1.0096021948;
  --s-line-8: 1.0242341107;
  --s-line-9: 1.0144795001;
}

* {
  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);
}

body {
  font-family: var(--s-font-family-body);
  font-weight: var(--s-font-weight-body);
  font-size: var(--s-font-size-0);
  line-height: var(--s-line-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);
  line-height: var(--s-line-3);
}

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

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

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

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

h6 {
  font-size: var(--s-font-size--2);
  line-height: var(--s-line--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);
}

:is(code, kbd, samp),
:is(small, sub, sup),
::marker {
  line-height: 0;
}

Used By

$merged

$-rlh (Number<rem>) [private]

scss 
$-rlh: rhythm.rlh($-scale-base, $-line-root);

Root line height. Absolute value mimicking the experimental CSS unit [rlh][mdn:rlh].

$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: $-rlh,
          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: (
        page: "xl",
      ),
    ),
    spacing: (
      block: (
        mapped: (
          domain: mapping.$domain-sizes,
          function: meta.get-function("exponential", $module: "function"),
          params: (
            base: 2,
            coefficient: $-rlh,
          ),
        ),
        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 Pro",
            sans-serif,
          ),
          serif: (
            "Source Serif Pro",
            serif,
          ),
          mono: (
            "Source Code Pro",
            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: math.div(100%, $-scale-ratio),
          larger: 100% * $-scale-ratio,
          // 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: $-rlh,
    ),
    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: 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: map.deep-merge($default, $-custom-with-typography);

Map of all configuration values merged together. This is used to look up configuration keys.

Requires

$default (Map)

$custom (Map)

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.

$palettes@seed

scss 
$palettes: (
  "grey": (
    hue: 215,
    s-curve: (
      0.2104,
      -0.6858,
      0.8695,
    ),
    l-curve: (
      0.987,
      0.1053,
      -2.9242,
      1.8939,
    ),
    range: (
      step: 0.1,
      start: 0,
      end: 1,
    ),
  ),
  "red": (
    hue: 0,
    s-curve: (
      1.31,
      -1.35,
      0.5,
    ),
    l-curve: (
      1,
      -0.2151,
      -3.2645,
      3.5435,
      2.6872,
      -3.7511,
    ),
  ),
  "green": (
    hue: 145,
    s-curve: (
      1.11,
      -2.3,
      2,
    ),
    l-curve: (
      1.0027,
      -0.8562,
      -0.1438,
    ),
  ),
  "blue": (
    hue: 207,
    s-curve: (
      0.7863,
      0.2,
      -0.625,
    ),
    l-curve: (
      1.0014,
      -2.0957,
      3.9528,
      -2.8571,
    ),
  ),
  "pink": (
    hue: 332,
    s-curve: (
      0.99,
      -0.15,
      -0.5,
    ),
    l-curve: (
      1.004,
      -0.7445,
      0.8159,
      -1.0714,
    ),
  ),
  "purple": (
    hue: 259,
    s-curve: (
      1.3838,
      -2.4,
      1.625,
    ),
    l-curve: (
      1.0046,
      -1.3597,
      2.1454,
      -1.7857,
    ),
  ),
  "teal": (
    hue: 176,
    s-curve: (
      1.0825,
      -1.75,
      1.25,
    ),
    l-curve: (
      1.0032,
      -1.2173,
      0.5745,
      -0.3571,
    ),
  ),
  "yellow": (
    hue: 46,
    s-curve: (
      1.0288,
      -0.25,
      -0.375,
    ),
    l-curve: (
      1.0028,
      -1.3466,
      2.1323,
      -1.7857,
    ),
  ),
  "orange": (
    hue: 28,
    s-curve: (
      1.065,
      -0.45,
    ),
    l-curve: (
      1.005,
      -1.3037,
      1.8513,
      -1.5476,
    ),
  ),
  "brown": (
    hue: 15,
    s-curve: (
      -0.1688,
      1.4,
      -1.125,
    ),
    l-curve: (
      1.0017,
      -2.1894,
      2.7371,
      -1.5476,
    ),
  ),
);

Colors derived from Pollen’s color palette.

These colors are not merged into Stylament’s configuration by default. They are only here as an example for defining palettes via polynomial saturation and lightness curves. And for nostalgic reasons, I guess. However, you can use this map in your custom configuration.

Example

scss Using seed colors with custom configuration 
@use "stylament/css/axioms/config/specific/color/seed";
@use "stylament/css/axioms" with (
    $config-custom: (
      color: (
        palettes: seed.$palettes,
      ),
    )
  );
css compiled 
@charset "UTF-8";
:root {
  --s-length-0aug: 0.375rem;
  --s-length-0½: 0.75rem;
  --s-length-1dim: 1.125rem;
  --s-length-1: 1.5rem;
  --s-length-1aug: 1.875rem;
  --s-length-1½: 2.25rem;
  --s-length-2dim: 2.625rem;
  --s-length-2: 3rem;
  --s-length-2aug: 3.375rem;
  --s-length-2½: 3.75rem;
  --s-length-3dim: 4.125rem;
  --s-length-3: 4.5rem;
}

: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-page: var(--s-container-xl);
}

:root {
  --s-spacing-block-xxs: 0.1875rem;
  --s-spacing-block-xs: 0.375rem;
  --s-spacing-block-sm: 0.75rem;
  --s-spacing-block-md: 1.5rem;
  --s-spacing-block-lg: 3rem;
  --s-spacing-block-xl: 6rem;
  --s-spacing-block-xxl: 12rem;
  --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: Source Sans Pro, sans-serif;
  --s-font-family-serif: Source Serif Pro, serif;
  --s-font-family-mono: Source Code Pro, monospace;
  --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.4444444444rem;
  --s-font-size--1: 0.6666666667rem;
  --s-font-size-0: 1rem;
  --s-font-size-1: 1.5rem;
  --s-font-size-2: 2.25rem;
  --s-font-size-3: 3.375rem;
  --s-font-size-4: 5.0625rem;
  --s-font-size-5: 7.59375rem;
  --s-font-size-6: 11.390625rem;
  --s-font-size-7: 17.0859375rem;
  --s-font-size-8: 25.62890625rem;
  --s-font-size-9: 38.443359375rem;
  --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-line-root: 1.5;
  --s-line-root-abs: 1.5rem;
  --s-line--2: 0.75rem;
  --s-line--1: 1.5rem;
  --s-line-0: 1.5rem;
  --s-line-1: 2.25rem;
  --s-line-2: 3rem;
  --s-line-3: 4.5rem;
  --s-line-4: 6.75rem;
  --s-line-5: 9.75rem;
  --s-line-6: 14.25rem;
  --s-line-7: 21rem;
  --s-line-8: 31.5rem;
  --s-line-9: 46.5rem;
}

* {
  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);
}

body {
  font-family: var(--s-font-family-body);
  font-weight: var(--s-font-weight-body);
  font-size: var(--s-font-size-0);
  line-height: var(--s-line-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);
  line-height: var(--s-line-3);
}

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

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

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

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

h6 {
  font-size: var(--s-font-size--2);
  line-height: var(--s-line--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);
}

:is(code, kbd, samp),
:is(small, sub, sup),
::marker {
  line-height: 0;
}

Typography Configuration

$default (Map)

scss 
$default: (
  line: (
    min: 1.2,
    root: 1.5,
    sub: 2,
  ),
  scale: (
    base: 1rem,
    ratio: 1.5,
  ),
);

Default typography settings.

Map Properties

line.min: (Number)

Relative minimal line-height.

line.root: (Number)

Relative line-height of the document root.

line.sub: (Number)

Sub-units per line allowed by baseline grid.

scale.base: (Number<rem|em|%>)

Base font-size of the typographical scale.

scale.ratio: (Number)

Ratio for the modular type scale (i. e. the base of the exponential function).

$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.