From e87a6a47c178fcfc52cbc2c553ffd4d6c9ced5e9 Mon Sep 17 00:00:00 2001 From: Kian Newman-Hazel Date: Thu, 27 Feb 2025 17:47:25 +0000 Subject: [PATCH] [Docs Site] Adopt new sidebar and breadcrumb styling --- astro.config.ts | 27 ++++---- src/components/overrides/Sidebar.astro | 12 +--- src/{ => styles}/asides.css | 0 src/{ => styles}/badges.css | 0 src/styles/breadcrumbs.css | 27 ++++++++ src/{ => styles}/code.css | 0 src/{ => styles}/footnotes.css | 0 src/{ => styles}/headings.css | 0 src/{ => styles}/input.css | 0 src/{ => styles}/mermaid.css | 0 src/styles/sidebar.css | 88 ++++++++++++++++++++++++++ src/{ => styles}/table.css | 0 src/{ => styles}/tailwind.css | 0 src/{ => styles}/title.css | 0 14 files changed, 133 insertions(+), 21 deletions(-) rename src/{ => styles}/asides.css (100%) rename src/{ => styles}/badges.css (100%) create mode 100644 src/styles/breadcrumbs.css rename src/{ => styles}/code.css (100%) rename src/{ => styles}/footnotes.css (100%) rename src/{ => styles}/headings.css (100%) rename src/{ => styles}/input.css (100%) rename src/{ => styles}/mermaid.css (100%) create mode 100644 src/styles/sidebar.css rename src/{ => styles}/table.css (100%) rename src/{ => styles}/tailwind.css (100%) rename src/{ => styles}/title.css (100%) diff --git a/astro.config.ts b/astro.config.ts index 3e59ae1d5edd96a..271a4ebf2e164b9 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -37,7 +37,21 @@ async function autogenSections() { }); } +async function autogenStyles() { + const styles = ( + await readdir("./src/styles/", { + withFileTypes: true, + recursive: true, + }) + ) + .filter((x) => x.isFile()) + .map((x) => x.parentPath + x.name); + + return styles; +} + const sidebar = await autogenSections(); +const customCss = await autogenStyles(); const runLinkCheck = process.env.RUN_LINK_CHECK || false; @@ -97,18 +111,7 @@ export default defineConfig({ TableOfContents: "./src/components/overrides/TableOfContents.astro", }, sidebar, - customCss: [ - "./src/asides.css", - "./src/badges.css", - "./src/code.css", - "./src/footnotes.css", - "./src/headings.css", - "./src/input.css", - "./src/mermaid.css", - "./src/table.css", - "./src/tailwind.css", - "./src/title.css", - ], + customCss, pagination: false, plugins: [ ...(runLinkCheck diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro index ca0a4555b7725ac..f78b635bce9c51b 100644 --- a/src/components/overrides/Sidebar.astro +++ b/src/components/overrides/Sidebar.astro @@ -8,15 +8,9 @@ import { lookupProductTitle } from "~/util/sidebar"; const [product, module] = Astro.url.pathname.split("/").filter(Boolean); --- - - - + + + {lookupProductTitle(product, module)} diff --git a/src/asides.css b/src/styles/asides.css similarity index 100% rename from src/asides.css rename to src/styles/asides.css diff --git a/src/badges.css b/src/styles/badges.css similarity index 100% rename from src/badges.css rename to src/styles/badges.css diff --git a/src/styles/breadcrumbs.css b/src/styles/breadcrumbs.css new file mode 100644 index 000000000000000..104ae7734d3d9d2 --- /dev/null +++ b/src/styles/breadcrumbs.css @@ -0,0 +1,27 @@ +.c-breadcrumbs { + --spacing-vertical-separator-breadcrumbs: 0.625rem; + + padding: 0.5rem 0; + + .c-breadcrumbs__link { + font-size: 0.75rem; + line-height: 1.25rem; + font-weight: 600; + } + + .c-breadcrumbs__separator { + color: theme("colors.cl1.brand.orange"); + } + + .c-breadcrumbs__truncated-button { + color: theme("colors.cl1.brand.orange"); + } +} + +:root[data-theme="dark"] { + --color-link-breadcrumbs: theme("colors.cl1.gray.7"); +} + +:root[data-theme="light"] { + --color-link-breadcrumbs: theme("colors.cl1.gray.4"); +} diff --git a/src/code.css b/src/styles/code.css similarity index 100% rename from src/code.css rename to src/styles/code.css diff --git a/src/footnotes.css b/src/styles/footnotes.css similarity index 100% rename from src/footnotes.css rename to src/styles/footnotes.css diff --git a/src/headings.css b/src/styles/headings.css similarity index 100% rename from src/headings.css rename to src/styles/headings.css diff --git a/src/input.css b/src/styles/input.css similarity index 100% rename from src/input.css rename to src/styles/input.css diff --git a/src/mermaid.css b/src/styles/mermaid.css similarity index 100% rename from src/mermaid.css rename to src/styles/mermaid.css diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css new file mode 100644 index 000000000000000..bb2144e01d77c77 --- /dev/null +++ b/src/styles/sidebar.css @@ -0,0 +1,88 @@ +.sidebar-content { + gap: 0.5rem; + padding: 1rem 1.5rem; + + .large { + font-weight: unset; + font-size: unset; + color: unset; + } + + [aria-current="page"] { + background-color: transparent !important; + font-weight: 500 !important; + color: var(--sl-color-sidebar-active) !important; + } + + .top-level > li { + & + li { + margin-top: 0.5rem; + } + + & > a, + & > details > summary { + font-size: 1rem; + font-weight: normal; + + background-color: transparent; + color: var(--sl-color-white); + + padding: 0.25rem 0.5rem; + + &:hover { + background-color: var(--sl-color-sidebar-hover); + border-radius: 0.25rem; + } + } + + & > details > ul { + --sl-sidebar-item-padding-inline: 0.5rem; + } + + ul { + --sl-sidebar-item-padding-inline: 0.75rem; + + margin-inline-start: var(--sl-sidebar-item-padding-inline); + border-inline-start: 1px solid var(--sl-color-hairline-light); + + margin-top: 0.5rem; + + li { + margin-inline-start: unset; + border-inline-start: unset; + padding-inline-start: unset; + + & + li { + margin-top: 0.375rem; + } + } + + a, + summary { + --sl-sidebar-item-padding-inline: 0.75rem; + + padding-top: 0.25rem; + padding-bottom: 0.25rem; + + font-size: 0.875rem; + color: var(--sl-color-text); + + &:hover { + background-color: var(--sl-color-sidebar-hover); + border-radius: 0; + } + } + } + } +} + +:root[data-theme="dark"] { + --sl-color-bg-sidebar: theme("colors.cl1.gray.0"); + --sl-color-sidebar-active: theme("colors.cl1.blue.7"); + --sl-color-sidebar-hover: theme("colors.cl1.gray.2"); +} + +:root[data-theme="light"] { + --sl-color-sidebar-active: theme("colors.cl1.blue.4"); + --sl-color-sidebar-hover: theme("colors.cl1.gray.9"); +} diff --git a/src/table.css b/src/styles/table.css similarity index 100% rename from src/table.css rename to src/styles/table.css diff --git a/src/tailwind.css b/src/styles/tailwind.css similarity index 100% rename from src/tailwind.css rename to src/styles/tailwind.css diff --git a/src/title.css b/src/styles/title.css similarity index 100% rename from src/title.css rename to src/styles/title.css