chore: Conform colors into better var names

Author: lamATnginx

assets/css/v2/style.css

@@ -57,6 +57,8 @@
   --color-brand-100: #f2faf5;
   --color-background: #ffffff;
   --color-foreground: #000000;
+  --color-bg-dark: 0 0 0;
+  --color-bg-light: 1 0 0;
   --color-shadow: #d2d2d2;
   --color-codeblock-border: #888;
   --color-codeblock-shadow: #e5e5e5;
@@ -251,8 +253,8 @@ header {
 
   .dropdown-content {
     position: absolute;
-    background-color: white;
-    border: black 1px solid;
+    background-color: oklch(var(--color-bg-light));
+    border: oklch(var(--color-black)) 1px solid;
     box-shadow: 3px 3px 0px var(--color-shadow);
     z-index: 1;
     right: 0;
@@ -385,7 +387,7 @@ nav {
 
   /* Styling for items */
   .homepage-item {
-    background: #fff;
+    background: oklch(var(--color-bg-light));
     border: 1px solid var(--color-codeblock-border);
     box-shadow: 3px 3px 0px var(--color-shadow);
     height: 7rem;
@@ -618,12 +620,12 @@ atomic-search-interface {
 atomic-search-box {
   &::part(wrapper) {
     border-radius: 0;
-    border-color: black;
+    border-color: oklch(var(--color-black));
   }
 
   &::part(suggestions-wrapper) {
     border-radius: 0;
-    border-color: black;
+    border-color: oklch(var(--color-black));
     width: calc(100% + 2px);
     margin-left: -1px;
   }
@@ -749,8 +751,8 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   margin-top: 8.375rem;
   margin-left: 44rem;
   padding: 1rem 1.5rem;
-  background-color: white;
-  border: black 1px solid;
+  background-color: oklch(var(--color-bg-light));
+  border: oklch(var(--color-black)) 1px solid;
   box-shadow: 3px 3px 0px var(--color-shadow);
 }
 
@@ -778,7 +780,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .product-selector a {
   text-decoration: none;
-  color: black;
+  color: oklch(var(--color-black));
   font-size: 1rem;
 }
 
@@ -816,7 +818,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .sidebar .sidebar-navigation a {
   text-decoration: none;
-  color: black;
+  color: oklch(var(--color-black));
 }
 
 .sidebar .sidebar-navigation .collapsible-header {
@@ -854,7 +856,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .toggle-checkbox:checked ~ .collapsible-content::before {
   content: "";
   position: absolute;
-  border-left: black 1px solid;
+  border-left: oklch(var(--color-black)) 1px solid;
   left: -8.5px;
   top: -22.5px;
   height: calc(100% + 13.5px);
@@ -868,7 +870,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .collapsible-content .box::after {
   content: "";
   position: absolute;
-  border-top: black 1px solid;
+  border-top: oklch(var(--color-black)) 1px solid;
   left: -11.5px;
   width: var(--sidebar-line-width);
   top: 50%;
@@ -877,7 +879,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .collapsible-content .opened::after {
   content: "";
   position: absolute;
-  border-top: black 1px solid;
+  border-top: oklch(var(--color-black)) 1px solid;
   left: -12.5px;
   width: var(--sidebar-line-width);
   top: 50%;
@@ -886,7 +888,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .collapsible-content .box-link::after {
   content: "";
   position: absolute;
-  border-top: black 1px solid;
+  border-top: oklch(var(--color-black)) 1px solid;
   left: -11.5px;
   width: var(--sidebar-line-width);
   top: 50%;
@@ -902,7 +904,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .sidebar .sidebar-navigation ul li .parent-box-link {
   content: "";
-  background-color: black;
+  background-color: oklch(var(--color-black));
   position: absolute;
   width: 1px;
   height: var(--sidebar-line-box-side-length);
@@ -912,7 +914,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .sidebar .sidebar-navigation ul li .box-link {
   content: "";
-  background-color: black;
+  background-color: oklch(var(--color-black));
   position: absolute;
   width: 1px;
   height: var(--sidebar-line-box-side-length);
@@ -940,11 +942,11 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 
 .sidebar .sidebar-navigation ul li .expand {
-  background-color: black;
+  background-color: oklch(var(--color-black));
 }
 
 .sidebar .sidebar-navigation ul li .opened {
-  border: black 1px solid;
+  border: oklch(var(--color-black)) 1px solid;
 }
 
 .sidebar .sidebar-navigation ul li .current {
@@ -969,7 +971,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .sidebar .sidebar-navigation .parent-collapsible-content:first-child::before {
   content: "";
   position: absolute;
-  border-left: black 1px solid;
+  border-left: oklch(var(--color-black)) 1px solid;
   left: -24px;
   top: 10px;
   height: calc(100% - 9px - 10px);
@@ -993,7 +995,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   .parent-box::before {
   content: "";
   display: block;
-  border-top: black 1px solid;
+  border-top: oklch(var(--color-black)) 1px solid;
   margin-left: -12px;
   margin-top: 50%;
   width: var(--sidebar-line-width);
@@ -1002,7 +1004,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 .parent-collapsible-content .parent-box-link::after {
   content: "";
   position: absolute;
-  border-top: black 1px solid;
+  border-top: oklch(var(--color-black)) 1px solid;
   left: -11.5px;
   width: var(--sidebar-line-width);
   top: 50%;
@@ -1147,7 +1149,7 @@ h6:has(a):hover {
 .headerlink {
   text-decoration: none;
 
-  color: black;
+  color: oklch(var(--color-black));
 }
 
 .headerlink::before {
@@ -1360,7 +1362,7 @@ blockquote.important {
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     right: 0;
     width: 2rem;
@@ -1388,7 +1390,7 @@ blockquote.important {
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     left: 0;
     width: 2rem;
@@ -1398,7 +1400,7 @@ blockquote.important {
     content: "";
     position: relative;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     left: 0;
     width: 100%;
@@ -1409,14 +1411,17 @@ blockquote.important {
   --mask-image-content: linear-gradient(
     to right,
     transparent,
-    black var(--mask-height),
-    black calc(100% - var(--mask-height)),
+    oklch(var(--color-black)) var(--mask-height),
+    oklch(var(--color-black)) calc(100% - var(--mask-height)),
     transparent
   );
 
   --mask-size-content: 100% calc(100% - var(--scrollbar-width));
 
-  --mask-image-scrollbar: linear-gradient(black, black);
+  --mask-image-scrollbar: linear-gradient(
+    oklch(var(--color-black)),
+    oklch(var(--color-black))
+  );
   --mask-size-scrollbar: 100% var(--scrollbar-width);
   mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
   mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
@@ -1426,7 +1431,7 @@ blockquote.important {
 
 .nav-item {
   border: 1px solid var(--color-tabs-divider);
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid oklch(var(--color-black));
   padding: 10px;
   margin-bottom: 0;
 
@@ -1435,29 +1440,29 @@ blockquote.important {
   }
 
   .active {
-    color: black;
+    color: oklch(var(--color-black));
   }
 }
 
 .nav-item:has(.active) {
   /* Change the border colors of li that is has a child with a class "active" */
-  border-top: 1px solid black;
-  border-left: 1px solid black;
+  border-top: 1px solid oklch(var(--color-black));
+  border-left: 1px solid oklch(var(--color-black));
   border-bottom: none;
 
   /* Change the border of next child */
   + li {
-    border-left: 1px solid black;
+    border-left: 1px solid oklch(var(--color-black));
   }
 }
 
 .nav-item:last-child:has(.active) {
   /* If on last tab, change the right border since it does not have a next sibling */
-  border-right: 1px solid black;
+  border-right: 1px solid oklch(var(--color-black));
 }
 
 .tab-content {
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid oklch(var(--color-black));
   padding-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1563,7 +1568,7 @@ code:not(pre code) {
   font-size: 0.75rem;
   z-index: 999;
   /* position: absolute; */
-  background-color: white;
+  background-color: oklch(var(--color-bg-light));
   margin: 0 0 -1px 0;
   /* box-shadow: 2px 2px 0px var(--color-shadow); */
 }
@@ -1584,8 +1589,8 @@ ul .code-block {
 }
 
 .code-copy-button {
-  background-color: white;
-  border: 1px solid black;
+  background-color: oklch(var(--color-bg-light));
+  border: 1px solid oklch(var(--color-black));
   padding: 4px 6px;
   cursor: pointer;
   font-size: 12px;