@rijkshuisstijl-community/components-css 1.0.0-alpha.8 → 1.0.0-alpha.80

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/vite.config.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-undef */
+import path from 'node:path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    outDir: path.resolve(__dirname, 'dist'), // Output folder for compiled CSS
+    rollupOptions: {
+      input: path.resolve(__dirname, 'index.scss'), // Entry point for SCSS
+      output: {
+        // Disable JS output and ensure only CSS is generated
+        format: 'es',
+        assetFileNames: 'index.css', // Ensure the CSS file gets the correct name
+      },
+    },
+    cssCodeSplit: false, // Avoid splitting the CSS file into multiple parts
+  },
+});

package/button/README.md

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

package/button/index.scss

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.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;
-}