Move to float L in other parts of UI

Author: ai

config.js

@@ -15,7 +15,8 @@ let config = {
   H_STEP: 1,
 
   L_MAX: 1,
-  L_STEP: 1
+  L_MAX_COLOR: 1,
+  L_STEP: 0.01
 }
 
 if (process.env.LCH) {
@@ -29,7 +30,7 @@ if (process.env.LCH) {
 
     COLOR_FN: '"lch"',
 
-    L_MAX: 100
+    L_MAX_COLOR: 100
   }
 }
 

lib/model.ts

@@ -44,7 +44,7 @@ function getModelData(mode: RgbMode): [Vector3[], number[]] {
           if (to.h) {
             colors.push(edgeRgb.r, edgeRgb.g, edgeRgb.b)
             coordinates.push(
-              new Vector3(to.l / L_MAX, to.c / (C_MAX * 2), to.h / 360)
+              new Vector3(to.l / L_MAX_COLOR, to.c / (C_MAX * 2), to.h / 360)
             )
           }
         }
@@ -127,7 +127,7 @@ function generateMesh(scene: Scene, mode: RgbMode): UpdateSlice {
   if ('array' in bottom.attributes.position) {
     let bottomSteps = bottom.attributes.position.array.length / 6
     for (let i = 0; i <= bottomSteps; i += 1) {
-      let lchL = (L_MAX * i) / bottomSteps
+      let lchL = (L_MAX_COLOR * i) / bottomSteps
       let rgbL = rgb(build(lchL, 0, 0)).r
       bottomColors.push(rgbL, rgbL, rgbL, rgbL, rgbL, rgbL)
     }
@@ -140,7 +140,7 @@ function generateMesh(scene: Scene, mode: RgbMode): UpdateSlice {
   scene.add(bottomMesh)
 
   return color => {
-    l.set(0, 0.01 * -color.l + 0.5)
+    l.set(0, -color.l + 0.5)
     c.set(0, (0.5 * -color.c) / C_MAX + 0.5)
     h.set(0, 0.0028 * color.h - (color.h > 350 ? 0.51 : 0.5))
   }

stores/current.ts

@@ -28,7 +28,7 @@ export interface LchValue {
 type PrevCurrentValue = { [key in keyof LchValue]?: undefined } | LchValue
 
 function randomColor(): LchValue {
-  return { a: 100, c: C_RANDOM, h: Math.round(360 * Math.random()), l: 70 }
+  return { a: 100, c: C_RANDOM, h: Math.round(360 * Math.random()), l: 0.7 }
 }
 
 function parseHash(): LchValue | undefined {
@@ -159,7 +159,7 @@ function aggressiveRoundValue<V extends Partial<LchValue>>(
 ): V {
   let rounded = { ...value }
   if (typeof rounded.l !== 'undefined') {
-    rounded.l = round2(rounded.l)
+    rounded.l = type === 'oklch' ? round4(rounded.l) : round2(rounded.l)
   }
   if (typeof rounded.c !== 'undefined') {
     rounded.c = type === 'oklch' ? round4(rounded.c) : round2(rounded.c)
@@ -179,7 +179,7 @@ function preciseRoundValue<V extends Partial<LchValue>>(
 ): V {
   let rounded = { ...value }
   if (typeof rounded.l !== 'undefined') {
-    rounded.l = round4(rounded.l)
+    rounded.l = type === 'oklch' ? round6(rounded.l) : round4(rounded.l)
   }
   if (typeof rounded.c !== 'undefined') {
     rounded.c = type === 'oklch' ? round6(rounded.c) : round4(rounded.c)
@@ -208,7 +208,7 @@ export function setCurrent(code: string, isRgbInput = false): boolean {
         parsed.g === 1 &&
         parsed.b === 1
       ) {
-        current.set({ a: (parsed.alpha ?? 1) * 100, c: 0, h: 0, l: 100 })
+        current.set({ a: (parsed.alpha ?? 1) * 100, c: 0, h: 0, l: 1 })
         return true
       }
       let originSpace = getSpace(parsed)
@@ -249,15 +249,15 @@ export function setCurrent(code: string, isRgbInput = false): boolean {
 }
 
 export function valueToColor(value: LchValue): AnyLch {
-  return build((L_MAX * value.l) / 100, value.c, value.h, value.a / 100)
+  return build(value.l * L_MAX_COLOR, value.c, value.h, value.a / 100)
 }
 
 export function colorToValue(color: AnyLch): LchValue {
   return {
     a: (color.alpha ?? 1) * 100,
     c: color.c,
     h: color.h ?? 0,
-    l: (100 * color.l) / L_MAX
+    l: color.l / L_MAX_COLOR
   }
 }
 

test/colors.test.ts

@@ -22,7 +22,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.2577,
     h: 29.23,
-    l: 62.8
+    l: 0.628
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -31,7 +31,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.294827,
     h: 142.4953,
-    l: 86.644
+    l: 0.86644
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -40,7 +40,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.313214,
     h: 264.052,
-    l: 45.2014
+    l: 0.452014
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -49,7 +49,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.15455,
     h: 194.7689,
-    l: 90.5399
+    l: 0.905399
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -58,7 +58,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.3225,
     h: 328.36,
-    l: 70.17
+    l: 0.7017
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -67,7 +67,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0.211,
     h: 109.77,
-    l: 96.8
+    l: 0.968
   })
   deepStrictEqual(visible.get().space, 'srgb')
 
@@ -76,7 +76,7 @@ test('correctly works with colors on the edges of sRGB', () => {
     a: 100,
     c: 0,
     h: 0,
-    l: 100
+    l: 1
   })
   deepStrictEqual(visible.get().space, 'srgb')
 })

test/inputs.test.ts

@@ -7,24 +7,24 @@ import { current, setCurrent } from '../stores/current.ts'
 
 test('understands CSS declaration', () => {
   setCurrent('color: oklch(80% 0.1 195);')
-  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 80 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 0.8 })
 
   setCurrent('color: #f00')
-  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 62.8 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 0.628 })
 })
 
 test('understands hex without #', () => {
   setCurrent('f00')
-  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 62.8 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 0.628 })
 
   setCurrent('ff0000')
-  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 62.8 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.2577, h: 29.23, l: 0.628 })
 })
 
 test('understands OKLCH without function', () => {
   setCurrent('80% 0.1 195')
-  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 80 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 0.8 })
 
   setCurrent('0.8 0.1 195')
-  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 80 })
+  deepStrictEqual(current.get(), { a: 100, c: 0.1, h: 195, l: 0.8 })
 })

types.d.ts

@@ -14,6 +14,7 @@ declare module '*?worker' {
 declare const COLOR_FN: 'lch' | 'oklch'
 declare const LCH: boolean
 declare const L_MAX: number
+declare const L_MAX_COLOR: number
 declare const L_STEP: number
 declare const C_MAX: number
 declare const C_MAX_REC2020: number

view/card/mixin.pug

@@ -10,15 +10,15 @@ mixin card(type)
           type: 'text',
           role: 'spinbutton',
           'aria-valuemin': 0,
-          'aria-valuemax': 100,
+          'aria-valuemax': 1,
           pattern: '^[0-9+\\/*.\\-]+$',
           inputmode: 'decimal',
           step: L_STEP
         })
       .card_chart
         .card_size
           +chart('h', 'c', 'l')
-      +range('l', 100, L_STEP, 70)
+      +range('l', 1, L_STEP, 70)
 
     else if type === 'c'
       h2.card_title Chroma

view/chart/index.ts

@@ -31,7 +31,7 @@ onPaint({
     document.body.style.setProperty('--chart-h', `${(100 * h) / H_MAX}%`)
   },
   l(l) {
-    document.body.style.setProperty('--chart-l', `${l}%`)
+    document.body.style.setProperty('--chart-l', `${(100 * l) / L_MAX}%`)
   }
 })
 
@@ -51,12 +51,12 @@ function setComponentsFromSpace(
   } else if (space.parentElement!.classList.contains('is-c')) {
     setCurrentComponents({
       h: (H_MAX * x) / rect.width,
-      l: (100 * y) / rect.height
+      l: (L_MAX * y) / rect.height
     })
   } else if (space.parentElement!.classList.contains('is-h')) {
     setCurrentComponents({
       c: (getMaxC() * y) / rect.height,
-      l: (100 * x) / rect.width
+      l: (L_MAX * x) / rect.width
     })
   }
 }
@@ -158,7 +158,7 @@ function initCharts(): void {
     },
     l(l, chartsToChange) {
       if (!showCharts.get()) return
-      startWorkForComponent(canvasL, 'l', (L_MAX * l) / 100, chartsToChange)
+      startWorkForComponent(canvasL, 'l', l, chartsToChange)
     }
   })
 }

view/chart/paint.ts

@@ -124,7 +124,7 @@ export function paintCL(
   borderP3: Rgb,
   borderRec2020: Rgb
 ): ImageData {
-  let lFactor = L_MAX / width
+  let lFactor = L_MAX_COLOR / width
   let cFactor = (showRec2020 ? C_MAX_REC2020 : C_MAX) / height
 
   return paint(
@@ -165,7 +165,7 @@ export function paintCH(
     showRec2020,
     borderP3,
     borderRec2020,
-    (x, y) => build(l, y * cFactor, x * hFactor)
+    (x, y) => build(L_MAX_COLOR * l, y * cFactor, x * hFactor)
   )
 }
 
@@ -181,7 +181,7 @@ export function paintLH(
   borderRec2020: Rgb
 ): ImageData {
   let hFactor = H_MAX / width
-  let lFactor = L_MAX / height
+  let lFactor = L_MAX_COLOR / height
 
   return paint(
     height,

view/range/index.ts

@@ -61,7 +61,6 @@ function paint(
   function addStop(x: number, round: (num: number) => number): void {
     let origin = getColor(x)
     let value = origin[type] ?? 0
-    if (type === 'l') value = (100 / L_MAX) * value
     stops.push(round(value / sliderStep) * sliderStep)
   }
 
@@ -149,7 +148,7 @@ onPaint({
     let c = color.c
     let h = color.h ?? 0
     let [width, height] = initCanvasSize(canvasL)
-    let factor = L_MAX / width
+    let factor = L_MAX_COLOR / width
     setList(
       listL,
       paint(canvasL, 'l', width, height, parseFloat(inputL.step), x => {