Theme support

[techniq]

Proposal

We already support:

• Adjusting colors (text-accent-500, bg-purple-500, etc) using tailwind.config.cjs
• Passing class / classes props to each component
  • Uses tailwind-merge via cls() util to allow overriding of classes
• Apply global styles (:global(.Button) { ... })
• Variants, include variant="none"
  • Examples: Button, ToggleGroup, ...
• Extend a component by using it within another

but there are situations where it would be convenient to pass/override the classes for ALL instances of a component (instead of having to do it for each one). This is specially useful since forwarding slots can have an unexpected issue with $$slot, making point 3 non-optimal.

---

Consider how best to support customizing styling at an app/global level (likely context)

It would be powerful to support passing any props (not just class / classes) for things like shrinkLabel, etc...

createTheme({
  TextField: {
    shrinkLabel: false,
    classes: {
      container: 'hover:shadow-none group-focus-within:shadow-none'
    }
  }
})

...this might be too challenging, so just setting class/classes might have to suffice.

createTheme({
  Button: 'flex-2', // `class` / `classes.root` shorthand
  TextField: {
    container: 'hover:shadow-none group-focus-within:shadow-none' // `classes`
  }
})

Need to decide on how this would work with per-variant styles. Maybe adding a variant-{name} class or `data-variant="name" attribute should also enable per-variant overrides:

createTheme({
  Button: '[&.variant-outline]:border-2',
  Button: 'data-[variant=outline]:border-2'
})

---

Existing solutions

• https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme
• https://carbon-components-svelte.onrender.com/components/Theme
• https://www.skeleton.dev/docs/styling (done via design tokens (css vars) and global classes (no additional classes)

---

TODO

• Add ComponentName classes to all components with top-level component
• Add theme support for all components
• Add variant-* classes when variant applied
• Add theme controls (at least to some components like AppBar, and/or overall doc theme)
  • Change theme to store to allow updating
• Remove as much default theming as makes sense
  • AppBar
  • AppLayout
  • NavItem
  • ...
• Add jsdoc comments to all classes property to improve sveld props display
  • /** @type {{root?: string, icon?: string, loading?: string}} */
• Write docs