search

josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
816 stars 108 forks source link

svelte-select css variables #339

Closed qbacuber closed 6 months ago

qbacuber commented 7 months ago

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 commented 7 months ago

Yes it's not ideal.

We can probably wrap the variables inside say .jse-modal { ... } like suggested here https://github.com/rob-balfre/svelte-select/issues/522

Help fixing this would be welcome.

SamMousa commented 7 months ago

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 commented 7 months ago

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

Help would be welcome.

SamMousa commented 7 months ago

https://github.com/josdejong/svelte-jsoneditor/pull/340

josdejong commented 6 months ago

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