@qrsln/lootstrap 22.2.2-beta.0 → 22.3.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrsln/lootstrap",
-  "version": "22.2.2-beta.0",
+  "version": "22.3.1-beta.0",
   "description": "LootStrap is a scss library and is still in beta! There is much to improve!",
   "style": "dist/css/lootstrap.css",
   "sass": "scss/lootstrap.scss",
@@ -29,6 +29,7 @@
   "homepage": "https://github.com/krsln/LootStrap#readme",
   "scripts": {
     "css": "npm-run-all cleaning header css-compile css-clean-main:SassDoesnt css-prefix-main css-minify-main",
+    "css-TEST": "npm-run-all css-compile-TEST css-clean-main-TEST:SassDoesnt",
     "cleaning": "rimraf dist/css",
     "testHeader": "node build/Lootstrap.sh",
     "header": "node build/Lootstrap.js",
@@ -37,6 +38,9 @@
     "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --output dist/css/lootstrap.min.css dist/css/lootstrap.css",
     "sass:Watch": "sass  --watch scss/:dist/css/",
+    "css-compile-TEST": "sass --style expanded --source-map --embed-sources --no-error-css Tests:dist/Tests",
+    "css-clean-main-TEST:SassDoesnt": "cleancss -O1 --format beautify --output dist/Tests/lootstrap-test.css dist/Tests/lootstrap-test.css",
+
     "/************        /        ************/": " --- End --- ",
     "p:live": "npm run css && npm publish --access public",
     "p:beta": "npm run css && npm publish --tag beta --access public"

package/scss/Abstracts/Functions/_color-customized.scss

@@ -0,0 +1,62 @@
+// ===========================================================================
+// Functions - Color
+// ===========================================================================
+
+// Set Text Color Entirely based on bg color
+//@function TextColor-ByBackground($color) {
+//  @if (lightness($color) > 80) {
+//    @return black; // Lighter background, return dark color
+//  } @else {
+//    @return white; // Darker background, return light color
+//  }
+//}
+
+@function Color-ByLightness($colorValue, $targetPer: 96%) {
+  $diff: $targetPer - lightness($colorValue);
+  $color-result: $colorValue;
+
+  @if ($diff>0) {
+    $color-result: lighten($colorValue, $diff);
+  } @else {
+    $diff-body: -1 * $diff;
+    $color-result: darken($colorValue, $diff-body);
+  }
+
+  @return $color-result;
+}
+
+/// For bg, text and border color
+/// HSL Colors: hsl(hue, saturation, lightness)
+@function Color-hsla($colors, $alpha:--ls-bg-alpha, $lightness:--ls-bg-lightness) {
+  $colors-hsla: ();
+  @each $colorKey, $colorValue in $colors {
+    $color: $colorValue;
+
+    // Not: Dont f*ck with border color..
+    //@if (str-index($alpha, '--#{$var-Prefix}border')) {
+    //  $color: Color-ByLightness($colorValue, 70%); // 80
+    //  @if ($colorKey=='dark') {
+    //    $color: Color-ByLightness($colorValue, 45%);
+    //  } @else if ($colorKey=='night') {
+    //    $color: Color-ByLightness($colorValue, 35%);
+    //  } @else if ($colorKey=='light' or $colorKey=='white') {
+    //    $color: Color-ByLightness($colorValue, 90%);
+    //  }
+    //}
+
+    $color-h: #{round(hue($color))};
+    $color-s: #{round(saturation($color))};
+    $color-l: #{round(lightness($color))};
+
+    $alpha-bg: #{var($alpha, 1)};
+    $lightness-bg: #{var($lightness, $color-l)};
+
+    @if (str-index($alpha, '--#{$var-Prefix}border')) {
+      $lightness-bg: $color-l;
+    }
+
+    $hsla-color: hsla($color-h, $color-s, $lightness-bg, $alpha-bg);
+    $colors-hsla: map-merge($colors-hsla, ($colorKey: $hsla-color));
+  }
+  @return $colors-hsla;
+}

package/scss/Abstracts/Functions/_color.scss

@@ -1,90 +1,133 @@
+@use 'sass:math';
+
 // ===========================================================================
 // Functions - Color
 // ===========================================================================
 
-/// Slightly lighten a color
-/// @access public
-/// @param {Color} $color - color to tint
-/// @param {Number} $percentage - percentage of `$color` in returned color
-/// @return {Color}
-@function Tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
+$White: hsl(0, 0%, 100%) !default;
+$Black: hsl(0, 0%, 0%) !default;
+
+/// Add percentage of white to a color
+/// Tint: is the mixture of a color with white, which increases lightness
+/// Usage  => Tint($Dark, 42%) Tint(red, 42%) Tint(#BADA55, 42%)
+@function Tint($color, $percent) {
+  @return mix(white, $color, $percent);
 }
 
-/// Slightly darken a color
-/// @access public
-/// @param {Color} $color - color to shade
-/// @param {Number} $percentage - percentage of `$color` in returned color
-/// @return {Color}
-@function Shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
+/// Add percentage of black to a color
+/// Shade: is the mixture of a color with black, which reduces lightness
+/// Usage  => Shade($Light, 42%) Shade(red, 42%) Shade(#663399, 42%)
+@function Shade($color, $percent) {
+  @return mix(black, $color, $percent);
 }
 
-// Set Text Color Entirely based on bg color
-@function TextColor-ByBackground($color) {
-  @if (lightness($color) > 80) {
-    @return black; // Lighter background, return dark color
-  } @else {
-    @return white; // Darker background, return light color
-  }
+/// Usage  => --warning-rgb: #{hexToRGB($Warning)};
+/// res    => --warning-rgb: 230, 172, 0;
+///   background-color: #{rgba(var(--warning-rgb), .5)};
+@function colorToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
 }
 
-@function Color-ByLightness($colorValue, $targetPer: 96%) {
-  $diff: $targetPer - lightness($colorValue);
-  $color-result: $colorValue;
+/// Usage  => --warning-hls: #{colorToHSL($Warning)};
+/// res    => --warning-hls: 45deg, 100%, 45%;
+///   background-color: #{hsla(var(--warning-hls), .5)};
+@function colorToHSL($color) {
+  @return round(hue($color)), round(saturation($color)), round(lightness($color));
+}
 
-  @if ($diff>0) {
-    $color-result: lighten($colorValue, $diff);
-  } @else {
-    $diff-body: -1 * $diff;
-    $color-result: darken($colorValue, $diff-body);
+/*#region Color functions */
+
+/// Color Relative Luminance Calculator
+/// Relative luminance follows the photometric definition of luminance, but with the values normalized to 1 or 100 for a reference white.
+///
+/// Usage  => Luminance($Dark)
+/// Tested => https://contrastchecker.online/color-relative-luminance-calculator
+/// Adapted from: https://gist.github.com/voxpelli/6304812
+@function Luminance($color) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  $rgba: red($color), green($color), blue($color);
+  $rgba2: ();
+
+  @for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: math.div($rgb, 255);
+
+    //$rgb: if($rgb < .03928, $rgb / 12.92, ch-pow(($rgb + .055) / 1.055, 2.4, 16));
+    $rgb: if($rgb < .03928, math.div($rgb, 12.92), math.pow(math.div($rgb + 0.055, 1.055), 2.4));
+
+    $rgba2: append($rgba2, $rgb);
   }
 
-  @return $color-result;
+  @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
 }
 
-/// For bg, text and border color
-/// HSL Colors: hsl(hue, saturation, lightness)
-@function Color-hsla($colors, $alpha:--ls-bg-alpha, $lightness:--ls-bg-lightness) {
-  $colors-hsla: ();
-  @each $colorKey, $colorValue in $colors {
-    $color: $colorValue;
-
-    @if (str-index($alpha, '--#{$var-Prefix}border')) {
-      $color: Color-ByLightness($colorValue, 70%); // 80
-      @if ($colorKey=='dark') {
-        $color: Color-ByLightness($colorValue, 45%);
-      } @else if ($colorKey=='night') {
-        $color: Color-ByLightness($colorValue, 35%);
-      } @else if ($colorKey=='light' or $colorKey=='white') {
-        $color: Color-ByLightness($colorValue, 90%);
-      }
-    }
+/// Calculate contrast ratio of foreground and background colors and check for Web Content Accessibility Guidelines (WCAG) https://www.w3.org/WAI/standards-guidelines/wcag/.
+///
+// Usage  => ContrastRatio($Dark, $Light)
+/// Tested => https://contrastchecker.online/
+/// Tested => https://coolors.co/contrast-checker/2b2b31-fafafa
+@function ContrastRatio($color1, $color2) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  $luminance1: Luminance($color1) + .05;
+  $luminance2: Luminance($color2) + .05;
+  $ratio: math.div($luminance1, $luminance2);
 
-    $color-h: #{round(hue($color))};
-    $color-s: #{round(saturation($color))};
-    $color-l: #{round(lightness($color))};
+  @if $luminance2 > $luminance1 {
+    $ratio: math.div(1, $ratio);
+  }
 
-    $alpha-bg: #{var($alpha, 1)};
-    $lightness-bg: #{var($lightness, $color-l)};
+  $ratio: math.div(round($ratio * 1000), 1000);
 
-    @if (str-index($alpha, '--#{$var-Prefix}border')) {
-      $lightness-bg: $color-l;
+  @return $ratio;
+}
+
+/// Get best Text Color From array, based on bg color
+/// Usage  => Best-fg-color($Dark)
+@function Best-fg-color($base, $colors: ($Black, $White), $tolerance: 0) {
+  $best: nth($colors, 1);
+  $contrast: ContrastRatio($base, $best);
+
+  @for $i from 2 through length($colors) {
+    $currentColor: nth($colors, $i);
+    $currentContrast: ContrastRatio($base, $currentColor);
+    @if ($currentContrast - $contrast > $tolerance) {
+      $best: $currentColor;
+      $contrast: $currentContrast;
     }
+  }
 
-    $hsla-color: hsla($color-h, $color-s, $lightness-bg, $alpha-bg);
-    $colors-hsla: map-merge($colors-hsla, ($colorKey: $hsla-color));
+  @if ($contrast < 3) {
+    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
   }
-  @return $colors-hsla;
+
+  @return $best;
 }
 
-// color to 134deg,61%,70%
-@function Color-ToHSL($color) {
-  $color-h: #{round(hue($color))};
-  $color-s: #{round(saturation($color))};
-  $color-l: #{round(lightness($color))};
+/*#endregion */
+
+/*#region Color functions :: depressed */
+
+/// Dynamic text color
+@function Text-clr($color) {
+  @if (lightness( $color ) > 50) {
+    @return $Black; //#000; // Lighter background, return dark color
+  } @else {
+    @return $White; //#fff; // Darker background, return light color
+  }
+}
 
-  $color-result: $color-h, $color-s, $color-l;
+/// Set Text Color Entirely based on bg color (Black or White)
+/// Usage  => @include Text-color($Warning);
+@function Text-color($n) {
+  $color-brightness: round((red($n)*299)+(green($n)*587)+ math.div(blue($n) * 114, 1000));
+  $light-color: round((red(#ffffff)*299)+(green(#ffffff)*587)+ math.div(blue(#ffffff) * 114, 1000));
+  @if abs($color-brightness) < math.div($light-color, 2) {
+    @return $White;
+  } @else {
+    @return $Black;
+  }
+}
 
-  @return $color-result;
-}
+/*#endregion */

package/scss/Abstracts/Functions/_helpers.scss

@@ -3,9 +3,9 @@
 // ===========================================================================
 @use 'sass:math';
 
-/// Remove the unit of a length
+/// Remove the unit of a value
 /// @param {Number} $number - Number to remove unit from
-/// @return {Number} - Unit-less number
+/// @return {Number} - Unit-less value
 @function strip-unit($number) {
   @if type-of($number) == 'number' and not unitless($number) {
     //@return $number / ($number * 0 + 1);

package/scss/Abstracts/Functions/_shadow.scss

@@ -57,8 +57,8 @@
             both#{$suffix} : $result-both,
             br#{$suffix} : $result-br,
             t#{$suffix} : $result-t,
-            r#{$suffix} : $result-r,
-            l#{$suffix} : $result-l,
+            e#{$suffix} : $result-r,
+            s#{$suffix} : $result-l,
             b#{$suffix} : $result-b,
             x#{$suffix} : $result-x,
             y#{$suffix} : $result-y,
@@ -102,12 +102,12 @@
 /// Based on $Shadow: 0px 1px 1px -1px rgba($Black, 0.18), 0px 2px 2px 0px rgba($Black, 0.12), 0px 4px 6px 0px rgba($Black, 0.06);
 @function Colored-shadow($color: black) {
   // using best result of shadow set
-  @return 0 1px 1px -1px rgba($color, 0.18), 0px 2px 2px 0px rgba($color, 0.12), 0px 4px 6px 0px rgba($color, 0.06);
+  @return 0 1px 1px -1px hsla($color, 0.27), 0px 2px 2px 0px hsla($color, 0.18), 0px 4px 6px 0px hsla($color, 0.09);
 }
 
 @function Colored-shadow-inner($color: black) {
   // using best result of shadow set
-  @return 0 0 1px 0 rgba($color, 0.18) inset, 0 0 2px 0 rgba($color, 0.12) inset, 0 0 6px 0 rgba($color, 0.06) inset;
+  @return 0 0 1px 0 hsla($color, 0.27) inset, 0 0 2px 0 hsla($color, 0.18) inset, 0 0 6px 0 hsla($color, 0.09) inset;
 }
 
 // box-shadow: Shadow-mixer($Shadow, $Shadow-inner);

package/scss/Abstracts/Mixins/_color.scss

@@ -1,141 +1,131 @@
 // ===========================================================================
 // Mixins - Color
 // ===========================================================================
-// CSS Variables (Custom Properties)
-
-@mixin Bg-Text-Border-variables($colors) {
-  @each $colorKey, $colorValue in $colors {
-    .Bg-#{$colorKey} {
-      --#{$var-Prefix}bg-lightness: #{lightness($colorValue)};
-      --#{$var-Prefix}bg-alpha: 1;
-      //color: #{TextColor-ByBackground($colorValue)}; // DON'T
-    }
-    .Text-#{$colorKey} {
-      --#{$var-Prefix}text-lightness: #{lightness($colorValue)};
-      --#{$var-Prefix}text-alpha: 1;
-    }
-    .Border-#{$colorKey} {
-      --#{$var-Prefix}border-alpha: 1;
-    }
-  }
-}
-
-@mixin Theme-components($theme-colors, $theme-components) {
-  @each $colorKey, $colorValue in $theme-colors {
-    $fg-muted: hsla(213, 11%, 69%, 1);
-
-    /*
-    // Colors: primary, secondary, success, info, warning, danger
-    */
-    $color-body: Color-ByLightness($colorValue, 96%); // 96% - DON'T CHANGE
-    $color-border: Color-ByLightness($colorValue, 70%); // 80
-    $color-shadow-rgb: 0, 0, 0 ; // Has to be this way.. check shadows
-
-    $color-active: lighten($colorValue, 10%);
-    $color-surface: Color-ByLightness($colorValue, 90%); // 90% - DON'T CHANGE
-
-    $color-lightest: Color-ByLightness($colorValue, 95%); // 95% - DON'T CHANGE
-    $color-light: Color-ByLightness($colorValue, 85);
-    $color-dark: lighten($colorValue, 20%);
-    $color-darkest: $colorValue;
-
-    /*
-    // Colors: dark, night, light
-    */
-    @if ($colorKey=='dark') {
-      $color-body: Color-ByLightness($colorValue, 10%);
-      $color-border: Color-ByLightness($colorValue, 45%);
-      $color-shadow-rgb: 255, 255, 255 ;
-
-      $color-active: Color-ByLightness($Purple, 60%); // #bb86fc;
-      $color-surface: Color-ByLightness($colorValue, 30%);
-
-      $color-lightest: Color-ByLightness($colorValue, 40%);
-      $color-light: Color-ByLightness($colorValue, 50%);
-      $color-dark: Color-ByLightness($colorValue, 25%);
-      $color-darkest: Color-ByLightness($colorValue, 15%);
-    }
-    @if ($colorKey=='night') {
-      $color-body: Color-ByLightness($colorValue, 5%);
-      $color-border: Color-ByLightness($colorValue, 35%);
-      $color-shadow-rgb: 255, 255, 255 ;
-
-      $color-active: Color-ByLightness($Purple, 60%); // #bb86fc;
-      $color-surface: Color-ByLightness($colorValue, 20%);
-
-      $color-lightest: Color-ByLightness($colorValue, 30%);
-      $color-light: Color-ByLightness($colorValue, 40%);
-      $color-dark: Color-ByLightness($colorValue, 15%);
-      $color-darkest: Color-ByLightness($colorValue, 10%);
-    }
-    @if ($colorKey=='light' or $colorKey=='white') {
-      $color-body: Color-ByLightness($colorValue, 85%);
-      $color-border: Color-ByLightness($colorValue, 90%);
-
-      $color-active: Color-ByLightness($Blue, 60%); // #bb86fc;
-      $color-surface: Color-ByLightness($colorValue, 100%);
 
-      $color-lightest: Color-ByLightness($colorValue, 98%);
-      $color-light: Color-ByLightness($colorValue, 97%);
-      $color-dark: Color-ByLightness($colorValue, 95%);
-      $color-darkest: Color-ByLightness($colorValue, 90%);
-    }
-
-    /*
-    // Colors: primary, secondary, success, info, warning, danger, dark, night, light
-    */
-    @each $comKey, $comValue in $theme-components {
-      $class-suffix: if($colorKey, if($comKey == ""  , "", "-") + $colorKey, "");
-      $component-infix: if($comValue == null, "", "#{$comValue}-");
-
-      // .Theme-primary {
-      .#{$comKey + $class-suffix} {
-        &:not(.#{$comKey}-outline) .Btn-close {
-          @if (lightness($colorValue) < 80) {
-            filter: invert(1) grayscale(100%) brightness(200%);
-          }
-        }
-
-        /*
-        // Background colors
-        */
-        --#{$var-Prefix}#{$component-infix}bg: #{$colorValue};
-        --#{$var-Prefix}#{$component-infix}bg-hsl: #{Color-ToHSL($colorValue)};
-
-        --#{$var-Prefix}#{$component-infix}bg-body: #{$color-body};
-        --#{$var-Prefix}#{$component-infix}bg-active: #{$color-active};
-        --#{$var-Prefix}#{$component-infix}bg-active-hsl: #{Color-ToHSL($color-active)};
-
-        --#{$var-Prefix}#{$component-infix}bg-surface: #{$color-surface};
-        --#{$var-Prefix}#{$component-infix}bg-lightest: #{$color-lightest};
-        --#{$var-Prefix}#{$component-infix}bg-light: #{$color-light};
-        --#{$var-Prefix}#{$component-infix}bg-dark: #{$color-dark};
-        --#{$var-Prefix}#{$component-infix}bg-darkest: #{$color-darkest};
-
-        /*
-        // Foreground colors
-        */
-        --#{$var-Prefix}#{$component-infix}fg-muted: #{$fg-muted};
-
-        --#{$var-Prefix}#{$component-infix}fg-body: #{TextColor-ByBackground($color-body)};
-        --#{$var-Prefix}#{$component-infix}fg-active: #{TextColor-ByBackground($color-active)};
-
-        --#{$var-Prefix}#{$component-infix}fg-surface: #{TextColor-ByBackground($color-surface)};
-        --#{$var-Prefix}#{$component-infix}fg-lightest: #{TextColor-ByBackground($color-lightest)};
-        --#{$var-Prefix}#{$component-infix}fg-light: #{TextColor-ByBackground($color-light)};
-        --#{$var-Prefix}#{$component-infix}fg-dark: #{TextColor-ByBackground($color-dark)};
-        --#{$var-Prefix}#{$component-infix}fg-darkest: #{TextColor-ByBackground($color-darkest)};
-
-        /* Shadows */
-        --#{$var-Prefix}#{$component-infix}shadow-color-rgb: #{$color-shadow-rgb};
-
-        /* Border */
-        $color-border-hsla: Color-ToHSL($color-border);
+// CSS Variables (Custom Properties)
 
-        --#{$var-Prefix}border-alpha: 1;
-        --#{$var-Prefix}#{$component-infix}border-color: #{hsla($color-border-hsla, var(--#{$var-Prefix}border-alpha, 1))};
-        --#{$var-Prefix}#{$component-infix}border-color-hsl: #{$color-border-hsla};
-      }
-    }
-  }
-}
+//@mixin Theme-components($theme-colors, $theme-components) {
+//  $var-ls: $var-Prefix; // ls-
+//
+//  $light-Primary: hsl(265, 100%, 47%); // #6400F0
+//  $light-Primary-variant: hsl(258, 100%, 35%); // #3600B3
+//  $light-Secondary: hsl(174, 96%, 44%); // #04DCC6
+//  $light-Secondary-variant: hsl(180, 100%, 26%); // #008585
+//
+//  $dark-Primary: hsl(267, 95%, 76%); // #BC88FC
+//  $dark-Primary-variant: hsl(258, 100%, 35%); // #3600B3
+//  $dark-Secondary: hsl(174, 96%, 44%); // #04DCC6 Secondary
+//
+//  $fg-muted: hsla(213, 11%, 69%, 1);
+//
+//  @each $colorKey, $colorValue in $theme-colors {
+//    $color-lightness: lightness($colorValue);
+//    /*
+//    // Colors: primary, secondary, success, info, warning, danger
+//    */
+//    $color-body: Color-ByLightness($colorValue, 90%); // 90% - DON'T CHANGE
+//    $color-border: Color-ByLightness($colorValue, 85%); // 80
+//    $color-shadow-rgb: 0, 0, 0 ; // Has to be this way.. check shadows
+//
+//    $color-primary: $colorValue; // lighten($colorValue, 10%);
+//    $color-surface: Color-ByLightness($colorValue, 96%); // 96% - DON'T CHANGE
+//
+//    $color-lightest: Color-ByLightness($colorValue, 94%); // 95% - DON'T CHANGE
+//    $color-light: Color-ByLightness($colorValue, ($color-lightness + 36));
+//    $color-dark: Color-ByLightness($colorValue, ($color-lightness + 18));
+//    $color-darkest: $colorValue;
+//
+//    /*
+//    // Colors: dark, night, light
+//    */
+//    @if ($colorKey=='dark' or $colorKey=='night') {
+//      /*
+//      Rules:
+//      - Body is darkest
+//      - Surface is second darkest
+//      - lightness: $Night 7%, $Dark 18%
+//      */
+//      $color-body: Color-ByLightness($colorValue, ($color-lightness - 6));
+//      $color-border: Color-ByLightness($colorValue, ($color-lightness + 10));
+//      $color-shadow-rgb: 255, 255, 255;
+//
+//      $color-primary: $dark-Primary;
+//      $color-surface: $colorValue;
+//
+//      $color-lightest: Color-ByLightness($colorValue, ($color-lightness + 16));
+//      $color-light: Color-ByLightness($colorValue, ($color-lightness + 12));
+//      $color-dark: Color-ByLightness($colorValue, ($color-lightness + 8));
+//      $color-darkest: Color-ByLightness($colorValue, ($color-lightness + 4));
+//    }
+//    @if ($colorKey=='light') {
+//      /*
+//       Rules:
+//       - Reversed
+//       - lightness: 98% #fafafa rgb(250, 250, 250)
+//      */
+//      $color-body: Color-ByLightness($colorValue, ($color-lightness - 5));
+//      $color-border: Color-ByLightness($colorValue, ($color-lightness - 10));
+//
+//      $color-primary: $light-Primary; // #6400f0;
+//      $color-surface: Color-ByLightness($colorValue, ($color-lightness + 2)); // #fff
+//
+//      $color-lightest: $colorValue;
+//      $color-light: Color-ByLightness($colorValue, ($color-lightness - 2));
+//      $color-dark: Color-ByLightness($colorValue, ($color-lightness - 4));
+//      $color-darkest: Color-ByLightness($colorValue, ($color-lightness - 8));
+//    }
+//
+//    /*
+//    // Colors: primary, secondary, success, info, warning, danger, dark, night, light
+//    */
+//    @each $comKey, $comValue in $theme-components {
+//      $class-suffix: if($colorKey, if($comKey == ""  , "", "-") + $colorKey, "");
+//      $component-infix: if($comValue == null, "", "#{$comValue}-");
+//
+//      // .Theme-primary {
+//      .#{$comKey + $class-suffix} {
+//        &:not(.#{$comKey}-outline) .Btn-close {
+//          @if (lightness($colorValue) < 80) {
+//            filter: invert(1) grayscale(100%) brightness(200%);
+//          }
+//        }
+//
+//        /*
+//        // Background colors
+//        */
+//        --#{$var-ls}#{$component-infix}bg: #{$colorValue};
+//        --#{$var-ls}#{$component-infix}bg-hsl: #{colorToHSL($colorValue)};
+//
+//        --#{$var-ls}#{$component-infix}bg-body: #{$color-body};
+//        --#{$var-ls}#{$component-infix}bg-active: #{$color-primary};
+//        --#{$var-ls}#{$component-infix}bg-active-hsl: #{colorToHSL($color-primary)};
+//
+//        --#{$var-ls}#{$component-infix}bg-surface: #{$color-surface};
+//        --#{$var-ls}#{$component-infix}bg-lightest: #{$color-lightest};
+//        --#{$var-ls}#{$component-infix}bg-light: #{$color-light};
+//        --#{$var-ls}#{$component-infix}bg-dark: #{$color-dark};
+//        --#{$var-ls}#{$component-infix}bg-darkest: #{$color-darkest};
+//
+//        /*
+//        // Foreground colors
+//        */
+//        --#{$var-ls}#{$component-infix}fg-muted: #{$fg-muted};
+//
+//        --#{$var-ls}#{$component-infix}fg-body: #{Best-fg-color($color-body)};
+//        --#{$var-ls}#{$component-infix}fg-active: #{Best-fg-color($color-primary)};
+//
+//        --#{$var-ls}#{$component-infix}fg-surface: #{Best-fg-color($color-surface)};
+//        --#{$var-ls}#{$component-infix}fg-lightest: #{Best-fg-color($color-lightest)};
+//        --#{$var-ls}#{$component-infix}fg-light: #{Best-fg-color($color-light)};
+//        --#{$var-ls}#{$component-infix}fg-dark: #{Best-fg-color($color-dark)};
+//        --#{$var-ls}#{$component-infix}fg-darkest: #{Best-fg-color($color-darkest)};
+//
+//        /* Shadows */
+//        --#{$var-ls}#{$component-infix}shadow-color-rgb: #{$color-shadow-rgb};
+//
+//        /* Border */
+//        --#{$var-ls}#{$component-infix}border-color-hsl: #{colorToHSL($color-border)};
+//      }
+//    }
+//  }
+//}