@rijkshuisstijl-community/components-css 1.0.0-alpha.98 → 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.
- package/CHANGELOG.md +7 -0
- package/dist/index.css +3 -3
- package/index.scss +8 -4
- package/package.json +11 -8
- package/src/accordion/index.scss +7 -0
- package/src/action-group/index.scss +2 -2
- package/src/alert/index.scss +6 -6
- package/src/article/index.scss +7 -0
- package/src/blockquote/_mixin.scss +17 -0
- package/src/blockquote/index.scss +4 -11
- package/src/breadcrumb-nav/index.scss +4 -1
- package/src/card/_mixin.scss +15 -0
- package/src/card/index.scss +8 -0
- package/src/code-input/index.scss +6 -10
- package/src/{code-input → code-input-group}/_mixin.scss +1 -11
- package/src/code-input-group/index.scss +9 -0
- package/src/dot-badge/_mixin.scss +2 -2
- package/src/dot-badge/index.scss +5 -0
- package/src/figure/index.scss +6 -0
- package/src/file/index.scss +38 -0
- package/src/file-input/index.scss +6 -42
- package/src/footer/index.scss +94 -18
- package/src/form-field/index.scss +4 -0
- package/src/heading/index.scss +26 -0
- package/src/hero/_mixin.scss +3 -2
- package/src/link/_mixin.scss +3 -0
- package/src/link-list/index.scss +6 -0
- package/src/message-list/_mixin.scss +10 -6
- package/src/navigation-list/_mixin.scss +7 -4
- package/src/number-badge/index.scss +5 -0
- package/src/paragraph/index.scss +6 -0
- package/src/pre-heading/index.scss +0 -3
- package/src/radio-group/index.scss +4 -0
- package/src/skip-link/_mixin.scss +12 -5
- package/src/skip-link/index.scss +13 -15
- package/src/table/index.scss +6 -0
- package/src/unordered-list/index.scss +1 -1
- package/src/wrapper/_mixin.scss +420 -417
- package/src/wrapper/createSpacingCSS.js +14 -12
- package/src/wrapper/index.scss +33 -33
- package/src/wrapper/spacing-matrix.json +337 -301
- package/src/badgecounter/index.scss +0 -3
- /package/src/{textbox → text-input}/index.scss +0 -0
package/src/hero/_mixin.scss
CHANGED
|
@@ -85,9 +85,10 @@
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
@mixin rhc-hero__sub-heading {
|
|
88
|
-
|
|
88
|
+
--nl-paragraph-font-size: var(--rhc-hero-sub-heading-font-size);
|
|
89
|
+
--nl-paragraph-color: currentColor;
|
|
90
|
+
|
|
89
91
|
font-family: var(--rhc-hero-sub-heading-font-family);
|
|
90
|
-
font-size: var(--rhc-hero-sub-heading-font-size);
|
|
91
92
|
font-weight: var(--rhc-hero-sub-heading-font-weight);
|
|
92
93
|
line-height: var(--rhc-hero-sub-heading-line-height);
|
|
93
94
|
}
|
package/src/link/_mixin.scss
CHANGED
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
|
|
9
9
|
column-gap: var(--utrecht-link-column-gap, inherit);
|
|
10
10
|
display: inline-flex;
|
|
11
|
+
font-family: var(--rhc-font-family-primary, inherit);
|
|
12
|
+
font-size: var(--rhc-font-size-xs-desktop, inherit);
|
|
13
|
+
line-height: var(--rhc-line-height-md, inherit);
|
|
11
14
|
}
|
|
12
15
|
|
|
13
16
|
@mixin rhc-link--icon {
|
package/src/link-list/index.scss
CHANGED
|
@@ -13,4 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
.utrecht-link-list__item {
|
|
15
15
|
display: inline-flex;
|
|
16
|
+
font-family: var(--rhc-font-family-primary, inherit);
|
|
17
|
+
font-size: var(--rhc-font-size-xs-desktop, inherit);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.utrecht-link-list__item .utrecht-link:any-link {
|
|
21
|
+
line-height: var(--rhc-line-height-md, inherit);
|
|
16
22
|
}
|
|
@@ -55,25 +55,29 @@
|
|
|
55
55
|
grid-template-columns: 1fr 2fr auto auto;
|
|
56
56
|
}
|
|
57
57
|
@mixin rhc-message-list__item__label {
|
|
58
|
-
--
|
|
58
|
+
--nl-paragraph-font-weight: var(--rhc-message-list-item-label-font-weight);
|
|
59
|
+
--nl-paragraph-font-size: var(--rhc-message-list-item-label-font-size);
|
|
60
|
+
--nl-paragraph-line-height: var(--rhc-message-list-item-label-line-height);
|
|
59
61
|
|
|
62
|
+
align-items: center;
|
|
60
63
|
color: var(--rhc-message-list-item-heading-color);
|
|
61
64
|
column-gap: var(--rhc-space-100);
|
|
62
65
|
display: flex;
|
|
63
66
|
font-family: var(--rhc-message-list-item-label-font-family), sans-serif;
|
|
64
|
-
font-size: var(--rhc-message-list-item-label-font-size);
|
|
65
|
-
font-weight: var(--rhc-message-list-item-label-font-weight);
|
|
66
67
|
grid-area: label;
|
|
67
|
-
line-height: var(--rhc-message-list-item-label-line-height);
|
|
68
68
|
margin-block: 0;
|
|
69
69
|
}
|
|
70
70
|
@mixin rhc-message-list__item__description {
|
|
71
|
-
color: var(--rhc-color-foreground-subdued, inherit);
|
|
71
|
+
--nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
|
|
72
|
+
--nl-paragraph-font-size: var(--rhc-message-list-item-content-font-size);
|
|
73
|
+
|
|
72
74
|
grid-area: description;
|
|
73
75
|
margin-block: 0;
|
|
74
76
|
}
|
|
75
77
|
@mixin rhc-message-list__item__meta-data {
|
|
76
|
-
color: var(--rhc-color-foreground-subdued, inherit);
|
|
78
|
+
--nl-paragraph-color: var(--rhc-color-foreground-subdued, inherit);
|
|
79
|
+
--nl-paragraph-font-size: var(--rhc-message-list-item-content-font-size);
|
|
80
|
+
|
|
77
81
|
grid-area: meta;
|
|
78
82
|
margin-block: 0;
|
|
79
83
|
}
|
|
@@ -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) {
|
|
@@ -4,10 +4,17 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@mixin rhc-skip-link {
|
|
7
|
-
box-shadow: var(--
|
|
8
|
-
var(--
|
|
9
|
-
var(--
|
|
10
|
-
font-
|
|
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(--
|
|
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(--
|
|
23
|
-
border-color: var(--
|
|
24
|
-
border-style: var(--
|
|
25
|
-
border-width: var(--
|
|
26
|
-
color: var(--
|
|
27
|
-
outline
|
|
28
|
-
|
|
29
|
-
outline-
|
|
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(--
|
|
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
|
|
40
|
-
|
|
41
|
-
outline-
|
|
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
|
|
|
@@ -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-
|
|
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
|
|