From dfceebdfba36cd53cfed10ab465988ec14d36f42 Mon Sep 17 00:00:00 2001 From: garthdb Date: Fri, 13 Feb 2026 16:12:54 -0700 Subject: [PATCH 1/2] feat(site): integrate Adobe Clean Spectrum VF font - Switch from Typekit JavaScript kit to CSS kit (flz1ovt) - Add adobe-clean-spectrum-vf to font-family stack - Remove preconnect (not needed with CSS kit) - Ensures Adobe Clean Spectrum variable font loads on site Co-authored-by: Cursor --- docs/site/src/assets/css/base/reset.css | 2 +- docs/site/src/layouts/base.liquid | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) 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/layouts/base.liquid b/docs/site/src/layouts/base.liquid index 682529d8..65d557dd 100644 --- a/docs/site/src/layouts/base.liquid +++ b/docs/site/src/layouts/base.liquid @@ -8,8 +8,7 @@ {% if title %}{{ title }} | {% endif %}{{ siteName }} - - + From ea81a7a34775b26009de6a49fb423586f30fc30f Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Fri, 13 Feb 2026 16:57:40 -0700 Subject: [PATCH 2/2] feat(site): enhance UI to match React Spectrum design system Update the docs site to align with React Spectrum's visual design for better consistency across Adobe Spectrum documentation. This includes proper font integration, modern header layout, and updated branding. Changes: - Integrate adobe-clean-spectrum-vf variable font using Spectrum CSS mod tokens - Redesign header to match React Spectrum's horizontal logo layout - Apply Spectrum typography classes to article headings (h1-h6) - Update Adobe logo SVG with correct path and #eb1000 color - Replace PNG favicon with SVG version matching React Spectrum - Use --spectrum-extra-bold-font-weight (800) for site title Co-authored-by: Cursor --- docs/site/eleventy.config.js | 2 +- docs/site/public/adobe_logo.svg | 13 ++--- docs/site/public/favicon.svg | 1 + docs/site/src/assets/css/base/index.css | 59 ++++++++++++++++++--- docs/site/src/assets/css/base/vars.css | 10 ++++ docs/site/src/includes/layout/header.liquid | 8 ++- docs/site/src/layouts/base.liquid | 2 +- 7 files changed, 72 insertions(+), 23 deletions(-) create mode 100644 docs/site/public/favicon.svg 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/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 65d557dd..80c0122b 100644 --- a/docs/site/src/layouts/base.liquid +++ b/docs/site/src/layouts/base.liquid @@ -9,7 +9,7 @@ {% if title %}{{ title }} | {% endif %}{{ siteName }} - +