Preferences page iteration

src/components/basic/Slider.vue

@@ -4,9 +4,11 @@
             {{ label }}
         </div>
         <div ref="root" @click="snapToCursor" @keydown="onKeyDown" tabindex="-1"
-            class="cursor-pointer group relative h-1.5 rounded-full bg-ls-300 dark:bg-ds-700">
-            <div class="absolute h-full rounded-full bg-accent-600 dark:bg-accent-700"
-                :style="`width: ${100 * unscale(model)}%`" />
+            class="cursor-pointer group relative rounded-full bg-ls-300 dark:bg-ds-700" :class="sizes[size]">
+            <slot name="fill">
+                <div class="absolute h-full rounded-full bg-accent-600 dark:bg-accent-700"
+                    :style="`width: ${100 * unscale(model)}%`" />
+            </slot>
             <div class="cursor-grab
             absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-5 h-5
             rounded-full shadow-sm border-2
@@ -25,10 +27,11 @@ import { useMouseInElement, useMousePressed, watchPausable } from '@vueuse/core'
 
 const model = defineModel<number>({ required: true });
 
-const { min = 0, max = 1 } = defineProps<{
+const { min = 0, max = 1, size = "base" } = defineProps<{
     min?: number,
     max?: number
     label?: string,
+    size?: "base" | "lg",
 }>();
 
 const root = useTemplateRef("root");
@@ -47,6 +50,11 @@ watch(pressed, (down) => {
     }
 });
 
+const sizes = {
+    base: "h-1.5",
+    lg: "h-3.5",
+};
+
 function scale(value: number) {
     return min + (max - min) * Math.max(0, Math.min(value, 1));
 }

src/components/settings/Preferences.vue

@@ -2,21 +2,48 @@
 
 	<div class="flex flex-col gap-8 rounded-md p-8 border bg-ls-0 border-ls-200 dark:bg-ds-900 dark:border-ds-700">
 		<Select v-model="theme" label="Theme" :options="themeOptions" class="w-48" />
-		<Slider v-model="preferences.accentBaseHue" label="Accent Hue" class="w-80" :min="0" :max="360" />
-		<Slider v-model="preferences.accentChromaMultiplier" label="Accent Saturation" class="w-80" :min="0" :max="2" />
+		<Slider v-model="preferences.accentBaseHue" label="Accent Hue" size="lg" :min="0" :max="360" class="w-80">
+			<template #fill>
+				<div class="absolute h-full w-full rounded-full" :style="hueScale" />
+			</template>
+		</Slider>
+		<Slider v-model="preferences.accentChromaMultiplier" label="Accent Saturation" size="lg"
+			:min="minChromaMultiplier" :max="maxChromaMultiplier" class="w-80">
+			<template #fill>
+				<div class="absolute h-full w-full rounded-full" :style="chromaScale" />
+			</template>
+		</Slider>
+		<div class="flex flex-col">
+			<div class="block mb-2 text-sm font-medium leading-6 text-ls-900 dark:text-ds-0">
+				Preview
+			</div>
+			<div class="flex">
+				<div class="w-8 h-8 bg-accent-50 rounded-l-md" />
+				<div class="w-8 h-8 bg-accent-100" />
+				<div class="w-8 h-8 bg-accent-200" />
+				<div class="w-8 h-8 bg-accent-300" />
+				<div class="w-8 h-8 bg-accent-400" />
+				<div class="w-8 h-8 bg-accent-500" />
+				<div class="w-8 h-8 bg-accent-600" />
+				<div class="w-8 h-8 bg-accent-700" />
+				<div class="w-8 h-8 bg-accent-800" />
+				<div class="w-8 h-8 bg-accent-900 rounded-r-md" />
+			</div>
+		</div>
 		<Button label="Reset to Default" icon="restore" severity="danger" size="xl" class="self-end"
 			@click="preferences.resetTheme" />
 	</div>
 </template>
 
 <script setup lang="ts">
+import { formatCss } from "culori/fn";
 import { computed } from "vue";
 
-import { usePreferencesStore } from "@/stores/preferences";
-import { getThemeName, Theme } from "@/theming/theming";
 import Button from "@/components/basic/Button.vue";
 import Select, { SelectOption } from "@/components/basic/Select.vue";
 import Slider from "@/components/basic/Slider.vue";
+import { usePreferencesStore } from "@/stores/preferences";
+import { computeAccentRamp, getThemeName, Theme } from "@/theming/theming";
 
 const preferences = usePreferencesStore();
 
@@ -30,4 +57,24 @@ const theme = computed({
 		return themeOptions.find(o => o.value == preferences.theme) || themeOptions[0];
 	},
 });
+
+const minChromaMultiplier = 0;
+const maxChromaMultiplier = 2;
+
+const hueScale = computed(() => {
+	const stops = [];
+	for (let i = 0; i <= 100; i++) {
+		const color = computeAccentRamp(i / 100 * 360, preferences.accentChromaMultiplier)[5];
+		stops.push(`${formatCss(color)} ${i}%`);
+	}
+	return `background: linear-gradient(90deg, ${stops.join(', ')});`
+});
+
+const chromaScale = computed(() => {
+	const previewStop = preferences.polarity == "light" ? 6 : 7;
+	const start = computeAccentRamp(preferences.accentBaseHue, minChromaMultiplier)[previewStop];
+	const end = computeAccentRamp(preferences.accentBaseHue, maxChromaMultiplier)[previewStop];
+	return `background: linear-gradient(90deg, ${formatCss(start)} 0%, ${formatCss(end)} 100%);`
+});
+
 </script>

src/theming/theming.ts

@@ -91,7 +91,7 @@ function hexToRGBString(hex: string) {
 	return rgbToString(colorRGB);
 }
 
-function computeAccentRamp(baseHue: number, chromaMultiplier: number): Rgb[] {
+export function computeAccentRamp(baseHue: number, chromaMultiplier: number): Rgb[] {
 
 	const ramp = [];