@rijkshuisstijl-community/components-css 4.0.0 → 5.0.0

package/index.scss

@@ -14,6 +14,7 @@
 @use "src/breadcrumb-nav/index" as breadcrumb;
 @use "src/button/index" as button;
 @use "src/card-as-link/index" as cardAsLink;
+@use "src/card/index" as card;
 @use "src/code-input/index" as codeInput;
 @use "src/code-input-group/index" as codeInputGroup;
 @use "src/data-badge-button/index" as dataBadgeButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@utrecht/focus-ring-css": "2.3.1",
     "scss": "0.2.4",
-    "vite": "6.3.4"
+    "vite": "6.3.5"
   },
   "dependencies": {
     "@nl-design-system-candidate/heading-css": "1.1.0",
@@ -29,12 +29,13 @@
     "@nl-design-system-candidate/number-badge-css": "1.1.2",
     "@nl-design-system-candidate/paragraph-css": "2.1.0",
     "@nl-design-system-candidate/skip-link-css": "1.0.2",
-    "@utrecht/component-library-css": "7.4.1"
+    "@utrecht/component-library-css": "7.4.2"
   },
   "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"
+    "build:css": "vite build",
+    "watch": "vite build --watch"
   }
 }

package/src/accordion/index.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-@use "../button/mixin";
-
 .utrecht-accordion {
   color: var(--rhc-accordion-color, inherit);
   display: flex;
@@ -52,11 +50,6 @@
   align-items: start;
 }
 
-.utrecht-accordion__button:focus-visible,
-.utrecht-accordion__button--focus-visible {
-  @include mixin.rhc-button--focus-visible;
-}
-
 .utrecht-accordion__button-icon {
   align-items: center;
   block-size: var(--utrecht-accordion-button-icon-size);

package/src/breadcrumb-nav/index.scss

@@ -3,29 +3,16 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-.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);
-
     &--current {
-      --utrecht-link-text-decoration-color: var(--utrecht-link-text-decoration-color);
       --utrecht-link-text-decoration: none;
 
-      color: var(--utrecht-breadcrumb-nav-link-current-color);
+      color: var(--rhc-breadcrumb-nav-link-current-color);
     }
+
     &--active {
       --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-active-text-decoration, underline);
-
-      color: var(--utrecht-breadcrumb-nav-link-active-color);
-      text-decoration-color: var(--utrecht-breadcrumb-nav-link-active-color);
     }
   }
-  &__separator {
-    --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-breadcrumb-nav-divider-size, 14px);
-    --utrecht-breadcrumb-nav-separator-color: --utrecht-breadcrumb-nav-divider-color;
-  }
 }

package/src/button/_mixin.scss

@@ -4,8 +4,6 @@
  * Copyright (c) 2020-2022 Frameless B.V.
  */
 
-@use "../link/mixin";
-
 @mixin rhc-button--icon-only {
   --utrecht-button-padding-block-end: var(--rhc-icon-only-button-padding-block-end, inherit);
   --utrecht-button-padding-block-start: var(--rhc-icon-only-button-padding-block-start, inherit);
@@ -13,10 +11,6 @@
   --utrecht-button-padding-inline-start: var(--rhc-icon-only-button-padding-inline-start, inherit);
 }
 
-@mixin rhc-button--focus-visible {
-  @include mixin.rhc-link--focus-visible;
-}
-
 @mixin invisible-but-accessible {
   block-size: 1px;
 

package/src/button/index.scss

@@ -4,11 +4,6 @@
  */
 @use "mixin";
 
-.rhc-button:focus-visible,
-.rhc-button--focus-visible {
-  @include mixin.rhc-button--focus-visible;
-}
-
 .rhc-button--icon-only {
   @include mixin.rhc-button--icon-only;
 }

package/src/card/_mixin.scss

@@ -0,0 +1,97 @@
+@mixin rhc-card {
+  @include rounded-border-corners;
+
+  box-sizing: border-box;
+  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);
+  inline-size: var(--rhc-card-inline-size, 328px);
+  line-height: var(--rhc-line-height-md, inherit);
+  position: relative;
+  text-decoration: none;
+}
+
+@mixin rhc-card--default {
+  background-color: var(--rhc-card-background-color, white);
+  border-color: var(--rhc-card-border-color, #cbd5e1);
+  border-style: solid;
+  border-width: var(--rhc-card-border-width, 1px);
+  color: var(--rhc-card-color, #154273);
+}
+
+@mixin rhc-card__content {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-card-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-padding-inline-end, 16px);
+  padding-inline-start: var(--rhc-card-padding-inline-start, 16px);
+  row-gap: var(--rhc-card-row-gap, 12px);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-block-end: 0;
+    margin-block-start: 0;
+  }
+}
+
+@mixin rhc-card__heading {
+  align-items: center;
+  display: flex;
+  font-size: var(--rhc-card-heading-font-size, 24px);
+  font-weight: var(--rhc-card-heading-font-weight, 700);
+  text-decoration: none;
+}
+
+@mixin rhc-card__heading--active {
+  text-decoration: var(--rhc-card-active-text-decoration, underline);
+}
+@mixin rhc-card__heading--hover {
+  text-decoration: var(--rhc-card-hover-text-decoration, underline);
+}
+@mixin rhc-card__heading--focus {
+  text-decoration: var(--rhc-card-focus-text-decoration, underline);
+}
+
+@mixin rhc-card__subheading {
+  align-items: center;
+  display: flex;
+  font-size: var(--rhc-font-size-lg);
+  text-decoration: none;
+}
+
+@mixin rhc-card__link {
+  color: var(--rhc-card-link-color, #01689b);
+  text-decoration: none !important;
+}
+
+@mixin rhc-card__link--active {
+  --utrecht-link-color: var(--rhc-card-link-active-color, #42145f);
+
+  color: var(--rhc-card-link-active-color, #42145f);
+  text-decoration: var(--rhc-card-link-active-text-decoration, none);
+}
+@mixin rhc-card__link--hover {
+  text-decoration: var(--rhc-card-link-hover-text-decoration, none);
+}
+@mixin rhc-card__link--focus {
+  text-decoration: var(--rhc-card-link-focus-text-decoration, none);
+}
+
+@mixin rhc-card__metadata {
+  color: var(--rhc-card-metadata-color, #154273);
+}
+
+@mixin rounded-border-corners {
+  border-end-end-radius: var(--rhc-card-border-end-end-radius, var(--rhc-card-border-radius, 5px));
+  border-end-start-radius: var(--rhc-card-border-end-start-radius, var(--rhc-card-border-radius, 5px));
+  border-start-end-radius: var(--rhc-card-border-start-end-radius, var(--rhc-card-border-radius, 5px));
+  border-start-start-radius: var(--rhc-card-border-start-start-radius, var(--rhc-card-border-radius, 5px));
+}

package/src/card/index.scss

@@ -0,0 +1,57 @@
+@use "mixin";
+
+.rhc-card {
+  @include mixin.rhc-card;
+  .utrecht-img:not(img[width]) {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+}
+
+.rhc-card--default {
+  @include mixin.rhc-card--default;
+}
+
+.rhc-card__heading {
+  @include mixin.rhc-card__heading;
+}
+
+.rhc-card__subheading {
+  @include mixin.rhc-card__subheading;
+}
+
+.rhc-card__metadata {
+  @include mixin.rhc-card__metadata;
+}
+
+.rhc-card__content {
+  @include mixin.rhc-card__content;
+}
+
+.rhc-card__link {
+  @include mixin.rhc-card__link;
+}
+
+.rhc-card:active .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+.rhc-card:focus .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+.rhc-card:hover .rhc-card__heading {
+  @include mixin.rhc-card__heading--active;
+}
+
+.rhc-card:active .rhc-card__link {
+  @include mixin.rhc-card__link--active;
+}
+.rhc-card:focus .rhc-card__link {
+  @include mixin.rhc-card__link--focus;
+}
+.rhc-card:hover .rhc-card__link {
+  @include mixin.rhc-card__link--hover;
+}
+
+.rhc-card__footer {
+  @include mixin.rhc-card__content;
+}

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

@@ -7,7 +7,7 @@
   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);
+  inline-size: 100%;
   line-height: var(--rhc-line-height-md, inherit);
   position: relative;
   text-decoration: none;
@@ -73,13 +73,13 @@
 }
 
 @mixin rhc-card-as-link__content {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
-  padding-block-start: var(--rhc-card-as-link-padding-block-start, 16px);
-  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, 16px);
-  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, 16px);
-  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+  @include container-content;
+
+  flex: 1;
+}
+
+@mixin rhc-card-as-link__footer {
+  @include container-content;
 }
 
 @mixin rhc-card-as-link--horizontal__content {
@@ -112,7 +112,7 @@
 
   block-size: 100%;
   filter: brightness(var(--rhc-card-as-link-full-bleed-opacity, 0.5));
-  inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  inline-size: 100%;
   position: absolute;
   z-index: -1;
 }
@@ -183,6 +183,16 @@
   color: var(--rhc-card-as-link-metadata-color, #154273);
 }
 
+@mixin container-content {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-as-link-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, 16px);
+  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, 16px);
+  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+}
+
 @mixin rounded-border-corners {
   border-end-end-radius: var(--rhc-card-as-link-border-end-end-radius, var(--rhc-card-as-link-border-radius, 5px));
   border-end-start-radius: var(--rhc-card-as-link-border-end-start-radius, var(--rhc-card-as-link-border-radius, 5px));

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

@@ -29,7 +29,7 @@
 }
 
 .rhc-card-as-link__footer {
-  @include mixin.rhc-card-as-link__content;
+  @include mixin.rhc-card-as-link__footer;
 }
 
 .rhc-card-as-link__image-container {

package/src/link/_mixin.scss

@@ -4,47 +4,20 @@
  */
 
 @mixin rhc-link--any-link {
-  --utrecht-icon-inset-block-start: var(--nl-link-icon-inset-block-start, inherit);
-
   align-items: baseline;
-  column-gap: var(--nl-link-column-gap, inherit);
+  column-gap: var(--rhc-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 {
-  min-block-size: var(--nl-link-icon-size, inherit);
-  min-inline-size: var(--nl-link-icon-size, inherit);
-}
-
-@mixin rhc-link--visited {
-  --nl-link-text-decoration-color: var(--nl-link-visited-color, inherit);
-
-  color: var(--utrecht-link-visited-color, inherit);
 }
 
-@mixin rhc-link--visited-icon {
-  color: var(--nl-link-visited-color, inherit);
-}
-
-@mixin rhc-link--active {
-  --nl-link-text-decoration: var(--nl-link-active-text-decoration, inherit);
-  --nl-link-text-decoration-line: var(--nl-link-active-text-decoration, inherit);
-}
-
-@mixin rhc-link--focus-visible {
-  --nl-link-text-decoration-line: var(--nl-link-focus-text-decoration, inherit);
-
-  z-index: var(--utrecht-stack-focus-z-index, 1);
-}
+@mixin rhc-link__icon {
+  --utrecht-icon-size: 1em;
 
-@mixin rhc-link--focus {
-  --nl-link-text-decoration-line: var(--nl-link-focus-text-decoration, inherit);
-  --_nl-link-state-text-decoration: none;
+  align-self: center;
+  line-height: 1.25em;
 }
 
+/* For rhc-link, `inline-flex` was chosen as default, to enable control on positioning of an icon.
+   To have a link in running text, please enable `inline` property and don't combine it with an icon. */
 @mixin rhc-link--inline {
   display: inline;
 }

package/src/link/index.scss

@@ -2,50 +2,17 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-@use "../button/mixin" as button-mixin;
+
 @use "mixin";
 @use "../../node_modules/@nl-design-system-candidate/link-css/dist/link.css";
 
-.utrecht-rich-text .nl-link {
-  margin-block-end: var(--nl-link-margin-block-end);
-}
-
-.nl-link svg {
-  flex-shrink: 0;
-}
-
 .nl-link:any-link {
   @include mixin.rhc-link--any-link;
 }
 
-.nl-link:any-link .utrecht-icon {
-  @include mixin.rhc-link--icon;
-}
-
-.nl-link:visited,
-.nl-link--visited {
-  @include mixin.rhc-link--visited;
-}
-
-.nl-link:visited .nl-icon {
-  @include mixin.rhc-link--visited-icon;
-}
-
-.nl-link:active,
-.nl-link--active {
-  @include mixin.rhc-link--active;
-}
-
-.nl-link:focus-visible,
-.nl-link--focus-visible,
-.nl-link:focus,
-.nl-link--focus {
-  @include mixin.rhc-link--focus-visible;
-  @include mixin.rhc-link--focus;
-}
-
-.nl-link .rhc-link__sr-only {
-  @include button-mixin.invisible-but-accessible;
+.nl-link .utrecht-icon,
+.rhc-link__icon {
+  @include mixin.rhc-link__icon;
 }
 
 .nl-link:any-link.rhc-link--inline {

package/src/link-list/index.scss

@@ -4,21 +4,13 @@
  */
 
 .utrecht-link-list__link {
-  --utrecht-link-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start, inherit);
-  --utrecht-link-text-decoration: var(--rhc-link-list-text-decoration);
-
   align-items: flex-start;
-  column-gap: var(--utrecht-link-list-item-column-gap, inherit);
 
   .utrecht-icon {
     flex-shrink: 0;
   }
 }
 
-.utrecht-link-list__link:visited {
-  --utrecht-link-color: var(--nl-link-visited-color);
-}
-
 .utrecht-link-list__item {
   display: inline-flex;
   font-family: var(--rhc-font-family-primary, inherit);
@@ -28,8 +20,3 @@
 .utrecht-link-list__item .utrecht-link:any-link {
   line-height: var(--rhc-line-height-md, inherit);
 }
-
-.utrecht-link-list__item .nl-link {
-  --nl-link-column-gap: var(--utrecht-link-list-item-column-gap);
-  --nl-link-text-decoration-line: var(--rhc-link-list-text-decoration);
-}

package/src/navbar/index.scss

@@ -1,6 +1,9 @@
 .rhc-nav-bar__container {
   align-items: center;
   background-color: var(--rhc-nav-bar-background-color);
+  border-block-end-color: var(--rhc-nav-bar-border-color);
+  border-block-end-style: solid;
+  border-block-end-width: var(--rhc-nav-bar-border-block-end-width);
   display: flex;
   inline-size: var(--rhc-nav-bar-container-inline-size);
   justify-content: center;
@@ -9,7 +12,6 @@
 .rhc-nav-bar {
   align-items: center;
   background-color: var(--rhc-nav-bar-background-color);
-  border-block-end-width: var(--rhc-nav-bar-border-block-end-width);
   color: var(--rhc-nav-bar-color);
   column-gap: var(--rhc-nav-bar-content-column-gap);
   display: flex;

package/src/ordered-list/_mixin.scss

@@ -0,0 +1 @@
+// Nothing here yet

package/src/ordered-list/index.scss

@@ -2,17 +2,5 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-
-.utrecht-ordered-list {
-  color: var(--utrecht-ordered-list-color);
-  font-weight: var(--utrecht-ordered-list-font-weight);
-  line-height: var(--utrecht-ordered-list-line-height);
-  margin-block-end: var(--utrecht-ordered-list-margin-block-end);
-  margin-block-start: var(--utrecht-ordered-list-margin-block-start);
-  margin-inline-start: var(--utrecht-ordered-list-margin-inline-start);
-  padding-inline-start: var(--utrecht-ordered-list-padding-inline-start);
-}
-
-.utrecht-ordered-list__item {
-  padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start);
-}
+// If needed to extend the Utrecht component add styles here.
+@use "mixin";

package/src/unordered-list/_mixin.scss

@@ -0,0 +1,3 @@
+@mixin rhc-unordered-list--nested {
+  margin-inline-start: var(--rhc-unordered-list-nested-margin-inline-start);
+}

package/src/unordered-list/index.scss

@@ -2,26 +2,8 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-
-.utrecht-unordered-list {
-  color: var(--utrecht-unordered-list-color);
-  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-height);
-  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start);
-}
-
-.utrecht-unordered-list__item {
-  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
-  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
-  padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start);
-}
+@use "mixin";
 
 .utrecht-unordered-list--nested {
-  margin-inline-start: 0;
-}
-
-.utrecht-unordered-list--nested > .utrecht-unordered-list__item::marker {
-  content: "○";
+  @include mixin.rhc-unordered-list--nested;
 }