refactor: generate CSS variables for color variants instead of styles

mrholek · mrholek · commit 5cf8f7a6da6d · 2021-03-18T00:44:03.000+01:00
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -6,7 +6,9 @@
   position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
+  color: var(--#{$variable-prefix}alert-color);
+  @include gradient-bg(var(--#{$variable-prefix}alert-bg));
+  border: $alert-border-width solid var(--#{$variable-prefix}alert-border-color, transparent);
   @include border-radius($alert-border-radius);
 }
 
@@ -19,6 +21,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$variable-prefix}alert-link-color);
 }
 
 
@@ -44,13 +47,13 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $map in $alert-variants {
-  $background: var(--#{$variable-prefix}alert-background, map-get($map, "background"));
-  $border: var(--#{$variable-prefix}alert-border-color, map-get($map, "border"));
-  $color: var(--#{$variable-prefix}alert-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
-  $link-color: var(--#{$variable-prefix}alert-link-color, map-get($map, "link-color"));
+  $background: map-get($map, "background");
+  $border-color: map-get($map, "border-color");
+  $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);
+  $link-color: map-get($map, "link-color");
 
   .alert-#{$state} {
-    @include alert-variant($background, $border, $color, $link-color);
+    @include alert-variant($background, $border-color, $color, $link-color);
   }
 }
 // scss-docs-end alert-modifiers
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -7,44 +7,73 @@
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
   line-height: $btn-line-height;
-  color: var(--#{$variable-prefix}body-color, $body-color);
+  color: var(--#{$variable-prefix}btn-color, $body-color);
   text-align: center;
   text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
+  @include gradient-bg(var(--#{$variable-prefix}btn-bg, transparent));
+  border: $btn-border-width solid var(--#{$variable-prefix}btn-border-color, transparent);
+  @include box-shadow(var(--#{$variable-prefix}btn-box-shadow, $btn-box-shadow));
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
 
   &:hover {
-    color: var(--#{$variable-prefix}body-color, $body-color);
+    color: var(--#{$variable-prefix}btn-hover-color, $body-color);
+    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
     text-decoration: if($link-hover-decoration == underline, none, null);
+    border-color: var(--#{$variable-prefix}btn-hover-border-color, transparent);
   }
 
   .btn-check:focus + &,
   &:focus {
+    color: var(--#{$variable-prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
+    border-color: var(--#{$variable-prefix}btn-hover-border-color, transparent);
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    // box-shadow: $btn-focus-box-shadow; // TODO: check this solution
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow);
+    }
   }
 
   .btn-check:checked + &,
   .btn-check:active + &,
   &:active,
-  &.active {
+  &.active,
+  .show > &.dropdown-toggle {
+    color: var(--#{$variable-prefix}btn-active-color);
+    background-color: var(--#{$variable-prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-active-border-color, transparent);
     @include box-shadow($btn-active-box-shadow);
 
     &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); // TODO: check this solution
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow);
+      }
     }
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
+    color: var(--#{$variable-prefix}btn-disabled-color);
     pointer-events: none;
+    background-color: var(--#{$variable-prefix}btn-disabled-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-disabled-border-color, transparent);
     opacity: $btn-disabled-opacity;
     @include box-shadow(none);
   }
@@ -59,19 +88,19 @@
 @each $state, $map in $button-variants {
   .btn-#{$state} {
     @include button-variant(
-      $background: var(--#{$variable-prefix}btn-background, map-get($map, "background")),
-      $border-color: var(--#{$variable-prefix}btn-border-color, map-get($map, "border-color")),
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-background: var(--#{$variable-prefix}btn-disabled-background, map-get($map, "disabled-background")),
-      $disabled-border-color: var(--#{$variable-prefix}btn-disabled-border, map-get($map, "disabled-border-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $background: map-get($map, "background"),
+      $border-color: map-get($map, "border-color"),
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-background: map-get($map, "disabled-background"),
+      $disabled-border-color: map-get($map, "disabled-border-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }
@@ -81,15 +110,15 @@
 @each $state, $map in $button-outline-ghost-variants {
   .btn-outline-#{$state} {
     @include button-outline-variant(
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }
@@ -99,15 +128,15 @@
 @each $state, $map in $button-outline-ghost-variants {
   .btn-ghost-#{$state} {
     @include button-ghost-variant(
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -184,7 +184,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 @function alert-color-map($color) {
   @return (
     "background": shift-color($color, $alert-bg-scale),
-    "border": shift-color($color, $alert-border-scale),
+    "border-color": shift-color($color, $alert-border-scale),
     "color": shift-color($color, $alert-color-scale),
     "link-color": shade-color(shift-color($color, $alert-color-scale), 20%)
   );
@@ -239,6 +239,28 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end list-group-color-functions
 
+// scss-docs-start table-color-functions
+@function table-color-map($background) {
+  $table-bg: $background;
+  $color: color-contrast(opaque($body-bg, $background));
+  $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+  $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+  $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+
+  @return (
+    "table-bg": $background,
+    "table-color": $color,
+    "table-border-color": mix($color, $background, percentage($table-border-factor)),
+    "table-striped-bg": $striped-bg,
+    "table-striped-color": color-contrast($striped-bg),
+    "table-active-bg": $active-bg,
+    "table-active-color": color-contrast($active-bg),
+    "table-hover-bg": $hover-bg,
+    "table-hover-color": color-contrast($hover-bg)
+  );
+}
+// scss-docs-end table-color-functions
+
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
   @if $value1 == null {
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -35,6 +35,7 @@
   &:active {
     color: var(--#{$variable-prefix}list-group-action-active-color, $list-group-action-active-color);
     background-color: var(--#{$variable-prefix}list-group-action-active-bg, $list-group-action-active-bg);
+    border-color: var(--#{$variable-prefix}list-group-action-active-border-color);
   }
 }
 
@@ -152,9 +153,9 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $map in $list-group-variants {
-  $background: var(--#{$variable-prefix}list-group-background, map-get($map, "background"));
-  $background-hover: var(--#{$variable-prefix}list-group-background-hover, map-get($map, "background-hover"));
-  $color: var(--#{$variable-prefix}list-group-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
+  $background: map-get($map, "background");
+  $background-hover: map-get($map, "background-hover");
+  $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);
 
   @include list-group-item-variant($state, $background, $background-hover, $color);
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -26,8 +26,10 @@
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
+    color: var(--#{$variable-prefix}table-color);
     background-color: var(--#{$variable-prefix}table-bg);
-    border-bottom-width: $table-border-width;
+    border-bottom: $table-border-width;
+    border-bottom-color: var(--#{$variable-prefix}table-border-color);
     box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
   }
 
@@ -131,10 +133,32 @@
 // Table variants set the table cell backgrounds, border colors
 // and the colors of the striped, hovered & active tables
 
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
+// @each $color, $value in $table-variants {
+//   @include table-variant($color, $value);
+// }
+
+@each $color, $map in $table-variants {
+  // @include table-variant($color, $value);
+  .table-#{$color} {
+    @include table-variant($map);
+  }
+}
+
+@each $state, $map in $alert-variants {
+  $background: map-get($map, "background");
+  $border-color: map-get($map, "border-color");
+  $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);
+  $link-color: map-get($map, "link-color");
+
+  .alert-#{$state} {
+    @include alert-variant($background, $border-color, $color, $link-color);
+  }
 }
 
+// @each $state, $map in $list-group-variants {
+
+// }
+
 // Responsive tables
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -561,16 +561,6 @@ $text-high-emphasis-inverse:    $high-emphasis-inverse !default;
 $text-medium-emphasis-inverse:  $medium-emphasis-inverse !default;
 $text-disabled-inverse:         $disabled-inverse !default;
 
-// Text colors
-// TODO: clean-up
-// $high-emphasis-dark:    rgba(shift-color($gray-base, +26), .87) !default;
-// $medium-emphasis-dark:  rgba(shift-color($gray-base, +26), .6) !default;
-// $disabled-dark:         rgba(shift-color($gray-base, +26), .38) !default;
-
-// $high-emphasis-inverse:    rgba($white, .87) !default;
-// $medium-emphasis-inverse:  rgba($white, .6) !default;
-// $disabled-inverse:         rgba($white, .38) !default;
-
 $initialism-font-size:          $small-font-size !default;
 
 $blockquote-margin-y:           $spacer !default;
@@ -653,14 +643,14 @@ $table-bg-scale:              -80% !default;
 
 // scss-docs-start table-loop
 $table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
+  "primary":    table-color-map(shift-color($primary, $table-bg-scale)),
+  "secondary":  table-color-map(shift-color($secondary, $table-bg-scale)),
+  "success":    table-color-map(shift-color($success, $table-bg-scale)),
+  "danger":     table-color-map(shift-color($danger, $table-bg-scale)),
+  "warning":    table-color-map(shift-color($warning, $table-bg-scale)),
+  "info":       table-color-map(shift-color($info, $table-bg-scale)),
+  "light":      table-color-map(shift-color($light, $table-bg-scale)),
+  "dark":       table-color-map(shift-color($dark, $table-bg-scale))
 ) !default;
 // scss-docs-end table-loop
 
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
@@ -1,10 +1,8 @@
+// scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border-color, $color, $link-color) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border-color;
-
-  .alert-link {
-    color: $link-color;
-  }
+  --#{$variable-prefix}alert-color: #{$color};
+  --#{$variable-prefix}alert-bg: #{$background};
+  --#{$variable-prefix}alert-border-color: #{$border-color};
+  --#{$variable-prefix}alert-link-color: #{$link-color};
 }
 // scss-docs-end alert-variant-mixin
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@`
`35`	`35`	`&:active {`
`36`	`36`	`color: var(--#{$variable-prefix}list-group-action-active-color, $list-group-action-active-color);`
`37`	`37`	`background-color: var(--#{$variable-prefix}list-group-action-active-bg, $list-group-action-active-bg);`
	`38`	`+ border-color: var(--#{$variable-prefix}list-group-action-active-border-color);`
`38`	`39`	`}`
`39`	`40`	`}`
`40`	`41`
`@@ -152,9 +153,9 @@`
`152`	`153`	// Organizationally, this must come after the `:hover` states.
`153`	`154`
`154`	`155`	`@each $state, $map in $list-group-variants {`
`155`		`- $background: var(--#{$variable-prefix}list-group-background, map-get($map, "background"));`
`156`		`- $background-hover: var(--#{$variable-prefix}list-group-background-hover, map-get($map, "background-hover"));`
`157`		`- $color: var(--#{$variable-prefix}list-group-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));`
	`156`	`+ $background: map-get($map, "background");`
	`157`	`+ $background-hover: map-get($map, "background-hover");`
	`158`	`+ $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);`
`158`	`159`
`159`	`160`	`@include list-group-item-variant($state, $background, $background-hover, $color);`
`160`	`161`	`}`