From ad47a40d6b6b3541b7604ccef7764d9269c75fc8 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 10 Mar 2022 00:53:06 -0800
Subject: [PATCH 01/12] Remove Hero Image from symbol pages

Remove Hero Image from symbol pages
---
 .../DocumentationTopic/DocumentationHero.vue  | 23 ++++++++++++++++---
 src/components/DocumentationTopic/Title.vue   |  1 -
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index e834eee8a..b743f279c 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -9,9 +9,15 @@
 -->
 
 <template>
-  <div class="documentation-hero" :style="styles">
-    <NavigatorLeafIcon :type="type" key="first" class="background-icon first-icon" with-colors />
-    <NavigatorLeafIcon :type="type" key="second" class="background-icon second-icon" with-colors />
+  <div :class=heroClass :style="styles">
+    <NavigatorLeafIcon
+      v-if="enableHero" :type="type"
+      key="first" class="background-icon first-icon" with-colors
+    />
+    <NavigatorLeafIcon
+      v-if="enableHero" :type="type"
+      key="second" class="background-icon second-icon" with-colors
+    />
     <div class="documentation-hero__content">
       <slot />
     </div>
@@ -39,6 +45,8 @@ export default {
       // use the color or fallback to the gray secondary, if not defined.
       '--accent-color': `var(--color-type-icon-${color}, var(--color-figure-gray-secondary))`,
     }),
+    enableHero: ({ type }) => (!(type === 'symbol' || type === 'protocol')),
+    heroClass: ({ enableHero }) => (enableHero ? 'documentation-hero' : 'documentation-hero-disabled'),
   },
 };
 </script>
@@ -51,6 +59,15 @@ $doc-hero-overlay-background: transparent !default;
 $doc-hero-icon-opacity: 1 !default;
 $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
+.documentation-hero-disabled {
+  color: var(--colors-secondary-label, var(--color-secondary-label));
+  overflow: hidden;
+  text-align: center;
+  padding-top: rem(40px);
+  padding-bottom: 40px;
+  position: relative;
+}
+
 .documentation-hero {
   background: dark-color(fill);
   color: light-color(fill);
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue
index d0a1e31c3..db4230533 100644
--- a/src/components/DocumentationTopic/Title.vue
+++ b/src/components/DocumentationTopic/Title.vue
@@ -35,7 +35,6 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: light-color(fill-gray-tertiary);
   display: block;
   margin-bottom: rem(20px);
 }

From 5536472327c89681a57541abcd85a3425dc46239 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 10 Mar 2022 15:46:31 -0800
Subject: [PATCH 02/12] Fix title color with hero removed

Fix title color with hero removed and fix extra border
---
 src/components/DocumentationTopic.vue         | 21 +++++++++++++++++--
 .../DocumentationTopic/DocumentationHero.vue  | 12 ++++++++---
 .../DocumentationTopic/PrimaryContent.vue     |  2 +-
 src/components/DocumentationTopic/Title.vue   |  3 ++-
 src/styles/core/_breakpoints.scss             |  1 +
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 33167ca77..afbe4656c 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -11,9 +11,9 @@
 <template>
   <div class="doc-topic">
     <main class="main" id="main" role="main" tabindex="0">
-      <DocumentationHero :type="symbolKind || role">
+      <DocumentationHero :type="symbolKind || role" :enableHero="enableHero">
         <slot name="above-title" />
-        <Title :eyebrow="roleHeading">{{ title }}</Title>
+        <Title :eyebrow="roleHeading" :style=heroTitleStyle>{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
       </DocumentationHero>
       <div class="container content-grid" :class="{ 'full-width': hideSummary }">
@@ -54,6 +54,7 @@
           v-if="primaryContentSections && primaryContentSections.length"
           :conformance="conformance"
           :sections="primaryContentSections"
+          :style="borderWidth"
         />
       </div>
       <Topics
@@ -300,6 +301,22 @@ export default {
     ),
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
+    enableHero: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
+    heroTitleStyle({ enableHero }) {
+      return enableHero ? {
+        '--hero-eyebrow': 'light-color(figure-gray-secondary)',
+        '--hero-title': 'light-color(fill)',
+      } : {
+        '--hero-eyebrow': 'var(--colors-secondary-label,var(--color-secondary-label))',
+      };
+    },
+    borderWidth({ enableHero }) {
+      return enableHero ? {
+        '--border-width': '0px',
+      } : {
+        '--border-width': '1px',
+      };
+    },
   },
   methods: {
     normalizePath(path) {
diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index 3907ce6ed..c063c03ac 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -37,6 +37,10 @@ export default {
       type: String,
       required: true,
     },
+    enableHero: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     // get the alias, if any, and fallback to the `teal` color
@@ -45,7 +49,6 @@ export default {
       // use the color or fallback to the gray secondary, if not defined.
       '--accent-color': `var(--color-type-icon-${color}, var(--color-figure-gray-secondary))`,
     }),
-    enableHero: ({ type }) => (!(type === 'symbol' || type === 'protocol')),
     heroClass: ({ enableHero }) => (enableHero ? 'documentation-hero' : 'documentation-hero-disabled'),
   },
 };
@@ -60,12 +63,15 @@ $doc-hero-icon-opacity: 1 !default;
 $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
 .documentation-hero-disabled {
-  color: var(--colors-secondary-label, var(--color-secondary-label));
   overflow: hidden;
-  text-align: center;
+  text-align: left;
   padding-top: rem(40px);
   padding-bottom: 40px;
   position: relative;
+
+  @include breakpoint(small) {
+    text-align: center;
+  }
 }
 
 .documentation-hero {
diff --git a/src/components/DocumentationTopic/PrimaryContent.vue b/src/components/DocumentationTopic/PrimaryContent.vue
index 116224c34..fb88974f3 100644
--- a/src/components/DocumentationTopic/PrimaryContent.vue
+++ b/src/components/DocumentationTopic/PrimaryContent.vue
@@ -153,7 +153,7 @@ export default {
   &::before {
     border-top-color: var(--colors-grid, var(--color-grid));
     border-top-style: solid;
-    border-top-width: 1px;
+    border-top-width: var(--border-width);
     content: '';
     display: block;
   }
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue
index db4230533..6d8f3f435 100644
--- a/src/components/DocumentationTopic/Title.vue
+++ b/src/components/DocumentationTopic/Title.vue
@@ -35,13 +35,14 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
+  color: var(--hero-eyebrow);
   display: block;
   margin-bottom: rem(20px);
 }
 
 .title {
   @include font-styles(headline-reduced);
-  color: light-color(fill);
+  color: var(--hero-title);
   margin-bottom: rem(12px);
 }
 </style>
diff --git a/src/styles/core/_breakpoints.scss b/src/styles/core/_breakpoints.scss
index 8dd1a214b..7503c59cc 100644
--- a/src/styles/core/_breakpoints.scss
+++ b/src/styles/core/_breakpoints.scss
@@ -329,6 +329,7 @@ $breakpoint-attributes: (
     min-width: map-deep-get($breakpoint-attributes, (default, small, min-width));
     margin-left: auto;
     margin-right: auto;
+    margin-top: 0;
     padding: 0 20px;
     box-sizing: border-box;
 

From 70e7dbf67ef6277df463ad0efbf6680320684377 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 10 Mar 2022 16:01:17 -0800
Subject: [PATCH 03/12] fix tests

fix tests
---
 .../components/DocumentationTopic.spec.js     | 25 ++++++++++++++++---
 .../DocumentationHero.spec.js                 | 18 ++++++++++++-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index a353b35b8..867fd93e2 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -205,19 +205,36 @@ describe('DocumentationTopic', () => {
     expect(main.attributes('tabindex')).toBe('0');
   });
 
-  it('renders a `DocumentationHero`', () => {
+  it('renders a `DocumentationHero`, enabled', () => {
     const hero = wrapper.find(DocumentationHero);
     expect(hero.exists()).toBe(true);
-    expect(hero.props()).toEqual({ type: propsData.symbolKind });
+    expect(hero.props()).toEqual({ type: propsData.symbolKind, enableHero: true });
   });
 
-  it('renders a `DocumentationHero`, with a the `role`, if no symbolKind', () => {
+  it('renders a `DocumentationHero`, enabled, with a the `role`, if no symbolKind', () => {
     wrapper.setProps({
       role: TopicTypes.article,
       symbolKind: '',
     });
     const hero = wrapper.find(DocumentationHero);
-    expect(hero.props()).toEqual({ type: TopicTypes.article });
+    expect(hero.props()).toEqual({ type: TopicTypes.article, enableHero: true });
+  });
+
+  it('render a `DocumentationHero`, enabled, if top-level technology page', () => {
+    wrapper.setProps({
+      role: TopicTypes.collection,
+      symbolKind: 'module',
+    });
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props()).toEqual({ type: TopicTypes.module, enableHero: true });
+  });
+
+  it('render a `DocumentationHero`, disabled, if symbol page', () => {
+    wrapper.setProps({
+      symbolKind: 'protocol',
+    });
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props()).toEqual({ type: TopicTypes.protocol, enableHero: false });
   });
 
   it('renders a `Title`', () => {
diff --git a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js b/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
index 3615930b3..06f9bbfda 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
@@ -20,6 +20,7 @@ import NavigatorLeafIcon from '@/components/Navigator/NavigatorLeafIcon.vue';
 
 const defaultProps = {
   type: TopicTypes.class,
+  enableHero: true,
 };
 
 const createWrapper = ({ propsData, ...others } = {}) => shallowMount(DocumentationHero, {
@@ -34,7 +35,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(Documentat
 });
 
 describe('DocumentationHero', () => {
-  it('renders the DocumentationHero', () => {
+  it('renders the DocumentationHero, enabled', () => {
     const wrapper = createWrapper();
     const allIcons = wrapper.findAll(NavigatorLeafIcon);
     expect(allIcons).toHaveLength(2);
@@ -73,4 +74,19 @@ describe('DocumentationHero', () => {
       '--accent-color': `var(--color-type-icon-${TopicTypeColors.teal}, var(--color-figure-gray-secondary))`,
     });
   });
+
+  it('renders the DocumentationHero, disabled', () => {
+    const wrapper = createWrapper();
+    wrapper.setProps({
+      enableHero: false,
+    });
+    // assert no icon
+    const allIcons = wrapper.findAll(NavigatorLeafIcon);
+    expect(allIcons).toHaveLength(0);
+    // assert slot
+    expect(wrapper.find('.default-slot').text()).toBe('Default Slot');
+    expect(wrapper.vm.styles).toEqual({
+      '--accent-color': `var(--color-type-icon-${TopicTypeColorsMap[defaultProps.type]}, var(--color-figure-gray-secondary))`,
+    });
+  });
 });

From 6ca46e282e239ea7a9bf7331d88065462cc6faa5 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Thu, 10 Mar 2022 16:49:15 -0800
Subject: [PATCH 04/12] fix spacing between hero and body

fix spacing between hero and body
---
 src/styles/core/_breakpoints.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/core/_breakpoints.scss b/src/styles/core/_breakpoints.scss
index a0ceead29..6a973ba55 100644
--- a/src/styles/core/_breakpoints.scss
+++ b/src/styles/core/_breakpoints.scss
@@ -147,6 +147,7 @@ $breakpoint-attributes: (
   // Center the content using auto left/right margins
   margin-left: auto;
   margin-right: auto;
+  margin-top: 0;
 
   @each $breakpoint, $attributes in $breakpoints {
     $min-width: map-deep-get($breakpoints, ($breakpoint, min-width));
@@ -329,6 +330,7 @@ $breakpoint-attributes: (
     min-width: map-deep-get($breakpoint-attributes, (default, small, min-width));
     margin-left: auto;
     margin-right: auto;
+    margin-top: 0;
     padding-left: 80px;
     padding-right: 80px;
     box-sizing: border-box;

From 5050cada505c60b07eb3e2e646936f4aba9372cf Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Fri, 11 Mar 2022 01:55:22 -0800
Subject: [PATCH 05/12] use modifier

use modifier
---
 src/components/DocumentationTopic.vue         | 18 ++++-----
 .../DocumentationTopic/DocumentationHero.vue  | 37 ++++++++++---------
 src/components/DocumentationTopic/Title.vue   |  4 +-
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index d0f43a67e..f2774f557 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -11,7 +11,7 @@
 <template>
   <div class="doc-topic">
     <main class="main" id="main" role="main" tabindex="0">
-      <DocumentationHero :type="symbolKind || role" :enableHero="enableHero">
+      <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
         <Title :eyebrow="roleHeading" :style=heroTitleStyle>{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
@@ -301,17 +301,17 @@ export default {
     ),
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
-    enableHero: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
-    heroTitleStyle({ enableHero }) {
-      return enableHero ? {
-        '--hero-eyebrow': 'light-color(figure-gray-secondary)',
-        '--hero-title': 'light-color(fill)',
+    enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
+    heroTitleStyle({ enhanceBackground }) {
+      return enhanceBackground ? {
+        '--hero-eyebrow-color': 'light-color(figure-gray-secondary)',
+        '--hero-title-color': 'light-color(fill)',
       } : {
-        '--hero-eyebrow': 'var(--colors-secondary-label,var(--color-secondary-label))',
+        '--hero-eyebrow-color': 'var(--colors-secondary-label,var(--color-secondary-label))',
       };
     },
-    borderWidth({ enableHero }) {
-      return enableHero ? {
+    borderWidth({ enhanceBackground }) {
+      return enhanceBackground ? {
         '--border-width': '0px',
       } : {
         '--border-width': '1px',
diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index c063c03ac..34ba67858 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -9,13 +9,16 @@
 -->
 
 <template>
-  <div :class=heroClass :style="styles">
+  <div
+    :class="['documentation-hero', { 'documentation-hero--disabled': !enhanceBackground }]"
+    :style="styles"
+  >
     <NavigatorLeafIcon
-      v-if="enableHero" :type="type"
+      v-if="enhanceBackground" :type="type"
       key="first" class="background-icon first-icon" with-colors
     />
     <NavigatorLeafIcon
-      v-if="enableHero" :type="type"
+      v-if="enhanceBackground" :type="type"
       key="second" class="background-icon second-icon" with-colors
     />
     <div class="documentation-hero__content">
@@ -37,7 +40,7 @@ export default {
       type: String,
       required: true,
     },
-    enableHero: {
+    enhanceBackground: {
       type: Boolean,
       required: true,
     },
@@ -49,7 +52,6 @@ export default {
       // use the color or fallback to the gray secondary, if not defined.
       '--accent-color': `var(--color-type-icon-${color}, var(--color-figure-gray-secondary))`,
     }),
-    heroClass: ({ enableHero }) => (enableHero ? 'documentation-hero' : 'documentation-hero-disabled'),
   },
 };
 </script>
@@ -62,18 +64,6 @@ $doc-hero-overlay-background: transparent !default;
 $doc-hero-icon-opacity: 1 !default;
 $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
-.documentation-hero-disabled {
-  overflow: hidden;
-  text-align: left;
-  padding-top: rem(40px);
-  padding-bottom: 40px;
-  position: relative;
-
-  @include breakpoint(small) {
-    text-align: center;
-  }
-}
-
 .documentation-hero {
   background: dark-color(fill);
   color: light-color(fill);
@@ -150,4 +140,17 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
     @include dynamic-content-container;
   }
 }
+
+.documentation-hero--disabled {
+  background: none;
+  color: initial;
+
+  &:before {
+    background: none;
+  }
+
+  &:after {
+    background: none;
+  }
+}
 </style>
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue
index 6d8f3f435..b9abdaafa 100644
--- a/src/components/DocumentationTopic/Title.vue
+++ b/src/components/DocumentationTopic/Title.vue
@@ -35,14 +35,14 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: var(--hero-eyebrow);
+  color: var(--hero-eyebrow-color);
   display: block;
   margin-bottom: rem(20px);
 }
 
 .title {
   @include font-styles(headline-reduced);
-  color: var(--hero-title);
+  color: var(--hero-title-color);
   margin-bottom: rem(12px);
 }
 </style>

From cd223b19be4a5d9e902c78a5a01ea9fac9a1f353 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Fri, 11 Mar 2022 02:22:52 -0800
Subject: [PATCH 06/12] fix title styling

fix title styling
---
 src/components/DocumentationTopic.vue                  | 10 +---------
 .../DocumentationTopic/DocumentationHero.vue           |  3 ++-
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index f2774f557..04043f698 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -13,7 +13,7 @@
     <main class="main" id="main" role="main" tabindex="0">
       <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
-        <Title :eyebrow="roleHeading" :style=heroTitleStyle>{{ title }}</Title>
+        <Title :eyebrow="roleHeading">{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
       </DocumentationHero>
       <div class="container content-grid" :class="{ 'full-width': hideSummary }">
@@ -302,14 +302,6 @@ export default {
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
     enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
-    heroTitleStyle({ enhanceBackground }) {
-      return enhanceBackground ? {
-        '--hero-eyebrow-color': 'light-color(figure-gray-secondary)',
-        '--hero-title-color': 'light-color(fill)',
-      } : {
-        '--hero-eyebrow-color': 'var(--colors-secondary-label,var(--color-secondary-label))',
-      };
-    },
     borderWidth({ enhanceBackground }) {
       return enhanceBackground ? {
         '--border-width': '0px',
diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index 34ba67858..13491c469 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -143,7 +143,8 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
 .documentation-hero--disabled {
   background: none;
-  color: initial;
+  color: dark-color(fill);
+  --hero-eyebrow-color: var(--colors-secondary-label,var(--color-secondary-label));
 
   &:before {
     background: none;

From 6be6a853a3832b88dfa607266958ef60abf28a91 Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Fri, 11 Mar 2022 02:24:18 -0800
Subject: [PATCH 07/12] fix test after var name change

fix test after var name change
---
 tests/unit/components/DocumentationTopic.spec.js          | 8 ++++----
 .../DocumentationTopic/DocumentationHero.spec.js          | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index 867fd93e2..d5873e0f2 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -208,7 +208,7 @@ describe('DocumentationTopic', () => {
   it('renders a `DocumentationHero`, enabled', () => {
     const hero = wrapper.find(DocumentationHero);
     expect(hero.exists()).toBe(true);
-    expect(hero.props()).toEqual({ type: propsData.symbolKind, enableHero: true });
+    expect(hero.props()).toEqual({ type: propsData.symbolKind, enhanceBackground: true });
   });
 
   it('renders a `DocumentationHero`, enabled, with a the `role`, if no symbolKind', () => {
@@ -217,7 +217,7 @@ describe('DocumentationTopic', () => {
       symbolKind: '',
     });
     const hero = wrapper.find(DocumentationHero);
-    expect(hero.props()).toEqual({ type: TopicTypes.article, enableHero: true });
+    expect(hero.props()).toEqual({ type: TopicTypes.article, enhanceBackground: true });
   });
 
   it('render a `DocumentationHero`, enabled, if top-level technology page', () => {
@@ -226,7 +226,7 @@ describe('DocumentationTopic', () => {
       symbolKind: 'module',
     });
     const hero = wrapper.find(DocumentationHero);
-    expect(hero.props()).toEqual({ type: TopicTypes.module, enableHero: true });
+    expect(hero.props()).toEqual({ type: TopicTypes.module, enhanceBackground: true });
   });
 
   it('render a `DocumentationHero`, disabled, if symbol page', () => {
@@ -234,7 +234,7 @@ describe('DocumentationTopic', () => {
       symbolKind: 'protocol',
     });
     const hero = wrapper.find(DocumentationHero);
-    expect(hero.props()).toEqual({ type: TopicTypes.protocol, enableHero: false });
+    expect(hero.props()).toEqual({ type: TopicTypes.protocol, enhanceBackground: false });
   });
 
   it('renders a `Title`', () => {
diff --git a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js b/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
index 06f9bbfda..e911e77d7 100644
--- a/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
+++ b/tests/unit/components/DocumentationTopic/DocumentationHero.spec.js
@@ -20,7 +20,7 @@ import NavigatorLeafIcon from '@/components/Navigator/NavigatorLeafIcon.vue';
 
 const defaultProps = {
   type: TopicTypes.class,
-  enableHero: true,
+  enhanceBackground: true,
 };
 
 const createWrapper = ({ propsData, ...others } = {}) => shallowMount(DocumentationHero, {
@@ -78,7 +78,7 @@ describe('DocumentationHero', () => {
   it('renders the DocumentationHero, disabled', () => {
     const wrapper = createWrapper();
     wrapper.setProps({
-      enableHero: false,
+      enhanceBackground: false,
     });
     // assert no icon
     const allIcons = wrapper.findAll(NavigatorLeafIcon);

From 4aa1f09fc096fd8ec0525a48f2a502a7365bf6fb Mon Sep 17 00:00:00 2001
From: Hanqing Huang <hqh@apple.com>
Date: Fri, 11 Mar 2022 09:29:03 -0800
Subject: [PATCH 08/12] remove margin top edit

remove margin top edit
---
 src/styles/core/_breakpoints.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/core/_breakpoints.scss b/src/styles/core/_breakpoints.scss
index 6a973ba55..561d8e225 100644
--- a/src/styles/core/_breakpoints.scss
+++ b/src/styles/core/_breakpoints.scss
@@ -330,7 +330,6 @@ $breakpoint-attributes: (
     min-width: map-deep-get($breakpoint-attributes, (default, small, min-width));
     margin-left: auto;
     margin-right: auto;
-    margin-top: 0;
     padding-left: 80px;
     padding-right: 80px;
     box-sizing: border-box;

From 2e7cce7e2c8f40db573146795ffc43c0b72a103b Mon Sep 17 00:00:00 2001
From: Marcus Ortiz <marcus_ortiz@apple.com>
Date: Fri, 11 Mar 2022 13:24:58 -0800
Subject: [PATCH 09/12] Refactor enabling/disabling of primary content border.

---
 src/components/DocumentationTopic.vue                | 9 +--------
 src/components/DocumentationTopic/PrimaryContent.vue | 4 ++--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index 04043f698..c320ffb2f 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -52,9 +52,9 @@
         </Summary>
         <PrimaryContent
           v-if="primaryContentSections && primaryContentSections.length"
+          :class="{ 'with-border': !enhanceBackground }"
           :conformance="conformance"
           :sections="primaryContentSections"
-          :style="borderWidth"
         />
       </div>
       <Topics
@@ -302,13 +302,6 @@ export default {
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
     enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
-    borderWidth({ enhanceBackground }) {
-      return enhanceBackground ? {
-        '--border-width': '0px',
-      } : {
-        '--border-width': '1px',
-      };
-    },
   },
   methods: {
     normalizePath(path) {
diff --git a/src/components/DocumentationTopic/PrimaryContent.vue b/src/components/DocumentationTopic/PrimaryContent.vue
index fb88974f3..6ebdab9d5 100644
--- a/src/components/DocumentationTopic/PrimaryContent.vue
+++ b/src/components/DocumentationTopic/PrimaryContent.vue
@@ -150,10 +150,10 @@ export default {
 }
 
 .primary-content {
-  &::before {
+  &.with-border::before {
     border-top-color: var(--colors-grid, var(--color-grid));
     border-top-style: solid;
-    border-top-width: var(--border-width);
+    border-top-width: 1px;
     content: '';
     display: block;
   }

From e9dc5c982082f5eb55c8d97bf7adf1d0311356ab Mon Sep 17 00:00:00 2001
From: Marcus Ortiz <marcus_ortiz@apple.com>
Date: Fri, 11 Mar 2022 14:03:41 -0800
Subject: [PATCH 10/12] Refactor header colors.

---
 .../DocumentationTopic/DocumentationHero.vue         |  5 ++---
 src/components/DocumentationTopic/Title.vue          | 12 ++++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index 13491c469..646753a7f 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -66,7 +66,7 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
 .documentation-hero {
   background: dark-color(fill);
-  color: light-color(fill);
+  color: dark-color(figure-gray);
   overflow: hidden;
   text-align: left;
   padding-top: rem(40px);
@@ -143,8 +143,7 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
 
 .documentation-hero--disabled {
   background: none;
-  color: dark-color(fill);
-  --hero-eyebrow-color: var(--colors-secondary-label,var(--color-secondary-label));
+  color: var(--colors-text, var(--color-text));
 
   &:before {
     background: none;
diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue
index b9abdaafa..b13f8ec37 100644
--- a/src/components/DocumentationTopic/Title.vue
+++ b/src/components/DocumentationTopic/Title.vue
@@ -35,14 +35,22 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: var(--hero-eyebrow-color);
+  color: dark-color(figure-gray-secondary);
   display: block;
   margin-bottom: rem(20px);
+
+  .documentation-hero--disabled & {
+    color: var(--colors-secondary-label, var(--color-secondary-label));
+  }
 }
 
 .title {
   @include font-styles(headline-reduced);
-  color: var(--hero-title-color);
+  color: dark-color(figure-gray);
   margin-bottom: rem(12px);
+
+  .documentation-hero--disabled & {
+    color: var(--colors-header-text, var(--color-header-text));
+  }
 }
 </style>

From 7fdee7fddc5f6282d4aa52e0e731f27b0520bd68 Mon Sep 17 00:00:00 2001
From: Marcus Ortiz <marcus_ortiz@apple.com>
Date: Fri, 11 Mar 2022 14:16:12 -0800
Subject: [PATCH 11/12] Disable before/after pseudo elements properly.

---
 src/components/DocumentationTopic/DocumentationHero.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
index 646753a7f..a77c65931 100644
--- a/src/components/DocumentationTopic/DocumentationHero.vue
+++ b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -146,11 +146,11 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
   color: var(--colors-text, var(--color-text));
 
   &:before {
-    background: none;
+    content: none;
   }
 
   &:after {
-    background: none;
+    content: none;
   }
 }
 </style>

From fcf7b708448984b49400b6561a404dd93324b88e Mon Sep 17 00:00:00 2001
From: Marcus Ortiz <marcus_ortiz@apple.com>
Date: Fri, 11 Mar 2022 14:18:34 -0800
Subject: [PATCH 12/12] Remove unecessary change to mixin.

---
 src/styles/core/_breakpoints.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/core/_breakpoints.scss b/src/styles/core/_breakpoints.scss
index 561d8e225..a0ceead29 100644
--- a/src/styles/core/_breakpoints.scss
+++ b/src/styles/core/_breakpoints.scss
@@ -147,7 +147,6 @@ $breakpoint-attributes: (
   // Center the content using auto left/right margins
   margin-left: auto;
   margin-right: auto;
-  margin-top: 0;
 
   @each $breakpoint, $attributes in $breakpoints {
     $min-width: map-deep-get($breakpoints, ($breakpoint, min-width));