Skip to content

Theme verification: unexpected whitish border visible on inputs and cards #90

@jerrythomas

Description

@jerrythomas

Description

On /playground/themes, inputs ([data-input-root]) and cards ([data-card]) show a whitish/light border that is not defined in any theme's CSS. This ghost border is visible on all themes, suggesting it comes from the browser default or an unintended base style.

Expected Behavior

Borders on inputs and cards should be styled exclusively by the active theme, using the appropriate surface/border token. No "extra" border should appear.

Likely Cause

The /playground/themes/+page.svelte uses raw class="... border" on these elements (Tailwind border class applies border-width: 1px with the default currentColor). This is in addition to, or conflicting with, the theme CSS.

Example from the page:
```html

\`\`\`

The border Tailwind class likely adds a default color that is not controlled by the theme token system.

Fix

Remove the bare border Tailwind class from these elements and rely on the theme CSS's [data-input-root] and [data-card] border styles.

Affected File

site/src/routes/(play)/playground/themes/+page.svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions