@rijkshuisstijl-community/components-css 1.0.2 → 1.0.3

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +4 -4
  3. package/package.json +4 -3
  4. package/src/card/_mixin.scss +6 -1
  5. package/src/link/_mixin.scss +12 -8
  6. package/src/link/index.scss +15 -14
  7. package/src/link-list/index.scss +5 -1
  8. package/src/navbar/index.scss +2 -2
  9. package/src/wrapper/_mixin.scss +69 -69
  10. package/src/wrapper/index.scss +1 -1
  11. package/src/wrapper/spacing-matrix.json +38 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rijkshuisstijl-community/components-css",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
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,14 +20,15 @@
20
20
  },
21
21
  "devDependencies": {
22
22
  "scss": "0.2.4",
23
- "vite": "6.2.0"
23
+ "vite": "6.2.2"
24
24
  },
25
25
  "dependencies": {
26
26
  "@nl-design-system-candidate/heading-css": "1.0.0",
27
+ "@nl-design-system-candidate/link-css": "1.0.0",
27
28
  "@nl-design-system-candidate/number-badge-css": "1.1.0",
28
29
  "@nl-design-system-candidate/paragraph-css": "2.0.0",
29
30
  "@nl-design-system-candidate/skip-link-css": "1.0.0",
30
- "@utrecht/component-library-css": "7.1.0"
31
+ "@utrecht/component-library-css": "7.1.2"
31
32
  },
32
33
  "scripts": {
33
34
  "dev": "vite build --watch",
package/src/card/_mixin.scss CHANGED
@@ -18,10 +18,11 @@
18
18
  border-color: var(--rhc-card-as-link-border-color, #cbd5e1);
19
19
  border-style: solid;
20
20
  border-width: var(--rhc-card-as-link-border-width, 1px);
21
- color: var(--rhc-card-as-link-color, #154273);
21
+ color: var(--rhc-card-as-link-color, #0f172a);
22
22
  }
23
23
 
24
24
  @mixin rhc-card--full-bleed {
25
+ --rhc-card-as-link-heading-color: var(--rhc-card-as-link-full-bleed-color, white);
25
26
  --rhc-card-as-link-metadata-color: var(
26
27
  --rhc-card-as-link-full-bleed-metadata-color,
27
28
  var(--rhc-card-as-link-full-bleed-color, white)
@@ -31,6 +32,9 @@
31
32
  }
32
33
 
33
34
  @mixin rhc-card--horizontal {
35
+ --rhc-card-as-link-heading-color: var(--rhc-card-as-link-horizontal-color, white);
36
+
37
+ color: var(--rhc-card-as-link-horizontal-color, white);
34
38
  flex-direction: row;
35
39
  gap: 0;
36
40
  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
@@ -120,6 +124,7 @@
120
124
 
121
125
  @mixin rhc-card__heading {
122
126
  align-items: center;
127
+ color: var(--rhc-card-as-link-heading-color, #154273);
123
128
  display: flex;
124
129
  font-size: var(--rhc-card-as-link-heading-font-size, 24px);
125
130
  font-weight: var(--rhc-card-as-link-heading-font-weight, 700);
package/src/link/_mixin.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  */
5
5
 
6
6
  @mixin rhc-link--any-link {
7
- --utrecht-icon-inset-block-start: var(--utrecht-link-icon-inset-block-start, inherit);
7
+ --utrecht-icon-inset-block-start: var(--nl-link-icon-inset-block-start, inherit);
8
8
 
9
- column-gap: var(--utrecht-link-column-gap, inherit);
9
+ column-gap: var(--nl-link-column-gap, inherit);
10
10
  display: inline-flex;
11
11
  font-family: var(--rhc-font-family-primary, inherit);
12
12
  font-size: var(--rhc-font-size-xs-desktop, inherit);
@@ -14,28 +14,32 @@
14
14
  }
15
15
 
16
16
  @mixin rhc-link--icon {
17
- min-block-size: var(--utrecht-link-icon-size, inherit);
18
- min-inline-size: var(--utrecht-link-icon-size, inherit);
17
+ min-block-size: var(--nl-link-icon-size, inherit);
18
+ min-inline-size: var(--nl-link-icon-size, inherit);
19
19
  }
20
20
 
21
21
  @mixin rhc-link--visited {
22
- --utrecht-link-text-decoration-color: var(--utrecht-link-visited-color, inherit);
22
+ --nl-link-text-decoration-color: var(--nl-link-visited-color, inherit);
23
23
 
24
24
  color: var(--utrecht-link-visited-color, inherit);
25
25
  }
26
26
 
27
27
  @mixin rhc-link--visited-icon {
28
- color: var(--utrecht-link-visited-color, inherit);
28
+ color: var(--nl-link-visited-color, inherit);
29
29
  }
30
30
 
31
31
  @mixin rhc-link--active {
32
- --utrecht-link-text-decoration: var(--utrecht-link-active-text-decoration, inherit);
32
+ --nl-link-text-decoration: var(--nl-link-active-text-decoration, inherit);
33
+ --nl-link-text-decoration-line: var(--nl-link-active-text-decoration, inherit);
33
34
  }
34
35
 
35
36
  @mixin rhc-link--focus-visible {
37
+ --nl-link-text-decoration-line: var(--nl-link-focus-text-decoration, inherit);
38
+
36
39
  z-index: var(--utrecht-stack-focus-z-index, 1);
37
40
  }
38
41
 
39
42
  @mixin rhc-link--focus {
40
- --_utrecht-link-state-text-decoration: none;
43
+ --nl-link-text-decoration-line: var(--nl-link-focus-text-decoration, inherit);
44
+ --_nl-link-state-text-decoration: none;
41
45
  }
package/src/link/index.scss CHANGED
@@ -4,41 +4,42 @@
4
4
  */
5
5
  @use "../button/mixin" as button-mixin;
6
6
  @use "mixin";
7
+ @use "../../node_modules/@nl-design-system-candidate/link-css/dist/link.css";
7
8
 
8
- .utrecht-rich-text .utrecht-link {
9
- margin-block-end: var(--utrecht-link-margin-block-end);
9
+ .utrecht-rich-text .nl-link {
10
+ margin-block-end: var(--nl-link-margin-block-end);
10
11
  }
11
12
 
12
- .utrecht-link:any-link {
13
+ .nl-link:any-link {
13
14
  @include mixin.rhc-link--any-link;
14
15
  }
15
16
 
16
- .utrecht-link:any-link .utrecht-icon {
17
+ .nl-link:any-link .utrecht-icon {
17
18
  @include mixin.rhc-link--icon;
18
19
  }
19
20
 
20
- .utrecht-link:visited,
21
- .utrecht-link--visted {
21
+ .nl-link:visited,
22
+ .nl-link--visted {
22
23
  @include mixin.rhc-link--visited;
23
24
  }
24
25
 
25
- .utrecht-link:visited .utrecht-icon {
26
+ .nl-link:visited .nl-icon {
26
27
  @include mixin.rhc-link--visited-icon;
27
28
  }
28
29
 
29
- .utrecht-link:active,
30
- .utrecht-link--active {
30
+ .nl-link:active,
31
+ .nl-link--active {
31
32
  @include mixin.rhc-link--active;
32
33
  }
33
34
 
34
- .utrecht-link:focus-visible,
35
- .utrecht-link--focus-visible,
36
- .utrecht-link:focus,
37
- .utrecht-link--focus {
35
+ .nl-link:focus-visible,
36
+ .nl-link--focus-visible,
37
+ .nl-link:focus,
38
+ .nl-link--focus {
38
39
  @include mixin.rhc-link--focus-visible;
39
40
  @include mixin.rhc-link--focus;
40
41
  }
41
42
 
42
- .utrecht-link .rhc-link__sr-only {
43
+ .nl-link .rhc-link__sr-only {
43
44
  @include button-mixin.invisible-but-accessible;
44
45
  }
package/src/link-list/index.scss CHANGED
@@ -5,10 +5,14 @@
5
5
 
6
6
  .utrecht-link-list__link {
7
7
  --utrecht-link-icon-inset-block-start: var(--utrecht-link-list-icon-inset-block-start, inherit);
8
- --utrecht-link-column-gap: var(--utrecht-link-list-item-column-gap, inherit);
9
8
  --utrecht-link-text-decoration: var(--rhc-link-list-text-decoration);
10
9
 
11
10
  align-items: flex-start;
11
+ column-gap: var(--utrecht-link-list-item-column-gap, inherit);
12
+ }
13
+
14
+ .utrecht-link-list__link:visited {
15
+ --utrecht-link-color: var(--nl-link-visited-color);
12
16
  }
13
17
 
14
18
  .utrecht-link-list__item {
package/src/navbar/index.scss CHANGED
@@ -39,10 +39,10 @@
39
39
  }
40
40
 
41
41
  .rhc-nav-bar__link {
42
- --utrecht-link-text-decoration: none;
42
+ --nl-link-text-decoration-line: none;
43
43
  --utrecht-link-visited-color: var(--rhc-nav-bar-color);
44
+ --nl-link-color: var(--rhc-nav-bar-color);
44
45
 
45
- color: var(--rhc-nav-bar-color);
46
46
  padding-block-end: var(--rhc-nav-bar-link-padding-block-end);
47
47
  padding-block-start: var(--rhc-nav-bar-link-padding-block-start);
48
48
  padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
package/src/wrapper/_mixin.scss CHANGED
@@ -32,7 +32,7 @@
32
32
  .nl-heading--level-1:has(+ .utrecht-img) {
33
33
  --nl-heading-level-1-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
34
34
  }
35
- .nl-heading--level-1:has(+ .utrecht-link) {
35
+ .nl-heading--level-1:has(+ .nl-link) {
36
36
  --nl-heading-level-1-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
37
37
  }
38
38
  .nl-heading--level-1:has(+ .utrecht-ordered-list) {
@@ -94,7 +94,7 @@
94
94
  .nl-heading--level-2:has(+ .utrecht-img) {
95
95
  --nl-heading-level-2-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
96
96
  }
97
- .nl-heading--level-2:has(+ .utrecht-link) {
97
+ .nl-heading--level-2:has(+ .nl-link) {
98
98
  --nl-heading-level-2-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
99
99
  }
100
100
  .nl-heading--level-2:has(+ .utrecht-ordered-list) {
@@ -159,7 +159,7 @@
159
159
  .nl-heading--level-3:has(+ .utrecht-img) {
160
160
  --nl-heading-level-3-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
161
161
  }
162
- .nl-heading--level-3:has(+ .utrecht-link) {
162
+ .nl-heading--level-3:has(+ .nl-link) {
163
163
  --nl-heading-level-3-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
164
164
  }
165
165
  .nl-heading--level-3:has(+ .utrecht-ordered-list) {
@@ -224,7 +224,7 @@
224
224
  .nl-heading--level-4:has(+ .utrecht-img) {
225
225
  --nl-heading-level-4-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
226
226
  }
227
- .nl-heading--level-4:has(+ .utrecht-link) {
227
+ .nl-heading--level-4:has(+ .nl-link) {
228
228
  --nl-heading-level-4-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
229
229
  }
230
230
  .nl-heading--level-4:has(+ .utrecht-ordered-list) {
@@ -289,7 +289,7 @@
289
289
  .nl-heading--level-5:has(+ .utrecht-img) {
290
290
  --nl-heading-level-5-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
291
291
  }
292
- .nl-heading--level-5:has(+ .utrecht-link) {
292
+ .nl-heading--level-5:has(+ .nl-link) {
293
293
  --nl-heading-level-5-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
294
294
  }
295
295
  .nl-heading--level-5:has(+ .utrecht-ordered-list) {
@@ -351,7 +351,7 @@
351
351
  .nl-heading--level-6:has(+ .utrecht-img) {
352
352
  --nl-heading-level-6-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
353
353
  }
354
- .nl-heading--level-6:has(+ .utrecht-link) {
354
+ .nl-heading--level-6:has(+ .nl-link) {
355
355
  --nl-heading-level-6-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
356
356
  }
357
357
  .nl-heading--level-6:has(+ .utrecht-ordered-list) {
@@ -428,7 +428,7 @@
428
428
  .utrecht-accordion:has(+ .utrecht-img) {
429
429
  --utrecht-accordion-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
430
430
  }
431
- .utrecht-accordion:has(+ .utrecht-link) {
431
+ .utrecht-accordion:has(+ .nl-link) {
432
432
  --utrecht-accordion-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
433
433
  }
434
434
  .utrecht-accordion:has(+ .utrecht-ordered-list) {
@@ -502,7 +502,7 @@
502
502
  .utrecht-alert:has(+ .utrecht-img) {
503
503
  --utrecht-alert-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
504
504
  }
505
- .utrecht-alert:has(+ .utrecht-link) {
505
+ .utrecht-alert:has(+ .nl-link) {
506
506
  --utrecht-alert-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
507
507
  }
508
508
  .utrecht-alert:has(+ .utrecht-ordered-list) {
@@ -576,7 +576,7 @@
576
576
  .utrecht-badge-list:has(+ .utrecht-img) {
577
577
  --utrecht-badge-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
578
578
  }
579
- .utrecht-badge-list:has(+ .utrecht-link) {
579
+ .utrecht-badge-list:has(+ .nl-link) {
580
580
  --utrecht-badge-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
581
581
  }
582
582
  .utrecht-badge-list:has(+ .utrecht-ordered-list) {
@@ -644,7 +644,7 @@
644
644
  .utrecht-blockquote:has(+ .utrecht-img) {
645
645
  --utrecht-blockquote-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
646
646
  }
647
- .utrecht-blockquote:has(+ .utrecht-link) {
647
+ .utrecht-blockquote:has(+ .nl-link) {
648
648
  --utrecht-blockquote-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
649
649
  }
650
650
  .utrecht-blockquote:has(+ .utrecht-ordered-list) {
@@ -718,7 +718,7 @@
718
718
  .utrecht-breadcrumb-nav:has(+ .utrecht-img) {
719
719
  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
720
720
  }
721
- .utrecht-breadcrumb-nav:has(+ .utrecht-link) {
721
+ .utrecht-breadcrumb-nav:has(+ .nl-link) {
722
722
  --utrecht-breadcrumb-nav-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
723
723
  }
724
724
  .utrecht-breadcrumb-nav:has(+ .utrecht-ordered-list) {
@@ -792,7 +792,7 @@
792
792
  .utrecht-button:has(+ .utrecht-img) {
793
793
  --utrecht-button-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
794
794
  }
795
- .utrecht-button:has(+ .utrecht-link) {
795
+ .utrecht-button:has(+ .nl-link) {
796
796
  --utrecht-button-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
797
797
  }
798
798
  .utrecht-button:has(+ .utrecht-ordered-list) {
@@ -860,7 +860,7 @@
860
860
  .utrecht-button-group:has(+ .utrecht-img) {
861
861
  --utrecht-button-group-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
862
862
  }
863
- .utrecht-button-group:has(+ .utrecht-link) {
863
+ .utrecht-button-group:has(+ .nl-link) {
864
864
  --utrecht-button-group-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
865
865
  }
866
866
  .utrecht-button-group:has(+ .utrecht-ordered-list) {
@@ -931,7 +931,7 @@
931
931
  .utrecht-data-list:has(+ .utrecht-img) {
932
932
  --utrecht-data-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
933
933
  }
934
- .utrecht-data-list:has(+ .utrecht-link) {
934
+ .utrecht-data-list:has(+ .nl-link) {
935
935
  --utrecht-data-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
936
936
  }
937
937
  .utrecht-data-list:has(+ .utrecht-ordered-list) {
@@ -999,7 +999,7 @@
999
999
  .utrecht-figure:has(+ .utrecht-img) {
1000
1000
  --utrecht-figure-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1001
1001
  }
1002
- .utrecht-figure:has(+ .utrecht-link) {
1002
+ .utrecht-figure:has(+ .nl-link) {
1003
1003
  --utrecht-figure-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1004
1004
  }
1005
1005
  .utrecht-figure:has(+ .utrecht-ordered-list) {
@@ -1070,7 +1070,7 @@
1070
1070
  .utrecht-form-field:has(+ .utrecht-img) {
1071
1071
  --utrecht-form-field-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1072
1072
  }
1073
- .utrecht-form-field:has(+ .utrecht-link) {
1073
+ .utrecht-form-field:has(+ .nl-link) {
1074
1074
  --utrecht-form-field-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1075
1075
  }
1076
1076
  .utrecht-form-field:has(+ .utrecht-ordered-list) {
@@ -1192,7 +1192,7 @@
1192
1192
  .utrecht-img:has(+ .utrecht-img) {
1193
1193
  --utrecht-img-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1194
1194
  }
1195
- .utrecht-img:has(+ .utrecht-link) {
1195
+ .utrecht-img:has(+ .nl-link) {
1196
1196
  --utrecht-img-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1197
1197
  }
1198
1198
  .utrecht-img:has(+ .utrecht-ordered-list) {
@@ -1214,72 +1214,72 @@
1214
1214
  --utrecht-img-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1215
1215
  }
1216
1216
  }
1217
- @mixin utrecht-link {
1218
- .utrecht-link:first-child {
1219
- --utrecht-link-margin-block-start: 0;
1217
+ @mixin nl-link {
1218
+ .nl-link:first-child {
1219
+ --nl-link-margin-block-start: 0;
1220
1220
  }
1221
- .utrecht-link:has(+ .nl-heading--level-2) {
1222
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1221
+ .nl-link:has(+ .nl-heading--level-2) {
1222
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1223
1223
  }
1224
- .utrecht-link:has(+ .nl-heading--level-3) {
1225
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1224
+ .nl-link:has(+ .nl-heading--level-3) {
1225
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1226
1226
  }
1227
- .utrecht-link:has(+ .nl-heading--level-4) {
1228
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1227
+ .nl-link:has(+ .nl-heading--level-4) {
1228
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1229
1229
  }
1230
- .utrecht-link:has(+ .nl-heading--level-5) {
1231
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1230
+ .nl-link:has(+ .nl-heading--level-5) {
1231
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1232
1232
  }
1233
- .utrecht-link:has(+ .nl-heading--level-6) {
1234
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1233
+ .nl-link:has(+ .nl-heading--level-6) {
1234
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1235
1235
  }
1236
- .utrecht-link:has(+ .utrecht-accordion) {
1237
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1236
+ .nl-link:has(+ .utrecht-accordion) {
1237
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1238
1238
  }
1239
- .utrecht-link:has(+ .utrecht-alert) {
1240
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1239
+ .nl-link:has(+ .utrecht-alert) {
1240
+ --nl-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1241
1241
  }
1242
- .utrecht-link:has(+ .utrecht-badge-list) {
1243
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1242
+ .nl-link:has(+ .utrecht-badge-list) {
1243
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1244
1244
  }
1245
- .utrecht-link:has(+ .utrecht-blockquote) {
1246
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1245
+ .nl-link:has(+ .utrecht-blockquote) {
1246
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1247
1247
  }
1248
- .utrecht-link:has(+ .utrecht-button) {
1249
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1248
+ .nl-link:has(+ .utrecht-button) {
1249
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1250
1250
  }
1251
- .utrecht-link:has(+ .utrecht-button-group) {
1252
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1251
+ .nl-link:has(+ .utrecht-button-group) {
1252
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1253
1253
  }
1254
- .utrecht-link:has(+ .utrecht-data-list) {
1255
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1254
+ .nl-link:has(+ .utrecht-data-list) {
1255
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1256
1256
  }
1257
- .utrecht-link:has(+ .utrecht-form-field) {
1258
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1257
+ .nl-link:has(+ .utrecht-form-field) {
1258
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1259
1259
  }
1260
- .utrecht-link:has(+ .utrecht-img) {
1261
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1260
+ .nl-link:has(+ .utrecht-img) {
1261
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1262
1262
  }
1263
- .utrecht-link:has(+ .utrecht-link) {
1264
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1263
+ .nl-link:has(+ .nl-link) {
1264
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1265
1265
  }
1266
- .utrecht-link:has(+ .utrecht-ordered-list) {
1267
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1266
+ .nl-link:has(+ .utrecht-ordered-list) {
1267
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1268
1268
  }
1269
- .utrecht-link:has(+ .nl-paragraph) {
1270
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1269
+ .nl-link:has(+ .nl-paragraph) {
1270
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1271
1271
  }
1272
- .utrecht-link:has(+ .utrecht-separator) {
1273
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1272
+ .nl-link:has(+ .utrecht-separator) {
1273
+ --nl-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1274
1274
  }
1275
- .utrecht-link:has(+ .utrecht-sidenav) {
1276
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1275
+ .nl-link:has(+ .utrecht-sidenav) {
1276
+ --nl-link-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1277
1277
  }
1278
- .utrecht-link:has(+ .utrecht-table) {
1279
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1278
+ .nl-link:has(+ .utrecht-table) {
1279
+ --nl-link-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1280
1280
  }
1281
- .utrecht-link:has(+ .utrecht-unordered-list) {
1282
- --utrecht-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1281
+ .nl-link:has(+ .utrecht-unordered-list) {
1282
+ --nl-link-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1283
1283
  }
1284
1284
  }
1285
1285
  @mixin utrecht-ordered-list {
@@ -1328,7 +1328,7 @@
1328
1328
  .utrecht-ordered-list:has(+ .utrecht-img) {
1329
1329
  --utrecht-ordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1330
1330
  }
1331
- .utrecht-ordered-list:has(+ .utrecht-link) {
1331
+ .utrecht-ordered-list:has(+ .nl-link) {
1332
1332
  --utrecht-ordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1333
1333
  }
1334
1334
  .utrecht-ordered-list:has(+ .utrecht-ordered-list) {
@@ -1396,7 +1396,7 @@
1396
1396
  .utrecht-pagination:has(+ .utrecht-img) {
1397
1397
  --utrecht-pagination-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1398
1398
  }
1399
- .utrecht-pagination:has(+ .utrecht-link) {
1399
+ .utrecht-pagination:has(+ .nl-link) {
1400
1400
  --utrecht-pagination-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1401
1401
  }
1402
1402
  .utrecht-pagination:has(+ .utrecht-ordered-list) {
@@ -1464,7 +1464,7 @@
1464
1464
  .nl-paragraph:has(+ .utrecht-img) {
1465
1465
  --nl-paragraph-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1466
1466
  }
1467
- .nl-paragraph:has(+ .utrecht-link) {
1467
+ .nl-paragraph:has(+ .nl-link) {
1468
1468
  --nl-paragraph-margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
1469
1469
  }
1470
1470
  .nl-paragraph:has(+ .utrecht-ordered-list) {
@@ -1546,7 +1546,7 @@
1546
1546
  .utrecht-separator:has(+ .utrecht-img) {
1547
1547
  --utrecht-separator-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1548
1548
  }
1549
- .utrecht-separator:has(+ .utrecht-link) {
1549
+ .utrecht-separator:has(+ .nl-link) {
1550
1550
  --utrecht-separator-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1551
1551
  }
1552
1552
  .utrecht-separator:has(+ .utrecht-ordered-list) {
@@ -1620,7 +1620,7 @@
1620
1620
  .utrecht-sidenav:has(+ .utrecht-img) {
1621
1621
  --utrecht-sidenav-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1622
1622
  }
1623
- .utrecht-sidenav:has(+ .utrecht-link) {
1623
+ .utrecht-sidenav:has(+ .nl-link) {
1624
1624
  --utrecht-sidenav-margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
1625
1625
  }
1626
1626
  .utrecht-sidenav:has(+ .utrecht-ordered-list) {
@@ -1708,7 +1708,7 @@
1708
1708
  .utrecht-table:has(+ .utrecht-img) {
1709
1709
  --utrecht-table-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1710
1710
  }
1711
- .utrecht-table:has(+ .utrecht-link) {
1711
+ .utrecht-table:has(+ .nl-link) {
1712
1712
  --utrecht-table-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1713
1713
  }
1714
1714
  .utrecht-table:has(+ .utrecht-ordered-list) {
@@ -1798,7 +1798,7 @@
1798
1798
  .utrecht-unordered-list:has(+ .utrecht-img) {
1799
1799
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1800
1800
  }
1801
- .utrecht-unordered-list:has(+ .utrecht-link) {
1801
+ .utrecht-unordered-list:has(+ .nl-link) {
1802
1802
  --utrecht-unordered-list-margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
1803
1803
  }
1804
1804
  .utrecht-unordered-list:has(+ .utrecht-ordered-list) {
package/src/wrapper/index.scss CHANGED
@@ -28,7 +28,7 @@
28
28
  @include mixin.utrecht-form-field-error-message;
29
29
  @include mixin.utrecht-form-label;
30
30
  @include mixin.utrecht-img;
31
- @include mixin.utrecht-link;
31
+ @include mixin.nl-link;
32
32
  @include mixin.utrecht-ordered-list;
33
33
  @include mixin.utrecht-pagination;
34
34
  @include mixin.nl-paragraph;