From 0c79bb1865c0c780491e13d90700e5b88707d941 Mon Sep 17 00:00:00 2001
From: "slackapi[bot]" <186980925+slackapi[bot]@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:32:11 -0800
Subject: [PATCH] Docs: Syncing config files with Deno Slack SDK and Slack CLI
 docs (#1228)

Co-authored-by: slackapi[bot] <186980925+slackapi[bot]@users.noreply.github.com>
---
 docs/navbarConfig.js    |   9 +-
 docs/src/css/custom.css | 299 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 272 insertions(+), 36 deletions(-)

diff --git a/docs/navbarConfig.js b/docs/navbarConfig.js
index d90e54ea..4e7260e4 100644
--- a/docs/navbarConfig.js
+++ b/docs/navbarConfig.js
@@ -49,15 +49,20 @@ const navbar = {
         },
         {
           label: 'Deno Slack SDK',
-          to: 'https://api.slack.com/automation/quickstart',
+          to: 'https://tools.slack.dev/deno-slack-sdk/',
           target: '_self',
         },
       ],
     },
+    {
+      to: 'https://tools.slack.dev/slack-cli',
+      label: 'Slack CLI',
+      target: '_self',
+    },
     {
       type: 'dropdown',
       label: 'Community',
-      position: 'left',
+      position: 'right',
       items: [
         {
           label: 'Community tools',
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 85adb353..ceb43f76 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,16 +1,64 @@
 :root {
+  --ifm-font-size-base: 15px;
+
   /* set hex colors here pls */
+  --dim: #eef2f6;
+
   --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-background: #552555;
+  --aubergine-dark: #2c0134;
+
   --aubergine-active: #7c3085;
-  /* horchata is that beige color we use a lot */
+  --aubergine-active-70: #7c308570;
+  --aubergine-active-50: #7c308550;
+  --aubergine-active-30: #7c308530;
+
   --horchata: #f4ede4;
-  /* cloud blue from slack.dev. used for dark-mode links */
+
+  --slack-red: #e3066a;
+  --slack-red-70: #e3066a70;
+  --slack-red-50: #e3066a50;
+  --slack-red-30: #e3066a30;
+  --slack-red-20: #e3066a20;
+
+  --slack-yellow: #fcc003;
+  --slack-yellow-70: #fcc00370;
+  --slack-yellow-50: #fcc00350;
+  --slack-yellow-30: #fcc00330;
+  --slack-yellow-20: #fcc00320;
+
+  --slack-green: #41b658;
+  --slack-green-70: #41b65870;
+  --slack-green-50: #41b65850;
+  --slack-green-30: #41b65830;
+  --slack-green-20: #41b65820;
+
+  --slack-blue: #1ab9ff;
+  --slack-blue-70: #1ab9ff70;
+  --slack-blue-50: #1ab9ff70;
+  --slack-blue-30: #1ab9ff30;
+  --slack-blue-20: #1ab9ff20;
+
+  /* used for dark-mode links */
   --slack-cloud-blue: #1ab9ff;
-  /* slack marketing color for links 1264A3. used for light-mode links */
+  /* slack marketing color used for light-mode links */
   --slack-dark-blue: #1264a3;
-  --dim: #eef2f6;
+
+  /* used for functions */
+  --unofficial-orange: #e36606;
+  --unofficial-orange-70: #e3660670;
+  --unofficial-orange-50: #e3660650;
+  --unofficial-orange-30: #e3660630;
+
+  /* turns opacity into flat colors for bubbles on top of things */
+  --slack-yellow-70-flat: #fcc00370;
+
+  --slack-yellow-30-on-white: #feecb3;
+  --slack-green-30-on-white: #c6e9cc;
+  --slack-red-30-on-white: #f6b4d2;
+  --slack-blue-30-on-white: #baeaff;
+  --unofficial-orange-30-on-white: #f6d1b4;
+  --aubergine-active-30-on-white: #d7c0da;
 }
 
 /* resets striped tables that hurt me eyes */
@@ -18,9 +66,20 @@ table tr:nth-child(even) {
   background-color: inherit;
 }
 
+h1 {
+  font-size: 2.5rem;
+}
+
 /* changing the links to blue for accessibility  */
-p a, .markdown a {
+p a,
+.markdown a {
   color: var(--slack-cloud-blue);
+  text-decoration: none;
+}
+
+p a,
+.markdown a:hover {
+  text-decoration: underline;
 }
 
 a:hover {
@@ -31,10 +90,9 @@ a:hover {
 [data-theme="light"] {
   --docusaurus-highlighted-code-line-bg: var(--dim);
   --ifm-color-primary: var(--aubergine-active);
-  --ifm-footer-background-color: var(--horchata);
-  --ifm-footer-color: black;
+  --ifm-footer-background-color: white;
   --slack-cloud-blue: var(--slack-dark-blue);
-  --ifm-table-stripe-background: var(--horchata);
+  --reference-section-color: var(--horchata);
 }
 
 [data-theme="dark"] {
@@ -45,6 +103,46 @@ a:hover {
   --ifm-footer-color: white;
 }
 
+.alert--warning {
+  --ifm-alert-background-color: var(--slack-yellow-30);
+  --ifm-alert-border-color: var(--slack-yellow);
+  --ifm-alert-background-color-highlight: var(--slack-yellow-30);
+}
+
+.alert--info {
+  --ifm-alert-background-color: var(--slack-blue-30);
+  --ifm-alert-border-color: var(--slack-blue);
+  /* --ifm-alert-background-color-highlight: var(--slack-blue-30); */
+}
+
+.alert--danger {
+  --ifm-alert-background-color: var(--slack-red-30);
+  --ifm-alert-border-color: var(--slack-red);
+}
+
+.alert--success {
+  --ifm-alert-background-color: var(--slack-green-30);
+  --ifm-alert-border-color: var(--slack-green);
+}
+
+.footer {
+  font-size: 80%;
+  padding-bottom: 0rem;
+}
+
+.footer__items a {
+  color: inherit;
+}
+
+.footer .container {
+  margin: 0;
+}
+
+/* adjusting size */
+.table-of-contents__link {
+  font-size: 1rem;
+}
+
 /* bolding ToC for contrast */
 .table-of-contents__link--active {
   font-weight: bold;
@@ -53,19 +151,38 @@ a:hover {
 /* removing ToC line */
 .table-of-contents__left-border {
   border-left: none !important;
-} 
+}
 
-/* increasing name of SDK in sidebar */
+/* increasing name of site in sidebar */
 .sidebar-title {
-  font-size: 1.25em; /* Adjust the size as needed */
+  /* padding-bottom: 0.5rem;
+  font-size: 1.25em;  */
   font-weight: bold;
-  color: #000;
+}
+
+.theme-doc-sidebar-item-link hr {
+  margin: 1rem;
+}
+
+.sidebar-sdk-title {
+  /* margin: 0.5rem 0; */
+  padding: 0.5rem;
+  /* border-radius: 4px; */
+  border-bottom: .5px solid grey;
+}
+
+.theme-doc-sidebar-item-category-level-1 .menu__link {
+  font-weight: bold;
+}
+
+.theme-doc-sidebar-item-category-level-1 .menu__list-item .menu__link {
+  font-weight: normal;
 }
 
 /* removing sidebar line and adding space to match ToC */
 .theme-doc-sidebar-container {
-    border-right: none !important;
-    margin-right: 2rem;
+  border-right: none !important;
+  margin-right: 2rem;
 }
 
 /* announcement bar up top */
@@ -105,53 +222,167 @@ html[data-theme="dark"] .navbar-github-link::before {
 
 /* 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 */
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: 5px;
+  padding: 0.5em;
 }
 
 /* Docs code bubbles */
 [data-theme="light"] {
-  --code-link-background: #CFE9FE; 
-  --code-link-text:  rgb(21, 50, 59);
+  --contrast-color: black;
+  --code-link-background: var(--slack-blue-30);
+  --code-link-text: rgb(21, 50, 59);
 
-  --method-link-background: #CDEFC4;
+  --method-link-background: var(--slack-green-30-on-white);
   --method-link-text: rgb(0, 41, 0);
 
-  --scope-link-background: #FBF3E0; 
+  --scope-link-background: var(--slack-yellow-30-on-white);
   --scope-link-text: rgb(63, 46, 0);
 
-  --event-link-background: #FDDDE3;
-  --event-link-text:  rgb(74, 21, 75);
+  --event-link-background: var(--slack-red-30-on-white);
+  --event-link-text: rgb(63, 0, 24);
+
+  --function-link-background: var(--unofficial-orange-30-on-white);
+  --function-link-text: rgb(75, 35, 0);
+
+  --command-link-background: var(--aubergine-active-30-on-white);
+  --command-link-text: rgb(75, 0, 75);
 }
 
 [data-theme="dark"] {
+  --contrast-color: white;
   --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;
+  --function-link-text: white;
+  --command-link-text: white;
+
+  --code-link-background: var(--slack-blue-70);
+  --method-link-background: var(--slack-green-70);
+  --scope-link-background: var(--slack-yellow-70);
+  --event-link-background: var(--slack-red-70);
+  --command-link-background: var(--aubergine-active);
+  --function-link-background: var(--unofficial-orange-70);
 }
 
 a code {
   background-color: var(--code-link-background);
-  color:  var(--code-link-text);
+  color: var(--code-link-text);
 }
 
 a[href^="https://api.slack.com/methods"] > code {
   background-color: var(--method-link-background);
-  color:  var(--method-link-text);
+  color: var(--method-link-text);
 }
 
 a[href^="https://api.slack.com/scopes"] > code {
   background-color: var(--scope-link-background);
-  color:  var(--scope-link-text);
+  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
+  color: var(--event-link-text);
+}
+
+a[href^="/deno-slack-sdk/reference/slack-functions/"] > code {
+  background-color: var(--function-link-background);
+  color: var(--function-link-text);
+}
+
+a[href^="/deno-slack-sdk/reference/connector-functions/"] > code {
+  background-color: var(--function-link-background);
+  color: var(--function-link-text);
+}
+
+a[href^="/slack-cli/reference/commands"] > code {
+  background-color: var(--command-link-background);
+  color: var(--command-link-text);
+}
+
+.facts-section {
+  background-color: var(--slack-green-20) !important;
+}
+
+.auth-section {
+  background-color: var(--slack-red-20) !important;
+}
+
+.inputs-section {
+  background-color: var(--slack-blue-20) !important;
+}
+
+.functions-section {
+  border-radius: 6px;
+  padding: 1rem;
+  margin-bottom: 2rem;
+}
+
+.scope-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.scope-item {
+  display: inline-block;
+}
+
+.functions-section .type {
+  text-align: right;
+}
+
+.param-required-section {
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.param-container {
+  border-top: 0.5px solid;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.param-container:last-child {
+  padding-bottom: 0;
+}
+
+.param-top-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+/* left-align param name */
+.param-top-row .name {
+  flex: 1;
+}
+
+/* right-align Required and Type */
+.param-top-row .required,
+.param-top-row .type {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* add space between Required and Type */
+.param-top-row .required {
+  margin-left: 10px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.info-key {
+  flex: 0 0 10rem;
+  align-items: center;
+}
+
+/* hides next and previous */
+.pagination-nav__link {
+  display: none;
+}