@utrecht/link-button-css 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/index.css +11 -111
- package/dist/index.min.css +5 -0
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.d.ts +2 -0
- package/dist/tokens.d.mts +4 -0
- package/dist/tokens.mjs +5 -0
- package/package.json +13 -6
- package/src/_mixin.scss +2 -1
- package/src/index.scss +2 -1
- package/dist/index.js +0 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# @utrecht/link-button-css
|
|
2
|
+
|
|
3
|
+
## 1.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
|
|
8
|
+
|
|
9
|
+
## 1.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- e497b08: Export CSS string as default export in `dist/index.mjs`.
|
|
14
|
+
|
|
15
|
+
## 1.1.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- 62f1157: Add SCSS files to `src/` directory of CSS component packages.
|
|
20
|
+
|
|
21
|
+
## 1.0.0
|
|
22
|
+
|
|
23
|
+
### Major Changes
|
|
24
|
+
|
|
25
|
+
- 856d996: Switch from alpha releases to semantic versioning.
|
package/dist/index.css
CHANGED
|
@@ -1,102 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license EUPL-1.2
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2020-2024 Frameless B.V.
|
|
4
|
+
* Copyright (c) 2021-2024 Gemeente Utrecht
|
|
4
5
|
*/
|
|
5
|
-
/**
|
|
6
|
-
* @license EUPL-1.2
|
|
7
|
-
* Copyright (c) 2022 Robbert Broersma
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* @license EUPL-1.2
|
|
11
|
-
* Copyright (c) 2021 The Knights Who Say NIH! B.V.
|
|
12
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
13
|
-
*/
|
|
14
|
-
/* stylelint-disable scss/no-global-function-names */
|
|
15
|
-
/**
|
|
16
|
-
* @license EUPL-1.2
|
|
17
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
18
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
19
|
-
*/
|
|
20
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
21
|
-
/*
|
|
22
|
-
|
|
23
|
-
# CSS implementation
|
|
24
|
-
|
|
25
|
-
## `text-decoration-skip`
|
|
26
|
-
|
|
27
|
-
`text-decoration-skip` can be helpful to avoid making some texts unreadable.
|
|
28
|
-
For example by obscuring Arabic diacritics.
|
|
29
|
-
|
|
30
|
-
However, the combination of a greater thickness and skipping this thick underline
|
|
31
|
-
leads to a very unappealing rendering of the underline. To avoid this,
|
|
32
|
-
`text-decoration-skip` is disabled for interactive states.
|
|
33
|
-
|
|
34
|
-
For design token configurations that have identical thickness for normal and interactive
|
|
35
|
-
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
|
|
36
|
-
from an interrupted to an uninterrupted underline (for some texts).
|
|
37
|
-
|
|
38
|
-
Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
|
|
39
|
-
|
|
40
|
-
---
|
|
41
|
-
|
|
42
|
-
Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
|
|
43
|
-
that moving the pointer away from a link or having focus elsewhere first is simple enough to
|
|
44
|
-
not make this too inconvenient.
|
|
45
|
-
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
Some folks implement the underline of links using `border-bottom` or even using a finely crafted
|
|
49
|
-
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
|
|
50
|
-
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
|
|
51
|
-
|
|
52
|
-
## `text-decoration-thickness`
|
|
53
|
-
|
|
54
|
-
Varying `text-decoration-thickness` can be used to distinguish interactive states.
|
|
55
|
-
|
|
56
|
-
---
|
|
57
|
-
|
|
58
|
-
`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
|
|
59
|
-
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
|
|
60
|
-
the underline offset also seems to increase along with the thickness, which effectively means
|
|
61
|
-
the underline is closer to the next line than in Safari.
|
|
62
|
-
|
|
63
|
-
---
|
|
64
|
-
|
|
65
|
-
It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
|
|
66
|
-
use the `max()` function to ensure the underline remains visible for every font size.
|
|
67
|
-
|
|
68
|
-
## `transition`
|
|
69
|
-
|
|
70
|
-
`text-decoration-thickness` could be a candidate for animating between interactive states,
|
|
71
|
-
however browsers don't seem to have implemented great looking supixel tweening yet.
|
|
72
|
-
|
|
73
|
-
`text-decoration-skip` also makes the transition more challenging to implement.
|
|
74
|
-
|
|
75
|
-
*/
|
|
76
|
-
/**
|
|
77
|
-
* Simulate forced-colors mode.
|
|
78
|
-
*/
|
|
79
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
80
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
81
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
82
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
83
|
-
/**
|
|
84
|
-
* Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
|
|
85
|
-
*
|
|
86
|
-
* Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
|
|
87
|
-
*/
|
|
88
|
-
/**
|
|
89
|
-
* @license EUPL-1.2
|
|
90
|
-
* Copyright (c) 2021 Gemeente Utrecht
|
|
91
|
-
* Copyright (c) 2021 Robbert Broersma
|
|
92
|
-
*/
|
|
93
|
-
/* stylelint-disable-next-line block-no-empty */
|
|
94
6
|
.utrecht-link-button {
|
|
95
7
|
--utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
|
|
96
8
|
color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
|
|
97
|
-
/* Only underline `<a href="...">...</a>`, which matches `a:any-link`.
|
|
98
|
-
* Do not underline `<a name="">Anchor</a>`.
|
|
99
|
-
*/
|
|
100
9
|
--_utrecht-link-forced-colors-color: linktext;
|
|
101
10
|
text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
|
|
102
11
|
text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
|
|
@@ -144,22 +53,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
144
53
|
|
|
145
54
|
.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
|
|
146
55
|
--_utrecht-link-state-color: var(--utrecht-link-focus-color);
|
|
147
|
-
--_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
|
|
148
|
-
--_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
|
|
149
56
|
background-color: var(--utrecht-link-focus-background-color, transparent);
|
|
150
57
|
text-decoration-skip: none;
|
|
151
58
|
text-decoration-skip-ink: none;
|
|
152
59
|
}
|
|
153
60
|
|
|
154
61
|
.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
|
|
155
|
-
/*
|
|
156
|
-
* WCAG SC 2.4.12: Focus Not Obscured
|
|
157
|
-
* Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
|
|
158
|
-
*/
|
|
159
|
-
/* - The browser default focus ring should apply when these CSS custom properties are not set.
|
|
160
|
-
* - Make the `box-shadow` value available, so components that have their own `box-shadow`
|
|
161
|
-
* can combine it with the focus ring box shadow.
|
|
162
|
-
*/
|
|
163
62
|
--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
|
|
164
63
|
var(--utrecht-focus-inverse-outline-color, transparent);
|
|
165
64
|
box-shadow: var(--_utrecht-focus-ring-box-shadow);
|
|
@@ -167,6 +66,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
167
66
|
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
168
67
|
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
169
68
|
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
69
|
+
z-index: 1;
|
|
70
|
+
--_utrecht-link-state-text-decoration: var(
|
|
71
|
+
--utrecht-link-focus-visible-text-decoration,
|
|
72
|
+
var(--utrecht-link-focus-text-decoration)
|
|
73
|
+
);
|
|
74
|
+
--_utrecht-link-state-text-decoration-thickness: var(
|
|
75
|
+
--utrecht-link-focus-visible-text-decoration-thickness,
|
|
76
|
+
var(--utrecht-link-focus-text-decoration-thickness)
|
|
77
|
+
);
|
|
170
78
|
z-index: var(--utrecht-stack-focus-z-index, 1);
|
|
171
79
|
}
|
|
172
80
|
|
|
@@ -186,19 +94,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
186
94
|
}
|
|
187
95
|
|
|
188
96
|
.utrecht-link-button--pressed {
|
|
189
|
-
/* Copy `active` styles for now.
|
|
190
|
-
Later we can decide to:
|
|
191
|
-
- merge `active` and `pressed` and name the state `pressed`, or:
|
|
192
|
-
- merge `active` and `pressed` and name the state `active`, or:
|
|
193
|
-
- style `pressed` like the link state `current`, or:
|
|
194
|
-
- add `pressed` design tokens
|
|
195
|
-
*/
|
|
196
97
|
--_utrecht-link-forced-colors-color: activetext;
|
|
197
98
|
--_utrecht-link-state-color: var(--utrecht-link-active-color);
|
|
198
99
|
}
|
|
199
100
|
|
|
200
101
|
.utrecht-link-button--html-button {
|
|
201
102
|
background-color: transparent;
|
|
202
|
-
/* reset <button> styling */
|
|
203
103
|
border-width: 0;
|
|
204
104
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
.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)));--_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);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{--_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:1;--_utrecht-link-state-text-decoration:var(
|
|
2
|
+
--utrecht-link-focus-visible-text-decoration,var(--utrecht-link-focus-text-decoration)
|
|
3
|
+
);--_utrecht-link-state-text-decoration-thickness:var(
|
|
4
|
+
--utrecht-link-focus-visible-text-decoration-thickness,var(--utrecht-link-focus-text-decoration-thickness)
|
|
5
|
+
);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{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--html-button{background-color:transparent;border-width:0}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default ".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)));--_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);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{--_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:1;--_utrecht-link-state-text-decoration:var(\n --utrecht-link-focus-visible-text-decoration,var(--utrecht-link-focus-text-decoration)\n );--_utrecht-link-state-text-decoration-thickness:var(\n --utrecht-link-focus-visible-text-decoration-thickness,var(--utrecht-link-focus-text-decoration-thickness)\n );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{--_utrecht-link-forced-colors-color:activetext;--_utrecht-link-state-color:var(--utrecht-link-active-color)}.utrecht-link-button--html-button{background-color:transparent;border-width:0}";
|
package/dist/tokens.mjs
ADDED
package/package.json
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.3.0",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "Link button component for the Municipality of Utrecht based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
6
6
|
"name": "@utrecht/link-button-css",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist/",
|
|
9
|
-
"
|
|
9
|
+
"docs/",
|
|
10
|
+
"src/",
|
|
11
|
+
"*.md"
|
|
10
12
|
],
|
|
11
13
|
"main": "dist/index.css",
|
|
12
14
|
"devDependencies": {
|
|
13
|
-
"
|
|
14
|
-
"@utrecht/
|
|
15
|
-
"@utrecht/
|
|
15
|
+
"@utrecht/focus-ring-css": "2.3.0",
|
|
16
|
+
"@utrecht/link-css": "1.5.0",
|
|
17
|
+
"@utrecht/build-utils-css": "0.0.1"
|
|
16
18
|
},
|
|
17
19
|
"keywords": [
|
|
18
20
|
"nl-design-system"
|
|
@@ -20,8 +22,13 @@
|
|
|
20
22
|
"publishConfig": {
|
|
21
23
|
"access": "public"
|
|
22
24
|
},
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git+ssh",
|
|
27
|
+
"url": "git@github.com:nl-design-system/utrecht.git",
|
|
28
|
+
"directory": "components/link-button"
|
|
29
|
+
},
|
|
23
30
|
"scripts": {
|
|
24
|
-
"build": "
|
|
31
|
+
"build": "build-css-package",
|
|
25
32
|
"clean": "rimraf dist"
|
|
26
33
|
}
|
|
27
34
|
}
|
package/src/_mixin.scss
CHANGED
package/src/index.scss
CHANGED
package/dist/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var undefined$1 = undefined;export{undefined$1 as default};
|