@amsterdam/design-system-tokens 4.0.0 → 4.1.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 (34) hide show
  1. package/AGENTS.md +71 -0
  2. package/CHANGELOG.md +25 -0
  3. package/CONTRIBUTING.md +18 -0
  4. package/README.md +29 -41
  5. package/dist/compact.css +4 -1
  6. package/dist/compact.d.ts +9 -0
  7. package/dist/compact.json +10 -1
  8. package/dist/compact.mjs +5 -0
  9. package/dist/compact.scss +4 -1
  10. package/dist/compact.theme.css +4 -1
  11. package/dist/index.css +110 -31
  12. package/dist/index.d.ts +138 -5
  13. package/dist/index.json +178 -45
  14. package/dist/index.mjs +148 -45
  15. package/dist/index.scss +110 -31
  16. package/dist/index.theme.css +110 -31
  17. package/package.json +6 -5
  18. package/src/brand/ams/typography.tokens.json +2 -2
  19. package/src/common/ams/query-containers.tokens.json +12 -0
  20. package/src/components/ams/calendar.compact.tokens.json +10 -0
  21. package/src/components/ams/calendar.tokens.json +87 -0
  22. package/src/components/ams/date-picker.tokens.json +103 -0
  23. package/src/components/ams/description-list.tokens.json +4 -4
  24. package/src/components/ams/dialog.tokens.json +13 -7
  25. package/src/components/ams/grid.compact.tokens.json +19 -1
  26. package/src/components/ams/grid.tokens.json +10 -4
  27. package/src/components/ams/menu.tokens.json +4 -4
  28. package/src/components/ams/page-footer.tokens.json +2 -2
  29. package/src/components/ams/page-header.tokens.json +2 -2
  30. package/src/components/ams/page.tokens.json +6 -0
  31. package/src/components/ams/pagination.tokens.json +219 -2
  32. package/src/components/ams/progress-list.tokens.json +2 -2
  33. package/src/components/ams/switch.tokens.json +8 -0
  34. package/src/components/ams/table-of-contents.tokens.json +65 -14
package/dist/index.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem); /** Scales from 18px to 20px. */
57
57
  --ams-typography-body-text-font-weight: 400;
58
58
  --ams-typography-body-text-line-height: 1.6;
59
- --ams-typography-body-text-bold-font-weight: 800;
59
+ --ams-typography-body-text-bold-font-weight: 700;
60
60
  --ams-typography-body-text-small-font-size: 1rem; /** Fixed at 16px; does not scale. */
61
61
  --ams-typography-body-text-small-line-height: 1.5;
62
62
  --ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem); /** Scales from 21px to 25px. */
@@ -69,7 +69,7 @@
69
69
  --ams-typography-heading-3-line-height: 1.3;
70
70
  --ams-typography-heading-4-line-height: 1.4;
71
71
  --ams-typography-heading-5-line-height: 1.4;
72
- --ams-typography-heading-font-weight: 800;
72
+ --ams-typography-heading-font-weight: 700;
73
73
  --ams-typography-heading-text-wrap: balance; /** Distributes heading text evenly across lines for a more balanced appearance. */
74
74
  --ams-inputs-border-color: currentColor; /** Uses currentColor so the border adapts to the text colour, including in error states. */
75
75
  --ams-inputs-border-style: solid;
@@ -80,6 +80,7 @@
80
80
  --ams-links-hover-text-underline-offset: 0.09375rem;
81
81
  --ams-links-subtle-text-decoration-line: none;
82
82
  --ams-links-subtle-hover-text-decoration-line: underline;
83
+ --ams-query-containers-inline-size-container-name: ams-query-container-inline-size;
83
84
  --ams-accordion-button-padding-inline: 0;
84
85
  --ams-alert-border-style: solid;
85
86
  --ams-avatar-border-style: solid;
@@ -91,43 +92,33 @@
91
92
  --ams-button-tertiary-background-color: transparent;
92
93
  --ams-button-tertiary-border-color: transparent;
93
94
  --ams-button-tertiary-hover-border-color: currentColor;
95
+ --ams-calendar-inline-size: 20rem;
94
96
  --ams-call-to-action-link-background-color: #00893c;
95
97
  --ams-call-to-action-link-hover-background-color: #10552b;
96
98
  --ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
97
99
  --ams-date-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
98
- --ams-description-list-column-gap: initial;
100
+ --ams-date-picker-day-disabled-text-decoration-line: line-through;
101
+ --ams-date-picker-day-hover-background-color: rgb(0 70 153 / 12.5%);
99
102
  --ams-description-list-row-gap: 0;
100
103
  --ams-description-list-term-text-wrap: balance;
101
104
  --ams-description-list-description-padding-inline-start: 0;
102
- --ams-description-list-narrow-grid-template-columns: initial;
103
- --ams-description-list-medium-grid-template-columns: initial;
104
- --ams-description-list-wide-grid-template-columns: initial;
105
105
  --ams-description-list-vi-medium-narrow-grid-template-columns: 1fr 4fr;
106
106
  --ams-description-list-vi-medium-medium-grid-template-columns: 1fr 2fr;
107
107
  --ams-description-list-vi-medium-wide-grid-template-columns: 1fr 1fr;
108
108
  --ams-dialog-border-radius: initial;
109
109
  --ams-dialog-border-style: solid;
110
110
  --ams-dialog-box-shadow: initial;
111
+ --ams-dialog-container-type: inline-size;
111
112
  --ams-dialog-max-inline-size: 48rem;
112
- --ams-dialog-medium-inline-size: initial;
113
- --ams-dialog-medium-max-block-size: initial;
114
113
  --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
115
- --ams-dialog-header-medium-padding-block: initial;
116
- --ams-dialog-header-medium-padding-inline: initial;
117
114
  --ams-dialog-body-padding-block: 0;
118
- --ams-dialog-body-medium-padding-inline: initial;
119
- --ams-dialog-footer-medium-padding-block: initial;
120
- --ams-dialog-footer-medium-padding-inline: initial;
121
115
  --ams-file-input-border-style: dashed;
122
116
  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
123
117
  --ams-grid-column-count: 4;
124
- --ams-grid-medium-column-count: initial;
125
- --ams-grid-medium-padding-inline: initial;
126
- --ams-grid-wide-column-count: initial;
127
- --ams-grid-wide-padding-inline: initial;
128
118
  --ams-grid-vi-medium-column-count: 8;
129
119
  --ams-grid-vi-wide-column-count: 12;
130
120
  --ams-grid-cell-background-color: initial;
121
+ --ams-grid-cell-container-type: inline-size;
131
122
  --ams-grid-cell-padding-block: initial;
132
123
  --ams-grid-cell-padding-inline: initial;
133
124
  --ams-icon-button-hover-background-color: rgb(0 70 153 / 12.5%);
@@ -142,37 +133,39 @@
142
133
  --ams-logo-min-block-size: 2.5rem;
143
134
  --ams-logo-emblem-color: #ec0000;
144
135
  --ams-logo-title-color: #ec0000;
145
- --ams-menu-wide-max-inline-size: initial;
146
- --ams-menu-wide-padding-block: initial;
147
- --ams-menu-wide-padding-inline: initial;
148
136
  --ams-menu-vi-wide-max-inline-size: 8rem;
149
- --ams-menu-link-wide-gap: initial;
150
137
  --ams-ordered-list-list-style-type: decimal;
151
138
  --ams-ordered-list-item-margin-inline-start: 2.25rem;
152
139
  --ams-ordered-list-item-padding-inline-start: 0.25rem;
153
140
  --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
154
141
  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem;
155
142
  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem;
156
- --ams-page-footer-menu-medium-padding-inline: initial;
157
- --ams-page-footer-menu-wide-padding-inline: initial;
158
143
  --ams-page-footer-spotlight-background-color: #004699;
159
- --ams-page-header-medium-padding-inline: initial;
160
- --ams-page-header-wide-padding-inline: initial;
144
+ --ams-page-container-type: inline-size;
161
145
  --ams-page-max-inline-size: 90rem;
162
146
  --ams-page-with-menu-max-inline-size: 120rem;
147
+ --ams-pagination-gap: 0;
148
+ --ams-pagination-list-gap: 0;
149
+ --ams-pagination-link-background-color: transparent;
150
+ --ams-pagination-link-min-block-size: auto;
151
+ --ams-pagination-link-min-inline-size: auto;
152
+ --ams-pagination-link-padding-block: 0;
153
+ --ams-pagination-link-hover-background-color: transparent;
154
+ --ams-pagination-link-active-background-color: transparent;
155
+ --ams-pagination-link-current-background-color: transparent;
156
+ --ams-pagination-link-current-hover-background-color: transparent;
157
+ --ams-pagination-ellipsis-padding-inline: 0;
163
158
  --ams-paragraph-large-text-wrap: balance;
164
159
  --ams-progress-list-button-padding-block: 0;
165
160
  --ams-progress-list-button-padding-inline: 0;
166
161
  --ams-progress-list-icon-transition-duration: 0.3s;
167
162
  --ams-progress-list-icon-transition-timing-function: ease;
168
- --ams-progress-list-step-medium-gap: initial;
169
163
  --ams-progress-list-step-marker-shape-block-size: 1.5rem;
170
164
  --ams-progress-list-step-marker-shape-border-style: solid;
171
165
  --ams-progress-list-step-marker-shape-outline-style: solid;
172
166
  --ams-progress-list-step-connector-border-inline-style: dashed;
173
167
  --ams-progress-list-step-connector-border-inline-width: 1px;
174
168
  --ams-progress-list-step-completed-connector-border-inline-style: solid;
175
- --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: initial;
176
169
  --ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
177
170
  --ams-progress-list-substeps-step-marker-shape-border-style: solid;
178
171
  --ams-progress-list-substeps-step-marker-shape-outline-style: solid;
@@ -187,6 +180,8 @@
187
180
  --ams-switch-inline-size: 3.5rem;
188
181
  --ams-switch-thumb-block-size: 1.75rem;
189
182
  --ams-switch-thumb-inline-size: 1.75rem;
183
+ --ams-table-of-contents-button-icon-transition-duration: 0.3s;
184
+ --ams-table-of-contents-button-icon-transition-timing-function: ease;
190
185
  --ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
191
186
  --ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
192
187
  --ams-unordered-list-list-style-type: '\2022';
@@ -341,6 +336,17 @@
341
336
  --ams-button-tertiary-color: var(--ams-color-interactive);
342
337
  --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
343
338
  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
339
+ --ams-calendar-font-family: var(--ams-typography-font-family);
340
+ --ams-calendar-font-size: var(--ams-typography-body-text-font-size);
341
+ --ams-calendar-font-weight: var(--ams-typography-body-text-font-weight);
342
+ --ams-calendar-gap: var(--ams-space-s);
343
+ --ams-calendar-line-height: var(--ams-typography-body-text-line-height);
344
+ --ams-calendar-day-outline-offset: var(--ams-focus-outline-offset);
345
+ --ams-calendar-day-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
346
+ --ams-calendar-day-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
347
+ --ams-calendar-day-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
348
+ --ams-calendar-day-link-text-underline-offset: var(--ams-links-text-underline-offset);
349
+ --ams-calendar-day-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
344
350
  --ams-call-to-action-link-color: var(--ams-color-text-inverse);
345
351
  --ams-call-to-action-link-font-family: var(--ams-typography-font-family);
346
352
  --ams-call-to-action-link-font-size: var(--ams-typography-body-text-font-size);
@@ -412,6 +418,15 @@
412
418
  --ams-date-input-line-height: var(--ams-inputs-line-height);
413
419
  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
414
420
  --ams-date-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
421
+ --ams-date-picker-inline-size: var(--ams-calendar-inline-size);
422
+ --ams-date-picker-day-color: var(--ams-color-interactive);
423
+ --ams-date-picker-day-cursor: var(--ams-cursor-interactive);
424
+ --ams-date-picker-day-disabled-color: var(--ams-color-interactive-disabled);
425
+ --ams-date-picker-day-disabled-cursor: var(--ams-cursor-disabled);
426
+ --ams-date-picker-day-hover-color: var(--ams-color-interactive-hover);
427
+ --ams-date-picker-day-selected-background-color: var(--ams-color-interactive);
428
+ --ams-date-picker-day-selected-color: var(--ams-color-interactive-inverse);
429
+ --ams-date-picker-day-selected-hover-background-color: var(--ams-color-interactive-hover);
415
430
  --ams-description-list-color: var(--ams-color-text);
416
431
  --ams-description-list-font-family: var(--ams-typography-font-family);
417
432
  --ams-description-list-font-size: var(--ams-typography-body-text-font-size);
@@ -423,9 +438,13 @@
423
438
  --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
424
439
  --ams-description-list-description-margin-block-end: var(--ams-space-m);
425
440
  --ams-description-list-section-margin-block-end: var(--ams-space-m);
441
+ --ams-description-list-narrow-grid-template-columns: var(--ams-description-list-vi-medium-narrow-grid-template-columns);
442
+ --ams-description-list-medium-grid-template-columns: var(--ams-description-list-vi-medium-medium-grid-template-columns);
443
+ --ams-description-list-wide-grid-template-columns: var(--ams-description-list-vi-medium-wide-grid-template-columns);
426
444
  --ams-description-list-vi-medium-column-gap: var(--ams-space-l);
427
445
  --ams-dialog-background-color: var(--ams-color-background);
428
446
  --ams-dialog-border-width: var(--ams-border-width-m);
447
+ --ams-dialog-container-name: var(--ams-query-containers-inline-size-container-name);
429
448
  --ams-dialog-gap: var(--ams-space-m);
430
449
  --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
431
450
  --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
@@ -498,8 +517,11 @@
498
517
  --ams-grid-row-gap-l: var(--ams-space-l);
499
518
  --ams-grid-row-gap-xl: var(--ams-space-xl);
500
519
  --ams-grid-row-gap-2xl: var(--ams-space-2xl);
520
+ --ams-grid-medium-column-count: var(--ams-grid-vi-medium-column-count);
521
+ --ams-grid-wide-column-count: var(--ams-grid-vi-wide-column-count);
501
522
  --ams-grid-vi-medium-padding-inline: var(--ams-space-xl);
502
523
  --ams-grid-vi-wide-padding-inline: var(--ams-space-2xl);
524
+ --ams-grid-cell-container-name: var(--ams-query-containers-inline-size-container-name);
503
525
  --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
504
526
  --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
505
527
  --ams-heading-2-line-height: var(--ams-typography-heading-2-line-height);
@@ -586,6 +608,7 @@
586
608
  --ams-menu-font-weight: var(--ams-typography-body-text-font-weight);
587
609
  --ams-menu-line-height: var(--ams-typography-body-text-line-height);
588
610
  --ams-menu-padding-block: var(--ams-space-m);
611
+ --ams-menu-wide-max-inline-size: var(--ams-menu-vi-wide-max-inline-size);
589
612
  --ams-menu-vi-wide-padding-inline: var(--ams-space-s);
590
613
  --ams-menu-link-gap: var(--ams-space-s);
591
614
  --ams-menu-link-outline-offset: var(--ams-focus-outline-offset);
@@ -656,18 +679,26 @@
656
679
  --ams-page-header-navigation-column-gap: var(--ams-space-l);
657
680
  --ams-page-header-navigation-row-gap: var(--ams-space-l);
658
681
  --ams-page-background-color: var(--ams-color-background-body);
682
+ --ams-page-container-name: var(--ams-query-containers-inline-size-container-name);
659
683
  --ams-pagination-font-family: var(--ams-typography-font-family);
660
684
  --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
661
685
  --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
662
686
  --ams-pagination-line-height: var(--ams-typography-body-text-line-height);
687
+ --ams-pagination-link-font-weight: var(--ams-typography-body-text-font-weight);
663
688
  --ams-pagination-link-gap: var(--ams-space-xs);
664
689
  --ams-pagination-link-outline-offset: var(--ams-focus-outline-offset);
665
690
  --ams-pagination-link-padding-inline: var(--ams-space-s);
666
691
  --ams-pagination-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
667
692
  --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
668
693
  --ams-pagination-link-text-underline-offset: var(--ams-links-text-underline-offset);
669
- --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
670
694
  --ams-pagination-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
695
+ --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
696
+ --ams-pagination-relative-link-background-color: var(--ams-pagination-link-background-color);
697
+ --ams-pagination-relative-link-padding-block: var(--ams-pagination-link-padding-block);
698
+ --ams-pagination-relative-link-hover-background-color: var(--ams-pagination-link-hover-background-color);
699
+ --ams-pagination-relative-link-active-background-color: var(--ams-pagination-link-active-background-color);
700
+ --ams-pagination-ellipsis-color: var(--ams-color-text);
701
+ --ams-pagination-ellipsis-padding-block: var(--ams-pagination-link-padding-block);
671
702
  --ams-paragraph-color: var(--ams-color-text);
672
703
  --ams-paragraph-font-family: var(--ams-typography-font-family);
673
704
  --ams-paragraph-font-size: var(--ams-typography-body-text-font-size);
@@ -805,6 +836,7 @@
805
836
  --ams-standalone-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
806
837
  --ams-switch-cursor: var(--ams-cursor-interactive);
807
838
  --ams-switch-outline-offset: var(--ams-focus-outline-offset);
839
+ --ams-switch-label-border-width: var(--ams-border-width-m);
808
840
  --ams-switch-thumb-background-color: var(--ams-color-background);
809
841
  --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
810
842
  --ams-switch-thumb-hover-box-shadow: 0rem 0rem 0rem var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
@@ -834,14 +866,18 @@
834
866
  --ams-table-of-contents-font-weight: var(--ams-typography-body-text-font-weight);
835
867
  --ams-table-of-contents-gap: var(--ams-space-s);
836
868
  --ams-table-of-contents-line-height: var(--ams-typography-body-text-line-height);
869
+ --ams-table-of-contents-list-gap: var(--ams-space-s);
870
+ --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-xs);
871
+ --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-m);
872
+ --ams-table-of-contents-item-gap: var(--ams-space-xs);
837
873
  --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
838
874
  --ams-table-of-contents-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
839
875
  --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
840
876
  --ams-table-of-contents-link-text-underline-offset: var(--ams-links-text-underline-offset);
877
+ --ams-table-of-contents-link-current-font-weight: var(--ams-typography-heading-font-weight);
841
878
  --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
842
- --ams-table-of-contents-list-gap: var(--ams-space-s);
843
- --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-s);
844
- --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-l);
879
+ --ams-table-of-contents-button-color: var(--ams-color-interactive);
880
+ --ams-table-of-contents-button-hover-color: var(--ams-color-interactive-hover);
845
881
  --ams-table-color: var(--ams-color-text);
846
882
  --ams-table-font-family: var(--ams-typography-font-family);
847
883
  --ams-table-font-size: var(--ams-typography-body-text-font-size);
@@ -898,6 +934,8 @@
898
934
  --ams-unordered-list-unordered-list-padding-block-start: var(--ams-space-s);
899
935
  --ams-breadcrumb-link-color: var(--ams-links-color);
900
936
  --ams-breadcrumb-link-hover-color: var(--ams-links-hover-color);
937
+ --ams-calendar-day-link-color: var(--ams-links-color);
938
+ --ams-calendar-day-link-hover-color: var(--ams-links-hover-color);
901
939
  --ams-card-link-color: var(--ams-links-color);
902
940
  --ams-card-link-hover-color: var(--ams-links-hover-color);
903
941
  --ams-checkbox-icon-container-block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
@@ -916,9 +954,24 @@
916
954
  --ams-date-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
917
955
  --ams-date-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
918
956
  --ams-date-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
957
+ --ams-date-picker-font-family: var(--ams-calendar-font-family);
958
+ --ams-date-picker-font-size: var(--ams-calendar-font-size);
959
+ --ams-date-picker-font-weight: var(--ams-calendar-font-weight);
960
+ --ams-date-picker-gap: var(--ams-calendar-gap);
961
+ --ams-date-picker-line-height: var(--ams-calendar-line-height);
962
+ --ams-date-picker-day-outline-offset: var(--ams-calendar-day-outline-offset);
963
+ --ams-date-picker-day-current-font-weight: var(--ams-calendar-day-current-font-weight);
964
+ --ams-description-list-column-gap: var(--ams-description-list-vi-medium-column-gap);
919
965
  --ams-description-list-term-font-size: var(--ams-typography-heading-4-font-size);
920
966
  --ams-description-list-term-vi-medium-margin-block-end: var(--ams-description-list-description-margin-block-end);
921
967
  --ams-dialog-border-color: var(--ams-dialog-background-color);
968
+ --ams-dialog-medium-inline-size: var(--ams-dialog-vi-medium-inline-size);
969
+ --ams-dialog-medium-max-block-size: var(--ams-dialog-vi-medium-max-block-size);
970
+ --ams-dialog-header-medium-padding-block: var(--ams-dialog-header-vi-medium-padding-block);
971
+ --ams-dialog-header-medium-padding-inline: var(--ams-dialog-header-vi-medium-padding-inline);
972
+ --ams-dialog-body-medium-padding-inline: var(--ams-dialog-body-vi-medium-padding-inline);
973
+ --ams-dialog-footer-medium-padding-block: var(--ams-dialog-footer-vi-medium-padding-block);
974
+ --ams-dialog-footer-medium-padding-inline: var(--ams-dialog-footer-vi-medium-padding-inline);
922
975
  --ams-field-set-legend-font-size: var(--ams-typography-heading-3-font-size);
923
976
  --ams-file-input-background-color: var(--ams-inputs-background-color);
924
977
  --ams-file-input-border-width: var(--ams-inputs-border-width);
@@ -939,6 +992,8 @@
939
992
  --ams-file-input-file-selector-button-disabled-cursor: var(--ams-button-disabled-cursor);
940
993
  --ams-file-input-file-selector-button-hover-box-shadow: var(--ams-button-secondary-hover-box-shadow);
941
994
  --ams-file-input-file-selector-button-hover-color: var(--ams-button-secondary-hover-color);
995
+ --ams-grid-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
996
+ --ams-grid-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
942
997
  --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
943
998
  --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
944
999
  --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
@@ -960,9 +1015,11 @@
960
1015
  --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
961
1016
  --ams-link-inverse-color: var(--ams-links-inverse-color);
962
1017
  --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
1018
+ --ams-menu-wide-padding-inline: var(--ams-menu-vi-wide-padding-inline);
963
1019
  --ams-menu-vi-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
964
1020
  --ams-menu-link-color: var(--ams-links-inverse-color);
965
1021
  --ams-menu-link-hover-color: var(--ams-links-inverse-hover-color);
1022
+ --ams-menu-link-wide-gap: var(--ams-menu-link-vi-wide-gap);
966
1023
  --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
967
1024
  --ams-page-footer-menu-vi-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
968
1025
  --ams-page-footer-menu-vi-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
@@ -978,6 +1035,14 @@
978
1035
  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline);
979
1036
  --ams-pagination-link-color: var(--ams-links-color);
980
1037
  --ams-pagination-link-hover-color: var(--ams-links-hover-color);
1038
+ --ams-pagination-relative-link-font-weight: var(--ams-pagination-link-font-weight);
1039
+ --ams-pagination-relative-link-gap: var(--ams-pagination-link-gap);
1040
+ --ams-pagination-relative-link-outline-offset: var(--ams-pagination-link-outline-offset);
1041
+ --ams-pagination-relative-link-padding-inline: var(--ams-pagination-link-padding-inline);
1042
+ --ams-pagination-relative-link-text-decoration-line: var(--ams-pagination-link-text-decoration-line);
1043
+ --ams-pagination-relative-link-text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
1044
+ --ams-pagination-relative-link-text-underline-offset: var(--ams-pagination-link-text-underline-offset);
1045
+ --ams-pagination-relative-link-hover-text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
981
1046
  --ams-password-input-background-color: var(--ams-inputs-background-color);
982
1047
  --ams-password-input-border-width: var(--ams-inputs-border-width);
983
1048
  --ams-password-input-color: var(--ams-inputs-color);
@@ -996,6 +1061,8 @@
996
1061
  --ams-progress-list-heading-2-step-marker-block-size: calc(var(--ams-typography-heading-2-font-size) * var(--ams-typography-heading-2-line-height));
997
1062
  --ams-progress-list-heading-3-step-marker-block-size: calc(var(--ams-typography-heading-3-font-size) * var(--ams-typography-heading-3-line-height));
998
1063
  --ams-progress-list-heading-4-step-marker-block-size: calc(var(--ams-typography-heading-4-font-size) * var(--ams-typography-heading-4-line-height));
1064
+ --ams-progress-list-step-medium-gap: var(--ams-progress-list-step-vi-medium-gap);
1065
+ --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end);
999
1066
  --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
1000
1067
  --ams-radio-icon-container-inline-size: var(--ams-radio-font-size);
1001
1068
  --ams-search-field-input-background-color: var(--ams-inputs-background-color);
@@ -1033,6 +1100,7 @@
1033
1100
  --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
1034
1101
  --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
1035
1102
  --ams-table-of-contents-link-color: var(--ams-links-color);
1103
+ --ams-table-of-contents-link-current-color: var(--ams-links-color);
1036
1104
  --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
1037
1105
  --ams-text-area-background-color: var(--ams-inputs-background-color);
1038
1106
  --ams-text-area-border-width: var(--ams-inputs-border-width);
@@ -1078,4 +1146,15 @@
1078
1146
  --ams-time-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
1079
1147
  --ams-time-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
1080
1148
  --ams-time-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
1149
+ --ams-menu-wide-padding-block: var(--ams-menu-vi-wide-padding-block);
1150
+ --ams-page-footer-menu-medium-padding-inline: var(--ams-page-footer-menu-vi-medium-padding-inline);
1151
+ --ams-page-footer-menu-wide-padding-inline: var(--ams-page-footer-menu-vi-wide-padding-inline);
1152
+ --ams-page-header-medium-padding-inline: var(--ams-page-header-vi-medium-padding-inline);
1153
+ --ams-page-header-wide-padding-inline: var(--ams-page-header-vi-wide-padding-inline);
1154
+ --ams-pagination-link-active-color: var(--ams-pagination-link-color);
1155
+ --ams-pagination-link-current-color: var(--ams-pagination-link-color);
1156
+ --ams-pagination-link-current-hover-color: var(--ams-pagination-link-hover-color);
1157
+ --ams-pagination-relative-link-color: var(--ams-pagination-link-color);
1158
+ --ams-pagination-relative-link-hover-color: var(--ams-pagination-link-hover-color);
1159
+ --ams-pagination-relative-link-active-color: var(--ams-pagination-link-active-color);
1081
1160
  }
package/dist/index.d.ts CHANGED
@@ -200,6 +200,11 @@ declare const tokens: {
200
200
  };
201
201
  };
202
202
  };
203
+ "query-containers": {
204
+ "inline-size": {
205
+ "container-name": DesignToken;
206
+ };
207
+ };
203
208
  accordion: {
204
209
  gap: DesignToken;
205
210
  button: {
@@ -430,6 +435,30 @@ declare const tokens: {
430
435
  };
431
436
  };
432
437
  };
438
+ calendar: {
439
+ "font-family": DesignToken;
440
+ "font-size": DesignToken;
441
+ "font-weight": DesignToken;
442
+ gap: DesignToken;
443
+ "inline-size": DesignToken;
444
+ "line-height": DesignToken;
445
+ day: {
446
+ "outline-offset": DesignToken;
447
+ current: {
448
+ "font-weight": DesignToken;
449
+ };
450
+ link: {
451
+ color: DesignToken;
452
+ "text-decoration-line": DesignToken;
453
+ "text-decoration-thickness": DesignToken;
454
+ "text-underline-offset": DesignToken;
455
+ hover: {
456
+ color: DesignToken;
457
+ "text-decoration-line": DesignToken;
458
+ };
459
+ };
460
+ };
461
+ };
433
462
  "call-to-action-link": {
434
463
  "background-color": DesignToken;
435
464
  color: DesignToken;
@@ -611,6 +640,38 @@ declare const tokens: {
611
640
  cursor: DesignToken;
612
641
  };
613
642
  };
643
+ "date-picker": {
644
+ "font-family": DesignToken;
645
+ "font-size": DesignToken;
646
+ "font-weight": DesignToken;
647
+ gap: DesignToken;
648
+ "inline-size": DesignToken;
649
+ "line-height": DesignToken;
650
+ day: {
651
+ color: DesignToken;
652
+ cursor: DesignToken;
653
+ "outline-offset": DesignToken;
654
+ current: {
655
+ "font-weight": DesignToken;
656
+ };
657
+ disabled: {
658
+ color: DesignToken;
659
+ cursor: DesignToken;
660
+ "text-decoration-line": DesignToken;
661
+ };
662
+ hover: {
663
+ "background-color": DesignToken;
664
+ color: DesignToken;
665
+ };
666
+ selected: {
667
+ "background-color": DesignToken;
668
+ color: DesignToken;
669
+ hover: {
670
+ "background-color": DesignToken;
671
+ };
672
+ };
673
+ };
674
+ };
614
675
  "description-list": {
615
676
  color: DesignToken;
616
677
  "column-gap": DesignToken;
@@ -668,6 +729,8 @@ declare const tokens: {
668
729
  "border-style": DesignToken;
669
730
  "border-width": DesignToken;
670
731
  "box-shadow": DesignToken;
732
+ "container-name": DesignToken;
733
+ "container-type": DesignToken;
671
734
  gap: DesignToken;
672
735
  "inline-size": DesignToken;
673
736
  "max-block-size": DesignToken;
@@ -871,6 +934,8 @@ declare const tokens: {
871
934
  };
872
935
  cell: {
873
936
  "background-color": DesignToken;
937
+ "container-name": DesignToken;
938
+ "container-type": DesignToken;
874
939
  "padding-block": DesignToken;
875
940
  "padding-inline": DesignToken;
876
941
  };
@@ -1294,6 +1359,8 @@ declare const tokens: {
1294
1359
  };
1295
1360
  page: {
1296
1361
  "background-color": DesignToken;
1362
+ "container-name": DesignToken;
1363
+ "container-type": DesignToken;
1297
1364
  "max-inline-size": DesignToken;
1298
1365
  "with-menu": {
1299
1366
  "max-inline-size": DesignToken;
@@ -1306,22 +1373,68 @@ declare const tokens: {
1306
1373
  "font-family": DesignToken;
1307
1374
  "font-size": DesignToken;
1308
1375
  "font-weight": DesignToken;
1376
+ gap: DesignToken;
1309
1377
  "line-height": DesignToken;
1378
+ list: {
1379
+ gap: DesignToken;
1380
+ };
1310
1381
  link: {
1382
+ "background-color": DesignToken;
1311
1383
  color: DesignToken;
1384
+ "font-weight": DesignToken;
1312
1385
  gap: DesignToken;
1386
+ "min-block-size": DesignToken;
1387
+ "min-inline-size": DesignToken;
1313
1388
  "outline-offset": DesignToken;
1389
+ "padding-block": DesignToken;
1314
1390
  "padding-inline": DesignToken;
1315
1391
  "text-decoration-line": DesignToken;
1316
1392
  "text-decoration-thickness": DesignToken;
1317
1393
  "text-underline-offset": DesignToken;
1394
+ hover: {
1395
+ "background-color": DesignToken;
1396
+ color: DesignToken;
1397
+ "text-decoration-line": DesignToken;
1398
+ };
1399
+ active: {
1400
+ "background-color": DesignToken;
1401
+ color: DesignToken;
1402
+ };
1318
1403
  current: {
1404
+ "background-color": DesignToken;
1405
+ color: DesignToken;
1319
1406
  "font-weight": DesignToken;
1407
+ hover: {
1408
+ "background-color": DesignToken;
1409
+ color: DesignToken;
1410
+ };
1320
1411
  };
1412
+ };
1413
+ "relative-link": {
1414
+ "background-color": DesignToken;
1415
+ color: DesignToken;
1416
+ "font-weight": DesignToken;
1417
+ gap: DesignToken;
1418
+ "outline-offset": DesignToken;
1419
+ "padding-block": DesignToken;
1420
+ "padding-inline": DesignToken;
1421
+ "text-decoration-line": DesignToken;
1422
+ "text-decoration-thickness": DesignToken;
1423
+ "text-underline-offset": DesignToken;
1321
1424
  hover: {
1425
+ "background-color": DesignToken;
1322
1426
  color: DesignToken;
1323
1427
  "text-decoration-line": DesignToken;
1324
1428
  };
1429
+ active: {
1430
+ "background-color": DesignToken;
1431
+ color: DesignToken;
1432
+ };
1433
+ };
1434
+ ellipsis: {
1435
+ color: DesignToken;
1436
+ "padding-block": DesignToken;
1437
+ "padding-inline": DesignToken;
1325
1438
  };
1326
1439
  };
1327
1440
  paragraph: {
@@ -1763,6 +1876,9 @@ declare const tokens: {
1763
1876
  cursor: DesignToken;
1764
1877
  "outline-offset": DesignToken;
1765
1878
  "inline-size": DesignToken;
1879
+ label: {
1880
+ "border-width": DesignToken;
1881
+ };
1766
1882
  thumb: {
1767
1883
  "background-color": DesignToken;
1768
1884
  "block-size": DesignToken;
@@ -1822,22 +1938,39 @@ declare const tokens: {
1822
1938
  "font-weight": DesignToken;
1823
1939
  gap: DesignToken;
1824
1940
  "line-height": DesignToken;
1941
+ list: {
1942
+ gap: DesignToken;
1943
+ list: {
1944
+ "padding-block-start": DesignToken;
1945
+ "padding-inline-start": DesignToken;
1946
+ };
1947
+ };
1948
+ item: {
1949
+ gap: DesignToken;
1950
+ };
1825
1951
  link: {
1826
1952
  color: DesignToken;
1827
1953
  "outline-offset": DesignToken;
1828
1954
  "text-decoration-line": DesignToken;
1829
1955
  "text-decoration-thickness": DesignToken;
1830
1956
  "text-underline-offset": DesignToken;
1957
+ current: {
1958
+ color: DesignToken;
1959
+ "font-weight": DesignToken;
1960
+ };
1831
1961
  hover: {
1832
1962
  color: DesignToken;
1833
1963
  "text-decoration-line": DesignToken;
1834
1964
  };
1835
1965
  };
1836
- list: {
1837
- gap: DesignToken;
1838
- list: {
1839
- "padding-block-start": DesignToken;
1840
- "padding-inline-start": DesignToken;
1966
+ button: {
1967
+ color: DesignToken;
1968
+ hover: {
1969
+ color: DesignToken;
1970
+ };
1971
+ icon: {
1972
+ "transition-duration": DesignToken;
1973
+ "transition-timing-function": DesignToken;
1841
1974
  };
1842
1975
  };
1843
1976
  };