@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/dist/index.mjs
CHANGED
|
@@ -32,6 +32,9 @@ export const amsColorHighlightMagenta = "#e50082";
|
|
|
32
32
|
export const amsColorHighlightOrange = "#ff9100";
|
|
33
33
|
export const amsColorHighlightPurple = "#a00078";
|
|
34
34
|
export const amsColorHighlightYellow = "#ffe600";
|
|
35
|
+
export const amsColorProgressCurrent = "#00893c";
|
|
36
|
+
export const amsColorProgressCompleted = "#00893c";
|
|
37
|
+
export const amsColorProgressUpcoming = "#767676";
|
|
35
38
|
export const amsColorSeparator = "#d1d1d1";
|
|
36
39
|
export const amsColorText = "#202020";
|
|
37
40
|
export const amsColorTextInverse = "#ffffff";
|
|
@@ -67,7 +70,7 @@ export const amsTypographyHeading_6LineHeight = "1.4"; // Use Heading size 5 ins
|
|
|
67
70
|
export const amsTypographyHeadingFontWeight = "800";
|
|
68
71
|
export const amsTypographyHeadingTextWrap = "balance";
|
|
69
72
|
export const amsTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
70
|
-
export const amsTypographyHyphenateLimitChars = "
|
|
73
|
+
export const amsTypographyHyphenateLimitChars = "auto";
|
|
71
74
|
export const amsTypographyBodyTextFontSize =
|
|
72
75
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
73
76
|
export const amsTypographyBodyTextFontWeight = "400";
|
|
@@ -194,6 +197,7 @@ export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
|
194
197
|
export const amsBadgeFontSize =
|
|
195
198
|
"clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
|
|
196
199
|
export const amsBadgeFontWeight = "800";
|
|
200
|
+
export const amsBadgeGap = "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
197
201
|
export const amsBadgeLineHeight = "1.8";
|
|
198
202
|
export const amsBadgePaddingInline =
|
|
199
203
|
"clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
|
|
@@ -368,12 +372,12 @@ export const amsColumnGapMedium = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
|
368
372
|
export const amsColumnGapLarge = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
369
373
|
export const amsColumnGapXLarge =
|
|
370
374
|
"clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
|
|
375
|
+
export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
|
|
376
|
+
"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
|
|
371
377
|
export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
372
378
|
"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
|
|
373
379
|
export const amsDateInputDisabledColor = "#767676";
|
|
374
380
|
export const amsDateInputDisabledCursor = "not-allowed";
|
|
375
|
-
export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
|
|
376
|
-
"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>\")";
|
|
377
381
|
export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
378
382
|
"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
|
|
379
383
|
export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
|
|
@@ -896,6 +900,85 @@ export const amsPasswordInputInvalidHoverBorderColor = "#b70000";
|
|
|
896
900
|
export const amsPasswordInputInvalidHoverBoxShadow =
|
|
897
901
|
"inset 0 0 0 0.0625rem #b70000";
|
|
898
902
|
export const amsPasswordInputPlaceholderColor = "#767676";
|
|
903
|
+
export const amsProgressListHeading_2StepMarkerBlockSize =
|
|
904
|
+
"calc(clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) * 1.3)";
|
|
905
|
+
export const amsProgressListHeading_2StepMarkerMarginBlockStart =
|
|
906
|
+
"calc((1.3 * clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)) / 2)";
|
|
907
|
+
export const amsProgressListHeading_3StepMarkerBlockSize =
|
|
908
|
+
"calc(clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem) * 1.3)";
|
|
909
|
+
export const amsProgressListHeading_3StepMarkerMarginBlockStart =
|
|
910
|
+
"calc((1.3 * clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)) / 2)";
|
|
911
|
+
export const amsProgressListHeading_4StepMarkerBlockSize =
|
|
912
|
+
"calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.4)";
|
|
913
|
+
export const amsProgressListHeading_4StepMarkerMarginBlockStart =
|
|
914
|
+
"calc((1.4 * clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)) / 2)";
|
|
915
|
+
export const amsProgressListStepGap =
|
|
916
|
+
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
917
|
+
export const amsProgressListStepMediumGap =
|
|
918
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
919
|
+
export const amsProgressListStepMarkerShapeBlockSize = "1.5rem";
|
|
920
|
+
export const amsProgressListStepMarkerShapeBackgroundColor = "#ffffff";
|
|
921
|
+
export const amsProgressListStepMarkerShapeBorderColor = "#767676";
|
|
922
|
+
export const amsProgressListStepMarkerShapeBorderStyle = "solid";
|
|
923
|
+
export const amsProgressListStepMarkerShapeBorderWidth = "0.125rem";
|
|
924
|
+
export const amsProgressListStepMarkerShapeOutlineColor = "#ffffff";
|
|
925
|
+
export const amsProgressListStepMarkerShapeOutlineStyle = "solid";
|
|
926
|
+
export const amsProgressListStepMarkerShapeOutlineWidth = "0.125rem";
|
|
927
|
+
export const amsProgressListStepConnectorBorderInlineColor = "#767676";
|
|
928
|
+
export const amsProgressListStepConnectorBorderInlineStyle = "dashed";
|
|
929
|
+
export const amsProgressListStepConnectorBorderInlineWidth = "1px";
|
|
930
|
+
export const amsProgressListStepHeadingMarginBlockEnd =
|
|
931
|
+
"clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
|
|
932
|
+
export const amsProgressListStepContentMarginBlockEnd =
|
|
933
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
934
|
+
export const amsProgressListStepCompletedMarkerShapeBackgroundColor = "#00893c";
|
|
935
|
+
export const amsProgressListStepCompletedMarkerShapeBorderColor = "#00893c";
|
|
936
|
+
export const amsProgressListStepCompletedConnectorBorderInlineColor = "#00893c";
|
|
937
|
+
export const amsProgressListStepCompletedConnectorBorderInlineStyle = "solid";
|
|
938
|
+
export const amsProgressListStepCurrentMarkerShapeBackgroundColor = "#00893c";
|
|
939
|
+
export const amsProgressListStepCurrentMarkerShapeBorderColor = "#00893c";
|
|
940
|
+
export const amsProgressListStepCurrentConnectorBorderInlineColor = "#00893c";
|
|
941
|
+
export const amsProgressListSubstepsPaddingBlockStart =
|
|
942
|
+
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
943
|
+
export const amsProgressListSubstepsStepIndicatorMarginInlineEnd =
|
|
944
|
+
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
945
|
+
export const amsProgressListSubstepsStepIndicatorMediumMarginInlineEnd =
|
|
946
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
947
|
+
export const amsProgressListSubstepsStepMarkerBlockSize =
|
|
948
|
+
"calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8)";
|
|
949
|
+
export const amsProgressListSubstepsStepMarkerInlineSize = "1.5rem";
|
|
950
|
+
export const amsProgressListSubstepsStepMarkerShapeBlockSize = "0.75rem";
|
|
951
|
+
export const amsProgressListSubstepsStepMarkerShapeBackgroundColor = "#ffffff";
|
|
952
|
+
export const amsProgressListSubstepsStepMarkerShapeBorderColor = "#767676";
|
|
953
|
+
export const amsProgressListSubstepsStepMarkerShapeBorderStyle = "solid";
|
|
954
|
+
export const amsProgressListSubstepsStepMarkerShapeBorderWidth = "0.125rem";
|
|
955
|
+
export const amsProgressListSubstepsStepMarkerShapeOutlineColor = "#ffffff";
|
|
956
|
+
export const amsProgressListSubstepsStepMarkerShapeOutlineStyle = "solid";
|
|
957
|
+
export const amsProgressListSubstepsStepMarkerShapeOutlineWidth = "0.125rem";
|
|
958
|
+
export const amsProgressListSubstepsStepConnectorBackgroundColor = "#ffffff";
|
|
959
|
+
export const amsProgressListSubstepsStepConnectorBorderInlineColor = "#767676";
|
|
960
|
+
export const amsProgressListSubstepsStepConnectorBorderInlineStyle = "dashed";
|
|
961
|
+
export const amsProgressListSubstepsStepConnectorBorderInlineWidth = "1px";
|
|
962
|
+
export const amsProgressListSubstepsStepConnectorMarginBlockStart =
|
|
963
|
+
"calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8 / 2)";
|
|
964
|
+
export const amsProgressListSubstepsStepConnectorLastChildBorderInlineColor =
|
|
965
|
+
"#ffffff";
|
|
966
|
+
export const amsProgressListSubstepsStepContentMarginBlockEnd =
|
|
967
|
+
"clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
|
|
968
|
+
export const amsProgressListSubstepsStepCompletedMarkerShapeBackgroundColor =
|
|
969
|
+
"#00893c";
|
|
970
|
+
export const amsProgressListSubstepsStepCompletedMarkerShapeBorderColor =
|
|
971
|
+
"#00893c";
|
|
972
|
+
export const amsProgressListSubstepsStepCompletedConnectorBorderInlineColor =
|
|
973
|
+
"#00893c";
|
|
974
|
+
export const amsProgressListSubstepsStepCompletedConnectorBorderInlineStyle =
|
|
975
|
+
"solid";
|
|
976
|
+
export const amsProgressListSubstepsStepCurrentMarkerShapeBackgroundColor =
|
|
977
|
+
"#00893c";
|
|
978
|
+
export const amsProgressListSubstepsStepCurrentMarkerShapeBorderColor =
|
|
979
|
+
"#00893c";
|
|
980
|
+
export const amsProgressListSubstepsLastChildContentMarginBlockEnd =
|
|
981
|
+
"clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
|
|
899
982
|
export const amsRadioColor = "#202020";
|
|
900
983
|
export const amsRadioCursor = "pointer";
|
|
901
984
|
export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
@@ -1158,12 +1241,12 @@ export const amsTextInputInvalidHoverBorderColor = "#b70000";
|
|
|
1158
1241
|
export const amsTextInputInvalidHoverBoxShadow =
|
|
1159
1242
|
"inset 0 0 0 0.0625rem #b70000";
|
|
1160
1243
|
export const amsTextInputPlaceholderColor = "#767676";
|
|
1244
|
+
export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
|
|
1245
|
+
"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>\")";
|
|
1161
1246
|
export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
1162
1247
|
"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
|
|
1163
1248
|
export const amsTimeInputDisabledColor = "#767676";
|
|
1164
1249
|
export const amsTimeInputDisabledCursor = "not-allowed";
|
|
1165
|
-
export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
|
|
1166
|
-
"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>\")";
|
|
1167
1250
|
export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
1168
1251
|
"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
|
|
1169
1252
|
export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
|
package/dist/index.scss
CHANGED
|
@@ -31,6 +31,9 @@ $ams-color-highlight-magenta: #e50082;
|
|
|
31
31
|
$ams-color-highlight-orange: #ff9100;
|
|
32
32
|
$ams-color-highlight-purple: #a00078;
|
|
33
33
|
$ams-color-highlight-yellow: #ffe600;
|
|
34
|
+
$ams-color-progress-current: #00893c;
|
|
35
|
+
$ams-color-progress-completed: #00893c;
|
|
36
|
+
$ams-color-progress-upcoming: #767676;
|
|
34
37
|
$ams-color-separator: #d1d1d1;
|
|
35
38
|
$ams-color-text: #202020;
|
|
36
39
|
$ams-color-text-inverse: #ffffff;
|
|
@@ -56,7 +59,7 @@ $ams-typography-heading-6-line-height: 1.4; // Use Heading size 5 instead.
|
|
|
56
59
|
$ams-typography-heading-font-weight: 800;
|
|
57
60
|
$ams-typography-heading-text-wrap: balance;
|
|
58
61
|
$ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
|
|
59
|
-
$ams-typography-hyphenate-limit-chars:
|
|
62
|
+
$ams-typography-hyphenate-limit-chars: auto;
|
|
60
63
|
$ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
|
|
61
64
|
$ams-typography-body-text-font-weight: 400;
|
|
62
65
|
$ams-typography-body-text-line-height: 1.8;
|
|
@@ -91,8 +94,8 @@ $ams-button-tertiary-border-color: transparent;
|
|
|
91
94
|
$ams-button-tertiary-hover-border-color: currentColor;
|
|
92
95
|
$ams-call-to-action-link-background-color: #00893c;
|
|
93
96
|
$ams-call-to-action-link-hover-background-color: #10552b;
|
|
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>"); // This token will be removed in release 6.0.0
|
|
94
98
|
$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
|
|
95
|
-
$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>");
|
|
96
99
|
$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
|
|
97
100
|
$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>");
|
|
98
101
|
$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
|
|
@@ -132,6 +135,18 @@ $ams-page-footer-spotlight-background-color: #004699;
|
|
|
132
135
|
$ams-page-max-inline-size: 90rem;
|
|
133
136
|
$ams-page-with-menu-max-inline-size: 120rem;
|
|
134
137
|
$ams-paragraph-large-text-wrap: balance;
|
|
138
|
+
$ams-progress-list-step-marker-shape-block-size: 1.5rem;
|
|
139
|
+
$ams-progress-list-step-marker-shape-border-style: solid;
|
|
140
|
+
$ams-progress-list-step-marker-shape-outline-style: solid;
|
|
141
|
+
$ams-progress-list-step-connector-border-inline-style: dashed;
|
|
142
|
+
$ams-progress-list-step-connector-border-inline-width: 1px;
|
|
143
|
+
$ams-progress-list-step-completed-connector-border-inline-style: solid;
|
|
144
|
+
$ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
|
|
145
|
+
$ams-progress-list-substeps-step-marker-shape-border-style: solid;
|
|
146
|
+
$ams-progress-list-substeps-step-marker-shape-outline-style: solid;
|
|
147
|
+
$ams-progress-list-substeps-step-connector-border-inline-style: dashed;
|
|
148
|
+
$ams-progress-list-substeps-step-connector-border-inline-width: 1px;
|
|
149
|
+
$ams-progress-list-substeps-step-completed-connector-border-inline-style: solid;
|
|
135
150
|
$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>");
|
|
136
151
|
$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>");
|
|
137
152
|
$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>");
|
|
@@ -140,8 +155,8 @@ $ams-switch-background-color: #767676;
|
|
|
140
155
|
$ams-switch-inline-size: 3.5rem;
|
|
141
156
|
$ams-switch-thumb-block-size: 1.75rem;
|
|
142
157
|
$ams-switch-thumb-inline-size: 1.75rem;
|
|
143
|
-
$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
|
|
144
158
|
$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>");
|
|
159
|
+
$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
|
|
145
160
|
$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
|
|
146
161
|
$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>");
|
|
147
162
|
$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
|
|
@@ -240,6 +255,7 @@ $ams-badge-color: $ams-color-text-inverse;
|
|
|
240
255
|
$ams-badge-font-family: $ams-typography-font-family;
|
|
241
256
|
$ams-badge-font-size: $ams-typography-body-text-font-size;
|
|
242
257
|
$ams-badge-font-weight: $ams-typography-body-text-bold-font-weight;
|
|
258
|
+
$ams-badge-gap: $ams-space-xs;
|
|
243
259
|
$ams-badge-line-height: $ams-typography-body-text-line-height;
|
|
244
260
|
$ams-badge-padding-inline: $ams-space-xs;
|
|
245
261
|
$ams-badge-azure-background-color: $ams-color-feedback-info;
|
|
@@ -650,6 +666,46 @@ $ams-password-input-border-color: $ams-inputs-border-color;
|
|
|
650
666
|
$ams-password-input-border-style: $ams-inputs-border-style;
|
|
651
667
|
$ams-password-input-line-height: $ams-inputs-line-height;
|
|
652
668
|
$ams-password-input-disabled-cursor: $ams-cursor-disabled;
|
|
669
|
+
$ams-progress-list-heading-2-step-marker-margin-block-start: calc(($ams-typography-heading-2-line-height * $ams-typography-heading-2-font-size) / 2);
|
|
670
|
+
$ams-progress-list-heading-3-step-marker-margin-block-start: calc(($ams-typography-heading-3-line-height * $ams-typography-heading-3-font-size) / 2);
|
|
671
|
+
$ams-progress-list-heading-4-step-marker-margin-block-start: calc(($ams-typography-heading-4-line-height * $ams-typography-heading-4-font-size) / 2);
|
|
672
|
+
$ams-progress-list-step-gap: $ams-space-m;
|
|
673
|
+
$ams-progress-list-step-medium-gap: $ams-space-l;
|
|
674
|
+
$ams-progress-list-step-marker-shape-background-color: $ams-color-background;
|
|
675
|
+
$ams-progress-list-step-marker-shape-border-color: $ams-color-progress-upcoming;
|
|
676
|
+
$ams-progress-list-step-marker-shape-border-width: $ams-border-width-m;
|
|
677
|
+
$ams-progress-list-step-marker-shape-outline-color: $ams-color-background;
|
|
678
|
+
$ams-progress-list-step-marker-shape-outline-width: $ams-border-width-m;
|
|
679
|
+
$ams-progress-list-step-connector-border-inline-color: $ams-color-progress-upcoming;
|
|
680
|
+
$ams-progress-list-step-heading-margin-block-end: $ams-space-s;
|
|
681
|
+
$ams-progress-list-step-content-margin-block-end: $ams-space-l;
|
|
682
|
+
$ams-progress-list-step-completed-marker-shape-background-color: $ams-color-progress-completed;
|
|
683
|
+
$ams-progress-list-step-completed-marker-shape-border-color: $ams-color-progress-completed;
|
|
684
|
+
$ams-progress-list-step-completed-connector-border-inline-color: $ams-color-progress-completed;
|
|
685
|
+
$ams-progress-list-step-current-marker-shape-background-color: $ams-color-progress-current;
|
|
686
|
+
$ams-progress-list-step-current-marker-shape-border-color: $ams-color-progress-current;
|
|
687
|
+
$ams-progress-list-step-current-connector-border-inline-color: $ams-color-progress-current;
|
|
688
|
+
$ams-progress-list-substeps-padding-block-start: $ams-space-m;
|
|
689
|
+
$ams-progress-list-substeps-step-indicator-margin-inline-end: $ams-space-m;
|
|
690
|
+
$ams-progress-list-substeps-step-indicator-medium-margin-inline-end: $ams-space-l;
|
|
691
|
+
$ams-progress-list-substeps-step-marker-block-size: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height);
|
|
692
|
+
$ams-progress-list-substeps-step-marker-inline-size: $ams-progress-list-step-marker-shape-block-size;
|
|
693
|
+
$ams-progress-list-substeps-step-marker-shape-background-color: $ams-color-background;
|
|
694
|
+
$ams-progress-list-substeps-step-marker-shape-border-color: $ams-color-progress-upcoming;
|
|
695
|
+
$ams-progress-list-substeps-step-marker-shape-border-width: $ams-border-width-m;
|
|
696
|
+
$ams-progress-list-substeps-step-marker-shape-outline-color: $ams-color-background;
|
|
697
|
+
$ams-progress-list-substeps-step-marker-shape-outline-width: $ams-border-width-m;
|
|
698
|
+
$ams-progress-list-substeps-step-connector-background-color: $ams-color-background;
|
|
699
|
+
$ams-progress-list-substeps-step-connector-border-inline-color: $ams-color-progress-upcoming;
|
|
700
|
+
$ams-progress-list-substeps-step-connector-margin-block-start: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height / 2);
|
|
701
|
+
$ams-progress-list-substeps-step-connector-last-child-border-inline-color: $ams-color-background;
|
|
702
|
+
$ams-progress-list-substeps-step-content-margin-block-end: $ams-space-m;
|
|
703
|
+
$ams-progress-list-substeps-step-completed-marker-shape-background-color: $ams-color-progress-completed;
|
|
704
|
+
$ams-progress-list-substeps-step-completed-marker-shape-border-color: $ams-color-progress-completed;
|
|
705
|
+
$ams-progress-list-substeps-step-completed-connector-border-inline-color: $ams-color-progress-completed;
|
|
706
|
+
$ams-progress-list-substeps-step-current-marker-shape-background-color: $ams-color-progress-current;
|
|
707
|
+
$ams-progress-list-substeps-step-current-marker-shape-border-color: $ams-color-progress-current;
|
|
708
|
+
$ams-progress-list-substeps-last-child-content-margin-block-end: $ams-space-l;
|
|
653
709
|
$ams-radio-color: $ams-color-text;
|
|
654
710
|
$ams-radio-cursor: $ams-cursor-interactive;
|
|
655
711
|
$ams-radio-font-family: $ams-typography-font-family;
|
|
@@ -909,6 +965,9 @@ $ams-password-input-invalid-border-color: $ams-inputs-invalid-border-color;
|
|
|
909
965
|
$ams-password-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
|
|
910
966
|
$ams-password-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
|
|
911
967
|
$ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
|
|
968
|
+
$ams-progress-list-heading-2-step-marker-block-size: calc($ams-typography-heading-2-font-size * $ams-typography-heading-2-line-height);
|
|
969
|
+
$ams-progress-list-heading-3-step-marker-block-size: calc($ams-typography-heading-3-font-size * $ams-typography-heading-3-line-height);
|
|
970
|
+
$ams-progress-list-heading-4-step-marker-block-size: calc($ams-typography-heading-4-font-size * $ams-typography-heading-4-line-height);
|
|
912
971
|
$ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
|
|
913
972
|
$ams-radio-icon-container-inline-size: $ams-radio-font-size;
|
|
914
973
|
$ams-search-field-input-background-color: $ams-inputs-background-color;
|
package/dist/index.theme.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/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.
|
|
2
|
+
"version": "3.1.0",
|
|
3
3
|
"author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
|
|
4
4
|
"description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
|
|
5
5
|
"homepage": "https://designsystem.amsterdam",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"change-case": "5.4.4",
|
|
27
27
|
"chokidar-cli": "3.0.0",
|
|
28
|
-
"style-dictionary": "5.
|
|
28
|
+
"style-dictionary": "5.2.0"
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
31
|
"clean": "rimraf dist/",
|
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
},
|
|
29
29
|
"inverse": { "value": "#ffffff" }
|
|
30
30
|
},
|
|
31
|
+
"progress": {
|
|
32
|
+
"current": { "value": "#00893c" },
|
|
33
|
+
"completed": { "value": "#00893c" },
|
|
34
|
+
"upcoming": { "value": "#767676" }
|
|
35
|
+
},
|
|
31
36
|
"separator": { "value": "#d1d1d1" },
|
|
32
37
|
"text": {
|
|
33
38
|
"default": { "value": "#202020" },
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"ams": {
|
|
3
3
|
"typography": {
|
|
4
4
|
"font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
|
|
5
|
-
"hyphenate-limit-chars": { "value": "
|
|
5
|
+
"hyphenate-limit-chars": { "value": "auto" },
|
|
6
6
|
"body-text": {
|
|
7
7
|
"font-size": { "value": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)" },
|
|
8
8
|
"font-weight": { "value": "400" },
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
"font-family": { "value": "{ams.typography.font-family}" },
|
|
7
7
|
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
8
8
|
"font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" },
|
|
9
|
+
"gap": { "value": "{ams.space.xs}" },
|
|
9
10
|
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
10
11
|
"padding-inline": { "value": "{ams.space.xs}" },
|
|
11
12
|
"azure": {
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
"ams": {
|
|
3
3
|
"date-input": {
|
|
4
4
|
"disabled": {
|
|
5
|
+
"calendar-picker-indicator": {
|
|
6
|
+
"background-image": {
|
|
7
|
+
"comment": "This token will be removed in release 6.0.0",
|
|
8
|
+
"value": "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>\")"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
5
11
|
"calender-picker-indicator": {
|
|
6
12
|
"background-image": {
|
|
7
13
|
"comment": "Use the token with ‘calendar’ spelled correctly instead",
|
|
@@ -15,12 +15,7 @@
|
|
|
15
15
|
"padding-inline": { "value": "{ams.inputs.padding-inline}" },
|
|
16
16
|
"disabled": {
|
|
17
17
|
"color": { "value": "{ams.inputs.disabled.color}" },
|
|
18
|
-
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
19
|
-
"calendar-picker-indicator": {
|
|
20
|
-
"background-image": {
|
|
21
|
-
"value": "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>\")"
|
|
22
|
-
}
|
|
23
|
-
}
|
|
18
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
24
19
|
},
|
|
25
20
|
"hover": {
|
|
26
21
|
"box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
|