chore: avoid light-dark util

Author: DylanPiercey

src/routes/+layout.style.scss

@@ -16,9 +16,10 @@ $colors: (
 
   --color-black: #{$black};
   --color-white: #{$white};
-
-  --color-foreground: light-dark(var(--color-black), var(--color-white));
-  --color-background: light-dark(var(--color-white), var(--color-black));
+  --color-foreground: var(--color-white);
+  --color-background: var(--color-black);
+  --color-selection-foreground: var(--color-red);
+  --color-selection-background: var(--color-red-alt);
 
   @each $name, $dark, $light in $colors {
     $tint-percent: 20%;
@@ -45,34 +46,26 @@ $colors: (
         $black,
         $weight: $shade-percent
       )};
-    --color-#{$name}: light-dark(
-      var(--color-#{$name}-dark),
-      var(--color-#{$name}-light)
-    );
-    --color-#{$name}-alt: light-dark(
-      var(--color-#{$name}-light),
-      var(--color-#{$name}-dark)
-    );
-    --color-#{$name}-dim: light-dark(
-      var(--color-#{$name}-dark-tint),
-      var(--color-#{$name}-light-shade)
-    );
-    --color-#{$name}-dim-alt: light-dark(
-      var(--color-#{$name}-light-shade),
-      var(--color-#{$name}-dark-tint)
-    );
-    --color-#{$name}-alt-dim: light-dark(
-      var(--color-#{$name}-light-tint),
-      var(--color-#{$name}-dark-shade)
-    );
-    --color-#{$name}-alt-dim-alt: light-dark(
-      var(--color-#{$name}-dark-shade),
-      var(--color-#{$name}-light-tint)
-    );
+    --color-#{$name}: var(--color-#{$name}-dark);
+    --color-#{$name}-alt: var(--color-#{$name}-light);
+    --color-#{$name}-dim: var(--color-#{$name}-dark-tint);
+    --color-#{$name}-dim-alt: var(--color-#{$name}-light-shade);
+    --color-#{$name}-alt-dim: var(--color-#{$name}-light-tint);
+    --color-#{$name}-alt-dim-alt: var(--color-#{$name}-dark-shade);
   }
 
-  --color-selection-background: var(--color-red-alt);
-  --color-selection-foreground: var(--color-red);
+  @media (prefers-color-scheme: dark) {
+    --color-foreground: var(--color-white);
+    --color-background: var(--color-black);
+    @each $name, $_ in $colors {
+      --color-#{$name}: var(--color-#{$name}-light);
+      --color-#{$name}-alt: var(--color-#{$name}-dark);
+      --color-#{$name}-dim: var(--color-#{$name}-light-shade);
+      --color-#{$name}-dim-alt: var(--color-#{$name}-dark-tint);
+      --color-#{$name}-alt-dim: var(--color-#{$name}-dark-shade);
+      --color-#{$name}-alt-dim-alt: var(--color-#{$name}-light-tint);
+    }
+  }
 }
 
 * {

src/routes/_home/tags/home-language/home-language.style.module.scss

@@ -132,6 +132,10 @@
 
   @media (prefers-color-scheme: dark) {
     border: 3px solid var(--color-red-dark);
+
+    :global(.code-block) {
+      border-bottom-color: color-mix(in srgb, var(--color-red-dark) 60%, transparent)
+    }
   }
 
   @media (min-width: 32rem) {
@@ -146,11 +150,7 @@
 
   :global(.code-block) {
     width: 100%;
-    border-bottom: 4px solid
-      light-dark(
-        var(--color-red-dark-tint),
-        color-mix(in srgb, var(--color-red-dark) 60%, transparent)
-      );
+    border-bottom: 4px solid var(--color-red-dark-tint);
     padding-bottom: 1rem;
 
     @media (min-width: 32rem) {

src/routes/docs/+layout.style.module.scss

@@ -241,8 +241,6 @@ main {
     margin-right: -1.75rem;
     width: 8rem;
     height: 8rem;
-    shape-margin: 1rem;
-    shape-outside: var(--widget-image);
     background-image: var(--widget-image);
     background-repeat: no-repeat;
   }

src/styles/section-color.scss

@@ -3,31 +3,27 @@
   --section-color-light: var(--color-#{$color}-light);
 
   @if $dark and $color != "blue" and $color != "gray" {
-    --section-color-dim: light-dark(
-      var(--color-#{$color}-dark-tint),
-      var(--color-#{$color}-dark-shade)
-    );
-    --section-color-dim-alt: light-dark(
-      var(--color-#{$color}-dark-shade),
-      var(--color-#{$color}-dark-tint)
-    );
-    --section-color-alt-dim: light-dark(
-      var(--color-#{$color}-light-tint),
-      var(--color-#{$color}-light-shade)
-    );
-    --section-color-alt-dim-alt: light-dark(
-      var(--color-#{$color}-light-shade),
-      var(--color-#{$color}-light-tint)
-    );
-
     --section-color: var(--color-#{$color}-dark);
     --section-color-alt: var(--color-#{$color}-light);
+
+    --section-color-dim: var(--color-#{$color}-dark-tint);
+    --section-color-dim-alt: var(--color-#{$color}-dark-shade);
+    --section-color-alt-dim: var(--color-#{$color}-light-tint);
+    --section-color-alt-dim-alt: var(--color-#{$color}-light-shade);
+
+    @media (prefers-color-scheme: dark) {
+    --section-color-dim:  var(--color-#{$color}-dark-shade);
+    --section-color-dim-alt:  var(--color-#{$color}-dark-tint);
+    --section-color-alt-dim:  var(--color-#{$color}-light-shade);
+    --section-color-alt-dim-alt:  var(--color-#{$color}-light-tint);
+    }
+
   } @else {
+    --section-color: var(--color-#{$color});
+    --section-color-alt: var(--color-#{$color}-alt);
     --section-color-dim: var(--color-#{$color}-dim);
     --section-color-dim-alt: var(--color-#{$color}-dim-alt);
     --section-color-alt-dim: var(--color-#{$color}-alt-dim);
     --section-color-alt-dim-alt: var(--color-#{$color}-alt-dim-alt);
-    --section-color: var(--color-#{$color});
-    --section-color-alt: var(--color-#{$color}-alt);
   }
 }