From 7ba4dc1bf623873eb668937c2000419ec709ffa5 Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Tue, 19 May 2026 09:56:09 +0000 Subject: [PATCH] Frontend: Tune lightbox theme for face markers, retire ESLint-Prettier glue #4966 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Refactor `meta.css` face-marker palette to consume theme tokens (Path A): default rect → `on-surface`; named-marker stroke → `primary`; draft → `accent`; hover → `primary-darken-1`; handle → `primary-darken-1` fill + `primary` stroke; Confirm pill → `primary-darken-2`; Cancel pill → `highlight-lighten-1`; Remove pill → `remove`; Back button → `surface`. - Retune the `lightbox` theme block to support the rebind: `primary #F2F3F3 → #9E8FC9` (muted purple), `accent #2D2E2E → #BDAFE4` (lavender), `surface #151515 → #181818`, `surface-bright → #1c1c1c`, `button → #242424`, `highlight #424041 → #3c3c3c`, `remove → #cd4645`. Effectively reverts the `surface-variant ↔ on-surface-variant` swap and re-introduces an explicit `.v-tooltip.v-theme--lightbox` override in `lightbox.css`. - Bump `variations.darken` to 2 so `--v-theme-primary-darken-2` resolves. - Swap the in-template button order in `markers.vue` to Cancel-left / Confirm-right for both the pending-add and remove-confirm popovers. - Add inline comments to the `default.add` and updated `lightbox` entries so each color's purpose stays documented at the source. - Drop `eslint-plugin-prettier` (its `prettier/prettier` rule was already `"off"`, making the plugin inert). Replace `plugin:prettier/recommended` with a direct `eslint-config-prettier` extend; keep ESLint's own `indent` / `quotes` / `brace-style` rules as the JS formatter. - Tell ESLint to ignore `*.{css,scss,sass}` so Prettier owns CSS unambiguously; wire `npm run fmt-css` / `npm run lint-css` Prettier passes into `npm run fmt` / `npm run lint` so `make fmt-js` and `make lint-js` cover stylesheets too. - Drop `eslint-plugin-prettier` from the dev-container global install list and the `frontend/tests/README.md` dependency table; regenerate `NOTICE` files. --- NOTICE | 1 - frontend/Makefile | 2 +- frontend/NOTICE | 1 - frontend/eslint.config.mjs | 42 +++-------- frontend/package.json | 7 +- frontend/src/component/meta/face/markers.vue | 16 ++--- frontend/src/css/lightbox.css | 11 ++- frontend/src/css/meta.css | 29 ++++---- frontend/src/options/themes.js | 28 ++++---- frontend/tests/README.md | 1 - package-lock.json | 76 -------------------- 11 files changed, 62 insertions(+), 152 deletions(-) diff --git a/NOTICE b/NOTICE index 108671818..1b59d8cb8 100644 --- a/NOTICE +++ b/NOTICE @@ -9644,7 +9644,6 @@ eslint-formatter-pretty MIT Sindre Sorhus sindresorhus@gmail eslint-plugin-html ISC n/a eslint-plugin-import MIT Ben Mosher eslint-plugin-node MIT Toru Nagashima -eslint-plugin-prettier MIT Teddy Katz eslint-plugin-vue MIT Toru Nagashima (https://github.com/mysticatea) eslint-plugin-vuetify MIT Kael Watts-Deuchar eslint-webpack-plugin MIT Ricardo Gobbo de Souza diff --git a/frontend/Makefile b/frontend/Makefile index d891a2187..b88e79271 100644 --- a/frontend/Makefile +++ b/frontend/Makefile @@ -47,7 +47,7 @@ install-npm: install-testcafe: npm install -g --ignore-scripts --no-fund --no-audit --no-update-notifier testcafe@latest install-eslint: - npm install -g --ignore-scripts --no-fund --no-audit --no-update-notifier eslint globals @eslint/eslintrc @eslint/js eslint-config-prettier eslint-formatter-pretty eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-vue eslint-webpack-plugin vue-eslint-parser prettier + npm install -g --ignore-scripts --no-fund --no-audit --no-update-notifier eslint globals @eslint/eslintrc @eslint/js eslint-config-prettier eslint-formatter-pretty eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue eslint-webpack-plugin vue-eslint-parser prettier upgrade: $(info Securely upgrading NPM dependencies...) $(DOCKER_NPM) 'npx -y npm@latest update --save --package-lock --ignore-scripts --no-fund --no-audit --no-update-notifier && npx -y npm@latest install --ignore-scripts --no-audit --no-fund --no-update-notifier' diff --git a/frontend/NOTICE b/frontend/NOTICE index 7e15b3cf8..d119c8420 100644 --- a/frontend/NOTICE +++ b/frontend/NOTICE @@ -34,7 +34,6 @@ eslint-formatter-pretty MIT Sindre Sorhus sindresorhus@gmail eslint-plugin-html ISC n/a eslint-plugin-import MIT Ben Mosher eslint-plugin-node MIT Toru Nagashima -eslint-plugin-prettier MIT Teddy Katz eslint-plugin-vue MIT Toru Nagashima (https://github.com/mysticatea) eslint-plugin-vuetify MIT Kael Watts-Deuchar eslint-webpack-plugin MIT Ricardo Gobbo de Souza diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs index 8a40d6dfd..1c48e4371 100644 --- a/frontend/eslint.config.mjs +++ b/frontend/eslint.config.mjs @@ -22,6 +22,12 @@ export default defineConfig([ "tests/acceptance/screenshots/", "tests/upload-files/", "**/*.html", + // CSS/SCSS/SASS are owned by Prettier (see `frontend/.prettierrc.json` overrides). + // Ignored here to avoid the "no matching configuration" warning and any + // accidental formatter jitter from a future ESLint CSS plugin. + "**/*.css", + "**/*.scss", + "**/*.sass", "**/.idea", "**/.codex", "**/.env", @@ -35,7 +41,7 @@ export default defineConfig([ ]), ...pluginVue.configs["flat/recommended"], { - extends: compat.extends("eslint:recommended", "plugin:prettier/recommended", "plugin:vuetify/base"), + extends: compat.extends("eslint:recommended", "eslint-config-prettier", "plugin:vuetify/base"), languageOptions: { globals: { ...globals.browser, @@ -47,30 +53,6 @@ export default defineConfig([ ecmaVersion: "latest", sourceType: "module", }, - settings: { - "prettier/prettier": { - // Settings for how to process Vue SFC Blocks - SFCBlocks: { - template: false, - script: false, - style: false, - }, - - // Use prettierrc for prettier options or not (default: `true`) - usePrettierrc: true, - - // Set the options for `prettier.getFileInfo`. - // @see https://prettier.io/docs/en/api.html#prettiergetfileinfofilepath-options - fileInfoOptions: { - // Path to ignore file (default: `'.prettierignore'`) - // Notice that the ignore file is only used for this plugin - ignorePath: ".testignore", - - // Process the files in `node_modules` or not (default: `false`) - withNodeModules: false, - }, - }, - }, rules: { // Match what Prettier was producing: 2-space indent (4 for CSS lives in .prettierrc), switch // cases nested one level, method-chain continuations indented one level. @@ -127,12 +109,10 @@ export default defineConfig([ multiline: "ignore", }, ], - // Prettier reflow is off — it collapses intentional newlines (multi-line method chains, - // predicate lists) that help readability. Quote style and indent are enforced by the - // ESLint rules above instead. Run `prettier --write ` manually for full reflow. - // The plugin:prettier/recommended extends above still applies eslint-config-prettier, - // which disables ESLint stylistic rules that would conflict with Prettier-formatted code. - "prettier/prettier": "off", + // Note: Prettier is no longer invoked by ESLint. The `eslint-config-prettier` extends + // above still disables ESLint stylistic rules that would conflict with hand-run Prettier + // formatting on CSS/SCSS/SASS. Run `prettier --write src/**/*.{css,scss,sass}` (or use + // the `fmt-css` / `lint-css` npm scripts) to format stylesheets. }, }, ]); diff --git a/frontend/package.json b/frontend/package.json index 9737060dd..804325e80 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,11 +14,13 @@ "postbuild": "node scripts/precompress.js", "debug": "webpack --stats-error-details", "dep-list": "npx npm-check-updates", - "fmt": "eslint --cache --fix src/ *.js eslint.config.mjs", + "fmt": "eslint --cache --fix src/ *.js eslint.config.mjs && npm run fmt-css", + "fmt-css": "prettier --write \"src/**/*.{css,scss,sass}\"", "fmt-npm": "prettier --write package.json", "gettext-compile": "cross-env GETTEXT_MERGE=1 vue-gettext-compile --config gettext.config.js", "gettext-extract": "cross-env GETTEXT_MERGE=0 vue-gettext-extract --config gettext.config.js", - "lint": "eslint --cache src/ *.js", + "lint": "eslint --cache src/ *.js && npm run lint-css", + "lint-css": "prettier --check \"src/**/*.{css,scss,sass}\"", "test": "cross-env TZ=UTC BUILD_ENV=development NODE_ENV=development BABEL_ENV=test vitest run", "test-watch": "cross-env TZ=UTC BUILD_ENV=development NODE_ENV=development BABEL_ENV=test vitest --watch", "test-coverage": "cross-env TZ=UTC BUILD_ENV=development NODE_ENV=development BABEL_ENV=test vitest run --coverage", @@ -70,7 +72,6 @@ "eslint-plugin-html": "^8.1.4", "eslint-plugin-import": "^2.32.0", "eslint-plugin-node": "^11.1.0", - "eslint-plugin-prettier": "^5.5.5", "eslint-plugin-vue": "^10.9.1", "eslint-plugin-vuetify": "^2.7.2", "eslint-webpack-plugin": "^5.0.3", diff --git a/frontend/src/component/meta/face/markers.vue b/frontend/src/component/meta/face/markers.vue index 9c7c72dde..088822cd9 100644 --- a/frontend/src/component/meta/face/markers.vue +++ b/frontend/src/component/meta/face/markers.vue @@ -51,6 +51,11 @@
+ -
+
+ -
-
-