@dictu/design-tokens 2.13.0 → 2.16.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 (11) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/index.css +83 -33
  3. package/package.json +1 -1
  4. package/src/$metadata.json +4 -2
  5. package/src/$themes.json +2 -2
  6. package/src/components/blockqoute.tokens.old.json +26 -0
  7. package/src/components/blockquote.tokens.json +158 -0
  8. package/src/components/form-elements/radio-button.tokens.json +23 -3
  9. package/src/components/form-elements/{text-area.tokens.json → textarea.tokens.json} +44 -18
  10. package/src/components/link.tokens.json +4 -4
  11. package/src/components/timeline.tokens.json +22 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @dictu/design-tokens
2
2
 
3
+ ## 2.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d4660a7: Add timeline design tokens for the connector icon-center and
8
+ sub-icon-center, heading text-align, content align-items, and button
9
+ justify-content, so the timeline component relies on tokens instead of
10
+ hardcoded values and mixin arguments.
11
+
12
+ ## 2.15.0
13
+
14
+ ### Minor Changes
15
+
16
+ - 549c9a0: Fixes colors for border of radio button
17
+
18
+ ## 2.14.0
19
+
20
+ ### Minor Changes
21
+
22
+ - b45c5b3: Added possibility for icon to be placed at the beginning of a link in
23
+ the Link component
24
+ - 3d96da7: Changed design tokens for quote component
25
+
3
26
  ## 2.13.0
4
27
 
5
28
  ### Minor Changes
package/dist/index.css CHANGED
@@ -185,9 +185,12 @@
185
185
  --govnl-timeline-connector-padding-inline-end: 0px;
186
186
  --govnl-timeline-connector-margin-inline-start: 15px;
187
187
  --govnl-timeline-title-padding-block-start: 0px;
188
+ --govnl-timeline-heading-text-align: start;
188
189
  --govnl-timeline-heading-text-decoration: none;
189
190
  --govnl-timeline-heading-hover-text-decoration: underline;
190
191
  --govnl-timeline-subheading-padding-block-start: 0px;
192
+ --govnl-timeline-content-align-items: flex-start;
193
+ --govnl-timeline-button-justify-content: start;
191
194
  --govnl-table-margin-block-end: 0;
192
195
  --govnl-table-caption-text-align: start;
193
196
  --govnl-table-header-sticky-border-block-end-width: 2px;
@@ -233,7 +236,7 @@
233
236
  --govnl-logo-subtitle-line-height: 1rem;
234
237
  --govnl-logo-subtitle-font-size: 0.775rem;
235
238
  --govnl-link-icon-size: 1em;
236
- --govnl-link-icon-margin-inline-start: 0.3em;
239
+ --govnl-link-row-gap: 0.3em;
237
240
  --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
238
241
  --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
239
242
  --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
@@ -290,6 +293,19 @@
290
293
  --govnl-breadcrumb-nav-link-text-decoration: underline;
291
294
  --govnl-breadcrumb-nav-link-mobile-padding-inline-start: 0rem;
292
295
  --govnl-breadcrumb-nav-current-text-decoration: none;
296
+ --govnl-quote-padding-block-start: 0;
297
+ --govnl-quote-padding-block-end: 0;
298
+ --govnl-quote-border-block-end-style: solid;
299
+ --govnl-quote-border-block-end-width: 0;
300
+ --govnl-quote-border-inline-start-style: solid;
301
+ --govnl-quote-border-top-left-radius: 0;
302
+ --govnl-quote-border-top-right-radius: 0;
303
+ --govnl-quote-border-bottom-right-radius: 0;
304
+ --govnl-quote-border-bottom-left-radius: 0;
305
+ --govnl-quote-work-font-style: normal;
306
+ --govnl-quote-role-font-style: normal;
307
+ --govnl-quote-author-font-style: normal;
308
+ --govnl-quote-blockquote-font-style: italic;
293
309
  --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
294
310
  --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
295
311
  --govnl-accordion-button-icon-size: 1.5em;
@@ -306,9 +322,6 @@
306
322
  --govnl-select-list-item-active-text-decoration: none;
307
323
  --govnl-select-list-item-hover-text-decoration: underline;
308
324
  --govnl-select-list-item-text-decoration: none;
309
- --govnl-radio-button-checked-border-color: transparant;
310
- --govnl-radio-button-checked-hover-border-color: transparant;
311
- --govnl-radio-button-checked-active-border-color: transparant;
312
325
  --govnl-form-field-label-group-row-gap: 0rem;
313
326
  --govnl-fieldset-legend-group-row-gap: 0rem;
314
327
  --govnl-checkbox-checked-border-color: transparant;
@@ -422,10 +435,28 @@
422
435
  --govnl-button-small-min-block-size: var(--govnl-dimension-size-500);
423
436
  --govnl-button-small-min-inline-size: var(--govnl-dimension-size-500);
424
437
  --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
438
+ --govnl-quote-border-inline-start-width: var(--govnl-border-border-width-lg);
439
+ --govnl-quote-work-font-size: var(--govnl-typography-font-size-sm);
440
+ --govnl-quote-work-font-weight: var(--govnl-typography-font-weight-bold);
441
+ --govnl-quote-role-font-size: var(--govnl-typography-font-size-sm);
442
+ --govnl-quote-role-font-weight: var(--govnl-typography-font-weight-regular);
443
+ --govnl-quote-author-font-size: var(--govnl-typography-font-size-lg);
444
+ --govnl-quote-author-font-weight: var(--govnl-typography-font-weight-bold);
445
+ --govnl-quote-caption-font-size: var(--govnl-typography-font-size-sm);
446
+ --govnl-quote-blockquote-font-size: var(--govnl-typography-font-size-xl);
447
+ --govnl-quote-blockquote-font-weight: var(--govnl-typography-font-weight-regular);
425
448
  --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
426
449
  --govnl-accordion-button-hover-background-color: var(--govnl-color-grijs-100);
427
450
  --govnl-accordion-button-active-background-color: var(--govnl-color-grijs-200);
428
451
  --govnl-accordion-button-section-border-block-end-width: var(--govnl-border-border-width-sm);
452
+ --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
453
+ --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
454
+ --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
455
+ --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
456
+ --govnl-textarea-hover-border-width: var(--govnl-border-border-width-sm);
457
+ --govnl-textarea-read-only-border-color: var(--govnl-form-control-read-only-border-color);
458
+ --govnl-textarea-read-only-border-width: var(--govnl-border-border-width-sm);
459
+ --govnl-textarea-active-border-width: var(--govnl-border-border-width-sm);
429
460
  --govnl-text-input-min-block-size: var(--govnl-dimension-pointer-target-min-size);
430
461
  --govnl-text-input-border-radius: var(--govnl-border-border-radius-sm);
431
462
  --govnl-text-input-border-width: var(--govnl-border-border-width-sm);
@@ -433,11 +464,6 @@
433
464
  --govnl-text-input-read-only-border-color: var(--govnl-form-control-read-only-border-color);
434
465
  --govnl-text-input-small-font-size: var(--govnl-typography-font-size-sm);
435
466
  --govnl-text-input-small-min-block-size: var(--govnl-dimension-size-500);
436
- --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
437
- --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
438
- --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
439
- --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
440
- --govnl-text-area-read-only-border-color: var(--govnl-form-control-read-only-border-color);
441
467
  --govnl-select-min-block-size: var(--govnl-dimension-pointer-target-min-size);
442
468
  --govnl-select-border-radius: var(--govnl-border-border-radius-sm);
443
469
  --govnl-select-border-width: var(--govnl-border-border-width-sm);
@@ -611,6 +637,8 @@
611
637
  --govnl-timeline-toggle-link-padding-block-end: var(--govnl-space-sm);
612
638
  --govnl-timeline-connector-color: var(--govnl-brand-primary-1-500);
613
639
  --govnl-timeline-connector-padding-inline-start: var(--govnl-space-sm);
640
+ --govnl-timeline-connector-icon-center: var(--govnl-space-sm);
641
+ --govnl-timeline-connector-sub-icon-center: var(--govnl-space-xs);
614
642
  --govnl-timeline-title-padding-block-end: var(--govnl-space-sm);
615
643
  --govnl-timeline-heading-padding-block-start: var(--govnl-space-4xs);
616
644
  --govnl-timeline-heading-padding-block-end: var(--govnl-space-md);
@@ -853,6 +881,16 @@
853
881
  --govnl-breadcrumb-nav-current-padding-inline-end: var(--govnl-space-xs);
854
882
  --govnl-breadcrumb-nav-current-padding-inline-start: var(--govnl-space-xs);
855
883
  --govnl-breadcrumb-nav-separator-color: var(--govnl-document-subtle-color);
884
+ --govnl-quote-padding-inline-start: var(--govnl-space-md);
885
+ --govnl-quote-padding-inline-end: var(--govnl-space-md);
886
+ --govnl-quote-border-block-end-color: var(--govnl-line-border-color);
887
+ --govnl-quote-border-inline-start-color: var(--govnl-feedback-informative-border-color);
888
+ --govnl-quote-row-gap: var(--govnl-space-sm);
889
+ --govnl-quote-work-color: var(--govnl-feedback-informative-color);
890
+ --govnl-quote-role-color: var(--govnl-document-subtle-color);
891
+ --govnl-quote-author-color: var(--govnl-brand-primary-1-500);
892
+ --govnl-quote-caption-row-gap: var(--govnl-space-2xs);
893
+ --govnl-quote-blockquote-color: var(--govnl-document-color);
856
894
  --govnl-accordion-body-font-family: var(--govnl-document-font-family);
857
895
  --govnl-accordion-body-font-size: var(--govnl-document-font-size);
858
896
  --govnl-accordion-body-font-weight: var(--govnl-document-font-weight);
@@ -878,6 +916,26 @@
878
916
  --govnl-accordion-button-expanded-background-color: var(--govnl-document-background-color);
879
917
  --govnl-accordion-button-expanded-color: var(--govnl-document-color);
880
918
  --govnl-accordion-button-section-border-color: var(--govnl-line-subtle-border-color);
919
+ --govnl-textarea-font-family: var(--govnl-form-control-font-family);
920
+ --govnl-textarea-font-size: var(--govnl-form-control-font-size);
921
+ --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
922
+ --govnl-textarea-line-height: var(--govnl-form-control-line-height);
923
+ --govnl-textarea-padding-block-start: var(--govnl-space-xs);
924
+ --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
925
+ --govnl-textarea-padding-block-end: var(--govnl-space-xs);
926
+ --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
927
+ --govnl-textarea-error-background-color: var(--govnl-form-control-invalid-background-color);
928
+ --govnl-textarea-background-color: var(--govnl-form-control-background-color);
929
+ --govnl-textarea-border-color: var(--govnl-form-control-border-color);
930
+ --govnl-textarea-color: var(--govnl-form-control-color);
931
+ --govnl-textarea-hover-background-color: var(--govnl-form-control-hover-background-color);
932
+ --govnl-textarea-hover-border-color: var(--govnl-form-control-hover-border-color);
933
+ --govnl-textarea-hover-color: var(--govnl-form-control-hover-color);
934
+ --govnl-textarea-focus-background-color: var(--govnl-form-control-background-color);
935
+ --govnl-textarea-read-only-background-color: var(--govnl-form-control-read-only-background-color);
936
+ --govnl-textarea-read-only-color: var(--govnl-form-control-read-only-color);
937
+ --govnl-textarea-placeholder-color: var(--govnl-form-control-placeholder-color);
938
+ --govnl-textarea-active-background-color: var(--govnl-form-control-background-color);
881
939
  --govnl-text-input-font-family: var(--govnl-form-control-font-family);
882
940
  --govnl-text-input-font-size: var(--govnl-form-control-font-size);
883
941
  --govnl-text-input-font-weight: var(--govnl-form-control-font-weight);
@@ -897,24 +955,6 @@
897
955
  --govnl-text-input-placeholder-color: var(--govnl-form-control-placeholder-color);
898
956
  --govnl-text-input-small-padding-inline-end: var(--govnl-space-2xs);
899
957
  --govnl-text-input-small-padding-inline-start: var(--govnl-space-2xs);
900
- --govnl-textarea-font-family: var(--govnl-form-control-font-family);
901
- --govnl-textarea-font-size: var(--govnl-form-control-font-size);
902
- --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
903
- --govnl-textarea-line-height: var(--govnl-form-control-line-height);
904
- --govnl-textarea-padding-block-start: var(--govnl-space-xs);
905
- --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
906
- --govnl-textarea-padding-block-end: var(--govnl-space-xs);
907
- --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
908
- --govnl-text-area-background-color: var(--govnl-form-control-background-color);
909
- --govnl-text-area-border-color: var(--govnl-form-control-border-color);
910
- --govnl-text-area-color: var(--govnl-form-control-color);
911
- --govnl-text-area-hover-background-color: var(--govnl-form-control-hover-background-color);
912
- --govnl-text-area-hover-border-color: var(--govnl-form-control-hover-border-color);
913
- --govnl-text-area-hover-color: var(--govnl-form-control-hover-color);
914
- --govnl-text-area-error-background-color: var(--govnl-form-control-invalid-background-color);
915
- --govnl-text-area-read-only-background-color: var(--govnl-form-control-read-only-background-color);
916
- --govnl-text-area-read-only-color: var(--govnl-form-control-read-only-color);
917
- --govnl-text-area-placeholder-color: var(--govnl-form-control-placeholder-color);
918
958
  --govnl-select-font-family: var(--govnl-form-control-font-family);
919
959
  --govnl-select-font-size: var(--govnl-form-control-font-size);
920
960
  --govnl-select-font-weight: var(--govnl-form-control-font-weight);
@@ -940,6 +980,7 @@
940
980
  --govnl-select-list-item-hover-background-color: var(--govnl-form-control-hover-background-color);
941
981
  --govnl-select-list-item-hover-color: var(--govnl-form-control-hover-color);
942
982
  --govnl-select-background-position: right var(--govnl-space-xs) center;
983
+ --govnl-radio-button-dot-size: var(--govnl-space-2xs);
943
984
  --govnl-radio-button-unchecked-background-color: var(--govnl-form-control-background-color);
944
985
  --govnl-radio-button-unchecked-border-color: var(--govnl-form-control-border-color);
945
986
  --govnl-radio-button-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
@@ -947,9 +988,13 @@
947
988
  --govnl-radio-button-unchecked-active-background-color: var(--govnl-form-control-active-background-color);
948
989
  --govnl-radio-button-unchecked-active-border-color: var(--govnl-form-control-hover-border-color);
949
990
  --govnl-radio-button-checked-background-color: var(--govnl-interaction-color);
991
+ --govnl-radio-button-checked-border-color: var(--govnl-interaction-color);
992
+ --govnl-radio-button-checked-dot-color: var(--govnl-document-inverse-color);
950
993
  --govnl-radio-button-checked-color: var(--govnl-document-inverse-color);
951
994
  --govnl-radio-button-checked-hover-color: var(--govnl-document-inverse-color);
995
+ --govnl-radio-button-checked-hover-dot-color: var(--govnl-document-inverse-color);
952
996
  --govnl-radio-button-checked-active-color: var(--govnl-document-inverse-color);
997
+ --govnl-radio-button-checked-active-dot-color: var(--govnl-document-inverse-color);
953
998
  --govnl-radio-button-column-gap: var(--govnl-space-2xs);
954
999
  --govnl-label-required-font-family: var(--govnl-form-control-font-family);
955
1000
  --govnl-label-required-font-weight: var(--govnl-form-control-font-weight);
@@ -1075,17 +1120,19 @@
1075
1120
  --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
1076
1121
  --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
1077
1122
  --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
1123
+ --govnl-textarea-error-border-color: var(--govnl-form-control-invalid-border-color);
1124
+ --govnl-textarea-error-color: var(--govnl-form-control-invalid-color);
1125
+ --govnl-textarea-focus-border-color: var(--govnl-form-control-focus-border-color);
1126
+ --govnl-textarea-focus-color: var(--govnl-form-control-focus-color);
1127
+ --govnl-textarea-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1128
+ --govnl-textarea-active-border-color: var(--govnl-form-control-focus-border-color);
1129
+ --govnl-textarea-active-color: var(--govnl-form-control-focus-color);
1130
+ --govnl-textarea-active-outline-color: var(--govnl-form-control-focus-outline-color);
1078
1131
  --govnl-text-input-focus-border-color: var(--govnl-form-control-focus-border-color);
1079
1132
  --govnl-text-input-focus-color: var(--govnl-form-control-focus-color);
1080
1133
  --govnl-text-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1081
1134
  --govnl-text-input-error-border-color: var(--govnl-form-control-invalid-border-color);
1082
1135
  --govnl-text-input-error-color: var(--govnl-form-control-invalid-color);
1083
- --govnl-text-area-focus-background-color: var(--govnl-form-control-focus-background-color);
1084
- --govnl-text-area-focus-border-color: var(--govnl-form-control-focus-border-color);
1085
- --govnl-text-area-focus-color: var(--govnl-form-control-focus-color);
1086
- --govnl-text-area-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1087
- --govnl-text-area-error-border-color: var(--govnl-form-control-invalid-border-color);
1088
- --govnl-text-area-error-color: var(--govnl-form-control-invalid-color);
1089
1136
  --govnl-select-focus-border-color: var(--govnl-form-control-focus-border-color);
1090
1137
  --govnl-select-focus-color: var(--govnl-form-control-focus-color);
1091
1138
  --govnl-select-focus-outline-color: var(--govnl-form-control-focus-outline-color);
@@ -1095,11 +1142,14 @@
1095
1142
  --govnl-radio-button-unchecked-focus-border-color: var(--govnl-form-control-focus-border-color);
1096
1143
  --govnl-radio-button-unchecked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1097
1144
  --govnl-radio-button-checked-hover-background-color: var(--govnl-interaction-hover-color);
1145
+ --govnl-radio-button-checked-hover-border-color: var(--govnl-interaction-hover-color);
1098
1146
  --govnl-radio-button-checked-active-background-color: var(--govnl-interaction-active-color);
1147
+ --govnl-radio-button-checked-active-border-color: var(--govnl-interaction-active-color);
1099
1148
  --govnl-radio-button-checked-focus-background-color: var(--govnl-form-control-focus-background-color);
1100
1149
  --govnl-radio-button-checked-focus-border-color: var(--govnl-form-control-focus-border-color);
1101
1150
  --govnl-radio-button-checked-focus-color: var(--govnl-form-control-focus-color);
1102
1151
  --govnl-radio-button-checked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1152
+ --govnl-radio-button-checked-focus-dot-color: var(--govnl-form-control-focus-color);
1103
1153
  --govnl-form-field-error-message-icon-color: var(--govnl-form-control-invalid-color);
1104
1154
  --govnl-form-field-error-message-color: var(--govnl-form-control-invalid-color);
1105
1155
  --govnl-form-field-error-border-color: var(--govnl-form-control-invalid-border-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dictu/design-tokens",
3
- "version": "2.13.0",
3
+ "version": "2.16.0",
4
4
  "author": "Dienst ICT Uitvoering",
5
5
  "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
package/src/$metadata.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "components/form-elements/label.tokens",
17
17
  "components/form-elements/radio-button.tokens",
18
18
  "components/form-elements/select.tokens",
19
- "components/form-elements/text-area.tokens",
19
+ "components/form-elements/textarea.tokens",
20
20
  "components/form-elements/text-input.tokens",
21
21
  "components/grid.tokens",
22
22
  "components/heading.tokens",
@@ -36,6 +36,8 @@
36
36
  "components/skip-link.tokens",
37
37
  "components/table.tokens",
38
38
  "components/timeline.tokens",
39
- "components/video-player.tokens"
39
+ "components/video-player.tokens",
40
+ "components/blockqoute.tokens.old",
41
+ "components/blockquote.tokens"
40
42
  ]
41
43
  }
package/src/$themes.json CHANGED
@@ -35,11 +35,11 @@
35
35
  "components/form-elements/label.tokens": "enabled",
36
36
  "components/form-elements/radio-button.tokens": "enabled",
37
37
  "components/form-elements/select.tokens": "enabled",
38
- "components/form-elements/text-area.tokens": "enabled",
39
38
  "components/form-elements/text-input.tokens": "enabled",
40
39
  "components/searchbar.tokens": "enabled",
41
40
  "components/pagination.tokens": "enabled",
42
- "components/video-player.tokens": "enabled"
41
+ "components/video-player.tokens": "enabled",
42
+ "components/form-elements/textarea.tokens": "enabled"
43
43
  },
44
44
  "$figmaVariableReferences": {},
45
45
  "group": "GovNL"
package/src/components/blockqoute.tokens.old.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "govnl": {
3
+ "quote": {
4
+ "text": {
5
+ "font-style": {
6
+ "$type": "text",
7
+ "$value": "italic"
8
+ }
9
+ },
10
+ "author": {
11
+ "font-weight": {
12
+ "$type": "fontWeights",
13
+ "$value": "{govnl.typography.font-weight.regular}"
14
+ }
15
+ },
16
+ "padding-inline-start": {
17
+ "$type": "dimension",
18
+ "$value": "{govnl.dimension.size.300}"
19
+ },
20
+ "border-inline-start": {
21
+ "$type": "border",
22
+ "$value": "{govnl.border.border-width.lg} solid {govnl.brand.primary-1.500}"
23
+ }
24
+ }
25
+ }
26
+ }
package/src/components/blockquote.tokens.json ADDED
@@ -0,0 +1,158 @@
1
+ {
2
+ "govnl": {
3
+ "quote": {
4
+ "padding": {
5
+ "block-start": {
6
+ "$type": "dimension",
7
+ "$value": "0"
8
+ },
9
+ "block-end": {
10
+ "$type": "dimension",
11
+ "$value": "0"
12
+ },
13
+ "inline-start": {
14
+ "$type": "dimension",
15
+ "$value": "{govnl.space.md}"
16
+ },
17
+ "inline-end": {
18
+ "$type": "dimension",
19
+ "$value": "{govnl.space.md}"
20
+ }
21
+ },
22
+ "border": {
23
+ "block-end": {
24
+ "style": {
25
+ "$type": "text",
26
+ "$value": "solid"
27
+ },
28
+ "width": {
29
+ "$type": "dimension",
30
+ "$value": "0"
31
+ },
32
+ "color": {
33
+ "$type": "color",
34
+ "$value": "{govnl.line.border-color}"
35
+ }
36
+ },
37
+ "inline-start": {
38
+ "style": {
39
+ "$type": "text",
40
+ "$value": "solid"
41
+ },
42
+ "width": {
43
+ "$type": "dimension",
44
+ "$value": "{govnl.border.border-width.lg}"
45
+ },
46
+ "color": {
47
+ "$type": "color",
48
+ "$value": "{govnl.feedback.informative.border-color}"
49
+ }
50
+ }
51
+ },
52
+ "border-top-left-radius": {
53
+ "$type": "dimension",
54
+ "$value": "0"
55
+ },
56
+ "border-top-right-radius": {
57
+ "$type": "dimension",
58
+ "$value": "0"
59
+ },
60
+ "border-bottom-right-radius": {
61
+ "$type": "dimension",
62
+ "$value": "0"
63
+ },
64
+ "border-bottom-left-radius": {
65
+ "$type": "dimension",
66
+ "$value": "0"
67
+ },
68
+ "row-gap": {
69
+ "$type": "spacing",
70
+ "$value": "{govnl.space.sm}"
71
+ },
72
+ "work": {
73
+ "color": {
74
+ "$type": "color",
75
+ "$value": "{govnl.feedback.informative.color}"
76
+ },
77
+ "font-size": {
78
+ "$type": "fontSizes",
79
+ "$value": "{govnl.typography.font-size.sm}"
80
+ },
81
+ "font-style": {
82
+ "$type": "text",
83
+ "$value": "normal"
84
+ },
85
+ "font-weight": {
86
+ "$type": "fontWeights",
87
+ "$value": "{govnl.typography.font-weight.bold}"
88
+ }
89
+ },
90
+ "role": {
91
+ "color": {
92
+ "$type": "color",
93
+ "$value": "{govnl.document.subtle.color}"
94
+ },
95
+ "font-size": {
96
+ "$type": "fontSizes",
97
+ "$value": "{govnl.typography.font-size.sm}"
98
+ },
99
+ "font-style": {
100
+ "$type": "text",
101
+ "$value": "normal"
102
+ },
103
+ "font-weight": {
104
+ "$type": "fontWeights",
105
+ "$value": "{govnl.typography.font-weight.regular}"
106
+ }
107
+ },
108
+ "author": {
109
+ "color": {
110
+ "$type": "color",
111
+ "$value": "{govnl.brand.primary-1.500}"
112
+ },
113
+ "font-size": {
114
+ "$type": "fontSizes",
115
+ "$value": "{govnl.typography.font-size.lg}"
116
+ },
117
+ "font-style": {
118
+ "$type": "text",
119
+ "$value": "normal"
120
+ },
121
+ "font-weight": {
122
+ "$type": "fontWeights",
123
+ "$value": "{govnl.typography.font-weight.bold}"
124
+ }
125
+ },
126
+ "caption": {
127
+ "font-size": {
128
+ "$type": "fontSizes",
129
+ "$value": "{govnl.typography.font-size.sm}"
130
+ },
131
+ "row-gap": {
132
+ "$type": "spacing",
133
+ "$value": "{govnl.space.2xs}"
134
+ }
135
+ },
136
+ "blockquote": {
137
+ "color": {
138
+ "$type": "color",
139
+ "$value": "{govnl.document.color}"
140
+ },
141
+ "font-size": {
142
+ "$type": "fontSizes",
143
+ "$value": "{govnl.typography.font-size.xl}"
144
+ },
145
+ "font-style": {
146
+ "$type": "text",
147
+ "$value": "italic"
148
+ },
149
+ "font-weight": {
150
+ "$type": "fontWeights",
151
+ "$value": "{govnl.typography.font-weight.regular}"
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+
158
+
package/src/components/form-elements/radio-button.tokens.json CHANGED
@@ -5,6 +5,10 @@
5
5
  "$type": "sizing",
6
6
  "$value": "{govnl.dimension.size.300}"
7
7
  },
8
+ "dot-size": {
9
+ "$type": "sizing",
10
+ "$value": "{govnl.space.2xs}"
11
+ },
8
12
  "border-radius": {
9
13
  "$type": "borderRadius",
10
14
  "$value": "{govnl.border.border-radius.round}"
@@ -82,7 +86,11 @@
82
86
  },
83
87
  "border-color": {
84
88
  "$type": "color",
85
- "$value": "transparant"
89
+ "$value": "{govnl.interaction.color}"
90
+ },
91
+ "dot-color": {
92
+ "$type": "color",
93
+ "$value": "{govnl.document.inverse.color}"
86
94
  },
87
95
  "color": {
88
96
  "$type": "color",
@@ -99,7 +107,7 @@
99
107
  },
100
108
  "border-color": {
101
109
  "$type": "color",
102
- "$value": "transparant"
110
+ "$value": "{govnl.interaction.hover.color}"
103
111
  },
104
112
  "color": {
105
113
  "$type": "color",
@@ -108,6 +116,10 @@
108
116
  "border-width": {
109
117
  "$type": "borderWidth",
110
118
  "$value": "{govnl.border.border-width.md}"
119
+ },
120
+ "dot-color": {
121
+ "$type": "color",
122
+ "$value": "{govnl.document.inverse.color}"
111
123
  }
112
124
  },
113
125
  "active": {
@@ -117,7 +129,7 @@
117
129
  },
118
130
  "border-color": {
119
131
  "$type": "color",
120
- "$value": "transparant"
132
+ "$value": "{govnl.interaction.active.color}"
121
133
  },
122
134
  "color": {
123
135
  "$type": "color",
@@ -126,6 +138,10 @@
126
138
  "border-width": {
127
139
  "$type": "borderWidth",
128
140
  "$value": "{govnl.border.border-width.md}"
141
+ },
142
+ "dot-color": {
143
+ "$type": "color",
144
+ "$value": "{govnl.document.inverse.color}"
129
145
  }
130
146
  },
131
147
  "focus": {
@@ -148,6 +164,10 @@
148
164
  "border-width": {
149
165
  "$type": "borderWidth",
150
166
  "$value": "{govnl.border.border-width.sm}"
167
+ },
168
+ "dot-color": {
169
+ "$type": "color",
170
+ "$value": "{govnl.form-control.focus.color}"
151
171
  }
152
172
  }
153
173
  },
package/src/components/form-elements/{text-area.tokens.json → textarea.tokens.json} RENAMED
@@ -49,10 +49,20 @@
49
49
  "border-width": {
50
50
  "$type": "borderWidth",
51
51
  "$value": "{govnl.border.border-width.md}"
52
+ },
53
+ "background-color": {
54
+ "$type": "color",
55
+ "$value": "{govnl.form-control.invalid.background-color}"
56
+ },
57
+ "border-color": {
58
+ "$type": "color",
59
+ "$value": "{govnl.form-control.invalid.border-color}"
60
+ },
61
+ "color": {
62
+ "$type": "color",
63
+ "$value": "{govnl.form-control.invalid.color}"
52
64
  }
53
- }
54
- },
55
- "text-area": {
65
+ },
56
66
  "background-color": {
57
67
  "$type": "color",
58
68
  "$value": "{govnl.form-control.background-color}"
@@ -77,12 +87,16 @@
77
87
  "color": {
78
88
  "$type": "color",
79
89
  "$value": "{govnl.form-control.hover.color}"
90
+ },
91
+ "border-width": {
92
+ "$type": "borderWidth",
93
+ "$value": "{govnl.border.border-width.sm}"
80
94
  }
81
95
  },
82
96
  "focus": {
83
97
  "background-color": {
84
98
  "$type": "color",
85
- "$value": "{govnl.form-control.focus.background-color}"
99
+ "$value": "{govnl.form-control.background-color}"
86
100
  },
87
101
  "border-color": {
88
102
  "$type": "color",
@@ -97,40 +111,52 @@
97
111
  "$value": "{govnl.form-control.focus.outline-color}"
98
112
  }
99
113
  },
100
- "error": {
114
+ "read-only": {
101
115
  "background-color": {
102
116
  "$type": "color",
103
- "$value": "{govnl.form-control.invalid.background-color}"
117
+ "$value": "{govnl.form-control.read-only.background-color}"
104
118
  },
105
119
  "border-color": {
106
120
  "$type": "color",
107
- "$value": "{govnl.form-control.invalid.border-color}"
121
+ "$value": "{govnl.form-control.read-only.border-color}"
108
122
  },
109
123
  "color": {
110
124
  "$type": "color",
111
- "$value": "{govnl.form-control.invalid.color}"
125
+ "$value": "{govnl.form-control.read-only.color}"
126
+ },
127
+ "border-width": {
128
+ "$type": "borderWidth",
129
+ "$value": "{govnl.border.border-width.sm}"
112
130
  }
113
131
  },
114
- "read-only": {
132
+ "placeholder": {
133
+ "color": {
134
+ "$type": "color",
135
+ "$value": "{govnl.form-control.placeholder.color}"
136
+ }
137
+ },
138
+ "active": {
115
139
  "background-color": {
116
140
  "$type": "color",
117
- "$value": "{govnl.form-control.read-only.background-color}"
141
+ "$value": "{govnl.form-control.background-color}"
118
142
  },
119
143
  "border-color": {
120
144
  "$type": "color",
121
- "$value": "{govnl.form-control.read-only.border-color}"
145
+ "$value": "{govnl.form-control.focus.border-color}"
122
146
  },
123
147
  "color": {
124
148
  "$type": "color",
125
- "$value": "{govnl.form-control.read-only.color}"
126
- }
127
- },
128
- "placeholder": {
129
- "color": {
149
+ "$value": "{govnl.form-control.focus.color}"
150
+ },
151
+ "border-width": {
152
+ "$type": "borderWidth",
153
+ "$value": "{govnl.border.border-width.sm}"
154
+ },
155
+ "outline-color": {
130
156
  "$type": "color",
131
- "$value": "{govnl.form-control.placeholder.color}"
157
+ "$value": "{govnl.form-control.focus.outline-color}"
132
158
  }
133
159
  }
134
160
  }
135
161
  }
136
- }
162
+ }
package/src/components/link.tokens.json CHANGED
@@ -91,11 +91,11 @@
91
91
  "size": {
92
92
  "$type": "sizing",
93
93
  "$value": "1em"
94
- },
95
- "margin-inline-start": {
96
- "$type": "dimension",
97
- "$value": "0.3em"
98
94
  }
95
+ },
96
+ "row-gap": {
97
+ "$type": "dimension",
98
+ "$value": "0.3em"
99
99
  }
100
100
  }
101
101
  }
package/src/components/timeline.tokens.json CHANGED
@@ -77,6 +77,14 @@
77
77
  "margin-inline-start": {
78
78
  "$type": "dimension",
79
79
  "$value": "15px"
80
+ },
81
+ "icon-center": {
82
+ "$type": "dimension",
83
+ "$value": "{govnl.space.sm}"
84
+ },
85
+ "sub-icon-center": {
86
+ "$type": "dimension",
87
+ "$value": "{govnl.space.xs}"
80
88
  }
81
89
  },
82
90
  "title": {
@@ -90,6 +98,10 @@
90
98
  }
91
99
  },
92
100
  "heading": {
101
+ "text-align": {
102
+ "$type": "other",
103
+ "$value": "start"
104
+ },
93
105
  "text-decoration": {
94
106
  "$type": "textDecoration",
95
107
  "$value": "none"
@@ -129,6 +141,16 @@
129
141
  "column-gap": {
130
142
  "$type": "dimension",
131
143
  "$value": "{govnl.gap-content.min}"
144
+ },
145
+ "align-items": {
146
+ "$type": "other",
147
+ "$value": "flex-start"
148
+ }
149
+ },
150
+ "button": {
151
+ "justify-content": {
152
+ "$type": "other",
153
+ "$value": "start"
132
154
  }
133
155
  },
134
156
  "border-radius": {