[css] Modernize Asides styling

Author: moonclavedev

src/styles/global.css

@@ -65,6 +65,12 @@
   --sl-color-gray-5: #353841;
   --sl-color-gray-6: #24272f;
   --sl-color-black: #0b1418;
+
+  --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 15%);
+  --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 15%);
+  --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 18%);
+  --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 15%);
+  --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 15%);
 }
 /* Light mode colors. */
 :root[data-theme="light"] {
@@ -80,6 +86,12 @@
   --sl-color-gray-6: #eceef2;
   --sl-color-gray-7: #f5f6f8;
   --sl-color-black: #ffffff;
+
+  --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 90%);
+  --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 92%);
+  --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 94%);
+  --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 94%);
+  --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 94%);
 }
 
 @theme {
@@ -410,3 +422,7 @@ header.header {
   max-width: 72rem;
   margin-inline: auto;
 }
+
+.starlight-aside {
+  border: 1px solid var(--sl-color-asides-border);
+}