diff --git a/docs/footerConfig.js b/docs/footerConfig.js index e3e10c571..ce1013fcb 100644 --- a/docs/footerConfig.js +++ b/docs/footerConfig.js @@ -16,4 +16,4 @@ const footer = { ], }; -module.exports = footer; +module.exports = footer; \ No newline at end of file diff --git a/docs/navbarConfig.js b/docs/navbarConfig.js index f4277367a..fef179106 100644 --- a/docs/navbarConfig.js +++ b/docs/navbarConfig.js @@ -1,88 +1,89 @@ const navbar = { - title: 'Slack Developer Tools', - logo: { - src: 'img/slack-logo.svg', - }, - items: [ - { - type: 'dropdown', - label: 'Bolt', - position: 'left', - items: [ - { - label: 'Java', - to: 'https://tools.slack.dev/java-slack-sdk/guides/bolt-basics', - target: '_self', - }, - { - label: 'JavaScript', - to: 'https://tools.slack.dev/bolt-js', - target: '_self', - }, - { - label: 'Python', - to: 'https://tools.slack.dev/bolt-python', - target: '_self', - }, - ], - }, - { - type: 'dropdown', - label: 'SDKs', - position: 'left', - items: [ - { - label: 'Java Slack SDK', - to: 'https://tools.slack.dev/java-slack-sdk/', - target: '_self', - }, - { - label: 'Node Slack SDK', - to: 'https://tools.slack.dev/node-slack-sdk/', - target: '_self', - }, - { - label: 'Python Slack SDK', - to: 'https://tools.slack.dev/python-slack-sdk/', - target: '_self', - }, - { - label: 'Deno Slack SDK', - to: 'https://api.slack.com/automation/quickstart', - target: '_self', - }, - ], - }, - { - type: 'dropdown', - label: 'Community', - position: 'left', - items: [ - { - label: 'Community tools', - to: 'https://tools.slack.dev/community-tools', - target: '_self', - }, - { - label: 'Slack Community', - to: 'https://slackcommunity.com/', - target: '_self', - }, - ], - }, - { - to: 'https://api.slack.com/docs', - label: 'API Docs', - target: '_self', - }, - { - 'aria-label': 'GitHub Repository', - className: 'navbar-github-link', - href: 'https://github.com/slackapi', - position: 'right', - target: '_self', - }, - ], + title: "Slack Developer Tools", + logo: { + src: "img/slack-logo.svg", + href: 'https://tools.slack.dev', + }, + items: [ + { + type: "dropdown", + label: "Bolt", + position: "left", + items: [ + { + label: "Java", + to: "https://tools.slack.dev/java-slack-sdk/guides/bolt-basics", + target: "_self", + }, + { + label: "JavaScript", + to: "https://tools.slack.dev/bolt-js", + target: "_self", + }, + { + label: "Python", + to: "https://tools.slack.dev/bolt-python", + target: "_self", + }, + ], + }, + { + type: "dropdown", + label: "SDKs", + position: "left", + items: [ + { + label: "Java Slack SDK", + to: "https://tools.slack.dev/java-slack-sdk/", + target: "_self", + }, + { + label: "Node Slack SDK", + to: "https://tools.slack.dev/node-slack-sdk/", + target: "_self", + }, + { + label: "Python Slack SDK", + to: "https://tools.slack.dev/python-slack-sdk/", + target: "_self", + }, + { + label: "Deno Slack SDK", + to: "https://api.slack.com/automation/quickstart", + target: "_self", + }, + ], + }, + { + type: "dropdown", + label: "Community", + position: "left", + items: [ + { + label: "Community tools", + to: "https://tools.slack.dev/community-tools", + target: "_self", + }, + { + label: "Slack Community", + to: "https://slackcommunity.com/", + target: "_self", + }, + ], + }, + { + to: "https://api.slack.com/docs", + label: "API Docs", + target: "_self", + }, + { + "aria-label": "GitHub Repository", + className: "navbar-github-link", + href: "https://github.com/slackapi", + position: "right", + target: "_self", + }, + ], }; -module.exports = navbar; +module.exports = navbar; \ No newline at end of file diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index cb5aecb9d..ae752caeb 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,60 @@ 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); + --slack-cloud-blue: var(--slack-dark-blue); --ifm-color-primary: var(--aubergine-active); --ifm-footer-background-color: var(--horchata); - --slack-link: var(--slack-dark-blue) + --ifm-footer-color: black; + --ifm-table-stripe-background: var(--horchata); + footer a { + color: black; + } } [data-theme="dark"] { - --ifm-color-primary: var(--aubergine-light); + --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%); + --ifm-color-primary: var(--slack-cloud-blue); --ifm-navbar-background-color: var(--aubergine); - --ifm-footer-background-color: var(--aubergine); - --slack-link: var(--slack-blue) + --ifm-footer-background-color: var(--aubergine) !important; + footer a { + color: white; + } } -html[data-theme="dark"] { - --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%); +/* bolding ToC for contrast */ +.table-of-contents__link--active { + font-weight: bold; } -/* bolding Toc for contrast */ -.table-of-contents__link--active { +/* 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; } -/* only uncomment for home page -- colors white space on v tall screens */ -/* .main-wrapper { - background: var(--horchata); -} */ +/* 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 +80,7 @@ div[class^="announcementBar_"] { background: var(--horchata); } -/* navbar */ - +/* navbar github link */ .navbar-github-link { width: 32px; height: 32px; @@ -106,8 +108,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