Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MarioLiebisch opened this issue Aug 15, 2023 · 2 comments
Open
Labels
blocked bug Something isn't working component New or changes to components

Comments

@MarioLiebisch
Copy link

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

@MarioLiebisch MarioLiebisch added the bug Something isn't working label Aug 15, 2023
@BeeMargarida BeeMargarida added the component New or changes to components label Aug 16, 2023
@BeeMargarida BeeMargarida moved this to Next in SvelteUI board Aug 16, 2023
@BeeMargarida BeeMargarida moved this from Next to In Progress in SvelteUI board Aug 17, 2023
@BeeMargarida
Copy link
Member

Partially fixed in 00649e3, this will probably be benched because we are moving away from out current styling solution

@MarioLiebisch
Copy link
Author

No worries, already suspected that. My current workaround simply involves applying the font to html, input, and select, so definitely not a pressing issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked bug Something isn't working component New or changes to components
Projects
Status: Next
Development

No branches or pull requests

2 participants