refactor: generate selectors with theme's prefix

Author: mrholek

scss/_functions.scss

@@ -296,3 +296,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 
   @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
 }
+
+// Generate selectors for theme variants
+@function theme-prefix($selector) {
+  @return #{"." + $theme-prefix + "\\:" + $selector + ", " + "." + $selector + ":not([class*='#{$theme-prefix}:'])"};
+}

scss/mixins/_alert.scss

@@ -1,11 +1,13 @@
 // scss-docs-start alert-variant-mixin
-@mixin alert-variant($state, $variant) {
+@mixin alert-variant($state, $variant, $theme-prefix: false) {
   $background: map-get($variant, "bg");
   $border-color: map-get($variant, "border-color");
   $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
   $link-color: map-get($variant, "link-color");
 
-  .alert-#{$state} {
+  $selector: if($theme-prefix, theme-prefix("alert-#{$state}"), ".alert-#{$state}");
+
+  #{$selector} {
     --#{$variable-prefix}alert-color: #{$color};
     --#{$variable-prefix}alert-bg: #{$background};
     --#{$variable-prefix}alert-border-color: #{$border-color};

scss/mixins/_buttons.scss

@@ -4,7 +4,7 @@
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant($state, $variant) {
+@mixin button-variant($state, $variant, $theme-prefix: false) {
   $background: map-get($variant, "bg");
   $border-color: map-get($variant, "border-color");
   $color: map-get($variant, "color");
@@ -19,7 +19,9 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-#{$state} {
+  $selector: if($theme-prefix, theme-prefix("btn-#{$state}"), ".btn-#{$state}");
+
+  #{$selector} {
     --#{$variable-prefix}btn-bg: #{$background};
     --#{$variable-prefix}btn-border-color: #{$border-color};
     --#{$variable-prefix}btn-color: #{$color};
@@ -38,7 +40,7 @@
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($state, $variant) {
+@mixin button-outline-variant($state, $variant, $theme-prefix: false) {
   $color: map-get($variant, "color");
   $hover-background: map-get($variant, "hover-bg");
   $hover-border-color: map-get($variant, "hover-border-color");
@@ -49,7 +51,9 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-outline-#{$state} {
+  $selector: if($theme-prefix, theme-prefix("btn-outline-#{$state}"), ".btn-outline-#{$state}");
+
+  #{$selector} {
     --#{$variable-prefix}btn-border-color: #{$color};
     --#{$variable-prefix}btn-color: #{$color};
     --#{$variable-prefix}btn-hover-bg: #{$hover-background};
@@ -66,7 +70,7 @@
 
 // Button Ghost
 
-@mixin button-ghost-variant($state, $variant) {
+@mixin button-ghost-variant($state, $variant, $theme-prefix: false) {
   $color: map-get($variant, "color");
   $hover-background: map-get($variant, "hover-bg");
   $hover-border-color: map-get($variant, "hover-border-color");
@@ -77,7 +81,9 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-ghost-#{$state} {
+  $selector: if($theme-prefix, theme-prefix("btn-ghost-#{$state}"), ".btn-ghost-#{$state}");
+
+  #{$selector} {
     --#{$variable-prefix}btn-color: #{$color};
     --#{$variable-prefix}btn-hover-bg: #{$hover-background};
     --#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};

scss/mixins/_list-group.scss

@@ -1,11 +1,13 @@
 // List Groups
 // scss-docs-start list-group-mixin
-@mixin list-group-item-variant($state, $variant) {
+@mixin list-group-item-variant($state, $variant, $theme-prefix: false) {
   $background: map-get($variant, "bg");
   $background-hover: map-get($variant, "bg-hover");
   $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
 
-  .list-group-item-#{$state} {
+  $selector: if($theme-prefix, theme-prefix("list-group-item-#{$state}"), ".list-group-item-#{$state}");
+
+  #{$selector} {
     --#{$variable-prefix}list-group-color: #{$color};
     --#{$variable-prefix}list-group-bg: #{$background};
     --#{$variable-prefix}list-group-hover-bg: #{$background-hover};

scss/mixins/_utilities.scss

@@ -16,10 +16,6 @@
       $properties: append((), $properties);
     }
 
-    // Use class prefix if present
-    $property-class-prefix: if(map-has-key($utility, prefix), map-get($utility, prefix), null);
-    $property-class-prefix: if($property-class-prefix == null, "", $property-class-prefix);
-
     // Use custom class if present
     $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
     $property-class: if($property-class == null, "", $property-class);
@@ -39,6 +35,9 @@
     // Generate RTL version
     $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
 
+    // Add theme prefix
+    $theme-prefix: if(map-has-key($utility, theme-prefix), map-get($utility, theme-prefix), false);
+
     @if map-get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
@@ -58,7 +57,9 @@
       @if $is-rtl == false {
         /* rtl:begin:remove */
       }
-      .#{$property-class-prefix + $property-class + $infix + $property-class-modifier} {
+      $selector: if($theme-prefix, theme-prefix("#{$property-class + $infix + $property-class-modifier}"), ".#{$property-class + $infix + $property-class-modifier}");
+
+      #{$selector} {
         @each $property in $properties {
           @if $generate-vars == true or $generate-only-vars == true {
             @if $generate-only-vars {

scss/themes/dark.scss

@@ -23,6 +23,32 @@ $theme-prefix: "dark" !default;
 
   @include theme($theme-map);
 
+  // Button variants
+
+  @each $state, $variant in $alert-variants-dt {
+    @include alert-variant($state, $variant, true);
+  }
+
+  // Button variants
+
+  @each $state, $variant in $button-variants-dt {
+    @include button-variant($state, $variant, true);
+  }
+
+  @each $state, $variant in $button-outline-ghost-variants-dt {
+    @include button-outline-variant($state, $variant, true);
+  }
+
+  @each $state, $variant in $button-outline-ghost-variants-dt {
+    @include button-ghost-variant($state, $variant, true);
+  }
+
+  // List group variants
+
+  @each $state, $variant in $list-group-variants-dt {
+    @include list-group-item-variant($state, $variant, true);
+  }
+
   // Utilities
   @import "./../utilities/api";
 }

scss/themes/dark/_utilities.scss

@@ -4,24 +4,28 @@ $utilities: ();
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
   (
-    "background-color": (
-      property: background-color,
-      prefix: "dark\\:",
-      class: bg,
+    "color": (
+      property: color,
+      class: text,
       values: map-merge(
         $theme-colors,
         (
-          "body": $body-bg,
           "white": $white,
-          "transparent": transparent
+          "body": $body-color-dt,
+          "black-50": rgba($black, .5),
+          "white-50": rgba($white, .5),
+          "reset": inherit,
+          "high-emphasis": $high-emphasis-dt,
+          "medium-emphasis": $medium-emphasis-dt,
+          "disabled": $disabled-dt
         )
       ),
-      vars: true
+      only-vars: true,
+      theme-prefix: true,
     ),
-    "background-color-exclude": (
+    "background-color": (
       property: background-color,
       class: bg,
-      postfix: ":not([class*='dark:'])",
       values: map-merge(
         $theme-colors,
         (
@@ -30,8 +34,9 @@ $utilities: map-merge(
           "transparent": transparent
         )
       ),
-      vars: true
-    ),
+      only-vars: true,
+      theme-prefix: true,
+    )
   ),
   $utilities
 );