feat: CSS-only usage, HTML components, and more

[techniq]

Resolves #160
Resolves #259
Resolves #408
Resolves #512
Resolves #544
Resolves #590
Resolves #594
Resolves #595
Resolves #640

CSS-only usage

• Uses @layer base for primitives (ex. Line) and @layer components for higher components (ex. Axis) to fix CSS ordering / specificity
• Uses :where(...) for all declarations to keep specificity to 0 to allow easy overriding without worrying about CSS ordering (ex. shadcn-svelte, app.css)
  • CSS layers can help here as well
• non-tailwind usage will need to declare @layer base, components, utilities; in their app.css to guarantee layer order
  • might be able to handle this in @import layerchart/styles.css or similar. also looking to add @import layerchart/skeleton.css / etc

TODO

• Improve usage of extractLayerProps() when applying classes
  • In many cases this is being overridden such as in Axis

{@const ruleProps = extractLayerProps(rule, 'lc-axis-rule')}
<Rule
  x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
  y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
  {motion}
  {...ruleProps}
  class={cls('stroke-surface-content/50 bg-surface-content/50', classes.rule, ruleProps?.class)}
/>

• Consider exposing --color, or --stroke-color / --fill-color for many components to simplify Svg/Canvas vs Html usage (stroke vs border/outline, fill vs background)
• How best to handle deeply nested overrides (Axis => Rule => Line)
• How best to apply attribute (<line stroke="red">) over built-in class
  • Something like :where(.lc-line):not([stroke]) { ... }, but what about upstream classes/attributes
  • Setting css variables (--stroke-color) instead of classes should allow the application to only happen in primitives by default
• Apply CSS classes when using Canvas
• Update foo === 'object' to use getObjectOrNull() util
• Update foo === 'function' ? foo(item) : foo to use resolveMaybeFn() util
• Replace use of all tailwind classes in components
  • surface-* colors
  • opacity-*
  • absolute / positioning
  • w-*, h-*
  • text, padding
  • others...?
  • Possibly add some global classes
• Move all :global() to a style sheet, or handle differently?
  • https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles
• Remove use of cls() (use built in clsx) unless normalizing multiple props
• Set default transition-opacity for all primitive (using opacity prop instead of opacity-10 class for fading out unhighlighted series)? Wait til settings() is supported?

/* Same as Tailwind `transition-opacity` */
transition-property: opacity;
transition-timing-function: var(
  --default-transition-timing-function,
  cubic-bezier(0.4, 0, 0.2, 1)
);
transition-duration: var(--default-transition-duration, 150ms);

[changeset-bot]

🦋 Changeset detected

Latest commit: 0a4743e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
layerchart	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	0a4743e

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@557

commit: 0a4743e