mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-10 06:24:35 +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
110 lines
6.3 KiB
JSON
110 lines
6.3 KiB
JSON
{
|
|
"packageManager": "pnpm@9.14.4",
|
|
"name": "webstudio-root",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"build": "pnpm -r --filter='!./fixtures/*' build",
|
|
"webstudio": "node packages/cli/local.js",
|
|
"dts": "pnpm -r dts",
|
|
"dev": "pnpm --filter=@webstudio-is/builder dev:local",
|
|
"evaluations": "pnpm --filter webstudio evaluations",
|
|
"lint": "oxlint --deny-warnings",
|
|
"check:package-boundaries": "node scripts/check-package-boundaries.mjs",
|
|
"check:generated-api": "pnpm --filter @webstudio-is/project-build generate-runtime-operation-contracts && pnpm --filter @webstudio-is/builder generate-server-only-api-metadata && node scripts/check-clean-files.mjs packages/project-build/src/contracts/__generated__/runtime-operation-contracts.ts packages/protocol/src/builder-api/__generated__/server-only-router-operation-metadata.ts",
|
|
"check:generated-docs": "pnpm --filter @webstudio-is/project-build generate-docs && pnpm --filter webstudio generate-docs && pnpm docs:mcp:test && pnpm docs:mcp:typecheck && pnpm docs:content-engine:test && pnpm docs:mcp:check && pnpm docs:content-engine:check && node scripts/check-clean-files.mjs packages/project-build/src/docs.generated.ts packages/cli/src/docs.generated.ts",
|
|
"check:fixture-sizes": "tsx scripts/check-fixture-sizes.ts",
|
|
"docs:mcp:sync": "tsx scripts/docs/generate-mcp-docs.ts",
|
|
"docs:mcp:check": "pnpm docs:mcp:sync && node scripts/check-clean-files.mjs docs/university/mcp.md",
|
|
"docs:mcp:test": "tsx --test scripts/docs/generate-mcp-docs.test.ts",
|
|
"docs:mcp:typecheck": "tsc --noEmit -p scripts/docs/tsconfig.json",
|
|
"docs:content-engine:sync": "tsx scripts/docs/generate-content-engine-docs.ts",
|
|
"docs:content-engine:check": "pnpm docs:content-engine:sync && node scripts/check-clean-files.mjs docs/university/foundations/content-engine-reference.md",
|
|
"docs:content-engine:test": "tsx --test scripts/docs/generate-content-engine-docs.test.ts && pnpm --filter webstudio exec vitest run src/content-engine-reference.test.ts",
|
|
"test:packages": "pnpm -r --filter '!@webstudio-is/builder' --filter '!webstudio' test",
|
|
"test:cli": "pnpm --filter webstudio test",
|
|
"test:builder:core": "pnpm --filter @webstudio-is/builder exec vitest run --project 'core-*'",
|
|
"test:builder:app": "pnpm --filter @webstudio-is/builder exec vitest run --project 'app-*'",
|
|
"fixtures": "pnpm -r fixtures:link && pnpm -r fixtures:sync && pnpm -r fixtures:build",
|
|
"checks": "pnpm -r test && pnpm -r typecheck && pnpm lint && pnpm check:package-boundaries && pnpm check:generated-api && pnpm check:generated-docs && pnpm fixtures",
|
|
"e2e:builder": "pnpm --filter=@webstudio-is/builder e2e",
|
|
"e2e:builder:build": "pnpm --filter=@webstudio-is/builder build",
|
|
"e2e:builder:dev:backend": "pnpm --filter=@webstudio-is/builder e2e:dev:backend",
|
|
"e2e:builder:dev": "pnpm --filter=@webstudio-is/builder e2e:dev",
|
|
"e2e:builder:refresh-schema-cache": "pnpm --filter=@webstudio-is/builder e2e:schema-cache",
|
|
"e2e:builder:check-supabase-migrations": "pnpm --filter=@webstudio-is/builder e2e:supabase-migrations",
|
|
"playwright": "pnpm -r playwright-init",
|
|
"format": "oxfmt",
|
|
"storybook:dev": "storybook dev -p 6006",
|
|
"storybook:build": "storybook build",
|
|
"visual-regression": "tsx --conditions=webstudio scripts/visual-regression/run.ts",
|
|
"visual-regression:ui": "tsx --conditions=webstudio scripts/visual-regression/run.ts --open-report",
|
|
"visual-regression:report": "tsx scripts/visual-regression/open-report.ts",
|
|
"visual-regression:test": "tsx --test scripts/visual-regression/*.test.ts",
|
|
"visual-regression:typecheck": "tsc -p scripts/visual-regression/tsconfig.json",
|
|
"migrations": "pnpm --filter=@webstudio-is/prisma-client generate && pnpm --filter=./packages/prisma-client migrations --dev --cwd ../../apps/builder",
|
|
"prepare": "which git && git config core.hooksPath .git/hooks/ && simple-git-hooks || echo git not installed",
|
|
"local:version-snapshot": "pnpm -r exec pnpm version prepatch --preid $(cat /dev/urandom | LC_ALL=C tr -dc 'a-z' | fold -w 8 | head -n 1)",
|
|
"local:publish-snapshot": "pnpm -r publish --access public --no-git-checks --registry http://localhost:4873",
|
|
"local:dangerously-undo-version-snapshot": "git restore --source=$(git branch --show-current) '**/*/package.json'",
|
|
"local:release": "pnpm build && pnpm dts && pnpm local:version-snapshot && pnpm local:publish-snapshot && pnpm local:dangerously-undo-version-snapshot && echo \"now execute\npnpm up -r -L '@webstudio-is/*' --registry http://localhost:4873\"",
|
|
"clean:deep": "bash ./cleanup.sh"
|
|
},
|
|
"simple-git-hooks": {
|
|
"pre-commit": "./node_modules/.bin/nano-staged"
|
|
},
|
|
"devDependencies": {
|
|
"@modelcontextprotocol/sdk": "^1.10.0",
|
|
"@radix-ui/react-tooltip": "^1.2.4",
|
|
"@storybook/addon-actions": "^8.6.4",
|
|
"@storybook/addon-backgrounds": "^8.6.4",
|
|
"@storybook/addon-controls": "^8.6.4",
|
|
"@storybook/addon-toolbars": "^8.6.4",
|
|
"@storybook/react": "^8.6.4",
|
|
"@storybook/react-vite": "^8.6.4",
|
|
"@types/node": "^22.13.10",
|
|
"@types/react": "^18.2.70",
|
|
"@types/react-dom": "^18.2.25",
|
|
"@webstudio-is/project-build": "workspace:^",
|
|
"@webstudio-is/vision": "workspace:^",
|
|
"esbuild": "^0.25.3",
|
|
"nano-staged": "^0.8.0",
|
|
"oxfmt": "0.58.0",
|
|
"oxlint": "^1.73.0",
|
|
"parse5": "7.3.0",
|
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
"simple-git-hooks": "^2.11.1",
|
|
"storybook": "^8.6.4",
|
|
"tsx": "^4.19.3",
|
|
"typescript": "7.0.2",
|
|
"webstudio": "workspace:^",
|
|
"vite": "^6.3.4"
|
|
},
|
|
"engines": {
|
|
"node": "22",
|
|
"pnpm": "^9.14.0",
|
|
"yarn": "This project is configured to use pnpm"
|
|
},
|
|
"nano-staged": {
|
|
"*.{ts,tsx,js,json,css,md}": "oxfmt"
|
|
},
|
|
"pnpm": {
|
|
"overrides": {
|
|
"@types/react": "^18.2.70",
|
|
"@types/react-dom": "^18.2.25",
|
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
"playwright": "1.50.1",
|
|
"@playwright/test": "1.50.1",
|
|
"vite@<7": "6.3.4"
|
|
},
|
|
"patchedDependencies": {
|
|
"@stitches/react@1.3.1-1": "patches/@stitches__react@1.3.1-1.patch",
|
|
"@radix-ui/react-scroll-area@1.0.5": "patches/@radix-ui__react-scroll-area@1.0.5.patch",
|
|
"@remix-run/dev": "patches/@remix-run__dev.patch"
|
|
}
|
|
}
|
|
}
|