Skip to content

Many components inconsistently apply the theme's font settings #441

@MarioLiebisch

Description

@MarioLiebisch

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

When setting up a custom UI theme I've noticed the set fonts aren't applied to all components.

While many components apply the fonts properly, some either fail to apply them to all individual parts or don't apply them at all. There's no override in place, that's just their native browser style/font.

For example, a TextInput component applies the font to its description, but neither to it's label or the actual input element (see following screenshot).

It's totally possible I'm missing something, but so far can't tell.

In which browser(s) did the problem occur?

Firefox, Chrome, Microsoft Edge

Steps To Reproduce

Code:
(Stitches output etc. is properly inserted.)

<script lang="ts">
	import { Button, Checkbox, Flex, Paper, Text, TextInput, Title } from '@svelteuidev/core';
	import { createTheme } from '@svelteuidev/core';

	const theme = createTheme('custom', {
		fonts: { // Just setting something ridiculous/easy to spot
			standard: 'Comic Sans MS, Comic Sans, cursive',
			mono: 'Comic Sans MS, Comic Sans, cursive',
			fallback: 'Comic Sans MS, Comic Sans, cursive'
		}
	});
</script>

<SvelteUIProvider class={theme}>
	<Title>Title</Title>
	<hr />
	<Text>Text</Text>
	<hr />
	<Button>Button</Button>
	<hr />
	<TextInput value="TextInput" label="TextInput Label" description="TextInput Description" />
	<hr />
	<Flex>Flex</Flex>
	<hr />
	<Checkbox label="Checkbox" />
</SvelteUIProvider>

Result:
resulting page

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    blockedbugSomething isn't workingcomponentNew or changes to components

    Type

    No type

    Projects

    Status

    Next

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions