Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Remove color attribute from `<kbd>` tag (#20429) 

As a single example, if a `<kbd>` tag is wrapped by a `<a>` link, it doesn't inherit the link color:

`[<kbd>❓ **Support**</kbd>](https://meta.discourse.org)`

It's because the `<kbd>` tag has a `color: var(--primary);` CSS rule which seems superfluous.

If we disable it, the `<kbd>` tag inherits all the normal colors (including the link color 👌).

The direct `<kbd>` parent that assigns the text color is `<html>` (can't go higher!) which has an identical `color: var(--primary);`. 

WCAG palettes don't seem to assign specific colors in this context.

It seems fairly safe to remove `color: var(--primary);` from `<kbd>` so it won't interfere anymore with its content.
This commit is contained in:
Canapin 2023-04-14 04:06:12 +02:00 committed by GitHub
parent b328ada667
commit 4b9061ae3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1058,7 +1058,6 @@ kbd {
border-bottom-width: 2px; border-bottom-width: 2px;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
color: var(--primary);
display: inline-flex; display: inline-flex;
gap: 0 0.5em; // space between text and images/emoji gap: 0 0.5em; // space between text and images/emoji
font-size: var(--font-down-1); font-size: var(--font-down-1);