@rijkshuisstijl-community/components-css 1.0.0-alpha.99 → 1.0.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 (42) hide show
  1. package/CHANGELOG.md +13 -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/wrapper/createSpacingCSS.js CHANGED
@@ -16,10 +16,11 @@ const getSpacings = (spacingMatrix) => {
16
16
  .map((spacing) => {
17
17
  const entries = Object.entries(spacing);
18
18
  const [, component] = entries.shift();
19
+ const { prefix } = spacing;
19
20
  return entries
20
21
  .map(([sibling, space]) => {
21
22
  const spacing = spaceMap[space];
22
- return spacing && { component, sibling, spacing };
23
+ return spacing && { component, sibling, spacing, prefix };
23
24
  })
24
25
  .filter(Boolean);
25
26
  })
@@ -29,18 +30,19 @@ const getSpacings = (spacingMatrix) => {
29
30
  const getSpacingMixins = (components) =>
30
31
  components.map((mixinGroup) => {
31
32
  const componentName = mixinGroup[0].component;
33
+ const prefix = mixinGroup[0].prefix;
34
+
35
+ const mixins = mixinGroup.map(({ component, sibling, spacing }) => {
36
+ return `.${component}:has(+ .${sibling}) {
37
+ --${prefix}-margin-block-end: var(--utrecht-rich-text-${spacing}-margin-block-end);
38
+ }`;
39
+ });
32
40
 
33
- const mixins = mixinGroup.map(
34
- ({ component, sibling, spacing }) =>
35
- `.${component}:has(+ .${sibling}) {
36
- --${component}-margin-block-end: var(--utrecht-rich-text-${spacing}-margin-block-end);
37
- }`,
38
- );
39
41
  return `@mixin ${componentName} {
40
42
  .${componentName}:first-child {
41
- --${componentName}-margin-block-start: 0;
43
+ --${prefix}-margin-block-start: 0;
42
44
  }
43
- ${mixins.join(';\n')}
45
+ ${mixins.join('\n ')}
44
46
  }`;
45
47
  });
46
48
 
@@ -51,11 +53,11 @@ const getRichTextStyles = (components) => `
51
53
  * Copyright (c) 2024-2025 Frameless B.V.
52
54
  */
53
55
 
54
- @import "./mixin";
56
+ @use "./mixin";
55
57
 
56
58
  .rhc-margin-block-end-wrapper {
57
- --utrecht-space-around: 1;
58
- ${components.map((mixinGroup) => `@include ${mixinGroup[0].component}`).join(';\n')}
59
+ --utrecht-space-around: 1;
60
+ ${components.map((mixinGroup) => `@include mixin.${mixinGroup[0].component}`).join(';\n')}
59
61
  }`;
60
62
 
61
63
  const spacings = getSpacings(spacingMatrix);
package/src/wrapper/index.scss CHANGED
@@ -4,40 +4,40 @@
4
4
  * Copyright (c) 2024-2025 Frameless B.V.
5
5
  */
6
6
 
7
- @import "./mixin";
7
+ @use "./mixin";
8
8
 
9
9
  .rhc-margin-block-end-wrapper {
10
10
  --utrecht-space-around: 1;
11
- @include utrecht-heading-1;
12
- @include utrecht-heading-2;
13
- @include utrecht-heading-3;
14
- @include utrecht-heading-4;
15
- @include utrecht-heading-5;
16
- @include utrecht-heading-6;
17
- @include utrecht-accordion;
18
- @include utrecht-alert;
19
- @include utrecht-badge-list;
20
- @include utrecht-blockquote;
21
- @include utrecht-breadcrumb-nav;
22
- @include utrecht-button;
23
- @include utrecht-button-group;
24
- @include utrecht-data-list;
25
- @include utrecht-figure;
26
- @include utrecht-form-field;
27
- @include utrecht-form-field-description;
28
- @include utrecht-form-field-error-message;
29
- @include utrecht-form-label;
30
- @include utrecht-img;
31
- @include utrecht-link;
32
- @include utrecht-ordered-list;
33
- @include utrecht-pagination;
34
- @include utrecht-paragraph;
35
- @include utrecht-select;
36
- @include utrecht-separator;
37
- @include utrecht-sidenav;
38
- @include utrecht-badge-status;
39
- @include utrecht-table;
40
- @include utrecht-textarea;
41
- @include utrecht-textbox;
42
- @include utrecht-unordered-list;
11
+ @include mixin.nl-heading--level-1;
12
+ @include mixin.nl-heading--level-2;
13
+ @include mixin.nl-heading--level-3;
14
+ @include mixin.nl-heading--level-4;
15
+ @include mixin.nl-heading--level-5;
16
+ @include mixin.nl-heading--level-6;
17
+ @include mixin.utrecht-accordion;
18
+ @include mixin.utrecht-alert;
19
+ @include mixin.utrecht-badge-list;
20
+ @include mixin.utrecht-blockquote;
21
+ @include mixin.utrecht-breadcrumb-nav;
22
+ @include mixin.utrecht-button;
23
+ @include mixin.utrecht-button-group;
24
+ @include mixin.utrecht-data-list;
25
+ @include mixin.utrecht-figure;
26
+ @include mixin.utrecht-form-field;
27
+ @include mixin.utrecht-form-field-description;
28
+ @include mixin.utrecht-form-field-error-message;
29
+ @include mixin.utrecht-form-label;
30
+ @include mixin.utrecht-img;
31
+ @include mixin.utrecht-link;
32
+ @include mixin.utrecht-ordered-list;
33
+ @include mixin.utrecht-pagination;
34
+ @include mixin.nl-paragraph;
35
+ @include mixin.utrecht-select;
36
+ @include mixin.utrecht-separator;
37
+ @include mixin.utrecht-sidenav;
38
+ @include mixin.utrecht-badge-status;
39
+ @include mixin.utrecht-table;
40
+ @include mixin.utrecht-textarea;
41
+ @include mixin.utrecht-textbox;
42
+ @include mixin.utrecht-unordered-list;
43
43
  }