♻️(frontend) replace hardcoded colors with contextual tokens

[dtinth]

Purpose

Many parts of the editor are hardcoded to use global colors (which do not respond to dark/light modes) instead of contextual colors (which are ready to use with dark theme). This makes it hard to create dark theme for it.

This PR replaces hardcoded global color tokens with Cunningham contextual tokens throughout the frontend, enabling automatic adaptation between light and dark themes.

Related issue:

• Dark mode for docs #1247

Proposal

• Replaced hardcoded color values in the following components:
  • LeftPanel (desktop and mobile variants)
  • DropButton popover
  • DropdownMenu items
  • DocEditor container
  • DocEditor styles (BlockNote integration, inline code, links)
  • TableContent panel and headings

Before	After
Editor (Dark)
Docs List (Dark)
Editor (Light)
Docs List (Light)

Colors changed

Element	Original Color	Contextual Token	Default Theme (Light)	Dark Theme
Left panel background	gray-000	surface--primary	gray-000	gray-800
DropButton popover background	white	surface--primary	gray-000	gray-800
Dropdown menu item background	gray-000	surface--primary	gray-000	gray-800
DocEditor container background	white	surface--primary	gray-000	gray-800
BlockNote editor text	gray-700	39% of neutral--primary + 61% of neutral--secondary	gray-700	39% of gray-050+ 61% of gray-100
BlockNote inline code background	gainsboro	palette--gray--tertiary	gray-150 ⚠️	gray-850
DocEditor link color	gray-600	neutral--secondary	gray-600	gray-100
Table of content panel background	gray-000	surface--primary	gray-000	gray-800
Table of content heading (hover)	gray-100	neutral--secondary	gray-100	gray-700
BlockNote shadow	#cfcfcf	border--semantic--neutral--tertiary	gray-150 ⚠️	gray-700
BlockNote border	#efefef	border--surface--primary	gray-100	gray-750

⚠️ indicates changed colors — When there is no contextual color that directly matches, a close alternative is chosen such that contrast is not decreased.

External contributions

Thank you for your contribution! 🎉

Please ensure the following items are checked before submitting your pull request:

• I have read and followed the contributing guidelines
• I have read and agreed to the Code of Conduct
• I have signed off my commits with git commit --signoff (DCO compliance)
• I have signed my commits with my SSH or GPG key (git commit -S)
• My commit messages follow the required format: <gitmoji>(type) title description
• I have added a changelog entry under ## [Unreleased] section (if noticeable change)
• I have added corresponding tests for new features or bug fixes (if applicable)

[AntoLC]

Thank you for your contribution.
Indeed, it is is linked to this issue: suitenumerique/cunningham#369

I can see some noticeable differences between the modified editor (left) and the original one (right), could we find a color in the palette closer to what we have ?

[dtinth]

@AntoLC Thank you very much for the PR review. Currently, Docs hardcoded main text color to:

  & .bn-editor {
    color: var(--c--globals--colors--gray-700);
  }

In Cunningham's design tokens, these are the colors available:

https://github.com/suitenumerique/cunningham/blob/f3f59ce064a22e562426c290ceb42ea43235abd7/packages/tokens/src/bin/cunningham.ts#L586-L591

      neutral: {
        primary: "ref(globals.colors.gray-850)",
        secondary: "ref(globals.colors.gray-600)",
        tertiary: "ref(globals.colors.gray-550)",
        "on-neutral": "ref(globals.colors.gray-050)",
      },

So we have two choices:

• var(--c--contextuals--content--semantic--neutral--primary) → gray-850 → main text is darker → contrast is increased
• var(--c--contextuals--content--semantic--neutral--secondary) → gray-600 → main text is lighter → contrast is decreased

I looked into Figma, but it seems that “Création des palettes de couleurs en Dark mode” has not been implemented yet. That's why the color choices are limited. In this PR I opted to choose the darker one, because it leads to better contrast (for accessibility).

This may need more discussion with Docs designer or Cunningham team on what is the best way forward. An alternative is to use color mixing e.g.

  & .bn-editor {
    color: color-mix(
      in srgb,
      var(--c--contextuals--content--semantic--neutral--primary) 40%,
      var(--c--contextuals--content--semantic--neutral--secondary)
    );
  }

That is, 40% of primary and 60% of secondary. This approximates the global gray-700 color. However I am not sure if that’s a good approach 😅. What do you think?

[dtinth]

@AntoLC Hello again, I have updated the color of the main text to this now:

    color: color-mix(
      in srgb,
      var(--c--contextuals--content--semantic--neutral--primary) 39%,
      var(--c--contextuals--content--semantic--neutral--secondary)
    );

I created a brute-forcer to determine the best percentage that results in the closest color. 39% of gray-850 + 61% of gray-600 results in gray-700.

• Pros:
  • Matches the color before change.
  • Supports dark mode.
• Cons:
  • Code seem a bit hacky 😅

I believe this will make the PR a strictly forward progress, as IMO, using color-mix(...) of contextual colors is better than using a global color.

[AntoLC]

I can still see to big diff with what we have:

I think we should wait about overriding the mantime tokens, if you revert the styles.tsx part, I am keen that we merge what you made though.

You can still override the mantime tokens (or other part) on your own instance if you want, here some examples on how to do:
#771
https://antolc.github.io/docs-customized/docs-custom/public/custom-style.css
https://github.com/suitenumerique/docs/blob/main/docs/customization.md#runtime-theming-

Dark theme is on the roadmap, I will try to increase the priority.