Skip to content

fix: Improve editor selection and project tag contrast - #6302

Open
kof wants to merge 9 commits into
mainfrom
fix/dark-mode-contrast-6301
Open

fix: Improve editor selection and project tag contrast#6302
kof wants to merge 9 commits into
mainfrom
fix/dark-mode-contrast-6301

Conversation

@kof

@kof kof commented Sep 1, 2026

Copy link
Copy Markdown
Member

Closes #6301

Summary

  • Restore Dashboard project tags to the pre-color-refactor treatment: fixed white text over a 30% black scrim in both application themes.
  • Use one high-contrast text-selection treatment across native inputs, textareas, contenteditable fields, and every shared CodeMirror editor.
  • Preserve the existing subtle selection treatment for Navigator, Project Settings, command menus, Dashboard navigation, and other selected controls.
  • Add direct Storybook coverage for the CSS fragment editor.
  • Simplify chromatic color derivation from 571 to 329 lines without changing computed colors.

Technical choices

  • Keep project tags independent from application-theme polarity because they overlay arbitrary thumbnail artwork.
  • Keep the existing selectionBackground control-state export unchanged at its original 12% light / 20% dark accent blend.
  • Define separate --background-text-selection and --foreground-on-text-selection tokens exclusively for selected text.
  • Use the bounded accent in light mode and a luminance-lifted accent in dark mode so selected text remains distinct even with extreme custom theme colors.
  • Style CodeMirror through its existing selection layer and ::selection CSS hooks; no selection tracking or editor-state logic is added.
  • Leave canvas rich-text selection independent: authored canvas documents do not load the Builder UI theme stylesheet.
  • Replace five duplicated XYZ clamp formulas with the exact upper-luminance cap they reduce to. The removed lower-bound and white-mixing branches were unreachable because the minimum was fixed at zero.

Todo

  • Restore the original project-tag scrim and foreground in both themes.
  • Inventory native, CodeMirror, and canvas rich-text selection paths.
  • Unify native and shared CodeMirror text-selection colors.
  • Keep text selection independent from selected control and navigation states.
  • Add the missing CSS fragment editor story.
  • Add light- and dark-mode browser regressions and confirm they fail before the fix.
  • Enforce 4.5:1 selected-text contrast and 3:1 highlight-to-surface contrast across supported theme inputs.
  • Remove duplicated and unreachable chromatic color derivation while preserving outputs.
  • Review documentation impact; the design-system color-token reference is updated, with no user-facing product documentation change required.
  • Verify fixture impact; no fixture inputs or generated outputs are affected.

Verification

  • pnpm --filter @webstudio-is/design-system test — 227 tests passed, including the control/text separation regression, Navigator tree interaction, default-palette comparisons, and the full supported-theme contrast sweep
  • pnpm --filter @webstudio-is/design-system typecheck
  • pnpm --filter @webstudio-is/builder exec vitest run app/shared/code-editor-base.browser.test.tsx --project app-browser-shared
  • pnpm --filter @webstudio-is/builder exec vitest run app/dashboard/projects/project-card.browser.test.tsx --project app-browser-canvas-dashboard
  • pnpm --filter @webstudio-is/builder typecheck
  • Targeted oxlint, formatting, and git diff --check
  • Live dark-mode Dashboard verification of the restored subtle navigation selection
  • Storybook visual checks for the full color system and input/CodeMirror selection in light and dark modes
@kof kof changed the title fix: Improve dark mode contrast Sep 1, 2026
Comment thread packages/design-system/src/colors/colors.css Outdated
Comment thread packages/design-system/src/colors/color-contrast.ts
Comment thread packages/design-system/src/components/selection-color.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant