Change release notes colors (#16923)

* Use pastel colors

* Whit text

* Slugify/anchor section headings

* Use classes instead of style attributes

* Use fancy-pants SCSS

* Simplify a tad

* TIL text-inherit helper

Co-authored-by: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com>

* Remove redundant `style` attr

Co-authored-by: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com>

Co-authored-by: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com>

includes/release-notes-category-label.html

@@ -1,25 +1,18 @@
 {% case section[0] %}
   {% when "features" %}
-    {% assign colors = "bg-gradient-aquamarine-mauve text-white" %}
     {% assign text = "Features" %}
   {% when "bugs" %}
-    {% assign colors = "bg-gradient-red-orange text-white" %}
     {% assign text = "Bug fixes" %}
   {% when "known_issues" %}
-    {% assign colors = "bg-gradient-dark-mint text-white" %}
     {% assign text = "Known issues" %}
   {% when "security_fixes" %}
-    {% assign colors = "bg-gradient-coral-yellow text-white" %}
     {% assign text = "Security fixes" %}
   {% when "changes" %}
-    {% assign colors = "bg-gradient-blue-purple text-white" %}
     {% assign text = "Changes" %}
   {% when "deprecations" %}
-    {% assign colors = "bg-gradient-mint-blue text-white" %}
     {% assign text = "Deprecations" %}
   {% else %}
-    {% assign colors = "bg-blue text-white" %}
     {% assign text = "INVALID SECTION" %}
 {% endcase %}
 
-<span class="{{ colors }} px-3 py-2 f5 text-uppercase text-mono">{{ text }}</span>
+<span class="px-3 py-2 f5 text-uppercase text-mono text-white release-notes-section-label">{{ text }}</span>

includes/release-notes-heading.html

@@ -1,18 +1,5 @@
-{% case section[0] %}
-  {% when "features" %}
-    {% assign colors = "text-gradient-aquamarine-mauve" %}
-  {% when "bugs" %}
-    {% assign colors = "text-gradient-red-orange" %}
-  {% when "known_issues" %}
-    {% assign colors = "text-gradient-dark-mint" %}
-  {% when "security_fixes" %}
-    {% assign colors = "text-gradient-coral-yellow-dark" %}
-  {% when "changes" %}
-    {% assign colors = "text-gradient-blue-purple" %}
-  {% when "deprecations" %}
-    {% assign colors = "text-gradient-dark-mint" %}
-  {% else %}
-    {% assign colors = "text-gradient-aquamarine-mauve" %}
-{% endcase %}
+{% assign slug = note.heading | slugify %}
 
-<h4 class="{{ colors }} text-uppercase text-bold">{{ note.heading }}</h4>
+<h4 id="{{ slug }}" class="release-notes-section-heading text-uppercase text-bold">
+  <a href="#{{ slug }}" class="text-inherit">{{ note.heading }}</a>
+</h4>

layouts/release-notes.html

@@ -66,7 +66,7 @@
                   <p class="mt-3">{{ patch.intro }}</p>
 
                   {% for section in patch.sections %}
-                    <div class="py-6 d-block d-xl-flex flex-items-baseline {% unless forloop.last %}border-bottom{% endunless %}">
+                    <div class="release-notes-section-{{ section[0] }} py-6 d-block d-xl-flex flex-items-baseline {% unless forloop.last %}border-bottom{% endunless %}">
                       <div class="mr-2 flex-shrink-0 mb-5 col-12 col-xl-3">
                         {% include 'release-notes-category-label' %}
                       </div>

lib/render-content/index.js

@@ -1,3 +1,4 @@
+const GithubSlugger = require('github-slugger')
 const renderContent = require('./renderContent')
 const { ExtendedMarkdown, tags } = require('../liquid-tags/extended-markdown')
 
@@ -33,6 +34,13 @@ renderContent.liquid.registerFilters({
    */
   version_num: (input) => {
     return input.split('@')[1]
+  },
+  /**
+   * Convert the input to a slug
+   */
+  slugify: (input) => {
+    const slugger = new GithubSlugger()
+    return slugger.slug(input)
   }
 })
 

stylesheets/release-notes.scss

@@ -15,3 +15,23 @@ ul.release-notes-list li.release-notes-list-item {
 details[open].release-notes-version-picker summary .octicon.octicon-chevron-down {
   transform: rotate(180deg);
 }
+
+$colors-list:(
+  features: #05a88b,
+  bugs: #ec8c1c,
+  known_issues: #4f6db3,
+  security_fixes: #e53e72,
+  changes: #69b378,
+  deprecations: #9a62a3
+);
+
+@each $key,$val in $colors-list{
+  .release-notes-section-#{$key} {
+    .release-notes-section-label {
+      background-color: #{$val};
+    }
+    .release-notes-section-heading {
+      color: #{$val};
+    }
+  }
+}