@utrecht/component-library-css 1.0.0-alpha.303 → 1.0.0-alpha.306

package/dist/html.css

@@ -418,6 +418,7 @@
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
   border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -425,11 +426,14 @@
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
   border-bottom-width: var(--_utrecht-button-border-bottom-width);
+  box-sizing: border-box;
   color: var(--utrecht-button-color);
+  display: inline-flex;
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
   font-weight: var(--utrecht-button-font-weight);
   inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
   line-height: var(--utrecht-button-line-height);
   min-block-size: var(--utrecht-button-min-block-size, 44px);

package/dist/index.css

@@ -432,6 +432,7 @@ ol.utrecht-breadcrumb__list {
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
   border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -439,11 +440,14 @@ ol.utrecht-breadcrumb__list {
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
   border-bottom-width: var(--_utrecht-button-border-bottom-width);
+  box-sizing: border-box;
   color: var(--utrecht-button-color);
+  display: inline-flex;
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
   font-weight: var(--utrecht-button-font-weight);
   inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
   line-height: var(--utrecht-button-line-height);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -697,6 +701,7 @@ ol.utrecht-breadcrumb__list {
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
   border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -704,11 +709,14 @@ ol.utrecht-breadcrumb__list {
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
   border-bottom-width: var(--_utrecht-button-border-bottom-width);
+  box-sizing: border-box;
   color: var(--utrecht-button-color);
+  display: inline-flex;
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
   font-weight: var(--utrecht-button-font-weight);
   inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
   line-height: var(--utrecht-button-line-height);
   min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -745,18 +753,18 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button-link--html-button:hover {
+.utrecht-button-link--html-a:hover {
   background-color: var(--_utrecht-button-hover-background-color);
   border-color: var(--_utrecht-button-hover-border-color);
   color: var(--_utrecht-button-hover-color);
   transform: scale(var(--utrecht-button-focus-transform-scale, 1));
 }
-.utrecht-button-link--html-button:focus {
+.utrecht-button-link--html-a:focus {
   background-color: var(--_utrecht-button-focus-background-color);
   border-color: var(--_utrecht-button-focus-border-color);
   color: var(--_utrecht-button-focus-color);
 }
-.utrecht-button-link--html-button:focus-visible {
+.utrecht-button-link--html-a:focus-visible {
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -765,6 +773,63 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-button-link--primary-action {
+  --utrecht-button-active-background-color: var(--utrecht-button-primary-action-active-background-color);
+  --utrecht-button-active-border-color: var(--utrecht-button-primary-action-active-border-color);
+  --utrecht-button-active-color: var(--utrecht-button-primary-action-active-color);
+  --utrecht-button-background-color: var(--utrecht-button-primary-action-background-color);
+  --utrecht-button-border-color: var(--utrecht-button-primary-action-border-color);
+  --utrecht-button-border-width: var(--utrecht-button-primary-action-border-width);
+  --utrecht-button-color: var(--utrecht-button-primary-action-color);
+  --utrecht-button-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
+  --utrecht-button-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
+  --utrecht-button-disabled-color: var(--utrecht-button-primary-action-disabled-color);
+  --utrecht-button-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
+  --utrecht-button-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
+  --utrecht-button-focus-color: var(--utrecht-button-primary-action-focus-color);
+  --utrecht-button-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
+  --utrecht-button-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
+  --utrecht-button-hover-color: var(--utrecht-button-primary-action-hover-color);
+}
+
+.utrecht-button-link--secondary-action {
+  --utrecht-button-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
+  --utrecht-button-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
+  --utrecht-button-active-color: var(--utrecht-button-secondary-action-active-color);
+  --utrecht-button-background-color: var(--utrecht-button-secondary-action-background-color);
+  --utrecht-button-border-color: var(--utrecht-button-secondary-action-border-color);
+  --utrecht-button-border-width: var(--utrecht-button-secondary-action-border-width);
+  --utrecht-button-color: var(--utrecht-button-secondary-action-color);
+  --utrecht-button-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
+  --utrecht-button-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
+  --utrecht-button-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
+  --utrecht-button-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
+  --utrecht-button-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
+  --utrecht-button-focus-color: var(--utrecht-button-secondary-action-focus-color);
+  --utrecht-button-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
+  --utrecht-button-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
+  --utrecht-button-hover-color: var(--utrecht-button-secondary-action-hover-color);
+}
+
+.utrecht-button-link--subtle {
+  --utrecht-button-active-background-color: var(--utrecht-button-subtle-active-background-color);
+  --utrecht-button-active-border-color: var(--utrecht-button-subtle-active-border-color);
+  --utrecht-button-active-color: var(--utrecht-button-subtle-active-color);
+  --utrecht-button-background-color: var(--utrecht-button-subtle-background-color);
+  --utrecht-button-border-color: var(--utrecht-button-subtle-border-color);
+  --utrecht-button-border-width: var(--utrecht-button-subtle-border-width);
+  --utrecht-button-color: var(--utrecht-button-subtle-color);
+  --utrecht-button-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
+  --utrecht-button-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
+  --utrecht-button-disabled-color: var(--utrecht-button-subtle-disabled-color);
+  --utrecht-button-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
+  --utrecht-button-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
+  --utrecht-button-focus-color: var(--utrecht-button-subtle-focus-color);
+  --utrecht-button-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
+  --utrecht-button-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
+  --utrecht-button-hover-color: var(--utrecht-button-subtle-hover-color);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1215,6 +1280,69 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-custom-radio-button-checked-color, var(--utrecht-custom-radio-button-color));
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021-2022 Gemeente Utrecht
+ * Copyright (c) 2021-2022 Frameless B.V.
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-data-list {
+  /* also set `margin-block` to reset browser styling of <dl> */
+  display: block;
+  margin-block-end: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-end));
+  margin-block-start: calc(var(--utrecht-distance, 0) * var(--utrecht-data-list-margin-block-start));
+}
+
+.utrecht-data-list__item-key {
+  color: var(--utrecht-data-list-item-key-color);
+  font-size: var(--utrecht-data-list-item-key-font-size);
+  font-weight: var(--utrecht-data-list-item-key-font-weight);
+  grid-area: label;
+  line-height: var(--utrecht-data-list-item-key-line-height);
+}
+
+.utrecht-data-list__item-value {
+  /* configure `min-block-size` in case the value is empty */
+  color: var(--utrecht-data-list-label-color);
+  font-size: var(--utrecht-data-list-item-value-font-size);
+  font-weight: var(--utrecht-data-list-item-value-font-weight);
+  grid-area: value;
+  line-height: var(--utrecht-data-list-label-line-height);
+  min-block-size: var(--utrecht-data-list-label-line-height);
+}
+
+.utrecht-data-list__actions--html-dd,
+.utrecht-data-list__item-value--html-dd {
+  /* reset browser styling of <dd> */
+  margin-inline-start: 0;
+}
+
+.utrecht-data-list__item-value--multiline {
+  white-space: pre-line;
+}
+
+.utrecht-data-list--rows .utrecht-data-list__actions {
+  align-items: last baseline;
+  display: flex;
+  justify-content: flex-end;
+}
+.utrecht-data-list--rows .utrecht-data-list__item {
+  display: grid;
+  grid-template-areas: "label actions" "value value";
+  margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
+}
+.utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
+  margin-block-start: 0;
+}
+.utrecht-data-list--rows .utrecht-data-list__item-value {
+  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1955,6 +2083,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-link-button {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
@@ -1978,13 +2112,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   user-select: none;
 }
 
-.utrecht-link-button--html-button {
-  background-color: transparent;
-  /* reset <button> styling */
-  border-width: 0;
-}
-
-.utrecht-link-button--hover {
+.utrecht-link-button--hover, .utrecht-link-button--html-button:hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -1992,11 +2120,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link-button--active {
+.utrecht-link-button--active, .utrecht-link-button--html-button:active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link-button--focus {
+.utrecht-link-button--focus, .utrecht-link-button--html-button:focus {
   background-color: var(--utrecht-link-focus-background-color, transparent);
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -2005,7 +2133,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link-button--focus-visible {
+.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);
@@ -2013,6 +2141,20 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
+.utrecht-link-button--inline {
+  min-block-size: auto;
+  min-inline-size: auto;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -3610,3 +3752,25 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-url {
   font-variant-ligatures: none;
 }
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+.utrecht-value-number {
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+.utrecht-value-number--positive {
+  color: var(--utrecht-value-number-positive-color);
+}
+
+.utrecht-value-number--negative {
+  color: var(--utrecht-value-number-negative-color);
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.303",
+  "version": "1.0.0-alpha.306",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.296",
+    "@utrecht/design-tokens": "1.0.0-alpha.299",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.54.0"
@@ -27,5 +27,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "f2853cf7775dc7db3c4ddd39f353e26e0745a91e"
+  "gitHead": "ae12cf739f67e52d19785f621a618dc9a1edffdc"
 }

package/src/index.scss

@@ -29,6 +29,7 @@
 @import "../../../components/checkbox/css";
 @import "../../../components/custom-checkbox/css";
 @import "../../../components/custom-radio-button/css";
+@import "../../../components/data-list/css";
 @import "../../../components/digid-button/css";
 @import "../../../components/document/css";
 @import "../../../components/emphasis/css";
@@ -76,3 +77,4 @@
 @import "../../../components/textbox/css";
 @import "../../../components/unordered-list/css";
 @import "../../../components/url/css";
+@import "../../../components/value-number/css";