@utrecht/root-css 3.0.0 → 3.1.1

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 +15 -0
  2. package/dist/html/index.css +13 -2
  3. package/dist/html/index.min.css +1 -1
  4. package/dist/html/index.mjs +1 -1
  5. package/dist/index.css +16 -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 +43 -2
  11. package/src/html/_mixin.scss +9 -0
  12. package/src/index.scss +16 -0
  13. package/src/tokens.json +30 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @utrecht/root-css
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 2ad7d66: Fix regression in fluid font-size: never set `font-size` on `:root`.
8
+
9
+ ## 3.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 3b655ff: Add system colors as fallback for Root color and background-color, to guarantee contrast.
14
+ - 9c456ab: Make `scroll-behavior: smooth` the default for Root component, except when `prefers-reduced-motion` is enabled.
15
+ - 80c3369: Root component now specifies a default background color for fullscreen elements, to avoid contrast issues.
16
+ - 9a2eeb4: Add `font-weight`, `font-size` and `line-height` tokens to Root, add `utrecht.body` tokens as fallback.
17
+
3
18
  ## 3.0.0
4
19
 
5
20
  ### Major Changes
package/dist/html/index.css CHANGED
@@ -6,11 +6,12 @@
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
13
  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
14
+ font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
14
15
  -webkit-hyphens: auto;
15
16
  -moz-hyphens: auto;
16
17
  -ms-hyphens: auto;
@@ -25,6 +26,16 @@
25
26
  text-size-adjust: none;
26
27
  word-break: break-word;
27
28
  }
29
+ @media (prefers-reduced-motion: no-preference) {
30
+ :root {
31
+ scroll-behavior: smooth;
32
+ }
33
+ }
34
+
35
+ :root > :where(*) {
36
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
37
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
38
+ }
28
39
 
29
40
  :where(:focus-visible) {
30
41
  --_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-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%;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}}:root>:where(*){font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height))}: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-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%;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}}:root>:where(*){font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height))}: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,11 +6,12 @@
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
13
  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
14
+ font-weight: var(--utrecht-root-font-weight, var(--utrecht-body-font-weight));
14
15
  -webkit-hyphens: auto;
15
16
  -moz-hyphens: auto;
16
17
  -ms-hyphens: auto;
@@ -25,6 +26,11 @@
25
26
  text-size-adjust: none;
26
27
  word-break: break-word;
27
28
  }
29
+ @media (prefers-reduced-motion: no-preference) {
30
+ .utrecht-root {
31
+ scroll-behavior: smooth;
32
+ }
33
+ }
28
34
  :where(.utrecht-root) :where(:focus-visible) {
29
35
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
30
36
  var(--utrecht-focus-inverse-outline-color, transparent);
@@ -34,4 +40,12 @@
34
40
  outline-style: var(--utrecht-focus-outline-style, revert);
35
41
  outline-width: var(--utrecht-focus-outline-width, revert);
36
42
  z-index: 1;
43
+ }
44
+ :where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
45
+ background-color: var(--utrecht-root-background-color, Canvas);
46
+ }
47
+ .utrecht-root:where(:root) > *,
48
+ .utrecht-root:where(:not(:root)) {
49
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
50
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
37
51
  }
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-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%;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)}.utrecht-root:where(:not(:root)),.utrecht-root:where(:root)>*{font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height))}
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-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%;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)}.utrecht-root:where(:not(:root)),.utrecht-root:where(:root)>*{font-size:var(--utrecht-root-font-size,var(--utrecht-body-font-size));line-height:var(--utrecht-root-line-height,var(--utrecht-body-line-height))}";
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.1",
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
@@ -24,14 +24,17 @@
24
24
  * outside the normal document flow (`absolute`, `fixed` and `sticky`)
25
25
  * are positioned relative to the root component.
26
26
  * - ensure text content fits at 400% zoom by enabling hypenation.
27
+ * - do not influence the `rem` unit by avoiding `font-size` on the root element.
27
28
  */
28
29
  @include reset-font-smoothing;
29
30
 
30
- background-color: var(--utrecht-root-background-color);
31
+ /* For some new properties, use the `utrecht.body.*` design tokens as fallback for backwards compatibility. */
32
+ background-color: var(--utrecht-root-background-color, Canvas);
31
33
  block-size: 100%;
32
- color: var(--utrecht-root-color);
34
+ color: var(--utrecht-root-color, CanvasText);
33
35
  font-family: var(--utrecht-root-font-family);
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;
@@ -45,8 +48,46 @@
45
48
  -webkit-text-size-adjust: none;
46
49
  text-size-adjust: none;
47
50
  word-break: break-word;
51
+
52
+ @media (prefers-reduced-motion: no-preference) {
53
+ scroll-behavior: smooth;
54
+ }
48
55
  }
49
56
 
57
+ /**
58
+ * The focus indicator should be applied to all elements that have the `:focus-visible` state.
59
+ */
50
60
  @mixin utrecht-root__focus-indicator {
51
61
  @include utrecht-focus-ring;
52
62
  }
63
+
64
+ /**
65
+ * Avoid setting `font-size` on `:root` if you want to keep `1rem` at `16px` for most users.
66
+ * Set `line-height` on the same element as `font-size`, to support font-relative line heights,
67
+ * even though they are discouraged.
68
+ */
69
+ @mixin utrecht-root__font-size-container {
70
+ font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
71
+ line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
72
+ }
73
+
74
+ /**
75
+ * Ensure enough contrast with `var(--utrecht-root-color)`, by overriding the
76
+ * browser black default background color of full screen elements.
77
+ *
78
+ * You can test this by opening any element inside the Root component with the
79
+ * following JavaScript, for example the Heading 1:
80
+ *
81
+ * document.querySelector('h1').requestFullscreen()
82
+ *
83
+ * In dark mode there might be enough contrast, but dark text on a black background
84
+ * would become unreadable in full screen.
85
+ *
86
+ * Use `:where()` so this background color can be overriden by a CSS selector
87
+ * with a higher specificity than (0,0,1).
88
+ */
89
+ @mixin utrecht-root__fullscreen-backdrop {
90
+ :where(&) :where(:not(:root):fullscreen)::backdrop {
91
+ background-color: var(--utrecht-root-background-color, Canvas);
92
+ }
93
+ }
package/src/html/_mixin.scss CHANGED
@@ -12,6 +12,11 @@
12
12
  @include utrecht-root;
13
13
  }
14
14
 
15
+ body,
16
+ head {
17
+ @include utrecht-root__font-size-container;
18
+ }
19
+
15
20
  @include utrecht-focus-ring-default;
16
21
  }
17
22
 
@@ -24,5 +29,9 @@
24
29
  @include utrecht-root;
25
30
  }
26
31
 
32
+ :root > :where(*) {
33
+ @include utrecht-root__font-size-container;
34
+ }
35
+
27
36
  @include utrecht-focus-ring-default;
28
37
  }
package/src/index.scss CHANGED
@@ -10,4 +10,20 @@
10
10
  .utrecht-root {
11
11
  @include utrecht-root;
12
12
  @include utrecht-focus-ring-default-container;
13
+ @include utrecht-root__fullscreen-backdrop;
14
+ }
15
+
16
+ /**
17
+ * Avoid influencing the `rem` unit. We do this by specifically excluding
18
+ * `font-size` on the `:root` element, which is typically the `html` element.
19
+ * Instead apply the `font-size` on the children of the `html` element: `head` and `body`.
20
+ * Any other element that has this class name can have `font-size` directly,
21
+ * that wouldn't cause the undesired side effect.
22
+ *
23
+ * Use the `:where` selector so any CSS selector with a specificity higher than (0,1,0)
24
+ * can override this `font-size`.
25
+ */
26
+ .utrecht-root:where(:root) > *,
27
+ .utrecht-root:where(:not(:root)) {
28
+ @include utrecht-root__font-size-container;
13
29
  }
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
  }