@amsterdam/design-system-tokens 3.0.0 → 3.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.
- package/CHANGELOG.md +14 -0
- package/dist/index.css +62 -3
- package/dist/index.d.ts +153 -6
- package/dist/index.json +156 -9
- package/dist/index.mjs +88 -5
- package/dist/index.scss +62 -3
- package/dist/index.theme.css +62 -3
- package/package.json +2 -2
- package/src/brand/ams/color.tokens.json +5 -0
- package/src/brand/ams/typography.tokens.json +1 -1
- package/src/components/ams/badge.tokens.json +1 -0
- package/src/components/ams/date-input.deprecated.tokens.json +6 -0
- package/src/components/ams/date-input.tokens.json +1 -6
- package/src/components/ams/progress-list.tokens.json +255 -0
- package/src/components/ams/time-input.deprecated.tokens.json +6 -0
- package/src/components/ams/time-input.tokens.json +1 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.0.0...design-system-tokens-v3.1.0) (2026-01-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **Badge:** Add option to include an icon ([#2385](https://github.com/Amsterdam/design-system/issues/2385)) ([698c776](https://github.com/Amsterdam/design-system/commit/698c7762f9bc0c844598e71c45165f472d03c185))
|
|
12
|
+
* Introduce Progress List component ([#2373](https://github.com/Amsterdam/design-system/issues/2373)) ([7309159](https://github.com/Amsterdam/design-system/commit/730915911eb28dff40137ff15063cf33c21f26fc))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **DateInput, TimeInput:** Prevent focus on picker icon when input is disabled ([#2378](https://github.com/Amsterdam/design-system/issues/2378)) ([e3fff0f](https://github.com/Amsterdam/design-system/commit/e3fff0fcf7fea144663342493a83afd4e73da7e8))
|
|
18
|
+
* Relax hyphenation settings ([#2384](https://github.com/Amsterdam/design-system/issues/2384)) ([c8d3ea5](https://github.com/Amsterdam/design-system/commit/c8d3ea5439f710c85977ad2c05c7614f28c47c59))
|
|
19
|
+
|
|
6
20
|
## [3.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.2.0...design-system-tokens-v3.0.0) (2026-01-09)
|
|
7
21
|
|
|
8
22
|
|
package/dist/index.css
CHANGED
|
@@ -33,6 +33,9 @@
|
|
|
33
33
|
--ams-color-highlight-orange: #ff9100;
|
|
34
34
|
--ams-color-highlight-purple: #a00078;
|
|
35
35
|
--ams-color-highlight-yellow: #ffe600;
|
|
36
|
+
--ams-color-progress-current: #00893c;
|
|
37
|
+
--ams-color-progress-completed: #00893c;
|
|
38
|
+
--ams-color-progress-upcoming: #767676;
|
|
36
39
|
--ams-color-separator: #d1d1d1;
|
|
37
40
|
--ams-color-text: #202020;
|
|
38
41
|
--ams-color-text-inverse: #ffffff;
|
|
@@ -58,7 +61,7 @@
|
|
|
58
61
|
--ams-typography-heading-font-weight: 800;
|
|
59
62
|
--ams-typography-heading-text-wrap: balance;
|
|
60
63
|
--ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
|
|
61
|
-
--ams-typography-hyphenate-limit-chars:
|
|
64
|
+
--ams-typography-hyphenate-limit-chars: auto;
|
|
62
65
|
--ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
|
|
63
66
|
--ams-typography-body-text-font-weight: 400;
|
|
64
67
|
--ams-typography-body-text-line-height: 1.8;
|
|
@@ -93,8 +96,8 @@
|
|
|
93
96
|
--ams-button-tertiary-hover-border-color: currentColor;
|
|
94
97
|
--ams-call-to-action-link-background-color: #00893c;
|
|
95
98
|
--ams-call-to-action-link-hover-background-color: #10552b;
|
|
99
|
+
--ams-date-input-disabled-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='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** This token will be removed in release 6.0.0 */
|
|
96
100
|
--ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
97
|
-
--ams-date-input-disabled-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='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
|
|
98
101
|
--ams-date-input-hover-calender-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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
99
102
|
--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>");
|
|
100
103
|
--ams-date-input-calender-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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
@@ -134,6 +137,18 @@
|
|
|
134
137
|
--ams-page-max-inline-size: 90rem;
|
|
135
138
|
--ams-page-with-menu-max-inline-size: 120rem;
|
|
136
139
|
--ams-paragraph-large-text-wrap: balance;
|
|
140
|
+
--ams-progress-list-step-marker-shape-block-size: 1.5rem;
|
|
141
|
+
--ams-progress-list-step-marker-shape-border-style: solid;
|
|
142
|
+
--ams-progress-list-step-marker-shape-outline-style: solid;
|
|
143
|
+
--ams-progress-list-step-connector-border-inline-style: dashed;
|
|
144
|
+
--ams-progress-list-step-connector-border-inline-width: 1px;
|
|
145
|
+
--ams-progress-list-step-completed-connector-border-inline-style: solid;
|
|
146
|
+
--ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
|
|
147
|
+
--ams-progress-list-substeps-step-marker-shape-border-style: solid;
|
|
148
|
+
--ams-progress-list-substeps-step-marker-shape-outline-style: solid;
|
|
149
|
+
--ams-progress-list-substeps-step-connector-border-inline-style: dashed;
|
|
150
|
+
--ams-progress-list-substeps-step-connector-border-inline-width: 1px;
|
|
151
|
+
--ams-progress-list-substeps-step-completed-connector-border-inline-style: solid;
|
|
137
152
|
--ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
|
|
138
153
|
--ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
|
|
139
154
|
--ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
|
|
@@ -142,8 +157,8 @@
|
|
|
142
157
|
--ams-switch-inline-size: 3.5rem;
|
|
143
158
|
--ams-switch-thumb-block-size: 1.75rem;
|
|
144
159
|
--ams-switch-thumb-inline-size: 1.75rem;
|
|
145
|
-
--ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
146
160
|
--ams-time-input-disabled-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='%23767676'><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>");
|
|
161
|
+
--ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
147
162
|
--ams-time-input-hover-calender-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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
148
163
|
--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>");
|
|
149
164
|
--ams-time-input-calender-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>"); /** Use the token with ‘calendar’ spelled correctly instead */
|
|
@@ -242,6 +257,7 @@
|
|
|
242
257
|
--ams-badge-font-family: var(--ams-typography-font-family);
|
|
243
258
|
--ams-badge-font-size: var(--ams-typography-body-text-font-size);
|
|
244
259
|
--ams-badge-font-weight: var(--ams-typography-body-text-bold-font-weight);
|
|
260
|
+
--ams-badge-gap: var(--ams-space-xs);
|
|
245
261
|
--ams-badge-line-height: var(--ams-typography-body-text-line-height);
|
|
246
262
|
--ams-badge-padding-inline: var(--ams-space-xs);
|
|
247
263
|
--ams-badge-azure-background-color: var(--ams-color-feedback-info);
|
|
@@ -652,6 +668,46 @@
|
|
|
652
668
|
--ams-password-input-border-style: var(--ams-inputs-border-style);
|
|
653
669
|
--ams-password-input-line-height: var(--ams-inputs-line-height);
|
|
654
670
|
--ams-password-input-disabled-cursor: var(--ams-cursor-disabled);
|
|
671
|
+
--ams-progress-list-heading-2-step-marker-margin-block-start: calc((var(--ams-typography-heading-2-line-height) * var(--ams-typography-heading-2-font-size)) / 2);
|
|
672
|
+
--ams-progress-list-heading-3-step-marker-margin-block-start: calc((var(--ams-typography-heading-3-line-height) * var(--ams-typography-heading-3-font-size)) / 2);
|
|
673
|
+
--ams-progress-list-heading-4-step-marker-margin-block-start: calc((var(--ams-typography-heading-4-line-height) * var(--ams-typography-heading-4-font-size)) / 2);
|
|
674
|
+
--ams-progress-list-step-gap: var(--ams-space-m);
|
|
675
|
+
--ams-progress-list-step-medium-gap: var(--ams-space-l);
|
|
676
|
+
--ams-progress-list-step-marker-shape-background-color: var(--ams-color-background);
|
|
677
|
+
--ams-progress-list-step-marker-shape-border-color: var(--ams-color-progress-upcoming);
|
|
678
|
+
--ams-progress-list-step-marker-shape-border-width: var(--ams-border-width-m);
|
|
679
|
+
--ams-progress-list-step-marker-shape-outline-color: var(--ams-color-background);
|
|
680
|
+
--ams-progress-list-step-marker-shape-outline-width: var(--ams-border-width-m);
|
|
681
|
+
--ams-progress-list-step-connector-border-inline-color: var(--ams-color-progress-upcoming);
|
|
682
|
+
--ams-progress-list-step-heading-margin-block-end: var(--ams-space-s);
|
|
683
|
+
--ams-progress-list-step-content-margin-block-end: var(--ams-space-l);
|
|
684
|
+
--ams-progress-list-step-completed-marker-shape-background-color: var(--ams-color-progress-completed);
|
|
685
|
+
--ams-progress-list-step-completed-marker-shape-border-color: var(--ams-color-progress-completed);
|
|
686
|
+
--ams-progress-list-step-completed-connector-border-inline-color: var(--ams-color-progress-completed);
|
|
687
|
+
--ams-progress-list-step-current-marker-shape-background-color: var(--ams-color-progress-current);
|
|
688
|
+
--ams-progress-list-step-current-marker-shape-border-color: var(--ams-color-progress-current);
|
|
689
|
+
--ams-progress-list-step-current-connector-border-inline-color: var(--ams-color-progress-current);
|
|
690
|
+
--ams-progress-list-substeps-padding-block-start: var(--ams-space-m);
|
|
691
|
+
--ams-progress-list-substeps-step-indicator-margin-inline-end: var(--ams-space-m);
|
|
692
|
+
--ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-space-l);
|
|
693
|
+
--ams-progress-list-substeps-step-marker-block-size: calc(var(--ams-typography-body-text-font-size) * var(--ams-typography-body-text-line-height));
|
|
694
|
+
--ams-progress-list-substeps-step-marker-inline-size: var(--ams-progress-list-step-marker-shape-block-size);
|
|
695
|
+
--ams-progress-list-substeps-step-marker-shape-background-color: var(--ams-color-background);
|
|
696
|
+
--ams-progress-list-substeps-step-marker-shape-border-color: var(--ams-color-progress-upcoming);
|
|
697
|
+
--ams-progress-list-substeps-step-marker-shape-border-width: var(--ams-border-width-m);
|
|
698
|
+
--ams-progress-list-substeps-step-marker-shape-outline-color: var(--ams-color-background);
|
|
699
|
+
--ams-progress-list-substeps-step-marker-shape-outline-width: var(--ams-border-width-m);
|
|
700
|
+
--ams-progress-list-substeps-step-connector-background-color: var(--ams-color-background);
|
|
701
|
+
--ams-progress-list-substeps-step-connector-border-inline-color: var(--ams-color-progress-upcoming);
|
|
702
|
+
--ams-progress-list-substeps-step-connector-margin-block-start: calc(var(--ams-typography-body-text-font-size) * var(--ams-typography-body-text-line-height) / 2);
|
|
703
|
+
--ams-progress-list-substeps-step-connector-last-child-border-inline-color: var(--ams-color-background);
|
|
704
|
+
--ams-progress-list-substeps-step-content-margin-block-end: var(--ams-space-m);
|
|
705
|
+
--ams-progress-list-substeps-step-completed-marker-shape-background-color: var(--ams-color-progress-completed);
|
|
706
|
+
--ams-progress-list-substeps-step-completed-marker-shape-border-color: var(--ams-color-progress-completed);
|
|
707
|
+
--ams-progress-list-substeps-step-completed-connector-border-inline-color: var(--ams-color-progress-completed);
|
|
708
|
+
--ams-progress-list-substeps-step-current-marker-shape-background-color: var(--ams-color-progress-current);
|
|
709
|
+
--ams-progress-list-substeps-step-current-marker-shape-border-color: var(--ams-color-progress-current);
|
|
710
|
+
--ams-progress-list-substeps-last-child-content-margin-block-end: var(--ams-space-l);
|
|
655
711
|
--ams-radio-color: var(--ams-color-text);
|
|
656
712
|
--ams-radio-cursor: var(--ams-cursor-interactive);
|
|
657
713
|
--ams-radio-font-family: var(--ams-typography-font-family);
|
|
@@ -911,6 +967,9 @@
|
|
|
911
967
|
--ams-password-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
|
|
912
968
|
--ams-password-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
|
|
913
969
|
--ams-password-input-placeholder-color: var(--ams-inputs-placeholder-color);
|
|
970
|
+
--ams-progress-list-heading-2-step-marker-block-size: calc(var(--ams-typography-heading-2-font-size) * var(--ams-typography-heading-2-line-height));
|
|
971
|
+
--ams-progress-list-heading-3-step-marker-block-size: calc(var(--ams-typography-heading-3-font-size) * var(--ams-typography-heading-3-line-height));
|
|
972
|
+
--ams-progress-list-heading-4-step-marker-block-size: calc(var(--ams-typography-heading-4-font-size) * var(--ams-typography-heading-4-line-height));
|
|
914
973
|
--ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
|
|
915
974
|
--ams-radio-icon-container-inline-size: var(--ams-radio-font-size);
|
|
916
975
|
--ams-search-field-input-background-color: var(--ams-inputs-background-color);
|
package/dist/index.d.ts
CHANGED
|
@@ -61,6 +61,11 @@ declare const tokens: {
|
|
|
61
61
|
purple: DesignToken;
|
|
62
62
|
yellow: DesignToken;
|
|
63
63
|
};
|
|
64
|
+
progress: {
|
|
65
|
+
current: DesignToken;
|
|
66
|
+
completed: DesignToken;
|
|
67
|
+
upcoming: DesignToken;
|
|
68
|
+
};
|
|
64
69
|
separator: DesignToken;
|
|
65
70
|
text: {
|
|
66
71
|
default: DesignToken;
|
|
@@ -310,6 +315,7 @@ declare const tokens: {
|
|
|
310
315
|
"font-family": DesignToken;
|
|
311
316
|
"font-size": DesignToken;
|
|
312
317
|
"font-weight": DesignToken;
|
|
318
|
+
gap: DesignToken;
|
|
313
319
|
"line-height": DesignToken;
|
|
314
320
|
"padding-inline": DesignToken;
|
|
315
321
|
azure: {
|
|
@@ -596,14 +602,14 @@ declare const tokens: {
|
|
|
596
602
|
};
|
|
597
603
|
"date-input": {
|
|
598
604
|
disabled: {
|
|
605
|
+
"calendar-picker-indicator": {
|
|
606
|
+
"background-image": DesignToken;
|
|
607
|
+
};
|
|
599
608
|
"calender-picker-indicator": {
|
|
600
609
|
"background-image": DesignToken;
|
|
601
610
|
};
|
|
602
611
|
color: DesignToken;
|
|
603
612
|
cursor: DesignToken;
|
|
604
|
-
"calendar-picker-indicator": {
|
|
605
|
-
"background-image": DesignToken;
|
|
606
|
-
};
|
|
607
613
|
};
|
|
608
614
|
hover: {
|
|
609
615
|
"calender-picker-indicator": {
|
|
@@ -1354,6 +1360,147 @@ declare const tokens: {
|
|
|
1354
1360
|
color: DesignToken;
|
|
1355
1361
|
};
|
|
1356
1362
|
};
|
|
1363
|
+
"progress-list": {
|
|
1364
|
+
"heading-2": {
|
|
1365
|
+
step: {
|
|
1366
|
+
marker: {
|
|
1367
|
+
"block-size": DesignToken;
|
|
1368
|
+
"margin-block-start": DesignToken;
|
|
1369
|
+
};
|
|
1370
|
+
};
|
|
1371
|
+
};
|
|
1372
|
+
"heading-3": {
|
|
1373
|
+
step: {
|
|
1374
|
+
marker: {
|
|
1375
|
+
"block-size": DesignToken;
|
|
1376
|
+
"margin-block-start": DesignToken;
|
|
1377
|
+
};
|
|
1378
|
+
};
|
|
1379
|
+
};
|
|
1380
|
+
"heading-4": {
|
|
1381
|
+
step: {
|
|
1382
|
+
marker: {
|
|
1383
|
+
"block-size": DesignToken;
|
|
1384
|
+
"margin-block-start": DesignToken;
|
|
1385
|
+
};
|
|
1386
|
+
};
|
|
1387
|
+
};
|
|
1388
|
+
step: {
|
|
1389
|
+
gap: DesignToken;
|
|
1390
|
+
medium: {
|
|
1391
|
+
gap: DesignToken;
|
|
1392
|
+
};
|
|
1393
|
+
marker: {
|
|
1394
|
+
shape: {
|
|
1395
|
+
"block-size": DesignToken;
|
|
1396
|
+
"background-color": DesignToken;
|
|
1397
|
+
"border-color": DesignToken;
|
|
1398
|
+
"border-style": DesignToken;
|
|
1399
|
+
"border-width": DesignToken;
|
|
1400
|
+
"outline-color": DesignToken;
|
|
1401
|
+
"outline-style": DesignToken;
|
|
1402
|
+
"outline-width": DesignToken;
|
|
1403
|
+
};
|
|
1404
|
+
};
|
|
1405
|
+
connector: {
|
|
1406
|
+
"border-inline-color": DesignToken;
|
|
1407
|
+
"border-inline-style": DesignToken;
|
|
1408
|
+
"border-inline-width": DesignToken;
|
|
1409
|
+
};
|
|
1410
|
+
heading: {
|
|
1411
|
+
"margin-block-end": DesignToken;
|
|
1412
|
+
};
|
|
1413
|
+
content: {
|
|
1414
|
+
"margin-block-end": DesignToken;
|
|
1415
|
+
};
|
|
1416
|
+
completed: {
|
|
1417
|
+
marker: {
|
|
1418
|
+
shape: {
|
|
1419
|
+
"background-color": DesignToken;
|
|
1420
|
+
"border-color": DesignToken;
|
|
1421
|
+
};
|
|
1422
|
+
};
|
|
1423
|
+
connector: {
|
|
1424
|
+
"border-inline-color": DesignToken;
|
|
1425
|
+
"border-inline-style": DesignToken;
|
|
1426
|
+
};
|
|
1427
|
+
};
|
|
1428
|
+
current: {
|
|
1429
|
+
marker: {
|
|
1430
|
+
shape: {
|
|
1431
|
+
"background-color": DesignToken;
|
|
1432
|
+
"border-color": DesignToken;
|
|
1433
|
+
};
|
|
1434
|
+
};
|
|
1435
|
+
connector: {
|
|
1436
|
+
"border-inline-color": DesignToken;
|
|
1437
|
+
};
|
|
1438
|
+
};
|
|
1439
|
+
};
|
|
1440
|
+
substeps: {
|
|
1441
|
+
"padding-block-start": DesignToken;
|
|
1442
|
+
step: {
|
|
1443
|
+
indicator: {
|
|
1444
|
+
"margin-inline-end": DesignToken;
|
|
1445
|
+
medium: {
|
|
1446
|
+
"margin-inline-end": DesignToken;
|
|
1447
|
+
};
|
|
1448
|
+
};
|
|
1449
|
+
marker: {
|
|
1450
|
+
"block-size": DesignToken;
|
|
1451
|
+
"inline-size": DesignToken;
|
|
1452
|
+
shape: {
|
|
1453
|
+
"block-size": DesignToken;
|
|
1454
|
+
"background-color": DesignToken;
|
|
1455
|
+
"border-color": DesignToken;
|
|
1456
|
+
"border-style": DesignToken;
|
|
1457
|
+
"border-width": DesignToken;
|
|
1458
|
+
"outline-color": DesignToken;
|
|
1459
|
+
"outline-style": DesignToken;
|
|
1460
|
+
"outline-width": DesignToken;
|
|
1461
|
+
};
|
|
1462
|
+
};
|
|
1463
|
+
connector: {
|
|
1464
|
+
"background-color": DesignToken;
|
|
1465
|
+
"border-inline-color": DesignToken;
|
|
1466
|
+
"border-inline-style": DesignToken;
|
|
1467
|
+
"border-inline-width": DesignToken;
|
|
1468
|
+
"margin-block-start": DesignToken;
|
|
1469
|
+
"last-child": {
|
|
1470
|
+
"border-inline-color": DesignToken;
|
|
1471
|
+
};
|
|
1472
|
+
};
|
|
1473
|
+
content: {
|
|
1474
|
+
"margin-block-end": DesignToken;
|
|
1475
|
+
};
|
|
1476
|
+
completed: {
|
|
1477
|
+
marker: {
|
|
1478
|
+
shape: {
|
|
1479
|
+
"background-color": DesignToken;
|
|
1480
|
+
"border-color": DesignToken;
|
|
1481
|
+
};
|
|
1482
|
+
};
|
|
1483
|
+
connector: {
|
|
1484
|
+
"border-inline-color": DesignToken;
|
|
1485
|
+
"border-inline-style": DesignToken;
|
|
1486
|
+
};
|
|
1487
|
+
};
|
|
1488
|
+
current: {
|
|
1489
|
+
marker: {
|
|
1490
|
+
shape: {
|
|
1491
|
+
"background-color": DesignToken;
|
|
1492
|
+
"border-color": DesignToken;
|
|
1493
|
+
};
|
|
1494
|
+
};
|
|
1495
|
+
};
|
|
1496
|
+
};
|
|
1497
|
+
"last-child": {
|
|
1498
|
+
content: {
|
|
1499
|
+
"margin-block-end": DesignToken;
|
|
1500
|
+
};
|
|
1501
|
+
};
|
|
1502
|
+
};
|
|
1503
|
+
};
|
|
1357
1504
|
radio: {
|
|
1358
1505
|
color: DesignToken;
|
|
1359
1506
|
cursor: DesignToken;
|
|
@@ -1749,14 +1896,14 @@ declare const tokens: {
|
|
|
1749
1896
|
};
|
|
1750
1897
|
"time-input": {
|
|
1751
1898
|
disabled: {
|
|
1899
|
+
"calendar-picker-indicator": {
|
|
1900
|
+
"background-image": DesignToken;
|
|
1901
|
+
};
|
|
1752
1902
|
"calender-picker-indicator": {
|
|
1753
1903
|
"background-image": DesignToken;
|
|
1754
1904
|
};
|
|
1755
1905
|
color: DesignToken;
|
|
1756
1906
|
cursor: DesignToken;
|
|
1757
|
-
"calendar-picker-indicator": {
|
|
1758
|
-
"background-image": DesignToken;
|
|
1759
|
-
};
|
|
1760
1907
|
};
|
|
1761
1908
|
hover: {
|
|
1762
1909
|
"calender-picker-indicator": {
|
package/dist/index.json
CHANGED
|
@@ -45,6 +45,11 @@
|
|
|
45
45
|
"purple": "#a00078",
|
|
46
46
|
"yellow": "#ffe600"
|
|
47
47
|
},
|
|
48
|
+
"progress": {
|
|
49
|
+
"current": "#00893c",
|
|
50
|
+
"completed": "#00893c",
|
|
51
|
+
"upcoming": "#767676"
|
|
52
|
+
},
|
|
48
53
|
"separator": "#d1d1d1",
|
|
49
54
|
"text": {
|
|
50
55
|
"default": "#202020",
|
|
@@ -101,7 +106,7 @@
|
|
|
101
106
|
"text-wrap": "balance"
|
|
102
107
|
},
|
|
103
108
|
"font-family": "'Amsterdam Sans', Arial, sans-serif",
|
|
104
|
-
"hyphenate-limit-chars": "
|
|
109
|
+
"hyphenate-limit-chars": "auto",
|
|
105
110
|
"body-text": {
|
|
106
111
|
"font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
|
|
107
112
|
"font-weight": "400",
|
|
@@ -294,6 +299,7 @@
|
|
|
294
299
|
"font-family": "'Amsterdam Sans', Arial, sans-serif",
|
|
295
300
|
"font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
|
|
296
301
|
"font-weight": "800",
|
|
302
|
+
"gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
|
|
297
303
|
"line-height": "1.8",
|
|
298
304
|
"padding-inline": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
|
|
299
305
|
"azure": {
|
|
@@ -580,14 +586,14 @@
|
|
|
580
586
|
},
|
|
581
587
|
"date-input": {
|
|
582
588
|
"disabled": {
|
|
589
|
+
"calendar-picker-indicator": {
|
|
590
|
+
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
|
|
591
|
+
},
|
|
583
592
|
"calender-picker-indicator": {
|
|
584
593
|
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
|
|
585
594
|
},
|
|
586
595
|
"color": "#767676",
|
|
587
|
-
"cursor": "not-allowed"
|
|
588
|
-
"calendar-picker-indicator": {
|
|
589
|
-
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
|
|
590
|
-
}
|
|
596
|
+
"cursor": "not-allowed"
|
|
591
597
|
},
|
|
592
598
|
"hover": {
|
|
593
599
|
"calender-picker-indicator": {
|
|
@@ -1338,6 +1344,147 @@
|
|
|
1338
1344
|
"color": "#767676"
|
|
1339
1345
|
}
|
|
1340
1346
|
},
|
|
1347
|
+
"progress-list": {
|
|
1348
|
+
"heading-2": {
|
|
1349
|
+
"step": {
|
|
1350
|
+
"marker": {
|
|
1351
|
+
"block-size": "calc(clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) * 1.3)",
|
|
1352
|
+
"margin-block-start": "calc((1.3 * clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)) / 2)"
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
},
|
|
1356
|
+
"heading-3": {
|
|
1357
|
+
"step": {
|
|
1358
|
+
"marker": {
|
|
1359
|
+
"block-size": "calc(clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem) * 1.3)",
|
|
1360
|
+
"margin-block-start": "calc((1.3 * clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)) / 2)"
|
|
1361
|
+
}
|
|
1362
|
+
}
|
|
1363
|
+
},
|
|
1364
|
+
"heading-4": {
|
|
1365
|
+
"step": {
|
|
1366
|
+
"marker": {
|
|
1367
|
+
"block-size": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.4)",
|
|
1368
|
+
"margin-block-start": "calc((1.4 * clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)) / 2)"
|
|
1369
|
+
}
|
|
1370
|
+
}
|
|
1371
|
+
},
|
|
1372
|
+
"step": {
|
|
1373
|
+
"gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
|
|
1374
|
+
"medium": {
|
|
1375
|
+
"gap": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
|
|
1376
|
+
},
|
|
1377
|
+
"marker": {
|
|
1378
|
+
"shape": {
|
|
1379
|
+
"block-size": "1.5rem",
|
|
1380
|
+
"background-color": "#ffffff",
|
|
1381
|
+
"border-color": "#767676",
|
|
1382
|
+
"border-style": "solid",
|
|
1383
|
+
"border-width": "0.125rem",
|
|
1384
|
+
"outline-color": "#ffffff",
|
|
1385
|
+
"outline-style": "solid",
|
|
1386
|
+
"outline-width": "0.125rem"
|
|
1387
|
+
}
|
|
1388
|
+
},
|
|
1389
|
+
"connector": {
|
|
1390
|
+
"border-inline-color": "#767676",
|
|
1391
|
+
"border-inline-style": "dashed",
|
|
1392
|
+
"border-inline-width": "1px"
|
|
1393
|
+
},
|
|
1394
|
+
"heading": {
|
|
1395
|
+
"margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
|
|
1396
|
+
},
|
|
1397
|
+
"content": {
|
|
1398
|
+
"margin-block-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
|
|
1399
|
+
},
|
|
1400
|
+
"completed": {
|
|
1401
|
+
"marker": {
|
|
1402
|
+
"shape": {
|
|
1403
|
+
"background-color": "#00893c",
|
|
1404
|
+
"border-color": "#00893c"
|
|
1405
|
+
}
|
|
1406
|
+
},
|
|
1407
|
+
"connector": {
|
|
1408
|
+
"border-inline-color": "#00893c",
|
|
1409
|
+
"border-inline-style": "solid"
|
|
1410
|
+
}
|
|
1411
|
+
},
|
|
1412
|
+
"current": {
|
|
1413
|
+
"marker": {
|
|
1414
|
+
"shape": {
|
|
1415
|
+
"background-color": "#00893c",
|
|
1416
|
+
"border-color": "#00893c"
|
|
1417
|
+
}
|
|
1418
|
+
},
|
|
1419
|
+
"connector": {
|
|
1420
|
+
"border-inline-color": "#00893c"
|
|
1421
|
+
}
|
|
1422
|
+
}
|
|
1423
|
+
},
|
|
1424
|
+
"substeps": {
|
|
1425
|
+
"padding-block-start": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
|
|
1426
|
+
"step": {
|
|
1427
|
+
"indicator": {
|
|
1428
|
+
"margin-inline-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
|
|
1429
|
+
"medium": {
|
|
1430
|
+
"margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
|
|
1431
|
+
}
|
|
1432
|
+
},
|
|
1433
|
+
"marker": {
|
|
1434
|
+
"block-size": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8)",
|
|
1435
|
+
"inline-size": "1.5rem",
|
|
1436
|
+
"shape": {
|
|
1437
|
+
"block-size": "0.75rem",
|
|
1438
|
+
"background-color": "#ffffff",
|
|
1439
|
+
"border-color": "#767676",
|
|
1440
|
+
"border-style": "solid",
|
|
1441
|
+
"border-width": "0.125rem",
|
|
1442
|
+
"outline-color": "#ffffff",
|
|
1443
|
+
"outline-style": "solid",
|
|
1444
|
+
"outline-width": "0.125rem"
|
|
1445
|
+
}
|
|
1446
|
+
},
|
|
1447
|
+
"connector": {
|
|
1448
|
+
"background-color": "#ffffff",
|
|
1449
|
+
"border-inline-color": "#767676",
|
|
1450
|
+
"border-inline-style": "dashed",
|
|
1451
|
+
"border-inline-width": "1px",
|
|
1452
|
+
"margin-block-start": "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8 / 2)",
|
|
1453
|
+
"last-child": {
|
|
1454
|
+
"border-inline-color": "#ffffff"
|
|
1455
|
+
}
|
|
1456
|
+
},
|
|
1457
|
+
"content": {
|
|
1458
|
+
"margin-block-end": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
|
|
1459
|
+
},
|
|
1460
|
+
"completed": {
|
|
1461
|
+
"marker": {
|
|
1462
|
+
"shape": {
|
|
1463
|
+
"background-color": "#00893c",
|
|
1464
|
+
"border-color": "#00893c"
|
|
1465
|
+
}
|
|
1466
|
+
},
|
|
1467
|
+
"connector": {
|
|
1468
|
+
"border-inline-color": "#00893c",
|
|
1469
|
+
"border-inline-style": "solid"
|
|
1470
|
+
}
|
|
1471
|
+
},
|
|
1472
|
+
"current": {
|
|
1473
|
+
"marker": {
|
|
1474
|
+
"shape": {
|
|
1475
|
+
"background-color": "#00893c",
|
|
1476
|
+
"border-color": "#00893c"
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
}
|
|
1480
|
+
},
|
|
1481
|
+
"last-child": {
|
|
1482
|
+
"content": {
|
|
1483
|
+
"margin-block-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
|
|
1484
|
+
}
|
|
1485
|
+
}
|
|
1486
|
+
}
|
|
1487
|
+
},
|
|
1341
1488
|
"radio": {
|
|
1342
1489
|
"color": "#202020",
|
|
1343
1490
|
"cursor": "pointer",
|
|
@@ -1733,14 +1880,14 @@
|
|
|
1733
1880
|
},
|
|
1734
1881
|
"time-input": {
|
|
1735
1882
|
"disabled": {
|
|
1883
|
+
"calendar-picker-indicator": {
|
|
1884
|
+
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")"
|
|
1885
|
+
},
|
|
1736
1886
|
"calender-picker-indicator": {
|
|
1737
1887
|
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")"
|
|
1738
1888
|
},
|
|
1739
1889
|
"color": "#767676",
|
|
1740
|
-
"cursor": "not-allowed"
|
|
1741
|
-
"calendar-picker-indicator": {
|
|
1742
|
-
"background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")"
|
|
1743
|
-
}
|
|
1890
|
+
"cursor": "not-allowed"
|
|
1744
1891
|
},
|
|
1745
1892
|
"hover": {
|
|
1746
1893
|
"calender-picker-indicator": {
|