dashboard icon indicating copy to clipboard operation
dashboard copied to clipboard
verified publisher icon rancher

a11y: CodeMirror colour palette

Open edenhernandez-suse opened this issue 8 months ago • 3 comments

Context Our code blocks use CodeMirror with a set of colours that should be improved.

Problem We identified several accessibility/usability issues with the colour palette:

  • It's the same for both Light and Dark modes. This means that clear colours don't work on light backgrounds, and darker colours fail on dark backgrounds.
    • Boolean values and comments fail on dark backgrounds
    • String values fail on light backgrounds
  • Number values take the same colour as keys/props and are not properly differentiated

Image

Image

Image

Image

Solution Light mode colour palette:

Image

plain-text, .cm-meta: var(--body-text) .cm-string: #00529F .cm-number: #005E3B .cm-keyword: #B94545 .cm-atom: #921E80 .cm-comment: #8F5536

Image

Dark mode colour palette: TBD

edenhernandez-suse avatar Jul 02 '25 18:07 edenhernandez-suse

@edenhernandez-suse Are you really planning this for 2.12.0?

nwmac avatar Jul 02 '25 21:07 nwmac

@edenhernandez-suse Are you really planning this for 2.12.0?

No, sorry, it was a mistake.

edenhernandez-suse avatar Jul 03 '25 12:07 edenhernandez-suse

You may want to consider also resolving this https://github.com/rancher/dashboard/issues/5485 at the same time.

codyrancher avatar Dec 04 '25 19:12 codyrancher