cssVariables의 반환 타입이 올바르지 않습니다.

[RanolP]

ui-react/src/utils/styles.ts

Lines 7 to 19 in 609190f

	export const cssVariables = <
	T extends {
	readonly [key: string]: string | ((theme: SolvedTheme) => string)
	},
	P extends string
	>(
	defaults: T,
	prefix: P
	): {
	vars: { [key in keyof T]: `--solvedac-${string}` }
	v: { [key in keyof T]: `var(--solvedac-${P}-${string})` }
	styles: (theme: SolvedTheme) => string
	} => {

위 부분에서 v의 타입을 정확히 정의하기 위해서는 (MakeKebabCase<T> 같은 타입을 만든 후) `var(--solvedac-${MakeKebabCase<P>}-${string})`와 같이 정의되어야 합니다.

그 이유는 다음과 같습니다.

ui-react/src/utils/styles.ts

Lines 29 to 31 in 609190f

	const v = Object.fromEntries(
	Object.entries(vars).map(([k, v]) => [k, `var(${v})`])
	) as { [key in keyof T]: `var(--solvedac-${P}-${string})` }

v는 위 코드에 의해 결정되고, 각 값은 vars 오브젝트의 키 k에 대해 `var(${vars[k]})`입니다.

ui-react/src/utils/styles.ts

Lines 22 to 27 in 609190f

	const vars = Object.fromEntries(
	names.map((name) => [
	name,
	`--solvedac-${toCssName(prefix)}-${toCssName(name)}`,
	])
	) as { [key in keyof T]: `--solvedac-${string}` }

vars는 위 코드에 의해 결정되고, 각 값은 names 배열의 원소 name에 대해 `--solvedac-${toCssName(prefix)}-${toCssName(name)}`입니다.

ui-react/src/utils/styles.ts

Lines 4 to 5 in 609190f

	export const toCssName = (name: string): string =>
	name.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).replace(/^-/, '')

toCssName은 위 코드와 같이 정의되고, 사이사이에 낀 알파벳 대문자를 소문자로 바꾸는 역할을 합니다.

따라서, toCssName(prefix)의 타입은 P라고 볼 수 없습니다.
반례로 P = 'exampleValue', name = string일 때 실제 값은 --solvedac-example-value-${string}일 것입니다.