@utrecht/root-css 3.0.0 → 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 (12) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/html/index.css +10 -2
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +13 -2
  6. package/dist/index.min.css +1 -1
  7. package/dist/index.mjs +1 -1
  8. package/dist/tokens.mjs +33 -0
  9. package/package.json +1 -1
  10. package/src/_mixin.scss +16 -2
  11. package/src/index.scss +1 -0
  12. package/src/tokens.json +30 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
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
+
3
12
  ## 3.0.0
4
13
 
5
14
  ### Major Changes
package/dist/html/index.css CHANGED
@@ -6,16 +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));
13
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));
14
16
  -webkit-hyphens: auto;
15
17
  -moz-hyphens: auto;
16
18
  -ms-hyphens: auto;
17
19
  hyphens: auto;
18
20
  inline-size: 100%;
21
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
19
22
  overflow-block: auto;
20
23
  overflow-inline: auto;
21
24
  position: relative;
@@ -25,6 +28,11 @@
25
28
  text-size-adjust: none;
26
29
  word-break: break-word;
27
30
  }
31
+ @media (prefers-reduced-motion: no-preference) {
32
+ :root {
33
+ scroll-behavior: smooth;
34
+ }
35
+ }
28
36
 
29
37
  :where(:focus-visible) {
30
38
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
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);font-size-adjust:var(--utrecht-root-font-size-adjust,.5);-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}: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}
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);font-size-adjust:var(--utrecht-root-font-size-adjust,.5);-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}: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}";
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,16 +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));
13
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));
14
16
  -webkit-hyphens: auto;
15
17
  -moz-hyphens: auto;
16
18
  -ms-hyphens: auto;
17
19
  hyphens: auto;
18
20
  inline-size: 100%;
21
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
19
22
  overflow-block: auto;
20
23
  overflow-inline: auto;
21
24
  position: relative;
@@ -25,6 +28,11 @@
25
28
  text-size-adjust: none;
26
29
  word-break: break-word;
27
30
  }
31
+ @media (prefers-reduced-motion: no-preference) {
32
+ .utrecht-root {
33
+ scroll-behavior: smooth;
34
+ }
35
+ }
28
36
  :where(.utrecht-root) :where(:focus-visible) {
29
37
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
30
38
  var(--utrecht-focus-inverse-outline-color, transparent);
@@ -34,4 +42,7 @@
34
42
  outline-style: var(--utrecht-focus-outline-style, revert);
35
43
  outline-width: var(--utrecht-focus-outline-width, revert);
36
44
  z-index: 1;
45
+ }
46
+ :where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
47
+ background-color: var(--utrecht-root-background-color, Canvas);
37
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);font-size-adjust:var(--utrecht-root-font-size-adjust,.5);-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}: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}
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);font-size-adjust:var(--utrecht-root-font-size-adjust,.5);-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}: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}";
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
@@ -40,6 +40,39 @@ export default {
40
40
  "nl.nldesignsystem.figma.supports-token": false
41
41
  },
42
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"
43
76
  }
44
77
  }
45
78
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.0",
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",
package/src/_mixin.scss CHANGED
@@ -27,16 +27,20 @@
27
27
  */
28
28
  @include reset-font-smoothing;
29
29
 
30
- 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);
31
32
  block-size: 100%;
32
- color: var(--utrecht-root-color);
33
+ color: var(--utrecht-root-color, CanvasText);
33
34
  font-family: var(--utrecht-root-font-family);
35
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
34
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));
35
38
  -webkit-hyphens: auto;
36
39
  -moz-hyphens: auto;
37
40
  -ms-hyphens: auto;
38
41
  hyphens: auto;
39
42
  inline-size: 100%;
43
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
40
44
  overflow-block: auto;
41
45
  overflow-inline: auto;
42
46
  position: relative;
@@ -45,8 +49,18 @@
45
49
  -webkit-text-size-adjust: none;
46
50
  text-size-adjust: none;
47
51
  word-break: break-word;
52
+
53
+ @media (prefers-reduced-motion: no-preference) {
54
+ scroll-behavior: smooth;
55
+ }
48
56
  }
49
57
 
50
58
  @mixin utrecht-root__focus-indicator {
51
59
  @include utrecht-focus-ring;
52
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
+ }
66
+ }
package/src/index.scss CHANGED
@@ -10,4 +10,5 @@
10
10
  .utrecht-root {
11
11
  @include utrecht-root;
12
12
  @include utrecht-focus-ring-default-container;
13
+ @include utrecht-root__fullscreen-backdrop;
13
14
  }
package/src/tokens.json CHANGED
@@ -40,6 +40,36 @@
40
40
  "nl.nldesignsystem.figma.supports-token": false
41
41
  },
42
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"
43
73
  }
44
74
  }
45
75
  }