@amsterdam/design-system-tokens 0.1.0 → 0.1.2
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/LICENSE.md +3 -3
- package/dist/_variables.scss +162 -2
- package/dist/index.css +161 -1
- package/dist/index.d.ts +162 -2
- package/dist/index.js +162 -2
- package/dist/index.json +162 -2
- package/dist/index.tokens.json +537 -1
- package/dist/root.css +161 -1
- package/dist/tokens.d.ts +489 -2
- package/dist/tokens.js +3834 -2
- package/dist/variables.less +162 -2
- package/package.json +6 -7
- package/src/brand/amsterdam/typography.tokens.json +69 -0
- package/src/common/amsterdam/border.tokens.json +15 -0
- package/src/common/amsterdam/spacing.tokens.json +20 -0
- package/src/components/amsterdam/button.tokens.json +17 -0
- package/src/components/amsterdam/form-label.tokens.json +14 -0
- package/src/components/amsterdam/heading.tokens.json +37 -0
- package/src/components/amsterdam/icon.tokens.json +41 -0
- package/src/components/amsterdam/link.tokens.json +98 -0
- package/src/components/amsterdam/paragraph.tokens.json +28 -0
- package/src/components/utrecht/button.tokens.json +276 -0
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 05 Jul 2023 07:52:43 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const amsterdamColorPrimaryBlack = "#000000";
|
|
@@ -19,4 +19,164 @@ export const amsterdamColorNeutralGrey1 = "#E6E6E6";
|
|
|
19
19
|
export const amsterdamColorNeutralGrey2 = "#B4B4B4";
|
|
20
20
|
export const amsterdamColorNeutralGrey3 = "#767676";
|
|
21
21
|
export const amsterdamColorNeutralGrey4 = "#323232";
|
|
22
|
-
export const
|
|
22
|
+
export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
23
|
+
export const amsterdamTypographyFontWeightNormal = 400;
|
|
24
|
+
export const amsterdamTypographyFontWeightBold = 800;
|
|
25
|
+
export const amsterdamTypographyTextLevel0FontSizeNarrow = "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)";
|
|
26
|
+
export const amsterdamTypographyTextLevel0FontSizeWide = "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)";
|
|
27
|
+
export const amsterdamTypographyTextLevel0LineHeight = "1.1";
|
|
28
|
+
export const amsterdamTypographyTextLevel1FontSizeNarrow = "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)";
|
|
29
|
+
export const amsterdamTypographyTextLevel1FontSizeWide = "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)";
|
|
30
|
+
export const amsterdamTypographyTextLevel1LineHeight = "1.2";
|
|
31
|
+
export const amsterdamTypographyTextLevel2FontSizeNarrow = "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)";
|
|
32
|
+
export const amsterdamTypographyTextLevel2FontSizeWide = "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)";
|
|
33
|
+
export const amsterdamTypographyTextLevel2LineHeight = "1.3";
|
|
34
|
+
export const amsterdamTypographyTextLevel3FontSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
|
|
35
|
+
export const amsterdamTypographyTextLevel3FontSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
|
|
36
|
+
export const amsterdamTypographyTextLevel3LineHeight = "1.4";
|
|
37
|
+
export const amsterdamTypographyTextLevel4FontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
|
|
38
|
+
export const amsterdamTypographyTextLevel4FontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
|
|
39
|
+
export const amsterdamTypographyTextLevel4LineHeight = "1.5";
|
|
40
|
+
export const amsterdamTypographyTextLevel5FontSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
|
|
41
|
+
export const amsterdamTypographyTextLevel5FontSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
|
|
42
|
+
export const amsterdamTypographyTextLevel5LineHeight = "1.4";
|
|
43
|
+
export const amsterdamTypographyTextLevel6FontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
|
|
44
|
+
export const amsterdamTypographyTextLevel6FontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
|
|
45
|
+
export const amsterdamTypographyTextLevel6LineHeight = "1.6";
|
|
46
|
+
export const amsterdamTypographyTextLevel7FontSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
|
|
47
|
+
export const amsterdamTypographyTextLevel7FontSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
|
|
48
|
+
export const amsterdamTypographyTextLevel7LineHeight = "1.6";
|
|
49
|
+
export const amsterdamBorderWidthSm = "1px";
|
|
50
|
+
export const amsterdamBorderWidthMd = "2px";
|
|
51
|
+
export const amsterdamBorderWidthLg = "3px";
|
|
52
|
+
export const amsterdamFocusOutlineOffset = "2px";
|
|
53
|
+
export const amsterdamSpacingInsetSm = "0.5rem";
|
|
54
|
+
export const amsterdamSpacingInsetMd = "1rem";
|
|
55
|
+
export const amsterdamSpacingInsetLg = "1.5rem";
|
|
56
|
+
export const amsterdamSpacingInsetXl = "2.5rem";
|
|
57
|
+
export const amsterdamButtonFontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
|
|
58
|
+
export const amsterdamButtonFontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
|
|
59
|
+
export const amsterdamButtonSecondaryHoverBoxShadow = "0 0 0 1px #00387A";
|
|
60
|
+
export const amsterdamFormLabelColor = "#000000";
|
|
61
|
+
export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
62
|
+
export const amsterdamFormLabelFontSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
|
|
63
|
+
export const amsterdamFormLabelFontSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
|
|
64
|
+
export const amsterdamFormLabelFontWeight = 800;
|
|
65
|
+
export const amsterdamFormLabelLineHeight = "1.6";
|
|
66
|
+
export const amsterdamHeading1FontSizeNarrow = "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)";
|
|
67
|
+
export const amsterdamHeading1FontSizeWide = "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)";
|
|
68
|
+
export const amsterdamHeading1LineHeight = "1.2";
|
|
69
|
+
export const amsterdamHeading2FontSizeNarrow = "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)";
|
|
70
|
+
export const amsterdamHeading2FontSizeWide = "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)";
|
|
71
|
+
export const amsterdamHeading2LineHeight = "1.3";
|
|
72
|
+
export const amsterdamHeading3FontSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
|
|
73
|
+
export const amsterdamHeading3FontSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
|
|
74
|
+
export const amsterdamHeading3LineHeight = "1.4";
|
|
75
|
+
export const amsterdamHeading4FontSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
|
|
76
|
+
export const amsterdamHeading4FontSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
|
|
77
|
+
export const amsterdamHeading4LineHeight = "1.4";
|
|
78
|
+
export const amsterdamHeadingColor = "#000000";
|
|
79
|
+
export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
80
|
+
export const amsterdamHeadingFontWeight = 800;
|
|
81
|
+
export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
|
|
82
|
+
export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
|
|
83
|
+
export const amsterdamIconSize3ContainerMultiplier = "1.4";
|
|
84
|
+
export const amsterdamIconSize4IconSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
|
|
85
|
+
export const amsterdamIconSize4IconSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
|
|
86
|
+
export const amsterdamIconSize4ContainerMultiplier = "1.5";
|
|
87
|
+
export const amsterdamIconSize5IconSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
|
|
88
|
+
export const amsterdamIconSize5IconSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
|
|
89
|
+
export const amsterdamIconSize5ContainerMultiplier = "1.4";
|
|
90
|
+
export const amsterdamIconSize6IconSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
|
|
91
|
+
export const amsterdamIconSize6IconSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
|
|
92
|
+
export const amsterdamIconSize6ContainerMultiplier = "1.6";
|
|
93
|
+
export const amsterdamIconSize7IconSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
|
|
94
|
+
export const amsterdamIconSize7IconSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
|
|
95
|
+
export const amsterdamIconSize7ContainerMultiplier = "1.6";
|
|
96
|
+
export const amsterdamLinkColor = "#004699";
|
|
97
|
+
export const amsterdamLinkOutlineOffset = "2px";
|
|
98
|
+
export const amsterdamLinkTextDecoration = "none";
|
|
99
|
+
export const amsterdamLinkTextUnderlineOffset = "9px";
|
|
100
|
+
export const amsterdamLinkTextDecorationThickness = "2px";
|
|
101
|
+
export const amsterdamLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
102
|
+
export const amsterdamLinkFontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
|
|
103
|
+
export const amsterdamLinkFontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
|
|
104
|
+
export const amsterdamLinkFontWeight = 400;
|
|
105
|
+
export const amsterdamLinkFocusColor = "#00387A";
|
|
106
|
+
export const amsterdamLinkFocusTextDecoration = "underline";
|
|
107
|
+
export const amsterdamLinkHoverColor = "#00387A";
|
|
108
|
+
export const amsterdamLinkHoverTextDecoration = "underline";
|
|
109
|
+
export const amsterdamLinkHoverTextDecorationThickness = "2px";
|
|
110
|
+
export const amsterdamLinkLineHeight = "1.6";
|
|
111
|
+
export const amsterdamLinkVisitedColor = "#004699";
|
|
112
|
+
export const amsterdamLinkStandaloneBoldFontWeight = 800;
|
|
113
|
+
export const amsterdamLinkInlineTextUnderlineOffset = "3px";
|
|
114
|
+
export const amsterdamLinkInlineFontFamily = "inherit";
|
|
115
|
+
export const amsterdamLinkInlineFontSize = "inherit";
|
|
116
|
+
export const amsterdamLinkInlineVisitedColor = "#A00078";
|
|
117
|
+
export const amsterdamLinkInListGap = "0.5em";
|
|
118
|
+
export const amsterdamLinkInListTextUnderlineOffset = "0.3em";
|
|
119
|
+
export const amsterdamLinkInListFontSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
|
|
120
|
+
export const amsterdamLinkInListFontSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
|
|
121
|
+
export const amsterdamLinkInListLineHeight = "1.6";
|
|
122
|
+
export const amsterdamLinkOnBackgroundDarkColor = "#ffffff";
|
|
123
|
+
export const amsterdamLinkOnBackgroundDarkTextDecoration = "underline";
|
|
124
|
+
export const amsterdamLinkOnBackgroundDarkFocusColor = "#ffffff";
|
|
125
|
+
export const amsterdamLinkOnBackgroundDarkFocusTextDecoration = "underline";
|
|
126
|
+
export const amsterdamLinkOnBackgroundDarkHoverColor = "#ffffff";
|
|
127
|
+
export const amsterdamLinkOnBackgroundDarkHoverTextDecoration = "none";
|
|
128
|
+
export const amsterdamLinkOnBackgroundDarkVisitedColor = "#ffffff";
|
|
129
|
+
export const amsterdamLinkOnBackgroundLightColor = "#000000";
|
|
130
|
+
export const amsterdamLinkOnBackgroundLightTextDecoration = "underline";
|
|
131
|
+
export const amsterdamLinkOnBackgroundLightTextDecorationThickness = "2px";
|
|
132
|
+
export const amsterdamLinkOnBackgroundLightTextUnderlineOffset = "9px";
|
|
133
|
+
export const amsterdamLinkOnBackgroundLightActiveColor = "#000000";
|
|
134
|
+
export const amsterdamLinkOnBackgroundLightFontSize = {"narrow":{"value":"clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)","filePath":"./src/brand/amsterdam/typography.tokens.json","isSource":true,"original":{"value":"clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"},"name":"amsterdamTypographyTextLevel6FontSizeNarrow","attributes":{"category":"amsterdam","type":"typography","item":"text-level","subitem":"6","state":"font-size"},"path":["amsterdam","typography","text-level","6","font-size","narrow"]},"wide":{"value":"clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)","filePath":"./src/brand/amsterdam/typography.tokens.json","isSource":true,"original":{"value":"clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"},"name":"amsterdamTypographyTextLevel6FontSizeWide","attributes":{"category":"amsterdam","type":"typography","item":"text-level","subitem":"6","state":"font-size"},"path":["amsterdam","typography","text-level","6","font-size","wide"]}};
|
|
135
|
+
export const amsterdamLinkOnBackgroundLightFocusColor = "#000000";
|
|
136
|
+
export const amsterdamLinkOnBackgroundLightFocusTextDecoration = "underline";
|
|
137
|
+
export const amsterdamLinkOnBackgroundLightHoverColor = "#000000";
|
|
138
|
+
export const amsterdamLinkOnBackgroundLightHoverTextDecoration = "none";
|
|
139
|
+
export const amsterdamLinkOnBackgroundLightVisitedColor = "#000000";
|
|
140
|
+
export const amsterdamParagraphColor = "#000000";
|
|
141
|
+
export const amsterdamParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
142
|
+
export const amsterdamParagraphFontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
|
|
143
|
+
export const amsterdamParagraphFontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
|
|
144
|
+
export const amsterdamParagraphFontWeight = 400;
|
|
145
|
+
export const amsterdamParagraphLineHeight = "1.6";
|
|
146
|
+
export const amsterdamParagraphSmallFontSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
|
|
147
|
+
export const amsterdamParagraphSmallFontSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
|
|
148
|
+
export const amsterdamParagraphSmallLineHeight = "1.6";
|
|
149
|
+
export const amsterdamParagraphLargeFontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
|
|
150
|
+
export const amsterdamParagraphLargeFontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
|
|
151
|
+
export const amsterdamParagraphLargeLineHeight = "1.5";
|
|
152
|
+
export const utrechtButtonBackgroundColor = "#004699";
|
|
153
|
+
export const utrechtButtonColor = "#ffffff";
|
|
154
|
+
export const utrechtButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
155
|
+
export const utrechtButtonLineHeight = "1.6";
|
|
156
|
+
export const utrechtButtonPaddingInlineStart = "1rem";
|
|
157
|
+
export const utrechtButtonPaddingInlineEnd = "1rem";
|
|
158
|
+
export const utrechtButtonPaddingBlockStart = "0.5rem";
|
|
159
|
+
export const utrechtButtonPaddingBlockEnd = "0.5rem";
|
|
160
|
+
export const utrechtButtonDisabledBackgroundColor = "#B4B4B4";
|
|
161
|
+
export const utrechtButtonDisabledColor = "#ffffff";
|
|
162
|
+
export const utrechtButtonDisabledBorderColor = "transparent";
|
|
163
|
+
export const utrechtButtonHoverBackgroundColor = "#00387A";
|
|
164
|
+
export const utrechtButtonPrimaryActionBackgroundColor = "#004699";
|
|
165
|
+
export const utrechtButtonPrimaryActionColor = "#ffffff";
|
|
166
|
+
export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#B4B4B4";
|
|
167
|
+
export const utrechtButtonPrimaryActionHoverBackgroundColor = "#00387A";
|
|
168
|
+
export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
|
|
169
|
+
export const utrechtButtonSecondaryActionColor = "#004699";
|
|
170
|
+
export const utrechtButtonSecondaryActionBorderColor = "#004699";
|
|
171
|
+
export const utrechtButtonSecondaryActionBorderWidth = "2px";
|
|
172
|
+
export const utrechtButtonSecondaryActionHoverColor = "#00387A";
|
|
173
|
+
export const utrechtButtonSecondaryActionHoverBorderColor = "#00387A";
|
|
174
|
+
export const utrechtButtonSecondaryActionDisabledBackgroundColor = "#ffffff";
|
|
175
|
+
export const utrechtButtonSecondaryActionDisabledColor = "#B4B4B4";
|
|
176
|
+
export const utrechtButtonSecondaryActionDisabledBorderColor = "#B4B4B4";
|
|
177
|
+
export const utrechtButtonSubtleBackgroundColor = "transparent";
|
|
178
|
+
export const utrechtButtonSubtleBorderWidth = "2px";
|
|
179
|
+
export const utrechtButtonSubtleColor = "#004699";
|
|
180
|
+
export const utrechtButtonSubtleHoverBorderColor = "#767676";
|
|
181
|
+
export const utrechtButtonSubtleDisabledBackgroundColor = "transparent";
|
|
182
|
+
export const utrechtButtonSubtleDisabledColor = "#B4B4B4";
|
package/dist/index.json
CHANGED
|
@@ -15,5 +15,165 @@
|
|
|
15
15
|
"amsterdamColorNeutralGrey2": "#B4B4B4",
|
|
16
16
|
"amsterdamColorNeutralGrey3": "#767676",
|
|
17
17
|
"amsterdamColorNeutralGrey4": "#323232",
|
|
18
|
-
"
|
|
19
|
-
|
|
18
|
+
"amsterdamTypographyFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
19
|
+
"amsterdamTypographyFontWeightNormal": 400,
|
|
20
|
+
"amsterdamTypographyFontWeightBold": 800,
|
|
21
|
+
"amsterdamTypographyTextLevel0FontSizeNarrow": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)",
|
|
22
|
+
"amsterdamTypographyTextLevel0FontSizeWide": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)",
|
|
23
|
+
"amsterdamTypographyTextLevel0LineHeight": "1.1",
|
|
24
|
+
"amsterdamTypographyTextLevel1FontSizeNarrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
|
|
25
|
+
"amsterdamTypographyTextLevel1FontSizeWide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)",
|
|
26
|
+
"amsterdamTypographyTextLevel1LineHeight": "1.2",
|
|
27
|
+
"amsterdamTypographyTextLevel2FontSizeNarrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
|
|
28
|
+
"amsterdamTypographyTextLevel2FontSizeWide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)",
|
|
29
|
+
"amsterdamTypographyTextLevel2LineHeight": "1.3",
|
|
30
|
+
"amsterdamTypographyTextLevel3FontSizeNarrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
|
|
31
|
+
"amsterdamTypographyTextLevel3FontSizeWide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)",
|
|
32
|
+
"amsterdamTypographyTextLevel3LineHeight": "1.4",
|
|
33
|
+
"amsterdamTypographyTextLevel4FontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
|
|
34
|
+
"amsterdamTypographyTextLevel4FontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
|
|
35
|
+
"amsterdamTypographyTextLevel4LineHeight": "1.5",
|
|
36
|
+
"amsterdamTypographyTextLevel5FontSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
|
|
37
|
+
"amsterdamTypographyTextLevel5FontSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
|
|
38
|
+
"amsterdamTypographyTextLevel5LineHeight": "1.4",
|
|
39
|
+
"amsterdamTypographyTextLevel6FontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
|
|
40
|
+
"amsterdamTypographyTextLevel6FontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
|
|
41
|
+
"amsterdamTypographyTextLevel6LineHeight": "1.6",
|
|
42
|
+
"amsterdamTypographyTextLevel7FontSizeNarrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
|
|
43
|
+
"amsterdamTypographyTextLevel7FontSizeWide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)",
|
|
44
|
+
"amsterdamTypographyTextLevel7LineHeight": "1.6",
|
|
45
|
+
"amsterdamBorderWidthSm": "1px",
|
|
46
|
+
"amsterdamBorderWidthMd": "2px",
|
|
47
|
+
"amsterdamBorderWidthLg": "3px",
|
|
48
|
+
"amsterdamFocusOutlineOffset": "2px",
|
|
49
|
+
"amsterdamSpacingInsetSm": "0.5rem",
|
|
50
|
+
"amsterdamSpacingInsetMd": "1rem",
|
|
51
|
+
"amsterdamSpacingInsetLg": "1.5rem",
|
|
52
|
+
"amsterdamSpacingInsetXl": "2.5rem",
|
|
53
|
+
"amsterdamButtonFontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
|
|
54
|
+
"amsterdamButtonFontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
|
|
55
|
+
"amsterdamButtonSecondaryHoverBoxShadow": "0 0 0 1px #00387A",
|
|
56
|
+
"amsterdamFormLabelColor": "#000000",
|
|
57
|
+
"amsterdamFormLabelFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
58
|
+
"amsterdamFormLabelFontSizeNarrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
|
|
59
|
+
"amsterdamFormLabelFontSizeWide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)",
|
|
60
|
+
"amsterdamFormLabelFontWeight": 800,
|
|
61
|
+
"amsterdamFormLabelLineHeight": "1.6",
|
|
62
|
+
"amsterdamHeading1FontSizeNarrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
|
|
63
|
+
"amsterdamHeading1FontSizeWide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)",
|
|
64
|
+
"amsterdamHeading1LineHeight": "1.2",
|
|
65
|
+
"amsterdamHeading2FontSizeNarrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
|
|
66
|
+
"amsterdamHeading2FontSizeWide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)",
|
|
67
|
+
"amsterdamHeading2LineHeight": "1.3",
|
|
68
|
+
"amsterdamHeading3FontSizeNarrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
|
|
69
|
+
"amsterdamHeading3FontSizeWide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)",
|
|
70
|
+
"amsterdamHeading3LineHeight": "1.4",
|
|
71
|
+
"amsterdamHeading4FontSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
|
|
72
|
+
"amsterdamHeading4FontSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
|
|
73
|
+
"amsterdamHeading4LineHeight": "1.4",
|
|
74
|
+
"amsterdamHeadingColor": "#000000",
|
|
75
|
+
"amsterdamHeadingFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
76
|
+
"amsterdamHeadingFontWeight": 800,
|
|
77
|
+
"amsterdamIconSize3IconSizeNarrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
|
|
78
|
+
"amsterdamIconSize3IconSizeWide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)",
|
|
79
|
+
"amsterdamIconSize3ContainerMultiplier": "1.4",
|
|
80
|
+
"amsterdamIconSize4IconSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
|
|
81
|
+
"amsterdamIconSize4IconSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
|
|
82
|
+
"amsterdamIconSize4ContainerMultiplier": "1.5",
|
|
83
|
+
"amsterdamIconSize5IconSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
|
|
84
|
+
"amsterdamIconSize5IconSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
|
|
85
|
+
"amsterdamIconSize5ContainerMultiplier": "1.4",
|
|
86
|
+
"amsterdamIconSize6IconSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
|
|
87
|
+
"amsterdamIconSize6IconSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
|
|
88
|
+
"amsterdamIconSize6ContainerMultiplier": "1.6",
|
|
89
|
+
"amsterdamIconSize7IconSizeNarrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
|
|
90
|
+
"amsterdamIconSize7IconSizeWide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)",
|
|
91
|
+
"amsterdamIconSize7ContainerMultiplier": "1.6",
|
|
92
|
+
"amsterdamLinkColor": "#004699",
|
|
93
|
+
"amsterdamLinkOutlineOffset": "2px",
|
|
94
|
+
"amsterdamLinkTextDecoration": "none",
|
|
95
|
+
"amsterdamLinkTextUnderlineOffset": "9px",
|
|
96
|
+
"amsterdamLinkTextDecorationThickness": "2px",
|
|
97
|
+
"amsterdamLinkFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
98
|
+
"amsterdamLinkFontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
|
|
99
|
+
"amsterdamLinkFontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
|
|
100
|
+
"amsterdamLinkFontWeight": 400,
|
|
101
|
+
"amsterdamLinkFocusColor": "#00387A",
|
|
102
|
+
"amsterdamLinkFocusTextDecoration": "underline",
|
|
103
|
+
"amsterdamLinkHoverColor": "#00387A",
|
|
104
|
+
"amsterdamLinkHoverTextDecoration": "underline",
|
|
105
|
+
"amsterdamLinkHoverTextDecorationThickness": "2px",
|
|
106
|
+
"amsterdamLinkLineHeight": "1.6",
|
|
107
|
+
"amsterdamLinkVisitedColor": "#004699",
|
|
108
|
+
"amsterdamLinkStandaloneBoldFontWeight": 800,
|
|
109
|
+
"amsterdamLinkInlineTextUnderlineOffset": "3px",
|
|
110
|
+
"amsterdamLinkInlineFontFamily": "inherit",
|
|
111
|
+
"amsterdamLinkInlineFontSize": "inherit",
|
|
112
|
+
"amsterdamLinkInlineVisitedColor": "#A00078",
|
|
113
|
+
"amsterdamLinkInListGap": "0.5em",
|
|
114
|
+
"amsterdamLinkInListTextUnderlineOffset": "0.3em",
|
|
115
|
+
"amsterdamLinkInListFontSizeNarrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
|
|
116
|
+
"amsterdamLinkInListFontSizeWide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)",
|
|
117
|
+
"amsterdamLinkInListLineHeight": "1.6",
|
|
118
|
+
"amsterdamLinkOnBackgroundDarkColor": "#ffffff",
|
|
119
|
+
"amsterdamLinkOnBackgroundDarkTextDecoration": "underline",
|
|
120
|
+
"amsterdamLinkOnBackgroundDarkFocusColor": "#ffffff",
|
|
121
|
+
"amsterdamLinkOnBackgroundDarkFocusTextDecoration": "underline",
|
|
122
|
+
"amsterdamLinkOnBackgroundDarkHoverColor": "#ffffff",
|
|
123
|
+
"amsterdamLinkOnBackgroundDarkHoverTextDecoration": "none",
|
|
124
|
+
"amsterdamLinkOnBackgroundDarkVisitedColor": "#ffffff",
|
|
125
|
+
"amsterdamLinkOnBackgroundLightColor": "#000000",
|
|
126
|
+
"amsterdamLinkOnBackgroundLightTextDecoration": "underline",
|
|
127
|
+
"amsterdamLinkOnBackgroundLightTextDecorationThickness": "2px",
|
|
128
|
+
"amsterdamLinkOnBackgroundLightTextUnderlineOffset": "9px",
|
|
129
|
+
"amsterdamLinkOnBackgroundLightActiveColor": "#000000",
|
|
130
|
+
"amsterdamLinkOnBackgroundLightFontSize": {"narrow":{"value":"clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)","filePath":"./src/brand/amsterdam/typography.tokens.json","isSource":true,"original":{"value":"clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"},"name":"amsterdamTypographyTextLevel6FontSizeNarrow","attributes":{"category":"amsterdam","type":"typography","item":"text-level","subitem":"6","state":"font-size"},"path":["amsterdam","typography","text-level","6","font-size","narrow"]},"wide":{"value":"clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)","filePath":"./src/brand/amsterdam/typography.tokens.json","isSource":true,"original":{"value":"clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"},"name":"amsterdamTypographyTextLevel6FontSizeWide","attributes":{"category":"amsterdam","type":"typography","item":"text-level","subitem":"6","state":"font-size"},"path":["amsterdam","typography","text-level","6","font-size","wide"]}},
|
|
131
|
+
"amsterdamLinkOnBackgroundLightFocusColor": "#000000",
|
|
132
|
+
"amsterdamLinkOnBackgroundLightFocusTextDecoration": "underline",
|
|
133
|
+
"amsterdamLinkOnBackgroundLightHoverColor": "#000000",
|
|
134
|
+
"amsterdamLinkOnBackgroundLightHoverTextDecoration": "none",
|
|
135
|
+
"amsterdamLinkOnBackgroundLightVisitedColor": "#000000",
|
|
136
|
+
"amsterdamParagraphColor": "#000000",
|
|
137
|
+
"amsterdamParagraphFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
138
|
+
"amsterdamParagraphFontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
|
|
139
|
+
"amsterdamParagraphFontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
|
|
140
|
+
"amsterdamParagraphFontWeight": 400,
|
|
141
|
+
"amsterdamParagraphLineHeight": "1.6",
|
|
142
|
+
"amsterdamParagraphSmallFontSizeNarrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
|
|
143
|
+
"amsterdamParagraphSmallFontSizeWide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)",
|
|
144
|
+
"amsterdamParagraphSmallLineHeight": "1.6",
|
|
145
|
+
"amsterdamParagraphLargeFontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
|
|
146
|
+
"amsterdamParagraphLargeFontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
|
|
147
|
+
"amsterdamParagraphLargeLineHeight": "1.5",
|
|
148
|
+
"utrechtButtonBackgroundColor": "#004699",
|
|
149
|
+
"utrechtButtonColor": "#ffffff",
|
|
150
|
+
"utrechtButtonFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
151
|
+
"utrechtButtonLineHeight": "1.6",
|
|
152
|
+
"utrechtButtonPaddingInlineStart": "1rem",
|
|
153
|
+
"utrechtButtonPaddingInlineEnd": "1rem",
|
|
154
|
+
"utrechtButtonPaddingBlockStart": "0.5rem",
|
|
155
|
+
"utrechtButtonPaddingBlockEnd": "0.5rem",
|
|
156
|
+
"utrechtButtonDisabledBackgroundColor": "#B4B4B4",
|
|
157
|
+
"utrechtButtonDisabledColor": "#ffffff",
|
|
158
|
+
"utrechtButtonDisabledBorderColor": "transparent",
|
|
159
|
+
"utrechtButtonHoverBackgroundColor": "#00387A",
|
|
160
|
+
"utrechtButtonPrimaryActionBackgroundColor": "#004699",
|
|
161
|
+
"utrechtButtonPrimaryActionColor": "#ffffff",
|
|
162
|
+
"utrechtButtonPrimaryActionDisabledBackgroundColor": "#B4B4B4",
|
|
163
|
+
"utrechtButtonPrimaryActionHoverBackgroundColor": "#00387A",
|
|
164
|
+
"utrechtButtonSecondaryActionBackgroundColor": "#ffffff",
|
|
165
|
+
"utrechtButtonSecondaryActionColor": "#004699",
|
|
166
|
+
"utrechtButtonSecondaryActionBorderColor": "#004699",
|
|
167
|
+
"utrechtButtonSecondaryActionBorderWidth": "2px",
|
|
168
|
+
"utrechtButtonSecondaryActionHoverColor": "#00387A",
|
|
169
|
+
"utrechtButtonSecondaryActionHoverBorderColor": "#00387A",
|
|
170
|
+
"utrechtButtonSecondaryActionDisabledBackgroundColor": "#ffffff",
|
|
171
|
+
"utrechtButtonSecondaryActionDisabledColor": "#B4B4B4",
|
|
172
|
+
"utrechtButtonSecondaryActionDisabledBorderColor": "#B4B4B4",
|
|
173
|
+
"utrechtButtonSubtleBackgroundColor": "transparent",
|
|
174
|
+
"utrechtButtonSubtleBorderWidth": "2px",
|
|
175
|
+
"utrechtButtonSubtleColor": "#004699",
|
|
176
|
+
"utrechtButtonSubtleHoverBorderColor": "#767676",
|
|
177
|
+
"utrechtButtonSubtleDisabledBackgroundColor": "transparent",
|
|
178
|
+
"utrechtButtonSubtleDisabledColor": "#B4B4B4"
|
|
179
|
+
}
|