@rijkshuisstijl-community/components-css 5.0.0 → 7.0.0

package/index.scss

@@ -15,11 +15,11 @@
 @use "src/button/index" as button;
 @use "src/card-as-link/index" as cardAsLink;
 @use "src/card/index" as card;
+@use "src/checkbox/index" as checkbox;
 @use "src/code-input/index" as codeInput;
 @use "src/code-input-group/index" as codeInputGroup;
 @use "src/data-badge-button/index" as dataBadgeButton;
 @use "src/dot-badge/index" as dotBadge;
-@use "src/checkbox/index" as checkbox;
 @use "src/expandable-checkbox-group/index" as expandableCheckboxGroup;
 @use "src/figure/index" as figure;
 @use "src/file/index" as file;
@@ -41,6 +41,7 @@
 @use "src/number-badge/index" as numberBadge;
 @use "src/ordered-list/index" as orderedList;
 @use "src/paragraph/index.scss" as paragraph;
+@use "src/page-number-navigation/index" as pagination;
 @use "src/pre-heading/index" as preHeading;
 @use "src/radio/index" as radio;
 @use "src/radio-group/index" as radioGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "5.0.0",
+  "version": "7.0.0",
   "type": "module",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -24,12 +24,13 @@
     "vite": "6.3.5"
   },
   "dependencies": {
+    "@amsterdam/design-system-css": "1.0.1",
     "@nl-design-system-candidate/heading-css": "1.1.0",
     "@nl-design-system-candidate/link-css": "2.0.0",
     "@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.2"
+    "@utrecht/component-library-css": "8.0.0"
   },
   "scripts": {
     "dev": "vite build --watch",

package/src/accordion/index.scss

@@ -2,67 +2,3 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-
-.utrecht-accordion {
-  color: var(--rhc-accordion-color, inherit);
-  display: flex;
-  flex-direction: column;
-  margin-block-end: var(--utrecht-accordion-margin-block-end);
-  row-gap: var(--utrecht-accordion-row-gap, inherit);
-}
-
-.utrecht-accordion__header {
-  margin-block-end: var(--rhc-accordion-header-margin-block-end, var(--rhc-accordion-header-margin, inherit));
-  margin-block-start: var(--rhc-accordion-header-margin-block-start, var(--rhc-accordion-header-margin, inherit));
-  margin-inline-end: var(--rhc-accordion-header-margin-inline-end, var(--rhc-accordion-header-margin, inherit));
-  margin-inline-start: var(--rhc-accordion-header-margin-inline-start, var(--rhc-accordion-header-margin, inherit));
-}
-
-.utrecht-accordion__section {
-  border-block-end-width: var(
-    --rhc-accordion-section-border-block-end-width,
-    var(--rhc-accordion-section-border-width, inherit)
-  );
-  border-block-start-width: var(
-    --rhc-accordion-section-border-block-start-width,
-    var(--rhc-accordion-section-border-width, inherit)
-  );
-  border-color: var(--rhc-accordion-section-border-color, inherit);
-  border-inline-end-width: var(
-    --rhc-accordion-section-border-inline-end-width,
-    var(--rhc-accordion-section-border-width, inherit)
-  );
-  border-inline-start-width: var(
-    --rhc-accordion-section-border-inline-start-width,
-    var(--rhc-accordion-section-border-width, inherit)
-  );
-  border-style: solid;
-}
-
-.utrecht-button.utrecht-accordion__button {
-  --_utrecht-button-appearance-font-weight: var(--rhc-accordion-button-font-weight, inherit);
-  --utrecht-button-border-radius: var(--rhc-accordion-border-radius, inherit);
-  --utrecht-button-padding-block-end: var(--rhc-accordion-button-padding-block-end, inherit);
-  --utrecht-button-padding-block-start: var(--rhc-accordion-button-padding-block-start, inherit);
-  --utrecht-button-padding-inline-end: var(--rhc-accordion-button-padding-inline-end, inherit);
-  --utrecht-button-padding-inline-start: var(--rhc-accordion-button-padding-inline-start, inherit);
-
-  align-items: start;
-}
-
-.utrecht-accordion__button-icon {
-  align-items: center;
-  block-size: var(--utrecht-accordion-button-icon-size);
-  display: flex;
-  fill: var(--utrecht-accordion-button-color, inherit);
-  inline-size: var(--utrecht-accordion-button-icon-size);
-  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/alert/_mixin.scss

@@ -0,0 +1,9 @@
+@mixin rhc-alert {
+  // As we use the nl paragraph and heading instead of the Utrecht one we need to properly map the alert overwrites
+  --nl-heading-level-1-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+  --nl-heading-level-2-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+  --nl-heading-level-3-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+  --nl-heading-level-4-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+  --nl-heading-level-5-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+  --nl-paragraph-color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
+}

package/src/alert/index.scss

@@ -2,41 +2,8 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+@use "mixin";
 
-.rhc-alert {
-  --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);
-  --nl-heading-level-1-color: var(--utrecht-alert-color);
-  --nl-heading-level-2-color: var(--utrecht-alert-color);
-  --nl-heading-level-3-color: var(--utrecht-alert-color);
-  --nl-heading-level-4-color: var(--utrecht-alert-color);
-  --nl-heading-level-5-color: var(--utrecht-alert-color);
-  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
-  --nl-paragraph-line-height: var(--utrecht-alert-message-line-height);
-  --nl-paragraph-color: var(--utrecht-alert-color);
-}
-
-.utrecht-alert__message {
-  column-gap: var(--utrecht-alert-message-column-gap);
-  display: flex;
-}
-
-.rhc-alert__icon-container {
-  inline-size: var(--utrecht-alert-icon-size);
-  min-inline-size: var(--utrecht-alert-icon-size);
-  &--ok {
-    color: var(--rhc-color-feedback-success-default);
-  }
-  &--error {
-    color: var(--rhc-color-feedback-error-default);
-  }
-  &--warning {
-    color: var(--rhc-color-feedback-warning-default);
-  }
-  &--info {
-    color: var(--rhc-color-feedback-info-default);
-  }
+.utrecht-alert {
+  @include mixin.rhc-alert;
 }

package/src/page-number-navigation/index.scss

@@ -0,0 +1,2 @@
+@use "@amsterdam/design-system-css/dist/pagination/pagination.css";
+@use "@amsterdam/design-system-css/dist/visually-hidden/visually-hidden.css";

package/src/skip-link/index.scss

@@ -3,39 +3,3 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 @use "../../node_modules/@nl-design-system-candidate/skip-link-css/dist/skip-link.css";
-@use "mixin";
-
-.rhc-skip-link {
-  @include mixin.rhc-skip-link;
-}
-
-.rhc-skip-link--hidden,
-.rhc-skip-link--visible-on-focus {
-  inset-block-start: -9999px;
-  position: fixed;
-}
-
-.rhc-skip-link--focus,
-.rhc-skip-link:focus {
-  @include mixin.rhc-skip-link;
-
-  background-color: var(--nl-skip-link-focus-background-color, inherit);
-  border-color: var(--nl-skip-link-focus-border-color, inherit);
-  border-style: var(--nl-skip-link-focus-border-style, inherit);
-  border-width: var(--nl-skip-link-focus-border-width, inherit);
-  color: var(--nl-skip-link-focus-color, inherit);
-  outline: var(--nl-skip-link-focus-outline-color, revert) var(--nl-skip-link-focus-outline-style, revert)
-    var(--nl-skip-link-focus-outline-width, revert);
-  outline-offset: var(--nl-skip-link-focus-outline-offset, revert);
-  position: revert;
-  text-decoration: var(--nl-skip-link-focus-text-decoration, inherit);
-}
-
-.rhc-skip-link--focus-visible,
-.rhc-skip-link:focus-visible {
-  @include mixin.rhc-skip-link;
-
-  outline: var(--nl-skip-link-focus-visible-outline-color) var(--nl-skip-link-focus-visible-outline-style)
-    var(--nl-skip-link-focus-visible-outline-width);
-  outline-offset: var(--nl-skip-link-focus-visible-outline-offset);
-}

package/src/skip-link/_mixin.scss

@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-skip-link {
-  box-shadow: var(--nl-skip-link-box-block-end-shadow-offset-x) var(--nl-skip-link-box-block-end-shadow-offset-y)
-    var(--nl-skip-link-box-block-end-shadow-blur-radius) var(--nl-skip-link-box-block-end-shadow-spread-radius)
-    var(--nl-skip-link-box-block-end-shadow-color);
-  font-family: var(--rhc-font-family-primary, inherit), serif;
-  font-size: var(--rhc-font-size-xs-desktop, inherit);
-  font-weight: var(--nl-skip-link-font-weight, inherit);
-  line-height: var(--rhc-line-height-md, inherit);
-  padding-block-end: var(--nl-skip-link-padding-block-end, inherit);
-  padding-block-start: var(--nl-skip-link-padding-block-start, inherit);
-  padding-inline-end: var(--nl-skip-link-padding-inline-end, inherit);
-  padding-inline-start: var(--nl-skip-link-padding-inline-start, inherit);
-  position: revert;
-  text-underline-offset: var(--nl-skip-link-text-underline-offset, inherit);
-}