Rename 'bias' to 'brightness', which is the more common terminology

src/lib/contexts/config.svelte.ts

@@ -9,7 +9,7 @@ export interface ConversionConfig {
   backgroundColor: number
   ditheringKernel: DitheringKernel | null
   contrast: number
-  bias: number
+  brightness: number
 }
 
 const ConversionConfigToken = Symbol('conversion-config')
@@ -25,7 +25,7 @@ export function createConversionConfig() {
     backgroundColor: 255,
     ditheringKernel: DEFAULT_DITHERING_KERNEL,
     contrast: 0,
-    bias: 0,
+    brightness: 0,
   })
 
   return setContext(ConversionConfigToken, config)

src/lib/contexts/rendered.svelte.ts

@@ -30,7 +30,7 @@ export function createRenderedContext(
     new Quantizer({
       ditheringKernel: config.ditheringKernel,
       contrast: config.contrast,
-      bias: config.bias,
+      brightness: config.brightness,
     })
   )
 

src/lib/image/quantizer.ts

@@ -8,7 +8,7 @@ export const DEFAULT_DITHERING_KERNEL: DitheringKernel = 'Atkinson'
 export type QuantizerOptions = {
   ditheringKernel: DitheringKernel | null
   contrast: number
-  bias: number
+  brightness: number
 }
 
 export class Quantizer {
@@ -17,10 +17,10 @@ export class Quantizer {
 
   private readonly rgbquant: RgbQuant
 
-  constructor({ ditheringKernel, contrast, bias }: QuantizerOptions) {
+  constructor({ ditheringKernel, contrast, brightness }: QuantizerOptions) {
     const saturationAdjustment = ditheringKernel === null ? 127 : 127 * contrast
-    this.white = 255 + (bias - 1) * saturationAdjustment
+    this.white = 255 - (1 + brightness) * saturationAdjustment
-    this.black = (1 + bias) * saturationAdjustment
+    this.black = (1 - brightness) * saturationAdjustment
 
     this.rgbquant = new RgbQuant({
       colors: 2,

src/lib/layouts/edit/controls/BackgroundColorSlider.svelte

@@ -19,7 +19,7 @@
         min={0}
         max={0xff}
         {value}
-        onchange={v => (config.bias = value = v)}
+        onchange={v => (config.brightness = value = v)}
         aria-labelledby="background-color-input-label"
       />
     </span>

src/lib/layouts/edit/controls/ControlsSection.svelte

@@ -10,7 +10,7 @@
   import BackgroundColorSlider from './BackgroundColorSlider.svelte'
   import DitherControls from './conversion/dither/DitherControls.svelte'
   import ContrastSlider from './conversion/ContrastSlider.svelte'
-  import BiasSlider from './conversion/BiasSlider.svelte'
+  import BrightnessSlider from './conversion/BrightnessSlider.svelte'
 
   import { getConversionConfig } from '$lib/contexts/config.svelte'
   import { getImageContext, imageIsCorrectRatio } from '$lib/contexts/image.svelte'
@@ -28,7 +28,7 @@
     config.backgroundColor = 0xff
     config.ditheringKernel = DEFAULT_DITHERING_KERNEL
     config.contrast = 0
-    config.bias = 0
+    config.brightness = 0
   }
 </script>
 
@@ -60,7 +60,7 @@
   {/if}
 
   {#if config.ditheringKernel === null || config.contrast !== 0}
-    <BiasSlider />
+    <BrightnessSlider />
   {/if}
 
   <Separator decorative />

src/lib/layouts/edit/controls/conversion/BrightnessSlider.svelte

@@ -8,33 +8,33 @@
 
   const config = getConversionConfig()
 
-  let value = $derived(Math.round(config.bias * 100))
+  let value = $derived(Math.round(config.brightness * 100))
 </script>
 
-<div class="stack gap-4" role="group" aria-labelledby="bias-input-label">
+<div class="stack gap-4" role="group" aria-labelledby="brightness-input-label">
   <div class="row gap-1 text-sm">
-    <Label id="bias-input-label">Bias</Label>
+    <Label id="brightness-input-label">Brightness</Label>
     <span class="font-normal text-muted-foreground">
       =<ImplicitNumericInput
         min={-100}
         max={100}
         {value}
-        onchange={v => (config.bias = (value = v) / 100)}
+        onchange={v => (config.brightness = (value = v) / 100)}
-        aria-labelledby="bias-input-label"
+        aria-labelledby="brightness-input-label"
       />%
     </span>
     <MoreInfo>
-      Whether the conversion algorithm should bias the entire image towards white (negative) or black (positive).
+      Whether the conversion algorithm should bias the entire image towards white (positive) or black (negative).
     </MoreInfo>
   </div>
 
   <Slider
     type="single"
     bind:value
-    onValueCommit={() => (config.bias = value / 100)}
+    onValueCommit={() => (config.brightness = value / 100)}
     min={-100}
     max={100}
     step={1}
-    aria-labelledby="bias-input-label"
+    aria-labelledby="brightness-input-label"
   />
 </div>

src/lib/layouts/edit/preview/common.svelte.ts

@@ -35,16 +35,16 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
   }
 
   if (config.contrast > 0 || config.ditheringKernel === null) {
-    const biasScaleFactor = config.ditheringKernel === null ? 1 : config.contrast
+    const brightnessScaleFactor = config.ditheringKernel === null ? 1 : config.contrast
-    const scaledBias = config.bias * biasScaleFactor
+    const scaledBrightness = config.brightness * brightnessScaleFactor
 
-    if (scaledBias >= 0.5) output.push('extremely biased towards black')
+    if (scaledBrightness >= 0.5) output.push('extremely brightened')
-    else if (scaledBias >= 0.25) output.push('biased towards black')
+    else if (scaledBrightness >= 0.25) output.push('brightened')
-    else if (scaledBias >= 0.1) output.push('slightly biased towards black')
+    else if (scaledBrightness >= 0.1) output.push('slightly brightened')
 
-    if (scaledBias <= -0.5) output.push('extremely biased towards white')
+    if (scaledBrightness <= -0.5) output.push('extremely darkened')
-    else if (scaledBias <= -0.25) output.push('biased towards white')
+    else if (scaledBrightness <= -0.25) output.push('darkened')
-    else if (scaledBias <= -0.1) output.push('slightly biased towards white')
+    else if (scaledBrightness <= -0.1) output.push('slightly darkened')
   }
 
   return output.join(', ')