Add release notes label and heading colors (#22585)

components/release-notes/PatchNotes.tsx

@@ -16,6 +16,26 @@ const SectionToLabelMap: Record<string, string> = {
   backups: 'Backups',
 }
 
+const LabelColorMap = {
+  features: 'color-bg-success-emphasis',
+  bugs: 'color-bg-attention-emphasis',
+  known_issues: 'color-bg-accent-emphasis',
+  security_fixes: 'color-bg-sponsors-emphasis',
+  changes: 'color-bg-success-emphasis',
+  deprecations: 'color-bg-done-emphasis',
+  backups: 'color-bg-severe-emphasis',
+}
+
+const HeadingColorMap = {
+  features: 'color-fg-success',
+  bugs: 'color-fg-attention',
+  known_issues: 'color-fg-accent',
+  security_fixes: 'color-fg-sponsors',
+  changes: 'color-fg-success',
+  deprecations: 'color-fg-done',
+  backups: 'color-fg-severe',
+}
+
 type Props = {
   patch: ReleaseNotePatch
   withReleaseNoteLabel?: boolean
@@ -25,6 +45,10 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
     <>
       {Object.entries(patch.sections).map(([key, sectionItems], i, arr) => {
         const isLast = i === arr.length - 1
+        const primaryLabelColor =
+          LabelColorMap[key as keyof typeof LabelColorMap] || LabelColorMap.features
+        const primaryHeadingColor =
+          HeadingColorMap[key as keyof typeof HeadingColorMap] || HeadingColorMap.features
         return (
           <div
             key={key}
@@ -36,7 +60,12 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
           >
             {withReleaseNoteLabel && (
               <div className="col-12 col-xl-3 mb-5">
-                <span className="px-3 py-2 text-small text-bold text-uppercase color-bg-emphasis color-fg-on-emphasis">
+                <span
+                  className={cx(
+                    'px-3 py-2 color-fg-on-emphasis text-small text-bold text-uppercase',
+                    primaryLabelColor
+                  )}
+                >
                   {SectionToLabelMap[key] || 'INVALID SECTION'}
                 </span>
               </div>
@@ -52,7 +81,11 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
                   <Fragment key={slug}>
                     <h4
                       id={slug}
-                      className={cx(styles.sectionHeading, 'text-uppercase text-bold f4')}
+                      className={cx(
+                        styles.sectionHeading,
+                        primaryHeadingColor,
+                        'text-uppercase text-bold f4'
+                      )}
                     >
                       <Link href={`#${slug}`} className="color-fg-inherit">
                         {item.heading}