@rijkshuisstijl-community/components-css 1.1.0 → 2.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 (9) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/index.css +8 -4
  3. package/index.scss +1 -0
  4. package/package.json +8 -8
  5. package/src/data-summary/_mixin.scss +113 -0
  6. package/src/data-summary/index.scss +53 -0
  7. package/src/footer/index.scss +2 -1
  8. package/src/link/_mixin.scss +1 -0
  9. package/src/link-list/index.scss +5 -0
package/index.scss CHANGED
@@ -52,3 +52,4 @@
52
52
  @use "src/unordered-list/index" as unorderedList;
53
53
  @use "src/visually-hidden/index" as visually-hidden;
54
54
  @use "src/wrapper/index" as wrapper;
55
+ @use "src/data-summary/index" as dataSummary;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rijkshuisstijl-community/components-css",
3
- "version": "1.1.0",
3
+ "version": "2.0.0",
4
4
  "type": "module",
5
5
  "author": "Community for NL Design System",
6
6
  "description": "CSS Components for a design system based on the NL Design System architecture",
@@ -20,15 +20,15 @@
20
20
  },
21
21
  "devDependencies": {
22
22
  "scss": "0.2.4",
23
- "vite": "6.2.3"
23
+ "vite": "6.3.4"
24
24
  },
25
25
  "dependencies": {
26
- "@nl-design-system-candidate/heading-css": "1.0.1",
27
- "@nl-design-system-candidate/link-css": "1.0.1",
28
- "@nl-design-system-candidate/number-badge-css": "1.1.1",
29
- "@nl-design-system-candidate/paragraph-css": "2.0.1",
30
- "@nl-design-system-candidate/skip-link-css": "1.0.1",
31
- "@utrecht/component-library-css": "7.1.2"
26
+ "@nl-design-system-candidate/heading-css": "1.1.0",
27
+ "@nl-design-system-candidate/link-css": "2.0.0",
28
+ "@nl-design-system-candidate/number-badge-css": "1.1.2",
29
+ "@nl-design-system-candidate/paragraph-css": "2.1.0",
30
+ "@nl-design-system-candidate/skip-link-css": "1.0.2",
31
+ "@utrecht/component-library-css": "7.2.1"
32
32
  },
33
33
  "scripts": {
34
34
  "dev": "vite build --watch",
package/src/data-summary/_mixin.scss ADDED
@@ -0,0 +1,113 @@
1
+ @mixin rhc-data-summary {
2
+ font-family: var(--rhc-data-summary-font-family);
3
+ font-size: var(--rhc-data-summary-font-size);
4
+ line-height: var(--rhc-data-summary-line-height);
5
+ }
6
+
7
+ @mixin rhc-data-summary__item {
8
+ border-block-end-style: var(--rhc-data-summary-item-border-block-end-style);
9
+ border-color: var(--rhc-data-summary-item-border-color);
10
+ border-width: var(--rhc-data-summary-item-border-width);
11
+ color: var(--rhc-data-summary-item-color);
12
+ display: flex;
13
+ }
14
+
15
+ @mixin rhc-data-summary--column__item {
16
+ flex-direction: column;
17
+ }
18
+
19
+ @mixin rhc-data-summary--row__item {
20
+ @include rhc-data-summary--column__item;
21
+
22
+ @media (width > 768px) {
23
+ flex-direction: row;
24
+ }
25
+ }
26
+
27
+ @mixin rhc-data-summary__item-action {
28
+ padding-block-end: var(--_rhc-data-summary-item-action-padding-block-end);
29
+ padding-block-start: var(--_rhc-data-summary-item-action-padding-block-start);
30
+ padding-inline-end: var(--_rhc-data-summary-item-action-padding-inline-end);
31
+ padding-inline-start: var(--_rhc-data-summary-item-action-padding-inline-start);
32
+
33
+ @media (width > 768px) {
34
+ flex-basis: 20%;
35
+ }
36
+ }
37
+
38
+ @mixin rhc-data-summary--column__item-action {
39
+ --_rhc-data-summary-item-action-padding-block-end: var(--rhc-data-summary-item-action-padding-block-end);
40
+ --_rhc-data-summary-item-action-padding-block-start: var(--rhc-data-summary-item-action-padding-block-start);
41
+ --_rhc-data-summary-item-action-padding-inline-end: var(--rhc-data-summary-item-action-padding-inline-end);
42
+ --_rhc-data-summary-item-action-padding-inline-start: var(--rhc-data-summary-item-action-padding-inline-start);
43
+ }
44
+
45
+ @mixin rhc-data-summary--row__item-action {
46
+ @include rhc-data-summary--column__item-action;
47
+
48
+ @media (width > 768px) {
49
+ --_rhc-data-summary-item-action-padding-block-end: var(--rhc-data-summary-item-action-row-padding-block-end);
50
+ --_rhc-data-summary-item-action-padding-block-start: var(--rhc-data-summary-item-action-row-padding-block-start);
51
+ --_rhc-data-summary-item-action-padding-inline-end: var(--rhc-data-summary-item-action-row-padding-inline-end);
52
+ --_rhc-data-summary-item-action-padding-inline-start: var(--rhc-data-summary-item-action-row-padding-inline-start);
53
+
54
+ margin-inline-start: auto;
55
+ text-align: end;
56
+ }
57
+ }
58
+
59
+ @mixin rhc-data-summary__item-key {
60
+ font-weight: var(--rhc-data-summary-item-key-font-weight);
61
+ padding-block-end: var(--_rhc-data-summary-item-key-padding-block-end);
62
+ padding-block-start: var(--_rhc-data-summary-item-key-padding-block-start);
63
+ padding-inline-end: var(--_rhc-data-summary-item-key-padding-inline-end);
64
+ padding-inline-start: var(--_rhc-data-summary-item-key-padding-inline-start);
65
+ }
66
+
67
+ @mixin rhc-data-summary--column__item-key {
68
+ --_rhc-data-summary-item-key-padding-block-end: var(--rhc-data-summary-item-key-padding-block-end);
69
+ --_rhc-data-summary-item-key-padding-block-start: var(--rhc-data-summary-item-key-padding-block-start);
70
+ --_rhc-data-summary-item-key-padding-inline-end: var(--rhc-data-summary-item-key-padding-inline-end);
71
+ --_rhc-data-summary-item-key-padding-inline-start: var(--rhc-data-summary-item-key-padding-inline-start);
72
+ }
73
+
74
+ @mixin rhc-data-summary--row__item-key {
75
+ @include rhc-data-summary--column__item-key;
76
+
77
+ @media (width > 768px) {
78
+ --_rhc-data-summary-item-key-padding-block-end: var(--rhc-data-summary-item-key-row-padding-block-end);
79
+ --_rhc-data-summary-item-key-padding-block-start: var(--rhc-data-summary-item-key-row-padding-block-start);
80
+ --_rhc-data-summary-item-key-padding-inline-end: var(--rhc-data-summary-item-key-row-padding-inline-end);
81
+ --_rhc-data-summary-item-key-padding-inline-start: var(--rhc-data-summary-item-key-row-padding-inline-start);
82
+
83
+ flex-basis: 20%;
84
+ }
85
+ }
86
+
87
+ @mixin rhc-data-summary__item-value {
88
+ flex: 1;
89
+ font-weight: var(--rhc-data-summary-item-value-font-weight);
90
+ margin-inline-start: 0;
91
+ padding-block-end: var(--_rhc-data-summary-item-value-padding-block-end);
92
+ padding-block-start: var(--_rhc-data-summary-item-value-padding-block-start);
93
+ padding-inline-end: var(--_rhc-data-summary-item-value-padding-inline-end);
94
+ padding-inline-start: var(--_rhc-data-summary-item-value-padding-inline-start);
95
+ }
96
+
97
+ @mixin rhc-data-summary--column__item-value {
98
+ --_rhc-data-summary-item-value-padding-block-end: var(--rhc-data-summary-item-value-padding-block-end);
99
+ --_rhc-data-summary-item-value-padding-block-start: var(--rhc-data-summary-item-value-padding-block-start);
100
+ --_rhc-data-summary-item-value-padding-inline-end: var(--rhc-data-summary-item-value-padding-inline-end);
101
+ --_rhc-data-summary-item-value-padding-inline-start: var(--rhc-data-summary-item-value-padding-inline-start);
102
+ }
103
+
104
+ @mixin rhc-data-summary--row__item-value {
105
+ @include rhc-data-summary--column__item-value;
106
+
107
+ @media (width > 768px) {
108
+ --_rhc-data-summary-item-value-padding-block-end: var(--rhc-data-summary-item-value-row-padding-block-end);
109
+ --_rhc-data-summary-item-value-padding-block-start: var(--rhc-data-summary-item-value-row-padding-block-start);
110
+ --_rhc-data-summary-item-value-padding-inline-end: var(--rhc-data-summary-item-value-row-padding-inline-end);
111
+ --_rhc-data-summary-item-value-padding-inline-start: var(--rhc-data-summary-item-value-row-padding-inline-start);
112
+ }
113
+ }
package/src/data-summary/index.scss ADDED
@@ -0,0 +1,53 @@
1
+ @use "mixin";
2
+
3
+ .rhc-data-summary {
4
+ @include mixin.rhc-data-summary;
5
+ }
6
+
7
+ .rhc-data-summary__item {
8
+ @include mixin.rhc-data-summary__item;
9
+ }
10
+
11
+ .rhc-data-summary--column .rhc-data-summary__item {
12
+ @include mixin.rhc-data-summary--column__item;
13
+ }
14
+
15
+ .rhc-data-summary--row .rhc-data-summary__item {
16
+ @include mixin.rhc-data-summary--row__item;
17
+ }
18
+
19
+ .rhc-data-summary__item-action {
20
+ @include mixin.rhc-data-summary__item-action;
21
+ }
22
+
23
+ .rhc-data-summary--column .rhc-data-summary__item-action {
24
+ @include mixin.rhc-data-summary--column__item-action;
25
+ }
26
+
27
+ .rhc-data-summary--row .rhc-data-summary__item-action {
28
+ @include mixin.rhc-data-summary--row__item-action;
29
+ }
30
+
31
+ .rhc-data-summary__item-key {
32
+ @include mixin.rhc-data-summary__item-key;
33
+ }
34
+
35
+ .rhc-data-summary--column .rhc-data-summary__item-key {
36
+ @include mixin.rhc-data-summary--column__item-key;
37
+ }
38
+
39
+ .rhc-data-summary--row .rhc-data-summary__item-key {
40
+ @include mixin.rhc-data-summary--row__item-key;
41
+ }
42
+
43
+ .rhc-data-summary__item-value {
44
+ @include mixin.rhc-data-summary__item-value;
45
+ }
46
+
47
+ .rhc-data-summary--column .rhc-data-summary__item-value {
48
+ @include mixin.rhc-data-summary--column__item-value;
49
+ }
50
+
51
+ .rhc-data-summary--row .rhc-data-summary__item-value {
52
+ @include mixin.rhc-data-summary--row__item-value;
53
+ }
package/src/footer/index.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  --nl-heading-level-4-color: currentColor;
15
15
  --nl-heading-level-5-color: currentColor;
16
16
  --nl-heading-level-6-color: currentColor;
17
+ --nl-paragraph-color: currentColor;
17
18
 
18
19
  align-items: center;
19
20
  display: flex;
@@ -21,7 +22,7 @@
21
22
  padding-block: 0;
22
23
  padding-inline: 0;
23
24
 
24
- :is(h1, h2, h3, h4, h5, h6) {
25
+ :is(h1, h2, h3, h4, h5, h6, p) {
25
26
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
26
27
  }
27
28
  }
package/src/link/_mixin.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  @mixin rhc-link--any-link {
7
7
  --utrecht-icon-inset-block-start: var(--nl-link-icon-inset-block-start, inherit);
8
8
 
9
+ align-items: baseline;
9
10
  column-gap: var(--nl-link-column-gap, inherit);
10
11
  display: inline-flex;
11
12
  font-family: var(--rhc-font-family-primary, inherit);
package/src/link-list/index.scss CHANGED
@@ -28,3 +28,8 @@
28
28
  .utrecht-link-list__item .utrecht-link:any-link {
29
29
  line-height: var(--rhc-line-height-md, inherit);
30
30
  }
31
+
32
+ .utrecht-link-list__item .nl-link {
33
+ --nl-link-column-gap: var(--utrecht-link-list-item-column-gap);
34
+ --nl-link-text-decoration-line: var(--rhc-link-list-text-decoration);
35
+ }