svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.27k stars 63 forks source link

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

Open MarioLiebisch opened 11 months ago

MarioLiebisch commented 11 months ago

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

BeeMargarida commented 11 months ago

Partially fixed in https://github.com/svelteuidev/svelteui/commit/00649e3de077c1771b52612edd30fd79be5c5e31, this will probably be benched because we are moving away from out current styling solution

MarioLiebisch commented 11 months ago

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