Update highlight CSS for strong tags

src/components/access-code/example-access-code-error.njk

@@ -9,12 +9,11 @@ layout: ~
 {% from "components/details/_macro.njk" import onsDetails %}
 
 {% set pageConfig = {
-  "title": "Study title"
+    "title": "Study title"
 } %}
 
 {% block main %}
-    {% call
-        onsPanel({
+    {% call onsPanel({
             title: "There is a problem with this page",
             type: "error"
         })
@@ -67,18 +66,16 @@ layout: ~
     {% set content %}
         <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
         {% call onsPanel({
-                "type": "warn"
-            })
-        %}
+            "type": "warn"
+        }) %}
             Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
     {% call onsDetails({
-            "id": "details-access-code-error",
+        "id": "details-access-code-error",
         "title": "Need to answer separately from your household?"
-        })
-    %}
+    }) %}
         {{ content | safe }}
     {% endcall %}
 {% endblock %}

src/components/fieldset/_fieldset.scss

@@ -9,11 +9,6 @@
       display: block;
       margin: 0;
       padding: 0 0 1.5rem;
-
-      strong,
-      .ons-highlight {
-        @extend .ons-highlight;
-      }
     }
   }
 

src/components/question/_question.scss

@@ -4,10 +4,6 @@
   &__title {
     @extend .ons-u-mb-m;
 
-    em,
-    .ons-highlight {
-      @extend .ons-highlight;
-    }
     mark,
     .ons-instruction {
       background-color: var(--ons-color-instruction);

src/components/relationships/example-relationships-error.njk

@@ -25,8 +25,7 @@ layout: ~
 
 {% block main %}
 
-    {% call
-        onsPanel({
+    {% call onsPanel({
             title: "There is a problem with your answer",
             type: "error"
         })

src/foundations/highlighting/example-highlighting.njk

@@ -1,6 +1,6 @@
 ---
 "noRawTab": true
 ---
-<h1>What was the value of the business’s total sales of <strong class="ons-highlight">food</strong>?</h1>
-<h1>Of the <strong class="ons-highlight">423</strong> employees how many were part-time?</h1>
-<h3>You said <strong class="ons-highlight">0</strong> visitors are staying overnight here on Sunday 21 March 2021</h3>
+<h1>What was the value of the business’s total sales of <strong>food</strong>?</h1>
+<h1>Of the <strong>423</strong> employees how many were part-time?</h1>
+<h3>You said <strong>0</strong> visitors are staying overnight here on Sunday 21 March 2021</h3>

src/patterns/hub-and-spoke/example-spoke-continue.njk

@@ -27,13 +27,12 @@ layout: ~
 } %}
 
 {% block main %}
-    {% call onsPanel()
-    %}
+    {% call onsPanel() %}
         <p><strong>This is the last viewed question in this section</strong><br>
         You can also <a href="/patterns/hub-and-spoke/examples/spoke-start/">go back to the start of the section</a></p>
     {% endcall %}
     {% call onsQuestion({
-        "title": 'What is <strong class="ons-highlight">John Smith’s</strong> date of birth?',
+        "title": 'What is <strong>John Smith’s</strong> date of birth?',
         "description": '<p>For example, 31 3 1980</p>',
         "legendIsQuestionTitle": true,
         "submitButton": {

src/patterns/news/example-tag.njk

@@ -30,7 +30,7 @@ layout: ~
 
 <div class="ons-grid">
     <div class="ons-grid__col ons-col-7@m">
-        <h1 class="ons-u-fs-xxl">All articles for <strong class="ons-highlight">Integrated data</strong></h1>
+        <h1 class="ons-u-fs-xxl">All articles for <strong>Integrated data</strong></h1>
     </div>
 </div>
 

src/patterns/survey-interstitial-page/example-survey-interstitial-page.njk

@@ -8,34 +8,33 @@ layout: ~
 {% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
-        "header": {
-            "title": "Service name"
-        },
-        "footer": {
-            "rows": [
-                {
-                    "itemsList": [
-                        {
-                            "text": "Accessibility",
-                            "url": "#0"
-                        },
-                        {
-                            "text": "Privacy",
-                            "url": "#0"
-                        }
-                    ]
-                }
-            ]
-        }
-    } 
-%}
+    "header": {
+        "title": "Service name"
+    },
+    "footer": {
+        "rows": [
+            {
+                "itemsList": [
+                    {
+                        "text": "Accessibility",
+                        "url": "#0"
+                    },
+                    {
+                        "text": "Privacy",
+                        "url": "#0"
+                    }
+                ]
+            }
+        ]
+    }
+} %}
 
 {% block main %}
     <div class="ons-page__body">
         <h1 class="ons-u-fs-xxl">People who live in this household at 69 Abingdon Road, Goathill</h1>
-       
+
         <p>In this section, we are counting the people in this household at 68 Abingdon Road, Goathill on <strong>Sunday 21 March 2021.</strong></p>
-        
+
         {% call onsDetails({
                 "id": "survey-interstitial-page-use-details",
                 "classes": "ons-u-mb-s",
@@ -44,9 +43,9 @@ layout: ~
                 "button": {
                     "close": "Hide this"
                 }
-            }) 
+            })
         %}
-        <p>Some content can be written here</p>
+            <p>Some content can be written here</p>
         {% endcall %}
 
         <h3>You will need to know</h3>
@@ -64,11 +63,11 @@ layout: ~
         }}
         <p>The Householder is responsible for ensuring that this questionnaire is completed and submitted.</p>
 
-        {{ 
+        {{
             onsButton({
             "classes": 'ons-u-mb-m ons-u-mt-l',
             "text": 'Continue'
-            }) 
+            })
         }}
 
     </div>

src/patterns/survey-section-introduction-page/example-survey-section-introduction-page.njk

@@ -6,40 +6,39 @@ layout: ~
 {% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
-        "header": {
-            "title": "Service name"
-        },
-        "footer": {
-            "rows": [
-                {
-                    "itemsList": [
-                        {
-                            "text": "Accessibility",
-                            "url": "#0"
-                        },
-                        {
-                            "text": "Privacy",
-                            "url": "#0"
-                        }
-                    ]
-                }
-            ]
-        }
-    } 
-%}
+    "header": {
+        "title": "Service name"
+    },
+    "footer": {
+        "rows": [
+            {
+                "itemsList": [
+                    {
+                        "text": "Accessibility",
+                        "url": "#0"
+                    },
+                    {
+                        "text": "Privacy",
+                        "url": "#0"
+                    }
+                ]
+            }
+        ]
+    }
+} %}
 
 {% block main %}
     <div class="ons-page__body">
         <h1 class="ons-u-fs-xxl">Income</h1>
-       
+
         <p>This section asks for information regarding your business's income. This includes questions about total turnover and environmental turnover.</p>
         <p>This section requires figures for business activity within <strong>GB</strong>. Exclude Nothern Ireland business activity.</p>
 
-        {{ 
+        {{
             onsButton({
-            "classes": 'ons-u-mb-m ons-u-mt-l',
-            "text": 'Continue'
-            }) 
+                "classes": 'ons-u-mb-m ons-u-mt-l',
+                "text": 'Continue'
+            })
         }}
 
     </div>

src/scss/base/_typography.scss

@@ -23,9 +23,10 @@ h5,
 h6 {
   line-height: 1.2;
   margin: 0 0 1rem;
-  em {
-    background-color: var(--ons-color-highlight);
-  }
+}
+
+strong {
+  @extend .ons-highlight;
 }
 
 code {

src/scss/overrides/hcm.scss

@@ -193,7 +193,7 @@
   }
 
   // Highlighting
-  h1 em,
+  strong,
   .ons-highlight {
     background-color: mark;
     color: marktext;