Skip to content

Commit 41ff627

Browse files
langermanklangermank
authored
Update disabled state colors for controls (#674)
* update fg disabled color * Create eighty-cycles-invite.md * fix counter button fallbacks * new disabled control design
1 parent 4cf1bb8 commit 41ff627

File tree

10 files changed

+154
-21
lines changed

10 files changed

+154
-21
lines changed

‎.changeset/eighty-cycles-invite.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/primitives": patch
3+
---
4+
5+
Fix disabled fg color for controls

‎docs/storybook/stories/Demos/Control.stories.tsx

+61-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint @typescript-eslint/consistent-type-imports: 0 */
22
import React from 'react'
33
import './PatternOverrides.css'
4-
import {ToggleSwitch, SegmentedControl, ActionList, Button, TextInput, Checkbox, Radio} from '@primer/react'
4+
import {ToggleSwitch, SegmentedControl, ActionList, Button, TextInput, Checkbox, Radio, Select} from '@primer/react'
55
import {EyeIcon, HeartIcon} from '@primer/octicons-react'
66

77
export default {
@@ -45,7 +45,7 @@ export const ActionListScheme = () => {
4545
<ActionList>
4646
<ActionList.Item>New file</ActionList.Item>
4747
<ActionList.Item>Copy link</ActionList.Item>
48-
<ActionList.Item>Edit file</ActionList.Item>
48+
<ActionList.Item disabled>Edit file</ActionList.Item>
4949
<ActionList.Divider />
5050
<ActionList.Item variant="danger">Delete file</ActionList.Item>
5151
</ActionList>
@@ -184,3 +184,62 @@ export const InputScheme = () => {
184184
</div>
185185
)
186186
}
187+
188+
export const SelectScheme = () => {
189+
return (
190+
<div style={{display: 'flex', gap: '1rem'}}>
191+
<Select>
192+
<Select.Option value="one">Choice one</Select.Option>
193+
<Select.Option value="two">Choice two</Select.Option>
194+
</Select>
195+
<Select disabled>
196+
<Select.Option value="one">Choice one</Select.Option>
197+
<Select.Option value="two">Choice two</Select.Option>
198+
</Select>
199+
</div>
200+
)
201+
}
202+
203+
export const DisabledControls = () => {
204+
const count = 12
205+
return (
206+
<div className="Button" style={{display: 'flex', gap: '1rem', flexDirection: 'column', alignItems: 'start'}}>
207+
<Select disabled>
208+
<Select.Option value="one">Choice one</Select.Option>
209+
<Select.Option value="two">Choice two</Select.Option>
210+
</Select>
211+
<TextInput disabled aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
212+
<Button variant="outline" id="outline" disabled leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
213+
Outline
214+
</Button>
215+
<Button variant="danger" id="danger" disabled leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
216+
Danger
217+
</Button>
218+
<Button disabled variant="danger" id="danger">
219+
Danger
220+
<Button.Counter>{count}</Button.Counter>
221+
</Button>
222+
<Button variant="primary" id="primary" disabled leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
223+
Primary
224+
</Button>
225+
<Button disabled variant="primary" id="primary">
226+
Primary
227+
<Button.Counter>{count}</Button.Counter>
228+
</Button>
229+
<Button id="invisible" disabled variant="invisible" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
230+
Invisible
231+
</Button>
232+
<Button disabled id="invisible" variant="invisible">
233+
Invisible
234+
<Button.Counter>{count}</Button.Counter>
235+
</Button>
236+
<Button disabled id="default">
237+
Default
238+
<Button.Counter>{count}</Button.Counter>
239+
</Button>
240+
<Button disabled id="default" leadingIcon={HeartIcon} trailingIcon={EyeIcon}>
241+
Default
242+
</Button>
243+
</div>
244+
)
245+
}

‎docs/storybook/stories/Demos/PatternOverrides.css

+41-4
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,14 @@
2222
--separator-color: var(--borderColor-muted);
2323
}
2424

25-
/* .eSsmRS {
26-
background: var(--bgColor-neutral-muted) !important;
27-
} */
28-
2925
.Button button[id='invisible']:hover:not(:disabled) {
3026
background-color: var(--button-invisible-bgColor-hover) !important;
3127
color: var(--button-invisible-fgColor-hover) !important;
3228
}
3329

3430
.Button button[id='invisible']:disabled {
3531
background-color: var(--button-invisible-bgColor-disabled) !important;
32+
border-color: var(--button-invisible-borderColor-disabled) !important;
3633
color: var(--button-invisible-fgColor-disabled) !important;
3734
}
3835

@@ -49,6 +46,15 @@
4946
background-color: var(--buttonCounter-default-bgColor-rest) !important;
5047
}
5148

49+
.Button button[id='default']:disabled {
50+
border-color: var(--button-default-borderColor-disabled) !important;
51+
background-color: var(--button-default-bgColor-disabled) !important;
52+
}
53+
54+
.Button button[id='primary']:disabled {
55+
border-color: var(--button-primary-borderColor-disabled) !important;
56+
}
57+
5258
.Button button[id='danger']:not(:hover):not(:disabled) [data-component='ButtonCounter'] {
5359
color: var(--buttonCounter-danger-fgColor-rest) !important;
5460
}
@@ -57,6 +63,10 @@
5763
color: var(--buttonCounter-danger-fgColor-hover) !important;
5864
}
5965

66+
.Button button[id='danger']:disabled {
67+
border-color: var(--control-borderColor-disabled) !important;
68+
}
69+
6070
.Button button[id='outline']:not(:hover):not(:disabled) [data-component='ButtonCounter'] {
6171
color: var(--buttonCounter-outline-fgColor-rest) !important;
6272
}
@@ -65,10 +75,37 @@
6575
color: var(--buttonCounter-outline-fgColor-hover) !important;
6676
}
6777

78+
.Button button[id='outline']:disabled {
79+
border-color: var(--control-borderColor-disabled) !important;
80+
background-color: var(--control-bgColor-disabled) !important;
81+
}
82+
6883
.Button button[id='invisible']:not(:hover) [data-component='ButtonCounter'] {
6984
background-color: var(--buttonCounter-default-bgColor-rest) !important;
7085
}
7186

7287
.Overlay-backdrop--center {
7388
background-color: var(--overlay-backdrop-bgColor) !important;
7489
}
90+
91+
.iudZpU,
92+
.dJuBsl {
93+
background-color: var(--control-bgColor-rest) !important;
94+
border-color: var(--control-borderColor-rest) !important;
95+
}
96+
97+
.iudZpU input::-webkit-input-placeholder {
98+
color: var(--control-fgColor-placeholder) !important;
99+
}
100+
101+
.iudZpU[disabled] input::-webkit-input-placeholder {
102+
color: var(--control-fgColor-disabled) !important;
103+
}
104+
105+
.iudZpU[disabled],
106+
.dJuBsl[disabled] {
107+
background-color: var(--control-bgColor-disabled) !important;
108+
color: var(--control-fgColor-disabled) !important;
109+
border-color: var(--control-borderColor-disabled) !important;
110+
box-shadow: none !important;
111+
}

‎src/tokens/fallback/color-fallbacks.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -158,15 +158,15 @@
158158
"--buttonCounter-outline-bgColor-rest": "var(--color-btn-outline-counter-bg)",
159159
"--buttonCounter-outline-bgColor-hover": "var(--color-btn-outline-hover-counter-bg)",
160160
"--buttonCounter-outline-bgColor-disabled": "var(--color-btn-outline-disabled-counter-bg)",
161-
"--buttonCounter-outline-fgColor-rest": "var(--btn-outline-counterFg)",
162-
"--buttonCounter-outline-fgColor-hover": "var(--btn-outline-hoverCounterFg)",
163-
"--buttonCounter-outline-fgColor-disabled": "var(--btn-outline-disabledCounterFg)",
161+
"--buttonCounter-outline-fgColor-rest": "var(--color-btn-outline-counter-fg)",
162+
"--buttonCounter-outline-fgColor-hover": "var(--color-btn-outline-hover-counter-fg)",
163+
"--buttonCounter-outline-fgColor-disabled": "var(--color-btn-outline-disabled-counter-fg)",
164164
"--buttonCounter-danger-bgColor-hover": "var(--color-btn-danger-hover-counter-bg)",
165165
"--buttonCounter-danger-bgColor-disabled": "var(--color-btn-danger-disabled-counter-bg)",
166166
"--buttonCounter-danger-bgColor-rest": "var(--color-btn-danger-counter-bg)",
167-
"--buttonCounter-danger-fgColor-rest": "var(--btn-danger-counterFg)",
168-
"--buttonCounter-danger-fgColor-hover": "var(--btn-danger-hoverCounterFg)",
169-
"--buttonCounter-danger-fgColor-disabled": "var(--btn-danger-disabledCounterFg)",
167+
"--buttonCounter-danger-fgColor-rest": "var(--color-btn-danger-counter-fg)",
168+
"--buttonCounter-danger-fgColor-hover": "var(--color-btn-danger-hover-counter-fg)",
169+
"--buttonCounter-danger-fgColor-disabled": "var(--color-btn-danger-disabled-counter-fg)",
170170
"--focus-outlineColor": "var(--color-accent-fg)",
171171
"--focus-outline": "var(--color-accent-fg solid 2px)",
172172
"--menu-bgColor-active": "var(--color-menu-bg-active)",

‎src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
mix: null,
1616
alpha: 1,
1717
},
18+
disabled: {
19+
$value: '{base.color.gray.3}',
20+
$type: 'color',
21+
},
1822
},
1923
bgColor: {
2024
emphasis: {

‎src/tokens/functional/color/dark/patterns-dark.json5

+15-3
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,10 @@
347347
$value: '{control.bgColor.active}',
348348
$type: 'color',
349349
},
350+
disabled: {
351+
$value: '{control.bgColor.disabled}',
352+
$type: 'color',
353+
},
350354
},
351355
borderColor: {
352356
rest: {
@@ -361,6 +365,10 @@
361365
$value: '{borderColor.default}',
362366
$type: 'color',
363367
},
368+
disabled: {
369+
$value: '{control.borderColor.disabled}',
370+
$type: 'color',
371+
},
364372
},
365373
},
366374
primary: {
@@ -422,7 +430,7 @@
422430
$type: 'color',
423431
},
424432
disabled: {
425-
$value: '{button.primary.borderColor.rest}',
433+
$value: '{button.primary.bgColor.disabled}',
426434
$type: 'color',
427435
},
428436
},
@@ -456,7 +464,7 @@
456464
$type: 'color',
457465
},
458466
disabled: {
459-
$value: '{control.transparent.bgColor.disabled}',
467+
$value: '{control.bgColor.disabled}',
460468
$type: 'color',
461469
},
462470
},
@@ -469,6 +477,10 @@
469477
$value: '{control.transparent.borderColor.hover}',
470478
$type: 'color',
471479
},
480+
disabled: {
481+
$value: '{control.borderColor.disabled}',
482+
$type: 'color',
483+
},
472484
},
473485
},
474486
outline: {
@@ -568,7 +580,7 @@
568580
},
569581
},
570582
disabled: {
571-
$value: '{control.bgColor.rest}',
583+
$value: '{control.bgColor.disabled}',
572584
$type: 'color',
573585
},
574586
},

‎src/tokens/functional/color/dark/primitives-dark.json5

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
$type: 'color',
2222
},
2323
disabled: {
24-
$value: '{base.color.gray.5}',
24+
$value: '{base.color.gray.3}',
2525
$type: 'color',
2626
},
2727
link: {
@@ -85,7 +85,7 @@
8585
$type: 'color',
8686
},
8787
disabled: {
88-
$value: '{base.color.gray.5}',
88+
$value: '{base.color.gray.8}',
8989
$type: 'color',
9090
},
9191
transparent: {
@@ -218,7 +218,7 @@
218218
$type: 'color',
219219
},
220220
disabled: {
221-
$value: '{borderColor.default}',
221+
$value: '{bgColor.disabled}',
222222
$type: 'color',
223223
},
224224
transparent: {

‎src/tokens/functional/color/light/overrides/light.high-contrast.json5

+4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
$value: '{base.color.blue.6}',
1919
$type: 'color',
2020
},
21+
disabled: {
22+
$value: '{base.color.gray.6}',
23+
$type: 'color',
24+
},
2125
},
2226
bgColor: {
2327
muted: {

‎src/tokens/functional/color/light/patterns-light.json5

+14-2
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,10 @@
345345
$value: '{control.bgColor.active}',
346346
$type: 'color',
347347
},
348+
disabled: {
349+
$value: '{control.bgColor.disabled}',
350+
$type: 'color',
351+
},
348352
},
349353
borderColor: {
350354
rest: {
@@ -359,6 +363,10 @@
359363
$value: '{borderColor.default}',
360364
$type: 'color',
361365
},
366+
disabled: {
367+
$value: '{control.borderColor.disabled}',
368+
$type: 'color',
369+
},
362370
},
363371
},
364372
primary: {
@@ -421,7 +429,7 @@
421429
$type: 'color',
422430
},
423431
disabled: {
424-
$value: '{button.primary.borderColor.rest}',
432+
$value: '{button.primary.bgColor.disabled}',
425433
$type: 'color',
426434
},
427435
},
@@ -455,7 +463,7 @@
455463
$type: 'color',
456464
},
457465
disabled: {
458-
$value: '{control.transparent.bgColor.disabled}',
466+
$value: '{control.bgColor.disabled}',
459467
$type: 'color',
460468
},
461469
},
@@ -468,6 +476,10 @@
468476
$value: '{control.transparent.borderColor.hover}',
469477
$type: 'color',
470478
},
479+
disabled: {
480+
$value: '{control.borderColor.disabled}',
481+
$type: 'color',
482+
},
471483
},
472484
},
473485
outline: {

‎src/tokens/functional/color/light/primitives-light.json5

+1-1
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
$type: 'color',
210210
},
211211
disabled: {
212-
$value: '{borderColor.default}',
212+
$value: '{bgColor.disabled}',
213213
$type: 'color',
214214
},
215215
transparent: {

0 commit comments

Comments
 (0)