Allow customising the Intro section via PageColor

src/components/DocumentationTopic.vue

@@ -21,6 +21,7 @@
         :shortHero="shortHero"
         :shouldShowLanguageSwitcher="shouldShowLanguageSwitcher"
         :iconOverride="references[pageIcon]"
+        :standardColorIdentifier="standardColorIdentifier"
       >
         <template #above-content>
           <slot name="above-hero-content" />
@@ -156,6 +157,7 @@ import { TopicSectionsStyle } from 'docc-render/constants/TopicSectionsStyle';
 import OnThisPageNav from 'theme/components/OnThisPageNav.vue';
 import { SectionKind } from 'docc-render/constants/PrimaryContentSection';
 import Declaration from 'docc-render/components/DocumentationTopic/PrimaryContent/Declaration.vue';
+import { StandardColors } from 'docc-render/constants/StandardColors';
 import Abstract from './DocumentationTopic/Description/Abstract.vue';
 import ContentNode from './DocumentationTopic/ContentNode.vue';
 import CallToActionButton from './CallToActionButton.vue';
@@ -354,6 +356,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    standardColorIdentifier: {
+      type: String,
+      required: false,
+      validator: v => Object.prototype.hasOwnProperty.call(StandardColors, v),
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.references change, the provided value
@@ -539,6 +546,9 @@ export default {
           symbolKind = '',
           remoteSource,
           images: pageImages = [],
+          color: {
+            standardColorIdentifier,
+          } = {},
         } = {},
         primaryContentSections,
         relationshipsSections,
@@ -591,6 +601,7 @@ export default {
         pageImages,
         objcPath,
         swiftPath,
+        standardColorIdentifier,
       };
     },
   },

src/components/DocumentationTopic/DocumentationHero.vue

@@ -43,6 +43,7 @@ import TopicTypeIcon from 'docc-render/components/TopicTypeIcon.vue';
 import { TopicTypes, TopicTypeAliases } from 'docc-render/constants/TopicTypes';
 import { HeroColorsMap, HeroColors } from 'docc-render/constants/HeroColors';
 import { TopicRole } from 'docc-render/constants/roles';
+import { StandardColors } from 'docc-render/constants/StandardColors';
 
 export default {
   name: 'DocumentationHero',
@@ -72,13 +73,21 @@ export default {
       type: Object,
       required: false,
     },
+    standardColorIdentifier: {
+      type: String,
+      required: false,
+      validator: v => Object.prototype.hasOwnProperty.call(StandardColors, v),
+    },
   },
   computed: {
     // get the alias, if any, and fallback to the `teal` color
     color: ({ type }) => HeroColorsMap[TopicTypeAliases[type] || type] || HeroColors.teal,
-    styles: ({ color }) => ({
+    styles: ({ color, standardColorIdentifier }) => ({
       // use the color or fallback to the gray secondary, if not defined.
-      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}, var(--color-figure-gray-secondary)))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}))`,
+      // if a `standardColor` is provided, first try the more specific variant,
+      // falling back to the generic color variant.
+      '--standard-accent-color': standardColorIdentifier && `var(--color-standard-${standardColorIdentifier}-documentation-intro-fill, var(--color-standard-${standardColorIdentifier}))`,
     }),
     // This mapping is necessary to help create a consistent mapping for the
     // following kinds of things, which are represented as different strings
@@ -103,10 +112,18 @@ export default {
 <style scoped lang='scss'>
 @import 'docc-render/styles/_core.scss';
 
-$doc-hero-gradient-background: dark-color(fill-tertiary) !default;
+// if the page has a `standard` color, it must be used
+$doc-hero-gradient-background: var(
+    --standard-accent-color,
+    // then fallback to a theme-settings color
+    var(--color-documentation-intro-fill, #{dark-color(fill-tertiary)})
+) !default;
 $doc-hero-overlay-background: transparent !default;
 $doc-hero-icon-opacity: 1 !default;
-$doc-hero-icon-color: dark-color(fill-secondary) !default;
+$doc-hero-icon-color: var(
+    --color-documentation-intro-accent,
+    #{dark-color(fill-secondary)}
+) !default;
 $doc-hero-icon-spacing: 25px;
 $doc-hero-icon-vertical-spacing: 10px;
 $doc-hero-icon-dimension: 250px;
@@ -123,7 +140,7 @@ $doc-hero-icon-dimension: 250px;
   // gradient
   &:before {
     content: '';
-    background: var(--color-documentation-intro-fill, $doc-hero-gradient-background);
+    background: $doc-hero-gradient-background;
     position: absolute;
     width: 100%;
     left: 0;
@@ -160,7 +177,7 @@ $doc-hero-icon-dimension: 250px;
   }
 
   .background-icon {
-    color: var(--color-documentation-intro-accent, $doc-hero-icon-color);
+    color: $doc-hero-icon-color;
     display: block;
     width: $doc-hero-icon-dimension;
     height: auto;

src/components/TopicTypeIcon.vue

@@ -9,19 +9,20 @@
 -->
 
 <template>
-  <div class="TopicTypeIcon">
+  <div
+    class="TopicTypeIcon"
+    :style="styles"
+  >
     <OverridableAsset
       v-if="imageOverride"
       :imageOverride="imageOverride"
-      :style="styles"
       :shouldCalculateOptimalWidth="shouldCalculateOptimalWidth"
       class="icon-inline"
     />
     <component
       v-else
       :is="icon"
       v-bind="iconProps"
-      :style="styles"
       class="icon-inline"
     />
   </div>
@@ -124,7 +125,7 @@ export default {
     styles: ({
       color,
       withColors,
-    }) => (withColors && color ? { color: `var(--color-type-icon-${color})` } : {}),
+    }) => (withColors && color ? { '--icon-color': `var(--color-type-icon-${color})` } : {}),
   },
 };
 </script>
@@ -136,7 +137,8 @@ export default {
   width: 1em;
   height: 1em;
   flex: 0 0 auto;
-  color: var(--color-figure-gray-secondary);
+  // use the `--icon-color` if `withColors` is true, otherwise just use gray.
+  color: var(--icon-color, var(--color-figure-gray-secondary));
 
   /deep/ picture {
     flex: 1;

src/constants/StandardColors.js

@@ -0,0 +1,20 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2022 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+
+// eslint-disable-next-line import/prefer-default-export
+export const StandardColors = {
+  red: 'red',
+  orange: 'orange',
+  yellow: 'yellow',
+  blue: 'blue',
+  green: 'green',
+  purple: 'purple',
+  gray: 'gray',
+};

src/styles/core/colors/_light.scss

@@ -196,4 +196,12 @@
   --color-card-eyebrow: var(--color-figure-gray-secondary-alt);
   --color-card-shadow: #{change-color(dark-color(fill), $alpha: 0.04)};
   --color-link-block-card-border: #{change-color(dark-color(fill), $alpha: 0.04)};
+
+  --color-standard-red: #8B0000;
+  --color-standard-orange: #8B4000;
+  --color-standard-yellow: #8F7200;
+  --color-standard-blue: #002D75;
+  --color-standard-green: #023B2D;
+  --color-standard-purple: #512B55;
+  --color-standard-gray: #{dark-color(fill-tertiary)};
 }

tests/unit/components/DocumentationTopic/DocumentationHero.spec.js

@@ -68,7 +68,8 @@ describe('DocumentationHero', () => {
     expect(wrapper.find('.default-slot').text()).toBe('Default Slot');
     expect(wrapper.find('.above-content-slot').text()).toBe('Above Content Slot');
     expect(wrapper.vm.styles).toEqual({
-      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColorsMap[defaultProps.role]}, var(--color-figure-gray-secondary)))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColorsMap[defaultProps.role]}))`,
+      '--standard-accent-color': undefined,
     });
   });
 
@@ -114,7 +115,8 @@ describe('DocumentationHero', () => {
     });
     const color = HeroColorsMap[TopicTypeAliases[TopicTypes.init]];
     expect(wrapper.vm.styles).toEqual({
-      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}, var(--color-figure-gray-secondary)))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}))`,
+      '--standard-accent-color': undefined,
     });
   });
 
@@ -125,7 +127,8 @@ describe('DocumentationHero', () => {
       },
     });
     expect(wrapper.vm.styles).toEqual({
-      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColors.teal}, var(--color-figure-gray-secondary)))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColors.teal}))`,
+      '--standard-accent-color': undefined,
     });
   });
 
@@ -134,7 +137,7 @@ describe('DocumentationHero', () => {
       propsData: { role: TopicTypes.collection },
     });
     expect(wrapper.vm.styles['--accent-color'])
-      .toBe('var(--color-documentation-intro-accent, var(--color-type-icon-sky, var(--color-figure-gray-secondary)))');
+      .toBe('var(--color-documentation-intro-accent, var(--color-type-icon-sky))');
   });
 
   it('renders the DocumentationHero, disabled', () => {
@@ -148,7 +151,8 @@ describe('DocumentationHero', () => {
     // assert slot
     expect(wrapper.find('.default-slot').text()).toBe('Default Slot');
     expect(wrapper.vm.styles).toEqual({
-      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColorsMap[defaultProps.role]}, var(--color-figure-gray-secondary)))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColorsMap[defaultProps.role]}))`,
+      '--standard-accent-color': undefined,
     });
   });
 
@@ -171,4 +175,18 @@ describe('DocumentationHero', () => {
     });
     expect(wrapper.find(TopicTypeIcon).props('type')).toBe(TopicTypes.collection);
   });
+
+  it('adds a standard-accent-color, if provided', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        enhanceBackground: true,
+        role: TopicTypes.section,
+        standardColorIdentifier: 'blue',
+      },
+    });
+    expect(wrapper.vm.styles).toEqual({
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${HeroColors.teal}))`,
+      '--standard-accent-color': 'var(--color-standard-blue-documentation-intro-fill, var(--color-standard-blue))',
+    });
+  });
 });

tests/unit/components/TopicTypeIcon.spec.js

@@ -41,7 +41,7 @@ describe('TopicTypeIcon', () => {
     expect(iconComponent.props()).toMatchObject(bindings);
     if (color) {
       // we cannot assert on component, because JSDOM does not work with custom CSS vars
-      expect(wrapper.vm.styles).toHaveProperty('color', `var(--color-type-icon-${color})`);
+      expect(wrapper.vm.styles).toHaveProperty('--icon-color', `var(--color-type-icon-${color})`);
     }
   });
 
@@ -52,7 +52,7 @@ describe('TopicTypeIcon', () => {
         withColors: false,
       },
     });
-    expect(wrapper.vm.styles).not.toHaveProperty('color');
+    expect(wrapper.vm.styles).not.toHaveProperty('--icon-color');
   });
 
   it('renders an icon override', () => {