From 45bdb8d11e44f4b5bf4c8e02758c5090197ca3db Mon Sep 17 00:00:00 2001
From: "slackapi[bot]" <186980925+slackapi[bot]@users.noreply.github.com>
Date: Fri, 1 Nov 2024 17:20:11 -0700
Subject: [PATCH] Docs: CSS fixes and their propagations (#2091)

Co-authored-by: slackapi[bot] <186980925+slackapi[bot]@users.noreply.github.com>
Co-authored-by: @zimeg <zim@o526.net>
---
 docs/navbarConfig.js    |   1 +
 docs/src/css/custom.css | 130 +++++++++++++++++++++++++++-------------
 2 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/docs/navbarConfig.js b/docs/navbarConfig.js
index f4277367a..e9deaab7d 100644
--- a/docs/navbarConfig.js
+++ b/docs/navbarConfig.js
@@ -2,6 +2,7 @@ const navbar = {
   title: 'Slack Developer Tools',
   logo: {
     src: 'img/slack-logo.svg',
+    href: 'https://tools.slack.dev',
   },
   items: [
     {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index cb5aecb9d..85adb3538 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,31 +1,16 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
- :root {
+:root {
   /* set hex colors here pls */
   --aubergine: #4a154b;
-
   /* aubergine-active is used in light mode. 
   use something like #853c8c if you use as a link vs black text ( 3:1 contr) */
   --aubergine-active: #7c3085;
-
-  /* aubergine-light is used in dark mode. #b681b5 is another one. i just made both up */
-  --aubergine-light: #ce70cc;
-
   /* horchata is that beige color we use a lot */
   --horchata: #f4ede4;
-
-  /* slack-blue is 36C5F0. used for dark-mode links */
-  --slack-link: #36c5f0;
-  --slack-blue: #36c5f0;
+  /* cloud blue from slack.dev. used for dark-mode links */
+  --slack-cloud-blue: #1ab9ff;
   /* slack marketing color for links 1264A3. used for light-mode links */
   --slack-dark-blue: #1264a3;
-
-  --grey: #868686;
-  --white: #FFFFFF;
+  --dim: #eef2f6;
 }
 
 /* resets striped tables that hurt me eyes */
@@ -33,42 +18,55 @@ table tr:nth-child(even) {
   background-color: inherit;
 }
 
-p a {
-  text-decoration: underline;
+/* changing the links to blue for accessibility  */
+p a, .markdown a {
+  color: var(--slack-cloud-blue);
 }
 
-.markdown a {
-  color: var(--slack-link);
-  text-decoration: underline;
+a:hover {
+  color: var(--slack-cloud-blue);
 }
 
 /* adjusting for light and dark modes */
 [data-theme="light"] {
+  --docusaurus-highlighted-code-line-bg: var(--dim);
   --ifm-color-primary: var(--aubergine-active);
   --ifm-footer-background-color: var(--horchata);
-  --slack-link: var(--slack-dark-blue)
+  --ifm-footer-color: black;
+  --slack-cloud-blue: var(--slack-dark-blue);
+  --ifm-table-stripe-background: var(--horchata);
 }
 
 [data-theme="dark"] {
-  --ifm-color-primary: var(--aubergine-light);
-  --ifm-navbar-background-color: var(--aubergine);
-  --ifm-footer-background-color: var(--aubergine);
-  --slack-link: var(--slack-blue)
-}
-
-html[data-theme="dark"] {
   --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
+  --ifm-color-primary: var(--slack-cloud-blue);
+  --ifm-navbar-background-color: var(--aubergine) !important;
+  --ifm-footer-background-color: var(--aubergine) !important;
+  --ifm-footer-color: white;
 }
 
-/* bolding Toc for contrast */
+/* bolding ToC for contrast */
 .table-of-contents__link--active {
   font-weight: bold;
 }
 
-/* only uncomment for home page -- colors white space on v tall screens */
-/* .main-wrapper {
-  background: var(--horchata);
-} */
+/* removing ToC line */
+.table-of-contents__left-border {
+  border-left: none !important;
+} 
+
+/* increasing name of SDK in sidebar */
+.sidebar-title {
+  font-size: 1.25em; /* Adjust the size as needed */
+  font-weight: bold;
+  color: #000;
+}
+
+/* removing sidebar line and adding space to match ToC */
+.theme-doc-sidebar-container {
+    border-right: none !important;
+    margin-right: 2rem;
+}
 
 /* announcement bar up top */
 div[class^="announcementBar_"] {
@@ -77,8 +75,7 @@ div[class^="announcementBar_"] {
   background: var(--horchata);
 }
 
-/* navbar */
-
+/* navbar github link */
 .navbar-github-link {
   width: 32px;
   height: 32px;
@@ -106,8 +103,55 @@ html[data-theme="dark"] .navbar-github-link::before {
     no-repeat;
 }
 
-.sidebar-title {
-  font-size: 1.25em; /* Adjust the size as needed */
-  font-weight: bold;
-  color: #000;
+/* Delineate tab blocks */
+.tabs-container {
+  border: 1px solid var(--ifm-color-primary); /* Adjust the color and thickness as needed */
+  border-radius: 5px; /* To give rounded corners */
+  padding: 0.5em; /* To add spacing inside the tab */
+}
+
+/* Docs code bubbles */
+[data-theme="light"] {
+  --code-link-background: #CFE9FE; 
+  --code-link-text:  rgb(21, 50, 59);
+
+  --method-link-background: #CDEFC4;
+  --method-link-text: rgb(0, 41, 0);
+
+  --scope-link-background: #FBF3E0; 
+  --scope-link-text: rgb(63, 46, 0);
+
+  --event-link-background: #FDDDE3;
+  --event-link-text:  rgb(74, 21, 75);
+}
+
+[data-theme="dark"] {
+  --code-link-text: white;
+  --method-link-text: white;
+  --scope-link-text: white;
+  --event-link-text: white;
+  --code-link-background: #1AB9FF50;
+  --method-link-background: #41B65850;
+  --scope-link-background: #FCC00350;
+  --event-link-background: #E3066A50;
+}
+
+a code {
+  background-color: var(--code-link-background);
+  color:  var(--code-link-text);
+}
+
+a[href^="https://api.slack.com/methods"] > code {
+  background-color: var(--method-link-background);
+  color:  var(--method-link-text);
+}
+
+a[href^="https://api.slack.com/scopes"] > code {
+  background-color: var(--scope-link-background);
+  color:  var(--scope-link-text);
+}
+
+a[href^="https://api.slack.com/events"] > code {
+  background-color: var(--event-link-background);
+  color:  var(--event-link-text);
 }
\ No newline at end of file