@rijkshuisstijl-community/components-css 16.0.1 → 17.0.0

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

@@ -1,222 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-card-as-link {
-  @include rounded-border-corners;
-
-  box-sizing: border-box;
-  column-gap: var(--rhc-card-as-link-column-gap, var(--rhc-space-xl));
-  display: inline-flex;
-  flex-direction: column;
-  font-family: var(--rhc-text-font-family-default, inherit);
-  font-size: var(--rhc-card-as-link-font-size-md, inherit);
-  inline-size: 100%;
-  line-height: var(--rhc-text-line-height-md, inherit);
-  position: relative;
-  text-decoration: none;
-}
-
-@mixin rhc-card-as-link--default {
-  background-color: var(--rhc-card-as-link-background-color);
-  border-color: var(--rhc-card-as-link-border-color);
-  border-style: solid;
-  border-width: var(--rhc-card-as-link-border-width, var(--rhc-border-width-sm));
-  color: var(--rhc-card-as-link-color);
-}
-
-@mixin rhc-card-as-link--full-bleed {
-  --rhc-card-as-link-heading-color: var(--rhc-card-as-link-full-bleed-color);
-  --rhc-card-as-link-metadata-color: var(
-    --rhc-card-as-link-full-bleed-metadata-color,
-    var(--rhc-card-as-link-full-bleed-color)
-  );
-
-  color: var(--rhc-card-as-link-full-bleed-color);
-}
-
-@mixin rhc-card-as-link--horizontal {
-  --rhc-card-as-link-heading-color: var(--rhc-card-as-link-horizontal-color);
-
-  color: var(--rhc-card-as-link-horizontal-color);
-  flex-direction: row;
-  gap: 0;
-  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
-}
-
-@mixin rhc-card-as-link--active {
-  background-color: var(--rhc-card-as-link-active-background-color);
-}
-
-@mixin rhc-card-as-link--default--focus {
-  background-color: var(--rhc-card-as-link-focus-background-color);
-}
-
-@mixin rhc-card-as-link--default--hover {
-  background-color: var(--rhc-card-as-link-hover-background-color);
-}
-
-@mixin rhc-card-as-link--full-bleed__footer {
-  padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, var(--rhc-space-xl));
-  padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, var(--rhc-space-xl));
-  padding-inline-end: var(--rhc-card-as-link-full-bleed-padding-inline-end, 0);
-  padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
-}
-
-@mixin rhc-card-as-link__button {
-  z-index: 1;
-}
-
-@mixin rhc-card-as-link__image-container {
-  order: -1;
-}
-
-@mixin rhc-card-as-link__image {
-  aspect-ratio: 16 / 9;
-  block-size: 100%;
-}
-
-@mixin rhc-card-as-link__content {
-  @include container-content;
-
-  flex: 1;
-}
-
-@mixin rhc-card-as-link__footer {
-  @include container-content;
-}
-
-@mixin rhc-card-as-link--horizontal__content {
-  @include rounded-border-corners;
-
-  background-color: var(--rhc-card-as-link-horizontal-background-color);
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-  color: var(--rhc-card-as-link-horizontal-color);
-  column-gap: var(--rhc-card-as-link-column-gap, var(--rhc-space-xl));
-  flex-direction: row;
-  padding-block-end: var(--rhc-card-as-link-horizontal-padding-block-end, 0);
-  padding-block-start: var(--rhc-card-as-link-horizontal-padding-block-start, 0);
-  padding-inline-end: var(--rhc-card-as-link-horizontal-padding-inline-end, 0);
-  padding-inline-start: var(--rhc-card-as-link-horizontal-padding-inline-start, 0);
-  row-gap: var(--rhc-card-as-link-row-gap, var(--rhc-size-quarter-lint));
-}
-
-@mixin rhc-card-as-link--horizontal__heading {
-  inline-size: var(--rhc-card-as-link-horizontal-heading-inline-size);
-}
-
-@mixin rhc-card-as-link--full-bleed__image-container {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-@mixin rhc-card-as-link--full-bleed__image {
-  @include rounded-border-corners;
-
-  block-size: 100%;
-  filter: brightness(var(--rhc-card-as-link-full-bleed-opacity, 0.5));
-  inline-size: 100%;
-  position: absolute;
-  z-index: -1;
-}
-
-@mixin rhc-card-as-link--horizontal__image {
-  @include rounded-border-corners;
-
-  aspect-ratio: 1 / 1;
-  border-end-end-radius: 0;
-  border-start-end-radius: 0;
-  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
-}
-
-@mixin rhc-card-as-link__heading {
-  align-items: center;
-  color: var(--rhc-card-as-link-heading-color);
-  display: flex;
-  font-size: var(--rhc-card-as-link-heading-font-size, var(--rhc-space-2xl));
-  font-weight: var(--rhc-card-as-link-heading-font-weight, 700);
-}
-
-@mixin rhc-card-as-link__heading--active {
-  text-decoration: var(--rhc-card-as-link-active-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__heading--hover {
-  text-decoration: var(--rhc-card-as-link-hover-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__heading--focus {
-  text-decoration: var(--rhc-card-as-link-focus-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__icon {
-  color: var(--rhc-card-as-link-icon-color);
-  size: var(--rhc-card-as-link-icon-size, 24px);
-}
-
-@mixin rhc-card-as-link__link {
-  color: var(--rhc-card-as-link-link-color);
-  text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
-}
-
-@mixin rhc-card-as-link__anchor {
-  a::after {
-    content: "";
-    inset: 0;
-    position: absolute;
-  }
-}
-
-@mixin rhc-card-as-link__link--active {
-  --utrecht-link-color: var(--rhc-card-as-link-link-active-color);
-
-  color: var(--rhc-card-as-link-link-active-color);
-  text-decoration: var(--rhc-card-as-link-link-active-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__link--hover {
-  text-decoration: var(--rhc-card-as-link-link-hover-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__link--focus {
-  text-decoration: var(--rhc-card-as-link-link-focus-text-decoration, none);
-}
-
-@mixin rhc-card-as-link__metadata {
-  color: var(--rhc-card-as-link-metadata-color);
-}
-
-@mixin container-content {
-  display: flex;
-  flex-direction: column;
-  padding-block-end: var(--rhc-card-as-link-padding-block-end, var(--rhc-space-xl));
-  padding-block-start: var(--rhc-card-as-link-padding-block-start, var(--rhc-space-xl));
-  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, var(--rhc-space-xl));
-  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, var(--rhc-space-xl));
-  row-gap: var(--rhc-card-as-link-row-gap, var(--rhc-size-quarter-lint));
-}
-
-@mixin rounded-border-corners {
-  border-end-end-radius: var(
-    --rhc-card-as-link-border-end-end-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-end-start-radius: var(
-    --rhc-card-as-link-border-end-start-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-end-radius: var(
-    --rhc-card-as-link-border-start-end-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-  border-start-start-radius: var(
-    --rhc-card-as-link-border-start-start-radius,
-    var(--rhc-card-as-link-border-radius, var(--rhc-border-radius-md))
-  );
-}
-
-@mixin rhc-card-as-link__empty-element {
-  display: none;
-}

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

@@ -1,126 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@use "mixin";
-
-.rhc-card-as-link {
-  @include mixin.rhc-card-as-link;
-  .utrecht-img:not(img[width]) {
-    block-size: 100%;
-    inline-size: 100%;
-  }
-}
-
-.rhc-card-as-link__button {
-  @include mixin.rhc-card-as-link__button;
-}
-
-.rhc-card-as-link div:empty {
-  @include mixin.rhc-card-as-link__empty-element;
-}
-
-.rhc-card-as-link--default {
-  @include mixin.rhc-card-as-link--default;
-}
-
-.rhc-card-as-link--full-bleed {
-  @include mixin.rhc-card-as-link--full-bleed;
-}
-
-.rhc-card-as-link--horizontal {
-  @include mixin.rhc-card-as-link--horizontal;
-}
-
-.rhc-card-as-link__footer {
-  @include mixin.rhc-card-as-link__footer;
-}
-
-.rhc-card-as-link__image-container {
-  @include mixin.rhc-card-as-link__image-container;
-}
-
-.rhc-card-as-link__image {
-  @include mixin.rhc-card-as-link__image;
-}
-
-.rhc-card-as-link__heading {
-  @include mixin.rhc-card-as-link__heading;
-}
-
-.rhc-card-as-link__icon {
-  @include mixin.rhc-card-as-link__icon;
-}
-
-.rhc-card-as-link__metadata {
-  @include mixin.rhc-card-as-link__metadata;
-}
-
-.rhc-card-as-link__content {
-  @include mixin.rhc-card-as-link__content;
-}
-
-.rhc-card-as-link--horizontal .rhc-card-as-link__content {
-  @include mixin.rhc-card-as-link--horizontal__content;
-}
-
-.rhc-card-as-link--horizontal .rhc-card-as-link__heading {
-  @include mixin.rhc-card-as-link--horizontal__heading;
-}
-
-.rhc-card-as-link--horizontal .rhc-card-as-link__image {
-  @include mixin.rhc-card-as-link--horizontal__image;
-}
-
-.rhc-card-as-link--full-bleed .rhc-card-as-link__footer {
-  @include mixin.rhc-card-as-link--full-bleed__footer;
-}
-
-.rhc-card-as-link--full-bleed .rhc-card-as-link__image {
-  @include mixin.rhc-card-as-link--full-bleed__image;
-}
-
-.rhc-card-as-link__link {
-  @include mixin.rhc-card-as-link__link;
-}
-
-.rhc-card-as-link__anchor {
-  @include mixin.rhc-card-as-link__anchor;
-}
-
-.rhc-card-as-link:active {
-  @include mixin.rhc-card-as-link--active;
-}
-
-.rhc-card-as-link:active .rhc-card-as-link__heading {
-  @include mixin.rhc-card-as-link__heading--active;
-}
-
-.rhc-card-as-link:active .rhc-card-as-link__link {
-  @include mixin.rhc-card-as-link__link--active;
-}
-
-.rhc-card-as-link--default:focus {
-  @include mixin.rhc-card-as-link--default--focus;
-}
-
-.rhc-card-as-link:focus .rhc-card-as-link__heading {
-  @include mixin.rhc-card-as-link__heading--active;
-}
-
-.rhc-card-as-link:focus .rhc-card-as-link__link {
-  @include mixin.rhc-card-as-link__link--focus;
-}
-
-.rhc-card-as-link--default:hover {
-  @include mixin.rhc-card-as-link--default--hover;
-}
-
-.rhc-card-as-link:hover .rhc-card-as-link__heading {
-  @include mixin.rhc-card-as-link__heading--active;
-}
-
-.rhc-card-as-link:hover .rhc-card-as-link__link {
-  @include mixin.rhc-card-as-link__link--hover;
-}

package/src/checkbox/_mixin.scss

@@ -1,119 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-
-@mixin rhc-checkbox-label--checkbox {
-  display: flex;
-}
-
-@mixin rhc-checkbox-label--checkbox-label {
-  margin-block-start: var(--rhc-checkbox-label-margin-block-start);
-  order: 0;
-}
-
-@mixin rhc-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>');
-}
-
-@mixin rhc-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 rhc-checkbox--invalid {
-  background-color: var(--utrecht-checkbox-invalid-background-color);
-  border-color: var(--utrecht-checkbox-invalid-border-color);
-}
-
-@mixin rhc-checkbox--checked--active {
-  background-color: var(--utrecht-checkbox-checked-active-background-color);
-  border-color: var(--utrecht-checkbox-checked-active-border-color);
-}
-
-@mixin rhc-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 rhc-checkbox--checked--disabled {
-  background-color: var(--utrecht-checkbox-disabled-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="%23475569"/></svg>');
-}
-
-@mixin rhc-checkbox--indeterminate--active {
-  background-color: var(--utrecht-checkbox-indeterminate-active-background-color);
-  border-color: var(--utrecht-checkbox-indeterminate-active-border-color);
-}
-
-@mixin rhc-checkbox--indeterminate--hover {
-  background-color: var(--utrecht-checkbox-indeterminate-hover-background-color);
-  border-color: var(--utrecht-checkbox-indeterminate-hover-border-color);
-}
-
-@mixin rhc-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>');
-  border-color: var(--utrecht-checkbox-indeterminate-focus-border-color);
-}
-
-@mixin rhc-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>');
-  border-color: var(--utrecht-checkbox-indeterminate-disabled-border-color);
-}
-
-@mixin rhc-custom-checkbox--html-input {
-  &:checked {
-    @include rhc-checkbox--checked;
-    &:active {
-      @include rhc-checkbox--checked--active;
-    }
-    &:hover {
-      @include rhc-checkbox--checked--hover;
-    }
-    &:disabled {
-      @include rhc-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>');
-      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>');
-      border-color: var(--utrecht-checkbox-checked-focus-border-color);
-      border-width: var(--utrecht-checkbox-checked-focus-border-width);
-    }
-  }
-  &:disabled:hover {
-    @include rhc-checkbox--disabled;
-  }
-}
-
-@mixin rhc-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 rhc-checkbox--indeterminate--active;
-    }
-    &:hover {
-      @include rhc-checkbox--indeterminate--hover;
-    }
-
-    &:focus {
-      @include rhc-checkbox--indeterminate--focus;
-    }
-    &:disabled {
-      @include rhc-checkbox--indeterminate--disabled;
-    }
-  }
-}

package/src/checkbox/index.scss

@@ -1,35 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 Community for NL Design System
- */
-@use "mixin";
-
-.rhc-checkbox.utrecht-checkbox,
-.rhc-form-field-checkbox-option .utrecht-checkbox {
-  margin-block-start: var(--rhc-space-sm);
-  &--disabled {
-    @include mixin.rhc-checkbox--disabled;
-  }
-  &--invalid {
-    @include mixin.rhc-checkbox--invalid;
-  }
-}
-.rhc-form-field-checkbox-option .utrecht-form-label--checkbox {
-  @include mixin.rhc-checkbox-label--checkbox;
-}
-.rhc-form-field-checkbox-option .utrecht-form-label--checkbox .utrecht-checkbox--custom {
-  @include mixin.rhc-checkbox-label--checkbox-label;
-}
-.rhc-checkbox.utrecht-checkbox--custom.utrecht-checkbox--html-input,
-.rhc-checkbox.utrecht-custom-checkbox--html-input,
-.rhc-form-field-checkbox-option .utrecht-checkbox--custom.utrecht-checkbox--html-input {
-  @include mixin.rhc-custom-checkbox--html-input;
-}
-.rhc-checkbox.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
-.rhc-form-field-checkbox-option .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate {
-  @include mixin.rhc-checkbox--indeterminate;
-}
-.rhc-checkbox.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"]:hover,
-.rhc-form-field-checkbox-option .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"]:hover {
-  @include mixin.rhc-checkbox--invalid;
-}

package/src/checkbox-group/index.scss

@@ -1,17 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2026 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);
-
-  .utrecht-checkbox {
-    align-self: baseline;
-    line-height: var(--rhc-text-line-height-md, inherit);
-  }
-}