@commercetools-frontend/ui-kit 15.2.4 → 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.
- package/dist/commercetools-frontend-ui-kit.cjs.dev.js +5 -1
- package/dist/commercetools-frontend-ui-kit.cjs.prod.js +5 -1
- package/dist/commercetools-frontend-ui-kit.esm.js +2 -2
- package/dist/declarations/src/index.d.ts +1 -1
- package/materials/custom-properties.css +109 -4
- package/materials/custom-properties.json +94 -3
- package/materials/internals/TOKENS.md +26 -13
- package/materials/internals/definition.yaml +709 -238
- package/materials/internals/tokens.story.js +173 -37
- package/materials/resets.css +41 -0
- package/package.json +36 -36
|
@@ -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.
|
|
83
|
+
var version = "15.4.0";
|
|
84
84
|
|
|
85
85
|
exports.i18n = i18n__namespace;
|
|
86
86
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -223,6 +223,10 @@ Object.defineProperty(exports, 'customProperties', {
|
|
|
223
223
|
enumerable: true,
|
|
224
224
|
get: function () { return designSystem.customProperties; }
|
|
225
225
|
});
|
|
226
|
+
Object.defineProperty(exports, 'designTokens', {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function () { return designSystem.designTokens; }
|
|
229
|
+
});
|
|
226
230
|
exports.version = version;
|
|
227
231
|
Object.keys(buttons).forEach(function (k) {
|
|
228
232
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
@@ -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.
|
|
83
|
+
var version = "15.4.0";
|
|
84
84
|
|
|
85
85
|
exports.i18n = i18n__namespace;
|
|
86
86
|
Object.defineProperty(exports, 'AccessibleHidden', {
|
|
@@ -223,6 +223,10 @@ Object.defineProperty(exports, 'customProperties', {
|
|
|
223
223
|
enumerable: true,
|
|
224
224
|
get: function () { return designSystem.customProperties; }
|
|
225
225
|
});
|
|
226
|
+
Object.defineProperty(exports, 'designTokens', {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function () { return designSystem.designTokens; }
|
|
229
|
+
});
|
|
226
230
|
exports.version = version;
|
|
227
231
|
Object.keys(buttons).forEach(function (k) {
|
|
228
232
|
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
@@ -30,9 +30,9 @@ export { default as Tooltip } from '@commercetools-uikit/tooltip';
|
|
|
30
30
|
export { default as Text } from '@commercetools-uikit/text';
|
|
31
31
|
export { default as ViewSwitcher } from '@commercetools-uikit/view-switcher';
|
|
32
32
|
export { useDataTableSortingState, usePaginationState, useRowSelection, useSorting, useToggleState } from '@commercetools-uikit/hooks';
|
|
33
|
-
export { customProperties } from '@commercetools-uikit/design-system';
|
|
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.
|
|
36
|
+
var version = "15.4.0";
|
|
37
37
|
|
|
38
38
|
export { version };
|
|
@@ -30,5 +30,5 @@ export { default as Tooltip } from '@commercetools-uikit/tooltip';
|
|
|
30
30
|
export { default as Text } from '@commercetools-uikit/text';
|
|
31
31
|
export { default as ViewSwitcher } from '@commercetools-uikit/view-switcher';
|
|
32
32
|
export { useToggleState, useSorting, useRowSelection, usePaginationState, useDataTableSortingState, } from '@commercetools-uikit/hooks';
|
|
33
|
-
export { customProperties } from '@commercetools-uikit/design-system';
|
|
33
|
+
export { customProperties, designTokens, } from '@commercetools-uikit/design-system';
|
|
34
34
|
export { default as version } from './version';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
|
3
3
|
|
|
4
|
-
This file is created by the 'scripts/generate-
|
|
4
|
+
This file is created by the 'scripts/generate-design-tokens.js' script.
|
|
5
5
|
The variables should be updated in 'materials/internals/definition.yaml'.
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -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
|
|
38
|
-
--font-size-
|
|
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
|
-
--
|
|
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;
|
|
@@ -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
|
|
31
|
-
"--font-size-
|
|
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
|
-
"--
|
|
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",
|
|
@@ -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:
|
|
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 (
|
|
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
|
-
|
|
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 **
|
|
157
|
+
...or for a specific **variant**
|
|
141
158
|
|
|
142
159
|
```
|
|
143
|
-
--font-
|
|
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
|
-
-
|
|
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:
|
|
227
|
+
### Aspect: Variant
|
|
211
228
|
|
|
212
|
-
Some elements
|
|
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.
|