refactor: update dark theme variables

Author: mrholek

scss/mixins/_utilities.scss

@@ -57,7 +57,7 @@
       }
 
       @if $is-css-var {
-        .#{$property-class + $infix + $property-class-modifier} {
+        #{if($theme-prefix, theme-prefix("#{$property-class + $infix + $property-class-modifier}"), ".#{$property-class + $infix + $property-class-modifier}")} {
           --#{$variable-prefix}#{$css-variable-name}: #{$value};
         }
 

scss/themes/dark.scss

@@ -9,17 +9,7 @@ $theme-prefix: "dark" !default;
 .#{$theme-name} {
   @import "dark/variables";
   @import "dark/utilities";
-
-  // Colors
-  @each $color, $value in $theme-colors-dt {
-    --#{$variable-prefix}#{$color}: #{$value};
-  }
-
-  // Gradients
-  @each $color, $map in $theme-gradients-dt {
-    --#{$variable-prefix}#{$color}-start: #{map-get($map, "start")};
-    --#{$variable-prefix}#{$color}-stop: #{map-get($map, "stop")};
-  }
+  @import "dark/root";
 
   @include theme($theme-map);
 

scss/themes/dark/_root.scss

@@ -0,0 +1,19 @@
+// stylelint-disable scss/selector-no-redundant-nesting-selector
+& {
+  @each $color, $value in $theme-colors-dt {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb-dt {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color-dt)};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg-dt)};
+
+  // Gradients
+  @each $color, $map in $theme-gradients-dt {
+    --#{$variable-prefix}#{$color}-start: #{map-get($map, "start")};
+    --#{$variable-prefix}#{$color}-stop: #{map-get($map, "stop")};
+  }
+}

scss/themes/dark/_utilities.scss

@@ -1,4 +1,28 @@
-// Utilities
+// Utilities maps
+
+$utilities-colors-dt: $theme-colors-rgb-dt !default;
+$utilities-text-dt: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color-dt),
+    "high-emphasis": to-rgb($high-emphasis-dt),
+    "medium-emphasis": to-rgb($medium-emphasis-dt),
+    "disabled": to-rgb($disabled-dt)
+  )
+) !default;
+$utilities-text-colors-dt: map-loop($utilities-text-dt, rgba-css-var, "$key", "text") !default;
+$utilities-bg-dt: map-merge(
+  $utilities-colors-dt,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg-dt)
+  )
+) !default;
+$utilities-bg-colors-dt: map-loop($utilities-bg-dt, rgba-css-var, "$key", "bg") !default;
+
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: ();
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -8,16 +32,9 @@ $utilities: map-merge(
       property: color,
       class: text,
       values: map-merge(
-        $theme-colors,
+        $utilities-text-colors-dt,
         (
-          "white": $white,
-          "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
+          "reset": inherit
         )
       ),
       only-vars: true,
@@ -26,17 +43,31 @@ $utilities: map-merge(
     "background-color": (
       property: background-color,
       class: bg,
+      local-vars: (
+        "bg-opacity": 1
+      ),
       values: map-merge(
-        $theme-colors,
+        $utilities-bg-colors-dt,
         (
-          "body": $body-bg,
-          "white": $white,
           "transparent": transparent
         )
       ),
-      only-vars: true,
+      vars: true,
+      theme-prefix: true
+    ),
+    "bg-opacity": (
+      css-var: true,
+      class: bg-opacity,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      ),
+      // only-vars: true,
       theme-prefix: true,
-    )
+    ),
   ),
   $utilities
 );

scss/themes/dark/_variables.scss

@@ -39,6 +39,8 @@ $theme-colors-dt: (
 ) !default;
 // fusv-enable
 
+$theme-colors-rgb-dt: map-loop($theme-colors-dt, to-rgb, "$value") !default;
+
 // Gradients
 
 // scss-docs-start theme-gradients