@rijkshuisstijl-community/components-css 1.0.0-alpha.99 → 1.0.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 (42) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +3 -3
  3. package/index.scss +7 -4
  4. package/package.json +11 -8
  5. package/src/accordion/index.scss +7 -0
  6. package/src/action-group/index.scss +2 -2
  7. package/src/alert/index.scss +6 -6
  8. package/src/article/index.scss +7 -0
  9. package/src/blockquote/_mixin.scss +17 -0
  10. package/src/blockquote/index.scss +4 -11
  11. package/src/breadcrumb-nav/index.scss +4 -1
  12. package/src/card/_mixin.scss +15 -0
  13. package/src/card/index.scss +8 -0
  14. package/src/code-input/index.scss +6 -10
  15. package/src/{code-input → code-input-group}/_mixin.scss +1 -11
  16. package/src/code-input-group/index.scss +9 -0
  17. package/src/dot-badge/_mixin.scss +2 -2
  18. package/src/dot-badge/index.scss +5 -0
  19. package/src/figure/index.scss +6 -0
  20. package/src/file-input/index.scss +5 -2
  21. package/src/footer/index.scss +94 -18
  22. package/src/form-field/index.scss +4 -0
  23. package/src/heading/index.scss +26 -0
  24. package/src/hero/_mixin.scss +3 -2
  25. package/src/link/_mixin.scss +3 -0
  26. package/src/link-list/index.scss +6 -0
  27. package/src/message-list/_mixin.scss +10 -6
  28. package/src/navigation-list/_mixin.scss +7 -4
  29. package/src/number-badge/index.scss +5 -0
  30. package/src/paragraph/index.scss +6 -0
  31. package/src/pre-heading/index.scss +0 -3
  32. package/src/radio-group/index.scss +4 -0
  33. package/src/skip-link/_mixin.scss +12 -5
  34. package/src/skip-link/index.scss +13 -15
  35. package/src/table/index.scss +6 -0
  36. package/src/unordered-list/index.scss +1 -1
  37. package/src/wrapper/_mixin.scss +420 -417
  38. package/src/wrapper/createSpacingCSS.js +14 -12
  39. package/src/wrapper/index.scss +33 -33
  40. package/src/wrapper/spacing-matrix.json +337 -301
  41. package/src/badgecounter/index.scss +0 -3
  42. /package/src/{textbox → text-input}/index.scss +0 -0
package/src/navigation-list/_mixin.scss CHANGED
@@ -68,16 +68,19 @@
68
68
  }
69
69
 
70
70
  @mixin rhc-navigation-list__item__label {
71
+ --nl-paragraph-font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-font-size-md-desktop));
72
+ --nl-paragraph-font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-font-weight-bold));
73
+ --nl-paragraph-line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-line-height-md));
74
+
71
75
  color: var(--rhc-navigation-list-item-heading-color, var(--rhc-color-foreground-lint));
72
76
  font-family: var(--rhc-navigation-list-item-label-font-family, var(--rhc-font-family-primary)), sans-serif;
73
- font-size: var(--rhc-navigation-list-item-label-font-size, var(--rhc-font-size-md-desktop));
74
- font-weight: var(--rhc-navigation-list-item-label-font-weight, var(--rhc-font-weight-bold));
75
77
  grid-area: label;
76
- line-height: var(--rhc-navigation-list-item-label-line-height, var(--rhc-line-height-md));
77
78
  margin-block: 0;
78
79
  }
79
80
  @mixin rhc-navigation-list__item__description {
80
- color: var(--rhc-color-foreground-subdued);
81
+ --nl-paragraph-color: var(--rhc-color-foreground-subdued);
82
+ --nl-paragraph-font-size: var(--rhc-navigation-list-item-content-font-size, var(--rhc-font-size-sm-desktop));
83
+
81
84
  grid-area: content;
82
85
  margin-block: 0;
83
86
  @media (width<= 768px) {
package/src/number-badge/index.scss ADDED
@@ -0,0 +1,5 @@
1
+ @use "../../node_modules/@nl-design-system-candidate/number-badge-css/dist/number-badge.css";
2
+
3
+ .nl-number-badge {
4
+ box-sizing: content-box;
5
+ }
package/src/paragraph/index.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "../../node_modules/@nl-design-system-candidate/paragraph-css/dist/paragraph.css";
2
+
3
+ .nl-paragraph {
4
+ margin-block-end: var(--nl-paragraph-margin-block-end);
5
+ margin-block-start: var(--nl-paragraph-margin-block-start);
6
+ }
package/src/pre-heading/index.scss CHANGED
@@ -11,9 +11,6 @@
11
11
  }
12
12
 
13
13
  .rhc-pre-heading {
14
- --utrecht-pre-heading-color: var(--utrecht-heading-1-color, inherit);
15
- --utrecht-pre-heading-font-weight: var(--rhc-font-weight-regular, inherit);
16
-
17
14
  grid-area: preheading;
18
15
  }
19
16
 
package/src/radio-group/index.scss CHANGED
@@ -8,3 +8,7 @@
8
8
  .rhc-radio-group {
9
9
  @include mixin.rhc-radio-group;
10
10
  }
11
+
12
+ .utrecht-form-label {
13
+ line-height: var(--rhc-line-height-md, inherit);
14
+ }
package/src/skip-link/_mixin.scss CHANGED
@@ -4,10 +4,17 @@
4
4
  */
5
5
 
6
6
  @mixin rhc-skip-link {
7
- box-shadow: var(--utrecht-skip-link-box-block-end-shadow-offset-x)
8
- var(--utrecht-skip-link-box-block-end-shadow-offset-y) var(--utrecht-skip-link-box-block-end-shadow-blur-radius)
9
- var(--utrecht-skip-link-box-block-end-shadow-spread-radius) var(--utrecht-skip-link-box-block-end-shadow-color);
10
- font-weight: var(--utrecht-skip-link-font-weight, inherit);
7
+ box-shadow: var(--nl-skip-link-box-block-end-shadow-offset-x) var(--nl-skip-link-box-block-end-shadow-offset-y)
8
+ var(--nl-skip-link-box-block-end-shadow-blur-radius) var(--nl-skip-link-box-block-end-shadow-spread-radius)
9
+ var(--nl-skip-link-box-block-end-shadow-color);
10
+ font-family: var(--rhc-font-family-primary, inherit), serif;
11
+ font-size: var(--rhc-font-size-xs-desktop, inherit);
12
+ font-weight: var(--nl-skip-link-font-weight, inherit);
13
+ line-height: var(--rhc-line-height-md, inherit);
14
+ padding-block-end: var(--nl-skip-link-padding-block-end, inherit);
15
+ padding-block-start: var(--nl-skip-link-padding-block-start, inherit);
16
+ padding-inline-end: var(--nl-skip-link-padding-inline-end, inherit);
17
+ padding-inline-start: var(--nl-skip-link-padding-inline-start, inherit);
11
18
  position: revert;
12
- text-underline-offset: var(--utrecht-skip-link-text-underline-offset, inherit);
19
+ text-underline-offset: var(--nl-skip-link-text-underline-offset, inherit);
13
20
  }
package/src/skip-link/index.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  * @license EUPL-1.2
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
-
5
+ @use "../../node_modules/@nl-design-system-candidate/skip-link-css/dist/skip-link.css";
6
6
  @use "mixin";
7
7
 
8
8
  .rhc-skip-link {
@@ -19,25 +19,23 @@
19
19
  .rhc-skip-link:focus {
20
20
  @include mixin.rhc-skip-link;
21
21
 
22
- background-color: var(--utrecht-skip-link-focus-background-color, inherit);
23
- border-color: var(--utrecht-skip-link-focus-border-color, inherit);
24
- border-style: var(--utrecht-skip-link-focus-border-style, inherit);
25
- border-width: var(--utrecht-skip-link-focus-border-width, inherit);
26
- color: var(--utrecht-skip-link-focus-color, inherit);
27
- outline-color: var(--utrecht-skip-link-focus-outline-color, revert);
28
- outline-offset: var(--utrecht-skip-link-focus-outline-offset, revert);
29
- outline-style: var(--utrecht-skip-link-focus-outline-style, revert);
30
- outline-width: var(--utrecht-skip-link-focus-outline-width, revert);
22
+ background-color: var(--nl-skip-link-focus-background-color, inherit);
23
+ border-color: var(--nl-skip-link-focus-border-color, inherit);
24
+ border-style: var(--nl-skip-link-focus-border-style, inherit);
25
+ border-width: var(--nl-skip-link-focus-border-width, inherit);
26
+ color: var(--nl-skip-link-focus-color, inherit);
27
+ outline: var(--nl-skip-link-focus-outline-color, revert) var(--nl-skip-link-focus-outline-style, revert)
28
+ var(--nl-skip-link-focus-outline-width, revert);
29
+ outline-offset: var(--nl-skip-link-focus-outline-offset, revert);
31
30
  position: revert;
32
- text-decoration: var(--utrecht-skip-link-focus-text-decoration, inherit);
31
+ text-decoration: var(--nl-skip-link-focus-text-decoration, inherit);
33
32
  }
34
33
 
35
34
  .rhc-skip-link--focus-visible,
36
35
  .rhc-skip-link:focus-visible {
37
36
  @include mixin.rhc-skip-link;
38
37
 
39
- outline-color: var(--utrecht-skip-link-focus-visible-outline-color, var(--utrecht-focus-outline-color));
40
- outline-offset: var(--utrecht-skip-link-focus-visible-outline-offset, var(--utrecht-focus-outline-offset));
41
- outline-style: var(--utrecht-skip-link-focus-visible-outline-style, var(--utrecht-focus-outline-style));
42
- outline-width: var(--utrecht-skip-link-focus-visible-outline-width, var(--utrecht-focus-outline-width));
38
+ outline: var(--nl-skip-link-focus-visible-outline-color) var(--nl-skip-link-focus-visible-outline-style)
39
+ var(--nl-skip-link-focus-visible-outline-width);
40
+ outline-offset: var(--nl-skip-link-focus-visible-outline-offset);
43
41
  }
package/src/table/index.scss CHANGED
@@ -34,7 +34,13 @@
34
34
  --_utrecht-table-cell-text-align: start;
35
35
  }
36
36
 
37
+ &-cell {
38
+ --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
39
+ }
40
+
37
41
  &--cell {
42
+ --utrecht-table-cell-line-height: var(--rhc-line-height-md, inherit);
43
+
38
44
  &-row {
39
45
  --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;
40
46
 
package/src/unordered-list/index.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  font-family: var(--utrecht-unordered-list-font-family);
9
9
  font-size: var(--utrecht-unordered-list-font-size);
10
10
  font-weight: var(--utrecht-unordered-list-font-weight);
11
- line-height: var(--utrecht-unordered-list-line-heigh);
11
+ line-height: var(--utrecht-unordered-list-line-height);
12
12
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start);
13
13
  }
14
14