Rename primary color with accent color

src/components/Timeline/Timeline.vue

@@ -221,9 +221,9 @@ const vizStyles = computed(() => {
 	width 2px
 	margin-left -1px
 	z-index 10
-	background var(--tq-color-primary)
+	background var(--tq-color-accent)
 	height 100%
-	color var(--tq-color-on-primary)
+	color var(--tq-color-on-accent)
 
 	&:before
 		pointer-events none
@@ -233,7 +233,7 @@ const vizStyles = computed(() => {
 		left 1px
 		height var(--header-height)
 		width var(--koma-width)
-		background var(--tq-color-primary)
+		background var(--tq-color-accent)
 		z-index -1
 
 .onionskin

src/components/Timeline/TimelineMarkers.vue

@@ -265,5 +265,5 @@ useBndr($root, $root => {
 .selection-rect
 	position absolute
 	z-index 100
-	border 2px solid var(--tq-color-primary)
+	border 2px solid var(--tq-color-accent)
 </style>

src/components/Timeline/TimelineShot.vue

@@ -159,7 +159,7 @@ function printShotInfo(shot: Shot) {
 	margin 0
 
 .liveview
-	background var(--tq-color-primary-container)
+	background var(--tq-color-accent-container)
 
 .empty
 	background transparent
@@ -185,5 +185,5 @@ function printShotInfo(shot: Shot) {
 
 	&:hover:before
 		transform scaleX(1)
-		background var(--tq-color-primary)
+		background var(--tq-color-accent)
 </style>

src/components/Timeline/TimelineWaveform.vue

@@ -46,7 +46,7 @@ debouncedWatch(
 	{debounce: 200}
 )
 
-// TODO: Update on the primary color has changed
+// TODO: Update on the accent color has changed
 watch(
 	() => [project.audio.src] as const,
 	([src]) => {

src/stores/camera.ts

@@ -1,5 +1,12 @@
 import {defineStore} from 'pinia'
-import {ConfigDesc, ConfigName, ConfigType, Tethr, TethrManager} from 'tethr'
+import {
+	ConfigDesc,
+	ConfigDescOption,
+	ConfigName,
+	ConfigType,
+	Tethr,
+	TethrManager,
+} from 'tethr'
 import {useAppConfigStore} from 'tweeq'
 import {
 	onUnmounted,
@@ -20,24 +27,32 @@ export interface Config<T> {
 	option: ConfigDesc<T>['option']
 }
 
-export function useConfig<N extends ConfigName>(
+export interface TethrConfig<T> {
+	writable: boolean
+	value: T | null
+	target: T | null
+	set: (value: T) => void
+	option?: ConfigDescOption<T>
+}
+
+function useConfig<N extends ConfigName>(
 	camera: Ref<Tethr | null>,
 	name: N
-): Config<ConfigType[N]> {
-	const config = shallowReactive({
+): TethrConfig<ConfigType[N]> {
+	const config = shallowReactive<TethrConfig<ConfigType[N]>>({
 		writable: false,
 		value: null,
-		set: async () => undefined,
+		target: null,
+		set: () => null,
 		option: undefined,
-	}) as Config<ConfigType[N]>
+	})
 
 	watch(
 		camera,
 		async camera => {
 			if (!camera) {
 				config.writable = false
 				config.value = null
-				config.set = async () => undefined
 				config.option = undefined
 				return
 			}
@@ -48,31 +63,27 @@ export function useConfig<N extends ConfigName>(
 			config.value = desc.value
 			config.option = desc.option
 
-			let targetValue: ConfigType[N] | null = null
-
-			const setProp = debounceAsync(
-				async (value: ConfigType[N]) => {
-					await camera.set(name, value)
+			const {fn: set} = debounceAsync(
+				(value: ConfigType[N]) => {
+					config.value = value
+					return camera.set(name, value)
 				},
 				{
 					onQueue(value) {
-						targetValue = value
+						config.target = value
 					},
 					onFinish() {
-						targetValue = null
+						config.target = null
 					},
 				}
-			).fn
+			)
 
-			config.set = async (value: ConfigType[N]) => {
-				config.value = value
-				setProp(value)
-			}
+			config.set = set
 
 			camera.on(`${name}Change` as any, (desc: ConfigDesc<ConfigType[N]>) => {
-				const doSkip = targetValue !== null && targetValue !== desc.value
+				const isSetting = config.target !== null && config.target !== desc.value
 
-				if (doSkip) return
+				if (isSetting) return
 
 				config.value = desc.value
 				config.writable = desc.writable
@@ -82,7 +93,7 @@ export function useConfig<N extends ConfigName>(
 		{immediate: true}
 	)
 
-	return readonly(config) as Config<ConfigType[N]>
+	return readonly(config) as TethrConfig<ConfigType[N]>
 }
 
 export const useCameraStore = defineStore('camera', () => {