fix(webapp): stop a negative contrast being thrown away on read, and hide the scale

Two things were wrong with Black's extra travel.

Saving below zero didn't stick. The preference blob is parsed with a zod schema
whose contrast field floored at 0, and every field there uses
`.catch(undefined)` so an out-of-range value degrades quietly rather than
failing the whole blob. The write reached the database intact; the read then
discarded it and fell back to the default, which is why the handle sprang back
to 0% a moment after release - and why it seemed to hold if the save hadn't
settled yet. The floor now follows the offset.

The negative range was also on show. Black's floor is -30 in the ramp, and the
slider now presents that as 0%: it works in 0-100 whatever the theme, adding the
offset on the way in and taking it off on the way out. So Black's "Default" tick
sits at the left end where the lines are faintest, nothing below it is reachable
by dragging, and no negative number is ever displayed. -30 is also the floor now
rather than -100, since below it the rules disappear entirely.

One consequence: Black's window is the same width in the ramp as before but
shifted down, so its strongest setting is 70 rather than 100. That end is the
last thing this theme needs, and the slider reads 0-100 on every theme as a
result.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/routes/account._index/route.tsx

@@ -80,8 +80,7 @@ import {
   normalizeThemeContrast,
   normalizeUnderlineLinks,
   normalizeThemePreference,
-  DEFAULT_THEME_CONTRAST_BLACK,
-  MIN_THEME_CONTRAST_BLACK,
+  BLACK_CONTRAST_OFFSET,
   SystemDarkTheme,
   SystemLightTheme,
   type ThemePreference,
@@ -98,8 +97,9 @@ export const meta = pageMeta("Your profile");
  *  Classic theme shipped, so the bottom of the range has to stay reachable. */
 const MIN_CONTRAST = 0;
 
-/** The contrast the slider ticks and labels as "Default". Matches
- *  `DEFAULT_THEME_CONTRAST`, the value applied when none is saved. */
+/** Where the slider ticks and labels "Default", in the 0-100 the user sees. On
+ *  Black that lands on the theme's faint floor rather than the base palette; the
+ *  offset below does the translating. */
 const DEFAULT_CONTRAST_MARK = 0;
 
 function themeIcon(value: ThemePreference, appearance: ThemeAppearance) {
@@ -881,12 +881,6 @@ export default function Page() {
      appearance. Only Black gets the extra travel below the base, so the slider
      needs to know rather than reading the raw preference. */
   const activeTheme = theme === "system" ? systemThemes[appearance] : theme;
-  const isBlack = activeTheme === "black";
-  const minContrast = isBlack ? MIN_THEME_CONTRAST_BLACK : MIN_CONTRAST;
-  /* Black's rules want to sit far fainter than the base palette puts them, so
-     "Default" means something different there - both the tick and the label
-     follow it. */
-  const defaultContrast = isBlack ? DEFAULT_THEME_CONTRAST_BLACK : DEFAULT_CONTRAST_MARK;
 
   const saveSystemTheme = (end: "light" | "dark", value: string) => {
     const fetcher = end === "light" ? systemLightFetcher : systemDarkFetcher;
@@ -921,6 +915,18 @@ export default function Page() {
       { method: "post" }
     );
 
+  /* The slider always runs 0-100 as far as the user is concerned. Black's range
+     sits that whole window lower, so its stored value is the displayed one minus
+     the offset: 0% on screen is -30 in the ramp, and nothing negative is ever
+     shown or reachable by dragging. */
+  const contrastOffset = activeTheme === "black" ? BLACK_CONTRAST_OFFSET : 0;
+  const displayedContrast = Math.max(MIN_CONTRAST, contrastPreview + contrastOffset);
+  const resetContrast = () => {
+    const stored = DEFAULT_CONTRAST_MARK - contrastOffset;
+    previewContrast(stored);
+    saveContrast(stored);
+  };
+
   return (
     <PageContainer>
       <NavBar>
@@ -1107,25 +1113,22 @@ export default function Page() {
                       variant="settings"
                       className="w-44"
                       aria-label="Contrast"
-                      min={minContrast}
+                      min={MIN_CONTRAST}
                       max={100}
                       step={1}
                       marks={[
                         {
-                          value: defaultContrast,
+                          value: DEFAULT_CONTRAST_MARK,
                           label: "Reset to default",
-                          onSelect: () => {
-                            previewContrast(defaultContrast);
-                            saveContrast(defaultContrast);
-                          },
+                          onSelect: resetContrast,
                         },
                       ]}
                       valueTooltip={(value) =>
-                        value === defaultContrast ? "Default" : `${value}%`
+                        value === DEFAULT_CONTRAST_MARK ? "Default" : `${value}%`
                       }
-                      value={[Math.max(minContrast, contrastPreview)]}
-                      onValueChange={(values) => previewContrast(values[0] ?? 0)}
-                      onValueCommit={(values) => saveContrast(values[0] ?? 0)}
+                      value={[displayedContrast]}
+                      onValueChange={(values) => previewContrast((values[0] ?? 0) - contrastOffset)}
+                      onValueCommit={(values) => saveContrast((values[0] ?? 0) - contrastOffset)}
                     />
                   </div>
                 </div>

apps/webapp/app/utils/dashboardPreferences.ts

@@ -1,5 +1,10 @@
 import { z } from "zod";
-import { SystemDarkTheme, SystemLightTheme, ThemePreference } from "~/utils/themePreference";
+import {
+  BLACK_CONTRAST_OFFSET,
+  SystemDarkTheme,
+  SystemLightTheme,
+  ThemePreference,
+} from "~/utils/themePreference";
 
 /* Schema and pure parsing for the User.dashboardPreferences JSON column.
    Kept out of the .server module so tests can exercise the schema without
@@ -50,8 +55,11 @@ const DashboardPreferences = z.object({
   /* An unknown value (e.g. written by a newer deploy) degrades to undefined
      instead of failing the whole blob and erasing every other setting */
   theme: ThemePreference.optional().catch(undefined),
-  /** Interface contrast for the System themes, 0-100. */
-  contrast: z.number().int().min(0).max(100).optional().catch(undefined),
+  /** Interface contrast. 0-100, and down to -BLACK_CONTRAST_OFFSET on Black,
+   *  which fades its grid lines below the base palette. A floor of 0 here threw
+   *  the negative half away on read - `.catch(undefined)` meant it degraded
+   *  silently to the default, so the value saved and then snapped back. */
+  contrast: z.number().int().min(-BLACK_CONTRAST_OFFSET).max(100).optional().catch(undefined),
   /** Swaps the Classic icon and badge accents for the high-contrast set. */
   iconContrast: z.boolean().optional().catch(undefined),
   /** Underlines inline links. */

apps/webapp/app/utils/themePreference.ts

@@ -53,25 +53,22 @@ export function normalizeUnderlineLinks(value: unknown): boolean {
 
 /** Interface contrast for the System themes, 0 to 100. Missing or invalid
  * values fall back to the default bump. */
-/** Floor of the contrast range on the Black theme, where the slider can also run
- *  *below* the base palette to fade the grid lines back toward the page. -100
- *  takes them all the way to the page colour, i.e. gone. Every other theme floors
- *  at 0; a negative value simply has no ramp to act on there, so it reads as 0. */
-export const MIN_THEME_CONTRAST_BLACK = -100;
-
 /**
- * Where "Default" sits on the Black theme.
+ * How far below the base palette the Black theme's grid lines may fade.
+ *
+ * Black pins every surface flat on #000, so the rules are the only thing giving
+ * a page structure - and the base palette draws them heavier than that theme
+ * wants. This is also Black's default: the faint end is where it should start,
+ * and the slider only goes up from there.
  *
- * Chosen to mirror how the light end reads: on White the grid lines measure
- * 1.16:1 (dimmed) and 1.27:1 (bright) against their page. -40 puts Black's at
- * 1.15:1 and 1.19:1 against #000 - the same near-invisible weight, from the other
- * direction. The base palette sits at 1.33:1 and 1.46:1, which is heavier than
- * this theme wants when the rules are the only structure on the page.
+ * The slider hides this entirely. It works in 0-100 whatever the theme, adding
+ * the offset on the way in and taking it off on the way out, so Black's floor
+ * reads as 0% and the user never sees a negative number.
  */
-export const DEFAULT_THEME_CONTRAST_BLACK = -40;
+export const BLACK_CONTRAST_OFFSET = 30;
 
 export function normalizeThemeContrast(value: unknown): number {
   const num = typeof value === "string" ? Number(value) : value;
   if (typeof num !== "number" || !Number.isFinite(num)) return DEFAULT_THEME_CONTRAST;
-  return Math.min(100, Math.max(MIN_THEME_CONTRAST_BLACK, Math.round(num)));
+  return Math.min(100, Math.max(-BLACK_CONTRAST_OFFSET, Math.round(num)));
 }