Better contrast ratio for modal close button and tabs

This commit is contained in:
Josh Perez 2023-05-03 09:09:55 -04:00
parent a6aec37b75
commit 7c651e8773
2 changed files with 25 additions and 34 deletions

View file

@ -66,22 +66,17 @@
} }
} }
@include light-theme { &:hover,
&:hover, &:focus {
&:focus { background: $color-gray-45;
background: $color-gray-02; &::before {
} background-color: $color-ultramarine;
&:active {
background: $color-gray-05;
} }
} }
@include dark-theme { &:active {
&:hover, background: $color-gray-45;
&:focus { &::before {
background: $color-gray-80; background-color: $color-ultramarine;
}
&:active {
background: $color-gray-75;
} }
} }
} }
@ -108,23 +103,9 @@
} }
} }
@include light-theme { &:hover,
&:hover, &:focus {
&:focus { box-shadow: 0 0 0 2px $color-ultramarine;
background: $color-gray-02;
}
&:active {
background: $color-gray-05;
}
}
@include dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
}
&:active {
background: $color-gray-75;
}
} }
} }

View file

@ -11,16 +11,26 @@
@include font-body-1; @include font-body-1;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 10px;
padding-bottom: 6px;
border-bottom: 4px solid transparent;
&:focus { &:focus {
@include mouse-mode { outline: none;
outline: none;
@include keyboard-mode {
border-bottom-color: $color-ultramarine;
} }
} }
&--selected { &--selected {
@include font-body-1-bold; @include font-body-1-bold;
border-bottom: 2px solid $color-black; border-bottom: 2px solid;
@include light-theme {
border-bottom-color: $color-black;
}
@include dark-theme {
border-bottom-color: $color-white;
}
} }
} }
} }