From 1b7329c5b64e9a629b5711bb6a0565d6ed4176f1 Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Mon, 16 Oct 2023 13:18:47 -0600 Subject: [PATCH] Rename plugins to integrations --- docs/scripts/update-readmes.js | 6 ++--- docs/src/components/DocsNav.astro | 23 ++++++++++++++++--- docs/src/docs-manifest.json | 14 +++++------ docs/src/layouts/docs.astro | 11 +++++++-- .../docs/{plugins => integrations}/css.md | 0 .../custom-plugins.md} | 0 docs/src/pages/docs/integrations/index.md | 18 +++++++++++++++ .../docs/{plugins => integrations}/js.md | 10 ++++++-- .../docs/{plugins => integrations}/sass.md | 2 +- .../style-dictionary.md | 0 .../{guides => integrations}/tokens-studio.md | 0 docs/src/pages/docs/plugins/index.md | 16 ------------- docs/src/pages/docs/tokens/index.astro | 4 +++- packages/plugin-css/README.md | 2 +- packages/plugin-js/README.md | 10 ++++++-- 15 files changed, 78 insertions(+), 38 deletions(-) rename docs/src/pages/docs/{plugins => integrations}/css.md (100%) rename docs/src/pages/docs/{guides/plugins.md => integrations/custom-plugins.md} (100%) create mode 100644 docs/src/pages/docs/integrations/index.md rename docs/src/pages/docs/{plugins => integrations}/js.md (85%) rename docs/src/pages/docs/{plugins => integrations}/sass.md (98%) rename docs/src/pages/docs/{guides => integrations}/style-dictionary.md (100%) rename docs/src/pages/docs/{guides => integrations}/tokens-studio.md (100%) delete mode 100644 docs/src/pages/docs/plugins/index.md diff --git a/docs/scripts/update-readmes.js b/docs/scripts/update-readmes.js index 82e129c3..0e9659b4 100644 --- a/docs/scripts/update-readmes.js +++ b/docs/scripts/update-readmes.js @@ -9,9 +9,9 @@ import {URL} from 'node:url'; const FRONTMATTER_RE = /^---/gm; const updates = { - '../../packages/plugin-css/README.md': '../src/pages/docs/plugins/css.md', - '../../packages/plugin-sass/README.md': '../src/pages/docs/plugins/sass.md', - '../../packages/plugin-js/README.md': '../src/pages/docs/plugins/js.md', + '../../packages/plugin-css/README.md': '../src/pages/docs/integrations/css.md', + '../../packages/plugin-sass/README.md': '../src/pages/docs/integrations/sass.md', + '../../packages/plugin-js/README.md': '../src/pages/docs/integrations/js.md', }; const urlRewrites = { diff --git a/docs/src/components/DocsNav.astro b/docs/src/components/DocsNav.astro index db884030..7613d246 100644 --- a/docs/src/components/DocsNav.astro +++ b/docs/src/components/DocsNav.astro @@ -17,11 +17,14 @@ function showSubPage(url) { @use '../../tokens' as *; .nav { + box-shadow: inset 1px 0 0 token('color.ui.contrast.10'); border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; font-size: token('font.size.04'); + height: max-content; margin-bottom: token('space.md'); + margin-left: auto; max-height: calc(100vh - #{token('space.layout.sm')}); min-width: token('space.layout.2xl'); padding-bottom: token('space.md'); @@ -37,14 +40,22 @@ function showSubPage(url) { .a { align-items: center; - color: token('color.ui.contrast.100'); + border-left: 1px solid token('color.ui.contrast.10'); + color: token('color.ui.contrast.70'); display: flex; - min-height: token('space.lg'); - padding-left: token('space.lg'); + min-height: token('space.xl'); + padding-left: token('space.sm'); position: relative; text-decoration: none; + &:hover { + border-left-color: token('color.ui.contrast.50'); + color: token('color.ui.contrast.80'); + } + &[aria-current='page'] { + background-color: color-mix(in oklab, #{token('color.ui.action')}, transparent 90%); + border-color: token('color.ui.action'); color: token('color.ui.action'); font-weight: 550; } @@ -56,7 +67,13 @@ function showSubPage(url) { } &--subpage { + border-left: none; margin-left: token('space.md'); + min-height: token('space.lg'); + + &[aria-current='page'] { + background: none; + } &::before { left: -0.875rem; diff --git a/docs/src/docs-manifest.json b/docs/src/docs-manifest.json index 7aec4801..ff15d11d 100644 --- a/docs/src/docs-manifest.json +++ b/docs/src/docs-manifest.json @@ -20,17 +20,17 @@ {"title": "Custom", "pathname": "/docs/tokens/#custom"}, {"title": "Aliasing", "pathname": "/docs/tokens/#aliasing"}, {"title": "Modes", "pathname": "/docs/tokens/#modes"}, + {"title": "Integrations", "pathname": "/docs/integrations"}, + {"title": "CSS", "pathname": "/docs/integrations/css"}, + {"title": "Sass", "pathname": "/docs/integrations/sass"}, + {"title": "JSON/JS/TS", "pathname": "/docs/integrations/js"}, + {"title": "Style Dictionary", "pathname": "/docs/integrations/style-dictionary"}, + {"title": "Tokens Studio", "pathname": "/docs/integrations/tokens-studio"}, + {"title": "Custom Plugins", "pathname": "/docs/integrations/custom-plugins"}, {"title": "Guides", "pathname": "/docs/guides"}, {"title": "What are Design Tokens?", "pathname": "/docs/guides/design-tokens"}, {"title": "Best Practices", "pathname": "/docs/guides/best-practices"}, {"title": "Modes", "pathname": "/docs/guides/modes"}, - {"title": "Style Dictionary", "pathname": "/docs/guides/style-dictionary"}, - {"title": "Tokens Studio", "pathname": "/docs/guides/tokens-studio"}, - {"title": "Custom Plugins", "pathname": "/docs/guides/plugins"}, - {"title": "Plugins", "pathname": "/docs/plugins"}, - {"title": "CSS", "pathname": "/docs/plugins/css"}, - {"title": "Sass", "pathname": "/docs/plugins/sass"}, - {"title": "JS/JSON/TS", "pathname": "/docs/plugins/js"}, {"title": "Reference", "pathname": "/docs/reference"}, {"title": "CLI", "pathname": "/docs/reference/cli"}, {"title": "Config API", "pathname": "/docs/reference/config"}, diff --git a/docs/src/layouts/docs.astro b/docs/src/layouts/docs.astro index bb541935..79ad9e25 100644 --- a/docs/src/layouts/docs.astro +++ b/docs/src/layouts/docs.astro @@ -8,7 +8,7 @@ import SkipToMain from '../components/SkipToMain.astro'; const {content = {}} = Astro.props; --- - + @@ -21,9 +21,16 @@ const {content = {}} = Astro.props; @media (min-width: 600px) { flex-direction: row; + gap: 2.5rem; padding-right: token('space.layout.2xl'); } } + + .content { + margin-right: auto; + max-width: 100%; + width: 65rem; + } @@ -31,7 +38,7 @@ const {content = {}} = Astro.props;