mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-24 12:07:17 +09:00
Oleg Isonen
d4b1994a6a
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 - [x] Restore the original project-tag scrim and foreground in both themes. - [x] Inventory native, CodeMirror, and canvas rich-text selection paths. - [x] Unify native and shared CodeMirror text-selection colors. - [x] Keep text selection independent from selected control and navigation states. - [x] Add the missing CSS fragment editor story. - [x] Add light- and dark-mode browser regressions and confirm they fail before the fix. - [x] Enforce 4.5:1 selected-text contrast and 3:1 highlight-to-surface contrast across supported theme inputs. - [x] Remove duplicated and unreachable chromatic color derivation while preserving outputs. - [x] Review documentation impact; the design-system color-token reference is updated, with no user-facing product documentation change required. - [x] 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
178 lines
7.0 KiB
JSON
178 lines
7.0 KiB
JSON
{
|
|
"name": "@webstudio-is/builder",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"description": "Webstudio Builder UI as a service",
|
|
"type": "module",
|
|
"scripts": {
|
|
"prebuild": "pnpm --filter=@webstudio-is/http-client... build && which remix",
|
|
"build": "remix vite:build",
|
|
"css-to-ws": "tsx --conditions=webstudio ../../packages/css-data/bin/css-to-ws.ts",
|
|
"build:webflow-presets": "pnpm css-to-ws ./app/shared/copy-paste/plugin-webflow/style-presets.css ./app/shared/copy-paste/plugin-webflow/__generated__/style-presets.ts",
|
|
"build:tailwind-preflight": "tsx --conditions=webstudio ./app/shared/tailwind/preflight-bin.ts && oxfmt ./app/shared/tailwind/__generated__/preflight.ts",
|
|
"generate-server-only-api-metadata": "tsx --conditions=webstudio --tsconfig tsconfig.json --import ../../scripts/register-react-global.ts ./scripts/generate-server-only-api-metadata.ts && (cd ../../packages/protocol && oxfmt src/builder-api/__generated__/server-only-router-operation-metadata.ts)",
|
|
"start": "remix-serve build/server/index.js",
|
|
"backend": "bash ./backend/run.sh",
|
|
"dev": "remix vite:dev",
|
|
"dev:local": "bash ./dev/run-local.sh",
|
|
"dev:auth": "DEBUG=ws:* remix vite:dev",
|
|
"e2e:ci": "node --env-file=.env --env-file-if-exists=.env.development --conditions=webstudio ./node_modules/@playwright/test/cli.js test --config=playwright.config.ts",
|
|
"e2e": "bash ./e2e/run.sh run",
|
|
"e2e:dev:backend": "bash ./e2e/run.sh dev-backend",
|
|
"e2e:dev": "bash ./e2e/run.sh dev",
|
|
"e2e:schema-cache": "bash ./e2e/run.sh schema-cache",
|
|
"e2e:supabase-migrations": "bash ./e2e/run.sh supabase-migrations",
|
|
"e2e:ci:shard": "bash ./e2e/run.sh ci-shard",
|
|
"typecheck": "tsc --noEmit --emitDeclarationOnly false",
|
|
"test": "vitest run",
|
|
"test:browser": "vitest run --project '*-browser-*'"
|
|
},
|
|
"dependencies": {
|
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
|
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
"@bomb.sh/args": "^0.3.1",
|
|
"@codemirror/autocomplete": "^6.18.6",
|
|
"@codemirror/commands": "^6.8.0",
|
|
"@codemirror/lang-css": "^6.3.1",
|
|
"@codemirror/lang-html": "^6.4.9",
|
|
"@codemirror/lang-javascript": "^6.2.3",
|
|
"@codemirror/lang-markdown": "^6.3.2",
|
|
"@codemirror/language": "^6.11.0",
|
|
"@codemirror/language-data": "^6.5.2",
|
|
"@codemirror/lint": "^6.8.5",
|
|
"@codemirror/state": "^6.5.2",
|
|
"@codemirror/view": "^6.36.4",
|
|
"@emotion/hash": "^0.9.2",
|
|
"@floating-ui/dom": "^1.6.13",
|
|
"@lexical/headless": "^0.21.0",
|
|
"@lexical/link": "^0.21.0",
|
|
"@lexical/react": "^0.21.0",
|
|
"@lexical/selection": "^0.21.0",
|
|
"@lexical/utils": "^0.21.0",
|
|
"@lezer/common": "^1.2.3",
|
|
"@lezer/css": "^1.1.11",
|
|
"@lezer/highlight": "^1.2.1",
|
|
"@nanostores/react": "^0.8.0",
|
|
"@nkzw/use-relative-time": "^1.1.0",
|
|
"@radix-ui/react-select": "^2.2.2",
|
|
"@radix-ui/react-tooltip": "^1.2.4",
|
|
"@react-aria/interactions": "^3.23.0",
|
|
"@react-aria/utils": "^3.27.0",
|
|
"@remix-run/express": "^2.16.5",
|
|
"@remix-run/node": "^2.16.5",
|
|
"@remix-run/react": "^2.16.5",
|
|
"@remix-run/serve": "^2.16.5",
|
|
"@remix-run/server-runtime": "^2.16.5",
|
|
"@trpc/client": "^10.45.2",
|
|
"@trpc/server": "^10.45.2",
|
|
"@tsndr/cloudflare-worker-jwt": "^2.5.3",
|
|
"@tus/file-store": "^2.1.0",
|
|
"@tus/s3-store": "^2.0.4",
|
|
"@tus/server": "^2.4.1",
|
|
"@unocss/core": "66.6.8",
|
|
"@vercel/remix": "2.15.3",
|
|
"@webstudio-is/asset-uploader": "workspace:*",
|
|
"@webstudio-is/authorization-token": "workspace:*",
|
|
"@webstudio-is/content-engine": "workspace:*",
|
|
"@webstudio-is/css-data": "workspace:*",
|
|
"@webstudio-is/css-engine": "workspace:*",
|
|
"@webstudio-is/dashboard": "workspace:*",
|
|
"@webstudio-is/design-system": "workspace:*",
|
|
"@webstudio-is/domain": "workspace:*",
|
|
"@webstudio-is/expression": "workspace:*",
|
|
"@webstudio-is/feature-flags": "workspace:*",
|
|
"@webstudio-is/fonts": "workspace:*",
|
|
"@webstudio-is/html-data": "workspace:*",
|
|
"@webstudio-is/http-client": "workspace:*",
|
|
"@webstudio-is/icons": "workspace:*",
|
|
"@webstudio-is/image": "workspace:*",
|
|
"@webstudio-is/plans": "workspace:*",
|
|
"@webstudio-is/postgrest": "workspace:*",
|
|
"@webstudio-is/project": "workspace:*",
|
|
"@webstudio-is/project-build": "workspace:*",
|
|
"@webstudio-is/project-migrations": "workspace:*",
|
|
"@webstudio-is/protocol": "workspace:*",
|
|
"@webstudio-is/query-builder": "workspace:*",
|
|
"@webstudio-is/query-builder-react": "workspace:*",
|
|
"@webstudio-is/react-sdk": "workspace:*",
|
|
"@webstudio-is/sdk": "workspace:*",
|
|
"@webstudio-is/sdk-components-animation": "workspace:*",
|
|
"@webstudio-is/sdk-components-react": "workspace:*",
|
|
"@webstudio-is/sdk-components-react-radix": "workspace:*",
|
|
"@webstudio-is/sdk-components-registry": "workspace:*",
|
|
"@webstudio-is/sync-client": "workspace:*",
|
|
"@webstudio-is/template": "workspace:*",
|
|
"@webstudio-is/trpc-interface": "workspace:*",
|
|
"@webstudio-is/wsauth": "workspace:*",
|
|
"args-tokenizer": "^0.3.0",
|
|
"bcp-47": "^2.1.0",
|
|
"change-case": "^5.4.4",
|
|
"colorjs.io": "^0.6.1",
|
|
"cookie": "^1.0.1",
|
|
"css-tree": "^3.2.1",
|
|
"debug": "^4.3.7",
|
|
"downshift": "^6.1.7",
|
|
"entrijs": "^0.0.11",
|
|
"express": "^4.21.1",
|
|
"fast-deep-equal": "^3.1.3",
|
|
"immer": "^10.1.1",
|
|
"immerhin": "^0.10.0",
|
|
"isbot": "^5.1.25",
|
|
"lexical": "^0.21.0",
|
|
"match-sorter": "^8.0.0",
|
|
"micromark": "^4.0.2",
|
|
"micromark-extension-gfm": "^3.0.0",
|
|
"nanoevents": "^9.1.0",
|
|
"nanoid": "^5.1.5",
|
|
"nanostores": "^0.11.3",
|
|
"picocolors": "^1.1.1",
|
|
"pretty-bytes": "^6.1.1",
|
|
"range-parser": "^1.2.1",
|
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-error-boundary": "^5.0.0",
|
|
"remix-auth": "^3.7.0",
|
|
"remix-auth-form": "^1.5.0",
|
|
"remix-auth-github": "^1.7.0",
|
|
"remix-auth-google": "^2.0.0",
|
|
"remix-auth-oauth2": "^2.3.0",
|
|
"shallow-equal": "^3.1.0",
|
|
"slugify": "^1.6.6",
|
|
"strip-indent": "^4.0.0",
|
|
"tiny-invariant": "^1.3.3",
|
|
"title-case": "^4.3.2",
|
|
"urlpattern-polyfill": "^10.1.0",
|
|
"use-debounce": "^10.0.4",
|
|
"valid-filename": "^4.0.0",
|
|
"warn-once": "^0.1.1",
|
|
"zod": "^4.4.3",
|
|
"zod-validation-error": "^5.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "1.50.1",
|
|
"@remix-run/dev": "^2.16.5",
|
|
"@types/debug": "^4.1.12",
|
|
"@types/dom-navigation": "^1.0.5",
|
|
"@types/express": "^4.17.21",
|
|
"@types/range-parser": "^1.2.7",
|
|
"@types/react": "^18.2.70",
|
|
"@types/react-dom": "^18.2.25",
|
|
"@unocss/preset-wind4": "^66.6.8",
|
|
"@vitest/browser": "3.1.1",
|
|
"@vitest/coverage-v8": "3.1.1",
|
|
"@webstudio-is/tsconfig": "workspace:*",
|
|
"css.escape": "^1.5.1",
|
|
"fast-glob": "^3.3.2",
|
|
"msw": "^2.13.2",
|
|
"playwright": "1.50.1",
|
|
"react-router-dom": "^6.30.0",
|
|
"react-test-renderer": "18.3.0-canary-14898b6a9-20240318",
|
|
"type-fest": "^4.37.0",
|
|
"typescript": "7.0.2",
|
|
"vite": "^6.3.4",
|
|
"vitest": "3.1.1"
|
|
},
|
|
"sideEffects": false,
|
|
"license": "AGPL-3.0-or-later"
|
|
}
|