svelte-select css variables

[qbacuber]

Hey,
it seems to me that the css variables for svelte-select are too generically named and missing the prefix. It just so happens that border, border-radius, background I already use in my application, and these are overridden.

vanilla-jsoneditor\themes\jse-theme-default.css and vanilla-jsoneditor\themes\jse-theme-dark.css

  /* svelte-select */
  --item-is-active-bg: #3883fa;
  --border: 1px solid #d8dbdf;
  --border-radius: 3px;
  --background: #fff;
  --padding: 0 10px;
  --multi-select-padding: 0 10px;

[josdejong]

Yes it's not ideal.

We can probably wrap the variables inside say .jse-modal { ... } like suggested here rob-balfre/svelte-select#522

Help fixing this would be welcome.

[SamMousa]

Is there a reason why the variables are defined on :root at all?
I'm seeing contamination outside the component because of this.

Why not just scope the variables properly?

[josdejong]

There is no special reason for that. We should indeed scope the variables properly.

Help would be welcome.

[SamMousa]

#340

[josdejong]

Fixed now in v0.20.0 via #344, thanks again Sam.