_index.scss

/* ==========================================================================
    settings.defaults
    Supple default variables. Redefine and override them with your
    application-level variables.
/ =========================================================================== */

@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';
@use 'sass:string';

/* --------------------------------------------------------------------------
    Baseline
    As per:
    https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
    https://medium.freecodecamp.org/8-point-grid-typography-on-the-web-be5dc97db6bc
/ --------------------------------------------------------------------------- */

$baseline: 8px !default;

/* --------------------------------------------------------------------------
    Spacing
    Multiply our `$baseline` to new spacing variables for
    more transparency & consistency.
/ --------------------------------------------------------------------------- */

/**
 * How many lines should our spacing units span?
 * Each value should be an unitless integer.
 */
$space-factors: (
  'tiny': 1,
  // 1*8px = 8px
  'small': 2,
  // 2*8px = 16px
  'base': 3,
  // 3*8px = 24px
  'large': 6,
  // 6*8px = 48px
  'huge': 12,
  // 12*8px = 96px
) !default;

/* --------------------------------------------------------------------------
    Typography
/ --------------------------------------------------------------------------- */

$font-size: 16px !default;
$line-height: map.get($space-factors, 'base') * $baseline !default;
$line-height-ratio: math.div($line-height, $font-size);

/* --------------------------------------------------------------------------
    Grid
/ --------------------------------------------------------------------------- */

$columns: 12 !default;

/* --------------------------------------------------------------------------
    Responsive
/ --------------------------------------------------------------------------- */

/**
 * Breakpoints sass map
 */
$breakpoints: (
  palm: 320px,
  lap: 640px,
  desk: 960px,
  wall: 1280px,
) !default;

/**
 * Queries sass map
 */
$queries: (
  palm: palm,
  lap: lap,
  desk: desk,
  wall: wall,
) !default;

/* --------------------------------------------------------------------------
    Namespace
    Would you like supple classes to be used with a different namespace?
/ --------------------------------------------------------------------------- */

$responsive-modifier: string.unquote('\\@') !default;

/* --------------------------------------------------------------------------
    Technology
    Allows us to use supple alongside other technologies like css-modules etc.
/ --------------------------------------------------------------------------- */

$css-modules: false !default;

/* --------------------------------------------------------------------------
    Checks
    A couple of checks for correct formatting of variables in this file
/ --------------------------------------------------------------------------- */

/**
 * Check that the chosen font rules are pixel numbers.
 */
$should-be-pixel-values: (
  'baseline': $baseline,
  'font-size': $font-size,
  'line-height': $line-height,
);
@each $key, $value in $should-be-pixel-values {
  @if meta.type-of($value) == number {
    @if math.unit($value) != 'px' {
      @error '`#{$key}: #{$value}` needs to be a pixel unit.';
    }
  } @else {
    @error '`#{$key}: #{$value}` needs to be a number.';
  }
}

/**
 * check that breakpoints are defined in px or em
 */
@each $key, $value in $breakpoints {
  @if meta.type-of($value) == number {
    @if math.unit($value) != 'px' and math.unit($value) != 'em' {
      @error 'Breakpoint `#{$key}: #{$value}` needs to be a pixel or em unit.';
    }
  } @else {
    @error '`#{$key}: #{$value}` needs to be a number.';
  }
}

/**
 * Check that the chosen size factors are unitless, integer numbers.
 */
$should-be-unitless-integers: (
  'columns': $columns,
);
@each $key, $value in map.merge($space-factors, $should-be-unitless-integers) {
  @if meta.type-of($value) == number {
    @if math.is-unitless($value) == false {
      @error '`#{$key}: #{$value}` needs to be unitless.';
    }
    @if $value != math.ceil($value) {
      @error '`#{$key}: #{$value}` needs to be an integer.';
    }
  } @else {
    @error '`#{$key}: #{$value}` needs to be a number.';
  }
}

/**
 * Check if `$space-factors` has the mandatory `base` entry
 */
@if not map.has-key($space-factors, 'base') {
  @error '`$space-factors` needs to contain atleast one entry named 'base' since supple-css internally relies on this.';
}

/**
 * Check if $queries is in the right format
 */
@each $key, $value in $queries {
  @if meta.type-of($value) == map {
    @if map.has-key($value, min) and map.has-key($value, min-width) {
      @error 'defaults.$queries: "min" and "min-width" keys are both compiled to "min-width" queries. Use one or the other.'; // stylelint-disable-line max-line-length
    }
    @if map.has-key($value, max) and map.has-key($value, max-width) {
      @error 'defaults.$queries: "max" and "max-width" keys are both compiled to "min-width" queries. Use one or the other.'; // stylelint-disable-line max-line-length
    }
  }
}