Fix deprecation warnings in Sass build (#505)

Author: spohlenz

app/assets/bundle/trestle/admin.css

@@ -6,23 +6,22 @@
   }
 
   &.grouped {
+    background: #fafafa;
+
+    dd {
+      padding: 0.375rem 0.5rem 0.375rem;
+    }
+
     @include media-breakpoint-up(md) {
       display: grid;
       grid-template-columns: auto 1fr;
     }
 
-
     @include media-breakpoint-down(md) {
       .scope-group-empty:first-child {
         display: none;
       }
     }
-
-    background: #fafafa;
-
-    dd {
-      padding: 0.375rem 0.5rem 0.375rem;
-    }
   }
 
   &.columns {

frontend/css/components/_scopes.scss

@@ -11,9 +11,9 @@ $theme-colors: (
   @each $color, $value in $theme-colors {
     --#{$color}: #{$value};
 
-    --#{$color}-h: #{hue($value)};
-    --#{$color}-s: #{saturation($value)};
-    --#{$color}-l: #{lightness($value)};
+    --#{$color}-h: #{color.channel($value, "hue", $space: hsl)};
+    --#{$color}-s: #{color.channel($value, "saturation", $space: hsl)};
+    --#{$color}-l: #{color.channel($value, "lightness", $space: hsl)};
 
     --#{$color}-hue: var(--#{$color}-h);
     --#{$color}-saturation: var(--#{$color}-s);