Nav eval > Fix or add :active state to items
Problem
:active
sometimes is non-existent, has too low of a contrast, or does not take precedence over :focus
. It is not necessary for WCAG 2.1 AA, but it is a Pajamas guideline.
Solution
Add or fix :active
states according to guidelines in Pajamas so that buttons and other clickable elements appear interactive when pressed.
Logo
Current | Proposed | |
---|---|---|
|
background-color: #E0DFE5 |
background-color: rgb(31,30,36,0.08); |
|
background-color: #E0DFE5 |
background-color: rgb(31,30,36,0.08); |
|
background-color: #E0DFE5 |
background-color: rgb(31,30,36,0.16); |
Current | Proposed | |
---|---|---|
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); |
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); |
|
background-color: #E0DFE5 |
background-color: rgb(255,255,255,0.24); |
Hide sidebar, Create new... , Stop impersonation
Current | Proposed | |
---|---|---|
|
background-color: #ECECEF mix-blend: multiply (full button) |
background-color: rgb(31,30,36,0.08); mix-blend: multiple (icon only) |
|
background-color: #ECECEF mix-blend: multiply (full button) |
background-color: rgb(31,30,36,0.08); mix-blend: multiple (icon only) |
|
background-color: #DCDCDE mix-blend: multiply (full button) |
background-color: rgb(31,30,36,0.16); mix-blend: multiple (icon only) |
Current | Proposed | |
---|---|---|
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); mix-blend: screen (icon only) |
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); mix-blend: screen (icon only) |
|
background-color: #DCDCDE |
background-color: rgb(255,255,255,0.24); mix-blend: screen (icon only) |
Profile
Current | Proposed | |
---|---|---|
|
background-color: #ECECEF mix-blend: multiply |
background-color: rgb(31,30,36,0.08); mix-blend: multiple (icon only) |
|
background-color: #ECECEF mix-blend: multiply |
background-color: rgb(31,30,36,0.08); mix-blend: multiple (icon only) |
|
background-color: #ECECEF mix-blend: multiply (full button) |
background-color: rgb(31,30,36,0.16); mix-blend: multiple (icon only) |
Current | Proposed | |
---|---|---|
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); |
|
background-color: rgb(255,255,255,0.24); |
background-color: rgb(255,255,255,0.16); |
|
background-color: #ECECEF |
background-color: rgb(255,255,255,0.24); |
Counters / Search bar
Current | Proposed | |
---|---|---|
At rest |
text-color: $theme-50 icon-color: $theme-200 background-color: rgb(255,255,255,0.16) box-shadow: inset 0 0 0 1px rgba(31, 30, 36, 0.08) |
text-color: $theme-50 icon-color: $theme-100 background-color: rgb(255,255,255,0.16) box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16) |
|
text-color: $white icon-color: $theme-200 background-color: rgb(255,255,255,0.16) |
text-color: $white icon-color: $theme-100 background-color: rgb(255,255,255,0.24) box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24) mix-blend: screen (icon only) |
|
text-color: $white icon-color: $theme-200 background-color: rgb(255,255,255,0.16) |
text-color: $white icon-color: $theme-100 background-color: rgb(255,255,255,0.24) box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24) mix-blend: screen (icon only) |
|
No additional stylings applied |
text-color: $white icon-color: $theme-100 background-color: rgb(255,255,255,0.36) box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36) mix-blend: screen (icon only) |
Sidebar elements
State | Current | Proposed |
---|---|---|
At rest |
icon: $gray-500 text: $gray-900 chevron: $gray-400 |
icon: $gray-500 text: $gray-900 chevron: $gray-400 |
|
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
No additional styles applied to this state |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
State | Current | Proposed |
---|---|---|
At rest |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
|
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 8% |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
No additional styles applied to this state |
icon: $gray-500 text: $gray-900 chevron: $gray-400 background-color: $gray-950 24% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
State | Current | Proposed |
---|---|---|
At rest |
icon: $gray-400 text: $gray-900 |
icon: $gray-400 text: $gray-900 |
|
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
No additional styles applied to this state |
icon: $gray-400 text: $gray-900 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
State | Current | Proposed |
---|---|---|
At rest |
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
|
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
icon: $gray-400 text: $gray-900 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
icon: $gray-400 text: $gray-900 background-color: $gray-950 8% |
icon: $gray-400 text: $gray-900 background-color: $gray-950 16% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |
|
No additional styles applied to this state |
icon: $gray-400 text: $gray-900 background-color: $gray-950 24% mix-blend: multiply on icons / text (light themes) mix-blend: screen on icons / text (dark mode) |