remove/refactor unnecessary muted styles

jiromaykin · jiromaykin · commit 69b104081cfe · 2026-04-21T17:17:32.000+02:00
diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html
@@ -1,12 +1,12 @@
 {% load link_tags %}
 <li class="list-item{% if active %} list-item--active{% endif %}{% if compact %} list-item--compact{% endif %}{% if extra_compact %} list-item--extra-compact{% endif %}">
     {% if href %}<a class="link" href="{{ href }}">{% endif %}
-    {% if caption %}<p class="utrecht-paragraph list-item__caption">{{ caption }}</p>{% endif %}
+    {% if caption %}<nl-paragraph class-name="list-item__caption">{{ caption }}</nl-paragraph>{% endif %}
     {% if strong %}
         <p class="utrecht-heading-4">{{ text }}</p>
     {% else %}
         <nl-paragraph>{{ text }}</nl-paragraph>
     {% endif %}
-    {% if description %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ description }}</p>{% endif %}
+    {% if description %}<nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip-muted">{{ description }}</nl-paragraph>{% endif %}
     {% if href %}</a>{% endif %}
 </li>
diff --git a/src/open_inwoner/components/templates/components/Messages/Message.html b/src/open_inwoner/components/templates/components/Messages/Message.html
@@ -12,6 +12,6 @@
     </div>
 
     <footer class="message__footer">
-        <nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip utrecht-paragraph--oip-muted nl-paragraph--small" title="{{ message.created_on }}">{{ message.created_on|time }}</nl-paragraph>
+        <nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip-muted nl-paragraph--small" title="{{ message.created_on }}">{{ message.created_on|time }}</nl-paragraph>
     </footer>
 </aside>
diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html
@@ -3,7 +3,7 @@
 <section class="messages">
     <header class="messages__header">
         <h2 class="utrecht-heading-4">{{ subject }}</h2>
-        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-muted">{{ status }}</p>
+        <nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip-muted">{{ status }}</nl-paragraph>
     </header>
 
 
@@ -17,7 +17,7 @@ <h2 class="utrecht-heading-4">{{ subject }}</h2>
             {% for day in days %}
                 <li class="messages__day">
                     <header class="messages__day-header">
-                        <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-paragraph-muted">{{ day.text }}</p>
+                        <nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip-paragraph-muted">{{ day.text }}</nl-paragraph>
                     </header>
 
                     <ol class="messages__list">
@@ -72,7 +72,7 @@ <h2 class="utrecht-heading-4">{{ subject }}</h2>
                 {% form_actions primary_text=_("Verzenden") primary_icon='arrow_forward' %}
             {% endrender_form %}
         {% else %}
-            <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-paragraph-muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</p>
+            <nl-paragraph class-name="nl-paragraph--oip nl-paragraph--oip-paragraph-muted">{% trans "De gebruiker is inactief. Het is niet mogelijk een bericht te sturen." %}</nl-paragraph>
         {% endif %}
     </div>
 </section>
diff --git a/src/open_inwoner/react/components/Paragraph/Paragraph.scss b/src/open_inwoner/react/components/Paragraph/Paragraph.scss
@@ -16,4 +16,8 @@
       text-align: var(--oip-utrecht-paragraph-centered-text-align);
     }
   }
+  // Remove Safari iOS phone-parsing from specific paragraphs
+  .skip-phone-parsing {
+    pointer-events: none;
+  }
 }
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -190,7 +190,10 @@
 
   &__caption {
     color: var(--color-gray-dark-900);
-    margin: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
 
   &__text--small {
diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -22,18 +22,18 @@
     padding: 0;
   }
 
-  & .list-item__caption {
-    line-height: var(--font-line-height-body-small);
-  }
-
   &--compact:first-child {
     padding-top: 0;
   }
 
   & &__caption {
     color: var(--color-gray-dark-900);
     font-size: var(--font-size-body-small);
-    margin-top: 0;
+    line-height: var(--font-line-height-body-small);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
 
   .link {
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -193,7 +193,7 @@
 
   --color-body: var(--color-gray-dark);
   // changed to #949494 to get the required 3:1 contrast ratio - in case of decorative border use var(--color-gray).
-  --color-mute: #949494;
+  --color-mute: #757575;
   // text-color for muted text inside tinted cards
   --color-tinted-mute: #696969;
 
diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -85,8 +85,8 @@ <h2 class="card__heading-2">{{ zaak.description }}</h2>
                                 {% list_item zaak.current_status caption=_("Status") compact=True strong=False %}
                             {% endif %}
                             <li class="list-item list-item--compact">
-                               <p class="utrecht-paragraph list-item__caption">Zaaknummer</p>
-                               <p class="utrecht-paragraph skip-phone-parsing">&zwj;{{ zaak.identification }}</p>
+                                <nl-paragraph class-name="list-item__caption">Zaaknummer</nl-paragraph>
+                                <nl-paragraph class-name="skip-phone-parsing">&zwj;{{ zaak.identification }}</nl-paragraph>
                             </li>
                         {% endrender_list %}
 

Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,8 @@`
`16`	`16`	`text-align: var(--oip-utrecht-paragraph-centered-text-align);`
`17`	`17`	`}`
`18`	`18`	`}`
	`19`	`+ // Remove Safari iOS phone-parsing from specific paragraphs`
	`20`	`+ .skip-phone-parsing {`
	`21`	`+ pointer-events: none;`
	`22`	`+ }`
`19`	`23`	`}`