Skip to content

Commit b3d5285

Browse files
montezumemontezume
authored
feat(tags): use design tokens, add theming (#641)
* chore: use design tokens for tags
1 parent 0b43ce5 commit b3d5285

9 files changed

+197
-83
lines changed

‎materials/custom-properties.css

+12
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,12 @@
109109
--background-color-tag-warning-hover: #f16d0e;
110110
--background-color-for-input: #fff;
111111
--background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
112+
--background-color-for-tag: hsl(0, 0%, 95%);
113+
--background-color-for-tag-warning: hsl(
114+
25.110132158590307,
115+
89.0196078431%,
116+
95%
117+
);
112118
--border-color-input-pristine: hsl(0, 0%, 60%);
113119
--border-color-input-focus: #00b39e;
114120
--border-color-input-disabled: #ccc;
@@ -126,9 +132,13 @@
126132
--border-color-for-input-when-readonly: #ccc;
127133
--border-color-for-input-when-error: #e60050;
128134
--border-color-for-input-when-warning: #f16d0e;
135+
--border-color-for-tag: hsl(0, 0%, 60%);
136+
--border-color-for-tag-warning: #f16d0e;
137+
--border-color-for-tag-when-focused: #00b39e;
129138
--border-radius-input: 6px;
130139
--border-radius-tag: 2px;
131140
--border-radius-for-input: 6px;
141+
--border-radius-for-tag: 2px;
132142
--font-color-default: #1a1a1a;
133143
--font-color-disabled: hsl(0, 0%, 60%);
134144
--font-color-error: #e60050;
@@ -141,6 +151,8 @@
141151
--font-color-for-input-when-error: #e60050;
142152
--font-color-for-input-when-readonly: hsl(0, 0%, 60%);
143153
--font-color-for-input-when-warning: #f16d0e;
154+
--font-color-for-tag: #1a1a1a;
155+
--font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
144156
--font-family: 'Open Sans', sans-serif;
145157
--placeholder-font-color-for-input: hsl(0, 0%, 60%);
146158
--font-size-for-input: 1rem;

‎materials/custom-properties.js

+8
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ export default {
108108
backgroundColorTagWarningHover: '#f16d0e',
109109
backgroundColorForInput: '#fff',
110110
backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
111+
backgroundColorForTag: 'hsl(0, 0%, 95%)',
112+
backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
111113
borderColorInputPristine: 'hsl(0, 0%, 60%)',
112114
borderColorInputFocus: '#00b39e',
113115
borderColorInputDisabled: '#ccc',
@@ -125,9 +127,13 @@ export default {
125127
borderColorForInputWhenReadonly: '#ccc',
126128
borderColorForInputWhenError: '#e60050',
127129
borderColorForInputWhenWarning: '#f16d0e',
130+
borderColorForTag: 'hsl(0, 0%, 60%)',
131+
borderColorForTagWarning: '#f16d0e',
132+
borderColorForTagWhenFocused: '#00b39e',
128133
borderRadiusInput: '6px',
129134
borderRadiusTag: '2px',
130135
borderRadiusForInput: '6px',
136+
borderRadiusForTag: '2px',
131137
fontColorDefault: '#1a1a1a',
132138
fontColorDisabled: 'hsl(0, 0%, 60%)',
133139
fontColorError: '#e60050',
@@ -140,6 +146,8 @@ export default {
140146
fontColorForInputWhenError: '#e60050',
141147
fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
142148
fontColorForInputWhenWarning: '#f16d0e',
149+
fontColorForTag: '#1a1a1a',
150+
fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
143151
fontFamily: "'Open Sans', sans-serif",
144152
placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
145153
fontSizeForInput: '1rem',

‎materials/custom-properties.json

+8
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@
9898
"--background-color-tag-warning-hover": "#f16d0e",
9999
"--background-color-for-input": "#fff",
100100
"--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
101+
"--background-color-for-tag": "hsl(0, 0%, 95%)",
102+
"--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
101103
"--border-color-input-pristine": "hsl(0, 0%, 60%)",
102104
"--border-color-input-focus": "#00b39e",
103105
"--border-color-input-disabled": "#ccc",
@@ -115,9 +117,13 @@
115117
"--border-color-for-input-when-readonly": "#ccc",
116118
"--border-color-for-input-when-error": "#e60050",
117119
"--border-color-for-input-when-warning": "#f16d0e",
120+
"--border-color-for-tag": "hsl(0, 0%, 60%)",
121+
"--border-color-for-tag-warning": "#f16d0e",
122+
"--border-color-for-tag-when-focused": "#00b39e",
118123
"--border-radius-input": "6px",
119124
"--border-radius-tag": "2px",
120125
"--border-radius-for-input": "6px",
126+
"--border-radius-for-tag": "2px",
121127
"--font-color-default": "#1a1a1a",
122128
"--font-color-disabled": "hsl(0, 0%, 60%)",
123129
"--font-color-error": "#e60050",
@@ -130,6 +136,8 @@
130136
"--font-color-for-input-when-error": "#e60050",
131137
"--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)",
132138
"--font-color-for-input-when-warning": "#f16d0e",
139+
"--font-color-for-tag": "#1a1a1a",
140+
"--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
133141
"--font-family": "'Open Sans', sans-serif",
134142
"--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
135143
"--font-size-for-input": "1rem",

‎materials/design-tokens.js

+8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export default {
1717
backgroundColorTagWarningHover: 'colorWarning',
1818
backgroundColorForInput: 'colorSurface',
1919
backgroundColorForInputWhenDisabled: 'colorAccent98',
20+
backgroundColorForTag: 'colorNeutral95',
21+
backgroundColorForTagWarning: 'colorWarning95',
2022
borderColorInputPristine: 'colorNeutral60',
2123
borderColorInputFocus: 'colorPrimary',
2224
borderColorInputDisabled: 'colorNeutral',
@@ -34,9 +36,13 @@ export default {
3436
borderColorForInputWhenReadonly: 'colorNeutral',
3537
borderColorForInputWhenError: 'colorError',
3638
borderColorForInputWhenWarning: 'colorWarning',
39+
borderColorForTag: 'colorNeutral60',
40+
borderColorForTagWarning: 'colorWarning',
41+
borderColorForTagWhenFocused: 'colorPrimary',
3742
borderRadiusInput: 'borderRadius6',
3843
borderRadiusTag: 'borderRadius2',
3944
borderRadiusForInput: 'borderRadius6',
45+
borderRadiusForTag: 'borderRadius2',
4046
fontColorDefault: 'colorSolid',
4147
fontColorDisabled: 'colorNeutral60',
4248
fontColorError: 'colorError',
@@ -49,6 +55,8 @@ export default {
4955
fontColorForInputWhenError: 'colorError',
5056
fontColorForInputWhenReadonly: 'colorNeutral60',
5157
fontColorForInputWhenWarning: 'colorWarning',
58+
fontColorForTag: 'colorSolid',
59+
fontColorForTagWhenDisabled: 'colorNeutral60',
5260
fontFamily: 'fontFamilyBody',
5361
placeholderFontColorForInput: 'colorNeutral60',
5462
fontSizeForInput: 'fontSizeM',

‎materials/internals/definition.yaml

+28
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ states:
171171
componentGroups:
172172
input:
173173
description: 'Input elements'
174+
tag:
175+
description: 'Tag elements'
176+
tag-warning:
177+
description: 'Tag elements with type warning'
174178

175179
decisionGroups:
176180
backgroundColors:
@@ -220,6 +224,12 @@ decisionGroups:
220224
background-color-for-input-when-disabled:
221225
description: ''
222226
choice: color-accent-98
227+
background-color-for-tag:
228+
description: ''
229+
choice: color-neutral-95
230+
background-color-for-tag-warning:
231+
description: ''
232+
choice: color-warning-95
223233

224234
borderColors:
225235
label: Border Colors
@@ -287,6 +297,15 @@ decisionGroups:
287297
border-color-for-input-when-warning:
288298
description: ''
289299
choice: color-warning
300+
border-color-for-tag:
301+
description: ''
302+
choice: color-neutral-60
303+
border-color-for-tag-warning:
304+
description: ''
305+
choice: color-warning
306+
border-color-for-tag-when-focused:
307+
description: ''
308+
choice: color-primary
290309

291310
borderRadiuses:
292311
label: Border Radius
@@ -303,6 +322,9 @@ decisionGroups:
303322
border-radius-for-input:
304323
description: ''
305324
choice: border-radius-6
325+
border-radius-for-tag:
326+
description: ''
327+
choice: border-radius-2
306328
# We don't have font families in choices yet, so we can't have decisions for
307329
# them
308330

@@ -353,6 +375,12 @@ decisionGroups:
353375
font-color-for-input-when-warning:
354376
description: ''
355377
choice: color-warning
378+
font-color-for-tag:
379+
description: ''
380+
choice: color-solid
381+
font-color-for-tag-when-disabled:
382+
description: ''
383+
choice: color-neutral-60
356384

357385
fontFamily:
358386
label: Font family

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@
180180
"rollup-plugin-json": "4.0.0",
181181
"rollup-plugin-node-resolve": "4.0.1",
182182
"rollup-plugin-replace": "2.1.1",
183-
"serve": "10.1.2",
183+
"serve": "11.0.0",
184184
"shelljs": "0.8.3",
185185
"storybook-readme": "5.0.1",
186186
"webpack": "4.29.6",

0 commit comments

Comments
 (0)