Skip to content

Commit d3f6ef3

Browse files
committed
Change from hacky text component shadow to css text-shadow
1 parent 161b81f commit d3f6ef3

File tree

2 files changed

+14
-28
lines changed

2 files changed

+14
-28
lines changed

src/app/components/TextComponent.tsx

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ interface PartData extends StyleData {
2222
interface Props {
2323
component: unknown,
2424
base?: StyleData,
25-
shadow?: boolean,
2625
}
27-
export function TextComponent({ component, base = { color: 'white' }, shadow = true }: Props) {
26+
export function TextComponent({ component, base = { color: 'white' } }: Props) {
2827
const { version } = useVersion()
2928
const { lang } = useLocale()
3029

@@ -38,12 +37,7 @@ export function TextComponent({ component, base = { color: 'white' }, shadow = t
3837
const { value: language } = useAsync(() => getLanguage(version, lang), [version, lang])
3938

4039
return <div class="text-component">
41-
{shadow && <div>
42-
{parts.map(p => <TextPart part={p} shadow={true} lang={language ?? {}} />)}
43-
</div>}
44-
<div class="text-foreground">
45-
{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
46-
</div>
40+
{parts.map(p => <TextPart part={p} lang={language ?? {}} />)}
4741
</div>
4842
}
4943

@@ -89,7 +83,7 @@ function inherit(component: object, base: PartData) {
8983
}
9084
}
9185

92-
const TextColors = {
86+
const TextColors: Record<string, [string, string]> = {
9387
black: ['#000', '#000'],
9488
dark_blue: ['#00A', '#00002A'],
9589
dark_green: ['#0A0', '#002A00'],
@@ -108,15 +102,12 @@ const TextColors = {
108102
white: ['#FFF', '#3F3F3F'],
109103
}
110104

111-
type TextColorKey = keyof typeof TextColors
112-
const TextColorKeys = Object.keys(TextColors)
113-
114-
function TextPart({ part, shadow, lang }: { part: PartData, shadow?: boolean, lang: Record<string, string> }) {
105+
function TextPart({ part, lang }: { part: PartData, lang: Record<string, string> }) {
115106
if (part.translate) {
116107
const str = resolveTranslate(part.translate, part.fallback, part.with, lang)
117-
return <span style={createStyle(part, shadow)}>{str}</span>
108+
return <span style={createStyle(part)}>{str}</span>
118109
}
119-
return <span style={createStyle(part, shadow)}>{part.text}</span>
110+
return <span style={createStyle(part)}>{part.text}</span>
120111
}
121112

122113
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_
131122
return replaceTranslation(str, params)
132123
}
133124

134-
function createStyle(style: StyleData, shadow?: boolean) {
125+
function createStyle(style: StyleData) {
135126
return {
136-
color: style.color && (TextColorKeys.includes(style.color)
137-
? TextColors[style.color as TextColorKey][shadow ? 1 : 0]
138-
: shadow ? 'transparent' : style.color),
127+
color: style.color ? (TextColors[style.color]?.[0] ?? style.color) : undefined,
128+
'--shadow-color': style.color ? TextColors[style.color]?.[1] : undefined,
139129
fontWeight: (style.bold === true) ? 'bold' : undefined,
140130
fontStyle: (style.italic === true) ? 'italic' : undefined,
141131
textDecoration: (style.underlined === true)

src/styles/global.css

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1862,14 +1862,11 @@ hr {
18621862
font-size: 20px;
18631863
position: relative;
18641864
white-space: pre;
1865-
line-height: 1.1 ;
1865+
line-height: 1.1;
18661866
}
18671867

1868-
.text-component > .text-foreground {
1869-
position: absolute;
1870-
z-index: 1;
1871-
left: -2px;
1872-
top: -2px;
1868+
.text-component span {
1869+
text-shadow: 2px 2px var(--shadow-color, transparent);
18731870
}
18741871

18751872
.text-component span:empty:before {
@@ -1888,9 +1885,8 @@ hr {
18881885
font-size: calc(var(--dialog-px) * 12);
18891886
}
18901887

1891-
.dialog-preview .text-component > .text-foreground {
1892-
left: calc(var(--dialog-px) * -1.2);
1893-
top: calc(var(--dialog-px) * -1.2);
1888+
.dialog-preview .text-component span {
1889+
text-shadow: calc(var(--dialog-px) * 1.2) calc(var(--dialog-px) * 1.2) var(--shadow-color, transparent);
18941890
}
18951891

18961892
.dialog-button,

0 commit comments

Comments
 (0)