feat(CodeEditor): use custom PatternFly monaco theme

[logonoff]

What:
Closes #11506
Closes #11764

Includes the changes from #11575 but now it overwrites every token from the base vs theme

Note there should be some additional CSS in PatternFly to make this look better (so that the margin around the CodeEditor matches the monaco background color), but I'm not sure of the best way to implement it:

.pf-v6-theme-dark {
  .pf-v6-c-code-editor:not(.pf-m-read-only) {
      --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-t--color--gray--90);
      --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--color--gray--90);
  }
}

I tried looking into using pf-t--global--background--color--primary--default, but it doesn't provide enough contrast in dark mode. Meanwhile, pf-t--global--background--color--secondary--default doesn't provide enough contrast in light mode.

[patternfly-build]

Preview: https://patternfly-react-pr-11785.surge.sh

A11y report: https://patternfly-react-pr-11785-a11y.surge.sh

Preview: https://pf-react-pr-11785.surge.sh

A11y report: https://pf-react-pr-11785-a11y.surge.sh

[andrew-ronaldson]

For the Syntax colours I am going to create a design issue to look at some code languages and pick out a colour scheme that will work in light/dark mode. I'm fine with the default palette from Monaco for the time being if it isn't blocking anything critical.

[logonoff]

For the Syntax colours I am going to create a design issue to look at some code languages and pick out a colour scheme that will work in light/dark mode. I'm fine with the default palette from Monaco for the time being if it isn't blocking anything critical.

thanks! feel free to edit this branch if the design team makes changes 👍

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[thatblindgeye]

Overall lgtm, had a nit below but not blocking to get this in (we can always make a change at any other point).

[logonoff]

For the Syntax colours I am going to create a design issue to look at some code languages and pick out a colour scheme that will work in light/dark mode. I'm fine with the default palette from Monaco for the time being if it isn't blocking anything critical.

Is there anything at all you would change with the monaco theme in this PR? There were concerns around the OCP YAML editor's lack of contrast (despite it exceeding the 7:1 AAA contrast recommendation 🫤), so we should make sure this theme doesn't stir too many pots

[andrew-ronaldson]

We'll need to update any hard coded colours and apply some tokens or create new ones. The colours seem to be AA compliant so I think it's good to go.

[mcoker]

🎃