Generated by SassMeister.com.

input.scss

//Breakpoints
$bp-sm: 30rem;
$bp-md: 50rem;
$bp-lg: 60rem;
$bp-xl: 80rem;

$grid-breakpoints: (
  sm: $bp-sm,
  md: $bp-md,
  lg: $bp-lg,
  xl: $bp-xl
);


// Font Weights Map
$weights: (
  light: 300,
  normal: 400,
  bold: 600
);

@function weight($weight) {
  $result: map-get($weights, $weight);
  @return $result;
}

// Font Sizes Map
$sizes: (
  xxxs: 0.75rem,  // 12px
  xxs: 0.8125rem, // 13px
  xs:  0.9375rem, // 15px
  sm:  1.0625rem, // 17px
  md:  1.25rem,   // 20px
  lg:  1.625rem,  // 26px
  xl:  2rem,      // 32px
  xxl: 3rem       // 58px
);

@function size($size) {
  $result: map-get($sizes, $size);
  @return $result;
}

// Colors
// ======
$colors: (
  "abyss": #002B57,
  "ocean": #0054A3,
  "mango": #EA7100,
  "pumpkin": #AF5E12,
  "ceramic": #DCE1E5,
  "clay": #87919A,
  "slate": #575A5A,
  "jet": #000,
  "snow": #fff,
  "attention": #F32A0B
);

// Color Retriever
@function color($color) {
  // Give this function a color,
  // and it'll spit out its value
  $stringify: "" + $color;
  $r: map-get($colors, $stringify);

  @if ($r) {
    @return $r;
  } @else {
    // allow arbitrary colors to be passed to this function
    @return $color;
  }
}

// Background theme
// This gray should only be used a background color
$bg-gray: mix(color(ceramic), color(snow), 30%);

// heme Retriever
@function theme($color) {
  // Give this function a color,
  // and it'll spit out its value
  $stringify: "" + $color;
  $r: map_has_key($colors, $stringify);

  @if ($r) {
    @return var(--theme-#{$color});
  }
  @else {
    @warn 'Color "#{$color}" not found.';
    @return var(--theme-jet);
  }
}

@function get-theme() {
  @return var(--theme-color);
}

@mixin set-theme($val) {
  --theme-color: #{theme($val)};
}

// Font Presets
@mixin font1($color:#{var(--theme-color)}) {
  color: $color;
  font-size: size(xl);
  font-weight: weight(bold);
  line-height: 1.2;

  @media (min-width: $bp-md) {
    font-size: size(xxl);
    line-height: 1.1;
  }
}

@mixin font2($color:#{var(--theme-color)}) {
  color: $color;
  font-size: size(lg);
  font-weight: weight(bold);
  line-height: 1.2;

  @media (min-width: $bp-md) {
    font-size: size(xl);
  }
}

@mixin font3($color:#{var(--theme-color)}) {
  color: $color;
  font-size: size(lg);
  font-weight: weight(normal);
  line-height: 1.2;

  @media (min-width: $bp-md) {
    font-size: size(xl);
  }
}

:root {
  @each $key, $val in $colors {
    --theme-#{$key}: #{$val};
  }

  --theme-color: var(--theme-jet);
}

.example-1 {
  @include set-theme(mango);
  @include font1;
}

.example-2 {
  @include font2(color(mango));
}

output.css

:root {
  --theme-abyss: #002B57;
  --theme-ocean: #0054A3;
  --theme-mango: #EA7100;
  --theme-pumpkin: #AF5E12;
  --theme-ceramic: #DCE1E5;
  --theme-clay: #87919A;
  --theme-slate: #575A5A;
  --theme-jet: #000;
  --theme-snow: #fff;
  --theme-attention: #F32A0B;
  --theme-color: var(--theme-jet);
}

.example-1 {
  --theme-color: var(--theme-mango);
  color: var(--theme-color);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 50rem) {
  .example-1 {
    font-size: 3rem;
    line-height: 1.1;
  }
}

.example-2 {
  color: #EA7100;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (min-width: 50rem) {
  .example-2 {
    font-size: 2rem;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}