@utrecht/link-button-css 1.0.0 → 1.1.0

package/dist/index.css

@@ -0,0 +1,204 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`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 */
+/* stylelint-disable-next-line block-no-empty */
+/**
+ * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
+ * 
+ * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link-button {
+  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
+  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-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;
+  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;
+  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);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
+  --_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;
+}
+
+.utrecht-link-button--disabled {
+  --_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);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+}
+
+.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
+  /*
+   * WCAG SC 2.4.12: Focus Not Obscured
+   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
+   */
+  /* - 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.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: var(--utrecht-stack-focus-z-index, 1);
+}
+
+.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
+}
+
+.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;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.utrecht-link-button--pressed {
+  /* Copy `active` styles for now.
+  Later we can decide to:
+  - merge `active` and `pressed` and name the state `pressed`, or:
+  - merge `active` and `pressed` and name the state `active`, or:
+  - style `pressed` like the link state `current`, or:
+  - add `pressed` design tokens
+  */
+  --_utrecht-link-forced-colors-color: activetext;
+  --_utrecht-link-state-color: var(--utrecht-link-active-color);
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}

package/dist/index.js

@@ -0,0 +1 @@
+var undefined$1 = undefined;export{undefined$1 as default};

package/package.json

@@ -1,18 +1,27 @@
 {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Community for NL Design System",
   "description": "Link button component for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@utrecht/link-button-css",
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
-  "devDependencies": {},
+  "main": "dist/index.css",
+  "devDependencies": {
+    "rollup": "3.29.4",
+    "@utrecht/focus-ring-css": "1.1.0",
+    "@utrecht/link-css": "1.1.0"
+  },
   "keywords": [
     "nl-design-system"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {}
+  "scripts": {
+    "build": "rollup -c ../rollup.config.mjs",
+    "clean": "rimraf dist"
+  }
 }

package/src/_mixin.scss

@@ -0,0 +1,83 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+
+@mixin utrecht-link-button {
+  @include utrecht-link;
+  @include utrecht-link--any-link;
+
+  --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;
+  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);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@mixin utrecht-link-button--html-button {
+  background-color: transparent;
+
+  /* reset <button> styling */
+  border-width: 0;
+}
+
+@mixin utrecht-link-button--pressed {
+  /* Copy `active` styles for now.
+  Later we can decide to:
+  - merge `active` and `pressed` and name the state `pressed`, or:
+  - merge `active` and `pressed` and name the state `active`, or:
+  - style `pressed` like the link state `current`, or:
+  - add `pressed` design tokens
+  */
+  @include utrecht-link--active;
+}
+
+@mixin utrecht-link-button--hover {
+  @include utrecht-link--hover;
+}
+
+@mixin utrecht-link-button--active {
+  @include utrecht-link--active;
+}
+
+@mixin utrecht-link-button--disabled {
+  @include utrecht-link--placeholder;
+}
+
+@mixin utrecht-link-button--focus {
+  @include utrecht-link--focus;
+}
+
+@mixin utrecht-link-button--focus-visible {
+  @include utrecht-link--focus-visible;
+}
+
+@mixin 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;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}

package/src/index.scss

@@ -0,0 +1,58 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+@import "./mixin";
+
+.utrecht-link-button {
+  @include utrecht-link-button;
+}
+
+.utrecht-link-button--hover {
+  @include utrecht-link-button--hover;
+}
+
+.utrecht-link-button--disabled {
+  @include utrecht-link-button--disabled;
+}
+
+.utrecht-link-button--focus {
+  @include utrecht-link-button--focus;
+}
+
+.utrecht-link-button--focus-visible {
+  @include utrecht-link-button--focus-visible;
+}
+
+.utrecht-link-button--active {
+  @include utrecht-link-button--active;
+}
+
+.utrecht-link-button--inline {
+  @include utrecht-link-button--inline;
+}
+
+.utrecht-link-button--pressed {
+  @include utrecht-link-button--pressed;
+}
+
+.utrecht-link-button--html-button {
+  @include utrecht-link-button--html-button;
+
+  &:focus-visible {
+    @extend .utrecht-link-button--focus-visible;
+  }
+
+  &:not(:disabled):hover {
+    @extend .utrecht-link-button--hover;
+  }
+
+  &:not(:disabled):focus {
+    @extend .utrecht-link-button--focus;
+  }
+
+  &:not(:disabled):active {
+    @extend .utrecht-link-button--active;
+  }
+}

package/src/tokens.json

@@ -0,0 +1,5 @@
+{
+  "utrecht": {
+    "link-button": {}
+  }
+}