Update placeholder text colour (#3062)

ONSdigital · Mar 1, 2024 · cc6c097 · cc6c097
1 parent f9fd468
commit cc6c097
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 35 deletions.
diff --git a/..._components_input_example-input-search-with-placeholder_0_document_2_mobile.png b/..._components_input_example-input-search-with-placeholder_0_document_2_mobile.png
diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk
@@ -1,33 +1,33 @@
 {%- macro onsCard(params) -%}
 
-  {% from "components/list/_macro.njk" import onsList %}
+    {% set titleSize = params.titleSize | default('2') %}
 
-  {% set titleSize = params.titleSize | default('2') %}
+    <div class="ons-card">
+        <a href="{{ params.url }}" class="ons-card__link">
+            {%- if params.image -%}
+                {% if params.image.smallSrc %}
+                    <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+                {% elif params.image == true or params.image.placeholderURL %}
+                    <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+                {% endif %}
+            {%- endif -%}
+            <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+                {{ params.title }}
+            </h{{ titleSize }}>
+        </a>
 
-  <div class="ons-card">
-    <a href="{{ params.url }}" class="ons-card__link">
-      {%- if params.image -%}
-        {% if params.image.smallSrc %}
-          <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-        {% elif params.image == true or params.image.placeholderURL %}
-          <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
-        {% endif %}
-      {%- endif -%}
-      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-          {{ params.title }}
-      </h{{ titleSize }}>
-    </a>
+        <p id="{{ params.textId }}">{{ params.text }}</p>
 
-    <p id="{{ params.textId }}">{{ params.text }}</p>
+        {% if params.itemsList -%}
+            {% from "components/list/_macro.njk" import onsList %}
+            {{
+                onsList({
+                    "variants": 'dashed',
+                    "itemsList": params.itemsList
+                })
+            }}
+        {% endif %}
 
-    {% if params.itemsList -%}
-      {{
-          onsList({
-              "variants": 'dashed',
-              "itemsList": params.itemsList
-          })
-      }}
-    {% endif %}
+    </div>
 
-  </div>
 {%- endmacro -%}
diff --git a/src/components/document-list/document-list.scss b/src/components/document-list/document-list.scss
@@ -62,7 +62,7 @@
     width: 100%;
 
     &:focus {
-      background-color: var(--ons-color-placeholder) !important;
+      background-color: var(--ons-color-image-placeholder) !important;
       border: 2px solid var(--ons-color-borders-document-image-focus);
       box-shadow: none;
       outline: 4px solid var(--ons-color-focus) !important;

diff --git a/src/components/document-list/example-document-list-downloads.njk b/src/components/document-list/example-document-list-downloads.njk
@@ -3,7 +3,7 @@
     "documents": [
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Including everyone in Census 2021',
             "metadata": {
                 "type": {
@@ -19,7 +19,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Community handbook for Census 2021',
             "metadata": {
                 "type": {
@@ -35,7 +35,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Census 2021 matters to everyone',
             "metadata": {
                 "type": {

diff --git a/src/components/label/_label.scss b/src/components/label/_label.scss
@@ -19,6 +19,7 @@
   &--placeholder {
     font-size: 1rem;
     font-weight: $font-weight-regular;
+    color: var(--ons-color-text-placeholder);
     left: 10px;
     position: absolute;
     top: 6px;

diff --git a/src/components/label/_macro.njk b/src/components/label/_macro.njk
@@ -17,7 +17,7 @@
         </span>
     {%- endset %}
     {%- if params.description and params.accessiblePlaceholder -%}
-        {{- description | safe -}}    
+        {{- description | safe -}}
     {%- else -%}
     <label
         class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
@@ -43,5 +43,5 @@
                 {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
-    {%- endif -%} 
+    {%- endif -%}
 {% endmacro %}
diff --git a/src/patterns/guide/example-guide-overview.njk b/src/patterns/guide/example-guide-overview.njk
@@ -54,7 +54,7 @@ layout: ~
 
 {% block main %}
     <h1 class="ons-u-mb-l">
-        <span class="ons-u-fs-xxl ons-u-db">About the census </span>
+        <span class="ons-u-fs-xxl ons-u-db">About the census</span>
         <span class="ons-u-vh">: Overview</span>
     </h1>
     {{-

diff --git a/src/scss/vars/_colors.scss b/src/scss/vars/_colors.scss
@@ -102,7 +102,8 @@
   --ons-color-borders-document-image-focus: var(--ons-color-black);
 
   // Placeholders
-  --ons-color-placeholder: var(--ons-color-grey-15);
+  --ons-color-text-placeholder: var(--ons-color-grey-75);
+  --ons-color-image-placeholder: var(--ons-color-grey-15);
 
   // Form elements
   --ons-color-button: var(--ons-color-leaf-green);