@utrecht/link-button-css 1.0.0 → 1.2.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/index.css +103 -0
  3. package/dist/index.min.css +5 -0
  4. package/dist/index.mjs +1 -0
  5. package/dist/index.mjs.d.ts +2 -0
  6. package/package.json +20 -4
  7. package/src/_mixin.scss +84 -0
  8. package/src/index.scss +59 -0
  9. package/src/tokens.json +5 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,19 @@
1
+ # @utrecht/link-button-css
2
+
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e497b08: Export CSS string as default export in `dist/index.mjs`.
8
+
9
+ ## 1.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 62f1157: Add SCSS files to `src/` directory of CSS component packages.
14
+
15
+ ## 1.0.0
16
+
17
+ ### Major Changes
18
+
19
+ - 856d996: Switch from alpha releases to semantic versioning.
package/dist/index.css ADDED
@@ -0,0 +1,103 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
5
+ */
6
+ .utrecht-link-button {
7
+ --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
8
+ color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
9
+ --_utrecht-link-forced-colors-color: linktext;
10
+ text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
11
+ text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
12
+ text-decoration-skip-ink: all;
13
+ text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
14
+ text-underline-offset: var(--utrecht-link-text-underline-offset);
15
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
16
+ align-items: center;
17
+ cursor: pointer;
18
+ display: inline-flex;
19
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
20
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
21
+ font-weight: var(--utrecht-button-font-weight);
22
+ gap: var(--utrecht-button-icon-gap);
23
+ inline-size: var(--utrecht-button-inline-size, auto);
24
+ justify-content: center;
25
+ line-height: inherit;
26
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
27
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
28
+ padding-block-end: var(--utrecht-button-padding-block-end);
29
+ padding-block-start: var(--utrecht-button-padding-block-start);
30
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
31
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
32
+ text-transform: var(--utrecht-button-text-transform);
33
+ -webkit-user-select: none;
34
+ user-select: none;
35
+ }
36
+
37
+ .utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
38
+ --_utrecht-link-forced-colors-color: linktext;
39
+ --_utrecht-link-state-color: var(--utrecht-link-hover-color);
40
+ --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
41
+ --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
42
+ text-decoration-skip: none;
43
+ text-decoration-skip-ink: none;
44
+ }
45
+
46
+ .utrecht-link-button--disabled {
47
+ --_utrecht-link-forced-colors-color: GrayText;
48
+ --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
49
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
50
+ font-weight: var(--utrecht-link-placeholder-font-weight);
51
+ text-decoration-line: none;
52
+ }
53
+
54
+ .utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
55
+ --_utrecht-link-state-color: var(--utrecht-link-focus-color);
56
+ background-color: var(--utrecht-link-focus-background-color, transparent);
57
+ text-decoration-skip: none;
58
+ text-decoration-skip-ink: none;
59
+ }
60
+
61
+ .utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
62
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
63
+ var(--utrecht-focus-inverse-outline-color, transparent);
64
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
65
+ outline-color: var(--utrecht-focus-outline-color, revert);
66
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
67
+ outline-style: var(--utrecht-focus-outline-style, revert);
68
+ outline-width: var(--utrecht-focus-outline-width, revert);
69
+ --_utrecht-link-state-text-decoration: var(
70
+ --utrecht-link-focus-visible-text-decoration,
71
+ var(--utrecht-link-focus-text-decoration)
72
+ );
73
+ --_utrecht-link-state-text-decoration-thickness: var(
74
+ --utrecht-link-focus-visible-text-decoration-thickness,
75
+ var(--utrecht-link-focus-text-decoration-thickness)
76
+ );
77
+ z-index: var(--utrecht-stack-focus-z-index, 1);
78
+ }
79
+
80
+ .utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
81
+ --_utrecht-link-forced-colors-color: activetext;
82
+ --_utrecht-link-state-color: var(--utrecht-link-active-color);
83
+ }
84
+
85
+ .utrecht-link-button--inline {
86
+ --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
87
+ min-block-size: auto;
88
+ min-inline-size: auto;
89
+ padding-block-end: 0;
90
+ padding-block-start: 0;
91
+ padding-inline-end: 0;
92
+ padding-inline-start: 0;
93
+ }
94
+
95
+ .utrecht-link-button--pressed {
96
+ --_utrecht-link-forced-colors-color: activetext;
97
+ --_utrecht-link-state-color: var(--utrecht-link-active-color);
98
+ }
99
+
100
+ .utrecht-link-button--html-button {
101
+ background-color: transparent;
102
+ border-width: 0;
103
+ }
package/dist/index.min.css ADDED
@@ -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);--_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);--_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/index.mjs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const css: string;
2
+ export default css;
package/package.json CHANGED
@@ -1,18 +1,34 @@
1
1
  {
2
- "version": "1.0.0",
2
+ "version": "1.2.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
- "dist/"
8
+ "dist/",
9
+ "docs/",
10
+ "src/",
11
+ "*.md"
9
12
  ],
10
- "devDependencies": {},
13
+ "main": "dist/index.css",
14
+ "devDependencies": {
15
+ "@utrecht/focus-ring-css": "2.1.0",
16
+ "@utrecht/link-css": "1.4.0",
17
+ "@utrecht/build-utils-css": "0.0.1"
18
+ },
11
19
  "keywords": [
12
20
  "nl-design-system"
13
21
  ],
14
22
  "publishConfig": {
15
23
  "access": "public"
16
24
  },
17
- "scripts": {}
25
+ "repository": {
26
+ "type": "git+ssh",
27
+ "url": "git@github.com:nl-design-system/utrecht.git",
28
+ "directory": "components/link-button"
29
+ },
30
+ "scripts": {
31
+ "build": "build-css-package",
32
+ "clean": "rimraf dist"
33
+ }
18
34
  }
package/src/_mixin.scss ADDED
@@ -0,0 +1,84 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
5
+ */
6
+
7
+ @import "~@utrecht/link-css/src/mixin";
8
+ @import "~@utrecht/focus-ring-css/src/mixin";
9
+
10
+ @mixin utrecht-link-button {
11
+ @include utrecht-link;
12
+ @include utrecht-link--any-link;
13
+
14
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
15
+
16
+ align-items: center;
17
+ cursor: pointer;
18
+ display: inline-flex;
19
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
20
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
21
+ font-weight: var(--utrecht-button-font-weight);
22
+ gap: var(--utrecht-button-icon-gap);
23
+ inline-size: var(--utrecht-button-inline-size, auto);
24
+ justify-content: center;
25
+ line-height: inherit;
26
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
27
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
28
+ padding-block-end: var(--utrecht-button-padding-block-end);
29
+ padding-block-start: var(--utrecht-button-padding-block-start);
30
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
31
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
32
+ text-transform: var(--utrecht-button-text-transform);
33
+ -webkit-user-select: none;
34
+ user-select: none;
35
+ }
36
+
37
+ @mixin utrecht-link-button--html-button {
38
+ background-color: transparent;
39
+
40
+ /* reset <button> styling */
41
+ border-width: 0;
42
+ }
43
+
44
+ @mixin utrecht-link-button--pressed {
45
+ /* Copy `active` styles for now.
46
+ Later we can decide to:
47
+ - merge `active` and `pressed` and name the state `pressed`, or:
48
+ - merge `active` and `pressed` and name the state `active`, or:
49
+ - style `pressed` like the link state `current`, or:
50
+ - add `pressed` design tokens
51
+ */
52
+ @include utrecht-link--active;
53
+ }
54
+
55
+ @mixin utrecht-link-button--hover {
56
+ @include utrecht-link--hover;
57
+ }
58
+
59
+ @mixin utrecht-link-button--active {
60
+ @include utrecht-link--active;
61
+ }
62
+
63
+ @mixin utrecht-link-button--disabled {
64
+ @include utrecht-link--placeholder;
65
+ }
66
+
67
+ @mixin utrecht-link-button--focus {
68
+ @include utrecht-link--focus;
69
+ }
70
+
71
+ @mixin utrecht-link-button--focus-visible {
72
+ @include utrecht-link--focus-visible;
73
+ }
74
+
75
+ @mixin utrecht-link-button--inline {
76
+ --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
77
+
78
+ min-block-size: auto;
79
+ min-inline-size: auto;
80
+ padding-block-end: 0;
81
+ padding-block-start: 0;
82
+ padding-inline-end: 0;
83
+ padding-inline-start: 0;
84
+ }
package/src/index.scss ADDED
@@ -0,0 +1,59 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
5
+ */
6
+
7
+ @import "./mixin";
8
+
9
+ .utrecht-link-button {
10
+ @include utrecht-link-button;
11
+ }
12
+
13
+ .utrecht-link-button--hover {
14
+ @include utrecht-link-button--hover;
15
+ }
16
+
17
+ .utrecht-link-button--disabled {
18
+ @include utrecht-link-button--disabled;
19
+ }
20
+
21
+ .utrecht-link-button--focus {
22
+ @include utrecht-link-button--focus;
23
+ }
24
+
25
+ .utrecht-link-button--focus-visible {
26
+ @include utrecht-link-button--focus-visible;
27
+ }
28
+
29
+ .utrecht-link-button--active {
30
+ @include utrecht-link-button--active;
31
+ }
32
+
33
+ .utrecht-link-button--inline {
34
+ @include utrecht-link-button--inline;
35
+ }
36
+
37
+ .utrecht-link-button--pressed {
38
+ @include utrecht-link-button--pressed;
39
+ }
40
+
41
+ .utrecht-link-button--html-button {
42
+ @include utrecht-link-button--html-button;
43
+
44
+ &:focus-visible {
45
+ @extend .utrecht-link-button--focus-visible;
46
+ }
47
+
48
+ &:not(:disabled):hover {
49
+ @extend .utrecht-link-button--hover;
50
+ }
51
+
52
+ &:not(:disabled):focus {
53
+ @extend .utrecht-link-button--focus;
54
+ }
55
+
56
+ &:not(:disabled):active {
57
+ @extend .utrecht-link-button--active;
58
+ }
59
+ }
package/src/tokens.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "utrecht": {
3
+ "link-button": {}
4
+ }
5
+ }