@rijkshuisstijl-community/components-css 7.0.0 → 8.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 (8) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/dist/index.css +3 -10
  3. package/index.scss +43 -4
  4. package/package.json +44 -2
  5. package/src/blockquote/_mixin.scss +4 -95
  6. package/src/blockquote/index.scss +0 -24
  7. package/src/navbar/index.scss +1 -0
  8. package/src/form-field-error-message/index.scss +0 -15
package/index.scss CHANGED
@@ -3,9 +3,6 @@
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
5
 
6
- @use "@utrecht/component-library-css/dist/index.css";
7
- @use "@utrecht/component-library-css/dist/html.css";
8
-
9
6
  @use "src/accordion/index" as accordion;
10
7
  @use "src/action-group/index" as actionGroup;
11
8
  @use "src/alert/index" as alert;
@@ -26,7 +23,6 @@
26
23
  @use "src/file-input/index" as fileInput;
27
24
  @use "src/form/index" as form;
28
25
  @use "src/form-field/index" as formField;
29
- @use "src/form-field-error-message/index" as formFieldError;
30
26
  @use "src/form-field-radio-option/index" as FormFieldRadio;
31
27
  @use "src/footer/index" as footer;
32
28
  @use "src/heading/index" as heading;
@@ -57,3 +53,46 @@
57
53
  @use "src/visually-hidden/index" as visually-hidden;
58
54
  @use "src/wrapper/index" as wrapper;
59
55
  @use "src/data-summary/index" as dataSummary;
56
+
57
+ @import "@utrecht/accordion-css/dist/index.css";
58
+ @import "@utrecht/action-group-css/dist/index.css";
59
+ @import "@utrecht/alert-css/dist/index.css";
60
+ @import "@utrecht/badge-list-css/dist/index.css";
61
+ @import "@utrecht/button-css/dist/index.css";
62
+ @import "@utrecht/button-link-css/dist/index.css";
63
+ @import "@utrecht/document-css/dist/index.css";
64
+ @import "@utrecht/article-css/dist/index.css";
65
+ @import "@utrecht/data-badge-css/dist/index.css";
66
+ @import "@utrecht/data-list-css/dist/index.css";
67
+ @import "@utrecht/blockquote-css/dist/index.css";
68
+ @import "@utrecht/breadcrumb-nav-css/dist/index.css";
69
+ @import "@utrecht/checkbox-css/dist/index.css";
70
+ @import "@utrecht/custom-checkbox-css/dist/index.css";
71
+ @import "@utrecht/column-layout-css/dist/index.css";
72
+ @import "@utrecht/drawer-css/dist/index.css";
73
+ @import "@utrecht/figure-css/dist/index.css";
74
+ @import "@utrecht/form-field-css/dist/index.css";
75
+ @import "@utrecht/form-field-description-css/dist/index.css";
76
+ @import "@utrecht/form-field-error-message-css/dist/index.css";
77
+ @import "@utrecht/form-fieldset-css/dist/index.css";
78
+ @import "@utrecht/form-label-css/dist/index.css";
79
+ @import "@utrecht/icon-css/dist/index.css";
80
+ @import "@utrecht/heading-group-css/dist/index.css";
81
+ @import "@utrecht/img-css/dist/index.css";
82
+ @import "@utrecht/link-css/dist/index.css";
83
+ @import "@utrecht/link-list-css/dist/index.css";
84
+ @import "@utrecht/ordered-list-css/dist/index.css";
85
+ @import "@utrecht/page-body-css/dist/index.css";
86
+ @import "@utrecht/page-content-css/dist/index.css";
87
+ @import "@utrecht/page-footer-css/dist/index.css";
88
+ @import "@utrecht/page-header-css/dist/index.css";
89
+ @import "@utrecht/page-layout-css/dist/index.css";
90
+ @import "@utrecht/paragraph-css/dist/index.css";
91
+ @import "@utrecht/pre-heading-css/dist/index.css";
92
+ @import "@utrecht/radio-button-css/dist/index.css";
93
+ @import "@utrecht/select-css/dist/index.css";
94
+ @import "@utrecht/separator-css/dist/index.css";
95
+ @import "@utrecht/table-css/dist/index.css";
96
+ @import "@utrecht/textbox-css/dist/index.css";
97
+ @import "@utrecht/textarea-css/dist/index.css";
98
+ @import "@utrecht/unordered-list-css/dist/index.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rijkshuisstijl-community/components-css",
3
- "version": "7.0.0",
3
+ "version": "8.0.1",
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",
@@ -30,7 +30,49 @@
30
30
  "@nl-design-system-candidate/number-badge-css": "1.1.2",
31
31
  "@nl-design-system-candidate/paragraph-css": "2.1.0",
32
32
  "@nl-design-system-candidate/skip-link-css": "1.0.2",
33
- "@utrecht/component-library-css": "8.0.0"
33
+ "@utrecht/component-library-css": "8.0.0",
34
+ "@utrecht/action-group-css": "2.0.0",
35
+ "@utrecht/accordion-css": "2.0.0",
36
+ "@utrecht/alert-css": "2.4.0",
37
+ "@utrecht/article-css": "1.5.1",
38
+ "@utrecht/badge-list-css": "2.2.1",
39
+ "@utrecht/data-badge-css": "1.0.1",
40
+ "@utrecht/data-list-css": "1.4.1",
41
+ "@utrecht/blockquote-css": "1.6.1",
42
+ "@utrecht/breadcrumb-nav-css": "1.5.1",
43
+ "@utrecht/button-css": "2.3.1",
44
+ "@utrecht/button-link-css": "1.3.1",
45
+ "@utrecht/checkbox-css": "1.6.1",
46
+ "@utrecht/custom-checkbox-css": "1.3.2",
47
+ "@utrecht/column-layout-css": "1.5.1",
48
+ "@utrecht/document-css": "1.5.1",
49
+ "@utrecht/drawer-css": "1.4.1",
50
+ "@utrecht/figure-css": "1.5.1",
51
+ "@utrecht/form-field-css": "1.5.1",
52
+ "@utrecht/form-field-description-css": "1.5.1",
53
+ "@utrecht/form-field-error-message-css": "1.5.1",
54
+ "@utrecht/form-fieldset-css": "1.5.1",
55
+ "@utrecht/form-label-css": "1.6.1",
56
+ "@utrecht/heading-group-css": "1.5.1",
57
+ "@utrecht/icon-css": "2.0.1",
58
+ "@utrecht/img-css": "1.3.1",
59
+ "@utrecht/link-list-css": "2.3.1",
60
+ "@utrecht/link-css": "1.6.1",
61
+ "@utrecht/ordered-list-css": "2.0.0",
62
+ "@utrecht/page-body-css": "0.1.1",
63
+ "@utrecht/page-content-css": "1.4.1",
64
+ "@utrecht/page-footer-css": "2.1.1",
65
+ "@utrecht/page-header-css": "1.5.1",
66
+ "@utrecht/page-layout-css": "1.1.1",
67
+ "@utrecht/paragraph-css": "2.3.1",
68
+ "@utrecht/pre-heading-css": "1.4.1",
69
+ "@utrecht/radio-button-css": "1.6.1",
70
+ "@utrecht/select-css": "1.8.1",
71
+ "@utrecht/separator-css": "1.5.1",
72
+ "@utrecht/table-css": "1.6.1",
73
+ "@utrecht/textbox-css": "2.0.0",
74
+ "@utrecht/textarea-css": "2.3.1",
75
+ "@utrecht/unordered-list-css": "1.5.1"
34
76
  },
35
77
  "scripts": {
36
78
  "dev": "vite build --watch",
package/src/blockquote/_mixin.scss CHANGED
@@ -3,100 +3,9 @@
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
5
 
6
- @mixin rhc-blockquote {
7
- --utrecht-blockquote-color: var(--utrecht-blockquote-content-color);
8
- --utrecht-blockquote-font-size: var(--utrecht-blockquote-content-font-size);
9
- --utrecht-document-font-family: var(--utrecht-blockquote-content-font-family);
10
-
11
- background-color: var(--utrecht-blockquote-background-color);
12
- border-block-end-width: var(--utrecht-blockquote-border-block-end-width);
13
- border-block-start-width: var(--utrecht-blockquote-border-block-start-width);
14
- border-color: var(--utrecht-blockquote-border-color);
15
- border-end-end-radius: var(--utrecht-blockquote-border-end-end-radius);
16
- border-end-start-radius: var(--utrecht-blockquote-border-end-start-radius);
17
- border-inline-end-width: var(--utrecht-blockquote-border-inline-end-width);
18
- border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width);
19
- border-start-end-radius: var(--utrecht-blockquote-border-start-end-radius);
20
- border-start-start-radius: var(--utrecht-blockquote-border-start-start-radius);
21
- border-style: solid;
22
- display: flex;
23
- flex-direction: column;
24
- line-height: var(--utrecht-blockquote-content-line-height);
25
- padding-block-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-end));
26
- padding-block-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-start));
27
- padding-inline-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-end));
28
- padding-inline-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-start));
29
- row-gap: var(--utrecht-blockquote-row-gap, inherit);
30
- }
31
-
32
6
  @mixin rhc-blockquote__quote {
33
- margin-block-end: var(--utrecht-blockquote-margin-block-end, 0);
34
- margin-block-start: var(--utrecht-blockquote-margin-block-start, 0);
35
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end, 0);
36
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start, 0);
37
- }
38
-
39
- @mixin rhc-blockquote__caption {
40
- font-family: var(--utrecht-blockquote-caption-font-family, inherit);
41
- line-height: var(--utrecht-blockquote-caption-line-height, inherit);
42
- }
43
-
44
- @mixin rhc-blockquote-variation($variation) {
45
- background-color: var(
46
- --utrecht-blockquote-#{$variation}-background-color,
47
- var(--utrecht-blockquote-background-color)
48
- );
49
- border-block-end-width: var(
50
- --utrecht-blockquote-#{$variation}-border-block-end-width,
51
- var(--utrecht-blockquote-border-block-end-width)
52
- );
53
- border-block-start-width: var(
54
- --utrecht-blockquote-#{$variation}-border-block-start-width,
55
- var(--utrecht-blockquote-border-block-start-width)
56
- );
57
- border-color: var(--utrecht-blockquote-#{$variation}-border-color, var(--utrecht-blockquote-border-color));
58
- border-end-end-radius: var(
59
- --utrecht-blockquote-#{$variation}-border-end-end-radius,
60
- var(--utrecht-blockquote-border-end-end-radius)
61
- );
62
- border-end-start-radius: var(
63
- --utrecht-blockquote-#{$variation}-border-end-start-radius,
64
- var(--utrecht-blockquote-border-end-start-radius)
65
- );
66
- border-inline-end-width: var(
67
- --utrecht-blockquote-#{$variation}-border-inline-end-width,
68
- var(--utrecht-blockquote-border-inline-end-width)
69
- );
70
- border-inline-start-width: var(
71
- --utrecht-blockquote-#{$variation}-border-inline-start-width,
72
- var(--utrecht-blockquote-border-inline-start-width)
73
- );
74
- border-start-end-radius: var(
75
- --utrecht-blockquote-#{$variation}-border-start-end-radius,
76
- var(--utrecht-blockquote-border-start-end-radius)
77
- );
78
- border-start-start-radius: var(
79
- --utrecht-blockquote-#{$variation}-border-start-start-radius,
80
- var(--utrecht-blockquote-border-start-start-radius)
81
- );
82
- color: var(--utrecht-blockquote-#{$variation}-color, var(--utrecht-blockquote-content-color));
83
- font-family: var(--utrecht-blockquote-#{$variation}-font-family, var(--utrecht-blockquote-content-font-family));
84
- font-size: var(--utrecht-blockquote-#{$variation}-font-size, var(--utrecht-blockquote-content-font-size));
85
- padding-block-end: var(
86
- --utrecht-blockquote-#{$variation}-padding,
87
- var(--utrecht-blockquote-#{$variation}-padding-block-end, var(--utrecht-blockquote-padding-block-end))
88
- );
89
- padding-block-start: var(
90
- --utrecht-blockquote-#{$variation}-padding,
91
- var(--utrecht-blockquote-#{$variation}-padding-block-start, var(--utrecht-blockquote-padding-block-start))
92
- );
93
- padding-inline-end: var(
94
- --utrecht-blockquote-#{$variation}-padding,
95
- var(--utrecht-blockquote-#{$variation}-padding-inline-end, var(--utrecht-blockquote-padding-inline-end))
96
- );
97
- padding-inline-start: var(
98
- --utrecht-blockquote-#{$variation}-padding,
99
- var(--utrecht-blockquote-#{$variation}-padding-inline-start, var(--utrecht-blockquote-padding-inline-start))
100
- );
101
- row-gap: var(--utrecht-blockquote-#{$variation}-row-gap, var(--utrecht-blockquote-row-gap));
7
+ margin-block-end: var(--utrecht-blockquote-margin-block-end, var(--rhc-blockquote-margin-block-end));
8
+ margin-block-start: var(--utrecht-blockquote-margin-block-start, var(--rhc-blockquote-margin-block-start));
9
+ margin-inline-end: var(--utrecht-blockquote-margin-inline-end, var(--rhc-blockquote-margin-inline-end));
10
+ margin-inline-start: var(--utrecht-blockquote-margin-inline-start, var(--rhc-blockquote-margin-inline-start));
102
11
  }
package/src/blockquote/index.scss CHANGED
@@ -5,30 +5,6 @@
5
5
 
6
6
  @use "mixin";
7
7
 
8
- .rhc-blockquote {
9
- @include mixin.rhc-blockquote;
10
- }
11
-
12
8
  .utrecht-blockquote__quote {
13
9
  @include mixin.rhc-blockquote__quote;
14
10
  }
15
-
16
- .utrecht-blockquote__caption {
17
- @include mixin.rhc-blockquote__caption;
18
- }
19
-
20
- .rhc-blockquote--blue-corner-border-variation {
21
- @include mixin.rhc-blockquote-variation("blue-corner-border-variation");
22
- }
23
-
24
- .rhc-blockquote--pink-background-variation {
25
- @include mixin.rhc-blockquote-variation("pink-background-variation");
26
- }
27
-
28
- .rhc-blockquote--pink-left-border-variation {
29
- @include mixin.rhc-blockquote-variation("pink-left-border-variation");
30
- }
31
-
32
- .rhc-blockquote--pink-corner-border-variation {
33
- @include mixin.rhc-blockquote-variation("pink-corner-border-variation");
34
- }
package/src/navbar/index.scss CHANGED
@@ -45,6 +45,7 @@
45
45
  --utrecht-link-visited-color: var(--rhc-nav-bar-color);
46
46
  --nl-link-color: var(--rhc-nav-bar-color);
47
47
 
48
+ font-size: var(--rhc-nav-bar-link-font-size);
48
49
  padding-block-end: var(--rhc-nav-bar-link-padding-block-end);
49
50
  padding-block-start: var(--rhc-nav-bar-link-padding-block-start);
50
51
  padding-inline-end: var(--rhc-nav-bar-link-padding-inline-end);
package/src/form-field-error-message/index.scss DELETED
@@ -1,15 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Community for NL Design System
4
- */
5
- .utrecht-form-field-error-message {
6
- &--icon-container {
7
- display: flex;
8
- &-icon {
9
- --utrecht-icon-size: var(--utrecht-form-field-error-message-icon-size, 24px);
10
-
11
- margin-inline-end: var(--utrecht-form-field-error-message-icon-margin-inline-end, 0.5rem);
12
- min-inline-size: var(--utrecht-form-field-error-message-icon-min-width, 24px);
13
- }
14
- }
15
- }