Theme / styling with settings() - Githubissues

techniq / layerchart

Composable Svelte chart components to build a wide range of visualizations

https://www.layerchart.com

MIT License

641 stars 12 forks source link

Theme / styling with settings() #39

Open techniq opened 1 year ago

techniq commented 1 year ago

[ ] Use classes like Svelte UX to pass class to underlying components
[ ] Add createTheme() support
[ ] Add .ComponentName classes
[x] Remove color prop (use rScale and fill / stroke / class / style?
- [x] Bars
- [x] Points
- [x] Pie
- [x] Link
- [x] Highlight
[x] Support design tokens (css variables) (see Svelte UX issue)
- Should wait till the Svelte UX issue is resolved
[x] Remove all use of var(--color-xxx-xxx). Default to fill-accent-500 when possible (or possibly class="[--color:theme(colors.blue.500)]"
[ ] Use const { format } = settings() / $format instead of formatNumber() / formatDate() directly

techniq commented 1 year ago

For reference, here is how it was implemented in Svelte UX. There might be some refinements since that PR, but I figure it helps to see the pieces that changed.

Also, it would be good if we could also either solve the sveld reading of types...

Source	Docs

or go into each component and add JSDocs (sadly we still need the types as the jsdoc comment wasn't being picked up during development for autocomplete/etc (although I could be overlooking something)

/** @type {{root?: string, icon?: string, loading?: string}} */
export let classes: {
    root?: string;
    icon?: string;
    loading?: string;
  } = {};

Source	Docs

I hate to double specify it, so really hoping that we can figure out the sveld issue (or find something that works).

This is also captured in https://github.com/techniq/svelte-ux/issues/53