SU-SWS/decanter

View on GitHub
core/src/scss/utilities/variables/core/_modular-spacing.scss

Summary

Maintainability
Test Coverage

///
/// Modular Spacing
///
/// A unitless system for adding spacing (padding or margin) between or within elements.
///
/// Note: This modular spacing system does not follow the modular-scale system in Bourbon.
/// At each breakpoint, the final modular spacing value is calculated using $su-modular-spacing-base * $su-modular-spacing-multiplier

///
/// The base spacing values for each break point, which correspond to the step 0 value.
///
/// @name $su-modular-spacing-base
///
/// @group variable
$su-modular-spacing-base: (
  'xs': 1.6rem,
  'sm': 1.6rem,
  'md': 1.8rem,
  'lg': 1.8rem,
  'xl': 1.8rem,
  '2xl': 1.9rem
) !default;

///
/// The multiplier between each modular spacing steps. These numbers are fine-tuned manually and do not follow a modular scale ratio.
/// Step 0 correspond to a multiplier of 1. There are currently 14 integer steps from -4 to 9.
///
/// @name $su-modular-spacing-multiplier
///
/// @group variable
$su-modular-spacing-multiplier: (
  -4: 0.16666667,
  -3: 0.33333333,
  -2: 0.5,
  -1: 0.66666667,
  0: 1,
  1: 1.44444444,
  2: 2,
  3: 2.5,
  4: 3.2,
  5: 4,
  6: 5,
  7: 6,
  8: 7,
  9: 9
) !default;