Primary color update as per new Auth0 branding#1576
Conversation
Auth0's brand color is updating to purple. Updates the primary accent color used across tabs, links, and buttons: light mode #7549F2 -> #9921FE, dark mode #B3A7FF -> #BC6DFF. Also fixes hover-state bugs made visible by the more saturated color (pre-existing on production, not a regression): - Custom SVG tab icons (Authenticate, Manage Users, Customize, Auth0 AI, Platform, Dev Tools) render as <img> tags and never picked up hover color; repainted them with a masked pseudo-element instead. - Dev Tools dropdown label and chevron weren't recoloring on hover due to their own hardcoded gray classes. - Locale switcher now matches the top nav tabs' hover style. Accessibility: dark mode was using the same purple as light mode, which only measured 3.77:1 contrast against the dark background (fails WCAG AA, needs 4.5:1). #BC6DFF measures 6.37:1 and passes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
pratima-cosmos
changed the title
hazel-nut
left a comment
hazel-nut
left a comment
There was a problem hiding this comment.
mintlify's docs say:
color.dark: The color used for buttons and hover states across both light and dark modes, with some variation by theme.
it seems like we should use be using this variable for buttons and hover states (even if we change the value). i wonder if that's why this originally required so many selectors and overrides?
| .nav-tabs-item:has(img[src="/icons/authenticate.svg"])::before, | ||
| .nav-tabs-item:has(img[src="/icons/manage-users.svg"])::before, | ||
| .nav-tabs-item:has(img[src="/icons/customize.svg"])::before, | ||
| .nav-tabs-item:has(img[src="/icons/auth0-ai.svg"])::before, | ||
| .nav-tabs-item:has(img[src="/icons/platform.svg"])::before, | ||
| .nav-tabs-item:has(img[src="/icons/dev-tools.svg"])::before { | ||
| display: block; | ||
| -webkit-mask: no-repeat center / contain; | ||
| mask: no-repeat center / contain; | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/authenticate.svg"])::before { | ||
| -webkit-mask-image: url(/icons/authenticate.svg); | ||
| mask-image: url(/icons/authenticate.svg); | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/manage-users.svg"])::before { | ||
| -webkit-mask-image: url(/icons/manage-users.svg); | ||
| mask-image: url(/icons/manage-users.svg); | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/customize.svg"])::before { | ||
| -webkit-mask-image: url(/icons/customize.svg); | ||
| mask-image: url(/icons/customize.svg); | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/auth0-ai.svg"])::before { | ||
| -webkit-mask-image: url(/icons/auth0-ai.svg); | ||
| mask-image: url(/icons/auth0-ai.svg); | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/platform.svg"])::before { | ||
| -webkit-mask-image: url(/icons/platform.svg); | ||
| mask-image: url(/icons/platform.svg); | ||
| } | ||
|
|
||
| .nav-tabs-item:has(img[src="/icons/dev-tools.svg"])::before { | ||
| -webkit-mask-image: url(/icons/dev-tools.svg); | ||
| mask-image: url(/icons/dev-tools.svg); | ||
| } |
There was a problem hiding this comment.
i don't think hard-coding these icons this way is a good solution to the issue of hover emphasis not working on icons that are images because it will break if we change, move, or add any additional icons.
There was a problem hiding this comment.
Hi Hazel, not sure about the override part, but we need to update our primary color to new purple color #9921FE for light, and #BC6DFF for dark theme, this PR is for reference, feel free to have a look at prototype ref here: https://auth0team.atlassian.net/browse/APD-1213?search_id=7705bcb0-ff5d-46eb-8435-86e113d40360
| Matched by icon src (not href) since one tab, Dev Tools, is a dropdown | ||
| <button> with the <img> nested inside a wrapper div, not a direct child. */ |
There was a problem hiding this comment.
i believe there are distinct selectors for top nav tabs and top nav tab menu drop-downs:
https://www.mintlify.com/docs/customize/custom-scripts#topbar-dropdown
2 participants
Auth0's brand color is updating to new purple theme. This updates the primary accent color used across docs tabs and links) from the previous blue/violet (
#7549F2) to the new brand purple (#9921FEin light mode,#BC6DFFin dark mode).Accessibility
Verified WCAG contrast for the new purple against both themes: