Theme / styling with settings()

[techniq]

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

[techniq]

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 techniq/svelte-ux#53