@dictu/design-tokens 2.12.1 → 2.15.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 (12) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/index.css +90 -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/container.tokens.json +33 -1
  9. package/src/components/form-elements/radio-button.tokens.json +23 -3
  10. package/src/components/form-elements/{text-area.tokens.json → textarea.tokens.json} +44 -18
  11. package/src/components/link.tokens.json +4 -4
  12. package/src/components/section.tokens.json +33 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @dictu/design-tokens
2
2
 
3
+ ## 2.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 549c9a0: Fixes colors for border of radio button
8
+
9
+ ## 2.14.0
10
+
11
+ ### Minor Changes
12
+
13
+ - b45c5b3: Added possibility for icon to be placed at the beginning of a link in
14
+ the Link component
15
+ - 3d96da7: Changed design tokens for quote component
16
+
17
+ ## 2.13.0
18
+
19
+ ### Minor Changes
20
+
21
+ - eae83a7: Added row-gap and column-gap tokens to container and section
22
+ tokensets
23
+
3
24
  ## 2.12.1
4
25
 
5
26
  ### Patch Changes
package/dist/index.css CHANGED
@@ -198,6 +198,9 @@
198
198
  --govnl-table-cell-padding-inline-start: 0.4em;
199
199
  --govnl-table-cell-icon-size: 1em;
200
200
  --govnl-table-cell-header-border-inline-end-width: 2px;
201
+ --govnl-section-gap-small-column-gap: 0;
202
+ --govnl-section-gap-medium-column-gap: 0;
203
+ --govnl-section-gap-large-column-gap: 0;
201
204
  --govnl-searchbar-small-min-inline-size: 240px;
202
205
  --govnl-searchbar-small-max-inline-size: 480px;
203
206
  --govnl-searchbar-min-inline-size: 400px;
@@ -230,7 +233,7 @@
230
233
  --govnl-logo-subtitle-line-height: 1rem;
231
234
  --govnl-logo-subtitle-font-size: 0.775rem;
232
235
  --govnl-link-icon-size: 1em;
233
- --govnl-link-icon-margin-inline-start: 0.3em;
236
+ --govnl-link-row-gap: 0.3em;
234
237
  --govnl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
235
238
  --govnl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
236
239
  --govnl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
@@ -254,6 +257,9 @@
254
257
  --govnl-grid-template-columns-col-3: repeat(3, 1fr);
255
258
  --govnl-grid-template-columns-col-4: repeat(4, 1fr);
256
259
  --govnl-grid-template-rows-auto: auto;
260
+ --govnl-container-gap-small-column-gap: 0;
261
+ --govnl-container-gap-medium-column-gap: 0;
262
+ --govnl-container-gap-large-column-gap: 0;
257
263
  --govnl-card-default-focus-border-color: transparant;
258
264
  --govnl-card-heading-text-decoration-line: underline;
259
265
  --govnl-card-heading-hover-text-decoration-line: underline;
@@ -284,6 +290,19 @@
284
290
  --govnl-breadcrumb-nav-link-text-decoration: underline;
285
291
  --govnl-breadcrumb-nav-link-mobile-padding-inline-start: 0rem;
286
292
  --govnl-breadcrumb-nav-current-text-decoration: none;
293
+ --govnl-quote-padding-block-start: 0;
294
+ --govnl-quote-padding-block-end: 0;
295
+ --govnl-quote-border-block-end-style: solid;
296
+ --govnl-quote-border-block-end-width: 0;
297
+ --govnl-quote-border-inline-start-style: solid;
298
+ --govnl-quote-border-top-left-radius: 0;
299
+ --govnl-quote-border-top-right-radius: 0;
300
+ --govnl-quote-border-bottom-right-radius: 0;
301
+ --govnl-quote-border-bottom-left-radius: 0;
302
+ --govnl-quote-work-font-style: normal;
303
+ --govnl-quote-role-font-style: normal;
304
+ --govnl-quote-author-font-style: normal;
305
+ --govnl-quote-blockquote-font-style: italic;
287
306
  --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
288
307
  --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
289
308
  --govnl-accordion-button-icon-size: 1.5em;
@@ -300,9 +319,6 @@
300
319
  --govnl-select-list-item-active-text-decoration: none;
301
320
  --govnl-select-list-item-hover-text-decoration: underline;
302
321
  --govnl-select-list-item-text-decoration: none;
303
- --govnl-radio-button-checked-border-color: transparant;
304
- --govnl-radio-button-checked-hover-border-color: transparant;
305
- --govnl-radio-button-checked-active-border-color: transparant;
306
322
  --govnl-form-field-label-group-row-gap: 0rem;
307
323
  --govnl-fieldset-legend-group-row-gap: 0rem;
308
324
  --govnl-checkbox-checked-border-color: transparant;
@@ -416,10 +432,28 @@
416
432
  --govnl-button-small-min-block-size: var(--govnl-dimension-size-500);
417
433
  --govnl-button-small-min-inline-size: var(--govnl-dimension-size-500);
418
434
  --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
435
+ --govnl-quote-border-inline-start-width: var(--govnl-border-border-width-lg);
436
+ --govnl-quote-work-font-size: var(--govnl-typography-font-size-sm);
437
+ --govnl-quote-work-font-weight: var(--govnl-typography-font-weight-bold);
438
+ --govnl-quote-role-font-size: var(--govnl-typography-font-size-sm);
439
+ --govnl-quote-role-font-weight: var(--govnl-typography-font-weight-regular);
440
+ --govnl-quote-author-font-size: var(--govnl-typography-font-size-lg);
441
+ --govnl-quote-author-font-weight: var(--govnl-typography-font-weight-bold);
442
+ --govnl-quote-caption-font-size: var(--govnl-typography-font-size-sm);
443
+ --govnl-quote-blockquote-font-size: var(--govnl-typography-font-size-xl);
444
+ --govnl-quote-blockquote-font-weight: var(--govnl-typography-font-weight-regular);
419
445
  --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
420
446
  --govnl-accordion-button-hover-background-color: var(--govnl-color-grijs-100);
421
447
  --govnl-accordion-button-active-background-color: var(--govnl-color-grijs-200);
422
448
  --govnl-accordion-button-section-border-block-end-width: var(--govnl-border-border-width-sm);
449
+ --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
450
+ --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
451
+ --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
452
+ --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
453
+ --govnl-textarea-hover-border-width: var(--govnl-border-border-width-sm);
454
+ --govnl-textarea-read-only-border-color: var(--govnl-form-control-read-only-border-color);
455
+ --govnl-textarea-read-only-border-width: var(--govnl-border-border-width-sm);
456
+ --govnl-textarea-active-border-width: var(--govnl-border-border-width-sm);
423
457
  --govnl-text-input-min-block-size: var(--govnl-dimension-pointer-target-min-size);
424
458
  --govnl-text-input-border-radius: var(--govnl-border-border-radius-sm);
425
459
  --govnl-text-input-border-width: var(--govnl-border-border-width-sm);
@@ -427,11 +461,6 @@
427
461
  --govnl-text-input-read-only-border-color: var(--govnl-form-control-read-only-border-color);
428
462
  --govnl-text-input-small-font-size: var(--govnl-typography-font-size-sm);
429
463
  --govnl-text-input-small-min-block-size: var(--govnl-dimension-size-500);
430
- --govnl-textarea-min-block-size: var(--govnl-dimension-pointer-target-min-size);
431
- --govnl-textarea-border-radius: var(--govnl-border-border-radius-sm);
432
- --govnl-textarea-border-width: var(--govnl-border-border-width-sm);
433
- --govnl-textarea-error-border-width: var(--govnl-border-border-width-md);
434
- --govnl-text-area-read-only-border-color: var(--govnl-form-control-read-only-border-color);
435
464
  --govnl-select-min-block-size: var(--govnl-dimension-pointer-target-min-size);
436
465
  --govnl-select-border-radius: var(--govnl-border-border-radius-sm);
437
466
  --govnl-select-border-width: var(--govnl-border-border-width-sm);
@@ -628,6 +657,9 @@
628
657
  --govnl-table-cell-selected-background-color: var(--govnl-brand-primary-1-50);
629
658
  --govnl-table-cell-header-border-inline-end-color: var(--govnl-line-strong-border-color);
630
659
  --govnl-table-row-border-block-end-color: var(--govnl-line-subtle-border-color);
660
+ --govnl-section-gap-small-row-gap: var(--govnl-space-sm);
661
+ --govnl-section-gap-medium-row-gap: var(--govnl-space-md);
662
+ --govnl-section-gap-large-row-gap: var(--govnl-space-lg);
631
663
  --govnl-pagination-relative-link-large-previous-padding-block-start: var(--govnl-space-2xs);
632
664
  --govnl-pagination-relative-link-large-previous-padding-block-end: var(--govnl-space-2xs);
633
665
  --govnl-pagination-relative-link-large-previous-padding-inline-end: var(--govnl-space-3xs);
@@ -751,6 +783,9 @@
751
783
  --govnl-grid-gap-column-max: var(--govnl-gap-content-max);
752
784
  --govnl-figure-caption-color: var(--govnl-document-color);
753
785
  --govnl-figure-row-gap: 0.5rem;
786
+ --govnl-container-gap-small-row-gap: var(--govnl-space-sm);
787
+ --govnl-container-gap-medium-row-gap: var(--govnl-space-md);
788
+ --govnl-container-gap-large-row-gap: var(--govnl-space-lg);
754
789
  --govnl-card-default-background-color: var(--govnl-document-background-color);
755
790
  --govnl-card-default-border-color: var(--govnl-line-subtle-border-color);
756
791
  --govnl-card-default-hover-border-color: var(--govnl-line-border-color);
@@ -841,6 +876,16 @@
841
876
  --govnl-breadcrumb-nav-current-padding-inline-end: var(--govnl-space-xs);
842
877
  --govnl-breadcrumb-nav-current-padding-inline-start: var(--govnl-space-xs);
843
878
  --govnl-breadcrumb-nav-separator-color: var(--govnl-document-subtle-color);
879
+ --govnl-quote-padding-inline-start: var(--govnl-space-md);
880
+ --govnl-quote-padding-inline-end: var(--govnl-space-md);
881
+ --govnl-quote-border-block-end-color: var(--govnl-line-border-color);
882
+ --govnl-quote-border-inline-start-color: var(--govnl-feedback-informative-border-color);
883
+ --govnl-quote-row-gap: var(--govnl-space-sm);
884
+ --govnl-quote-work-color: var(--govnl-feedback-informative-color);
885
+ --govnl-quote-role-color: var(--govnl-document-subtle-color);
886
+ --govnl-quote-author-color: var(--govnl-brand-primary-1-500);
887
+ --govnl-quote-caption-row-gap: var(--govnl-space-2xs);
888
+ --govnl-quote-blockquote-color: var(--govnl-document-color);
844
889
  --govnl-accordion-body-font-family: var(--govnl-document-font-family);
845
890
  --govnl-accordion-body-font-size: var(--govnl-document-font-size);
846
891
  --govnl-accordion-body-font-weight: var(--govnl-document-font-weight);
@@ -866,6 +911,26 @@
866
911
  --govnl-accordion-button-expanded-background-color: var(--govnl-document-background-color);
867
912
  --govnl-accordion-button-expanded-color: var(--govnl-document-color);
868
913
  --govnl-accordion-button-section-border-color: var(--govnl-line-subtle-border-color);
914
+ --govnl-textarea-font-family: var(--govnl-form-control-font-family);
915
+ --govnl-textarea-font-size: var(--govnl-form-control-font-size);
916
+ --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
917
+ --govnl-textarea-line-height: var(--govnl-form-control-line-height);
918
+ --govnl-textarea-padding-block-start: var(--govnl-space-xs);
919
+ --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
920
+ --govnl-textarea-padding-block-end: var(--govnl-space-xs);
921
+ --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
922
+ --govnl-textarea-error-background-color: var(--govnl-form-control-invalid-background-color);
923
+ --govnl-textarea-background-color: var(--govnl-form-control-background-color);
924
+ --govnl-textarea-border-color: var(--govnl-form-control-border-color);
925
+ --govnl-textarea-color: var(--govnl-form-control-color);
926
+ --govnl-textarea-hover-background-color: var(--govnl-form-control-hover-background-color);
927
+ --govnl-textarea-hover-border-color: var(--govnl-form-control-hover-border-color);
928
+ --govnl-textarea-hover-color: var(--govnl-form-control-hover-color);
929
+ --govnl-textarea-focus-background-color: var(--govnl-form-control-background-color);
930
+ --govnl-textarea-read-only-background-color: var(--govnl-form-control-read-only-background-color);
931
+ --govnl-textarea-read-only-color: var(--govnl-form-control-read-only-color);
932
+ --govnl-textarea-placeholder-color: var(--govnl-form-control-placeholder-color);
933
+ --govnl-textarea-active-background-color: var(--govnl-form-control-background-color);
869
934
  --govnl-text-input-font-family: var(--govnl-form-control-font-family);
870
935
  --govnl-text-input-font-size: var(--govnl-form-control-font-size);
871
936
  --govnl-text-input-font-weight: var(--govnl-form-control-font-weight);
@@ -885,24 +950,6 @@
885
950
  --govnl-text-input-placeholder-color: var(--govnl-form-control-placeholder-color);
886
951
  --govnl-text-input-small-padding-inline-end: var(--govnl-space-2xs);
887
952
  --govnl-text-input-small-padding-inline-start: var(--govnl-space-2xs);
888
- --govnl-textarea-font-family: var(--govnl-form-control-font-family);
889
- --govnl-textarea-font-size: var(--govnl-form-control-font-size);
890
- --govnl-textarea-font-weight: var(--govnl-form-control-font-weight);
891
- --govnl-textarea-line-height: var(--govnl-form-control-line-height);
892
- --govnl-textarea-padding-block-start: var(--govnl-space-xs);
893
- --govnl-textarea-padding-inline-end: var(--govnl-space-xs);
894
- --govnl-textarea-padding-block-end: var(--govnl-space-xs);
895
- --govnl-textarea-padding-inline-start: var(--govnl-space-xs);
896
- --govnl-text-area-background-color: var(--govnl-form-control-background-color);
897
- --govnl-text-area-border-color: var(--govnl-form-control-border-color);
898
- --govnl-text-area-color: var(--govnl-form-control-color);
899
- --govnl-text-area-hover-background-color: var(--govnl-form-control-hover-background-color);
900
- --govnl-text-area-hover-border-color: var(--govnl-form-control-hover-border-color);
901
- --govnl-text-area-hover-color: var(--govnl-form-control-hover-color);
902
- --govnl-text-area-error-background-color: var(--govnl-form-control-invalid-background-color);
903
- --govnl-text-area-read-only-background-color: var(--govnl-form-control-read-only-background-color);
904
- --govnl-text-area-read-only-color: var(--govnl-form-control-read-only-color);
905
- --govnl-text-area-placeholder-color: var(--govnl-form-control-placeholder-color);
906
953
  --govnl-select-font-family: var(--govnl-form-control-font-family);
907
954
  --govnl-select-font-size: var(--govnl-form-control-font-size);
908
955
  --govnl-select-font-weight: var(--govnl-form-control-font-weight);
@@ -928,6 +975,7 @@
928
975
  --govnl-select-list-item-hover-background-color: var(--govnl-form-control-hover-background-color);
929
976
  --govnl-select-list-item-hover-color: var(--govnl-form-control-hover-color);
930
977
  --govnl-select-background-position: right var(--govnl-space-xs) center;
978
+ --govnl-radio-button-dot-size: var(--govnl-space-2xs);
931
979
  --govnl-radio-button-unchecked-background-color: var(--govnl-form-control-background-color);
932
980
  --govnl-radio-button-unchecked-border-color: var(--govnl-form-control-border-color);
933
981
  --govnl-radio-button-unchecked-hover-background-color: var(--govnl-form-control-hover-background-color);
@@ -935,9 +983,13 @@
935
983
  --govnl-radio-button-unchecked-active-background-color: var(--govnl-form-control-active-background-color);
936
984
  --govnl-radio-button-unchecked-active-border-color: var(--govnl-form-control-hover-border-color);
937
985
  --govnl-radio-button-checked-background-color: var(--govnl-interaction-color);
986
+ --govnl-radio-button-checked-border-color: var(--govnl-interaction-color);
987
+ --govnl-radio-button-checked-dot-color: var(--govnl-document-inverse-color);
938
988
  --govnl-radio-button-checked-color: var(--govnl-document-inverse-color);
939
989
  --govnl-radio-button-checked-hover-color: var(--govnl-document-inverse-color);
990
+ --govnl-radio-button-checked-hover-dot-color: var(--govnl-document-inverse-color);
940
991
  --govnl-radio-button-checked-active-color: var(--govnl-document-inverse-color);
992
+ --govnl-radio-button-checked-active-dot-color: var(--govnl-document-inverse-color);
941
993
  --govnl-radio-button-column-gap: var(--govnl-space-2xs);
942
994
  --govnl-label-required-font-family: var(--govnl-form-control-font-family);
943
995
  --govnl-label-required-font-weight: var(--govnl-form-control-font-weight);
@@ -1063,17 +1115,19 @@
1063
1115
  --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
1064
1116
  --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
1065
1117
  --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
1118
+ --govnl-textarea-error-border-color: var(--govnl-form-control-invalid-border-color);
1119
+ --govnl-textarea-error-color: var(--govnl-form-control-invalid-color);
1120
+ --govnl-textarea-focus-border-color: var(--govnl-form-control-focus-border-color);
1121
+ --govnl-textarea-focus-color: var(--govnl-form-control-focus-color);
1122
+ --govnl-textarea-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1123
+ --govnl-textarea-active-border-color: var(--govnl-form-control-focus-border-color);
1124
+ --govnl-textarea-active-color: var(--govnl-form-control-focus-color);
1125
+ --govnl-textarea-active-outline-color: var(--govnl-form-control-focus-outline-color);
1066
1126
  --govnl-text-input-focus-border-color: var(--govnl-form-control-focus-border-color);
1067
1127
  --govnl-text-input-focus-color: var(--govnl-form-control-focus-color);
1068
1128
  --govnl-text-input-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1069
1129
  --govnl-text-input-error-border-color: var(--govnl-form-control-invalid-border-color);
1070
1130
  --govnl-text-input-error-color: var(--govnl-form-control-invalid-color);
1071
- --govnl-text-area-focus-background-color: var(--govnl-form-control-focus-background-color);
1072
- --govnl-text-area-focus-border-color: var(--govnl-form-control-focus-border-color);
1073
- --govnl-text-area-focus-color: var(--govnl-form-control-focus-color);
1074
- --govnl-text-area-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1075
- --govnl-text-area-error-border-color: var(--govnl-form-control-invalid-border-color);
1076
- --govnl-text-area-error-color: var(--govnl-form-control-invalid-color);
1077
1131
  --govnl-select-focus-border-color: var(--govnl-form-control-focus-border-color);
1078
1132
  --govnl-select-focus-color: var(--govnl-form-control-focus-color);
1079
1133
  --govnl-select-focus-outline-color: var(--govnl-form-control-focus-outline-color);
@@ -1083,11 +1137,14 @@
1083
1137
  --govnl-radio-button-unchecked-focus-border-color: var(--govnl-form-control-focus-border-color);
1084
1138
  --govnl-radio-button-unchecked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1085
1139
  --govnl-radio-button-checked-hover-background-color: var(--govnl-interaction-hover-color);
1140
+ --govnl-radio-button-checked-hover-border-color: var(--govnl-interaction-hover-color);
1086
1141
  --govnl-radio-button-checked-active-background-color: var(--govnl-interaction-active-color);
1142
+ --govnl-radio-button-checked-active-border-color: var(--govnl-interaction-active-color);
1087
1143
  --govnl-radio-button-checked-focus-background-color: var(--govnl-form-control-focus-background-color);
1088
1144
  --govnl-radio-button-checked-focus-border-color: var(--govnl-form-control-focus-border-color);
1089
1145
  --govnl-radio-button-checked-focus-color: var(--govnl-form-control-focus-color);
1090
1146
  --govnl-radio-button-checked-focus-outline-color: var(--govnl-form-control-focus-outline-color);
1147
+ --govnl-radio-button-checked-focus-dot-color: var(--govnl-form-control-focus-color);
1091
1148
  --govnl-form-field-error-message-icon-color: var(--govnl-form-control-invalid-color);
1092
1149
  --govnl-form-field-error-message-color: var(--govnl-form-control-invalid-color);
1093
1150
  --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.12.1",
3
+ "version": "2.15.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/container.tokens.json CHANGED
@@ -8,7 +8,39 @@
8
8
  "padding-inline": {
9
9
  "$type": "dimension",
10
10
  "$value": "{govnl.dimension.size.200}"
11
+ },
12
+ "gap": {
13
+ "small": {
14
+ "column-gap": {
15
+ "$type": "dimension",
16
+ "$value": "0"
17
+ },
18
+ "row-gap": {
19
+ "$type": "dimension",
20
+ "$value": "{govnl.space.sm}"
21
+ }
22
+ },
23
+ "medium": {
24
+ "column-gap": {
25
+ "$type": "dimension",
26
+ "$value": "0"
27
+ },
28
+ "row-gap": {
29
+ "$type": "dimension",
30
+ "$value": "{govnl.space.md}"
31
+ }
32
+ },
33
+ "large": {
34
+ "column-gap": {
35
+ "$type": "dimension",
36
+ "$value": "0"
37
+ },
38
+ "row-gap": {
39
+ "$type": "dimension",
40
+ "$value": "{govnl.space.lg}"
41
+ }
42
+ }
11
43
  }
12
44
  }
13
45
  }
14
- }
46
+ }
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/section.tokens.json CHANGED
@@ -4,7 +4,39 @@
4
4
  "margin-block-end": {
5
5
  "$type": "dimension",
6
6
  "$value": "{govnl.dimension.size.1000}"
7
+ },
8
+ "gap": {
9
+ "small": {
10
+ "column-gap": {
11
+ "$type": "dimension",
12
+ "$value": "0"
13
+ },
14
+ "row-gap": {
15
+ "$type": "dimension",
16
+ "$value": "{govnl.space.sm}"
17
+ }
18
+ },
19
+ "medium": {
20
+ "column-gap": {
21
+ "$type": "dimension",
22
+ "$value": "0"
23
+ },
24
+ "row-gap": {
25
+ "$type": "dimension",
26
+ "$value": "{govnl.space.md}"
27
+ }
28
+ },
29
+ "large": {
30
+ "column-gap": {
31
+ "$type": "dimension",
32
+ "$value": "0"
33
+ },
34
+ "row-gap": {
35
+ "$type": "dimension",
36
+ "$value": "{govnl.space.lg}"
37
+ }
38
+ }
7
39
  }
8
40
  }
9
41
  }
10
- }
42
+ }