From dd5a661a5cb1db8b52eb75c36fb044e9dbd51030 Mon Sep 17 00:00:00 2001
From: Amaresh  S M <amareshsm13@gmail.com>
Date: Sat, 3 Feb 2024 12:05:05 +0530
Subject: [PATCH] docs: [WIP] no-js dark theme fix

---
 docs/src/_includes/components/logo.html      |  9 ---------
 docs/src/assets/scss/components/logo.scss    |  7 +++++++
 docs/src/assets/scss/styles.scss             |  2 ++
 docs/src/assets/scss/syntax-highlighter.scss | 12 ++----------
 docs/src/assets/scss/tokens/opacity.scss     | 18 ++++++++++++++++++
 docs/src/assets/scss/tokens/themes.scss      | 20 ++++++++++++++++++++
 6 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 docs/src/assets/scss/components/logo.scss
 create mode 100644 docs/src/assets/scss/tokens/opacity.scss

diff --git a/docs/src/_includes/components/logo.html b/docs/src/_includes/components/logo.html
index 5e422b6fa3c..6dd6f97fc16 100644
--- a/docs/src/_includes/components/logo.html
+++ b/docs/src/_includes/components/logo.html
@@ -1,13 +1,4 @@
 <div class="logo">
-    <style>
-        [data-theme="dark"] .logo-component {
-            fill: #fff;
-        }
-
-        [data-theme="dark"] #logo-center {
-            opacity: 0.6;
-        }
-    </style>
     <svg class="brand-logo" width="203" height="58" viewBox="0 0 203 58" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ESLint logo">
         <path d="M46.5572 21.1093L34.0167 13.8691C33.7029 13.6879 33.3161 13.6879 33.0023 13.8691L20.4616 21.1093C20.148 21.2905 19.9543 21.6253 19.9543 21.9878V36.4681C19.9543 36.8304 20.148 37.1654 20.4616 37.347L33.0023 44.5871C33.3161 44.7684 33.7029 44.7684 34.0167 44.5871L46.5572 37.347C46.871 37.1657 47.0644 36.8306 47.0644 36.4681V21.9878C47.0641 21.6253 46.8707 21.2905 46.5572 21.1093Z" fill="#8080F2" id="logo-center" class="logo-component" />
         <path d="M0.904381 27.7046L15.8878 1.63772C16.4321 0.695223 17.4375 0 18.5258 0H48.4931C49.5817 0 50.5873 0.695223 51.1316 1.63772L66.115 27.6471C66.6593 28.5899 66.6593 29.7796 66.115 30.7224L51.1316 56.5756C50.5873 57.5181 49.5817 58 48.4931 58H18.526C17.4377 58 16.4321 57.5326 15.8881 56.5899L0.90464 30.6944C0.359854 29.7522 0.359854 28.6471 0.904381 27.7046ZM13.3115 40.2393C13.3115 40.6225 13.5422 40.977 13.8744 41.1689L32.96 52.1803C33.2919 52.3719 33.7078 52.3719 34.0397 52.1803L53.1401 41.1689C53.4721 40.977 53.7043 40.6228 53.7043 40.2393V18.2161C53.7043 17.8327 53.4754 17.4785 53.1432 17.2866L34.0584 6.27513C33.7264 6.08327 33.3111 6.08327 32.9792 6.27513L13.8775 17.2866C13.5453 17.4785 13.3115 17.8327 13.3115 18.2161V40.2393V40.2393Z" fill="#4B32C3" class="logo-component" />
diff --git a/docs/src/assets/scss/components/logo.scss b/docs/src/assets/scss/components/logo.scss
new file mode 100644
index 00000000000..c0f5f22cdd0
--- /dev/null
+++ b/docs/src/assets/scss/components/logo.scss
@@ -0,0 +1,7 @@
+.logo-component {
+    fill: var(--logo-fill-color);
+}
+
+#logo-center {
+    opacity: var(--logo-opacity);
+}
diff --git a/docs/src/assets/scss/styles.scss b/docs/src/assets/scss/styles.scss
index 8907a6c4bf9..7e245593bc5 100644
--- a/docs/src/assets/scss/styles.scss
+++ b/docs/src/assets/scss/styles.scss
@@ -2,6 +2,7 @@
 @import "tokens/spacing";
 @import "tokens/typography";
 @import "tokens/ui";
+@import "tokens/opacity";
 
 @import "foundations";
 @import "syntax-highlighter";
@@ -29,6 +30,7 @@
 @import "components/index"; // used in component library
 @import "components/tabs";
 @import "components/resources";
+@import "components/logo";
 
 @import "carbon-ads";
 
diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index cb744db0e38..aa5a00e387d 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -33,11 +33,7 @@ pre[class*="language-"] {
     overflow: auto;
     border-radius: var(--border-radius);
     background-color: var(--lightest-background-color);
-    color: var(--color-neutral-900);
-
-    [data-theme="dark"] & {
-        color: var(--color-neutral-100);
-    }
+    color: var(--code-color);
 
     &.line-numbers-mode {
         padding-left: calc(1.5rem + 2.4em + 1.2rem);
@@ -60,11 +56,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #6e7f8e;
-
-    [data-theme="dark"] & {
-        color: #8e9fae;
-    }
+    color: var(--code-token-color);
 }
 
 .token.namespace {
diff --git a/docs/src/assets/scss/tokens/opacity.scss b/docs/src/assets/scss/tokens/opacity.scss
new file mode 100644
index 00000000000..fbd983525f0
--- /dev/null
+++ b/docs/src/assets/scss/tokens/opacity.scss
@@ -0,0 +1,18 @@
+:root {
+    --opacity-100: 1;
+    --opacity-60: 0.6;
+}
+
+html[data-theme="light"] {
+    --logo-opacity: var(--opacity-100);
+}
+
+html[data-theme="dark"] {
+    --logo-opacity: var(--opacity-60);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --logo-opacity: var(--opacity-60);
+    }
+}
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index a8104a5b346..69e83f8a5fe 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -61,6 +61,9 @@
     --color-rose-800: #a11043;
     --color-rose-900: #89123e;
 
+    --color-slate-grey: #6e7f8e;
+    --color-cadet-grey: #8e9fae;
+
     /* Tier 2 variables */
     --primary-button-background-color: var(--color-primary-800);
     --primary-button-hover-color: var(--color-primary-900);
@@ -89,6 +92,10 @@
     --hero-background-color: var(--color-neutral-25);
     --footer-background-color: var(--color-neutral-25);
     --outline-color: var(--color-brand);
+
+    --logo-fill-color: var(--color-primary-800);
+    --code-color: var(--color-neutral-900);
+    --code-token-color: var(--color-slate-grey);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -110,6 +117,11 @@
         --hero-background-color: var(--color-neutral-800);
         --footer-background-color: var(--color-neutral-800);
         --outline-color: #fff;
+        --img-background-color: var(--color-neutral-300);
+
+        --logo-fill-color: #fff;
+        --code-color: var(--color-neutral-100);
+        --code-token-color: var(--color-cadet-grey);
     }
 }
 
@@ -132,6 +144,10 @@ html[data-theme="light"] {
     --footer-background-color: var(--color-neutral-25);
     --outline-color: var(--color-brand);
     --img-background-color: #fff;
+
+    --logo-fill-color: var(--color-primary-800);
+    --code-color: var(--color-neutral-900);
+    --code-token-color: var(--color-slate-grey);
 }
 
 html[data-theme="dark"] {
@@ -155,4 +171,8 @@ html[data-theme="dark"] {
     --footer-background-color: var(--color-neutral-800);
     --outline-color: #fff;
     --img-background-color: var(--color-neutral-300);
+
+    --logo-fill-color: #fff;
+    --code-color: var(--color-neutral-100);
+    --code-token-color: var(--color-cadet-grey);
 }