tl;dr

• values are declared in $settings
• custom properties are declared in :root {} in global css base
• custom properties are used in global css, also in base
• custom properties are used in local css, in components

Shared Base

src/Shared/styles/base/*

• global css (minimal)
• global custom properties, declared in :root

// e.g: base/_layout.scss

#root {
  height: 100%;
}

:root {
  @include space-root;
}

Shared Settings

src/Shared/styles/_settings

• creates a global $settings map containing all the below global vars

src/Shared/styles/settings/*

• $color-primitives
• $color-groups
• $space-unit pure scss variable - a number
• $space-gaps - in units
• $space-containers - in units
• $space-breakpoints - in units
• $type-families
• $type-scale a %
• $type-sizes - in rems
• $type-weights
• $type-heights - in rel

src/Shared/styles/lib/_settings

• provides an API to read from $settings

• settings($name) - returns a variable, possibly a map

• space-gap($name) - number (units)

• space-breakpoint($name) - number (units)

• space-container($name) - map (width: units, gap: units)

• color-group($name) - map (fg, bg)

• color($colorOrGroup, $color: null) - color

• type-family($name) - string

• type-size($name) - rems

• type-weight($name)

• type-height($name) - rel

Shared Mixins

- xxx-root

• mixins for declaring css custom properties in :root {}

• e.g.:

  • space-root
  • scheme-root
  • type-root

• internally uses @include vars-declare($root-scheme-base);

• to produce --root-scheme-base-bg: <default-value>

• property naming convention e.g.: root-scheme-primary-bg

- xxx-base and friends

• consume the variables

• e.g.:

  • scheme-base
  • scheme-primary
  • scheme-secondary

• internally uses @include vars-use('color', $root-scheme-base, 'fg');

• to produce color: var(--root-scheme-base-fg, <default- value>)

lib

creating and declaring variable maps

• easily output var declaration with consistent defaults
• represents each variable with a map containing:
  • prop: the full name for the custom property
  • value: the fallback value

$root-scheme-base-bg: (
  name: 'root-scheme-base-bg',
  value: pink
);

@function vars-from-map($prefix, $map)

create variable maps from vars/settings

$speeds: (
  fast: 300ms,
  slow: 1200ms
);
$some-component-speeds: vars-from-map('some-component-speeds', $speeds);
// $some-component-speeds: (
//   fast: (name: ..., value: 300ms),
//   slow: (name: ..., value: 1200ms)
// )

@mixin vars-declare($vars) - declare a map them all at once

.some-component {
  @mixin vars-declare($some-component-speeds);
}

results in

.some-component {
  --some-component-speeds-fast: 300ms;
  --some-component-speeds-slow: 1200ms;
}