_variables.scss

@use 'sass:map';
@use 'functions' as *;

// Colors

$white:  white !default;
$black:  #2d353c !default;
$gray:   #969696 !default;
$brown:  #a57868 !default;
$red:    #ff291d !default;
$orange: #ff9500 !default;
$yellow: #ffe70e !default;
$green:  #4cd964 !default;
$teal:   #18e0cd !default;
$blue:   #007aff !default;
$indigo: #5f6ec7 !default;
$purple: #af2ec5 !default;
$pink:   #ff3069 !default;

$colors: (
  'gray':   $gray,
  'brown':  $brown,
  'red':    $red,
  'orange': $orange,
  'yellow': $yellow,
  'green':  $green,
  'teal':   $teal,
  'blue':   $blue,
  'indigo': $indigo,
  'purple': $purple,
  'pink':   $pink
) !default;

// Utility Map

$utilities: () !default;

// Spacing

$spacer: 1rem !default;
$spacers: (
  0: 0,
  4: $spacer * .25,
  8: $spacer * .5,
  12: $spacer * .75,
  16: $spacer,
  24: $spacer * 1.5,
  32: $spacer * 2,
  48: $spacer * 3
) !default;
$spacers-extend: () !default;
$spacers: map.merge($spacers, $spacers-extend);
$negative-spacers: negativify-map($spacers) !default;

// Border

$border-color: rgba(0, 0, 0, .12) !default;
$borders: (
  0: 0,
  1: 1px solid $border-color,
  2: 2px solid $border-color,
  4: 4px solid $border-color,
  8: 8px solid $border-color
) !default;
$borders-extend: () !default;
$borders: map.merge($borders, $borders-extend);

// Border radius

$radius-base: 1rem * .25 !default;
$radius: (
  0: 0,
  4: $radius-base,
  8: $radius-base * 2,
  12: $radius-base * 3,
  16: $radius-base * 4,
  full: 50rem
) !default;
$radius-extend: () !default;
$radius: map.merge($radius, $radius-extend);

// Shadow

$shadows: (
  none: none,
  1: (0 2px 4px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .06)),
  2: (0 4px 8px -1px rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .06)),
  3: (0 8px 16px -2px rgba(0, 0, 0, .12), 0 4px 8px -2px rgba(0, 0, 0, .06)),
  4: (0 16px 32px -4px rgba(0, 0, 0, .12), 0 8px 16px -4px rgba(0, 0, 0, .06)),
  5: (0 24px 48px -8px rgba(0, 0, 0, .12), 0 16px 32px -8px rgba(0, 0, 0, .06))
) !default;
$shadows-extend: () !default;
$shadows: map.merge($shadows, $shadows-extend);

// Text

$font-wieghts: (
  100: 100,
  200: 200,
  300: 300,
  400: 400,
  500: 500,
  600: 600,
  700: 700,
  800: 800,
  900: 900
) !default;

$font-sizes: (
  0: 0,
  10: .625rem,
  12: .75rem,
  14: .875rem,
  16: 1rem,
  18: 1.125rem,
  20: 1.25rem,
  24: 1.5rem,
  32: 2rem,
) !default;

// Sizing

$sizes: (
  0: 0,
  20: 20%,
  25: 25%,
  40: 40%,
  50: 50%,
  60: 60%,
  75: 75%,
  80: 80%,
  full: 100%,
  auto: auto
) !default;