@utrecht/root-css 2.0.1 → 3.1.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 (13) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/html/index.css +22 -2
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +24 -2
  6. package/dist/index.min.css +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/tokens.mjs +43 -0
  9. package/package.json +3 -2
  10. package/src/_mixin.scss +24 -3
  11. package/src/html/_mixin.scss +5 -0
  12. package/src/index.scss +3 -0
  13. package/src/tokens.json +40 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @utrecht/root-css
2
2
 
3
+ ## 3.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 3b655ff: Add system colors as fallback for Root color and background-color, to guarantee contrast.
8
+ - 9c456ab: Make `scroll-behavior: smooth` the default for Root component, except when `prefers-reduced-motion` is enabled.
9
+ - 80c3369: Root component now specifies a default background color for fullscreen elements, to avoid contrast issues.
10
+ - 9a2eeb4: Add `font-weight`, `font-size` and `line-height` tokens to Root, add `utrecht.body` tokens as fallback.
11
+
12
+ ## 3.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - e89c1d2: Use `font-size-adjust: 0.5` as default. Add `utrecht.root.font-size-adjust` design token to make this behavior configurable.
17
+
18
+ ### Minor Changes
19
+
20
+ - 4d4079c: Add default focus indicator to all focusable elements inside the Root component.
21
+
3
22
  ## 2.0.1
4
23
 
5
24
  ### Patch Changes
package/dist/html/index.css CHANGED
@@ -6,15 +6,19 @@
6
6
  :root {
7
7
  -webkit-font-smoothing: auto !important;
8
8
  -moz-osx-font-smoothing: auto !important;
9
- background-color: var(--utrecht-root-background-color);
9
+ background-color: var(--utrecht-root-background-color, Canvas);
10
10
  block-size: 100%;
11
- color: var(--utrecht-root-color);
11
+ color: var(--utrecht-root-color, CanvasText);
12
12
  font-family: var(--utrecht-root-font-family);
13
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
14
+ font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
15
+ font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
13
16
  -webkit-hyphens: auto;
14
17
  -moz-hyphens: auto;
15
18
  -ms-hyphens: auto;
16
19
  hyphens: auto;
17
20
  inline-size: 100%;
21
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
18
22
  overflow-block: auto;
19
23
  overflow-inline: auto;
20
24
  position: relative;
@@ -23,4 +27,20 @@
23
27
  -webkit-text-size-adjust: none;
24
28
  text-size-adjust: none;
25
29
  word-break: break-word;
30
+ }
31
+ @media (prefers-reduced-motion: no-preference) {
32
+ :root {
33
+ scroll-behavior: smooth;
34
+ }
35
+ }
36
+
37
+ :where(:focus-visible) {
38
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
39
+ var(--utrecht-focus-inverse-outline-color, transparent);
40
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
41
+ outline-color: var(--utrecht-focus-outline-color, revert);
42
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
43
+ outline-style: var(--utrecht-focus-outline-style, revert);
44
+ outline-width: var(--utrecht-focus-outline-width, revert);
45
+ z-index: 1;
26
46
  }
package/dist/html/index.min.css CHANGED
@@ -1 +1 @@
1
- :root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}
1
+ :root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color,Canvas);block-size:100%;color:var(--utrecht-root-color,CanvasText);font-family:var(--utrecht-root-font-family);font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));font-size-adjust:var(--utrecht-root-font-size-adjust,.5);font-weight:var(--utrecht-root-font-weight,var(--utrecht-body-font-weight));-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height));overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}:where(: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}
package/dist/html/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ":root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}";
1
+ export default ":root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color,Canvas);block-size:100%;color:var(--utrecht-root-color,CanvasText);font-family:var(--utrecht-root-font-family);font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));font-size-adjust:var(--utrecht-root-font-size-adjust,.5);font-weight:var(--utrecht-root-font-weight,var(--utrecht-body-font-weight));-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height));overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}:where(: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}";
package/dist/index.css CHANGED
@@ -6,15 +6,19 @@
6
6
  .utrecht-root {
7
7
  -webkit-font-smoothing: auto !important;
8
8
  -moz-osx-font-smoothing: auto !important;
9
- background-color: var(--utrecht-root-background-color);
9
+ background-color: var(--utrecht-root-background-color, Canvas);
10
10
  block-size: 100%;
11
- color: var(--utrecht-root-color);
11
+ color: var(--utrecht-root-color, CanvasText);
12
12
  font-family: var(--utrecht-root-font-family);
13
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
14
+ font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
15
+ font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
13
16
  -webkit-hyphens: auto;
14
17
  -moz-hyphens: auto;
15
18
  -ms-hyphens: auto;
16
19
  hyphens: auto;
17
20
  inline-size: 100%;
21
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
18
22
  overflow-block: auto;
19
23
  overflow-inline: auto;
20
24
  position: relative;
@@ -23,4 +27,22 @@
23
27
  -webkit-text-size-adjust: none;
24
28
  text-size-adjust: none;
25
29
  word-break: break-word;
30
+ }
31
+ @media (prefers-reduced-motion: no-preference) {
32
+ .utrecht-root {
33
+ scroll-behavior: smooth;
34
+ }
35
+ }
36
+ :where(.utrecht-root) :where(:focus-visible) {
37
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
38
+ var(--utrecht-focus-inverse-outline-color, transparent);
39
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
40
+ outline-color: var(--utrecht-focus-outline-color, revert);
41
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
42
+ outline-style: var(--utrecht-focus-outline-style, revert);
43
+ outline-width: var(--utrecht-focus-outline-width, revert);
44
+ z-index: 1;
45
+ }
46
+ :where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
47
+ background-color: var(--utrecht-root-background-color, Canvas);
26
48
  }
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}
1
+ .utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color,Canvas);block-size:100%;color:var(--utrecht-root-color,CanvasText);font-family:var(--utrecht-root-font-family);font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));font-size-adjust:var(--utrecht-root-font-size-adjust,.5);font-weight:var(--utrecht-root-font-weight,var(--utrecht-body-font-weight));-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height));overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}@media (prefers-reduced-motion:no-preference){.utrecht-root{scroll-behavior:smooth}}:where(.utrecht-root) :where(: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}:where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop{background-color:var(--utrecht-root-background-color,Canvas)}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color);block-size:100%;color:var(--utrecht-root-color);font-family:var(--utrecht-root-font-family);-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}";
1
+ export default ".utrecht-root{-webkit-font-smoothing:auto!important;-moz-osx-font-smoothing:auto!important;background-color:var(--utrecht-root-background-color,Canvas);block-size:100%;color:var(--utrecht-root-color,CanvasText);font-family:var(--utrecht-root-font-family);font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));font-size-adjust:var(--utrecht-root-font-size-adjust,.5);font-weight:var(--utrecht-root-font-weight,var(--utrecht-body-font-weight));-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;inline-size:100%;line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height));overflow-block:auto;overflow-inline:auto;position:relative;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;word-break:break-word}@media (prefers-reduced-motion:no-preference){.utrecht-root{scroll-behavior:smooth}}:where(.utrecht-root) :where(: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}:where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop{background-color:var(--utrecht-root-background-color,Canvas)}";
package/dist/tokens.mjs CHANGED
@@ -30,6 +30,49 @@ export default {
30
30
  "nl.nldesignsystem.figma.supports-token": false
31
31
  },
32
32
  "type": "fontFamilies"
33
+ },
34
+ "font-size-adjust": {
35
+ "$extensions": {
36
+ "nl.nldesignsystem.css.property": {
37
+ "syntax": "<number>",
38
+ "inherits": true
39
+ },
40
+ "nl.nldesignsystem.figma.supports-token": false
41
+ },
42
+ "type": "other"
43
+ },
44
+ "font-size": {
45
+ "$extensions": {
46
+ "nl.nldesignsystem.css.property": {
47
+ "syntax": "<length>",
48
+ "inherits": true
49
+ },
50
+ "nl.nldesignsystem.figma.supports-token": false
51
+ },
52
+ "type": "fontSizes"
53
+ },
54
+ "font-weight": {
55
+ "$extensions": {
56
+ "nl.nldesignsystem.css.property": {
57
+ "syntax": "<number>",
58
+ "inherits": true
59
+ },
60
+ "nl.nldesignsystem.figma.supports-token": false
61
+ },
62
+ "type": "fontWeights"
63
+ },
64
+ "line-height": {
65
+ "$extensions": {
66
+ "nl.nldesignsystem.css.property": {
67
+ "syntax": [
68
+ "<length>",
69
+ "<number>"
70
+ ],
71
+ "inherits": true
72
+ },
73
+ "nl.nldesignsystem.figma.supports-token": false
74
+ },
75
+ "type": "lineHeights"
33
76
  }
34
77
  }
35
78
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1",
2
+ "version": "3.1.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Root component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -12,7 +12,8 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "@utrecht/build-utils-css": "0.0.4"
15
+ "@utrecht/build-utils-css": "0.0.4",
16
+ "@utrecht/focus-ring-css": "3.1.0"
16
17
  },
17
18
  "keywords": [
18
19
  "nl-design-system"
package/src/_mixin.scss CHANGED
@@ -4,6 +4,8 @@
4
4
  * Copyright (c) 2021-2024 Gemeente Utrecht
5
5
  */
6
6
 
7
+ @use "~@utrecht/focus-ring-css/src/mixin" as *;
8
+
7
9
  @mixin reset-font-smoothing {
8
10
  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
9
11
  -webkit-font-smoothing: auto !important;
@@ -13,7 +15,7 @@
13
15
  @mixin utrecht-root {
14
16
  /*
15
17
  * Goals:
16
- *
18
+ *
17
19
  * - take up 100% of the space, both horizontally and vertically.
18
20
  * - create a scrollable viewport experience both on `<html>` in the root,
19
21
  * as well as on a `<div>` somewhere in a document.
@@ -25,15 +27,20 @@
25
27
  */
26
28
  @include reset-font-smoothing;
27
29
 
28
- background-color: var(--utrecht-root-background-color);
30
+ /* For some new properties, use the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
31
+ background-color: var(--utrecht-root-background-color, Canvas);
29
32
  block-size: 100%;
30
- color: var(--utrecht-root-color);
33
+ color: var(--utrecht-root-color, CanvasText);
31
34
  font-family: var(--utrecht-root-font-family);
35
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
36
+ font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
37
+ font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
32
38
  -webkit-hyphens: auto;
33
39
  -moz-hyphens: auto;
34
40
  -ms-hyphens: auto;
35
41
  hyphens: auto;
36
42
  inline-size: 100%;
43
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
37
44
  overflow-block: auto;
38
45
  overflow-inline: auto;
39
46
  position: relative;
@@ -42,4 +49,18 @@
42
49
  -webkit-text-size-adjust: none;
43
50
  text-size-adjust: none;
44
51
  word-break: break-word;
52
+
53
+ @media (prefers-reduced-motion: no-preference) {
54
+ scroll-behavior: smooth;
55
+ }
56
+ }
57
+
58
+ @mixin utrecht-root__focus-indicator {
59
+ @include utrecht-focus-ring;
60
+ }
61
+
62
+ @mixin utrecht-root__fullscreen-backdrop {
63
+ :where(&) :where(:not(:root):fullscreen)::backdrop {
64
+ background-color: var(--utrecht-root-background-color, Canvas);
65
+ }
45
66
  }
package/src/html/_mixin.scss CHANGED
@@ -5,11 +5,14 @@
5
5
  */
6
6
 
7
7
  @use "../mixin" as *;
8
+ @use "~@utrecht/focus-ring-css/src/mixin" as *;
8
9
 
9
10
  @mixin utrecht-html-html {
10
11
  html {
11
12
  @include utrecht-root;
12
13
  }
14
+
15
+ @include utrecht-focus-ring-default;
13
16
  }
14
17
 
15
18
  /**
@@ -20,4 +23,6 @@
20
23
  :root {
21
24
  @include utrecht-root;
22
25
  }
26
+
27
+ @include utrecht-focus-ring-default;
23
28
  }
package/src/index.scss CHANGED
@@ -5,7 +5,10 @@
5
5
  */
6
6
 
7
7
  @use "./mixin" as *;
8
+ @use "~@utrecht/focus-ring-css/src/mixin" as *;
8
9
 
9
10
  .utrecht-root {
10
11
  @include utrecht-root;
12
+ @include utrecht-focus-ring-default-container;
13
+ @include utrecht-root__fullscreen-backdrop;
11
14
  }
package/src/tokens.json CHANGED
@@ -30,6 +30,46 @@
30
30
  "nl.nldesignsystem.figma.supports-token": false
31
31
  },
32
32
  "type": "fontFamilies"
33
+ },
34
+ "font-size-adjust": {
35
+ "$extensions": {
36
+ "nl.nldesignsystem.css.property": {
37
+ "syntax": "<number>",
38
+ "inherits": true
39
+ },
40
+ "nl.nldesignsystem.figma.supports-token": false
41
+ },
42
+ "type": "other"
43
+ },
44
+ "font-size": {
45
+ "$extensions": {
46
+ "nl.nldesignsystem.css.property": {
47
+ "syntax": "<length>",
48
+ "inherits": true
49
+ },
50
+ "nl.nldesignsystem.figma.supports-token": false
51
+ },
52
+ "type": "fontSizes"
53
+ },
54
+ "font-weight": {
55
+ "$extensions": {
56
+ "nl.nldesignsystem.css.property": {
57
+ "syntax": "<number>",
58
+ "inherits": true
59
+ },
60
+ "nl.nldesignsystem.figma.supports-token": false
61
+ },
62
+ "type": "fontWeights"
63
+ },
64
+ "line-height": {
65
+ "$extensions": {
66
+ "nl.nldesignsystem.css.property": {
67
+ "syntax": ["<length>", "<number>"],
68
+ "inherits": true
69
+ },
70
+ "nl.nldesignsystem.figma.supports-token": false
71
+ },
72
+ "type": "lineHeights"
33
73
  }
34
74
  }
35
75
  }