diff --git a/docs/site/eleventy.config.js b/docs/site/eleventy.config.js index ec14e8c9..271daf4d 100644 --- a/docs/site/eleventy.config.js +++ b/docs/site/eleventy.config.js @@ -36,7 +36,7 @@ export default async function (eleventyConfig) { eleventyConfig.addGlobalData("siteDescription", siteDescription); eleventyConfig.addGlobalData("navigation", navigation); - eleventyConfig.addPassthroughCopy({ "public/favicon.png": "favicon.png" }); + eleventyConfig.addPassthroughCopy({ "public/favicon.svg": "favicon.svg" }); eleventyConfig.addPassthroughCopy({ "public/adobe_logo.svg": "adobe_logo.svg", }); diff --git a/docs/site/public/adobe_logo.svg b/docs/site/public/adobe_logo.svg index 2ad05c8c..13c02029 100644 --- a/docs/site/public/adobe_logo.svg +++ b/docs/site/public/adobe_logo.svg @@ -1,13 +1,8 @@ - - + - - - - - + diff --git a/docs/site/public/favicon.svg b/docs/site/public/favicon.svg new file mode 100644 index 00000000..508b2e2f --- /dev/null +++ b/docs/site/public/favicon.svg @@ -0,0 +1 @@ + diff --git a/docs/site/src/assets/css/base/index.css b/docs/site/src/assets/css/base/index.css index b180a660..4a8c738f 100644 --- a/docs/site/src/assets/css/base/index.css +++ b/docs/site/src/assets/css/base/index.css @@ -78,18 +78,26 @@ header { gap: var(--spacing-default); } -header a:has(h1) { +header .logo-link { + display: flex; + align-items: center; + gap: 12px; text-decoration: none; + height: 24px; } -header h1 { - display: flex; - gap: var(--spacing-default); - font-weight: 700 !important; +header .adobe-logo { + height: 24px; + width: auto; } -header h1 img { - height: var(--sizing-large); +header .site-name { + font-size: var(--site-header-title-size); + font-weight: var(--spectrum-extra-bold-font-weight); + font-synthesis-weight: none; + line-height: var(--spectrum-heading-line-height); + color: var(--spectrum-heading-color); + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); } @media screen and (max-width: 768px) { @@ -194,3 +202,40 @@ footer p:not(.footer-label) { height: var(--sizing-default); } +/* Apply Spectrum heading typography to body headings */ +article h1, +article h2, +article h3, +article h4, +article h5, +article h6 { + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); + font-weight: var(--spectrum-heading-sans-serif-font-weight); + line-height: var(--spectrum-heading-line-height); + color: var(--spectrum-heading-color); +} + +article h1 { + font-size: var(--spectrum-heading-size-xxl); +} + +article h2 { + font-size: var(--spectrum-heading-size-xl); +} + +article h3 { + font-size: var(--spectrum-heading-size-l); +} + +article h4 { + font-size: var(--spectrum-heading-size-m); +} + +article h5 { + font-size: var(--spectrum-heading-size-s); +} + +article h6 { + font-size: var(--spectrum-heading-size-xs); +} + diff --git a/docs/site/src/assets/css/base/reset.css b/docs/site/src/assets/css/base/reset.css index 2eee964d..1463d0e0 100644 --- a/docs/site/src/assets/css/base/reset.css +++ b/docs/site/src/assets/css/base/reset.css @@ -48,7 +48,7 @@ governing permissions and limitations under the License. :where(body) { line-height: inherit; - font-family: system-ui, sans-serif; + font-family: adobe-clean-spectrum-vf, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } diff --git a/docs/site/src/assets/css/base/vars.css b/docs/site/src/assets/css/base/vars.css index 6fdfc594..44d1bad9 100644 --- a/docs/site/src/assets/css/base/vars.css +++ b/docs/site/src/assets/css/base/vars.css @@ -19,4 +19,14 @@ governing permissions and limitations under the License. --sizing-default: var(--spectrum-spacing-300); --sizing-large: var(--spectrum-spacing-500); + + /* Override Spectrum CSS tokens to use adobe-clean-spectrum-vf variable font */ + --spectrum-sans-serif-font-family: adobe-clean-spectrum-vf; + --spectrum-sans-font-family-stack: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --mod-body-sans-serif-font-family: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --mod-heading-sans-serif-font-family: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + /* Custom site-specific tokens */ + --site-header-title-size: 20px; } diff --git a/docs/site/src/includes/layout/header.liquid b/docs/site/src/includes/layout/header.liquid index 3a244508..ed58e65b 100644 --- a/docs/site/src/includes/layout/header.liquid +++ b/docs/site/src/includes/layout/header.liquid @@ -11,11 +11,9 @@ governing permissions and limitations under the License. -->
- -

- Adobe logo - Spectrum Design Data -

+ + + Spectrum Design Data
  • Components
    • diff --git a/docs/site/src/layouts/base.liquid b/docs/site/src/layouts/base.liquid index 682529d8..80c0122b 100644 --- a/docs/site/src/layouts/base.liquid +++ b/docs/site/src/layouts/base.liquid @@ -8,9 +8,8 @@ {% if title %}{{ title }} | {% endif %}{{ siteName }} - - - + +