bvandeusen/FabledCurator
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases 21 Wiki Activity

refactor: components read the obsidian surface from its token, not a typed rgba (3108)

Browse Source 
Thirteen rgba(20, 23, 26, ...) across six components (the task counted
eleven). They now use --v-theme-background, which Vuetify maps to obsidian;
ArtistHeader's banner fade uses --fc-chrome-rgb, since it is nav-style
chrome. A spec fails if the literal reappears outside a comment. Values are
unchanged, so nothing should render differently.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVjrnpQjRgHdvq95rASoiR
This commit is contained in:
bvandeusen
2026-09-24 16:37:49 -04:00
co-authored by Claude Opus 5.5
parent f2e4ee4d17
commit 0842df46e9
7 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/artist/ArtistHeader.vue
+3 -3
View File
@@ -103,9 +103,9 @@ const stats = computed(() => {
padding: 0.5rem 1rem;
background: linear-gradient(
to bottom,
rgba(20, 23, 26, 0.92) 0%,
rgba(20, 23, 26, 0.65) 60%,
rgba(20, 23, 26, 0) 100%
rgba(var(--fc-chrome-rgb), 0.92) 0%,
rgba(var(--fc-chrome-rgb), 0.65) 60%,
rgba(var(--fc-chrome-rgb), 0) 100%
);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
frontend/src/components/gallery/GalleryFilterBar.vue
+1 -1
View File
@@ -329,7 +329,7 @@ function pushFilter(mutate) {
opaque than the bar/nav so the controls stay legible. */
.fc-filterbar-wrap :deep(.v-field),
.fc-filterbar-wrap :deep(.v-btn-group) {
background-color: rgba(20, 23, 26, 0.72);
background-color: rgba(var(--v-theme-background), 0.72);
}
/* Media toggle (All / Images / Videos) as ONE cohesive segmented control.
FC's global VBtn { rounded: 'pill' } default made Vuetify 4 pill-round each
frontend/src/components/modal/ImageViewer.vue
+3 -3
View File
@@ -213,7 +213,7 @@ function nextFrame() {
--fc-side-w: 320px;
/* Obsidian haze (#14171A = 20,23,26) — same palette as TopNav,
mid-opacity + blur so the page behind shows through faintly. */
background: rgba(20, 23, 26, 0.65);
background: rgba(var(--v-theme-background), 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
outline: none;
@@ -221,7 +221,7 @@ function nextFrame() {
}
.fc-viewer__close, .fc-viewer__nav {
position: absolute; top: 50%;
background: rgba(20, 23, 26, 0.7);
background: rgba(var(--v-theme-background), 0.7);
color: rgb(var(--v-theme-parchment, 232 228 216));
border: 1px solid rgb(var(--v-theme-surface-light));
border-radius: 50%;
@@ -359,7 +359,7 @@ function nextFrame() {
z-index: 1;
/* Opaque obsidian so the scrolling panel never bleeds through the
haze behind the pinned image. */
background: rgb(20, 23, 26);
background: rgb(var(--v-theme-background));
}
.fc-viewer__side {
width: 100%;