@ons/design-system 67.2.0 → 68.0.1

package/scss/base/_typography.scss

@@ -23,11 +23,17 @@ h5,
 h6 {
   line-height: 1.2;
   margin: 0 0 1rem;
-  em {
-    background-color: var(--ons-color-highlight);
+  strong {
+    @extend .ons-highlight;
   }
 }
 
+mark {
+  @extend .ons-highlight;
+
+  font-weight: $font-weight-bold;
+}
+
 code {
   font-size: 0.8rem;
 }

package/scss/main.scss

@@ -6,6 +6,7 @@
 @import '../components/access-code/access-code';
 @import '../components/address-output/address-output';
 @import '../components/autosuggest/autosuggest';
+@import '../components/back-to-top/back-to-top';
 @import '../components/breadcrumbs/breadcrumbs';
 @import '../components/browser-banner/browser-banner';
 @import '../components/button/button';

package/scss/overrides/hcm.scss

@@ -193,7 +193,14 @@
   }
 
   // Highlighting
-  h1 em,
+  h1 strong,
+  h2 strong,
+  h3 strong,
+  h4 strong,
+  h5 strong,
+  h6 strong,
+  mark,
+  .ons-fieldset__legend-title strong,
   .ons-highlight {
     background-color: mark;
     color: marktext;

package/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);

package/components/date-field-input/_macro.njk

@@ -1,86 +0,0 @@
-{% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
-{% from "components/fieldset/_macro.njk" import onsFieldset %}
-{% from "components/input/_macro.njk" import onsInput %}
-{% from "components/error/_macro.njk" import onsError %}
-
-{% macro onsDateFieldInput(params) %}
-    {% set fields %}
-        {% for field in params.fields %}
-            {{
-                onsInput({
-                    "id": field.id,
-                    "classes": field.classes,
-                    "width": field.width,
-                    "type": "number",
-                    "name": field.name,
-                    "value": field.value,
-                    "min": field.min,
-                    "max": field.max,
-                    "maxLength": field.maxLength,
-                    "suffix": field.suffix,
-                    "label": field.label,
-                    "attributes": field.attributes,
-                    "error": field.error,
-                    "fieldId": field.fieldId
-                })
-            }}
-        {% endfor %}
-    {% endset %}
-
-    {% if numberOfFields > 1 %}
-        {% set fields %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endset %}
-    {% endif %}
-
-    {% if params.mutuallyExclusive %}
-        {% set mutuallyExclusive = params.mutuallyExclusive | setAttributes({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "error": params.error,
-            "classes": params.classes,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "dontWrap": params.dontWrap,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective
-        }) %}
-
-        {% call onsMutuallyExclusive(mutuallyExclusive) %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endcall %}
-    {% elif params.numberOfFields > 1 %}
-        {% call onsFieldset({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "classes": params.classes,
-            "description": params.description,
-            "legendClasses": params.legendClasses,
-            "error": params.error,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "dontWrap": params.dontWrap
-        }) %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endcall %}
-    {% elif params.numberOfFields == 1 %}
-        {% if params.error %}
-            {% call onsError(params.error) %}
-                {{ fields | safe }}
-            {% endcall %}
-        {% else %}
-            {{ fields | safe }}
-        {% endif %}
-    {% else %}
-        {{ fields | safe }}
-    {% endif %}
-{% endmacro %}