@commercetools-frontend/ui-kit 15.3.0 → 15.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.
Files changed (10) hide show
  1. package/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
  4. package/materials/custom-properties.css +108 -3
  5. package/materials/custom-properties.json +94 -3
  6. package/materials/internals/TOKENS.md +26 -13
  7. package/materials/internals/definition.yaml +457 -12
  8. package/materials/internals/tokens.story.js +63 -2
  9. package/materials/resets.css +41 -0
  10. package/package.json +36 -36
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.3.0";
83
+ var version = "15.4.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.3.0";
83
+ var version = "15.4.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -33,6 +33,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
33
33
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
34
34
 
35
35
  // NOTE: This string will be replaced on build time with the package version.
36
- var version = "15.3.0";
36
+ var version = "15.4.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --color-accent-95: hsl(195, 35.2941176471%, 95%);
18
18
  --color-accent-98: hsl(195, 35.2941176471%, 98%);
19
19
  --color-neutral: #ccc;
20
+ --color-neutral-05: hsl(0deg 0% 80% / 5%);
21
+ --color-neutral-10: hsl(0deg 0% 80% / 10%);
22
+ --color-neutral-40: hsl(0, 0%, 40%);
20
23
  --color-neutral-60: hsl(0, 0%, 60%);
21
24
  --color-neutral-90: hsl(0, 0%, 90%);
22
25
  --color-neutral-95: hsl(0, 0%, 95%);
@@ -24,18 +27,44 @@
24
27
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
25
28
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
26
29
  --color-warning: #f16d0e;
30
+ --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
27
31
  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
28
32
  --color-error: #e60050;
29
33
  --color-error-95: hsl(339.1304347826087, 100%, 95%);
30
34
  --color-solid: #1a1a1a;
35
+ --color-solid-05: hsl(0deg 0% 10% / 5%);
36
+ --color-solid-10: hsl(0deg 0% 10% / 10%);
31
37
  --color-surface: #fff;
32
38
  --border-radius-1: 1px;
33
39
  --border-radius-2: 2px;
34
40
  --border-radius-4: 4px;
35
41
  --border-radius-6: 6px;
36
42
  --border-radius-20: 20px;
37
- --font-family-body: 'Open Sans', sans-serif;
38
- --font-size-m: 1rem;
43
+ --font-family: 'Open Sans', sans-serif;
44
+ --font-size-10: 0.75rem;
45
+ --font-size-20: 0.875rem;
46
+ --font-size-30: 1rem;
47
+ --font-size-40: 1.125rem;
48
+ --font-size-50: 1.25rem;
49
+ --font-size-60: 1.5rem;
50
+ --font-size-15: 0.9231rem;
51
+ --font-size-35: 1.0769rem;
52
+ --font-size-45: 1.2308rem;
53
+ --font-size-63: 1.5385rem;
54
+ --font-size-66: 1.8462rem;
55
+ --font-size-70: 2.4615rem;
56
+ --font-weight-300: 300;
57
+ --font-weight-400: 400;
58
+ --font-weight-500: 500;
59
+ --font-weight-600: 600;
60
+ --font-weight-700: 700;
61
+ --line-height-10: 1.25rem;
62
+ --line-height-20: 1.375rem;
63
+ --line-height-30: 1.5rem;
64
+ --line-height-40: 1.625rem;
65
+ --line-height-50: 1.75rem;
66
+ --line-height-60: 2.125rem;
67
+ --shadow-0: none;
39
68
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
40
69
  --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
41
70
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
@@ -87,6 +116,25 @@
87
116
  --break-point-biggerdesktop: 1280px;
88
117
  --break-point-giantdesktop: 1680px;
89
118
  --break-point-jumbodesktop: 1920px;
119
+ --background-color-for-button-when-active: #fff;
120
+ --background-color-for-button-when-hovered: #fff;
121
+ --background-color-for-button-as-primary-when-active: #00b39e;
122
+ --background-color-for-button-as-primary-when-hovered: hsl(
123
+ 172.9608938547486,
124
+ 100%,
125
+ 25%
126
+ );
127
+ --background-color-for-button-as-icon-as-primary-when-active: #00b39e;
128
+ --background-color-for-button-as-icon-as-primary-when-hovered: #00b39e;
129
+ --background-color-for-button-as-icon-as-info-when-active: #078cdf;
130
+ --background-color-for-button-as-icon-as-info-when-hovered: #078cdf;
131
+ --background-color-for-button-as-urgent-when-active: #f16d0e;
132
+ --background-color-for-button-as-urgent-when-hovered: hsl(
133
+ 25.110132158590307,
134
+ 89.0196078431%,
135
+ 25%
136
+ );
137
+ --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 98%);
90
138
  --background-color-for-input: #fff;
91
139
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
92
140
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
@@ -97,6 +145,10 @@
97
145
  89.0196078431%,
98
146
  95%
99
147
  );
148
+ --border-for-button-as-secondary: none;
149
+ --border-for-button-as-secondary-when-hovered: none;
150
+ --border-for-button-as-secondary-when-active: none;
151
+ --border-for-card-when-raised: none;
100
152
  --border-color-for-input: hsl(0, 0%, 60%);
101
153
  --border-color-for-input-when-focused: #00b39e;
102
154
  --border-color-for-input-when-disabled: #ccc;
@@ -106,8 +158,19 @@
106
158
  --border-color-for-tag: hsl(0, 0%, 60%);
107
159
  --border-color-for-tag-warning: #f16d0e;
108
160
  --border-color-for-tag-when-focused: #00b39e;
161
+ --border-color-for-button-as-icon: #fff;
162
+ --border-color-for-button-as-icon-as-info: #078cdf;
163
+ --border-color-for-button-as-icon-as-primary: #00b39e;
164
+ --border-color-for-button-as-icon-when-disabled: #ccc;
165
+ --border-radius-for-button-as-big: 6px;
166
+ --border-radius-for-button-as-small: 4px;
167
+ --border-radius-for-button-as-icon-as-big: 6px;
168
+ --border-radius-for-button-as-icon-as-medium: 4px;
169
+ --border-radius-for-button-as-icon-as-small: 2px;
109
170
  --border-radius-for-input: 6px;
110
171
  --border-radius-for-tag: 2px;
172
+ --border-radius-for-card: 6px;
173
+ --font-color-for-text: #1a1a1a;
111
174
  --font-color-for-input: #1a1a1a;
112
175
  --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
113
176
  --font-color-for-input-when-error: #e60050;
@@ -116,11 +179,53 @@
116
179
  --font-color-for-tag: #1a1a1a;
117
180
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
118
181
  --font-color-for-text-when-inverted: #fff;
119
- --font-family: 'Open Sans', sans-serif;
182
+ --height-for-button-as-big: 32px;
183
+ --height-for-button-as-small: 24px;
184
+ --height-for-button-as-icon-as-big: 32px;
185
+ --height-for-button-as-icon-as-medium: 24px;
186
+ --height-for-button-as-icon-as-small: 16px;
120
187
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
188
+ --font-size-for-button: 1rem;
121
189
  --font-size-for-input: 1rem;
190
+ --font-size-for-text-as-h1: 2.4615rem;
191
+ --font-size-for-text-as-h2: 1.8462rem;
192
+ --font-size-for-text-as-h3: 1.5385rem;
193
+ --font-size-for-text-as-h4: 1.2308rem;
194
+ --font-size-for-text-as-h5: 1.0769rem;
195
+ --font-size-for-text-as-body: 1rem;
196
+ --font-size-for-text-as-detail: 0.9231rem;
197
+ --font-size-for-body: 13px;
198
+ --font-size-for-link: 1rem;
199
+ --line-height-for-text-as-h1: inherit;
200
+ --line-height-for-text-as-h2: inherit;
201
+ --line-height-for-text-as-h3: inherit;
202
+ --line-height-for-text-as-h4: inherit;
203
+ --line-height-for-text-as-h5: inherit;
204
+ --line-height-for-text-as-body: inherit;
205
+ --line-height-for-text-as-detail: inherit;
206
+ --font-weight-for-text-as-h1: 300;
207
+ --font-weight-for-text-as-h2: 300;
208
+ --font-weight-for-text-as-h3: 300;
209
+ --font-weight-for-text-as-h4: 400;
210
+ --font-weight-for-text-as-h5: 400;
211
+ --font-weight-for-text-as-body: 400;
212
+ --font-weight-for-text-as-detail: 400;
213
+ --font-weight-for-button: 400;
214
+ --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
215
+ 0 1px 1px 0 rgba(0, 0, 0, 0.24);
216
+ --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
217
+ 0 2px 4px 0 rgba(0, 0, 0, 0.24);
218
+ --shadow-for-button-when-hovered: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
219
+ 0 2px 4px 0 rgba(0, 0, 0, 0.24);
220
+ --shadow-for-button-when-active: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
221
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
222
+ inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
223
+ --shadow-for-button-when-disabled: 0 0 0 1px var(--color-neutral) inset;
122
224
  --shadow-box-tag-when-hovered: 0 1px 3px rgba(0, 0, 0, 0.12),
123
225
  0 1px 2px rgba(0, 0, 0, 0.24);
226
+ --shadow-for-card-when-raised: 0 1px 3px rgba(0, 0, 0, 0.12),
227
+ 0 1px 2px rgba(0, 0, 0, 0.24);
228
+ --font-size-m: 1rem;
124
229
  --big-button-height: 32px;
125
230
  --small-button-height: 24px;
126
231
  --size-height-input: 32px;
package/materials/custom-properties.json CHANGED
@@ -10,6 +10,9 @@
10
10
  "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
11
11
  "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
12
12
  "--color-neutral": "#ccc",
13
+ "--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
14
+ "--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
15
+ "--color-neutral-40": "hsl(0, 0%, 40%)",
13
16
  "--color-neutral-60": "hsl(0, 0%, 60%)",
14
17
  "--color-neutral-90": "hsl(0, 0%, 90%)",
15
18
  "--color-neutral-95": "hsl(0, 0%, 95%)",
@@ -17,18 +20,44 @@
17
20
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
18
21
  "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
19
22
  "--color-warning": "#f16d0e",
23
+ "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
20
24
  "--color-warning-95": "hsl(25.110132158590307, 89.0196078431%, 95%)",
21
25
  "--color-error": "#e60050",
22
26
  "--color-error-95": "hsl(339.1304347826087, 100%, 95%)",
23
27
  "--color-solid": "#1a1a1a",
28
+ "--color-solid-05": "hsl(0deg 0% 10% / 5%)",
29
+ "--color-solid-10": "hsl(0deg 0% 10% / 10%)",
24
30
  "--color-surface": "#fff",
25
31
  "--border-radius-1": "1px",
26
32
  "--border-radius-2": "2px",
27
33
  "--border-radius-4": "4px",
28
34
  "--border-radius-6": "6px",
29
35
  "--border-radius-20": "20px",
30
- "--font-family-body": "'Open Sans', sans-serif",
31
- "--font-size-m": "1rem",
36
+ "--font-family": "'Open Sans', sans-serif",
37
+ "--font-size-10": "0.75rem",
38
+ "--font-size-20": "0.875rem",
39
+ "--font-size-30": "1rem",
40
+ "--font-size-40": "1.125rem",
41
+ "--font-size-50": "1.25rem",
42
+ "--font-size-60": "1.5rem",
43
+ "--font-size-15": "0.9231rem",
44
+ "--font-size-35": "1.0769rem",
45
+ "--font-size-45": "1.2308rem",
46
+ "--font-size-63": "1.5385rem",
47
+ "--font-size-66": "1.8462rem",
48
+ "--font-size-70": "2.4615rem",
49
+ "--font-weight-300": "300",
50
+ "--font-weight-400": "400",
51
+ "--font-weight-500": "500",
52
+ "--font-weight-600": "600",
53
+ "--font-weight-700": "700",
54
+ "--line-height-10": "1.25rem",
55
+ "--line-height-20": "1.375rem",
56
+ "--line-height-30": "1.5rem",
57
+ "--line-height-40": "1.625rem",
58
+ "--line-height-50": "1.75rem",
59
+ "--line-height-60": "2.125rem",
60
+ "--shadow-0": "none",
32
61
  "--shadow-1": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
33
62
  "--shadow-2": "0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)",
34
63
  "--shadow-3": "0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)",
@@ -75,12 +104,27 @@
75
104
  "--break-point-biggerdesktop": "1280px",
76
105
  "--break-point-giantdesktop": "1680px",
77
106
  "--break-point-jumbodesktop": "1920px",
107
+ "--background-color-for-button-when-active": "#fff",
108
+ "--background-color-for-button-when-hovered": "#fff",
109
+ "--background-color-for-button-as-primary-when-active": "#00b39e",
110
+ "--background-color-for-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)",
111
+ "--background-color-for-button-as-icon-as-primary-when-active": "#00b39e",
112
+ "--background-color-for-button-as-icon-as-primary-when-hovered": "#00b39e",
113
+ "--background-color-for-button-as-icon-as-info-when-active": "#078cdf",
114
+ "--background-color-for-button-as-icon-as-info-when-hovered": "#078cdf",
115
+ "--background-color-for-button-as-urgent-when-active": "#f16d0e",
116
+ "--background-color-for-button-as-urgent-when-hovered": "hsl(25.110132158590307, 89.0196078431%, 25%)",
117
+ "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 98%)",
78
118
  "--background-color-for-input": "#fff",
79
119
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
80
120
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
81
121
  "--background-color-for-input-when-hovered": "hsl(0, 0%, 90%)",
82
122
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
83
123
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
124
+ "--border-for-button-as-secondary": "none",
125
+ "--border-for-button-as-secondary-when-hovered": "none",
126
+ "--border-for-button-as-secondary-when-active": "none",
127
+ "--border-for-card-when-raised": "none",
84
128
  "--border-color-for-input": "hsl(0, 0%, 60%)",
85
129
  "--border-color-for-input-when-focused": "#00b39e",
86
130
  "--border-color-for-input-when-disabled": "#ccc",
@@ -90,8 +134,19 @@
90
134
  "--border-color-for-tag": "hsl(0, 0%, 60%)",
91
135
  "--border-color-for-tag-warning": "#f16d0e",
92
136
  "--border-color-for-tag-when-focused": "#00b39e",
137
+ "--border-color-for-button-as-icon": "#fff",
138
+ "--border-color-for-button-as-icon-as-info": "#078cdf",
139
+ "--border-color-for-button-as-icon-as-primary": "#00b39e",
140
+ "--border-color-for-button-as-icon-when-disabled": "#ccc",
141
+ "--border-radius-for-button-as-big": "6px",
142
+ "--border-radius-for-button-as-small": "4px",
143
+ "--border-radius-for-button-as-icon-as-big": "6px",
144
+ "--border-radius-for-button-as-icon-as-medium": "4px",
145
+ "--border-radius-for-button-as-icon-as-small": "2px",
93
146
  "--border-radius-for-input": "6px",
94
147
  "--border-radius-for-tag": "2px",
148
+ "--border-radius-for-card": "6px",
149
+ "--font-color-for-text": "#1a1a1a",
95
150
  "--font-color-for-input": "#1a1a1a",
96
151
  "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
97
152
  "--font-color-for-input-when-error": "#e60050",
@@ -100,10 +155,46 @@
100
155
  "--font-color-for-tag": "#1a1a1a",
101
156
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
102
157
  "--font-color-for-text-when-inverted": "#fff",
103
- "--font-family": "'Open Sans', sans-serif",
158
+ "--height-for-button-as-big": "32px",
159
+ "--height-for-button-as-small": "24px",
160
+ "--height-for-button-as-icon-as-big": "32px",
161
+ "--height-for-button-as-icon-as-medium": "24px",
162
+ "--height-for-button-as-icon-as-small": "16px",
104
163
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
164
+ "--font-size-for-button": "1rem",
105
165
  "--font-size-for-input": "1rem",
166
+ "--font-size-for-text-as-h1": "2.4615rem",
167
+ "--font-size-for-text-as-h2": "1.8462rem",
168
+ "--font-size-for-text-as-h3": "1.5385rem",
169
+ "--font-size-for-text-as-h4": "1.2308rem",
170
+ "--font-size-for-text-as-h5": "1.0769rem",
171
+ "--font-size-for-text-as-body": "1rem",
172
+ "--font-size-for-text-as-detail": "0.9231rem",
173
+ "--font-size-for-body": "13px",
174
+ "--font-size-for-link": "1rem",
175
+ "--line-height-for-text-as-h1": "inherit",
176
+ "--line-height-for-text-as-h2": "inherit",
177
+ "--line-height-for-text-as-h3": "inherit",
178
+ "--line-height-for-text-as-h4": "inherit",
179
+ "--line-height-for-text-as-h5": "inherit",
180
+ "--line-height-for-text-as-body": "inherit",
181
+ "--line-height-for-text-as-detail": "inherit",
182
+ "--font-weight-for-text-as-h1": "300",
183
+ "--font-weight-for-text-as-h2": "300",
184
+ "--font-weight-for-text-as-h3": "300",
185
+ "--font-weight-for-text-as-h4": "400",
186
+ "--font-weight-for-text-as-h5": "400",
187
+ "--font-weight-for-text-as-body": "400",
188
+ "--font-weight-for-text-as-detail": "400",
189
+ "--font-weight-for-button": "400",
190
+ "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
191
+ "--shadow-for-button-when-focused": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
192
+ "--shadow-for-button-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
193
+ "--shadow-for-button-when-active": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)",
194
+ "--shadow-for-button-when-disabled": "0 0 0 1px var(--color-neutral) inset",
106
195
  "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
196
+ "--shadow-for-card-when-raised": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
197
+ "--font-size-m": "1rem",
107
198
  "--big-button-height": "32px",
108
199
  "--small-button-height": "24px",
109
200
  "--size-height-input": "32px",
package/materials/internals/TOKENS.md CHANGED
@@ -17,8 +17,7 @@ The tokens give semantic meaning to our plain palette of choices..
17
17
  - [Aspect: Component Group](#aspect-component-group)
18
18
  - [Aspect: State](#aspect-state)
19
19
  - [`active` vs `focused`](#active-vs-focused)
20
- - [Aspect: Modifier](#aspect-modifier)
21
- - [on-dark](#on-dark)
20
+ - [Aspect: Variant](#aspect-variant)
22
21
 
23
22
  ## What are Choices, Decisions and Design Tokens?
24
23
 
@@ -110,10 +109,28 @@ _This short [article](https://techpinions.com/snippet-design-is-the-difference-b
110
109
  ## Token Structure
111
110
 
112
111
  Our design tokens aim to be human-readable and easy to comprehend. We settled on
113
- a format which contains separator words (`for`, `when` and `on`) to help distinguish
112
+ a format which contains separator words (**`for`, `when` and `as`**) to help distinguish
114
113
  between the different aspects of a design token.
115
114
 
116
- <img src="https://pbs.twimg.com/media/DsD1XN-XgAAb9lx.jpg" alt="token-structure" width="552" />
115
+ Each token should follow this schema:
116
+
117
+ 1. component group
118
+ 2. variant (optional and multiple of them can be applied)
119
+ 3. state (optional)
120
+
121
+ ```
122
+ <attribute>-for-<component-group>-as-<variant>-when-<state>
123
+ ```
124
+
125
+ **Examples:**
126
+
127
+ ```
128
+ -- background-color-for-tag
129
+ -- font-color-for-button-when-disabled
130
+ -- font-size-for-text-as-body-as-small
131
+ -- border-for-button-as-secondary-when-hovered
132
+ -- border-radius-for-button-as-icon-as-small-when-disabled
133
+ ```
117
134
 
118
135
  ## Aspects
119
136
 
@@ -137,10 +154,10 @@ More specific tokens can be introduced
137
154
  --font-color-when-disabled
138
155
  ```
139
156
 
140
- ...or for a specific **modifier**
157
+ ...or for a specific **variant**
141
158
 
142
159
  ```
143
- --font-color-on-dark
160
+ --font-size-for-text-as-h1
144
161
  ```
145
162
 
146
163
  This leads us to four different aspects of a design token:
@@ -148,7 +165,7 @@ This leads us to four different aspects of a design token:
148
165
  - Property
149
166
  - Component Group
150
167
  - State
151
- - Modifier
168
+ - Variant
152
169
 
153
170
  Example:
154
171
 
@@ -207,11 +224,7 @@ In other words: An element in `active` state must also be in the `focused` state
207
224
 
208
225
  _This explanation was taken from https://stackoverflow.com/a/1678020 and modified slightly._
209
226
 
210
- ### Aspect: Modifier
227
+ ### Aspect: Variant
211
228
 
212
- Some elements need to look different in certain situations. Modifiers allow us to
229
+ Some elements have different variants such as `text` has a variant of `h1` or `body`. Variants allow us to
213
230
  represent that information in the design token.
214
-
215
- #### `on-dark`
216
-
217
- Usually a light background is assumed for elements. We use `on-dark` to allow using a different value in situations where the component needs to be used on a dark background.
package/materials/internals/definition.yaml CHANGED
@@ -22,7 +22,12 @@
22
22
  # files in different format (css, json, js, ...).
23
23
  #
24
24
  # The names of decisions in this file need to follow this format:
25
+ # <attribute>-for-<component-group>
26
+ # <attribute>-for-<component-group>-as-<variant>
25
27
  # <attribute>-for-<component-group>-when-<state>-
28
+ # <attribute>-for-<component-group>-as-<variant>-when-<state>
29
+ # <attribute>-for-<component-group>-as-<variant>-as-<variant>-
30
+ # <attribute>-for-<component-group>-as-<variant>-as-<variant>-when-<state>-
26
31
 
27
32
  choiceGroupsByTheme:
28
33
  default:
@@ -42,6 +47,9 @@ choiceGroupsByTheme:
42
47
  color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
43
48
  color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
44
49
  color-neutral: '#ccc'
50
+ color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
51
+ color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
52
+ color-neutral-40: 'hsl(0, 0%, 40%)'
45
53
  color-neutral-60: 'hsl(0, 0%, 60%)'
46
54
  color-neutral-90: 'hsl(0, 0%, 90%)'
47
55
  color-neutral-95: 'hsl(0, 0%, 95%)'
@@ -49,10 +57,13 @@ choiceGroupsByTheme:
49
57
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
50
58
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
51
59
  color-warning: '#f16d0e'
60
+ color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
52
61
  color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
53
62
  color-error: '#e60050'
54
63
  color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
55
64
  color-solid: '#1a1a1a'
65
+ color-solid-05: 'hsl(0deg 0% 10% / 5%)'
66
+ color-solid-10: 'hsl(0deg 0% 10% / 10%)'
56
67
  color-surface: '#fff'
57
68
 
58
69
  borderRadiuses:
@@ -68,16 +79,51 @@ choiceGroupsByTheme:
68
79
  label: Font families
69
80
  prefix: font-family
70
81
  choices:
71
- font-family-body: "'Open Sans', sans-serif"
82
+ font-family: "'Open Sans', sans-serif"
72
83
  fontSizes:
73
84
  label: Font sizes
74
85
  prefix: font-size
75
86
  choices:
76
- font-size-m: '1rem'
87
+ font-size-10: '0.75rem'
88
+ font-size-20: '0.875rem'
89
+ font-size-30: '1rem'
90
+ font-size-40: '1.125rem'
91
+ font-size-50: '1.25rem'
92
+ font-size-60: '1.5rem'
93
+ # These font sizes are in rems based on a root font-size of 13px and they will be removed when we replace the default theme.
94
+ font-size-15: '0.9231rem'
95
+ font-size-35: '1.0769rem'
96
+ font-size-45: '1.2308rem'
97
+ font-size-63: '1.5385rem'
98
+ font-size-66: '1.8462rem'
99
+ font-size-70: '2.4615rem'
100
+
101
+ fontWeights:
102
+ label: Font weights
103
+ prefix: font-weight
104
+ choices:
105
+ font-weight-300: '300'
106
+ font-weight-400: '400'
107
+ font-weight-500: '500'
108
+ font-weight-600: '600'
109
+ font-weight-700: '700'
110
+
111
+ lineHeights:
112
+ label: Line heights
113
+ prefix: line-height
114
+ choices:
115
+ line-height-10: '1.25rem'
116
+ line-height-20: '1.375rem'
117
+ line-height-30: '1.5rem'
118
+ line-height-40: '1.625rem'
119
+ line-height-50: '1.75rem'
120
+ line-height-60: '2.125rem'
121
+
77
122
  shadows:
78
123
  label: Shadows
79
124
  prefix: shadow
80
125
  choices:
126
+ shadow-0: 'none'
81
127
  shadow-1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
82
128
  shadow-2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
83
129
  shadow-3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)'
@@ -147,9 +193,12 @@ choiceGroupsByTheme:
147
193
  prefix: color
148
194
  description: Dark theme colors overwrite
149
195
  choices:
150
- color-primary: '#f78d26'
151
- color-solid: '#fff'
152
- color-surface: '#1a1a1a'
196
+ color-primary: '#00b39e'
197
+ fontFamilies:
198
+ label: Font families
199
+ prefix: font-family
200
+ choices:
201
+ font-family: "'Inter', system-ui"
153
202
 
154
203
  states:
155
204
  active: 'Trigged while the user is currently interacting with the element'
@@ -169,7 +218,44 @@ states:
169
218
  description: 'When the element is selected'
170
219
  inverted:
171
220
  description: 'When the element has inverted colors'
221
+ raised:
222
+ description: 'When the element is raised'
223
+
224
+ variants:
225
+ h1:
226
+ description: 'H1 text element'
227
+ h2:
228
+ description: 'H2 text element'
229
+ h3:
230
+ description: 'H3 text element'
231
+ h4:
232
+ description: 'H4 text element'
233
+ h5:
234
+ description: 'H5 text element'
235
+ body:
236
+ description: 'Body text element'
237
+ detail:
238
+ description: 'Detail text element'
239
+ icon:
240
+ description: 'Icon'
241
+ small:
242
+ description: 'To differentiate component small size'
243
+ medium:
244
+ description: 'To differentiate component medium size'
245
+ big:
246
+ description: 'To differentiate component big size'
247
+ primary:
248
+ description: 'To differentiate component primary type'
249
+ secondary:
250
+ description: 'To differentiate component secondary type'
251
+ urgent:
252
+ description: 'To differentiate component urgent type'
253
+ info:
254
+ description: 'To differentiate component info type'
255
+
172
256
  componentGroups:
257
+ button:
258
+ description: 'Button elements'
173
259
  input:
174
260
  description: 'Input elements'
175
261
  tag:
@@ -178,6 +264,12 @@ componentGroups:
178
264
  description: 'Tag elements with type warning'
179
265
  text:
180
266
  description: 'Text elements'
267
+ body:
268
+ description: 'Document body element'
269
+ card:
270
+ description: 'Card element'
271
+ link:
272
+ description: 'Link elements'
181
273
 
182
274
  decisionGroupsByTheme:
183
275
  default:
@@ -185,6 +277,28 @@ decisionGroupsByTheme:
185
277
  label: Background Colors
186
278
  prefix: background-color
187
279
  decisions:
280
+ background-color-for-button-when-active:
281
+ choice: color-surface
282
+ background-color-for-button-when-hovered:
283
+ choice: color-surface
284
+ background-color-for-button-as-primary-when-active:
285
+ choice: color-primary
286
+ background-color-for-button-as-primary-when-hovered:
287
+ choice: color-primary-25
288
+ background-color-for-button-as-icon-as-primary-when-active:
289
+ choice: color-primary
290
+ background-color-for-button-as-icon-as-primary-when-hovered:
291
+ choice: color-primary
292
+ background-color-for-button-as-icon-as-info-when-active:
293
+ choice: color-info
294
+ background-color-for-button-as-icon-as-info-when-hovered:
295
+ choice: color-info
296
+ background-color-for-button-as-urgent-when-active:
297
+ choice: color-warning
298
+ background-color-for-button-as-urgent-when-hovered:
299
+ choice: color-warning-25
300
+ background-color-for-button-when-disabled:
301
+ choice: color-accent-98
188
302
  background-color-for-input:
189
303
  description: ''
190
304
  choice: color-surface
@@ -204,6 +318,19 @@ decisionGroupsByTheme:
204
318
  description: ''
205
319
  choice: color-warning-95
206
320
 
321
+ borders:
322
+ label: Borders
323
+ prefix: border
324
+ decisions:
325
+ border-for-button-as-secondary:
326
+ choice: 'none'
327
+ border-for-button-as-secondary-when-hovered:
328
+ choice: 'none'
329
+ border-for-button-as-secondary-when-active:
330
+ choice: 'none'
331
+ border-for-card-when-raised:
332
+ choice: 'none'
333
+
207
334
  borderColors:
208
335
  label: Border Colors
209
336
  prefix: border-color
@@ -235,17 +362,37 @@ decisionGroupsByTheme:
235
362
  border-color-for-tag-when-focused:
236
363
  description: ''
237
364
  choice: color-primary
365
+ border-color-for-button-as-icon:
366
+ choice: color-surface
367
+ border-color-for-button-as-icon-as-info:
368
+ choice: color-info
369
+ border-color-for-button-as-icon-as-primary:
370
+ choice: color-primary
371
+ border-color-for-button-as-icon-when-disabled:
372
+ choice: color-neutral
238
373
 
239
374
  borderRadiuses:
240
375
  label: Border Radius
241
376
  prefix: border-radius
242
377
  decisions:
378
+ border-radius-for-button-as-big:
379
+ choice: border-radius-6
380
+ border-radius-for-button-as-small:
381
+ choice: border-radius-4
382
+ border-radius-for-button-as-icon-as-big:
383
+ choice: border-radius-6
384
+ border-radius-for-button-as-icon-as-medium:
385
+ choice: border-radius-4
386
+ border-radius-for-button-as-icon-as-small:
387
+ choice: border-radius-2
243
388
  border-radius-for-input:
244
389
  description: ''
245
390
  choice: border-radius-6
246
391
  border-radius-for-tag:
247
392
  description: ''
248
393
  choice: border-radius-2
394
+ border-radius-for-card:
395
+ choice: border-radius-6
249
396
  # We don't have font families in choices yet, so we can't have decisions for
250
397
  # them
251
398
 
@@ -253,6 +400,9 @@ decisionGroupsByTheme:
253
400
  label: Font Colors
254
401
  prefix: font-color
255
402
  decisions:
403
+ font-color-for-text:
404
+ description: ''
405
+ choice: color-solid
256
406
  font-color-for-input:
257
407
  description: ''
258
408
  choice: color-solid
@@ -278,13 +428,20 @@ decisionGroupsByTheme:
278
428
  description: ''
279
429
  choice: color-surface
280
430
 
281
- fontFamily:
282
- label: Font family
283
- prefix: font-family
431
+ heights:
432
+ label: Height
433
+ prefix: height
284
434
  decisions:
285
- font-family:
286
- description: ''
287
- choice: font-family-body
435
+ height-for-button-as-big:
436
+ choice: '32px'
437
+ height-for-button-as-small:
438
+ choice: '24px'
439
+ height-for-button-as-icon-as-big:
440
+ choice: '32px'
441
+ height-for-button-as-icon-as-medium:
442
+ choice: '24px'
443
+ height-for-button-as-icon-as-small:
444
+ choice: '16px'
288
445
 
289
446
  placeholderFontColors:
290
447
  label: Placeholder font colors
@@ -298,24 +455,142 @@ decisionGroupsByTheme:
298
455
  label: Font Sizes
299
456
  prefix: font-size
300
457
  decisions:
458
+ font-size-for-button:
459
+ description: ''
460
+ choice: font-size-30
301
461
  font-size-for-input:
302
462
  description: ''
303
- choice: font-size-m
463
+ choice: font-size-30
464
+ font-size-for-text-as-h1:
465
+ description: ''
466
+ choice: font-size-70
467
+ font-size-for-text-as-h2:
468
+ description: ''
469
+ choice: font-size-66
470
+ font-size-for-text-as-h3:
471
+ description: ''
472
+ choice: font-size-63
473
+ font-size-for-text-as-h4:
474
+ description: ''
475
+ choice: font-size-45
476
+ font-size-for-text-as-h5:
477
+ description: ''
478
+ choice: font-size-35
479
+ font-size-for-text-as-body:
480
+ description: ''
481
+ choice: font-size-30
482
+ font-size-for-text-as-detail:
483
+ description: ''
484
+ choice: font-size-15
485
+ font-size-for-body:
486
+ description: ''
487
+ choice: '13px'
488
+ font-size-for-link:
489
+ description: ''
490
+ choice: font-size-30
491
+
492
+ lineHeights:
493
+ label: Line Heights
494
+ prefix: line-height
495
+ decisions:
496
+ line-height-for-text-as-h1:
497
+ description: ''
498
+ choice: 'inherit'
499
+ line-height-for-text-as-h2:
500
+ description: ''
501
+ choice: 'inherit'
502
+ line-height-for-text-as-h3:
503
+ description: ''
504
+ choice: 'inherit'
505
+ line-height-for-text-as-h4:
506
+ description: ''
507
+ choice: 'inherit'
508
+ line-height-for-text-as-h5:
509
+ description: ''
510
+ choice: 'inherit'
511
+ line-height-for-text-as-body:
512
+ description: ''
513
+ choice: 'inherit'
514
+ line-height-for-text-as-detail:
515
+ description: ''
516
+ choice: 'inherit'
517
+
518
+ fontWeights:
519
+ label: Font Weights
520
+ prefix: font-weight
521
+ decisions:
522
+ font-weight-for-text-as-h1:
523
+ description: ''
524
+ choice: font-weight-300
525
+ font-weight-for-text-as-h2:
526
+ description: ''
527
+ choice: font-weight-300
528
+ font-weight-for-text-as-h3:
529
+ description: ''
530
+ choice: font-weight-300
531
+ font-weight-for-text-as-h4:
532
+ description: ''
533
+ choice: font-weight-400
534
+ font-weight-for-text-as-h5:
535
+ description: ''
536
+ choice: font-weight-400
537
+ font-weight-for-text-as-body:
538
+ description: ''
539
+ choice: font-weight-400
540
+ font-weight-for-text-as-detail:
541
+ description: ''
542
+ choice: font-weight-400
543
+ font-weight-for-button:
544
+ choice: font-weight-400
304
545
 
305
546
  shadows:
306
547
  label: Shadows
307
548
  prefix: shadow
308
549
  decisions:
550
+ shadow-for-button:
551
+ choice: shadow-7
552
+ shadow-for-button-when-focused:
553
+ choice: shadow-8
554
+ shadow-for-button-when-hovered:
555
+ choice: shadow-8
556
+ shadow-for-button-when-active:
557
+ choice: shadow-9
558
+ shadow-for-button-when-disabled:
559
+ choice: '0 0 0 1px var(--color-neutral) inset'
309
560
  shadow-box-tag-when-hovered:
310
561
  description: ''
311
562
  deprecated: true
312
563
  choice: shadow-1
564
+ shadow-for-card-when-raised:
565
+ choice: shadow-1
313
566
 
314
567
  test:
315
568
  backgroundColors:
316
569
  label: Background Colors
317
570
  prefix: background-color
318
571
  decisions:
572
+ background-color-for-button-when-active:
573
+ choice: color-solid-10
574
+ background-color-for-button-when-hovered:
575
+ choice: color-solid-05
576
+ background-color-for-button-as-primary-when-active:
577
+ choice: '#15A390' # color-primary with 10% black opacity
578
+ background-color-for-button-as-primary-when-hovered:
579
+ choice: '#17AB97' # color-primary with 5% black opacity
580
+ background-color-for-button-as-icon-as-primary-when-active:
581
+ choice: '#15A390'
582
+ background-color-for-button-as-icon-as-primary-when-hovered:
583
+ choice: color-primary
584
+ background-color-for-button-as-icon-as-info-when-active:
585
+ choice: '#057FCC' # color-info with 10% black opacity
586
+ background-color-for-button-as-icon-as-info-when-hovered:
587
+ choice: color-info
588
+ background-color-for-button-as-urgent-when-active:
589
+ choice: '#DC630A' # color-warning with 10% black opacity
590
+ background-color-for-button-as-urgent-when-hovered:
591
+ choice: '#E7680D' # color-warning with 5% black opacity
592
+ background-color-for-button-when-disabled:
593
+ choice: color-neutral-95
319
594
  background-color-for-tag:
320
595
  description: ''
321
596
  choice: color-warning-95
@@ -323,6 +598,175 @@ decisionGroupsByTheme:
323
598
  description: ''
324
599
  choice: color-neutral-95
325
600
 
601
+ borders:
602
+ label: Borders
603
+ prefix: border
604
+ decisions:
605
+ border-for-button-as-secondary:
606
+ choice: '1px solid var(--color-neutral)'
607
+ border-for-button-as-secondary-when-hovered:
608
+ choice: '1px solid var(--color-neutral)'
609
+ border-for-button-as-secondary-when-active:
610
+ choice: '1px solid var(--color-neutral)'
611
+ border-for-card-when-raised:
612
+ choice: '1px solid var(--color-neutral-90)'
613
+
614
+ borderColors:
615
+ label: Border Colors
616
+ prefix: border-color
617
+ decisions:
618
+ border-color-for-button-as-icon:
619
+ choice: color-neutral
620
+ border-color-for-button-as-icon-as-info:
621
+ choice: color-neutral
622
+ border-color-for-button-as-icon-as-primary:
623
+ choice: color-neutral
624
+ border-color-for-button-as-icon-when-disabled:
625
+ choice: color-surface
626
+ border-color-for-card-when-raised:
627
+ choice: color-neutral-90
628
+
629
+ borderRadiuses:
630
+ label: Border radiuses
631
+ prefix: border-radius
632
+ decisions:
633
+ border-radius-for-button-as-big:
634
+ choice: border-radius-4
635
+ border-radius-for-button-as-small:
636
+ choice: border-radius-4
637
+ border-radius-for-button-as-icon-as-big:
638
+ choice: border-radius-4
639
+ border-radius-for-button-as-icon-as-medium:
640
+ choice: border-radius-4
641
+ border-radius-for-button-as-icon-as-small:
642
+ choice: border-radius-2
643
+ border-radius-for-card:
644
+ choice: border-radius-4
645
+
646
+ fontSizes:
647
+ label: Font Sizes
648
+ prefix: font-size
649
+ decisions:
650
+ font-size-for-input:
651
+ description: ''
652
+ choice: font-size-30
653
+ font-size-for-text-as-h1:
654
+ description: ''
655
+ choice: font-size-60
656
+ font-size-for-text-as-h2:
657
+ description: ''
658
+ choice: font-size-60
659
+ font-size-for-text-as-h3:
660
+ description: ''
661
+ choice: font-size-40
662
+ font-size-for-text-as-h4:
663
+ description: ''
664
+ choice: font-size-30
665
+ font-size-for-text-as-h5:
666
+ description: ''
667
+ choice: font-size-30
668
+ font-size-for-text-as-body:
669
+ description: ''
670
+ choice: font-size-30
671
+ font-size-for-text-as-detail:
672
+ description: ''
673
+ choice: font-size-20
674
+ font-size-for-body:
675
+ description: ''
676
+ choice: '16px'
677
+ font-size-for-button:
678
+ description: ''
679
+ choice: font-size-20
680
+ font-size-for-link:
681
+ description: ''
682
+ choice: 'inherit'
683
+
684
+ lineHeights:
685
+ label: Line Heights
686
+ prefix: line-height
687
+ decisions:
688
+ line-height-for-text-as-h1:
689
+ description: ''
690
+ choice: line-height-50
691
+ line-height-for-text-as-h2:
692
+ description: ''
693
+ choice: line-height-50
694
+ line-height-for-text-as-h3:
695
+ description: ''
696
+ choice: line-height-30
697
+ line-height-for-text-as-h4:
698
+ description: ''
699
+ choice: line-height-20
700
+ line-height-for-text-as-h5:
701
+ description: ''
702
+ choice: line-height-20
703
+ line-height-for-text-as-body:
704
+ description: ''
705
+ choice: line-height-40
706
+ line-height-for-text-as-detail:
707
+ description: ''
708
+ choice: line-height-20
709
+
710
+ fontWeights:
711
+ label: Font Weights
712
+ prefix: font-weight
713
+ decisions:
714
+ font-weight-for-text-as-h1:
715
+ description: ''
716
+ choice: font-weight-500
717
+ font-weight-for-text-as-h2:
718
+ description: ''
719
+ choice: font-weight-500
720
+ font-weight-for-text-as-h3:
721
+ description: ''
722
+ choice: font-weight-500
723
+ font-weight-for-text-as-h4:
724
+ description: ''
725
+ choice: font-weight-500
726
+ font-weight-for-text-as-h5:
727
+ description: ''
728
+ choice: font-weight-500
729
+ font-weight-for-text-as-body:
730
+ description: ''
731
+ choice: font-weight-400
732
+ font-weight-for-text-as-detail:
733
+ description: ''
734
+ choice: font-weight-400
735
+ font-weight-for-button:
736
+ choice: font-weight-500
737
+
738
+ heights:
739
+ label: Heights
740
+ prefix: height
741
+ decisions:
742
+ height-for-button-as-big:
743
+ choice: '40px'
744
+ height-for-button-as-small:
745
+ choice: '32px'
746
+ height-for-button-as-icon-as-big:
747
+ choice: '40px'
748
+ height-for-button-as-icon-as-medium:
749
+ choice: '32px'
750
+ height-for-button-as-icon-as-small:
751
+ choice: '16px'
752
+
753
+ shadows:
754
+ label: Shadows
755
+ prefix: shadow
756
+ decisions:
757
+ shadow-for-button:
758
+ choice: shadow-0
759
+ shadow-for-button-when-focused:
760
+ choice: shadow-0
761
+ shadow-for-button-when-hovered:
762
+ choice: shadow-0
763
+ shadow-for-button-when-active:
764
+ choice: shadow-0
765
+ shadow-for-button-when-disabled:
766
+ choice: shadow-0
767
+ shadow-for-card-when-raised:
768
+ choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
769
+
326
770
  # These tokens are deprecated as they don't follow our naming patterns.
327
771
  # Ideally they should be replaced with new tokens and not be used anymore.
328
772
  # But since we have not yet introduced alternatives for them it's still okay to
@@ -335,6 +779,7 @@ decisionGroupsByTheme:
335
779
  # break. Upgrading those parts is not something the ui-kit teams can do on their
336
780
  # own so we kept the old tokens around even though proper shadow tokens exist).
337
781
  plainTokens:
782
+ font-size-m: '1rem'
338
783
  big-button-height: 32px
339
784
  small-button-height: 24px
340
785
  size-height-input: 32px
package/materials/internals/tokens.story.js CHANGED
@@ -79,8 +79,6 @@ const getChoiceValue = (choiceName, theme) => {
79
79
  choiceName
80
80
  );
81
81
 
82
- if (!defaultChoice)
83
- throw new Error(`Tried to get value of non-existant choice ${choiceName}`);
84
82
  return defaultChoice
85
83
  ? themeChoice?.[choiceName] ?? defaultChoice[choiceName]
86
84
  : undefined;
@@ -119,6 +117,14 @@ const filterComponentGroupsGroupValues = (componentGroups, searchText) =>
119
117
  state.description.toLowerCase().includes(searchText.toLowerCase()))
120
118
  );
121
119
 
120
+ const filterVariantsGroupValues = (variants, searchText) =>
121
+ Object.entries(variants).filter(
122
+ ([key, state]) =>
123
+ key.toLowerCase().includes(searchText.toLowerCase()) ||
124
+ (state.description &&
125
+ state.description.toLowerCase().includes(searchText.toLowerCase()))
126
+ );
127
+
122
128
  const getDefaultThemeChoiceGroupProperty = (choiceGroup, property) =>
123
129
  choiceGroupsByTheme.default[choiceGroup][property];
124
130
 
@@ -342,6 +348,41 @@ ComponentGroupsGroup.propTypes = {
342
348
  }).isRequired,
343
349
  };
344
350
 
351
+ const VariantsGroup = (props) => {
352
+ const variants = filterVariantsGroupValues(props.states, props.searchText);
353
+ return (
354
+ <GroupStyle isVisible={variants.length > 0}>
355
+ <Table>
356
+ <thead>
357
+ <tr>
358
+ <TokenRow>State</TokenRow>
359
+ <td>Description</td>
360
+ </tr>
361
+ </thead>
362
+ <tbody>
363
+ {variants.map(([name, variant]) => (
364
+ <tr key={name}>
365
+ <td>
366
+ <Token>{name}</Token>
367
+ {variant.deprecated && <DeprecationBadge />}
368
+ </td>
369
+ <td>{variant.description}</td>
370
+ </tr>
371
+ ))}
372
+ </tbody>
373
+ </Table>
374
+ </GroupStyle>
375
+ );
376
+ };
377
+ VariantsGroup.displayName = 'VariantsGroup';
378
+ VariantsGroup.propTypes = {
379
+ searchText: PropTypes.string.isRequired,
380
+ states: PropTypes.shape({
381
+ decisions: PropTypes.objectOf(PropTypes.string),
382
+ description: PropTypes.string,
383
+ }).isRequired,
384
+ };
385
+
345
386
  const ColorSample = styled.div`
346
387
  width: 30px;
347
388
  height: 30px;
@@ -477,6 +518,20 @@ class Story extends Component {
477
518
  Component Groups
478
519
  </a>
479
520
  </li>
521
+ <li>
522
+ <a
523
+ href="#variants"
524
+ onClick={(event) => {
525
+ event.preventDefault();
526
+ window.scrollTo(
527
+ 0,
528
+ document.getElementById('variants').offsetTop
529
+ );
530
+ }}
531
+ >
532
+ Variants
533
+ </a>
534
+ </li>
480
535
  <li>
481
536
  {' '}
482
537
  <a
@@ -586,6 +641,12 @@ class Story extends Component {
586
641
  searchText={this.state.searchText}
587
642
  />
588
643
 
644
+ <h2 id="variants">Variants</h2>
645
+ <VariantsGroup
646
+ states={definition.variants}
647
+ searchText={this.state.searchText}
648
+ />
649
+
589
650
  <h2 id="decisions">Decisions</h2>
590
651
  <p>
591
652
  These are specific decisions where a choice gets applied to an element
package/materials/resets.css ADDED
@@ -0,0 +1,41 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: inherit;
5
+ }
6
+
7
+ html,
8
+ body {
9
+ color: var(--font-color-for-text);
10
+ font-family: var(--font-family);
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ html {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ h1,
20
+ h2,
21
+ h3,
22
+ h4,
23
+ h5,
24
+ h6 {
25
+ margin: 0;
26
+ }
27
+
28
+ button {
29
+ cursor: pointer;
30
+ }
31
+
32
+ a {
33
+ color: var(--color-primary);
34
+ cursor: pointer;
35
+ text-decoration: none;
36
+ transition: color 0.2s ease-in;
37
+ }
38
+
39
+ p {
40
+ margin: 0;
41
+ }
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": "15.3.0",
4
+ "version": "15.4.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,46 +24,46 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.19.0",
26
26
  "@babel/runtime-corejs3": "^7.19.1",
27
- "@commercetools-uikit/accessible-hidden": "15.3.0",
28
- "@commercetools-uikit/avatar": "15.3.0",
29
- "@commercetools-uikit/buttons": "15.3.0",
30
- "@commercetools-uikit/card": "15.3.0",
31
- "@commercetools-uikit/collapsible": "15.3.0",
32
- "@commercetools-uikit/collapsible-motion": "15.3.0",
33
- "@commercetools-uikit/collapsible-panel": "15.3.0",
34
- "@commercetools-uikit/constraints": "15.3.0",
35
- "@commercetools-uikit/data-table": "15.3.0",
36
- "@commercetools-uikit/data-table-manager": "15.3.0",
37
- "@commercetools-uikit/design-system": "15.3.0",
38
- "@commercetools-uikit/field-errors": "15.3.0",
39
- "@commercetools-uikit/field-label": "15.3.0",
40
- "@commercetools-uikit/fields": "15.3.0",
41
- "@commercetools-uikit/grid": "15.3.0",
42
- "@commercetools-uikit/hooks": "15.3.0",
43
- "@commercetools-uikit/i18n": "15.3.0",
44
- "@commercetools-uikit/icons": "15.3.0",
45
- "@commercetools-uikit/inputs": "15.3.0",
46
- "@commercetools-uikit/label": "15.3.0",
47
- "@commercetools-uikit/link": "15.3.0",
48
- "@commercetools-uikit/loading-spinner": "15.3.0",
49
- "@commercetools-uikit/messages": "15.3.0",
50
- "@commercetools-uikit/notifications": "15.3.0",
51
- "@commercetools-uikit/pagination": "15.3.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.3.0",
53
- "@commercetools-uikit/spacings": "15.3.0",
54
- "@commercetools-uikit/stamp": "15.3.0",
55
- "@commercetools-uikit/tag": "15.3.0",
56
- "@commercetools-uikit/text": "15.3.0",
57
- "@commercetools-uikit/tooltip": "15.3.0",
58
- "@commercetools-uikit/utils": "15.3.0",
59
- "@commercetools-uikit/view-switcher": "15.3.0"
27
+ "@commercetools-uikit/accessible-hidden": "15.4.0",
28
+ "@commercetools-uikit/avatar": "15.4.0",
29
+ "@commercetools-uikit/buttons": "15.4.0",
30
+ "@commercetools-uikit/card": "15.4.0",
31
+ "@commercetools-uikit/collapsible": "15.4.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.4.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.4.0",
34
+ "@commercetools-uikit/constraints": "15.4.0",
35
+ "@commercetools-uikit/data-table": "15.4.0",
36
+ "@commercetools-uikit/data-table-manager": "15.4.0",
37
+ "@commercetools-uikit/design-system": "15.4.0",
38
+ "@commercetools-uikit/field-errors": "15.4.0",
39
+ "@commercetools-uikit/field-label": "15.4.0",
40
+ "@commercetools-uikit/fields": "15.4.0",
41
+ "@commercetools-uikit/grid": "15.4.0",
42
+ "@commercetools-uikit/hooks": "15.4.0",
43
+ "@commercetools-uikit/i18n": "15.4.0",
44
+ "@commercetools-uikit/icons": "15.4.0",
45
+ "@commercetools-uikit/inputs": "15.4.0",
46
+ "@commercetools-uikit/label": "15.4.0",
47
+ "@commercetools-uikit/link": "15.4.0",
48
+ "@commercetools-uikit/loading-spinner": "15.4.0",
49
+ "@commercetools-uikit/messages": "15.4.0",
50
+ "@commercetools-uikit/notifications": "15.4.0",
51
+ "@commercetools-uikit/pagination": "15.4.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.4.0",
53
+ "@commercetools-uikit/spacings": "15.4.0",
54
+ "@commercetools-uikit/stamp": "15.4.0",
55
+ "@commercetools-uikit/tag": "15.4.0",
56
+ "@commercetools-uikit/text": "15.4.0",
57
+ "@commercetools-uikit/tooltip": "15.4.0",
58
+ "@commercetools-uikit/utils": "15.4.0",
59
+ "@commercetools-uikit/view-switcher": "15.4.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",
63
- "moment-timezone": "0.5.37",
63
+ "moment-timezone": "0.5.38",
64
64
  "react": "17.0.2",
65
65
  "react-intl": "^5.25.1",
66
- "react-router-dom": "5.3.3"
66
+ "react-router-dom": "5.3.4"
67
67
  },
68
68
  "peerDependencies": {
69
69
  "moment": "2.x",