@rijkshuisstijl-community/components-css 1.0.0-alpha.27 → 1.0.0-alpha.7

package/button/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Example Button component

package/button/index.scss

@@ -2,17 +2,15 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-@import "./mixin";
 
-.rhc-button:focus-visible,
-.rhc-button--focus-visible {
-  @include rhc-button--focus-visible;
-}
-
-.rhc-button--icon-only {
-  @include rhc-button--icon-only;
-}
-
-.rhc-button--icon-only .rhc-button__sr-only {
-  @include invisible-but-accessible;
+.rhc-button {
+  background-color: var(--rhc-button-background-color);
+  border: 0;
+  color: var(--rhc-button-color);
+  font-family: system-ui;
+  font-size: 1rem;
+  padding-block-end: 1ex;
+  padding-block-start: 1ex;
+  padding-inline-end: 1ch;
+  padding-inline-start: 1ch;
 }

package/package.json

@@ -1,21 +1,25 @@
 {
-  "name": "@rijkshuisstijl-community/components-css",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.7",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
+  "name": "@rijkshuisstijl-community/components-css",
   "keywords": [
     "nl-design-system"
   ],
   "private": false,
   "publishConfig": {
-    "access": "public",
+    "access": "restricted",
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": {
-    "type": "git+ssh",
-    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
-    "directory": "packages/components-css"
+  "devDependencies": {
+    "@babel/core": "7.22.5",
+    "@mdx-js/react": "1.6.22",
+    "@storybook/addon-docs": "6.5.16",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "4.9.5",
+    "webpack": "5.88.0"
   },
-  "gitHead": "e939e0bb6bdcd206fe5b3aef0e11c7035e1dce2f"
+  "gitHead": "9b428801d2a503048bfe61d1e2ec0272a8fa1a4d"
 }

package/accordion/index.scss

@@ -1,68 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "../button/mixin";
-
-.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-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:focus-visible,
-.utrecht-accordion__button--focus-visible {
-  @include rhc-button--focus-visible;
-}
-
-.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);
-}

package/action-group/index.scss

@@ -1,11 +0,0 @@
-.utrecht-button-group {
-  column-gap: var(--utrecht-button-group-column-gap, 0.5rem);
-  row-gap: var(--utrecht-button-group-row-gap, 0.5rem);
-  @media (width <= 768px) {
-    flex-direction: column;
-    .utrecht-button,
-    .utrecht-button-link {
-      min-inline-size: 100%;
-    }
-  }
-}

package/alert/index.scss

@@ -1,27 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.rhc-alert__container {
-  display: flex;
-}
-
-.rhc-alert__icon-container {
-  inline-size: var(--utrecht-alert-icon-size);
-  inset-block-start: var(--utrecht-alert-icon-inset-block-start);
-  min-inline-size: var(--utrecht-alert-icon-size);
-  padding-inline-end: var(--rhc-space-100);
-  &--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);
-  }
-}

package/article/index.scss

@@ -1 +0,0 @@
-// if needed add styles here for the Article components.

package/blockquote/_mixin.scss

@@ -1,85 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-blockquote {
-  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);
-  border-color: var(--utrecht-blockquote-border-color);
-  border-end-end-radius: var(--utrecht-blockquote-border-end-end-radius);
-  border-end-start-radius: var(--utrecht-blockquote-border-end-start-radius);
-  border-inline-end-width: var(--utrecht-blockquote-border-inline-end-width);
-  border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width);
-  border-start-end-radius: var(--utrecht-blockquote-border-start-end-radius);
-  border-start-start-radius: var(--utrecht-blockquote-border-start-start-radius);
-  border-style: solid;
-  display: flex;
-  flex-direction: column;
-  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));
-  padding-inline-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-start));
-  row-gap: var(--utrecht-blockquote-row-gap, inherit);
-}
-
-@mixin rhc-blockquote-variation($variation) {
-  background-color: var(
-    --utrecht-blockquote-#{$variation}-background-color,
-    var(--utrecht-blockquote-background-color)
-  );
-  border-block-end-width: var(
-    --utrecht-blockquote-#{$variation}-border-block-end-width,
-    var(--utrecht-blockquote-border-block-end-width)
-  );
-  border-block-start-width: var(
-    --utrecht-blockquote-#{$variation}-border-block-start-width,
-    var(--utrecht-blockquote-border-block-start-width)
-  );
-  border-color: var(--utrecht-blockquote-#{$variation}-border-color, var(--utrecht-blockquote-border-color));
-  border-end-end-radius: var(
-    --utrecht-blockquote-#{$variation}-border-end-end-radius,
-    var(--utrecht-blockquote-border-end-end-radius)
-  );
-  border-end-start-radius: var(
-    --utrecht-blockquote-#{$variation}-border-end-start-radius,
-    var(--utrecht-blockquote-border-end-start-radius)
-  );
-  border-inline-end-width: var(
-    --utrecht-blockquote-#{$variation}-border-inline-end-width,
-    var(--utrecht-blockquote-border-inline-end-width)
-  );
-  border-inline-start-width: var(
-    --utrecht-blockquote-#{$variation}-border-inline-start-width,
-    var(--utrecht-blockquote-border-inline-start-width)
-  );
-  border-start-end-radius: var(
-    --utrecht-blockquote-#{$variation}-border-start-end-radius,
-    var(--utrecht-blockquote-border-start-end-radius)
-  );
-  border-start-start-radius: var(
-    --utrecht-blockquote-#{$variation}-border-start-start-radius,
-    var(--utrecht-blockquote-border-start-start-radius)
-  );
-  color: var(--utrecht-blockquote-#{$variation}-color, var(--utrecht-blockquote-content-color));
-  font-family: var(--utrecht-blockquote-#{$variation}-font-family, var(--utrecht-blockquote-content-font-family));
-  font-size: var(--utrecht-blockquote-#{$variation}-font-size, var(--utrecht-blockquote-content-font-size));
-  padding-block-end: var(
-    --utrecht-blockquote-#{$variation}-padding,
-    var(--utrecht-blockquote-#{$variation}-padding-block-end, var(--utrecht-blockquote-padding-block-end))
-  );
-  padding-block-start: var(
-    --utrecht-blockquote-#{$variation}-padding,
-    var(--utrecht-blockquote-#{$variation}-padding-block-start, var(--utrecht-blockquote-padding-block-start))
-  );
-  padding-inline-end: var(
-    --utrecht-blockquote-#{$variation}-padding,
-    var(--utrecht-blockquote-#{$variation}-padding-inline-end, var(--utrecht-blockquote-padding-inline-end))
-  );
-  padding-inline-start: var(
-    --utrecht-blockquote-#{$variation}-padding,
-    var(--utrecht-blockquote-#{$variation}-padding-inline-start, var(--utrecht-blockquote-padding-inline-start))
-  );
-  row-gap: var(--utrecht-blockquote-#{$variation}-row-gap, var(--utrecht-blockquote-row-gap));
-}

package/blockquote/index.scss

@@ -1,34 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "./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 rhc-blockquote;
-}
-
-.utrecht-blockquote__attribution {
-  font-family: var(--utrecht-blockquote-attribution-font-family, inherit);
-}
-
-.rhc-blockquote--blue-corner-border-variation {
-  @include rhc-blockquote-variation("blue-corner-border-variation");
-}
-
-.rhc-blockquote--pink-background-variation {
-  @include rhc-blockquote-variation("pink-background-variation");
-}
-
-.rhc-blockquote--pink-left-border-variation {
-  @include rhc-blockquote-variation("pink-left-border-variation");
-}
-
-.rhc-blockquote--pink-corner-border-variation {
-  @include rhc-blockquote-variation("pink-corner-border-variation");
-}

package/breadcrumb-nav/index.scss

@@ -1,25 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.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);
-
-    &--current {
-      color: var(--utrecht-breadcrumb-nav-link-current-color) !important;
-      text-decoration: var(--utrecht-breadcrumb-nav-link-current-text-decoration) !important;
-    }
-    &--active {
-      color: var(--utrecht-breadcrumb-nav-link-active-color) !important;
-      text-decoration: underline !important;
-      text-decoration-color: var(--utrecht-breadcrumb-nav-link-active-color) !important;
-    }
-  }
-  &__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/button/_mixin.scss

@@ -1,36 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
- */
-
-@import "../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);
-  --utrecht-button-padding-inline-end: var(--rhc-icon-only-button-padding-inline-end, inherit);
-  --utrecht-button-padding-inline-start: var(--rhc-icon-only-button-padding-inline-start, inherit);
-}
-
-@mixin rhc-button--focus-visible {
-  @include rhc-link--focus-visible;
-}
-
-@mixin invisible-but-accessible {
-  block-size: 1px !important;
-
-  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  inline-size: 1px !important;
-  /* stylelint-disable-next-line property-disallowed-list */
-  margin: -1px !important;
-  overflow: hidden !important;
-  /* stylelint-disable-next-line property-disallowed-list */
-  padding: 0 !important;
-  position: absolute !important;
-  white-space: nowrap !important;
-}

package/checkbox/_mixin.scss

@@ -1,103 +0,0 @@
-@mixin utrecht-checkbox--checked {
-  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>') !important;
-}
-
-@mixin utrecht-checkbox--disabled {
-  background-color: var(--utrecht-checkbox-disabled-background-color);
-  border-color: var(--utrecht-checkbox-disabled-border-color);
-  cursor: var(--utrecht-action-disabled-cursor, revert);
-}
-
-@mixin utrecht-checkbox--invalid {
-  background-color: var(--utrecht-checkbox-invalid-background-color);
-  border-color: var(--utrecht-checkbox-invalid-border-color);
-}
-
-@mixin utrecht-checkbox--checked--active {
-  background-color: var(--utrecht-checkbox-checked-active-background-color);
-  border-color: var(--utrecht-checkbox-checked-active-border-color);
-}
-
-@mixin utrecht-checkbox--checked--hover {
-  background-color: var(--utrecht-checkbox-checked-hover-background-color);
-  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>');
-  border-color: var(--utrecht-checkbox-checked-hover-border-color);
-}
-@mixin utrecht-checkbox--checked--disabled {
-  background-color: var(--utrecht-checkbox-disabled-background-color) !important;
-  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23475569"/></svg>') !important;
-}
-
-@mixin utrecht-checkbox--indeterminate--active {
-  background-color: var(--utrecht-checkbox-indeterminate-active-background-color);
-  border-color: var(--utrecht-checkbox-indeterminate-active-border-color);
-}
-
-@mixin utrecht-checkbox--indeterminate--hover {
-  background-color: var(--utrecht-checkbox-indeterminate-hover-background-color);
-  border-color: var(--utrecht-checkbox-indeterminate-hover-border-color);
-}
-
-@mixin utrecht-checkbox--indeterminate--focus {
-  background-color: var(--utrecht-checkbox-indeterminate-focus-background-color);
-  background-image: url('data:image/svg+xml,<svg  width="16" height="4" viewBox="0 0 16 4"   fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>') !important;
-  border-color: var(--utrecht-checkbox-indeterminate-focus-border-color);
-}
-
-@mixin utrecht-checkbox--indeterminate--disabled {
-  background-color: var(--utrecht-checkbox-indeterminate-disabled-background-color);
-  background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>') !important;
-  border-color: var(--utrecht-checkbox-indeterminate-disabled-border-color);
-}
-@mixin utrecht-custom-checkbox--html-input {
-  &:checked {
-    @include utrecht-checkbox--checked;
-    &:active {
-      @include utrecht-checkbox--checked--active;
-    }
-    &:hover {
-      @include utrecht-checkbox--checked--hover;
-    }
-    &:disabled {
-      @include utrecht-checkbox--checked--disabled;
-    }
-    &:focus {
-      background-color: var(--utrecht-checkbox-checked-focus-background-color);
-      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>') !important;
-      border-color: var(--utrecht-checkbox-checked-focus-border-color);
-      border-width: var(--utrecht-checkbox-checked-focus-border-width);
-    }
-    &:focus-visible {
-      background-color: var(--utrecht-checkbox-checked-focus-background-color);
-      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>') !important;
-      border-color: var(--utrecht-checkbox-checked-focus-border-color);
-      border-width: var(--utrecht-checkbox-checked-focus-border-width);
-    }
-  }
-  &:disabled:hover {
-    @include utrecht-checkbox--disabled;
-  }
-}
-@mixin utrecht-checkbox--indeterminate {
-  &:indeterminate,
-  &:checked:indeterminate {
-    background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="white"/></svg>');
-    background-position: center;
-    background-size: 16px 4px;
-  }
-  &:indeterminate {
-    &:active {
-      @include utrecht-checkbox--indeterminate--active;
-    }
-    &:hover {
-      @include utrecht-checkbox--indeterminate--hover;
-    }
-
-    &:focus {
-      @include utrecht-checkbox--indeterminate--focus;
-    }
-    &:disabled {
-      @include utrecht-checkbox--indeterminate--disabled;
-    }
-  }
-}

package/checkbox/index.scss

@@ -1,34 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "./mixin";
-
-.utrecht-checkbox {
-  margin-block-start: var(--rhc-space-50);
-  &--disabled {
-    @include utrecht-checkbox--disabled;
-  }
-  &--invalid {
-    @include utrecht-checkbox--invalid;
-  }
-}
-.utrecht-checkbox--custom.utrecht-checkbox--html-input,
-.utrecht-custom-checkbox--html-input {
-  @include utrecht-custom-checkbox--html-input;
-}
-.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate {
-  @include utrecht-checkbox--indeterminate;
-}
-.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"]:hover {
-  @include 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/dot-badge/_mixin.scss

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-dot-badge {
-  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));
-}

package/dot-badge/index.scss

@@ -1,9 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-@import "./mixin";
-
-.rhc-dot-badge {
-  @include rhc-dot-badge;
-}

package/fieldset/index.scss

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-form-fieldset__legend {
-  color: var(--utrecht-form-label-color);
-  font-size: var(--utrecht-form-label-font-size);
-  font-weight: var(--utrecht-form-label-font-weight);
-  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
-}

package/figure/index.scss

@@ -1,18 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-figure img {
-  border-end-end-radius: var(--utrecht-figure-img-border-end-end-radius);
-  border-end-start-radius: var(--utrecht-figure-img-border-end-start-radius);
-  border-start-end-radius: var(--utrecht-figure-img-border-start-end-radius);
-  border-start-start-radius: var(--utrecht-figure-img-border-start-start-radius);
-}
-
-.utrecht-figure__caption {
-  border-inline-start: var(--utrecht-figure-caption-border-width) solid var(--utrecht-figure-caption-border-color);
-  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/footer/index.scss

@@ -1,37 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-.rhc-footer {
-  background-color: var(--utrecht-page-footer-background-color);
-  color: var(--utrecht-page-footer-color);
-  display: flex;
-  flex-direction: row;
-  gap: var(--utrecht-page-footer-gap);
-  justify-content: flex-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);
-  @media (width <= 768px) {
-    flex-direction: column;
-  }
-}
-
-.rhc-footer__title {
-  color: var(--utrecht-page-footer-color) !important;
-}
-
-.rhc-footer__column--title {
-  --utrecht-space-around: 1;
-
-  color: var(--utrecht-page-footer-color) !important;
-  margin-block-end: var(--utrecht-page-footer-column-title-margin-block-end);
-}
-
-.rhc-footer__column {
-  --utrecht-link-hover-text-decoration: underline;
-  --_utrecht-link-state-text-decoration-color: --utrecht-page-footer-color;
-
-  flex: 1;
-}

package/form/index.scss

@@ -1,3 +0,0 @@
-.rhc-form-label--checkbox {
-  --utrecht-form-label-font-weight: var(--rhc-font-weight-regular, 400);
-}

package/form-field/index.scss

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-rich-text .utrecht-form-field {
-  margin-block-end: var(--utrecht-form-field-margin-block-end) !important;
-}
-
-.utrecht-form-field__status {
-  margin-block-end: var(--rhc-space-100, 0.5rem);
-  margin-block-start: var(--rhc-space-100, 0.5rem);
-}

package/form-field-error-message/index.scss

@@ -1,15 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-.utrecht-form-field-error-message {
-  &--icon-container {
-    display: flex;
-    &-icon {
-      --utrecht-icon-size: var(--utrecht-form-field-error-message-icon-size, 24px);
-
-      margin-inline-end: var(--utrecht-form-field-error-message-icon-margin-inline-end, 0.5rem);
-      min-inline-size: var(--utrecht-form-field-error-message-icon-min-width, 24px);
-    }
-  }
-}

package/form-field-radio-option/index.scss

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-form-field--radio {
-  --utrecht-form-field-label-margin-block-end: var(--rhc-form-field-radio-option-row-gap, inherit);
-  --utrecht-radio-button-margin-inline-end: var(--rhc-form-field-radio-option-column-gap, inherit);
-}
-
-.utrecht-form-field--radio .utrecht-form-field__label {
-  --utrecht-form-label-font-weight: var(--rhc-form-field-radio-option-font-weight, inherit);
-}