Fix/indepented component styling

packages/components-css/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);
+}

packages/components-css/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);
+}

packages/components-css/src/blockquote/_mixin.scss

@@ -17,6 +17,7 @@
   border-style: solid;
   display: flex;
   flex-direction: column;
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   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));

packages/components-css/src/blockquote/index.scss

@@ -9,6 +9,9 @@
   --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);
+  --utrecht-blockquote-caption-font-size: var(--utrecht-blockquote-content-font-size);
+
+  line-height: 1.25;
 
   @include mixin.rhc-blockquote;
 }

packages/components-css/src/breadcrumb-nav/index.scss

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

packages/components-css/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;
 }

packages/components-css/src/dot-badge/_mixin.scss

@@ -8,5 +8,7 @@
   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;
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-size-quarter-lint));
+  line-height: var(--rhc-line-height-md, inherit);
 }

packages/components-css/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);

packages/components-css/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);
 }
 

packages/components-css/src/footer/index.scss

@@ -50,6 +50,7 @@
 .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);
 }
 

packages/components-css/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);

packages/components-css/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);
 }

packages/components-css/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 {

packages/components-css/src/pre-heading/index.scss

@@ -13,6 +13,8 @@
 .rhc-pre-heading {
   --utrecht-pre-heading-color: var(--utrecht-heading-1-color, inherit);
   --utrecht-pre-heading-font-weight: var(--rhc-font-weight-regular, inherit);
+  --utrecht-pre-heading-font-size: var(--rhc-font-size-xs-desktop, inherit);
+  --utrecht-pre-heading-line-height: var(--rhc-line-height-md, inherit);
 
   grid-area: preheading;
 }

packages/components-css/src/radio-group/index.scss

@@ -8,3 +8,7 @@
 .rhc-radio-group {
   @include mixin.rhc-radio-group;
 }
+
+.utrecht-form-label {
+  line-height: 150%;
+}

packages/components-css/src/skip-link/_mixin.scss

@@ -7,7 +7,10 @@
   box-shadow: var(--utrecht-skip-link-box-block-end-shadow-offset-x)
     var(--utrecht-skip-link-box-block-end-shadow-offset-y) var(--utrecht-skip-link-box-block-end-shadow-blur-radius)
     var(--utrecht-skip-link-box-block-end-shadow-spread-radius) var(--utrecht-skip-link-box-block-end-shadow-color);
+  font-family: var(--rhc-font-family-primary, inherit);
+  font-size: var(--rhc-font-size-xs-desktop, inherit);
   font-weight: var(--utrecht-skip-link-font-weight, inherit);
+  line-height: var(--rhc-line-height-md, inherit);
   position: revert;
   text-underline-offset: var(--utrecht-skip-link-text-underline-offset, inherit);
 }

packages/components-css/src/table/index.scss

@@ -34,7 +34,13 @@
       --_utrecht-table-cell-text-align: start;
     }
 
+    &-cell {
+      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+    }
+
     &--cell {
+      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+
       &-row {
         --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;
 

packages/components-css/src/unordered-list/index.scss

@@ -8,7 +8,7 @@
   font-family: var(--utrecht-unordered-list-font-family);
   font-size: var(--utrecht-unordered-list-font-size);
   font-weight: var(--utrecht-unordered-list-font-weight);
-  line-height: var(--utrecht-unordered-list-line-heigh);
+  line-height: var(--utrecht-unordered-list-line-height);
   padding-inline-start: var(--utrecht-unordered-list-padding-inline-start);
 }
 

packages/storybook/config/preview.tsx

@@ -9,7 +9,6 @@ import '@rijkshuisstijl-community/components-css/dist/index.css';
 import { defineCustomElements } from '@rijkshuisstijl-community/web-components-stencil/loader/index';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/react';
-import { UtrechtDocument } from '@utrecht/web-component-library-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
 
 // Initialize web components
@@ -28,7 +27,7 @@ const preview: Preview = {
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),
-    (Story: any) => <UtrechtDocument>{Story()}</UtrechtDocument>,
+    (Story: any) => Story(),
   ],
   parameters: {
     previewTabs: {

proprietary/design-tokens/figma/figma.tokens.json

@@ -3338,6 +3338,10 @@
           "line-height": {
             "value": "{rhc.line-height.paragraph}",
             "type": "lineHeights"
+          },
+          "font-size": {
+            "value": "{rhc.font-size.xs.desktop}",
+            "type": "fontSizes"
           }
         },
         "img": {
@@ -3565,6 +3569,12 @@
             "value": "{rhc.space.100}",
             "type": "spacing"
           }
+        },
+        "error-message": {
+          "line-height": {
+              "value": "normal",
+              "type": "lineHeights"
+          }
         }
       }
     }
@@ -6172,6 +6182,10 @@
           "padding-inline-start": {
             "value": "{rhc.space.200}",
             "type": "spacing"
+          },
+          "line-height": {
+            "value": "{rhc.line-height.md}",
+            "type": "lineHeights"
           }
         },
         "data-cell": {
@@ -6305,6 +6319,10 @@
               "type": "color"
             }
           }
+        },
+        "font-size": {
+            "value": "{rhc.font-size.xs.desktop}",
+            "type": "fontSizes"
         }
       }
     }