google / google/codeworld

https://code.world/haskell Nav bar button colors are confusing

Offen
#1,070 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
cleanup
Vorherrschende Sprache
Haskell
Sterne
1.3k
Forks
201
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

https://code.world/haskell#is missing some button colors that https://code.world has, in a confusing way.

https://code.world uses these colors:
Blue: Action buttons
Red: More action buttons
(I can't tell what the conditions are for choosing Red vs Blue, putting a comment in the .css might help)
Olive/Yellow: Current project
Green: Other projects

https://code.world/haskell# uses these colors:
Green (instead of Blue): Action buttons
Olive (instead of Red): More action buttons
Olive/Yellow: Current project
Green: Other projects

The overloaded use of colors is confusing.

The source of the problem appears to be here, in `codeworld.css` and/or `theme-variables.css`:
```
.cw-button.red,
.cw-button.red:hover:active {
background-color: var(--cw-button-bg-13);
}

.haskell .cw-button.red,
.cw-button.red:hover:active {
background-color: var(--cw-button-bg-14);
}
```

`.haskell` red:
` --cw-button-bg-14: hsl(60, 75%, 35%);`

is the same as (default) Yellow:
` --cw-button-bg-1: hsl(60, 75%, 35%);`

but probably should be the same as `-cw-button-bg-13:` Red
` -hsl(10, 75%, 35%);`

and similar for `.haskell` blue:
```
haskell .cw-button.blue, .cw-button.blue:hover:active {
background-color: var(--cw-button-bg-10);
}
```
should be like -cw-button-bg-13: Blue
` hsl(135, 75%, 35%);`

should be

Also, this looks suspicious:
```
.cw-button.red,
.cw-button.red:hover:active {
background-color: var(--cw-button-bg-13);
}

.haskell .cw-button.red,
.cw-button.red:hover:active {
background-color: var(--cw-button-bg-14);
}
```

It has `.cw-button.red:hover:active` twice. Perhaps you meant to add the `.haskell ` prefix?

(There is the same problem on `.blue`)

All of this might be more readable if the variables `--cw-button-bg-*` more semantic cues in the names (such as `haskell`, `project`, `action`, `active`) and eschew the under-typed numbers `1`-`20`.

Also, I'd also suggest using assignments like ` --haskell-cw-button-action-bg: var(cw-button-bg);` to keep Haskell and default in alignment except for where you want Haskell to be different.

Also, IMO, using a drab Olive for current project, and a bright Green for other projects, is the opposite of what a user intuits. Usually the "current" object has a brighter color than other/background objects. (For example: OS window title bars and Chrome tab bars)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Überprüfe codeworld.css und theme-variables.css, mit Fokus auf die Selektoren .haskell .cw-button.red und .blue sowie deren hover/active-Regeln. Vergleiche die Standard- und die Haskell-Navigation unter den beiden URLs und überprüfe anschließend, dass die Schaltflächen action, additional-action, current-project und other-project ohne duplizierte Selektoren visuell unterscheidbar bleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css, haskell
Bereich
accessibility, design, frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.