@utrecht/component-library-css 1.0.0-alpha.307 → 1.0.0-alpha.308

package/dist/html.css

@@ -418,6 +418,7 @@
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
@@ -432,6 +433,7 @@
   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);
+  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);

package/dist/index.css

@@ -432,6 +432,7 @@ ol.utrecht-breadcrumb__list {
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
@@ -446,6 +447,7 @@ ol.utrecht-breadcrumb__list {
   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);
+  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
@@ -701,6 +703,7 @@ ol.utrecht-breadcrumb__list {
     --utrecht-button-border-bottom-width,
     var(--utrecht-button-border-width, 0)
   );
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   border-color: var(--_utrecht-button-border-color);
@@ -715,6 +718,7 @@ ol.utrecht-breadcrumb__list {
   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);
+  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
@@ -1946,6 +1950,25 @@ ol.utrecht-breadcrumb__list {
   margin-block-start: var(--utrecht-heading-6-margin-block-start);
 }
 
+/**
+ * @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.
+ */
+.utrecht-icon {
+  color: var(--utrecht-icon-color);
+  display: inline-block;
+  height: var(--utrecht-icon-size);
+  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
+  position: relative;
+  width: var(--utrecht-icon-size);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -2121,13 +2144,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-skip-ink: all;
   text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
   text-underline-offset: var(--utrecht-link-text-underline-offset);
+  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
+  align-items: center;
   cursor: pointer;
   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);
+  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
+  justify-content: center;
   letter-spacing: var(--utrecht-button-letter-spacing);
+  line-height: inherit;
   min-block-size: var(--utrecht-button-min-block-size, 44px);
   min-inline-size: var(--utrecht-button-min-inline-size, 44px);
   padding-block-end: var(--utrecht-button-padding-block-end);
@@ -2168,6 +2196,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--inline {
+  --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
   min-block-size: auto;
   min-inline-size: auto;
   padding-block-end: 0;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.307",
+  "version": "1.0.0-alpha.308",
   "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.300",
+    "@utrecht/design-tokens": "1.0.0-alpha.301",
     "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": "5b5af09a97a4d80406c3befbe73c9c3852845870"
+  "gitHead": "5c31ea600fbee226c7d49b4e1cf10d026884fb66"
 }

package/src/index.scss

@@ -49,6 +49,7 @@
 @import "../../../components/heading-4/css";
 @import "../../../components/heading-5/css";
 @import "../../../components/heading-6/css";
+@import "../../../components/icon/css";
 @import "../../../components/img/css";
 @import "../../../components/link-list/css";
 @import "../../../components/link-button/css";