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

[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

[houndci-bot]

Line contains trailing whitespace

[XhmikosR]

@schwastek: please fix the lint errors.

[XhmikosR]

/CC @andresgalante

[andresgalante]

@XhmikosR I'll build this one and test it out but I can't be definitive about it because I am not great with scss functions.

[XhmikosR]

I think it totally makes sense to use abs here, but please someone else confirm too.

[andresgalante]

I've pull @schwastek branch, build it locally and tested changing the themes maps on variables. It works and compiles without errors.

As I mention before I can't say for sure, but to me the absolut method makes sense.

@schwastek great work! 👍