From a757863da4c2fc3496a9df0166391fc7f8b945cb Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Fri, 25 Apr 2025 12:51:23 -0700
Subject: [PATCH 1/3] chore: Conform colors into better var names

---
 assets/css/v2/style.css | 55 ++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index e152fca..a245e77 100644
--- a/assets/css/v2/style.css
+++ b/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;
@@ -391,7 +393,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;
@@ -644,12 +646,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;
   }
@@ -735,8 +737,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);
 }
 
@@ -764,7 +766,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;
 }
 
@@ -1044,7 +1046,7 @@ h6:has(a):hover {
 .headerlink {
   text-decoration: none;
 
-  color: black;
+  color: oklch(var(--color-black));
 }
 
 .headerlink::before {
@@ -1267,7 +1269,7 @@ li:has(> div > blockquote) {
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     right: 0;
     width: 2rem;
@@ -1295,7 +1297,7 @@ li:has(> div > blockquote) {
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     left: 0;
     width: 2rem;
@@ -1305,7 +1307,7 @@ li:has(> div > blockquote) {
     content: "";
     position: relative;
     display: block;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid oklch(var(--color-black));
     bottom: 0;
     left: 0;
     width: 100%;
@@ -1316,14 +1318,17 @@ li:has(> div > blockquote) {
   --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);
@@ -1333,7 +1338,7 @@ li:has(> div > blockquote) {
 
 .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;
 
@@ -1342,29 +1347,29 @@ li:has(> div > blockquote) {
   }
 
   .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;
@@ -1486,7 +1491,7 @@ a:has(code:not(pre code)) {
   padding: 0.15rem 0.5rem;
   font-size: 0.75rem;
   z-index: 999;
-  background-color: white;
+  background-color: oklch(var(--color-bg-light));
   margin: 0 0 -1px 0;
 }
 
@@ -1506,8 +1511,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;

From 4147a7acf97a4d89635df6f8394ab7be162a81ed Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Fri, 2 May 2025 12:46:37 -0700
Subject: [PATCH 2/3] chore: Refactored to use oklch colors

---
 assets/css/v2/style.css | 90 +++++++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index a245e77..4cab162 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -52,23 +52,25 @@
   /* MARK: Variables
   */
   --color-brand: 56.6% 0.194 147.7;
-  --color-brand-300: #a6daba;
-  --color-brand-200: #ccead7;
-  --color-brand-100: #f2faf5;
-  --color-background: #ffffff;
-  --color-foreground: #000000;
+  --color-brand-300: 0.84 0.0699 157.51;
+  --color-brand-200: 0.91 0.0406 157.72;
+  --color-brand-100: 0.98 0.0107 158.85;
+  --color-background: 1 0 0;
+  --color-foreground: 0 0 0;
   --color-bg-dark: 0 0 0;
   --color-bg-light: 1 0 0;
-  --color-shadow: #d2d2d2;
-  --color-codeblock-border: #888;
-  --color-codeblock-shadow: #e5e5e5;
-  --color-codeblock-highlight: #fffed9;
-  --color-footer: #1d1d1d;
-  --color-footer-text: #e2e2e2;
-  --color-product-title: #8d8d8d;
-  --color-divider: #cccccc;
-  --color-tabs-divider: #00000033;
-  --color-codeblock-code-with-comment: #00963926;
+  --color-shadow: 0.86 0 0;
+  --color-black: 0 0 0; /* NEED TO BE REMOVED */
+  --color-white: 1 0 0; /* NEED TO BE REMOVED */
+  --color-codeblock-border: 0.63 0 0;
+  --color-codeblock-shadow: 0.92 0 0;
+  --color-codeblock-highlight: 0.99 0.0479 105.97;
+  --color-footer: 0.23 0 0;
+  --color-footer-text: 0.91 0 0;
+  --color-product-title: 0.64 0 0;
+  --color-divider: 0.85 0 0;
+  --color-tabs-divider: 0 0 0 / 20%;
+  --color-codeblock-code-with-comment: 0.59 0.1712 147.69 / 14.9%;
   --color-callout-warning-primary: 0.65 0.188 24;
   --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
   --color-callout-caution-primary: 0.8 0.1613 71.21;
@@ -255,7 +257,7 @@ header {
     position: absolute;
     background-color: oklch(var(--color-bg-light));
     border: oklch(var(--color-black)) 1px solid;
-    box-shadow: 3px 3px 0px var(--color-shadow);
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
     z-index: 1;
     right: 0;
     display: none;
@@ -292,7 +294,7 @@ main {
 /* MARK: Footer
 */
 footer {
-  background-color: var(--color-footer);
+  background-color: oklch(var(--color-footer));
   padding: 2.5rem;
   margin-top: auto;
 }
@@ -313,7 +315,7 @@ footer {
 
 .footer-f5-trademark p {
   margin: 0;
-  color: var(--color-footer-text);
+  color: oklch(var(--color-footer-text));
 }
 
 .footer-useful-links {
@@ -323,7 +325,7 @@ footer {
 }
 
 .footer-useful-links a {
-  color: var(--color-footer-text);
+  color: oklch(var(--color-footer-text));
   text-decoration: none;
 }
 
@@ -383,19 +385,19 @@ nav {
   }
 
   a {
-    color: var(--color-foreground);
-    text-decoration-color: var(--color-background);
+    color: oklch(var(--color-foreground));
+    text-decoration-color: oklch(var(--color-background));
 
     &:hover {
-      text-decoration-color: var(--color-background);
+      text-decoration-color: oklch(var(--color-background));
     }
   }
 
   /* Styling for items */
   .homepage-item {
     background: oklch(var(--color-bg-light));
-    border: 1px solid var(--color-codeblock-border);
-    box-shadow: 3px 3px 0px var(--color-shadow);
+    border: 1px solid oklch(var(--color-codeblock-border));
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
     height: 7rem;
     padding: 1rem 2rem 2rem 2rem;
     display: flex;
@@ -405,7 +407,7 @@ nav {
 
     &:hover {
       box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
-      text-decoration-color: var(--color-background);
+      text-decoration-color: oklch(var(--color-background));
       border: 1px solid oklch(var(--color-brand) / 0.8);
     }
   }
@@ -739,7 +741,7 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   padding: 1rem 1.5rem;
   background-color: oklch(var(--color-bg-light));
   border: oklch(var(--color-black)) 1px solid;
-  box-shadow: 3px 3px 0px var(--color-shadow);
+  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 }
 
 button:has(~ .product-selector[style*="block"])
@@ -754,7 +756,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 .product-selector p {
   font-size: 0.75rem;
-  color: var(--color-product-title);
+  color: oklch(var(--color-product-title));
   display: inline;
 }
 
@@ -944,7 +946,7 @@ p {
 }
 
 .breadcrumb {
-  color: var(--color-foreground);
+  color: oklch(var(--color-foreground));
   text-decoration: none;
   font-size: 0.875rem;
   margin: 0;
@@ -1083,7 +1085,7 @@ table {
   tr::after {
     content: "";
     position: absolute;
-    border-bottom: var(--table-line-height) solid var(--color-divider);
+    border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
     bottom: 0;
     left: calc(-1 * var(--overflow-gutter-extension));
     width: calc(100% + (2 * var(--overflow-gutter-extension)));
@@ -1117,20 +1119,20 @@ table td:first-child {
 }
 
 table hr {
-  color: var(--color-divider);
+  color: oklch(var(--color-divider));
   border: none;
-  border-bottom: var(--table-line-height) solid var(--color-divider);
+  border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
 }
 
 /* MARK: Callouts
 */
 blockquote {
-  border: 1px solid var(--color-foreground);
+  border: 1px solid oklch(var(--color-foreground));
   padding: 1rem;
   margin: 0 -1rem;
 
   /* solid 3px drop shadow */
-  box-shadow: 3px 3px 0px var(--color-shadow);
+  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 
   &:has(.code-block) .code-block:not(:has(.single-line)) {
     /* Removes negative margins from multi-line codeblocks */
@@ -1157,7 +1159,7 @@ blockquote.note:before {
   margin: -1.625rem 0 0 -0.25rem;
   padding: 0 0.25rem;
   display: block;
-  background-color: var(--color-background);
+  background-color: oklch(var(--color-background));
   z-index: 999;
 }
 
@@ -1337,7 +1339,7 @@ li:has(> div > blockquote) {
 }
 
 .nav-item {
-  border: 1px solid var(--color-tabs-divider);
+  border: 1px solid oklch(var(--color-tabs-divider));
   border-bottom: 1px solid oklch(var(--color-black));
   padding: 10px;
   margin-bottom: 0;
@@ -1452,7 +1454,7 @@ a:has(code:not(pre code)) {
 }
 
 .highlight-v2 {
-  border: 1px solid var(--color-codeblock-border);
+  border: 1px solid oklch(var(--color-codeblock-border));
   overflow-x: scroll;
   scrollbar-width: none;
   line-height: 150%;
@@ -1467,7 +1469,7 @@ a:has(code:not(pre code)) {
 .highlight-v2.single-line {
   display: flex;
   align-items: center;
-  border: 1px solid var(--color-codeblock-border);
+  border: 1px solid oklch(var(--color-codeblock-border));
   overflow-x: scroll;
   line-height: 1;
 }
@@ -1484,9 +1486,9 @@ a:has(code:not(pre code)) {
 .code-type {
   display: inline-block;
   height: 1.5rem;
-  border-top: 1px solid var(--color-codeblock-border);
-  border-left: 1px solid var(--color-codeblock-border);
-  border-right: 1px solid var(--color-codeblock-border);
+  border-top: 1px solid oklch(var(--color-codeblock-border));
+  border-left: 1px solid oklch(var(--color-codeblock-border));
+  border-right: 1px solid oklch(var(--color-codeblock-border));
   text-transform: uppercase;
   padding: 0.15rem 0.5rem;
   font-size: 0.75rem;
@@ -1496,7 +1498,7 @@ a:has(code:not(pre code)) {
 }
 
 .code-container {
-  box-shadow: 2px 2px 0px var(--color-codeblock-shadow);
+  box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow));
 }
 
 ol .code-block,
@@ -1522,7 +1524,7 @@ ul .code-block {
   margin-top: 8px;
   right: 1rem;
   z-index: 1;
-  --color-codeblock-shadow: 0% 0 0;
+  --color-codeblock-shadow: 0 0 0;
   box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
 }
 
@@ -1544,7 +1546,7 @@ ul .code-block {
 .highlight code .hl {
   width: fit-content;
   min-width: 100%;
-  background-color: var(--color-codeblock-highlight);
+  background-color: oklch(var(--color-codeblock-highlight));
 }
 
 /* MARK: Images
@@ -1580,7 +1582,7 @@ hr {
   width: calc(100% + 2rem);
   margin-left: -1rem;
 
-  border: 1px solid var(--color-divider);
+  border: 1px solid oklch(var(--color-divider));
 }
 
 .feather {

From 91dc9a0fab237a0da157753f29d9a9f4c49fa8f9 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 15 May 2025 10:56:31 -0700
Subject: [PATCH 3/3] chore: Refactored variable name + removed unneeded CSS

---
 assets/css/v2/style.css | 105 ++++++++++++++++++++--------------------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 4cab162..3d905d4 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -57,26 +57,24 @@
   --color-brand-100: 0.98 0.0107 158.85;
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
-  --color-bg-dark: 0 0 0;
-  --color-bg-light: 1 0 0;
   --color-shadow: 0.86 0 0;
-  --color-black: 0 0 0; /* NEED TO BE REMOVED */
-  --color-white: 1 0 0; /* NEED TO BE REMOVED */
+  --color-inline_codeblock-border: 0.85 0 0;
+  --color-inline_codeblock-background: 0.98 0 0;
   --color-codeblock-border: 0.63 0 0;
   --color-codeblock-shadow: 0.92 0 0;
+  --color-codeblock-background: 1 0 0;
   --color-codeblock-highlight: 0.99 0.0479 105.97;
   --color-footer: 0.23 0 0;
   --color-footer-text: 0.91 0 0;
   --color-product-title: 0.64 0 0;
-  --color-divider: 0.85 0 0;
-  --color-tabs-divider: 0 0 0 / 20%;
-  --color-codeblock-code-with-comment: 0.59 0.1712 147.69 / 14.9%;
-  --color-callout-warning-primary: 0.65 0.188 24;
+  --color-tabs-inactive-border: 0 0 0 / 20%;
+  --color-callout-warning: 0.65 0.188 24;
   --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
-  --color-callout-caution-primary: 0.8 0.1613 71.21;
+  --color-callout-caution: 0.8 0.1613 71.21;
   --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
-  --color-callout-important-primary: 0.36 0 0;
+  --color-callout-important: 0.36 0 0;
   --color-callout-important-shadow: 0.23 0 0 / 7.06%;
+  --color-divider: 0.85 0 0;
 
   /* vars for the primary grid setup */
   --grid-sidebar: 24rem;
@@ -255,15 +253,15 @@ header {
 
   .dropdown-content {
     position: absolute;
-    background-color: oklch(var(--color-bg-light));
-    border: oklch(var(--color-black)) 1px solid;
+    background-color: oklch(var(--color-background));
+    border: oklch(var(--color-foreground)) 1px solid;
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
     z-index: 1;
     right: 0;
     display: none;
     width: 400px;
     max-width: 80vw;
-    margin-right: 2.5rem;
+    margin-right: 2rem;
   }
 
   .dropdown-content ul {
@@ -395,7 +393,7 @@ nav {
 
   /* Styling for items */
   .homepage-item {
-    background: oklch(var(--color-bg-light));
+    background: oklch(var(--color-background));
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
     height: 7rem;
@@ -648,12 +646,12 @@ atomic-search-interface {
 atomic-search-box {
   &::part(wrapper) {
     border-radius: 0;
-    border-color: oklch(var(--color-black));
+    border-color: oklch(var(--color-foreground));
   }
 
   &::part(suggestions-wrapper) {
     border-radius: 0;
-    border-color: oklch(var(--color-black));
+    border-color: oklch(var(--color-foreground));
     width: calc(100% + 2px);
     margin-left: -1px;
   }
@@ -739,8 +737,8 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   margin-top: 8.375rem;
   margin-left: 44rem;
   padding: 1rem 1.5rem;
-  background-color: oklch(var(--color-bg-light));
-  border: oklch(var(--color-black)) 1px solid;
+  background-color: oklch(var(--color-background));
+  border: oklch(var(--color-foreground)) 1px solid;
   box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 }
 
@@ -768,7 +766,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
 .product-selector a {
   text-decoration: none;
-  color: oklch(var(--color-black));
+  color: oklch(var(--color-foreground));
   font-size: 1rem;
 }
 
@@ -1048,7 +1046,7 @@ h6:has(a):hover {
 .headerlink {
   text-decoration: none;
 
-  color: oklch(var(--color-black));
+  color: oklch(var(--color-foreground));
 }
 
 .headerlink::before {
@@ -1211,38 +1209,38 @@ blockquote.call-out {
 }
 
 blockquote.caution {
-  --color-shadow: oklch(var(--color-callout-caution-shadow));
-  border: 1px solid oklch(var(--color-callout-caution-primary));
+  --color-shadow: var(--color-callout-caution-shadow);
+  border: 1px solid oklch(var(--color-callout-caution));
 
   .call-out-type {
     background-color: oklch(var(--color-callout-caution-shadow));
-    border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
+    border-bottom: 1px solid oklch(var(--color-callout-caution));
   }
   .call-out-type .feather {
-    color: oklch(var(--color-callout-caution-primary));
+    color: oklch(var(--color-callout-caution));
   }
 }
 
 blockquote.warning {
-  --color-shadow: oklch(var(--color-callout-warning-shadow));
-  border: 1px solid oklch(var(--color-callout-warning-primary));
+  --color-shadow: var(--color-callout-warning-shadow);
+  border: 1px solid oklch(var(--color-callout-warning));
 
   .call-out-type {
     background-color: oklch(var(--color-callout-warning-shadow));
-    border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
+    border-bottom: 1px solid oklch(var(--color-callout-warning));
   }
   .call-out-type .feather {
-    color: oklch(var(--color-callout-warning-primary));
+    color: oklch(var(--color-callout-warning));
   }
 }
 
 blockquote.important {
-  --color-shadow: oklch(var(--color-callout-important-shadow));
-  border: 1px solid oklch(var(--color-callout-important-primary));
+  --color-shadow: var(--color-callout-important-shadow);
+  border: 1px solid oklch(var(--color-callout-important));
 
   .call-out-type {
     background-color: oklch(var(--color-callout-important-shadow));
-    border-bottom: 1px solid oklch(var(--color-callout-important-primary));
+    border-bottom: 1px solid oklch(var(--color-callout-important));
   }
 }
 
@@ -1271,7 +1269,7 @@ li:has(> div > blockquote) {
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid oklch(var(--color-black));
+    border-bottom: 1px solid oklch(var(--color-foreground));
     bottom: 0;
     right: 0;
     width: 2rem;
@@ -1296,20 +1294,22 @@ li:has(> div > blockquote) {
   }
 
   &::before {
+    /* Horizontal line before tab blocks */
     content: "";
     position: absolute;
     display: block;
-    border-bottom: 1px solid oklch(var(--color-black));
+    border-bottom: 1px solid oklch(var(--color-foreground));
     bottom: 0;
     left: 0;
     width: 2rem;
   }
 
   &::after {
+    /* Horizontal line after tab blocks */
     content: "";
     position: relative;
     display: block;
-    border-bottom: 1px solid oklch(var(--color-black));
+    border-bottom: 1px solid oklch(var(--color-foreground));
     bottom: 0;
     left: 0;
     width: 100%;
@@ -1320,16 +1320,16 @@ li:has(> div > blockquote) {
   --mask-image-content: linear-gradient(
     to right,
     transparent,
-    oklch(var(--color-black)) var(--mask-height),
-    oklch(var(--color-black)) calc(100% - var(--mask-height)),
+    oklch(var(--color-foreground)) var(--mask-height),
+    oklch(var(--color-foreground)) calc(100% - var(--mask-height)),
     transparent
   );
 
   --mask-size-content: 100% calc(100% - var(--scrollbar-width));
 
   --mask-image-scrollbar: linear-gradient(
-    oklch(var(--color-black)),
-    oklch(var(--color-black))
+    oklch(var(--color-foreground)),
+    oklch(var(--color-foreground))
   );
   --mask-size-scrollbar: 100% var(--scrollbar-width);
   mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
@@ -1339,8 +1339,8 @@ li:has(> div > blockquote) {
 }
 
 .nav-item {
-  border: 1px solid oklch(var(--color-tabs-divider));
-  border-bottom: 1px solid oklch(var(--color-black));
+  border: 1px solid oklch(var(--color-tabs-inactive-border));
+  border-bottom: 1px solid oklch(var(--color-foreground));
   padding: 10px;
   margin-bottom: 0;
 
@@ -1349,29 +1349,29 @@ li:has(> div > blockquote) {
   }
 
   .active {
-    color: oklch(var(--color-black));
+    color: oklch(var(--color-foreground));
   }
 }
 
 .nav-item:has(.active) {
   /* Change the border colors of li that is has a child with a class "active" */
-  border-top: 1px solid oklch(var(--color-black));
-  border-left: 1px solid oklch(var(--color-black));
+  border-top: 1px solid oklch(var(--color-foreground));
+  border-left: 1px solid oklch(var(--color-foreground));
   border-bottom: none;
 
   /* Change the border of next child */
   + li {
-    border-left: 1px solid oklch(var(--color-black));
+    border-left: 1px solid oklch(var(--color-foreground));
   }
 }
 
 .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 oklch(var(--color-black));
+  border-right: 1px solid oklch(var(--color-foreground));
 }
 
 .tab-content {
-  border-bottom: 1px solid oklch(var(--color-black));
+  border-bottom: 1px solid oklch(var(--color-foreground));
   padding-bottom: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1399,12 +1399,12 @@ code {
   font-family: "JetBrainsMono", monospace;
 }
 
-/* Inline Code */
+/* Inline Codeblock */
 code:not(pre code) {
-  border: solid 1px #ccc;
+  border: solid 1px oklch(var(--color-inline_codeblock-border));
   border-radius: 0.25rem;
   padding: 0 0.25rem;
-  background-color: #f9f9f9;
+  background-color: oklch(var(--color-inline_codeblock-background));
   font-size: 0.875rem;
 }
 
@@ -1425,6 +1425,7 @@ a:has(code:not(pre code)) {
   text-decoration: none;
 }
 
+/* Regular Codeblock */
 .highlight {
   padding: 0 1rem 0 1rem;
   position: relative;
@@ -1513,12 +1514,12 @@ ul .code-block {
 }
 
 .code-copy-button {
-  background-color: oklch(var(--color-bg-light));
-  border: 1px solid oklch(var(--color-black));
+  background-color: oklch(var(--color-background));
+  border: 1px solid oklch(var(--color-foreground));
   padding: 4px 6px;
   cursor: pointer;
   font-size: 12px;
-  color: #000;
+  color: oklch(var(--color-foreground));
   display: none;
   position: absolute;
   margin-top: 8px;