@commercetools-frontend/ui-kit 18.3.0 → 18.4.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.
@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
81
81
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
82
82
 
83
83
  // NOTE: This string will be replaced on build time with the package version.
84
- var version = "18.3.0";
84
+ var version = "18.4.0";
85
85
 
86
86
  exports.i18n = i18n__namespace;
87
87
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -81,7 +81,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
81
81
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
82
82
 
83
83
  // NOTE: This string will be replaced on build time with the package version.
84
- var version = "18.3.0";
84
+ var version = "18.4.0";
85
85
 
86
86
  exports.i18n = i18n__namespace;
87
87
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -34,6 +34,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
34
34
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
35
35
 
36
36
  // NOTE: This string will be replaced on build time with the package version.
37
- var version = "18.3.0";
37
+ var version = "18.4.0";
38
38
 
39
39
  export { version };
@@ -0,0 +1,283 @@
1
+ /*
2
+ THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
3
+
4
+ This file is created by the 'scripts/generate-design-tokens.js' script.
5
+ The variables should be updated in 'materials/internals/definition.yaml'.
6
+ */
7
+
8
+ :root {
9
+ --color-primary: hsl(175, 55%, 45%);
10
+ --color-primary-10: hsl(240, 66%, 19%);
11
+ --color-primary-20: hsl(175, 55%, 20%);
12
+ --color-primary-25: hsl(175, 55%, 25%);
13
+ --color-primary-30: hsl(175, 55%, 30%);
14
+ --color-primary-40: hsl(175, 55%, 40%);
15
+ --color-primary-85: hsl(175, 70%, 85%);
16
+ --color-primary-90: hsl(175, 70%, 90%);
17
+ --color-primary-95: hsl(175, 90%, 95%);
18
+ --color-accent: #213c45;
19
+ --color-accent-10: hsl(195, 35.2941176471%, 10%);
20
+ --color-accent-20: hsl(195, 35.2941176471%, 20%);
21
+ --color-accent-30: hsl(195, 35.2941176471%, 30%);
22
+ --color-accent-40: hsl(195, 35.2941176471%, 40%);
23
+ --color-accent-50: hsl(195, 35%, 50%);
24
+ --color-accent-60: hsl(195, 35.2941176471%, 60%);
25
+ --color-accent-85: hsl(195, 35%, 85%);
26
+ --color-accent-90: hsl(195, 35.2941176471%, 90%);
27
+ --color-accent-95: hsl(195, 35.2941176471%, 95%);
28
+ --color-accent-98: hsl(195, 35.2941176471%, 98%);
29
+ --color-brown-10: hsl(35, 90%, 10%);
30
+ --color-brown-20: hsl(35, 50%, 20%);
31
+ --color-brown-35: hsl(35, 25%, 35%);
32
+ --color-brown-50: hsl(35, 30%, 50%);
33
+ --color-brown-70: hsl(35, 40%, 70%);
34
+ --color-brown-85: hsl(35, 60%, 85%);
35
+ --color-brown-90: hsl(35, 90%, 90%);
36
+ --color-brown-95: hsl(35, 80%, 95%);
37
+ --color-brown-98: hsl(35, 90%, 98%);
38
+ --color-purple-10: hsl(248, 90%, 10%);
39
+ --color-purple-20: hsl(248, 50%, 20%);
40
+ --color-purple-35: hsl(248, 25%, 35%);
41
+ --color-purple-50: hsl(248, 30%, 50%);
42
+ --color-purple-70: hsl(248, 40%, 70%);
43
+ --color-purple-85: hsl(248, 60%, 85%);
44
+ --color-purple-90: hsl(248, 50%, 90%);
45
+ --color-purple-95: hsl(248, 80%, 95%);
46
+ --color-purple-98: hsl(248, 90%, 98%);
47
+ --color-turquoise-10: hsl(180, 90%, 10%);
48
+ --color-turquoise-20: hsl(180, 50%, 20%);
49
+ --color-turquoise-35: hsl(180, 25%, 35%);
50
+ --color-turquoise-50: hsl(180, 30%, 45%);
51
+ --color-turquoise-70: hsl(180, 40%, 70%);
52
+ --color-turquoise-85: hsl(180, 60%, 85%);
53
+ --color-turquoise-90: hsl(180, 40%, 90%);
54
+ --color-turquoise-95: hsl(180, 80%, 95%);
55
+ --color-turquoise-98: hsl(180, 90%, 98%);
56
+ --color-neutral: hsl(232, 18%, 80%);
57
+ --color-neutral-05: hsl(0deg 0% 80% / 5%);
58
+ --color-neutral-10: hsl(0deg 0% 80% / 10%);
59
+ --color-neutral-40: hsl(232, 18%, 40%);
60
+ --color-neutral-60: hsl(232, 18%, 60%);
61
+ --color-neutral-85: hsl(232, 18%, 85%);
62
+ --color-neutral-90: hsl(232, 18%, 90%);
63
+ --color-neutral-95: hsl(232, 18%, 95%);
64
+ --color-neutral-98: hsl(232, 18%, 98%);
65
+ --color-info: #078cdf;
66
+ --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
67
+ --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
68
+ --color-info-90: #ceebfd;
69
+ --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
70
+ --color-warning: #f16d0e;
71
+ --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
72
+ --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
73
+ --color-warning-60: hsl(35, 90%, 55%);
74
+ --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
75
+ --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
76
+ --color-error: #e60050;
77
+ --color-error-25: hsl(339.1304347826087, 100%, 25%);
78
+ --color-error-40: hsl(339.1304347826087, 100%, 40%);
79
+ --color-error-85: hsl(339.1304347826087, 100%, 85%);
80
+ --color-error-95: hsl(339.1304347826087, 100%, 95%);
81
+ --color-solid: #1a1a1a;
82
+ --color-solid-02: hsl(0deg 0% 10% / 2%);
83
+ --color-solid-05: hsl(0deg 0% 10% / 5%);
84
+ --color-solid-10: hsl(0deg 0% 10% / 10%);
85
+ --color-surface: #fff;
86
+ --color-transparent: transparent;
87
+ --color-success: hsl(152, 77%, 39%);
88
+ --color-success-25: hsl(155, 84%, 20%);
89
+ --color-success-40: hsl(155, 90%, 24%);
90
+ --color-success-85: hsl(144, 69%, 80%);
91
+ --color-success-95: hsl(141, 76%, 92%);
92
+ --border-radius-1: 1px;
93
+ --border-radius-2: 2px;
94
+ --border-radius-4: 4px;
95
+ --border-radius-6: 6px;
96
+ --border-radius-8: 8px;
97
+ --border-radius-20: 20px;
98
+ --border-width-1: 1px;
99
+ --border-width-2: 2px;
100
+ --font-family: 'Inter', system-ui;
101
+ --font-size-10: 0.75rem;
102
+ --font-size-12: 0.8rem;
103
+ --font-size-20: 0.875rem;
104
+ --font-size-30: 1rem;
105
+ --font-size-40: 1.125rem;
106
+ --font-size-50: 1.25rem;
107
+ --font-size-60: 1.5rem;
108
+ --font-size-70: 2rem;
109
+ --font-size-80: 2.5rem;
110
+ --font-size-90: 3rem;
111
+ --font-size-15: 0.9231rem;
112
+ --font-size-35: 1.0769rem;
113
+ --font-size-45: 1.2308rem;
114
+ --font-size-63: 1.5385rem;
115
+ --font-size-66: 1.8462rem;
116
+ --font-size-69: 2.4615rem;
117
+ --font-size-78: 3rem;
118
+ --font-weight-300: 300;
119
+ --font-weight-400: 400;
120
+ --font-weight-500: 500;
121
+ --font-weight-600: 600;
122
+ --font-weight-700: 700;
123
+ --line-height-05: 1.125rem;
124
+ --line-height-10: 1.25rem;
125
+ --line-height-18: 1.3rem;
126
+ --line-height-20: 1.375rem;
127
+ --line-height-30: 1.5rem;
128
+ --line-height-40: 1.625rem;
129
+ --line-height-50: 1.75rem;
130
+ --line-height-60: 2.125rem;
131
+ --shadow-0: none;
132
+ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
133
+ --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
134
+ --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
135
+ --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
136
+ --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
137
+ --shadow-6: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
138
+ --shadow-7: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
139
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
140
+ --shadow-8: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
141
+ --shadow-9: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
142
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
143
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
144
+ --shadow-10: 0 0 0 1px rgba(224, 230, 237, 0.5);
145
+ --shadow-11: 0 1px 0.5px rgba(0, 0, 0, 0.24),
146
+ 0 -1px 0.75px rgba(0, 0, 0, 0.12);
147
+ --shadow-12: 0 0 1px rgba(0, 0, 0, 0.25);
148
+ --shadow-13: 0 0 1px rgba(0, 0, 0, 0.25);
149
+ --shadow-14: 0 0 0.5px rgba(0, 0, 0, 0.1);
150
+ --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
151
+ --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
152
+ -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
153
+ --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
154
+ --constraint-scale: 100%;
155
+ --constraint-1: 42px;
156
+ --constraint-2: 84px;
157
+ --constraint-3: 142px;
158
+ --constraint-4: 184px;
159
+ --constraint-5: 242px;
160
+ --constraint-6: 284px;
161
+ --constraint-7: 342px;
162
+ --constraint-8: 384px;
163
+ --constraint-9: 442px;
164
+ --constraint-10: 484px;
165
+ --constraint-11: 542px;
166
+ --constraint-12: 584px;
167
+ --constraint-13: 642px;
168
+ --constraint-14: 684px;
169
+ --constraint-15: 742px;
170
+ --constraint-16: 784px;
171
+ --spacing-xs: 4px;
172
+ --spacing-s: 8px;
173
+ --spacing-m: 16px;
174
+ --spacing-l: 24px;
175
+ --spacing-xl: 32px;
176
+ --spacing-05: 2px;
177
+ --spacing-10: 4px;
178
+ --spacing-20: 8px;
179
+ --spacing-25: 12px;
180
+ --spacing-30: 16px;
181
+ --spacing-40: 24px;
182
+ --spacing-50: 32px;
183
+ --spacing-55: 40px;
184
+ --spacing-60: 48px;
185
+ --spacing-70: 64px;
186
+ --transition-linear-80ms: 80ms linear;
187
+ --transition-easeinout-150ms: 150ms ease-in-out;
188
+ --transition-standard: 200ms ease;
189
+ --break-point-mobile: 768px;
190
+ --break-point-desktop: 1024px;
191
+ --break-point-biggerdesktop: 1280px;
192
+ --break-point-giantdesktop: 1680px;
193
+ --break-point-jumbodesktop: 1920px;
194
+ --background-color-for-button-when-active: hsl(232, 18%, 95%);
195
+ --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
196
+ --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
197
+ --background-color-for-input: #fff;
198
+ --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
200
+ --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
201
+ --background-color-for-input-when-focused: #fff;
202
+ --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
203
+ --background-color-for-input-when-active: hsl(
204
+ 203.05555555555554,
205
+ 93.9130434783%,
206
+ 95%
207
+ );
208
+ --background-color-for-input-as-quiet: transparent;
209
+ --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
210
+ --background-color-for-localized-input-label: #fff;
211
+ --background-color-for-localized-input-label-when-readonly: hsl(
212
+ 232,
213
+ 18%,
214
+ 95%
215
+ );
216
+ --background-color-for-localized-input-label-when-disabled: hsl(
217
+ 232,
218
+ 18%,
219
+ 95%
220
+ );
221
+ --background-color-for-button-as-primary: #15a390;
222
+ --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
223
+ --background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
224
+ --background-color-for-button-as-primary-as-default-when-active: #15a390;
225
+ --background-color-for-button-as-primary-as-urgent: #f16d0e;
226
+ --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
227
+ --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
228
+ --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
229
+ --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
230
+ --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
231
+ --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
232
+ --background-color-for-loading-spinner-track: #213c45;
233
+ --background-color-for-loading-spinner-dot: #213c45;
234
+ --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
235
+ --border-color-for-input: hsl(232, 18%, 80%);
236
+ --border-color-for-input-when-focused: hsl(175, 55%, 45%);
237
+ --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
238
+ --border-color-for-input-when-readonly: #fff;
239
+ --border-color-for-input-when-error: #e60050;
240
+ --border-color-for-input-when-warning: #f16d0e;
241
+ --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
242
+ --border-color-for-input-as-quiet: transparent;
243
+ --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
244
+ --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
245
+ --border-radius-for-button-as-big: 4px;
246
+ --border-radius-for-button-as-medium: 4px;
247
+ --border-radius-for-input: 4px;
248
+ --border-width-for-input: 1px;
249
+ --border-width-for-input-when-warning: 1px;
250
+ --border-width-for-input-when-error: 1px;
251
+ --border-width-for-input-when-focused: 1px;
252
+ --font-color-for-input: #1a1a1a;
253
+ --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
254
+ --font-color-for-input-when-error: #e60050;
255
+ --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
256
+ --font-color-for-input-when-warning: #f16d0e;
257
+ --font-color-for-button-as-secondary: #1a1a1a;
258
+ --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
259
+ --font-color-for-button-as-flat-as-critical: #e60050;
260
+ --font-color-for-button-as-flat-as-critical-when-hovered: hsl(
261
+ 339.1304347826087,
262
+ 100%,
263
+ 25%
264
+ );
265
+ --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
266
+ --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
267
+ --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
268
+ --height-for-button-as-big: 40px;
269
+ --height-for-button-as-medium: 32px;
270
+ --height-for-button-as-small: 16px;
271
+ --height-for-input: 40px;
272
+ --height-for-input-as-small: 32px;
273
+ --placeholder-font-color-for-input: hsl(232, 18%, 60%);
274
+ --font-size-for-button: 0.875rem;
275
+ --font-size-for-input: 1rem;
276
+ --padding-for-input: 0 var(--spacing-30);
277
+ --padding-for-input-as-quiet: 0 var(--spacing-20);
278
+ --padding-for-button: 0 var(--spacing-30);
279
+ --shadow-for-input: none;
280
+ --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
281
+ --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
282
+ --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
283
+ }
@@ -0,0 +1,287 @@
1
+ /*
2
+ THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
3
+
4
+ This file is created by the 'scripts/generate-design-tokens.js' script.
5
+ The variables should be updated in 'materials/internals/definition.yaml'.
6
+ */
7
+
8
+ :root {
9
+ --color-primary: hsl(240, 64%, 58%);
10
+ --color-primary-10: hsl(240, 66%, 19%);
11
+ --color-primary-20: hsl(240, 45%, 33%);
12
+ --color-primary-25: hsl(240, 46%, 48%);
13
+ --color-primary-30: hsl(240, 46%, 53%);
14
+ --color-primary-40: hsl(240, 100%, 67%);
15
+ --color-primary-85: hsl(244, 100%, 84%);
16
+ --color-primary-90: hsl(243, 100%, 93%);
17
+ --color-primary-95: hsl(244, 100%, 97%);
18
+ --color-accent: #213c45;
19
+ --color-accent-10: hsl(195, 35.2941176471%, 10%);
20
+ --color-accent-20: hsl(195, 35.2941176471%, 20%);
21
+ --color-accent-30: hsl(195, 35.2941176471%, 30%);
22
+ --color-accent-40: hsl(195, 35.2941176471%, 40%);
23
+ --color-accent-50: hsl(195, 35%, 50%);
24
+ --color-accent-60: hsl(195, 35.2941176471%, 60%);
25
+ --color-accent-85: hsl(195, 35%, 85%);
26
+ --color-accent-90: hsl(195, 35.2941176471%, 90%);
27
+ --color-accent-95: hsl(195, 35.2941176471%, 95%);
28
+ --color-accent-98: hsl(195, 35.2941176471%, 98%);
29
+ --color-brown-10: hsl(35, 90%, 10%);
30
+ --color-brown-20: hsl(35, 50%, 20%);
31
+ --color-brown-35: hsl(35, 25%, 35%);
32
+ --color-brown-50: hsl(35, 30%, 50%);
33
+ --color-brown-70: hsl(35, 40%, 70%);
34
+ --color-brown-85: hsl(35, 60%, 85%);
35
+ --color-brown-90: hsl(35, 90%, 90%);
36
+ --color-brown-95: hsl(35, 80%, 95%);
37
+ --color-brown-98: hsl(35, 90%, 98%);
38
+ --color-purple-10: hsl(248, 90%, 10%);
39
+ --color-purple-20: hsl(248, 50%, 20%);
40
+ --color-purple-35: hsl(248, 25%, 35%);
41
+ --color-purple-50: hsl(248, 30%, 50%);
42
+ --color-purple-70: hsl(248, 40%, 70%);
43
+ --color-purple-85: hsl(248, 60%, 85%);
44
+ --color-purple-90: hsl(248, 50%, 90%);
45
+ --color-purple-95: hsl(248, 80%, 95%);
46
+ --color-purple-98: hsl(248, 90%, 98%);
47
+ --color-turquoise-10: hsl(180, 90%, 10%);
48
+ --color-turquoise-20: hsl(180, 50%, 20%);
49
+ --color-turquoise-35: hsl(180, 25%, 35%);
50
+ --color-turquoise-50: hsl(180, 30%, 45%);
51
+ --color-turquoise-70: hsl(180, 40%, 70%);
52
+ --color-turquoise-85: hsl(180, 60%, 85%);
53
+ --color-turquoise-90: hsl(180, 40%, 90%);
54
+ --color-turquoise-95: hsl(180, 80%, 95%);
55
+ --color-turquoise-98: hsl(180, 90%, 98%);
56
+ --color-neutral: hsl(232, 18%, 80%);
57
+ --color-neutral-05: hsl(0deg 0% 80% / 5%);
58
+ --color-neutral-10: hsl(0deg 0% 80% / 10%);
59
+ --color-neutral-40: hsl(232, 18%, 40%);
60
+ --color-neutral-60: hsl(232, 18%, 60%);
61
+ --color-neutral-85: hsl(232, 18%, 85%);
62
+ --color-neutral-90: hsl(232, 18%, 90%);
63
+ --color-neutral-95: hsl(232, 18%, 95%);
64
+ --color-neutral-98: hsl(232, 18%, 98%);
65
+ --color-info: #078cdf;
66
+ --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
67
+ --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
68
+ --color-info-90: #ceebfd;
69
+ --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
70
+ --color-warning: hsl(35, 90%, 45%);
71
+ --color-warning-25: hsl(33, 83%, 25%);
72
+ --color-warning-40: hsl(33, 80%, 34%);
73
+ --color-warning-60: hsl(35, 90%, 55%);
74
+ --color-warning-85: hsl(33, 90%, 80%);
75
+ --color-warning-95: hsl(45, 100%, 92%);
76
+ --color-error: hsl(3, 65%, 58%);
77
+ --color-error-25: hsl(4, 69%, 37%);
78
+ --color-error-40: hsl(3, 60%, 46%);
79
+ --color-error-85: hsl(1, 55%, 74%);
80
+ --color-error-95: hsl(349, 66%, 92%);
81
+ --color-solid: #1a1a1a;
82
+ --color-solid-02: hsl(0deg 0% 10% / 2%);
83
+ --color-solid-05: hsl(0deg 0% 10% / 5%);
84
+ --color-solid-10: hsl(0deg 0% 10% / 10%);
85
+ --color-surface: #fff;
86
+ --color-transparent: transparent;
87
+ --color-success: hsl(152, 77%, 39%);
88
+ --color-success-25: hsl(155, 84%, 20%);
89
+ --color-success-40: hsl(155, 90%, 24%);
90
+ --color-success-85: hsl(144, 69%, 80%);
91
+ --color-success-95: hsl(141, 76%, 92%);
92
+ --border-radius-1: 1px;
93
+ --border-radius-2: 2px;
94
+ --border-radius-4: 4px;
95
+ --border-radius-6: 6px;
96
+ --border-radius-8: 8px;
97
+ --border-radius-20: 20px;
98
+ --border-width-1: 1px;
99
+ --border-width-2: 2px;
100
+ --font-family: 'Inter', system-ui;
101
+ --font-size-10: 0.75rem;
102
+ --font-size-12: 0.8rem;
103
+ --font-size-20: 0.875rem;
104
+ --font-size-30: 1rem;
105
+ --font-size-40: 1.125rem;
106
+ --font-size-50: 1.25rem;
107
+ --font-size-60: 1.5rem;
108
+ --font-size-70: 2rem;
109
+ --font-size-80: 2.5rem;
110
+ --font-size-90: 3rem;
111
+ --font-size-15: 0.9231rem;
112
+ --font-size-35: 1.0769rem;
113
+ --font-size-45: 1.2308rem;
114
+ --font-size-63: 1.5385rem;
115
+ --font-size-66: 1.8462rem;
116
+ --font-size-69: 2.4615rem;
117
+ --font-size-78: 3rem;
118
+ --font-weight-300: 300;
119
+ --font-weight-400: 400;
120
+ --font-weight-500: 500;
121
+ --font-weight-600: 600;
122
+ --font-weight-700: 700;
123
+ --line-height-05: 1.125rem;
124
+ --line-height-10: 1.25rem;
125
+ --line-height-18: 1.3rem;
126
+ --line-height-20: 1.375rem;
127
+ --line-height-30: 1.5rem;
128
+ --line-height-40: 1.625rem;
129
+ --line-height-50: 1.75rem;
130
+ --line-height-60: 2.125rem;
131
+ --shadow-0: none;
132
+ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
133
+ --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
134
+ --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
135
+ --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
136
+ --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
137
+ --shadow-6: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
138
+ --shadow-7: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
139
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
140
+ --shadow-8: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
141
+ --shadow-9: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
142
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
143
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
144
+ --shadow-10: 0 0 0 1px rgba(224, 230, 237, 0.5);
145
+ --shadow-11: 0 1px 0.5px rgba(0, 0, 0, 0.24),
146
+ 0 -1px 0.75px rgba(0, 0, 0, 0.12);
147
+ --shadow-12: 0 0 1px rgba(0, 0, 0, 0.25);
148
+ --shadow-13: 0 0 1px rgba(0, 0, 0, 0.25);
149
+ --shadow-14: 0 0 0.5px rgba(0, 0, 0, 0.1);
150
+ --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
151
+ --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
152
+ -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
153
+ --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
154
+ --constraint-scale: 100%;
155
+ --constraint-1: 42px;
156
+ --constraint-2: 84px;
157
+ --constraint-3: 142px;
158
+ --constraint-4: 184px;
159
+ --constraint-5: 242px;
160
+ --constraint-6: 284px;
161
+ --constraint-7: 342px;
162
+ --constraint-8: 384px;
163
+ --constraint-9: 442px;
164
+ --constraint-10: 484px;
165
+ --constraint-11: 542px;
166
+ --constraint-12: 584px;
167
+ --constraint-13: 642px;
168
+ --constraint-14: 684px;
169
+ --constraint-15: 742px;
170
+ --constraint-16: 784px;
171
+ --spacing-xs: 4px;
172
+ --spacing-s: 8px;
173
+ --spacing-m: 16px;
174
+ --spacing-l: 24px;
175
+ --spacing-xl: 32px;
176
+ --spacing-05: 2px;
177
+ --spacing-10: 4px;
178
+ --spacing-20: 8px;
179
+ --spacing-25: 12px;
180
+ --spacing-30: 16px;
181
+ --spacing-40: 24px;
182
+ --spacing-50: 32px;
183
+ --spacing-55: 40px;
184
+ --spacing-60: 48px;
185
+ --spacing-70: 64px;
186
+ --transition-linear-80ms: 80ms linear;
187
+ --transition-easeinout-150ms: 150ms ease-in-out;
188
+ --transition-standard: 200ms ease;
189
+ --break-point-mobile: 768px;
190
+ --break-point-desktop: 1024px;
191
+ --break-point-biggerdesktop: 1280px;
192
+ --break-point-giantdesktop: 1680px;
193
+ --break-point-jumbodesktop: 1920px;
194
+ --background-color-for-button-when-active: hsl(243, 100%, 93%);
195
+ --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
196
+ --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
197
+ --background-color-for-input: #fff;
198
+ --background-color-for-input-when-selected: hsl(244, 100%, 97%);
199
+ --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
200
+ --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
201
+ --background-color-for-input-when-focused: #fff;
202
+ --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
203
+ --background-color-for-input-when-active: hsl(
204
+ 203.05555555555554,
205
+ 93.9130434783%,
206
+ 95%
207
+ );
208
+ --background-color-for-input-as-quiet: transparent;
209
+ --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
210
+ --background-color-for-localized-input-label: #fff;
211
+ --background-color-for-localized-input-label-when-readonly: hsl(
212
+ 232,
213
+ 18%,
214
+ 95%
215
+ );
216
+ --background-color-for-localized-input-label-when-disabled: hsl(
217
+ 232,
218
+ 18%,
219
+ 95%
220
+ );
221
+ --background-color-for-button-as-primary: hsl(240, 64%, 58%);
222
+ --background-color-for-button-as-primary-when-hovered: hsl(240, 100%, 67%);
223
+ --background-color-for-button-as-primary-as-default-when-hovered: hsl(
224
+ 240,
225
+ 100%,
226
+ 67%
227
+ );
228
+ --background-color-for-button-as-primary-as-default-when-active: hsl(
229
+ 240,
230
+ 46%,
231
+ 48%
232
+ );
233
+ --background-color-for-button-as-primary-as-urgent: hsl(35, 90%, 55%);
234
+ --background-color-for-stamp-as-primary: hsl(244, 100%, 97%);
235
+ --background-color-for-stamp-as-positive: hsl(141, 76%, 92%);
236
+ --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%);
237
+ --background-color-for-toggle-track-when-active: hsl(244, 100%, 84%);
238
+ --background-color-for-toggle-thumb-when-disabled: hsl(244, 100%, 84%);
239
+ --background-color-for-toggle-track-when-disabled: hsl(243, 100%, 93%);
240
+ --background-color-for-loading-spinner-track: hsl(243, 100%, 93%);
241
+ --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%);
242
+ --background-color-for-content-notification-when-success: hsl(141, 76%, 92%);
243
+ --border-color-for-input: hsl(232, 18%, 80%);
244
+ --border-color-for-input-when-focused: hsl(240, 100%, 67%);
245
+ --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
246
+ --border-color-for-input-when-readonly: #fff;
247
+ --border-color-for-input-when-error: #e60050;
248
+ --border-color-for-input-when-warning: #f16d0e;
249
+ --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
250
+ --border-color-for-input-as-quiet: transparent;
251
+ --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
252
+ --border-color-for-content-notification-when-success: hsl(144, 69%, 80%);
253
+ --border-radius-for-button-as-big: 4px;
254
+ --border-radius-for-button-as-medium: 4px;
255
+ --border-radius-for-input: 4px;
256
+ --border-width-for-input: 1px;
257
+ --border-width-for-input-when-warning: 1px;
258
+ --border-width-for-input-when-error: 1px;
259
+ --border-width-for-input-when-focused: 1px;
260
+ --font-color-for-input: #1a1a1a;
261
+ --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
262
+ --font-color-for-input-when-error: hsl(3, 60%, 46%);
263
+ --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
264
+ --font-color-for-input-when-warning: #f16d0e;
265
+ --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
266
+ --font-color-for-button-as-flat-when-hovered: hsl(240, 100%, 67%);
267
+ --font-color-for-button-as-flat-as-critical: hsl(3, 60%, 46%);
268
+ --font-color-for-button-as-flat-as-critical-when-hovered: hsl(3, 65%, 58%);
269
+ --font-color-for-view-switcher-button: hsl(240, 64%, 58%);
270
+ --font-color-for-stamp-as-positive: hsl(155, 90%, 24%);
271
+ --font-color-for-content-notification-when-success: hsl(152, 77%, 39%);
272
+ --height-for-button-as-big: 40px;
273
+ --height-for-button-as-medium: 32px;
274
+ --height-for-button-as-small: 16px;
275
+ --height-for-input: 40px;
276
+ --height-for-input-as-small: 32px;
277
+ --placeholder-font-color-for-input: hsl(232, 18%, 60%);
278
+ --font-size-for-button: 0.875rem;
279
+ --font-size-for-input: 1rem;
280
+ --padding-for-input: 0 var(--spacing-30);
281
+ --padding-for-input-as-quiet: 0 var(--spacing-20);
282
+ --padding-for-button: 0 var(--spacing-30);
283
+ --shadow-for-input: none;
284
+ --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
285
+ --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
286
+ --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
287
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/ui-kit",
3
3
  "description": "A preset of all the UI-Kit components.",
4
- "version": "18.3.0",
4
+ "version": "18.4.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,41 +24,41 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.20.13",
26
26
  "@babel/runtime-corejs3": "^7.20.13",
27
- "@commercetools-uikit/accessible-hidden": "18.3.0",
28
- "@commercetools-uikit/avatar": "18.3.0",
29
- "@commercetools-uikit/buttons": "18.3.0",
30
- "@commercetools-uikit/card": "18.3.0",
31
- "@commercetools-uikit/collapsible": "18.3.0",
32
- "@commercetools-uikit/collapsible-motion": "18.3.0",
33
- "@commercetools-uikit/collapsible-panel": "18.3.0",
34
- "@commercetools-uikit/constraints": "18.3.0",
35
- "@commercetools-uikit/data-table": "18.3.0",
36
- "@commercetools-uikit/data-table-manager": "18.3.0",
37
- "@commercetools-uikit/design-system": "18.3.0",
38
- "@commercetools-uikit/field-errors": "18.3.0",
39
- "@commercetools-uikit/field-label": "18.3.0",
40
- "@commercetools-uikit/fields": "18.3.0",
41
- "@commercetools-uikit/grid": "18.3.0",
42
- "@commercetools-uikit/hooks": "18.3.0",
43
- "@commercetools-uikit/i18n": "18.3.0",
44
- "@commercetools-uikit/icons": "18.3.0",
45
- "@commercetools-uikit/inputs": "18.3.0",
46
- "@commercetools-uikit/label": "18.3.0",
47
- "@commercetools-uikit/link": "18.3.0",
48
- "@commercetools-uikit/loading-spinner": "18.3.0",
49
- "@commercetools-uikit/messages": "18.3.0",
50
- "@commercetools-uikit/notifications": "18.3.0",
51
- "@commercetools-uikit/pagination": "18.3.0",
52
- "@commercetools-uikit/primary-action-dropdown": "18.3.0",
53
- "@commercetools-uikit/progress-bar": "18.3.0",
54
- "@commercetools-uikit/selectable-search-input": "18.3.0",
55
- "@commercetools-uikit/spacings": "18.3.0",
56
- "@commercetools-uikit/stamp": "18.3.0",
57
- "@commercetools-uikit/tag": "18.3.0",
58
- "@commercetools-uikit/text": "18.3.0",
59
- "@commercetools-uikit/tooltip": "18.3.0",
60
- "@commercetools-uikit/utils": "18.3.0",
61
- "@commercetools-uikit/view-switcher": "18.3.0"
27
+ "@commercetools-uikit/accessible-hidden": "18.4.0",
28
+ "@commercetools-uikit/avatar": "18.4.0",
29
+ "@commercetools-uikit/buttons": "18.4.0",
30
+ "@commercetools-uikit/card": "18.4.0",
31
+ "@commercetools-uikit/collapsible": "18.4.0",
32
+ "@commercetools-uikit/collapsible-motion": "18.4.0",
33
+ "@commercetools-uikit/collapsible-panel": "18.4.0",
34
+ "@commercetools-uikit/constraints": "18.4.0",
35
+ "@commercetools-uikit/data-table": "18.4.0",
36
+ "@commercetools-uikit/data-table-manager": "18.4.0",
37
+ "@commercetools-uikit/design-system": "18.4.0",
38
+ "@commercetools-uikit/field-errors": "18.4.0",
39
+ "@commercetools-uikit/field-label": "18.4.0",
40
+ "@commercetools-uikit/fields": "18.4.0",
41
+ "@commercetools-uikit/grid": "18.4.0",
42
+ "@commercetools-uikit/hooks": "18.4.0",
43
+ "@commercetools-uikit/i18n": "18.4.0",
44
+ "@commercetools-uikit/icons": "18.4.0",
45
+ "@commercetools-uikit/inputs": "18.4.0",
46
+ "@commercetools-uikit/label": "18.4.0",
47
+ "@commercetools-uikit/link": "18.4.0",
48
+ "@commercetools-uikit/loading-spinner": "18.4.0",
49
+ "@commercetools-uikit/messages": "18.4.0",
50
+ "@commercetools-uikit/notifications": "18.4.0",
51
+ "@commercetools-uikit/pagination": "18.4.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "18.4.0",
53
+ "@commercetools-uikit/progress-bar": "18.4.0",
54
+ "@commercetools-uikit/selectable-search-input": "18.4.0",
55
+ "@commercetools-uikit/spacings": "18.4.0",
56
+ "@commercetools-uikit/stamp": "18.4.0",
57
+ "@commercetools-uikit/tag": "18.4.0",
58
+ "@commercetools-uikit/text": "18.4.0",
59
+ "@commercetools-uikit/tooltip": "18.4.0",
60
+ "@commercetools-uikit/utils": "18.4.0",
61
+ "@commercetools-uikit/view-switcher": "18.4.0"
62
62
  },
63
63
  "devDependencies": {
64
64
  "moment": "2.30.1",