Skip to content

Commit a41ecfb

Browse files
zchenweizchenwei
authored
fix(style): adjust color and border color on ToggleButton to meet 3:1 contrast ratio (#1932)
* fix(style): fix toggle button color contrast ratio * test: update snapshots * Create mighty-humans-train.md * chore: address comments and clean up styling * test: update snapshots
1 parent c8930b8 commit a41ecfb

File tree

7 files changed

+254
-218
lines changed

7 files changed

+254
-218
lines changed

‎.changeset/mighty-humans-train.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@aws-amplify/ui": patch
3+
---
4+
5+
fix(style): adjust color and border color on ToggleButton to meet 3:1 contrast ratio

‎docs/src/components/Demo.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@ export const Demo = ({
4343
alignItems="stretch"
4444
>
4545
<Flex direction="column" flex="1">
46-
<View overflow="auto">{children}</View>
46+
<View overflow="auto" padding="5px">
47+
{children}
48+
</View>
4749
{propControls && (
4850
<Tabs>
4951
<TabItem title="Props">

‎packages/ui/src/theme/__tests__/defaultTheme.test.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -625,14 +625,15 @@ describe('@aws-amplify/ui', () => {
625625
--amplify-components-text-success-color: var(--amplify-colors-font-success);
626626
--amplify-components-text-info-color: var(--amplify-colors-font-info);
627627
--amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
628-
--amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
628+
--amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
629629
--amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
630630
--amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
631-
--amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
631+
--amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
632632
--amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
633633
--amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
634-
--amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
634+
--amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
635635
--amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
636+
--amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
636637
--amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
637638
--amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
638639
--amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
@@ -641,26 +642,35 @@ describe('@aws-amplify/ui', () => {
641642
--amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
642643
--amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
643644
--amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
644-
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
645+
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
645646
--amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
646-
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
647-
--amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
647+
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
648+
--amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
649+
--amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
648650
--amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
649651
--amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
650652
--amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
651653
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
652654
--amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
653655
--amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
656+
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
654657
--amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
655658
--amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
659+
--amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
660+
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
661+
--amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
656662
--amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
657663
--amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
658664
--amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
659665
--amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
660666
--amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
667+
--amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
661668
--amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
662669
--amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
663670
--amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
671+
--amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
672+
--amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
673+
--amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
664674
--amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
665675
--amplify-components-togglebuttongroup-align-items: center;
666676
--amplify-components-togglebuttongroup-align-content: center;
@@ -771,6 +781,7 @@ describe('@aws-amplify/ui', () => {
771781
--amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
772782
--amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
773783
--amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
784+
--amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
774785
--amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
775786
--amplify-colors-border-error: var(--amplify-colors-red-80);
776787
--amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);

‎packages/ui/src/theme/__tests__/overrides.test.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -659,14 +659,15 @@ describe('@aws-amplify/ui', () => {
659659
--amplify-components-text-success-color: var(--amplify-colors-font-success);
660660
--amplify-components-text-info-color: var(--amplify-colors-font-info);
661661
--amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
662-
--amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
662+
--amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
663663
--amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
664664
--amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
665-
--amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
665+
--amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
666666
--amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
667667
--amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
668-
--amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
668+
--amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
669669
--amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
670+
--amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
670671
--amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
671672
--amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
672673
--amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
@@ -675,26 +676,35 @@ describe('@aws-amplify/ui', () => {
675676
--amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
676677
--amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
677678
--amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
678-
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
679+
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
679680
--amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
680-
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
681-
--amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
681+
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
682+
--amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
683+
--amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
682684
--amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
683685
--amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
684686
--amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
685687
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
686688
--amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
687689
--amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
690+
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
688691
--amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
689692
--amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
693+
--amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
694+
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
695+
--amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
690696
--amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
691697
--amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
692698
--amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
693699
--amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
694700
--amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
701+
--amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
695702
--amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
696703
--amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
697704
--amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
705+
--amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
706+
--amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
707+
--amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
698708
--amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
699709
--amplify-components-togglebuttongroup-align-items: center;
700710
--amplify-components-togglebuttongroup-align-content: center;
@@ -805,6 +815,7 @@ describe('@aws-amplify/ui', () => {
805815
--amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
806816
--amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
807817
--amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
818+
--amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
808819
--amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
809820
--amplify-colors-border-error: var(--amplify-colors-red-80);
810821
--amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);

0 commit comments

Comments
 (0)