Frontend: Refactor lightbox theme colors and chip-selector tokens photoprism#4966

- Centralize sidebar/PhotoSwipe caption link styling via new `.text-html`
  class in `text.css`; drops the previous `info`-token overload.
- Swap lightbox `surface-variant` ↔ `on-surface-variant` so Vuetify
  tooltips render dark natively (remove `.v-tooltip` override). Lift
  `on-surface` to `#f9fafb`, `primary` to `#F2F3F3`, `highlight` to
  `#424041`.
- Add cross-theme `add` color token to `ui.js` (dark `#3a6e73`, light
  `#cce3de`); register `add` and `remove` in Vuetify color variations.
- Rename chip-selector classes from color-named to action-named
  (`chip--add` / `chip--remove` / `chip--default` plus `--mixed` partial
  variants); double selectors (`.chip.chip--*`) to win over the UA
  `[role="button"] { color: inherit }` reset.
- Tune `remove` saturation in `ui.js`, `default`, and `lavender` themes.
- Bind face-marker chrome in `meta.css` to theme tokens: default rect +
  removing rect → `on-surface` / `remove`; Cancel pill → `button`;
  Remove pill → `remove`; pill text → `on-surface`.
- Remove the hardcoded `menuBgColor` literal in `lightbox.vue` and the
  redundant `.meta-caption a:hover` rule in `lightbox.css`.
- Update chip-selector vitest for renamed classes; Prettier auto-format
  in `views.css` and `vuetify.css`.

Author: lastzero

frontend/src/component/input/chip-selector.vue

@@ -156,13 +156,13 @@ export default {
       }
 
       if (item.action === "add") {
-        classes.push(item.mixed ? `${baseClass}--green-light` : `${baseClass}--green`);
+        classes.push(item.mixed ? `${baseClass}--add-mixed` : `${baseClass}--add`);
       } else if (item.action === "remove") {
-        classes.push(item.mixed ? `${baseClass}--red-light` : `${baseClass}--red`);
+        classes.push(item.mixed ? `${baseClass}--remove-mixed` : `${baseClass}--remove`);
       } else if (item.mixed) {
-        classes.push(`${baseClass}--gray-light`);
+        classes.push(`${baseClass}--default-mixed`);
       } else {
-        classes.push(`${baseClass}--gray`);
+        classes.push(`${baseClass}--default`);
       }
 
       return classes;

frontend/src/component/lightbox.vue

@@ -188,7 +188,6 @@ export default {
       sidebarVisible: shouldShowSidebar(),
       hideCaption: shouldHideCaption() || shouldShowSidebar(),
       menuElement: null,
-      menuBgColor: "#252525",
       menuVisible: false,
       lightbox: null, // Current PhotoSwipe lightbox instance.
       captionPlugin: null, // Current PhotoSwipe caption plugin instance.

frontend/src/component/lightbox/sidebar.vue

@@ -63,7 +63,7 @@
             @blur="onInlineFieldBlur"
           ></v-textarea>
           <!-- eslint-disable-next-line vue/no-v-html -- captionHtml is encode-then-sanitized via $util.sanitizeHtml($util.encodeHTML(raw)); see captionHtml() computed -->
-          <div v-else-if="model.Caption" class="text-body-2 meta-caption meta-scrollable" v-html="captionHtml"></div>
+          <div v-else-if="model.Caption" class="text-body-2 meta-caption meta-scrollable text-html" v-html="captionHtml"></div>
           <div v-else class="meta-add-prompt" @click.stop="startEditing('caption')">{{ $gettext("Add a Caption") }}</div>
           <template v-if="isEditable" #append>
             <p-lightbox-sidebar-toolbar
@@ -429,7 +429,7 @@
                 @blur="onInlineFieldBlur"
               ></v-textarea>
               <!-- eslint-disable-next-line vue/no-v-html -- f.htmlValue points at a sanitized computed (e.g. notesHtml) which runs $util.sanitizeHtml($util.encodeHTML(raw)). -->
-              <div v-else-if="f.display === 'html' && fieldHtml(f)" class="text-body-2 meta-scrollable" :class="`meta-${f.key}`" v-html="fieldHtml(f)"></div>
+              <div v-else-if="f.display === 'html' && fieldHtml(f)" class="text-body-2 meta-scrollable text-html" :class="`meta-${f.key}`" v-html="fieldHtml(f)"></div>
               <div v-else-if="f.display !== 'html' && f.read(photo)" class="text-body-2 meta-scrollable" :class="`meta-${f.key}`">{{ f.read(photo) }}</div>
               <div v-else class="meta-add-prompt" @click.stop="startEditing(f.key)">{{ f.placeholder ? f.placeholder : f.label }}</div>
               <template v-if="isEditable" #append>

frontend/src/css/chip-selector.css

@@ -1,112 +1,117 @@
 /* Chip Selector Styles */
 .chip-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 .chip-selector__title {
-  font-weight: 500;
-  font-size: 14px;
-  color: rgba(var(--v-theme-on-surface), 0.87);
-  margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(var(--v-theme-on-surface), 0.87);
+    margin-bottom: 8px;
 }
 
 .chip-selector__chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-height: 40px;
-  align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 40px;
+    align-items: flex-start;
 }
 
 .chip-selector__input-container {
-  margin-top: 8px;
+    margin-top: 8px;
 }
 
 .chip-selector__input {
-  width: 100%;
+    width: 100%;
 }
 
 /* Chip Styles */
 .chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 16px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  user-select: none;
-  min-height: 32px;
-  transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    user-select: none;
+    min-height: 32px;
+    transition: all 0.2s ease;
 }
 
 .chip__content {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
 }
 
 .chip__icon {
-  font-size: 16px;
-  opacity: 0.9;
+    font-size: 16px;
+    opacity: 0.9;
 }
 
-/* Chip States */
-.chip--gray {
-  background-color: rgb(var(--v-theme-secondary-light, var(--v-theme-surface-bright, var(--v-theme-surface))));
-  color: rgb(var(--v-theme-on-surface));
-  box-shadow: inset 0 0 0 1px rgba(var(--v-theme-on-surface), 0.12);
+/* Chip States — class names mirror the `item.action` value the chip-selector
+   emits (`add` / `remove` / default), and `--mixed` is the partial-selection
+   variant (action applies to only some of the selected items). Selectors are
+   doubled (`.chip.chip--*`) so the `color` rules out-rank the UA-level
+   `[role="button"] { color: inherit }` reset, which would otherwise strip the
+   on-token foreground from a solid chip rendered as a button. */
+.chip.chip--default {
+    background-color: rgb(var(--v-theme-secondary-light, var(--v-theme-surface-bright, var(--v-theme-surface))));
+    color: rgb(var(--v-theme-on-surface));
+    box-shadow: inset 0 0 0 1px rgba(var(--v-theme-on-surface), 0.12);
 }
 
-.chip--gray-light {
-  background-color: rgba(var(--v-theme-secondary-light, var(--v-theme-surface-bright, var(--v-theme-surface))), 0.55);
-  color: rgb(var(--v-theme-on-surface));
-  box-shadow: inset 0 0 0 1px rgba(var(--v-theme-on-surface), 0.12);
+.chip.chip--default-mixed {
+    background-color: rgba(var(--v-theme-secondary-light, var(--v-theme-surface-bright, var(--v-theme-surface))), 0.55);
+    color: rgb(var(--v-theme-on-surface));
+    box-shadow: inset 0 0 0 1px rgba(var(--v-theme-on-surface), 0.12);
 }
 
-.chip--green {
-    background-color: rgb(var(--v-theme-download));
-  color: rgb(var(--v-theme-on-download));
+.chip.chip--add {
+    background-color: rgba(var(--v-theme-add), 0.8);
+    color: rgb(var(--v-theme-on-add));
 }
 
-.chip--green-light {
-  background-color: rgba(var(--v-theme-download), 0.3);
-  color: rgb(var(--v-theme-download));
+.chip.chip--add-mixed {
+    background-color: rgba(var(--v-theme-add-darken-1), 0.45);
+    color: rgb(var(--v-theme-on-add));
 }
 
-.chip--red {
-  background-color: rgb(var(--v-theme-error));
-  color: rgb(var(--v-theme-on-error));
+.chip.chip--remove {
+    background-color: rgba(var(--v-theme-remove), 0.8);
+    color: rgb(var(--v-theme-on-remove));
 }
 
-.chip--red-light {
-  background-color: rgba(var(--v-theme-error), 0.3);
-  color: rgb(var(--v-theme-error));
+.chip.chip--remove-mixed {
+    background-color: rgba(var(--v-theme-remove-darken-1), 0.45);
+    color: rgb(var(--v-theme-on-remove));
 }
 
 /* Empty state */
 .chip-selector__empty {
-  padding: 16px;
-  text-align: center;
-  color: rgba(var(--v-theme-on-surface), 0.6);
-  font-style: italic;
+    padding: 16px;
+    text-align: center;
+    color: rgba(var(--v-theme-on-surface), 0.6);
+    font-style: italic;
 }
 
 /* Mobile optimizations */
 @media (max-width: 600px) {
-  .chip-selector__chips {
-    gap: 6px;
-  }
-  
-  .chip {
-    padding: 4px 8px;
-    font-size: 12px;
-    min-height: 28px;
-  }
-  
-  .chip__icon {
-    font-size: 14px;
-  }
+    .chip-selector__chips {
+        gap: 6px;
+    }
+
+    .chip {
+        padding: 4px 8px;
+        font-size: 12px;
+        min-height: 28px;
+    }
+
+    .chip__icon {
+        font-size: 14px;
+    }
 }

frontend/src/css/lightbox.css

@@ -177,17 +177,6 @@
     text-align: start;
 }
 
-.p-lightbox__container > .p-lightbox__sidebar .meta-caption a,
-.p-lightbox__container > .p-lightbox__sidebar .meta-notes a {
-    text-decoration: underline;
-    word-break: break-all;
-}
-
-.p-lightbox__container > .p-lightbox__sidebar .meta-caption a:hover,
-.p-lightbox__container > .p-lightbox__sidebar .meta-notes a:hover {
-    text-decoration: none;
-}
-
 .p-lightbox__container > .p-lightbox__sidebar .meta-chip {
     display: inline-flex;
     align-items: center;
@@ -398,14 +387,6 @@
     line-height: 1.125rem;
 }
 
-/* Flip surface/on-surface-variant for lightbox tooltips so they read as a
-   dark popover instead of a near-white block over the dark sidebar.
-   Tooltips are body-teleported, so the theme class lands on the popper itself. */
-.v-tooltip.v-theme--lightbox > .v-overlay__content {
-    background: rgb(var(--v-theme-on-surface-variant));
-    color: rgb(var(--v-theme-surface-variant));
-}
-
 /* Media Content */
 
 .pswp__content {
@@ -670,20 +651,6 @@
     touch-action: none;
 }
 
-.pswp__dynamic-caption a {
-    color: inherit;
-    text-decoration: underline;
-    white-space: normal;
-    overflow-wrap: normal;
-    word-wrap: normal;
-    word-break: break-word;
-    text-align: start;
-    text-overflow: ellipsis;
-    hyphens: auto;
-    pointer-events: auto;
-    touch-action: auto;
-}
-
 .pswp__dynamic-caption h4 {
     font-weight: 600;
     word-wrap: normal;

frontend/src/css/meta.css

@@ -39,8 +39,8 @@
 }
 
 .p-meta-face-markers__rect {
-    fill: rgba(255, 255, 255, 0.06);
-    stroke: rgba(255, 255, 255, 0.9);
+    fill: rgba(var(--v-theme-on-surface), 0.06);
+    stroke: rgba(var(--v-theme-on-surface), 0.9);
     stroke-width: 2px;
     vector-effect: non-scaling-stroke;
     pointer-events: none;
@@ -62,8 +62,8 @@
    the inline remove-confirm pill is anchored below it. Red stroke
    plus a faint red fill makes the destructive intent obvious. */
 .p-meta-face-markers__rect--removing {
-    stroke: rgba(244, 67, 54, 0.95);
-    fill: rgba(244, 67, 54, 0.16);
+    stroke: rgba(var(--v-theme-remove), 0.95);
+    fill: rgba(var(--v-theme-remove), 0.16);
     stroke-width: 2.5px;
 }
 
@@ -114,7 +114,7 @@
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
-    color: #fff;
+    color: rgb(var(--v-theme-on-surface));
     transition: transform 0.08s ease-out;
 }
 
@@ -127,11 +127,11 @@
 }
 
 .p-meta-face-markers__btn--cancel {
-    background: rgba(90, 90, 90, 0.95);
+    background: rgba(var(--v-theme-button), 0.95);
 }
 
 .p-meta-face-markers__btn--remove {
-    background: rgba(211, 47, 47, 0.95);
+    background: rgba(var(--v-theme-remove), 0.95);
 }
 
 /* Back button — anchored top-left in LTR / top-right in RTL with its own

frontend/src/css/text.css

@@ -153,13 +153,38 @@ code,
 .text-link,
 p a.text-link {
     color: rgb(var(--v-theme-primary, #ffffff));
-    text-decoration: none;
 }
 
+.text-html a,
+.pswp__dynamic-caption a,
 .p-page a,
 .p-page footer .text-link,
 .p-page footer .body-link {
     color: rgb(var(--v-theme-on-surface, #ffffff));
+}
+
+.text-html a,
+.pswp__dynamic-caption a {
+    text-decoration-thickness: 1px;
+    text-decoration: underline;
+    word-break: break-all;
+    white-space: normal;
+    overflow-wrap: normal;
+    word-wrap: normal;
+    text-align: start;
+    text-overflow: ellipsis;
+    hyphens: auto;
+    pointer-events: auto;
+    touch-action: auto;
+}
+
+.text-html a:hover,
+.pswp__dynamic-caption a:hover,
+.text-link,
+p a.text-link,
+.p-page a,
+.p-page footer .text-link,
+.p-page footer .body-link {
     text-decoration: none;
 }
 

frontend/src/css/views.css

@@ -297,8 +297,8 @@
 }
 
 .search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result .preview,
-.search-results.list-view .v-table>.v-table__wrapper>table>tbody>tr>td.result .preview,
-.edit-batch.list-view .v-table>table>tbody>tr>td.result .preview {
+.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result .preview,
+.edit-batch.list-view .v-table > table > tbody > tr > td.result .preview {
     width: 50px;
     height: 50px;
 }