Change from hacky text component shadow to css text-shadow

Author: misode

src/app/components/TextComponent.tsx

@@ -22,9 +22,8 @@ interface PartData extends StyleData {
 interface Props {
 	component: unknown,
 	base?: StyleData,
-	shadow?: boolean,
 }
-export function TextComponent({ component, base = { color: 'white' }, shadow = true }: Props) {
+export function TextComponent({ component, base = { color: 'white' } }: Props) {
 	const { version } = useVersion()
 	const { lang } = useLocale()
 
@@ -38,12 +37,7 @@ export function TextComponent({ component, base = { color: 'white' }, shadow = t
 	const { value: language } = useAsync(() => getLanguage(version, lang), [version, lang])
 
 	return <div class="text-component">
-		{shadow && <div>
-			{parts.map(p => <TextPart part={p} shadow={true} lang={language ?? {}} />)}
-		</div>}
-		<div class="text-foreground">
-			{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
-		</div>
+		{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
 	</div>
 }
 
@@ -89,7 +83,7 @@ function inherit(component: object, base: PartData) {
 	}
 }
 
-const TextColors = {
+const TextColors: Record<string, [string, string]> = {
 	black: ['#000', '#000'],
 	dark_blue: ['#00A', '#00002A'],
 	dark_green: ['#0A0', '#002A00'],
@@ -108,15 +102,12 @@ const TextColors = {
 	white: ['#FFF', '#3F3F3F'],
 }
 
-type TextColorKey = keyof typeof TextColors
-const TextColorKeys = Object.keys(TextColors)
-
-function TextPart({ part, shadow, lang }: { part: PartData, shadow?: boolean, lang: Record<string, string> }) {
+function TextPart({ part, lang }: { part: PartData, lang: Record<string, string> }) {
 	if (part.translate) {
 		const str = resolveTranslate(part.translate, part.fallback, part.with, lang)
-		return <span style={createStyle(part, shadow)}>{str}</span>
+		return <span style={createStyle(part)}>{str}</span>
 	}
-	return <span style={createStyle(part, shadow)}>{part.text}</span>
+	return <span style={createStyle(part)}>{part.text}</span>
 }
 
 function resolveTranslate(translate: string, fallback: string | undefined, with_: any[] | undefined, lang: Record<string, string>): string {
@@ -131,11 +122,10 @@ function resolveTranslate(translate: string, fallback: string | undefined, with_
 	return replaceTranslation(str, params)
 }
 
-function createStyle(style: StyleData, shadow?: boolean) {
+function createStyle(style: StyleData) {
 	return {
-		color: style.color && (TextColorKeys.includes(style.color)
-			? TextColors[style.color as TextColorKey][shadow ? 1 : 0]
-			: shadow ? 'transparent' : style.color),
+		color: style.color ? (TextColors[style.color]?.[0] ?? style.color) : undefined,
+		'--shadow-color': style.color ? TextColors[style.color]?.[1] : undefined,
 		fontWeight: (style.bold === true) ? 'bold' : undefined,
 		fontStyle: (style.italic === true) ? 'italic' : undefined,
 		textDecoration: (style.underlined === true)

src/styles/global.css

@@ -1862,14 +1862,11 @@ hr {
 	font-size: 20px;
 	position: relative;
   white-space: pre;
-	line-height: 1.1	;
+	line-height: 1.1;
 }
 
-.text-component > .text-foreground {
-	position: absolute;
-	z-index: 1;
-	left: -2px;
-	top: -2px;
+.text-component span {
+	text-shadow: 2px 2px var(--shadow-color, transparent);
 }
 
 .text-component span:empty:before {
@@ -1888,9 +1885,8 @@ hr {
 	font-size: calc(var(--dialog-px) * 12);
 }
 
-.dialog-preview .text-component > .text-foreground {
-	left: calc(var(--dialog-px) * -1.2);
-	top: calc(var(--dialog-px) * -1.2);
+.dialog-preview .text-component span {
+	text-shadow: calc(var(--dialog-px) * 1.2) calc(var(--dialog-px) * 1.2) var(--shadow-color, transparent);
 }
 
 .dialog-button,