Refactor color variables

_sass/_base.scss

@@ -3,25 +3,17 @@ html {
 }
 
 body {
-  color: $color-gray300;
+  color: var(--color-content-secondary);
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;
   font-weight: 400;
   font-size: 1.8rem;
   line-height: 2.8rem;
-
-  @media (prefers-color-scheme: dark) {
-    color: $color-gray400;
-  }
 }
 
-*:focus,
-*:focus-visible {
+*:not(main):focus,
+*:not(main):focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px $color-action-light;
-
-  @media (prefers-color-scheme: dark) {
-    box-shadow: 0 0 0 3px $color-action-dark;
-  }
+  box-shadow: 0 0 0 3px var(--color-action) !important;
 }
 
 .button {
@@ -30,59 +22,34 @@ body {
   align-items: center;
   gap: 1rem;
   padding: 0.8rem 2rem 0.8rem 1.6rem;
-  color: $color-gray100;
-  border: 1px solid $color-gray500;
+  color: var(--color-content-lead);
+  border: 1px solid var(--color-background-contrast);
   border-radius: 4rem;
-  color: inherit;
   text-decoration: none;
   transition: all ease-out 0.15s;
   backdrop-filter: blur(10px);
 
-  @media (prefers-color-scheme: dark) {
-    color: #FFF;
-    border-color: $color-gray300;
-  }
-
   &:hover,
   &:focus {
-    border-color: $color-gray400;
+    border-color: var(--color-background-contrast--hover);
     text-decoration: none;
     transform: scale3d(1.02,1.02,1);
-    box-shadow: 0 0 8px 0 rgba($color-action-light, 0.1);
-
-    @media (prefers-color-scheme: dark) {
-      border-color: $color-gray400;
-      box-shadow: 0 0 8px 0 rgba($color-action-dark, 0.1);
-    }
+    box-shadow: 0 0 8px 0 color-mix(in srgb, var(--color-action) 10%, transparent);
   }
 
   &.highlight-button {
-    background: $color-gray500;
-    color: $color-gray100;
-
-    @media (prefers-color-scheme: dark) {
-      background: $color-gray200;
-      color: white
-    }
+    background: var(--color-background-highlight);
+    color: var(--color-content-lead);
   }
 
   &.action-button {
-    background-color: $color-action-light;
-    color: white;
+    background-color: var(--color-action);
+    color: var(--color-background-main);
     border: none;
 
-    @media (prefers-color-scheme: dark) {
-      background-color: $color-action-dark;
-      color: black;
-    }
-
     &:hover,
     &:focus {
-      box-shadow: 0 0 12px 0 rgba($color-action-light, 0.3);
-
-      @media (prefers-color-scheme: dark) {
-        box-shadow: 0 0 12px 0 rgba($color-action-dark, 0.3);
-      }
+      box-shadow: 0 0 12px 0 color-mix(in srgb, var(--color-action) 30%, transparent);
     }
   }
 
@@ -117,14 +84,10 @@ body {
 .content {
   a:not(.button) {
     font-weight: 500;
-    color: $color-action-light;
+    color: var(--color-action);
     text-decoration: none;
     transition: all ease-out 0.2s;
 
-    @media (prefers-color-scheme: dark) {
-      color: $color-action-dark;
-    }
-
     &:focus,
     &:hover {
       border-bottom: 2px solid currentColor;
@@ -138,11 +101,7 @@ body {
   h5,
   h6 {
     text-rendering: optimizeLegibility;
-    color: $color-gray100;
-
-    @media (prefers-color-scheme: dark) {
-      color: #FFF;
-    }
+    color: var(--color-content-lead);
 
     a:not(.button) {
       font-weight: inherit;
@@ -198,11 +157,7 @@ body {
       margin-left: -3.2rem;
       font-weight: 400;
       text-align: center;
-      color: $color-gray300;
-
-      @media (prefers-color-scheme: dark) {
-        color: $color-gray400;
-      }
+      color: var(--color-content-secondary);
     }
   }
 
@@ -241,7 +196,6 @@ body {
       line-height: 1.143em;
       font-weight: 700;
       margin-bottom: 0.571em;
-      color: #FFF;
     }
 
     dd {
@@ -255,22 +209,18 @@ body {
     height: 1px;
     margin: 1.6rem 0;
     padding: 0;
-    background: $color-gray500;
+    background: var(--color-background-contrast);
     border: 0;
-
-    @media (prefers-color-scheme: dark) {
-      background: $color-gray300;
-    }
   }
 
   blockquote {
     margin: 1.6rem 0;
     padding: 0 1.6rem;
     box-sizing: border-box;
-    border-left: 4px solid rgba(255, 255, 255, 0.25);
+    border-left: 4px solid var(--color-background-contrast);
     font-style: italic;
     font-weight: 400;
-    color: $color-gray400;
+    color: var(--color-content-primary);
     background: transparent;
 
     * {
@@ -296,32 +246,20 @@ body {
   b,
   strong {
     font-weight: 700;
-    color: $color-gray200;
-
-    @media (prefers-color-scheme: dark) {
-      color: $color-gray600;
-    }
+    color: var(--color-content-primary);
   }
 
   small {
     font-size: inherit;
-    color: $color-gray400;
-
-    @media (prefers-color-scheme: dark) {
-      color: $color-gray300;
-    }
+    color: var(--color-content-primary);
   }
 
   mark {
-    background-color: $color-action-dark;
+    background-color: var(--color-action);
   }
 
   pre {
-    color: $color-gray300;
-
-    @media (prefers-color-scheme: dark) {
-      color: $color-gray400;
-    }
+    color: var(--color-content-secondary);
   }
 
   code,
@@ -335,7 +273,7 @@ body {
     font-size: 0.875em;
     line-height: 1.143em;
     white-space: pre;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--color-background-highlight);
     font-weight: 400;
     border-radius: 2px;
   }
@@ -345,14 +283,14 @@ body {
     max-width: 100%;
     margin: 1.6rem 0;
     background-color: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.25);
+    border: 1px solid var(--color-background-contrast);
 
     td,
     th {
       position: relative;
       padding: 1.2rem;
       text-align: left;
-      border: 1px solid rgba(255, 255, 255, 0.25);
+      border: 1px solid var(--color-background-contrast);
     }
 
     th {