@rijkshuisstijl-community/components-css 1.0.0-alpha.59 → 1.0.0-alpha.60

package/index.scss

@@ -3,41 +3,44 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
-@use "accordion/index" as accordion;
-@use "action-group/index" as actionGroup;
-@use "alert/index" as alert;
-@use "article/index" as article;
-@use "blockquote/index" as blockquote;
-@use "breadcrumb-nav/index" as breadcrumb;
-@use "button/index" as button;
-@use "card/index" as card;
-@use "dot-badge/index" as dotBadge;
-@use "checkbox/index" as checkbox;
-@use "figure/index" as figure;
-@use "file-input/index" as fileInput;
-@use "form/index" as form;
-@use "form-field/index" as formField;
-@use "form-field-error-message/index" as formFieldError;
-@use "form-field-radio-option/index" as formFieldRadioOption;
-@use "footer/index" as footer;
-@use "hero/index" as hero;
-@use "link-list/index" as linkList;
-@use "link-list-card/index" as linkListCard;
-@use "link/index" as link;
-@use "logo/index" as logo;
-@use "navbar/index" as navbar;
-@use "message-list/index" as messageList;
-@use "navigation-list/index" as navigationList;
-@use "ordered-list/index" as orderedList;
-@use "radio/index" as radio;
-@use "radio-group/index" as radioGroup;
-@use "select/index" as select;
-@use "separator/index" as separator;
-@use "side-nav/index" as sideNav;
-@use "skip-link/index" as skipLink;
-@use "table/index" as table;
-@use "textarea/index" as textarea;
-@use "textbox/index" as textbox;
-@use "toggletip/index" as toggletip;
-@use "unordered-list/index" as unorderedList;
-@use "badgecounter/index" as badgecounter;
+@use "@utrecht/component-library-css/dist/index.css";
+@use "@utrecht/component-library-css/dist/html.css";
+
+@use "src/accordion/index" as accordion;
+@use "src/action-group/index" as actionGroup;
+@use "src/alert/index" as alert;
+@use "src/article/index" as article;
+@use "src/blockquote/index" as blockquote;
+@use "src/breadcrumb-nav/index" as breadcrumb;
+@use "src/button/index" as button;
+@use "src/card/index" as card;
+@use "src/dot-badge/index" as dotBadge;
+@use "src/checkbox/index" as checkbox;
+@use "src/figure/index" as figure;
+@use "src/file-input/index" as fileInput;
+@use "src/form/index" as form;
+@use "src/form-field/index" as formField;
+@use "src/form-field-error-message/index" as formFieldError;
+@use "src/form-field-radio-option/index" as formFieldRadioOption;
+@use "src/footer/index" as footer;
+@use "src/hero/index" as hero;
+@use "src/link-list/index" as linkList;
+@use "src/link-list-card/index" as linkListCard;
+@use "src/link/index" as link;
+@use "src/logo/index" as logo;
+@use "src/navbar/index" as navbar;
+@use "src/message-list/index" as messageList;
+@use "src/navigation-list/index" as navigationList;
+@use "src/ordered-list/index" as orderedList;
+@use "src/radio/index" as radio;
+@use "src/radio-group/index" as radioGroup;
+@use "src/select/index" as select;
+@use "src/separator/index" as separator;
+@use "src/side-nav/index" as sideNav;
+@use "src/skip-link/index" as skipLink;
+@use "src/table/index" as table;
+@use "src/textarea/index" as textarea;
+@use "src/textbox/index" as textbox;
+@use "src/toggletip/index" as toggletip;
+@use "src/unordered-list/index" as unorderedList;
+@use "src/badgecounter/index" as badgecounter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijkshuisstijl-community/components-css",
-  "version": "1.0.0-alpha.59",
+  "version": "1.0.0-alpha.60",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -17,5 +17,17 @@
     "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
     "directory": "packages/components-css"
   },
-  "gitHead": "f92d57f3c46c652c4b2d569bd14668ebb36d07f9"
+  "devDependencies": {
+    "scss": "0.2.4",
+    "vite": "5.3.4"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "pnpm run build:css",
+    "build:css": "vite build"
+  },
+  "dependencies": {
+    "@utrecht/component-library-css": "6.1.0"
+  },
+  "gitHead": "282cb13f5c01ffa5147c13e5b8fec33afe159217"
 }

package/{breadcrumb-nav → src/breadcrumb-nav}/index.scss

@@ -9,13 +9,16 @@
     --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;
+      --utrecht-link-text-decoration-color: var(--utrecht-link-text-decoration-color);
+      --utrecht-link-text-decoration: none;
+
+      color: var(--utrecht-breadcrumb-nav-link-current-color);
     }
     &--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;
+      --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-active-text-decoration, underline);
+
+      color: var(--utrecht-breadcrumb-nav-link-active-color);
+      text-decoration-color: var(--utrecht-breadcrumb-nav-link-active-color);
     }
   }
   &__separator {

package/{button → src/button}/_mixin.scss

@@ -18,19 +18,19 @@
 }
 
 @mixin invisible-but-accessible {
-  block-size: 1px !important;
+  block-size: 1px;
 
   /* 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;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin-block: -1px;
+  margin-inline: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  white-space: nowrap;
 }

package/{checkbox → src/checkbox}/_mixin.scss

@@ -1,5 +1,5 @@
 @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;
+  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 utrecht-checkbox--disabled {
@@ -24,8 +24,8 @@
   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;
+  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 utrecht-checkbox--indeterminate--active {
@@ -40,13 +40,13 @@
 
 @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;
+  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 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;
+  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 utrecht-custom-checkbox--html-input {
@@ -63,13 +63,13 @@
     }
     &: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;
+      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>') !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="%23154273"/></svg>');
       border-color: var(--utrecht-checkbox-checked-focus-border-color);
       border-width: var(--utrecht-checkbox-checked-focus-border-width);
     }

package/{form-field → src/form-field}/index.scss

@@ -4,7 +4,7 @@
  */
 
 .utrecht-rich-text .utrecht-form-field {
-  margin-block-end: var(--utrecht-form-field-margin-block-end) !important;
+  margin-block-end: var(--utrecht-form-field-margin-block-end);
 }
 
 .utrecht-form-field__status {

package/{ordered-list → src/ordered-list}/index.scss

@@ -6,7 +6,7 @@
 .utrecht-ordered-list {
   color: var(--utrecht-ordered-list-color);
   font-weight: var(--utrecht-ordered-list-font-weight);
-  line-height: var(--utrecht-ordered-list-line-height) !important;
+  line-height: var(--utrecht-ordered-list-line-height);
   margin-block-end: var(--utrecht-ordered-list-margin-block-end);
   margin-block-start: var(--utrecht-ordered-list-margin-block-start);
   margin-inline-start: var(--utrecht-ordered-list-margin-inline-start);

package/{select → src/select}/index.scss

@@ -1,19 +1,16 @@
 .utrecht-select {
-  &--html-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;
 
-    // The same for the background-position but I made a token so it can be easily changed as in the next class
-    background-position: var(--utrecht-select-image-background-position) !important;
-
-    // the important is needed to overwrite the default background-size as set in the utrecht-select component to 1.4rem which is hardcoded
-    background-size: var(--utrecht-select-icon-size) !important;
+    background-position: var(--utrecht-select-image-background-position);
+    background-size: var(--utrecht-select-icon-size);
   }
-  &--html-select-rtl {
+  &--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)) !important;
+    border-width: var(--utrecht-select-focus-border-width, var(--rhc-border-width-m, 2px));
   }
 }

package/{table → src/table}/index.scss

@@ -5,9 +5,9 @@
 
 .utrecht-table {
   &__caption {
-    text-align: start !important;
+    text-align: start;
     &--rtl {
-      text-align: end !important;
+      text-align: end;
     }
   }
   &__cell {

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
+  },
+});