Lighten the site accent colors

src/_11ty/syntax/dash-dark.ts

@@ -39,7 +39,7 @@ export default {
     {
       scope: ['comment', 'punctuation.definition.comment'],
       settings: {
-        foreground: '#8b95a7',
+        foreground: '#8B95A7',
       },
     },
     {
@@ -56,7 +56,7 @@ export default {
         'variable.language',
       ],
       settings: {
-        foreground: '#E5C07B',
+        foreground: '#FF897E',
       },
     },
     {
@@ -82,7 +82,7 @@ export default {
         'entity.other.attribute-name',
       ],
       settings: {
-        foreground: '#C678DD',
+        foreground: '#B581FF',
       },
     },
     {
@@ -97,7 +97,7 @@ export default {
         'entity.name.tag',
       ],
       settings: {
-        foreground: '#61AFEF',
+        foreground: '#1A86FF',
       },
     },
     {

src/_11ty/syntax/dash-light.ts

@@ -97,7 +97,7 @@ export default {
         'entity.name.tag',
       ],
       settings: {
-        foreground: '#0468D7',
+        foreground: '#146BCD',
       },
     },
     {

src/_sass/base/_content.scss

@@ -59,11 +59,11 @@ main {
       margin-bottom: 1rem;
 
       &:hover {
-        color: #0468d7;
+        color: var(--site-primary);
       }
 
       &:active {
-        color: #03448c;
+        color: color-mix(in srgb, var(--site-primary), #000 16%);
       }
     }
 

src/_sass/base/_root.scss

@@ -10,7 +10,7 @@ body {
   --site-surface-variant: rgb(222 226 242);
   --site-on-surface-variant: rgb(66 71 83);
 
-  --site-primary: rgb(0 69 148);
+  --site-primary: #146bcd;
   --site-surface-tint: rgb(0 91 191);
   --site-on-primary: rgb(255 255 255);
 
@@ -21,17 +21,17 @@ body {
   --site-on-primary-container: rgb(255 255 255);
   --site-secondary: rgb(72 94 137);
   --site-on-secondary: rgb(255 255 255);
-  --site-secondary-container: rgb(192 211 255);
-  --site-on-secondary-container: rgb(39 62 103);
+  --site-secondary-container: rgb(194 229 255);
+  --site-on-secondary-container: rgb(10 10 10);
 
   --site-surface-container-lowest: rgb(255 255 255);
-  --site-surface-container-low: rgb(242 243 253); // Outside content
-  --site-surface-container: rgb(236 237 247); // Card background
-  --site-surface-container-high: rgb(230 232 241); // Search, button, modal
-  --site-surface-container-highest: rgb(225 226 236); // (bright) button
+  --site-surface-container-low: rgb(242, 246, 252); // Outside content
+  --site-surface-container: rgb(237, 241, 247); // Card background
+  --site-surface-container-high: rgb(230, 234, 242); // Search, button, modal
+  --site-surface-container-highest: rgb(225, 229, 237); // (bright) button
 
-  --site-outline: rgb(114 119 133); // Button border
-  --site-outline-variant: rgb(194 198 214);
+  --site-outline: rgb(114, 120, 133); // Button border
+  --site-outline-variant: rgb(195, 201, 214);
 
   --site-interaction-base-values: 0 0 0;
 
@@ -54,7 +54,7 @@ body {
     --site-surface-variant: rgb(66 71 83); // Divider
     --site-on-surface-variant: rgb(194 198 214);
 
-    --site-primary: rgb(172 199 255);
+    --site-primary: #1a86ff;
     --site-surface-tint: rgb(172 199 255);
     --site-on-primary: rgb(0 47 104);
 
@@ -65,17 +65,17 @@ body {
     --site-on-primary-container: rgb(255 255 255);
     --site-secondary: rgb(176 199 248);
     --site-on-secondary: rgb(24 48 88);
-    --site-secondary-container: rgb(38 61 102);
-    --site-on-secondary-container: rgb(188 209 255);
+    --site-secondary-container: rgb(22 83 153);
+    --site-on-secondary-container: rgb(225 226 236);
 
-    --site-surface-container-lowest: rgb(11 14 21);
+    --site-surface-container-lowest: rgb(11, 14, 20);
     --site-surface-container-low: rgb(25 28 34); // Outside content
     --site-surface-container: rgb(29 32 38); // Card background
-    --site-surface-container-high: rgb(39 42 49); // Search, button, modal
-    --site-surface-container-highest: rgb(50 53 60); // (bright) button
+    --site-surface-container-high: rgb(39, 42, 48); // Search, button, modal
+    --site-surface-container-highest: rgb(51, 54, 61); // (bright) button
 
-    --site-outline: rgb(140 144 159); // Button border
-    --site-outline-variant: rgb(66 71 83);
+    --site-outline: rgb(139, 145, 158); // Button border
+    --site-outline-variant: rgb(67, 73, 84);
 
     --site-interaction-base-values: 255 255 255;
 

src/_sass/components/_asides.scss

@@ -1,7 +1,7 @@
 aside.alert {
   padding: 0.75rem;
   border-left: solid 0.25rem var(--site-outline-variant);
-  background-color: var(--site-surface-container-low);
+  background-color: var(--site-surface-container);
   --alert-title-color: var(--site-on-surface);
 
   .alert-header {

src/_sass/components/_breadcrumbs.scss

@@ -3,7 +3,7 @@
   margin-bottom: 1rem;
 
   > ol {
-    background-color: var(--site-surface-container-high);
+    background-color: var(--site-surface-container);
     border-radius: var(--site-square-radius);
     padding: 0.375rem;
 

src/_sass/components/_code.scss

@@ -95,12 +95,12 @@ pre {
     border-radius: var(--site-square-radius);
 
     &:hover, &:focus-visible {
-      color: #0468D7;
+      color: var(--site-primary);
       opacity: 1;
     }
 
     &:active {
-      color: #043875;
+      color: color-mix(in srgb, var(--site-primary), #000 16%);
     }
   }
 }

src/_sass/components/_dropdown.scss

@@ -47,21 +47,21 @@
         &:not(.auto-mode):not(.dark-mode) {
           #theme-menu button[data-theme='light'] {
             background-color: var(--site-secondary-container);
-            color: var(--site-on-secondary-container);   
+            color: var(--site-on-secondary-container);
           }
         }
 
         &.dark-mode:not(.auto-mode) {
           #theme-menu button[data-theme='dark'] {
             background-color: var(--site-secondary-container);
-            color: var(--site-on-secondary-container);  
+            color: var(--site-on-secondary-container);
           }
         }
-        
+
         &.auto-mode {
           #theme-menu button[data-theme='auto'] {
             background-color: var(--site-secondary-container);
-            color: var(--site-on-secondary-container);  
+            color: var(--site-on-secondary-container);
           }
         }
       }

src/_sass/components/_expansion-list.scss

@@ -131,7 +131,7 @@
   .expansion-panel-body {
     margin: auto;
     width: 90%;
-    border-top: .05rem solid rgba(0, 0, 0, 0.125);
+    border-top: 0.05rem solid var(--site-outline-variant);
 
     p {
       margin-top: 1.5rem;

src/_sass/components/_footer.scss

@@ -55,7 +55,7 @@
       color: var(--site-on-surface-variant);
 
       &:hover {
-        color: #0468d7;
+        color: var(--site-primary);
       }
     }
   }

src/_sass/components/_side-menu.scss

@@ -75,11 +75,11 @@
           padding: 0.2rem;
 
           &:hover {
-            color: #0468d7;
+            color: var(--site-primary);
           }
 
           &:active {
-            color: #03448c;
+            color: color-mix(in srgb, var(--site-primary), #000 16%);
           }
         }
       }