StylePlayground ↬ Custom Properties and Default Values

Custom properties (CP) (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). (source)

This page intends to document the custom properties used. This is a living document.

Custom properties are located in the sass/global folder. Some of the CP rely on code contained in the sass/settings folder. What is documented here is the final output.

Typography

Fluid Type Scale (font sizes) (subject likely to change)

Instead of designing for x number of arbitrary breakpoints, we are designing a system within which elements scale proportionally and fluidly. Font sizes grow and shrink based on this scale. View fluid type scale

This scale has zero (0) as the base and grows up to size five (5) and shrinks down to negative 2 (-2) 

--fs--2: clamp(0.69rem, 0.82rem - 0.18vw, 0.78rem);
  --fs--1: clamp(0.94rem, 0.92rem + 0.07vw, 0.97rem); // heading 6
  --fs-0: clamp(1.13rem, 1.03rem + 0.49vw, 1.38rem); // base text size + heading 5
  --fs-1: clamp(1.35rem, 1.12rem + 1.16vw, 1.94rem); // heading 4
  --fs-2: clamp(1.62rem, 1.18rem + 2.2vw, 2.75rem); // heading 3
  --fs-3: clamp(1.94rem, 1.19rem + 3.79vw, 3.89rem); // heading 2
  --fs-4: clamp(2.33rem, 1.1rem + 6.17vw, 5.5rem); // heading 1
  --fs-5: clamp(2.8rem, 0.86rem + 9.7vw, 7.77rem); // extra-large text

We currently do not have any custom properties for font weight and I am not sure if we will really need them as there are limited set values available → 400 (regular) // 500 (medium) // 700 (bold) // 800 (extrabold). View fluid type scale with weights

Letter Spacing

// letter spacing
  --ls--2: #{$ls--2};
  --ls--1: #{$ls--1};
  --ls-0: #{$ls-0};
  --ls-1: #{$ls-1};
  --ls-2: #{$ls-2};
  --ls-3: #{$ls-3};

Font Faces

--ff-sans: Barlow, Barlow-fallback, sans-serif;
  --ff-serif: Georgia, serif;

Fluid Space Scale (Spacing) (subject to change†)

Using the same base values from the fluid type calculator, we have created a related fluid space system. These space values should be used wherever space values are needed such as padding, gap and margin. This may need to be adjusted if the type scale changes. View Fluid Space Scale. 

--space-4xs: clamp(0.19rem, 0.19rem + 0vw, 0.19rem);
  --space-3xs: clamp(0.31rem, 0.29rem + 0.12vw, 0.38rem);
  --space-2xs: clamp(0.56rem, 0.51rem + 0.24vw, 0.69rem);
  --space-xs: clamp(0.88rem, 0.8rem + 0.37vw, 1.06rem);
  --space-s: clamp(1.13rem, 1.03rem + 0.49vw, 1.38rem);
  --space-m: clamp(1.69rem, 1.54rem + 0.73vw, 2.06rem);
  --space-l: clamp(2.25rem, 2.05rem + 0.98vw, 2.75rem);
  --space-xl: clamp(3.38rem, 3.08rem + 1.46vw, 4.13rem);
  --space-2xl: clamp(4.5rem, 4.11rem + 1.95vw, 5.5rem);
  --space-3xl: clamp(6.75rem, 6.16rem + 2.93vw, 8.25rem);

  // Space value Pairs — Single Steps
  --space-3xs-2xs: clamp(0.31rem, 0.17rem + 0.73vw, 0.69rem);
  --space-2xs-xs: clamp(0.56rem, 0.37rem + 0.98vw, 1.06rem);
  --space-xs-s: clamp(0.88rem, 0.68rem + 0.98vw, 1.38rem);
  --space-s-m: clamp(1.13rem, 0.76rem + 1.83vw, 2.06rem);
  --space-m-l: clamp(1.69rem, 1.27rem + 2.07vw, 2.75rem);
  --space-l-xl: clamp(2.25rem, 1.52rem + 3.66vw, 4.13rem);
  --space-xl-2xl: clamp(3.38rem, 2.55rem + 4.15vw, 5.5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.04rem + 7.32vw, 8.25rem);

  // Space Value Pairs - Custom Steps
  --space-s-3xl: clamp(1.13rem, -1.66rem + 13.9vw, 8.25rem);

† The current fluid space scale was built on the current fluid type scale. This type scale will most likely change and the spacing scale will change to reflect the type scale. 

// current fluid space scale settings
  - MIN[@320px | Size: 18px | Type Scale: 1.2 (Minor Third)] → →
  + MAX[@1140px | Size: 22px | Type Scale: 1.25 (Major Third)]

Flow Space

The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element. (source)

The .flow class is simple and can be added to most containers — the code looks like the following: 

// base flow class
  .flow > *+* {
    margin-top: var(--flow-space, 1em);
  }

Default flow-space Value

// default flow-space value
  --flow-space: clamp(1.13em, 1.03em + 0.49vw, 1.38em);

Example .flow Use

//HTML
  <div class="flow">
    <div> ... </div>
    [flow space]
    <p> ... </p>
    [flow space]
    <blockquote> ... </blockqute>
  </div>

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity. For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin. 

// SCSS — changing the --flow-space CP
  blockquote {
    --flow-space: var(--space-m);
    font-size: var(--fs-0);
    font-style: italic;
    font-family: var(--ff-serif);
    margin-top: var(--space-m);
    margin-inline-start: var(--space-l);
    }
  }