8000
  • feat(CodeEditor): use custom PatternFly monaco theme by logonoff · Pull Request #11785 · patternfly/patternfly-react · GitHub
    [go: up one dir, main page]
    Skip to content

    feat(CodeEditor): use custom PatternFly monaco theme#11785

    Merged
    kmcfaul merged 2 commits intopatternfly:mainfrom
    logonoff:codeeditor3
    Sep 25, 2025
    Merged

    feat(CodeEditor): use custom PatternFly monaco theme#11785
    kmcfaul merged 2 commits intopatternfly:mainfrom
    logonoff:codeeditor3

    Conversation

    @logonoff
    Copy link
    Member
    @logonoff logonoff commented Apr 25, 2025 •
    edited
    Loading

    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
    Copy link
    Collaborator
    patternfly-build commented Apr 25, 2025 •
    edited by mcoker
    Loading

    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
    Copy link
    Collaborator
    andrew-ronaldson commented Apr 28, 2025

    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
    Copy link
    Member Author
    logonoff commented Apr 28, 2025

    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
    Copy link
    github-actions bot commented Jun 28, 2025

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

    @github-actions github-actions bot added the Stale label Jun 28, 2025
    mcoker
    mcoker reviewed Sep 24, 2025
    View reviewed changes
    thatblindgeye
    thatblindgeye approved these changes Sep 25, 2025
    View reviewed changes
    Copy link
    Contributor
    @thatblindgeye thatblindgeye left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

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

    @logonoff
    Copy link
    Member Author
    logonoff commented Sep 25, 2025

    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 andrew-ronaldson self-requested a review September 25, 2025 15:26
    andrew-ronaldson
    andrew-ronaldson approved these changes Sep 25, 2025
    View reviewed changes
    Copy link
    Collaborator
    @andrew-ronaldson andrew-ronaldson left a comment •
    edited
    Loading
    8000

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    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
    mcoker approved these changes Sep 25, 2025
    View reviewed changes
    Copy link
    Contributor
    @mcoker mcoker left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    🎃

    @kmcfaul kmcfaul merged commit eed7e65 into patternfly:main Sep 25, 2025
    13 checks passed
    @logonoff logonoff deleted the codeeditor3 branch September 25, 2025 17:02
    @mcoker mcoker mentioned this pull request Sep 25, 2025
    Closed
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Reviewers

    @andrew-ronaldson andrew-ronaldson andrew-ronaldson approved these changes

    @mcoker mcoker mcoker approved these changes

    @kmcfaul kmcfaul kmcfaul approved these changes

    @thatblindgeye thatblindgeye thatblindgeye approved these changes

    Assignees

    No one assigned

    Labels

    Stale

    Projects

    None yet

    Milestone

    No milestone

    Development

    Successfully merging this pull request may close these issues.

    Code editor - use RedHatMono font Spike: Investigate theming in Monaco editor

    6 participants

    @logonoff @patternfly-build @andrew-ronaldson @mcoker @kmcfaul @thatblindgeye
    0