@rijkshuisstijl-community/design-tokens 1.0.0-alpha.20 → 1.0.0-alpha.21

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.
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ // Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
 
5
5
  $rvo-select-padding-inline-start: 18px;
6
6
  $rvo-select-padding-inline-end: 50px;
@@ -81,6 +81,11 @@ $utrecht-form-field-margin-block-start: 1ex;
81
81
  $utrecht-form-field-margin-block-end: 1ex;
82
82
  $utrecht-form-field-description-margin-block-end: 1ex;
83
83
  $utrecht-form-field-description-margin-block-start: 0;
84
+ $utrecht-form-field-error-message-padding-block-end: 16px;
85
+ $utrecht-form-field-error-message-padding-block-start: 16px;
86
+ $utrecht-form-field-error-message-padding-inline-end: 16px;
87
+ $utrecht-form-field-error-message-padding-inline-start: 16px;
88
+ $utrecht-form-control-max-inline-size: 320px;
84
89
  $utrecht-data-list-rows-column-min-inline-size: 25ch;
85
90
  $utrecht-data-list-rows-column-inline-size: 50%;
86
91
  $utrecht-data-list-rows-item-value-margin-block-start: 0;
@@ -238,6 +243,8 @@ $utrecht-form-input-border-color: $basiselementen-color-grijs6;
238
243
  $utrecht-form-input-background-color: $basiselementen-color-wit;
239
244
  $utrecht-form-fieldset-legend-font-weight: $basiselementen-font-weight-bold;
240
245
  $utrecht-form-fieldset-section-background-color: $basiselementen-color-wit;
246
+ $utrecht-form-field-error-message-background-color: $basiselementen-color-rood-tint2;
247
+ $utrecht-form-field-error-message-color: $basiselementen-color-zwart;
241
248
  $utrecht-document-line-height: $basiselementen-document-line-height;
242
249
  $utrecht-document-font-size: $basiselementen-document-font-size;
243
250
  $utrecht-document-font-family: $basiselementen-font-sans-serif-font-family;
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  .rhc-theme {
@@ -83,6 +83,11 @@
83
83
  --utrecht-form-field-margin-block-end: 1ex;
84
84
  --utrecht-form-field-description-margin-block-end: 1ex;
85
85
  --utrecht-form-field-description-margin-block-start: 0;
86
+ --utrecht-form-field-error-message-padding-block-end: 16px;
87
+ --utrecht-form-field-error-message-padding-block-start: 16px;
88
+ --utrecht-form-field-error-message-padding-inline-end: 16px;
89
+ --utrecht-form-field-error-message-padding-inline-start: 16px;
90
+ --utrecht-form-control-max-inline-size: 320px;
86
91
  --utrecht-data-list-rows-column-min-inline-size: 25ch;
87
92
  --utrecht-data-list-rows-column-inline-size: 50%;
88
93
  --utrecht-data-list-rows-item-value-margin-block-start: 0;
@@ -240,6 +245,8 @@
240
245
  --utrecht-form-input-background-color: var(--basiselementen-color-wit);
241
246
  --utrecht-form-fieldset-legend-font-weight: var(--basiselementen-font-weight-bold);
242
247
  --utrecht-form-fieldset-section-background-color: var(--basiselementen-color-wit);
248
+ --utrecht-form-field-error-message-background-color: var(--basiselementen-color-rood-tint2);
249
+ --utrecht-form-field-error-message-color: var(--basiselementen-color-zwart);
243
250
  --utrecht-document-line-height: var(--basiselementen-document-line-height);
244
251
  --utrecht-document-font-size: var(--basiselementen-document-font-size);
245
252
  --utrecht-document-font-family: var(--basiselementen-font-sans-serif-font-family);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  export const basiselementenColorLogoblauw : string;
@@ -183,6 +183,13 @@ export const utrechtDocumentColor : string;
183
183
  export const utrechtDocumentFontFamily : string;
184
184
  export const utrechtDocumentFontSize : string;
185
185
  export const utrechtDocumentLineHeight : string;
186
+ export const utrechtFormControlMaxInlineSize : string;
187
+ export const utrechtFormFieldErrorMessageColor : string;
188
+ export const utrechtFormFieldErrorMessageBackgroundColor : string;
189
+ export const utrechtFormFieldErrorMessagePaddingInlineStart : string;
190
+ export const utrechtFormFieldErrorMessagePaddingInlineEnd : string;
191
+ export const utrechtFormFieldErrorMessagePaddingBlockStart : string;
192
+ export const utrechtFormFieldErrorMessagePaddingBlockEnd : string;
186
193
  export const utrechtFormFieldDescriptionMarginBlockStart : string;
187
194
  export const utrechtFormFieldDescriptionMarginBlockEnd : string;
188
195
  export const utrechtFormFieldMarginBlockEnd : string;
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  export const basiselementenColorLogoblauw = "#154273";
@@ -181,6 +181,13 @@ export const utrechtDocumentColor = "#000000";
181
181
  export const utrechtDocumentFontFamily = "'RijksoverheidSansWebText'";
182
182
  export const utrechtDocumentFontSize = "18px";
183
183
  export const utrechtDocumentLineHeight = "150%";
184
+ export const utrechtFormControlMaxInlineSize = "320px";
185
+ export const utrechtFormFieldErrorMessageColor = "#000000";
186
+ export const utrechtFormFieldErrorMessageBackgroundColor = "#f9dfdd";
187
+ export const utrechtFormFieldErrorMessagePaddingInlineStart = "16px";
188
+ export const utrechtFormFieldErrorMessagePaddingInlineEnd = "16px";
189
+ export const utrechtFormFieldErrorMessagePaddingBlockStart = "16px";
190
+ export const utrechtFormFieldErrorMessagePaddingBlockEnd = "16px";
184
191
  export const utrechtFormFieldDescriptionMarginBlockStart = "0";
185
192
  export const utrechtFormFieldDescriptionMarginBlockEnd = "1ex";
186
193
  export const utrechtFormFieldMarginBlockEnd = "1ex";
package/dist/index.json CHANGED
@@ -177,6 +177,13 @@
177
177
  "utrechtDocumentFontFamily": "'RijksoverheidSansWebText'",
178
178
  "utrechtDocumentFontSize": "18px",
179
179
  "utrechtDocumentLineHeight": "150%",
180
+ "utrechtFormControlMaxInlineSize": "320px",
181
+ "utrechtFormFieldErrorMessageColor": "#000000",
182
+ "utrechtFormFieldErrorMessageBackgroundColor": "#f9dfdd",
183
+ "utrechtFormFieldErrorMessagePaddingInlineStart": "16px",
184
+ "utrechtFormFieldErrorMessagePaddingInlineEnd": "16px",
185
+ "utrechtFormFieldErrorMessagePaddingBlockStart": "16px",
186
+ "utrechtFormFieldErrorMessagePaddingBlockEnd": "16px",
180
187
  "utrechtFormFieldDescriptionMarginBlockStart": "0",
181
188
  "utrechtFormFieldDescriptionMarginBlockEnd": "1ex",
182
189
  "utrechtFormFieldMarginBlockEnd": "1ex",
@@ -363,6 +363,46 @@
363
363
  "font-weight": {},
364
364
  "line-height": "150%"
365
365
  },
366
+ "form-control": {
367
+ "background-color": {},
368
+ "block-size": {},
369
+ "border-color": {},
370
+ "border-radius": {},
371
+ "border-width": {},
372
+ "color": {},
373
+ "font-family": {},
374
+ "font-size": {},
375
+ "line-height": {},
376
+ "min-block-size": {},
377
+ "padding-block-end": {},
378
+ "padding-block-start": {},
379
+ "padding-inline-end": {},
380
+ "padding-inline-start": {},
381
+ "max-inline-size": "320px",
382
+ "placeholder": {
383
+ "color": {}
384
+ },
385
+ "focus": {
386
+ "border-color": {}
387
+ },
388
+ "disabled": {
389
+ "background-color": {},
390
+ "color": {}
391
+ }
392
+ },
393
+ "form-field-error-message": {
394
+ "color": "#000000",
395
+ "background-color": "#f9dfdd",
396
+ "padding-inline-start": "16px",
397
+ "padding-inline-end": "16px",
398
+ "padding-block-start": "16px",
399
+ "padding-block-end": "16px",
400
+ "font-family": {},
401
+ "font-size": {},
402
+ "font-weight": {},
403
+ "margin-block-start": {},
404
+ "margin-block-end": {}
405
+ },
366
406
  "form-field": {
367
407
  "description": {
368
408
  "margin-block-start": "0",
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -83,6 +83,11 @@
83
83
  --utrecht-form-field-margin-block-end: 1ex;
84
84
  --utrecht-form-field-description-margin-block-end: 1ex;
85
85
  --utrecht-form-field-description-margin-block-start: 0;
86
+ --utrecht-form-field-error-message-padding-block-end: 16px;
87
+ --utrecht-form-field-error-message-padding-block-start: 16px;
88
+ --utrecht-form-field-error-message-padding-inline-end: 16px;
89
+ --utrecht-form-field-error-message-padding-inline-start: 16px;
90
+ --utrecht-form-control-max-inline-size: 320px;
86
91
  --utrecht-data-list-rows-column-min-inline-size: 25ch;
87
92
  --utrecht-data-list-rows-column-inline-size: 50%;
88
93
  --utrecht-data-list-rows-item-value-margin-block-start: 0;
@@ -240,6 +245,8 @@
240
245
  --utrecht-form-input-background-color: var(--basiselementen-color-wit);
241
246
  --utrecht-form-fieldset-legend-font-weight: var(--basiselementen-font-weight-bold);
242
247
  --utrecht-form-fieldset-section-background-color: var(--basiselementen-color-wit);
248
+ --utrecht-form-field-error-message-background-color: var(--basiselementen-color-rood-tint2);
249
+ --utrecht-form-field-error-message-color: var(--basiselementen-color-zwart);
243
250
  --utrecht-document-line-height: var(--basiselementen-document-line-height);
244
251
  --utrecht-document-font-size: var(--basiselementen-document-font-size);
245
252
  --utrecht-document-font-family: var(--basiselementen-font-sans-serif-font-family);
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -385,6 +385,46 @@ declare const tokens: {
385
385
  "font-weight": {},
386
386
  "line-height": DesignToken
387
387
  },
388
+ "form-control": {
389
+ "background-color": {},
390
+ "block-size": {},
391
+ "border-color": {},
392
+ "border-radius": {},
393
+ "border-width": {},
394
+ "color": {},
395
+ "font-family": {},
396
+ "font-size": {},
397
+ "line-height": {},
398
+ "min-block-size": {},
399
+ "padding-block-end": {},
400
+ "padding-block-start": {},
401
+ "padding-inline-end": {},
402
+ "padding-inline-start": {},
403
+ "max-inline-size": DesignToken,
404
+ "placeholder": {
405
+ "color": {}
406
+ },
407
+ "focus": {
408
+ "border-color": {}
409
+ },
410
+ "disabled": {
411
+ "background-color": {},
412
+ "color": {}
413
+ }
414
+ },
415
+ "form-field-error-message": {
416
+ "color": DesignToken,
417
+ "background-color": DesignToken,
418
+ "padding-inline-start": DesignToken,
419
+ "padding-inline-end": DesignToken,
420
+ "padding-block-start": DesignToken,
421
+ "padding-block-end": DesignToken,
422
+ "font-family": {},
423
+ "font-size": {},
424
+ "font-weight": {},
425
+ "margin-block-start": {},
426
+ "margin-block-end": {}
427
+ },
388
428
  "form-field": {
389
429
  "description": {
390
430
  "margin-block-start": DesignToken,
package/dist/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ * Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -3885,6 +3885,172 @@ module.exports = {
3885
3885
  ]
3886
3886
  }
3887
3887
  },
3888
+ "form-control": {
3889
+ "background-color": {},
3890
+ "block-size": {},
3891
+ "border-color": {},
3892
+ "border-radius": {},
3893
+ "border-width": {},
3894
+ "color": {},
3895
+ "font-family": {},
3896
+ "font-size": {},
3897
+ "line-height": {},
3898
+ "min-block-size": {},
3899
+ "padding-block-end": {},
3900
+ "padding-block-start": {},
3901
+ "padding-inline-end": {},
3902
+ "padding-inline-start": {},
3903
+ "max-inline-size": {
3904
+ "value": "320px",
3905
+ "filePath": "./src/components/utrecht/form-control.tokens.json",
3906
+ "isSource": true,
3907
+ "original": {
3908
+ "value": "320px"
3909
+ },
3910
+ "name": "utrechtFormControlMaxInlineSize",
3911
+ "attributes": {
3912
+ "category": "utrecht",
3913
+ "type": "form-control",
3914
+ "item": "max-inline-size"
3915
+ },
3916
+ "path": [
3917
+ "utrecht",
3918
+ "form-control",
3919
+ "max-inline-size"
3920
+ ]
3921
+ },
3922
+ "placeholder": {
3923
+ "color": {}
3924
+ },
3925
+ "focus": {
3926
+ "border-color": {}
3927
+ },
3928
+ "disabled": {
3929
+ "background-color": {},
3930
+ "color": {}
3931
+ }
3932
+ },
3933
+ "form-field-error-message": {
3934
+ "color": {
3935
+ "value": "#000000",
3936
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
3937
+ "isSource": true,
3938
+ "original": {
3939
+ "value": "{basiselementen.color.zwart}"
3940
+ },
3941
+ "name": "utrechtFormFieldErrorMessageColor",
3942
+ "attributes": {
3943
+ "category": "utrecht",
3944
+ "type": "form-field-error-message",
3945
+ "item": "color"
3946
+ },
3947
+ "path": [
3948
+ "utrecht",
3949
+ "form-field-error-message",
3950
+ "color"
3951
+ ]
3952
+ },
3953
+ "background-color": {
3954
+ "value": "#f9dfdd",
3955
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
3956
+ "isSource": true,
3957
+ "original": {
3958
+ "value": "{basiselementen.color.rood-tint2}"
3959
+ },
3960
+ "name": "utrechtFormFieldErrorMessageBackgroundColor",
3961
+ "attributes": {
3962
+ "category": "utrecht",
3963
+ "type": "form-field-error-message",
3964
+ "item": "background-color"
3965
+ },
3966
+ "path": [
3967
+ "utrecht",
3968
+ "form-field-error-message",
3969
+ "background-color"
3970
+ ]
3971
+ },
3972
+ "padding-inline-start": {
3973
+ "value": "16px",
3974
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
3975
+ "isSource": true,
3976
+ "original": {
3977
+ "value": "16px"
3978
+ },
3979
+ "name": "utrechtFormFieldErrorMessagePaddingInlineStart",
3980
+ "attributes": {
3981
+ "category": "utrecht",
3982
+ "type": "form-field-error-message",
3983
+ "item": "padding-inline-start"
3984
+ },
3985
+ "path": [
3986
+ "utrecht",
3987
+ "form-field-error-message",
3988
+ "padding-inline-start"
3989
+ ]
3990
+ },
3991
+ "padding-inline-end": {
3992
+ "value": "16px",
3993
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
3994
+ "isSource": true,
3995
+ "original": {
3996
+ "value": "16px"
3997
+ },
3998
+ "name": "utrechtFormFieldErrorMessagePaddingInlineEnd",
3999
+ "attributes": {
4000
+ "category": "utrecht",
4001
+ "type": "form-field-error-message",
4002
+ "item": "padding-inline-end"
4003
+ },
4004
+ "path": [
4005
+ "utrecht",
4006
+ "form-field-error-message",
4007
+ "padding-inline-end"
4008
+ ]
4009
+ },
4010
+ "padding-block-start": {
4011
+ "value": "16px",
4012
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
4013
+ "isSource": true,
4014
+ "original": {
4015
+ "value": "16px"
4016
+ },
4017
+ "name": "utrechtFormFieldErrorMessagePaddingBlockStart",
4018
+ "attributes": {
4019
+ "category": "utrecht",
4020
+ "type": "form-field-error-message",
4021
+ "item": "padding-block-start"
4022
+ },
4023
+ "path": [
4024
+ "utrecht",
4025
+ "form-field-error-message",
4026
+ "padding-block-start"
4027
+ ]
4028
+ },
4029
+ "padding-block-end": {
4030
+ "value": "16px",
4031
+ "filePath": "./src/components/utrecht/form-field-error-message.tokens.json",
4032
+ "isSource": true,
4033
+ "original": {
4034
+ "value": "16px"
4035
+ },
4036
+ "name": "utrechtFormFieldErrorMessagePaddingBlockEnd",
4037
+ "attributes": {
4038
+ "category": "utrecht",
4039
+ "type": "form-field-error-message",
4040
+ "item": "padding-block-end"
4041
+ },
4042
+ "path": [
4043
+ "utrecht",
4044
+ "form-field-error-message",
4045
+ "padding-block-end"
4046
+ ]
4047
+ },
4048
+ "font-family": {},
4049
+ "font-size": {},
4050
+ "font-weight": {},
4051
+ "margin-block-start": {},
4052
+ "margin-block-end": {}
4053
+ },
3888
4054
  "form-field": {
3889
4055
  "description": {
3890
4056
  "margin-block-start": {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 28 Sep 2023 06:24:18 GMT
3
+ // Generated on Tue, 03 Oct 2023 14:10:06 GMT
4
4
 
5
5
  @rvo-select-padding-inline-start: 18px;
6
6
  @rvo-select-padding-inline-end: 50px;
@@ -81,6 +81,11 @@
81
81
  @utrecht-form-field-margin-block-end: 1ex;
82
82
  @utrecht-form-field-description-margin-block-end: 1ex;
83
83
  @utrecht-form-field-description-margin-block-start: 0;
84
+ @utrecht-form-field-error-message-padding-block-end: 16px;
85
+ @utrecht-form-field-error-message-padding-block-start: 16px;
86
+ @utrecht-form-field-error-message-padding-inline-end: 16px;
87
+ @utrecht-form-field-error-message-padding-inline-start: 16px;
88
+ @utrecht-form-control-max-inline-size: 320px;
84
89
  @utrecht-data-list-rows-column-min-inline-size: 25ch;
85
90
  @utrecht-data-list-rows-column-inline-size: 50%;
86
91
  @utrecht-data-list-rows-item-value-margin-block-start: 0;
@@ -238,6 +243,8 @@
238
243
  @utrecht-form-input-background-color: @basiselementen-color-wit;
239
244
  @utrecht-form-fieldset-legend-font-weight: @basiselementen-font-weight-bold;
240
245
  @utrecht-form-fieldset-section-background-color: @basiselementen-color-wit;
246
+ @utrecht-form-field-error-message-background-color: @basiselementen-color-rood-tint2;
247
+ @utrecht-form-field-error-message-color: @basiselementen-color-zwart;
241
248
  @utrecht-document-line-height: @basiselementen-document-line-height;
242
249
  @utrecht-document-font-size: @basiselementen-document-font-size;
243
250
  @utrecht-document-font-family: @basiselementen-font-sans-serif-font-family;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.20",
2
+ "version": "1.0.0-alpha.21",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Example design tokens",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
@@ -30,5 +30,5 @@
30
30
  "rimraf": "5.0.1",
31
31
  "style-dictionary": "3.8.0"
32
32
  },
33
- "gitHead": "6b64c069b84ac31eae84934367898a1d8b603857"
33
+ "gitHead": "462de5f8b138aea6fe69f638280fa3568e3ff81f"
34
34
  }
@@ -0,0 +1,31 @@
1
+ {
2
+ "utrecht": {
3
+ "form-control": {
4
+ "background-color": {},
5
+ "block-size": {},
6
+ "border-color": {},
7
+ "border-radius": {},
8
+ "border-width": {},
9
+ "color": {},
10
+ "font-family": {},
11
+ "font-size": {},
12
+ "line-height": {},
13
+ "min-block-size": {},
14
+ "padding-block-end": {},
15
+ "padding-block-start": {},
16
+ "padding-inline-end": {},
17
+ "padding-inline-start": {},
18
+ "max-inline-size": { "value": "320px" },
19
+ "placeholder": {
20
+ "color": {}
21
+ },
22
+ "focus": {
23
+ "border-color": {}
24
+ },
25
+ "disabled": {
26
+ "background-color": {},
27
+ "color": {}
28
+ }
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,17 @@
1
+ {
2
+ "utrecht": {
3
+ "form-field-error-message": {
4
+ "color": { "value": "{basiselementen.color.zwart}" },
5
+ "background-color": { "value": "{basiselementen.color.rood-tint2}" },
6
+ "padding-inline-start": { "value": "16px" },
7
+ "padding-inline-end": { "value": "16px" },
8
+ "padding-block-start": { "value": "16px" },
9
+ "padding-block-end": { "value": "16px" },
10
+ "font-family": {},
11
+ "font-size": {},
12
+ "font-weight": {},
13
+ "margin-block-start": {},
14
+ "margin-block-end": {}
15
+ }
16
+ }
17
+ }