@rijkshuisstijl-community/components-css 1.0.0-alpha.99 → 1.0.1

package/index.scss

@@ -14,6 +14,8 @@
 @use "src/breadcrumb-nav/index" as breadcrumb;
 @use "src/button/index" as button;
 @use "src/card/index" as card;
+@use "src/code-input/index" as codeInput;
+@use "src/code-input-group/index" as codeInputGroup;
 @use "src/dot-badge/index" as dotBadge;
 @use "src/checkbox/index" as checkbox;
 @use "src/figure/index" as figure;
@@ -24,6 +26,7 @@
 @use "src/form-field-error-message/index" as formFieldError;
 @use "src/form-field-radio-option/index" as FormFieldRadio;
 @use "src/footer/index" as footer;
+@use "src/heading/index" as heading;
 @use "src/hero/index" as hero;
 @use "src/link-list/index" as linkList;
 @use "src/link-list-card/index" as linkListCard;
@@ -32,7 +35,10 @@
 @use "src/navbar/index" as navbar;
 @use "src/message-list/index" as messageList;
 @use "src/navigation-list/index" as navigationList;
+@use "src/number-badge/index" as numberBadge;
 @use "src/ordered-list/index" as orderedList;
+@use "src/paragraph/index.scss" as paragraph;
+@use "src/pre-heading/index" as preHeading;
 @use "src/radio/index" as radio;
 @use "src/radio-group/index" as radioGroup;
 @use "src/select/index" as select;
@@ -41,11 +47,8 @@
 @use "src/skip-link/index" as skipLink;
 @use "src/table/index" as table;
 @use "src/textarea/index" as textarea;
-@use "src/textbox/index" as textbox;
+@use "src/text-input/index" as textinput;
 @use "src/toggletip/index" as toggletip;
 @use "src/unordered-list/index" as unorderedList;
-@use "src/badgecounter/index" as badgecounter;
-@use "src/pre-heading/index" as preHeading;
-@use "src/code-input/index" as codeInput;
 @use "src/visually-hidden/index" as visually-hidden;
 @use "src/wrapper/index" as wrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "1.0.0-alpha.99",
+  "version": "1.0.1",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -20,16 +20,19 @@
   },
   "devDependencies": {
     "scss": "0.2.4",
-    "vite": "6.0.1"
+    "vite": "6.2.0"
+  },
+  "dependencies": {
+    "@nl-design-system-candidate/heading-css": "1.0.0",
+    "@nl-design-system-candidate/number-badge-css": "1.1.0",
+    "@nl-design-system-candidate/paragraph-css": "2.0.0",
+    "@nl-design-system-candidate/skip-link-css": "1.0.0",
+    "@utrecht/component-library-css": "7.0.0"
   },
   "scripts": {
     "dev": "vite build --watch",
     "generate": "node src/wrapper/createSpacingCSS.js && prettier --write ./src/wrapper",
     "build": "pnpm run generate && pnpm run build:css",
     "build:css": "vite build"
-  },
-  "dependencies": {
-    "@utrecht/component-library-css": "7.0.0"
-  },
-  "gitHead": "fcd43936ebe2d097b97f082c577ff2e2af59dfc2"
-}
+  }
+}

package/src/accordion/index.scss

@@ -66,3 +66,10 @@
   justify-content: center;
   margin-block: var(--rhc-accordion-button-icon-margin-block);
 }
+
+.utrecht-accordion__panel {
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  font-weight: var(--rhc-font-weight-regular, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}

package/src/action-group/index.scss

@@ -1,6 +1,6 @@
 .utrecht-button-group {
-  column-gap: var(--utrecht-button-group-column-gap, 0.5rem);
-  row-gap: var(--utrecht-button-group-row-gap, 0.5rem);
+  column-gap: var(--rhc-space-100, 0.5rem);
+  row-gap: var(--rhc-space-100, 0.5rem);
   @media (width <= 768px) {
     flex-direction: column;
     .utrecht-button,

package/src/alert/index.scss

@@ -4,13 +4,13 @@
  */
 
 .rhc-alert {
-  --utrecht-heading-1-line-height: var(--utrecht-alert-heading-line-height);
-  --utrecht-heading-2-line-height: var(--utrecht-alert-heading-line-height);
-  --utrecht-heading-3-line-height: var(--utrecht-alert-heading-line-height);
-  --utrecht-heading-4-line-height: var(--utrecht-alert-heading-line-height);
-  --utrecht-heading-5-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-1-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-2-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-3-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-4-line-height: var(--utrecht-alert-heading-line-height);
+  --nl-heading-level-5-line-height: var(--utrecht-alert-heading-line-height);
   --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
-  --utrecht-paragraph-line-height: var(--utrecht-alert-message-line-height);
+  --nl-paragraph-line-height: var(--utrecht-alert-message-line-height);
 }
 
 .utrecht-alert__message {

package/src/article/index.scss

@@ -1 +1,8 @@
 // if needed add styles here for the Article components.
+
+.utrecht-article {
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  font-weight: var(--rhc-font-weight-regular, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}

package/src/blockquote/_mixin.scss

@@ -4,6 +4,10 @@
  */
 
 @mixin rhc-blockquote {
+  --utrecht-blockquote-color: var(--utrecht-blockquote-content-color);
+  --utrecht-blockquote-font-size: var(--utrecht-blockquote-content-font-size);
+  --utrecht-document-font-family: var(--utrecht-blockquote-content-font-family);
+
   background-color: var(--utrecht-blockquote-background-color);
   border-block-end-width: var(--utrecht-blockquote-border-block-end-width);
   border-block-start-width: var(--utrecht-blockquote-border-block-start-width);
@@ -17,6 +21,7 @@
   border-style: solid;
   display: flex;
   flex-direction: column;
+  line-height: var(--utrecht-blockquote-content-line-height);
   padding-block-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-end));
   padding-block-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-start));
   padding-inline-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-end));
@@ -24,6 +29,18 @@
   row-gap: var(--utrecht-blockquote-row-gap, inherit);
 }
 
+@mixin rhc-blockquote__quote {
+  margin-block-end: var(--utrecht-blockquote-margin-block-end, 0);
+  margin-block-start: var(--utrecht-blockquote-margin-block-start, 0);
+  margin-inline-end: var(--utrecht-blockquote-margin-inline-end, 0);
+  margin-inline-start: var(--utrecht-blockquote-margin-inline-start, 0);
+}
+
+@mixin rhc-blockquote__caption {
+  font-family: var(--utrecht-blockquote-caption-font-family, inherit);
+  line-height: var(--utrecht-blockquote-caption-line-height, inherit);
+}
+
 @mixin rhc-blockquote-variation($variation) {
   background-color: var(
     --utrecht-blockquote-#{$variation}-background-color,

package/src/blockquote/index.scss

@@ -6,22 +6,15 @@
 @use "mixin";
 
 .rhc-blockquote {
-  --utrecht-blockquote-color: var(--utrecht-blockquote-content-color);
-  --utrecht-blockquote-font-size: var(--utrecht-blockquote-content-font-size);
-  --utrecht-document-font-family: var(--utrecht-blockquote-content-font-family);
-
   @include mixin.rhc-blockquote;
 }
 
-.utrecht-blockquote__attribution {
-  font-family: var(--utrecht-blockquote-attribution-font-family, inherit);
+.utrecht-blockquote__quote {
+  @include mixin.rhc-blockquote__quote;
 }
 
-.utrecht-blockquote__quote {
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+.utrecht-blockquote__caption {
+  @include mixin.rhc-blockquote__caption;
 }
 
 .rhc-blockquote--blue-corner-border-variation {

package/src/breadcrumb-nav/index.scss

@@ -3,8 +3,11 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-.utrecht-breadcrumb-nav {
+.utrecht-breadcrumb-nav .utrecht-link:any-link {
   line-height: var(--utrecht-breadcrumb-nav-line-height, inherit);
+}
+
+.utrecht-breadcrumb-nav {
   &__link {
     --utrecht-link-icon-inset-block-start: var(--utrecht-breadcrumb-nav-link-icon-inset-block-start, inherit);
 

package/src/card/_mixin.scss

@@ -5,7 +5,10 @@
   column-gap: var(--rhc-card-as-link-column-gap, 16px);
   display: inline-flex;
   flex-direction: column;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  line-height: var(--rhc-line-height-md, inherit);
   position: relative;
   text-decoration: none;
 }
@@ -52,6 +55,10 @@
   padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
 }
 
+@mixin rhc-card__button {
+  z-index: 1;
+}
+
 @mixin rhc-card__image {
   aspect-ratio: 16 / 9;
   block-size: 100%;
@@ -140,6 +147,14 @@
   text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
 }
 
+@mixin rhc-card__anchor {
+  a::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
+}
+
 @mixin rhc-card__link--active {
   --utrecht-link-color: var(--rhc-card-as-link-link-active-color, #42145f);
 

package/src/card/index.scss

@@ -8,6 +8,10 @@
   }
 }
 
+.rhc-card__button {
+  @include mixin.rhc-card__button;
+}
+
 .rhc-card div:empty {
   @include mixin.rhc-card__empty-element;
 }
@@ -71,6 +75,10 @@
   @include mixin.rhc-card__link;
 }
 
+.rhc-card__anchor {
+  @include mixin.rhc-card__anchor;
+}
+
 .rhc-card:active {
   @include mixin.rhc-card--active;
 }

package/src/code-input/index.scss

@@ -1,13 +1,9 @@
-@use "mixin";
-
 .rhc-code-input {
-  @include mixin.rhc-code-input;
-}
-
-.rhc-code-input-group {
-  @include mixin.rhc-code-input-group;
-}
+  block-size: var(--rhc-code-input-size);
+  inline-size: var(--rhc-code-input-size);
+  text-align: center;
 
-.rhc-code-input-container {
-  @include mixin.rhc-code-input-container;
+  &--capitalized {
+    text-transform: uppercase;
+  }
 }

package/src/{code-input → code-input-group}/_mixin.scss

@@ -3,20 +3,10 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-@mixin rhc-code-input__display-flex {
-  display: flex;
-}
-
 @mixin rhc-code-input-group {
   column-gap: var(--rhc-code-input-group-column-gap);
+  display: flex;
   flex-direction: row;
-  @include rhc-code-input__display-flex;
-}
-
-@mixin rhc-code-input-container {
-  @include rhc-code-input__display-flex;
-
-  flex-direction: column;
 }
 
 @mixin rhc-code-input {

package/src/code-input-group/index.scss

@@ -0,0 +1,9 @@
+@use "mixin";
+
+.rhc-code-input {
+  @include mixin.rhc-code-input;
+}
+
+.rhc-code-input-group {
+  @include mixin.rhc-code-input-group;
+}

package/src/dot-badge/_mixin.scss

@@ -7,6 +7,6 @@
   block-size: var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint));
   border-radius: var(--rhc-dot-badge-border-radius, var(--rhc-border-radius-circle));
   color: var(--rhc-dot-badge-color, var(--rhc-color-rood-500));
-  display: inline-block;
-  inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-size-quarter-lint));
+  display: inline-flex;
+  inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint)));
 }

package/src/dot-badge/index.scss

@@ -2,8 +2,13 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+@use "../button/mixin" as button-mixin;
 @use "mixin";
 
 .rhc-dot-badge {
   @include mixin.rhc-dot-badge;
 }
+
+.rhc-dot-badge .rhc-dot-badge__sr-only {
+  @include button-mixin.invisible-but-accessible;
+}

package/src/figure/index.scss

@@ -10,8 +10,14 @@
   border-start-start-radius: var(--utrecht-figure-img-border-start-start-radius);
 }
 
+.utrecht-figure {
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
+
 .utrecht-figure__caption {
   border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
+  font-family: var(--rhc-font-family-primary, inherit);
   padding-block-end: var(--utrecht-figure-caption-padding-block-end);
   padding-block-start: var(--utrecht-figure-caption-padding-block-start);
   padding-inline-start: var(--utrecht-figure-caption-padding-inline-start);

package/src/file-input/index.scss

@@ -1,6 +1,8 @@
 .rhc-file-input {
   display: flex;
   flex-direction: column;
+  font-family: var(--rhc-font-family-primary, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
   row-gap: var(--rhc-file-input-row-gap);
 }
 
@@ -9,10 +11,11 @@
 }
 
 .rhc-file-input__feedback {
+  --nl-paragraph-font-size: var(--rhc-file-input-feedback-font-size);
+  --nl-paragraph-color: var(--rhc-file-input-feedback-color);
+
   align-items: center;
-  color: var(--rhc-file-input-feedback-color);
   display: flex;
-  font-size: var(--rhc-file-input-feedback-font-size);
   padding-inline-end: var(--rhc-file-padding-inline-end);
   padding-inline-start: var(--rhc-file-padding-inline-start);
 }

package/src/footer/index.scss

@@ -8,31 +8,43 @@
   --_utrecht-link-state-text-decoration-color: currentColor;
   --utrecht-column-layout-gap: var(--rhc-page-footer-column-gap);
   --utrecht-column-layout-column-width: var(--rhc-page-footer-column-width);
-  --utrecht-heading-1-color: currentColor;
-  --utrecht-heading-2-color: currentColor;
-  --utrecht-heading-3-color: currentColor;
-  --utrecht-heading-4-color: currentColor;
-  --utrecht-heading-5-color: currentColor;
-  --utrecht-heading-6-color: currentColor;
+  --nl-heading-level-1-color: currentColor;
+  --nl-heading-level-2-color: currentColor;
+  --nl-heading-level-3-color: currentColor;
+  --nl-heading-level-4-color: currentColor;
+  --nl-heading-level-5-color: currentColor;
+  --nl-heading-level-6-color: currentColor;
 
+  align-items: center;
   display: flex;
   flex-direction: var(--rhc-page-footer-flex-direction);
-  justify-content: center;
+  padding-block: 0;
+  padding-inline: 0;
 
   :is(h1, h2, h3, h4, h5, h6) {
     margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
   }
 }
 
+.rhc-page-footer > * {
+  inline-size: 100%;
+}
+
 .rhc-page-footer--primary-filled {
   --utrecht-page-footer-background-color: var(--rhc-color-primary-500);
 }
 
+.rhc-page-footer--primary-filled.rhc-page-subfooter {
+  border-block-start-color: var(--rhc-page-footer-border-block-start-color);
+  border-block-start-style: var(--rhc-page-footer-border-block-start-style);
+  border-block-start-width: var(--rhc-page-footer-border-block-start-width);
+}
+
 .rhc-page-footer--primary-outlined {
-  --utrecht-page-footer-background-color: var(--rhc-color-wit);
-  --utrecht-page-footer-color: var(--rhc-color-primary-500);
+  --utrecht-page-footer-background-color: var(--rhc-page-footer-outlined-background-color);
+  --utrecht-page-footer-color: var(--rhc-page-footer-outlined-color);
 
-  border-block-start-color: var(--rhc-page-footer-border-block-start-color);
+  border-block-start-color: var(--rhc-page-footer-outlined-border-color);
   border-block-start-style: var(--rhc-page-footer-border-block-start-style);
   border-block-start-width: var(--rhc-page-footer-border-block-start-width);
 }
@@ -41,15 +53,28 @@
   column-gap: var(--rhc-page-footer-column-gap);
   display: flex;
   flex: 1;
-  flex-direction: var(--rhc-page-footer-flex-direction);
+  flex-direction: row;
+  @media (width <= 1024px) {
+    & {
+      flex-direction: var(--rhc-page-footer-flex-direction);
+    }
+  }
+}
+
+.rhc-page-footer__wrapper {
+  box-sizing: border-box;
+  inline-size: 100%;
   max-inline-size: var(--rhc-page-footer-content-max-inline-size);
-  padding-inline-end: var(--rhc-page-footer-content-padding-inline-end);
-  padding-inline-start: var(--rhc-page-footer-content-padding-inline-start);
+  padding-block-end: var(--utrecht-page-footer-padding-block-end);
+  padding-block-start: var(--utrecht-page-footer-padding-block-start);
+  padding-inline-end: var(--utrecht-page-footer-padding-inline-end);
+  padding-inline-start: var(--utrecht-page-footer-padding-inline-start);
 }
 
 .rhc-page-footer__section,
 .rhc-page-footer__title {
   break-inside: avoid;
+  line-height: var(--rhc-line-height-md, inherit);
   padding-block-end: var(--rhc-page-footer-padding-block-end);
 }
 
@@ -57,15 +82,66 @@
   flex: 1;
 }
 
-@media (width <= 1024px) {
-  .rhc-page-footer {
-    --rhc-page-footer-flex-direction: column;
+.rhc-page-subfooter {
+  align-items: center;
+  display: flex;
+  flex-direction: var(--rhc-page-footer-flex-direction);
+}
+
+.rhc-page-subfooter__content {
+  align-items: center;
+  display: flex;
+  gap: var(--rhc-page-footer-content-column-gap);
+  justify-content: space-between;
+
+  @media (width <= 1024px) {
+    flex-direction: column;
+  }
+}
+
+.rhc-page-subfooter__backtotop {
+  align-items: center;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  text-decoration: none;
+  &:hover {
+    text-decoration: var(--rhc-sidenav-link-active-text-decoration);
   }
 }
 
-@media (width <= 320px) {
-  .rhc-page-footer {
+@media (width <= 780px) {
+  .rhc-page-footer__wrapper {
+    --utrecht-page-footer-padding-inline-end: var(--rhc-page-footer-padding-inline-end);
     --utrecht-page-footer-padding-inline-start: var(--rhc-page-footer-padding-inline-start);
+    --utrecht-page-footer-padding-block-end: var(--rhc-page-footer-padding-block-end);
     --utrecht-page-footer-padding-block-start: var(--rhc-page-footer-padding-block-start);
   }
 }
+
+.rhc-page-prefooter {
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.rhc-page-prefooter::before {
+  background-color: var(--rhc-color-primary-500);
+  block-size: 1.5rem;
+  content: "";
+  inline-size: 2rem;
+}
+
+.rhc-page-prefooter__content {
+  font-family: var(--rhc-font-family-secondary);
+  inset: 0% 50% auto auto;
+  line-height: 100%;
+  margin-inline-end: -2rem;
+  position: absolute;
+  transform: translateX(100%);
+  @media (width <= 720px) {
+    & {
+      display: none;
+    }
+  }
+}

package/src/form-field/index.scss

@@ -2,6 +2,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+.utrecht-form-field {
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
+}
 
 .utrecht-rich-text .utrecht-form-field {
   margin-block-end: var(--utrecht-form-field-margin-block-end);

package/src/heading/index.scss

@@ -0,0 +1,26 @@
+@use "../../node_modules/@nl-design-system-candidate/heading-css/dist/heading.css";
+
+.nl-heading--level-1 {
+  margin-block-end: var(--nl-heading-level-1-margin-block-end, var(--rhc-space-0, 0));
+  margin-block-start: var(--nl-heading-level-1-margin-block-start, var(--rhc-space-0, 0));
+}
+
+.nl-heading--level-2 {
+  margin-block-end: var(--nl-heading-level-2-margin-block-end, var(--rhc-space-0, 0));
+  margin-block-start: var(--nl-heading-level-2-margin-block-start, var(--rhc-space-0, 0));
+}
+
+.nl-heading--level-3 {
+  margin-block-end: var(--nl-heading-level-3-margin-block-end, var(--rhc-space-0, 0));
+  margin-block-start: var(--nl-heading-level-3-margin-block-start, var(--rhc-space-0, 0));
+}
+
+.nl-heading--level-4 {
+  margin-block-end: var(--nl-heading-level-4-margin-block-end, var(--rhc-space-0, 0));
+  margin-block-start: var(--nl-heading-level-4-margin-block-start, var(--rhc-space-0, 0));
+}
+
+.nl-heading--level-5 {
+  margin-block-end: var(--nl-heading-level-5-margin-block-end, var(--rhc-space-0, 0));
+  margin-block-start: var(--nl-heading-level-5-margin-block-start, var(--rhc-space-0, 0));
+}

package/src/hero/_mixin.scss

@@ -85,9 +85,10 @@
 }
 
 @mixin rhc-hero__sub-heading {
-  color: currentColor;
+  --nl-paragraph-font-size: var(--rhc-hero-sub-heading-font-size);
+  --nl-paragraph-color: currentColor;
+
   font-family: var(--rhc-hero-sub-heading-font-family);
-  font-size: var(--rhc-hero-sub-heading-font-size);
   font-weight: var(--rhc-hero-sub-heading-font-weight);
   line-height: var(--rhc-hero-sub-heading-line-height);
 }

package/src/link/_mixin.scss

@@ -8,6 +8,9 @@
 
   column-gap: var(--utrecht-link-column-gap, inherit);
   display: inline-flex;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
 }
 
 @mixin rhc-link--icon {

package/src/link-list/index.scss

@@ -13,4 +13,10 @@
 
 .utrecht-link-list__item {
   display: inline-flex;
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
+}
+
+.utrecht-link-list__item .utrecht-link:any-link {
+  line-height: var(--rhc-line-height-md, inherit);
 }

package/src/message-list/_mixin.scss

@@ -55,25 +55,29 @@
   grid-template-columns: 1fr 2fr auto auto;
 }
 @mixin rhc-message-list__item__label {
-  --utrecht-paragraph-font-weight: var(--rhc-message-list-item-label-font-weight);
+  --nl-paragraph-font-weight: var(--rhc-message-list-item-label-font-weight);
+  --nl-paragraph-font-size: var(--rhc-message-list-item-label-font-size);
+  --nl-paragraph-line-height: var(--rhc-message-list-item-label-line-height);
 
+  align-items: center;
   color: var(--rhc-message-list-item-heading-color);
   column-gap: var(--rhc-space-100);
   display: flex;
   font-family: var(--rhc-message-list-item-label-font-family), sans-serif;
-  font-size: var(--rhc-message-list-item-label-font-size);
-  font-weight: var(--rhc-message-list-item-label-font-weight);
   grid-area: label;
-  line-height: var(--rhc-message-list-item-label-line-height);
   margin-block: 0;
 }
 @mixin rhc-message-list__item__description {
-  color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-font-size: var(--rhc-message-list-item-content-font-size);
+
   grid-area: description;
   margin-block: 0;
 }
 @mixin rhc-message-list__item__meta-data {
-  color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-font-size: var(--rhc-message-list-item-content-font-size);
+
   grid-area: meta;
   margin-block: 0;
 }