@rijkshuisstijl-community/components-css 1.0.0-alpha.9 → 1.0.0-alpha.90

package/src/radio/index.scss

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-radio-button {
+  --utrecht-radio-button-icon-size: calc(var(--utrecht-radio-button-dot-size) * 0.5);
+}
+
+.utrecht-radio-button:focus,
+.utrecht-radio-button--focus {
+  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-checked-background-color, inherit);
+}
+
+.utrecht-radio-button:disabled,
+.utrecht-radio-button--disabled {
+  --utrecht-radio-button-checked-color: var(--utrecht-radio-button-disabled-color, inherit);
+}
+
+.utrecht-radio-button:invalid,
+.utrecht-radio-button--invalid {
+  --utrecht-radio-button-background-color: var(--utrecht-radio-button-invalid-background-color, inherit);
+  &:hover,
+  &:focus {
+    background-color: var(--utrecht-radio-button-background-color);
+  }
+}

package/src/radio-group/_mixin.scss

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

package/src/radio-group/index.scss

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-radio-group {
+  @include mixin.rhc-radio-group;
+}

package/src/select/index.scss

@@ -0,0 +1,16 @@
+.utrecht-select {
+  &--html-select:not([multiple]) {
+    // This is an svg of chevron down icon
+    --utrecht-select-background-image: url('data:image/svg+xml,<svg width="8" height="3" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" fill="%23154273"/></svg>');
+    --utrecht-select-image-background-position: right 0.5rem center;
+
+    background-position: var(--utrecht-select-image-background-position);
+    background-size: var(--utrecht-select-icon-size);
+  }
+  &--html-select-rtl:not([multiple]) {
+    --utrecht-select-image-background-position: left 0.5rem center;
+  }
+  &:focus {
+    border-width: var(--utrecht-select-focus-border-width, var(--rhc-border-width-m, 2px));
+  }
+}

package/src/separator/index.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-separator {
+  --utrecht-space-around: 1;
+
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  &--invisible {
+    --utrecht-separator-color: transparent;
+  }
+}

package/src/side-nav/index.scss

@@ -0,0 +1,52 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.rhc-side-nav {
+  display: var(--rhc-sidenav-display, flex);
+  flex-direction: column;
+  row-gap: var(--rhc-sidenav-row-gap);
+  &__list {
+    list-style: none;
+    margin-block: 0;
+    padding-block: 0;
+    padding-inline: 0;
+  }
+  &__link {
+    align-items: center;
+    color: var(--rhc-sidenav-link-color);
+    column-gap: var(--rhc-sidenav-link-column-gap);
+    display: flex;
+    font-family: var(--rhc-sidenav-link-font-family), sans-serif;
+    font-size: var(--rhc-sidenav-link-font-size);
+    font-weight: var(--rhc-sidenav-link-font-weight);
+    line-height: var(--rhc-sidenav-link-line-height);
+    padding-block-end: var(--rhc-sidenav-link-padding-block-end);
+    padding-block-start: var(--rhc-sidenav-link-padding-block-start);
+    text-decoration: var(--rhc-sidenav-link-text-decoration);
+    &[aria-current="page"] {
+      color: var(--rhc-sidenav-link-current-color);
+      font-weight: var(--rhc-sidenav-link-current-font-weight);
+    }
+    &:active {
+      color: var(--rhc-sidenav-link-active-color);
+      text-decoration: var(--rhc-sidenav-link-active-text-decoration);
+    }
+    &:focus {
+      background-color: var(--rhc-sidenav-link-focus-background-color);
+      color: var(--rhc-sidenav-link-focus-color);
+      text-decoration: var(--rhc-sidenav-link-focus-text-decoration);
+    }
+    &:focus-visible {
+      border-color: var(--rhc-sidenav-link-focus-border-color);
+      border-radius: var(--rhc-sidenav-link-focus-border-radius);
+      border-style: var(--rhc-sidenav-link-focus-border-style);
+      border-width: var(--rhc-sidenav-link-focus-border-width);
+    }
+    &:hover {
+      color: var(--rhc-sidenav-link-hover-color);
+      text-decoration: var(--rhc-sidenav-link-hover-text-decoration);
+    }
+  }
+}

package/src/skip-link/_mixin.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-skip-link {
+  box-shadow: var(--utrecht-skip-link-box-block-end-shadow-offset-x)
+    var(--utrecht-skip-link-box-block-end-shadow-offset-y) var(--utrecht-skip-link-box-block-end-shadow-blur-radius)
+    var(--utrecht-skip-link-box-block-end-shadow-spread-radius) var(--utrecht-skip-link-box-block-end-shadow-color);
+  font-weight: var(--utrecht-skip-link-font-weight, inherit);
+  position: revert;
+  text-underline-offset: var(--utrecht-skip-link-text-underline-offset, inherit);
+}

package/src/skip-link/index.scss

@@ -0,0 +1,43 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@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(--utrecht-skip-link-focus-background-color, inherit);
+  border-color: var(--utrecht-skip-link-focus-border-color, inherit);
+  border-style: var(--utrecht-skip-link-focus-border-style, inherit);
+  border-width: var(--utrecht-skip-link-focus-border-width, inherit);
+  color: var(--utrecht-skip-link-focus-color, inherit);
+  outline-color: var(--utrecht-skip-link-focus-outline-color, revert);
+  outline-offset: var(--utrecht-skip-link-focus-outline-offset, revert);
+  outline-style: var(--utrecht-skip-link-focus-outline-style, revert);
+  outline-width: var(--utrecht-skip-link-focus-outline-width, revert);
+  position: revert;
+  text-decoration: var(--utrecht-skip-link-focus-text-decoration, inherit);
+}
+
+.rhc-skip-link--focus-visible,
+.rhc-skip-link:focus-visible {
+  @include mixin.rhc-skip-link;
+
+  outline-color: var(--utrecht-skip-link-focus-visible-outline-color, var(--utrecht-focus-outline-color));
+  outline-offset: var(--utrecht-skip-link-focus-visible-outline-offset, var(--utrecht-focus-outline-offset));
+  outline-style: var(--utrecht-skip-link-focus-visible-outline-style, var(--utrecht-focus-outline-style));
+  outline-width: var(--utrecht-skip-link-focus-visible-outline-width, var(--utrecht-focus-outline-width));
+}

package/src/table/index.scss

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-table {
+  &__caption {
+    text-align: start;
+    &--rtl {
+      text-align: end;
+    }
+  }
+  &__cell {
+    color: var(--rhc-color-foreground-lint);
+  }
+
+  &__header {
+    tr:last-child > th {
+      border-block-end-color: var(--utrecht-table-header-border-block-end-color);
+      border-block-end-style: solid;
+      border-block-end-width: var(
+        --utrecht-table-header-sticky-border-block-end-width,
+        var(--utrecht-table-header-border-block-end-width, 0)
+      );
+    }
+
+    &--align-right {
+      --_utrecht-table-cell-text-align: end;
+    }
+    &--align-center {
+      --_utrecht-table-cell-text-align: center;
+    }
+    &--align-left {
+      --_utrecht-table-cell-text-align: start;
+    }
+
+    &--cell {
+      &-row {
+        --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;
+
+        border-block-end-color: var(--utrecht-table-row-border-block-end-color);
+        border-block-end-style: solid;
+        border-block-end-width: var(--utrecht-table-row-border-block-end-width, 2px);
+      }
+    }
+  }
+
+  &__footer {
+    color: var(--utrecht-table-footer-color);
+    td {
+      --utrecht-table-footer-font-weight: var(--utrecht-table-footer-font-weight, bold);
+
+      font-weight: var(--utrecht-table-footer-font-weight, bold);
+    }
+  }
+}

package/src/textarea/index.scss

@@ -0,0 +1,8 @@
+.utrecht-textarea {
+  &:focus {
+    border-width: var(--utrecht-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);
+  }
+}

package/src/textbox/index.scss

@@ -0,0 +1,6 @@
+.utrecht-textbox:focus {
+  border-width: var(--utrecht-textbox-focus-border-width, var(--rhc-border-width-m, 2px));
+}
+.utrecht-textbox--invalid:focus {
+  border-width: var(--utrecht-textbox-focus-border-width, var(--rhc-border-width-m, 2px));
+}

package/src/toggletip/_mixin.scss

@@ -0,0 +1,59 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-toggletip {
+  background-color: transparent;
+  border-radius: var(--rhc-toggletip-border-radius);
+  display: inline-flex;
+  flex-direction: column;
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__summary {
+  cursor: pointer;
+  display: inline-flex;
+  margin-block-end: var(--rhc-toggletip-gap, 16px);
+  max-inline-size: var(--rhc-toggletip-size);
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__button {
+  background-color: var(--rhc-toggletip-background-color);
+  border-color: var(--rhc-toggletip-border-color);
+  border-radius: var(--rhc-toggletip-border-radius);
+  border-width: var(--rhc-toggletip-border-width);
+  color: var(--rhc-toggletip-color);
+  cursor: pointer;
+  display: inline-flex;
+  max-inline-size: var(--rhc-toggletip-size);
+  padding-block: 0;
+  padding-inline: 0;
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__button--no-pointer-events {
+  pointer-events: none;
+}
+
+@mixin rhc-toggletip__icon {
+  size: var(--rhc-toggletip-icon-size);
+}
+
+@mixin rhc-toggletip--active {
+  background-color: var(--rhc-toggletip-active-background-color);
+  border-color: var(--rhc-toggletip-active-border-color);
+  border-style: solid;
+  color: var(--rhc-toggletip-active-color);
+}
+
+@mixin rhc-toggletip--hover {
+  background-color: var(--rhc-toggletip-hover-background-color);
+  color: var(--rhc-toggletip-hover-color);
+}
+
+@mixin rhc-toggletip--focus {
+  background-color: var(--rhc-toggletip-focus-background-color);
+  color: var(--rhc-toggletip-focus-color);
+}

package/src/toggletip/index.scss

@@ -0,0 +1,48 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-toggletip {
+  @include mixin.rhc-toggletip;
+}
+
+.rhc-toggletip__summary {
+  @include mixin.rhc-toggletip__summary;
+}
+
+.rhc-toggletip__button {
+  @include mixin.rhc-toggletip__button;
+}
+
+.rhc-toggletip__summary .rhc-toggletip__button {
+  // If button is not used standalone the summary should take precedence
+  @include mixin.rhc-toggletip__button--no-pointer-events;
+}
+
+.rhc-toggletip__button:focus {
+  @include mixin.rhc-toggletip--focus;
+}
+
+.rhc-toggletip__button:hover {
+  @include mixin.rhc-toggletip--hover;
+}
+
+.rhc-toggletip__summary:focus .rhc-toggletip__button {
+  @include mixin.rhc-toggletip--focus;
+}
+
+.rhc-toggletip__summary:hover .rhc-toggletip__button {
+  @include mixin.rhc-toggletip--hover;
+}
+
+.rhc-toggletip:active .rhc-toggletip__button,
+.rhc-toggletip[open] .rhc-toggletip__button {
+  @include mixin.rhc-toggletip--active;
+}
+
+.rhc-toggletip__icon {
+  @include mixin.rhc-toggletip__icon;
+}

package/src/unordered-list/index.scss

@@ -0,0 +1,27 @@
+/**
+ * @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-heigh);
+  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);
+}
+
+.utrecht-unordered-list--nested {
+  margin-inline-start: 0;
+}
+
+.utrecht-unordered-list--nested > .utrecht-unordered-list__item::marker {
+  content: "○";
+}

package/src/visually-hidden/_mixin.scss

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-visually-hidden {
+  block-size: 1px !important;
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  inline-size: 1px !important;
+  margin-block: -1px !important;
+  margin-inline: -1px !important;
+  opacity: 0%;
+  overflow: hidden !important;
+  padding-block: 0 !important;
+  padding-inline: 0 !important;
+  position: absolute;
+  white-space: nowrap !important;
+}

package/src/visually-hidden/index.scss

@@ -0,0 +1,5 @@
+@use "mixin";
+
+.rhc-visually-hidden {
+  @include mixin.rhc-visually-hidden;
+}