@rijkshuisstijl-community/components-css 8.0.1 → 9.0.0

package/index.scss

@@ -13,6 +13,7 @@
 @use "src/card-as-link/index" as cardAsLink;
 @use "src/card/index" as card;
 @use "src/checkbox/index" as checkbox;
+@use "src/checkbox-group/index" as checkboxGroup;
 @use "src/code-input/index" as codeInput;
 @use "src/code-input-group/index" as codeInputGroup;
 @use "src/data-badge-button/index" as dataBadgeButton;
@@ -41,6 +42,7 @@
 @use "src/pre-heading/index" as preHeading;
 @use "src/radio/index" as radio;
 @use "src/radio-group/index" as radioGroup;
+@use "src/rounded-corner/index" as roundedCorner;
 @use "src/select/index" as select;
 @use "src/separator/index" as separator;
 @use "src/side-nav/index" as sideNav;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",

package/src/article/index.scss

@@ -1,8 +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);
+  font-family: var(--rhc-text-font-family-default, inherit);
+  font-size: var(--rhc-text-font-size-max-md, inherit);
+  font-weight: var(--rhc-text-font-weight-regular, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
 }

package/src/card/_mixin.scss

@@ -5,10 +5,10 @@
   column-gap: var(--rhc-card-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);
+  font-family: var(--rhc-text-font-family-default, inherit);
+  font-size: var(--rhc-text-font-size-max-md, inherit);
   inline-size: var(--rhc-card-inline-size, 328px);
-  line-height: var(--rhc-line-height-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
   position: relative;
   text-decoration: none;
 }
@@ -63,7 +63,7 @@
 @mixin rhc-card__subheading {
   align-items: center;
   display: flex;
-  font-size: var(--rhc-font-size-lg);
+  font-size: var(--rhc-text-font-size-lg);
   text-decoration: none;
 }
 

package/src/card-as-link/_mixin.scss

@@ -5,10 +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);
+  font-family: var(--rhc-text-font-family-default, inherit);
+  font-size: var(--rhc-text-font-size-max-md, inherit);
   inline-size: 100%;
-  line-height: var(--rhc-line-height-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
   position: relative;
   text-decoration: none;
 }

package/src/checkbox/index.scss

@@ -24,11 +24,3 @@
 .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"]:hover {
   @include mixin.utrecht-checkbox--invalid;
 }
-
-.rhc-checkbox-group {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-checkbox-group-padding-block-end);
-  padding-block-start: var(--rhc-checkbox-group-padding-block-start);
-  row-gap: var(--rhc-checkbox-group-row-gap);
-}

package/src/checkbox-group/index.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.rhc-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-checkbox-group-padding-block-end);
+  padding-block-start: var(--rhc-checkbox-group-padding-block-start);
+  row-gap: var(--rhc-checkbox-group-row-gap);
+}

package/src/figure/index.scss

@@ -10,15 +10,12 @@
   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);
+/* Inline behaviour for rounded-corner to fix cornering on block elements */
+.utrecht-figure .rhc-rounded-corner {
+  display: inline-block;
+  vertical-align: top;
 }
 
-.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);
+.utrecht-figure .rhc-rounded-corner img {
+  border-radius: inherit;
 }

package/src/file-input/index.scss

@@ -1,8 +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);
+  font-family: var(--rhc-text-font-family-default, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
   row-gap: var(--rhc-file-input-row-gap);
 }
 

package/src/footer/index.scss

@@ -75,7 +75,7 @@
 .rhc-page-footer__section,
 .rhc-page-footer__title {
   break-inside: avoid;
-  line-height: var(--rhc-line-height-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
   padding-block-end: var(--rhc-page-footer-padding-block-end);
 }
 
@@ -134,7 +134,7 @@
 }
 
 .rhc-page-prefooter__content {
-  font-family: var(--rhc-font-family-secondary);
+  font-family: var(--rhc-text-font-family-serif);
   inset: 0% 50% auto auto;
   line-height: 100%;
   margin-inline-end: -2rem;

package/src/form/index.scss

@@ -1,5 +1,5 @@
 .rhc-form-label--checkbox .utrecht-form-field__label--checkbox {
-  --utrecht-form-label-font-weight: var(--rhc-font-weight-regular, 400);
+  --utrecht-form-label-font-weight: var(--rhc-text-font-weight-regular, 400);
 
   align-items: flex-start;
   display: flex;

package/src/form-field/index.scss

@@ -3,8 +3,8 @@
  * 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);
+  font-size: var(--rhc-text-font-size-max-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
 }
 
 .utrecht-rich-text .utrecht-form-field {
@@ -15,3 +15,7 @@
   margin-block-end: var(--rhc-space-100, 0.5rem);
   margin-block-start: var(--rhc-space-100, 0.5rem);
 }
+
+.utrecht-form-field__description {
+  --utrecht-form-field-description-margin-block-start: calc(-1 * var(--rhc-space-100));
+}

package/src/link-list/index.scss

@@ -13,10 +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);
+  font-family: var(--rhc-text-font-family-default, inherit);
+  font-size: var(--rhc-text-font-size-max-md, inherit);
 }
 
 .utrecht-link-list__item .utrecht-link:any-link {
-  line-height: var(--rhc-line-height-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
 }

package/src/message-list/_mixin.scss

@@ -68,14 +68,14 @@
   margin-block: 0;
 }
 @mixin rhc-message-list__item__description {
-  --nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-color: var(--rhc-color-foreground-subtle, 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 {
-  --nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
+  --nl-paragraph-color: var(--rhc-color-foreground-subtle, inherit);
   --nl-paragraph-font-size: var(--rhc-message-list-item-content-font-size);
 
   grid-area: meta;
@@ -85,5 +85,5 @@
   --utrecht-icon-color: var(--rhc-color-foreground-lint, inherit);
 
   grid-area: icon;
-  min-block-size: var(--rhc-message-list-item-icon-font-size);
+  min-block-size: var(--rhc-message-list-item-icon-size);
 }

package/src/navbar/index.scss

@@ -16,7 +16,7 @@
   column-gap: var(--rhc-nav-bar-content-column-gap);
   display: flex;
   flex: 1;
-  font-family: var(--rhc-font-family-primary, inherit);
+  font-family: var(--rhc-text-font-family-default, inherit);
   justify-content: space-between;
   max-inline-size: var(--rhc-nav-bar-max-inline-size);
   row-gap: var(--rhc-nav-bar-content-row-gap);

package/src/navigation-list/_mixin.scss

@@ -16,14 +16,14 @@
 }
 @mixin rhc-navigation-list__item {
   align-items: center;
-  background-color: var(--rhc-navigation-list-item-background-color, var(--rhc-color-canvas));
+  background-color: var(--rhc-navigation-list-item-background-color, var(--rhc-color-bg-document));
   border-block-end-color: var(--rhc-navigation-list-item-border-color, var(--rhc-color-grijs-300));
   border-block-end-style: solid;
   border-block-end-width: var(--rhc-navigation-list-item-border-width, var(--rhc-border-width-default));
-  color: var(--rhc-navigation-list-item-color, var(--rhc-color-foreground-subdued));
+  color: var(--rhc-navigation-list-item-color, var(--rhc-color-foreground-subtle));
   column-gap: var(--rhc-navigation-list-item-column-gap, var(--rhc-space-100));
   display: flex;
-  min-block-size: var(--rhc-navigation-list-item-min-height, var(--rhc-size-target));
+  min-block-size: var(--rhc-navigation-list-item-min-height, var(--rhc-size-pointer-target));
   padding-block: var(--rhc-navigation-list-item-padding-block, var(--rhc-space-100));
   padding-inline: var(--rhc-navigation-list-item-padding-inline, var(--rhc-space-200));
   position: relative;
@@ -43,12 +43,12 @@
 }
 
 @mixin rhc-navigation-list__item__start-icon {
-  --utrecht-icon-color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subdued));
+  --utrecht-icon-color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subtle));
 
   background-color: var(--rhc-navigation-list-icon-background-color, var(--rhc-color-wit));
   block-size: var(--rhc-navigation-list-item-icon-size);
   border-radius: var(--rhc-navigation-list-icon-border-radius, var(--rhc-border-radius-circle));
-  color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subdued));
+  color: var(--rhc-navigation-list-icon-color, var(--rhc-color-foreground-subtle));
   grid-area: start-icon;
   min-inline-size: var(--rhc-navigation-list-item-icon-size);
   padding-block: var(--rhc-navigation-list-item-icon-padding-block);
@@ -68,18 +68,18 @@
 }
 
 @mixin rhc-navigation-list__item__label {
-  --nl-paragraph-font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-font-size-md-desktop));
-  --nl-paragraph-font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-font-weight-bold));
-  --nl-paragraph-line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-line-height-md));
+  --nl-paragraph-font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-text-font-size-max-xl));
+  --nl-paragraph-font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-text-font-weight-bold));
+  --nl-paragraph-line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-text-line-height-md));
 
   color: var(--rhc-navigation-list-item-heading-color, var(--rhc-color-foreground-lint));
-  font-family: var(--rhc-navigation-list-item-label-font-family, var(--rhc-font-family-primary)), sans-serif;
+  font-family: var(--rhc-navigation-list-item-label-font-family, var(--rhc-text-font-family-default)), sans-serif;
   grid-area: label;
   margin-block: 0;
 }
 @mixin rhc-navigation-list__item__description {
-  --nl-paragraph-color: var(--rhc-color-foreground-subdued);
-  --nl-paragraph-font-size: var(--rhc-navigation-list-item-content-font-size, var(--rhc-font-size-sm-desktop));
+  --nl-paragraph-color: var(--rhc-color-foreground-subtle);
+  --nl-paragraph-font-size: var(--rhc-navigation-list-item-content-font-size, var(--rhc-text-font-size-max-lg));
 
   grid-area: content;
   margin-block: 0;

package/src/radio-group/index.scss

@@ -10,5 +10,5 @@
 }
 
 .utrecht-form-label {
-  line-height: var(--rhc-line-height-md, inherit);
+  line-height: var(--rhc-text-line-height-md, inherit);
 }

package/src/rounded-corner/_mixin.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+$rhc-rounded-corner-positions: ("start-start", "start-end", "end-start", "end-end") !default;
+$rhc-rounded-corner-sizes: ("sm", "md", "lg") !default;
+
+@mixin rhc-rounded-corner {
+  overflow: var(--rhc-rounded-corner-overflow);
+}
+
+@mixin rhc-reset-border-radius {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
+}

package/src/rounded-corner/index.scss

@@ -0,0 +1,26 @@
+@use "mixin";
+
+.rhc-rounded-corner {
+  --_rhc-rounded-corner-border-radius: var(
+    --rhc-rounded-corner-border-radius,
+    var(--rhc-rounded-corner-md-border-radius)
+  );
+  @include mixin.rhc-rounded-corner;
+  @include mixin.rhc-reset-border-radius;
+
+  &.rhc-rounded-corner--size {
+    @each $size in mixin.$rhc-rounded-corner-sizes {
+      &-#{$size} {
+        --_rhc-rounded-corner-border-radius: var(--rhc-rounded-corner-#{$size}-border-radius);
+      }
+    }
+  }
+
+  &.rhc-rounded-corner--position {
+    @each $position in mixin.$rhc-rounded-corner-positions {
+      &-#{$position} {
+        border-#{$position}-radius: var(--_rhc-rounded-corner-border-radius);
+      }
+    }
+  }
+}

package/src/table/index.scss

@@ -35,11 +35,11 @@
     }
 
     &-cell {
-      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+      --utrecht-table-cell-line-height: var(--rhc-text-line-height-md, inherit);
     }
 
     &--cell {
-      --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
+      --utrecht-table-cell-line-height: var(--rhc-text-line-height-md, inherit);
 
       &-row {
         --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;

package/src/textarea/index.scss

@@ -1,6 +1,6 @@
 .utrecht-textarea {
   &:focus {
-    border-width: var(--utrecht-textarea-focus-border-width, var(--rhc-border-width-m, 2px));
+    border-width: var(--rhc-textarea-focus-border-width, var(--rhc-border-width-m, 2px));
   }
   &--html-textarea:read-only {
     --utrecht-textarea-read-only-border: var(--utrecht-textarea-read-only-background-color, --rhc-color-grijs-100);