Improve theme-color-level() using abs()

Created by: schwastek

Concerns function theme-color-level() in _functions.scss file.

Use internal Sass function abs() to get the absolute value of $level argument.

That way, if/else statement can be completely eliminated.

Screenshot

Both - old and new functions - return the same values.

Test

Check out this pull request locally or reproduce it from scratch:

1. Run:

git clone https://github.com/twbs/bootstrap.git
cd bootstrap
# remove all files but `scss` and `.git` folders
find -not \( \( -path ./.git -o -path ./scss \) -prune \) -exec rm -rf {} +
touch ./scss/_debug.scss
printf "@import 'functions';\n@import 'variables';\n@import 'debug';" > ./scss/bootstrap.scss
npm init --yes
npm install nodemon node-sass --save-dev

2. Overwrite scripts section in package.json with:

"scripts": {
    "css-compile": "node-sass ./scss/bootstrap.scss ./dist/css",
    "watch-css": "nodemon --ext scss --watch ./scss --exec \"npm run css-compile\""
  }

3. Add at the end of _functions.scss:

// _functions.scss
(...)
@function new-theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);
  
  @return mix($color-base, $color, $level * $theme-color-interval);
}

4. Paste into _debug.scss:

@debug theme-color-level("primary", -1);
@debug theme-color-level("primary", 0);
@debug theme-color-level("primary", 1);

@debug new-theme-color-level("primary", -1);
@debug new-theme-color-level("primary", 0);
@debug new-theme-color-level("primary", 1);

5. Run:

npm run css-compile