@utrecht/component-library-css 1.0.0-alpha.568 → 1.0.0-alpha.569

package/dist/html.css

@@ -306,6 +306,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
+/**
+ * Simulate forced-colors mode.
+ */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
@@ -981,33 +984,31 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html a {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
-  color: var(--utrecht-link-color, blue);
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-  text-decoration-color: var(--utrecht-link-text-decoration-color, currentColor);
-  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);
+  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
 }
 .utrecht-html a:visited {
-  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: visitedtext;
+  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
 }
 .utrecht-html a: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));
+  --_utrecht-link-forced-colors-color: linktext;
+  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 .utrecht-html a:active {
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
 }
 .utrecht-html a:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   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));
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.

package/dist/index.css

@@ -2560,6 +2560,25 @@ ol.utrecht-breadcrumb__list {
   font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-figure {
+  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
+  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
+}
+
+.utrecht-figure__caption {
+  color: var(--utrecht-figure-caption-color);
+  font-size: var(--utrecht-figure-caption-font-size);
+  line-height: var(--utrecht-figure-caption-line-height);
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2020-2022 Gemeente Utrecht
@@ -3423,6 +3442,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
+/**
+ * Simulate forced-colors mode.
+ */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
@@ -3440,11 +3462,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-link-button {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
-  color: var(--utrecht-link-color, blue);
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-  text-decoration-color: var(--utrecht-link-text-decoration-color, currentColor);
+  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
+  /* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
+   * Do not underline `<a name="">Anchor</a>`.
+   */
+  --_utrecht-link-forced-colors-color: linktext;
+  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
+  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip-ink: all;
-  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, 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;
@@ -3469,26 +3495,29 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):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));
+  --_utrecht-link-forced-colors-color: linktext;
+  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
 .utrecht-link-button--disabled {
-  color: var(--utrecht-link-placeholder-color, var(--utrecht-link-color));
-  cursor: var(--utrecht-action-disabled-cursor);
-  text-decoration: none;
+  --_utrecht-link-forced-colors-color: GrayText;
+  --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
+  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+  font-weight: var(--utrecht-link-placeholder-font-weight);
+  text-decoration-line: none;
 }
 
 .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   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));
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  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--html-button:focus-visible {
@@ -3506,7 +3535,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
 }
 
 .utrecht-link-button--inline {
@@ -3527,7 +3557,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   - style `pressed` like the link state `current`, or:
   - add `pressed` design tokens
   */
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
 }
 
 .utrecht-link-button--html-button {
@@ -3689,6 +3720,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
+/**
+ * Simulate forced-colors mode.
+ */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
@@ -3700,11 +3734,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
  */
 .utrecht-link {
   --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
-  color: var(--utrecht-link-color, blue);
-  text-decoration: var(--utrecht-link-text-decoration, underline);
-  text-decoration-color: var(--utrecht-link-text-decoration-color, currentColor);
+  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
+}
+
+.utrecht-link:any-link {
+  /* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
+   * Do not underline `<a name="">Anchor</a>`.
+   */
+  --_utrecht-link-forced-colors-color: linktext;
+  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
+  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip-ink: all;
-  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
@@ -3712,33 +3753,35 @@ however browsers don't seem to have implemented great looking supixel tweening y
   background-image: var(--utrecht-link-icon-left-background-image, none);
   background-position: 0 0.25em;
   background-repeat: no-repeat;
-  color: var(--utrecht-link-color, blue);
+  color: var(--utrecht-link-color, LinkText);
   font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
   padding-inline-start: var(--utrecht-space-block-md);
-  text-decoration: none;
+  text-decoration-line: none;
 }
 
-.utrecht-link:visited,
 .utrecht-link--visited {
-  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: visitedtext;
+  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
 }
 
-.utrecht-link:hover,
+/* `:hover` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-a:any-link:hover,
 .utrecht-link--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));
+  --_utrecht-link-forced-colors-color: linktext;
+  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
 .utrecht-link--focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   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));
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
 .utrecht-link--focus-visible {
@@ -3755,13 +3798,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-link:focus {
+/* `:focus` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
+  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   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));
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
-  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.
@@ -3775,34 +3820,62 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-.utrecht-link:focus:not(:focus-visible) {
+.utrecht-link--html-span:focus:not(:focus-visible),
+.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: revert;
 }
 
-.utrecht-link:active,
+.utrecht-link--html-span:active,
+.utrecht-link--html-a:any-link:active,
 .utrecht-link--active {
-  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
 }
 
 .utrecht-link--telephone {
   white-space: nowrap;
 }
 
-.utrecht-link--box-content {
+.utrecht-link--current {
+  cursor: var(--utrecht-action-inert-cursor, normal);
+  font-weight: var(--utrecht-link-current-font-weight);
+}
+
+.utrecht-link--box-content:any-link {
   color: unset;
   display: inline-block;
-  text-decoration: unset;
+  text-decoration-line: unset;
   text-decoration-skip-ink: unset;
   text-decoration-thickness: unset;
   text-underline-offset: unset;
 }
 
 .utrecht-link--placeholder {
-  color: var(--utrecht-link-placeholder-color, var(--utrecht-link-color));
-  cursor: var(--utrecht-action-disabled-cursor);
-  text-decoration: none;
+  --_utrecht-link-forced-colors-color: GrayText;
+  --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
+  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+  font-weight: var(--utrecht-link-placeholder-font-weight);
+  text-decoration-line: none;
+}
+
+/**
+ * Simulate forced-colors mode.
+ */
+.utrecht-link--forced-colors {
+  /* Some others choose `transparent` to trigger `currentColor` for `inverse-outline-color`,
+   * however this doesn't guarantee significant contrast between `outline-color` and `inverse-outline-color`.
+   * That's why we use `Highlight` vs `HighlightText`.
+   */
+  --utrecht-focus-outline-color: Highlight;
+  --utrecht-focus-inverse-outline-color: HighlightText;
+  --utrecht-link-color: linktext;
+  --utrecht-link-hover-color: linktext;
+  --utrecht-link-focus-color: linktext;
+  --utrecht-link-active-color: activetext;
+  --utrecht-link-visited-color: visitedtext;
+  --utrecht-link-placeholder-color: GrayText;
 }
 
 /**
@@ -3951,6 +4024,47 @@ however browsers don't seem to have implemented great looking supixel tweening y
   justify-content: center;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-mark {
+  background-color: var(--utrecht-mark-background-color, revert);
+  color: var(--utrecht-mark-color, revert);
+}
+@media print {
+  .utrecht-mark {
+    outline-color: currentColor;
+    outline-style: dotted;
+    outline-width: 0.1em;
+  }
+}
+@media screen and (-ms-high-contrast: active) {
+  .utrecht-mark {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* class name available only for Storybook */
+.utrecht-mark--print {
+  outline-color: currentColor;
+  outline-style: dotted;
+  outline-width: 0.1em;
+}
+
+/* class name available only for Storybook */
+.utrecht-mark--windows-high-contrast {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.568",
+  "version": "1.0.0-alpha.569",
   "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",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "5a5b58bc414ac0446511a8c1140a1639e9d60192"
+  "gitHead": "7c03dd014bd1c699a48fb3f0425c60dcf501b974"
 }