(low prio): Open up styling

[Lms24]

Let spotlight integrations (or another kind of API) style/theme spotlight differently from the default theme. For example by setting specific colors for background, buttons, primary/secondary/accent colors, etc. If Spotlight would be included by other frameworks, they could use this API to blend in Spotlight more into the framework.

Example: we could give Spotlight in Astro a dark-greyish background and the Astro-purple as an accent color.

[dcramer]

What do you mean on this one?

[Lms24]

@dcramer updated the description. We talked about this a while ago and said it'd be nice to have but didn't spend much time on it.

[Shubhdeep12]

Hi @dcramer @Lms24

Today, we utilize Tailwind in the Spotlight and have integrated Tailwind's indigo palette as the default primary color for the spotlight overlay.

Considering flexibility for users, how about providing the option to customize the color palette within the Tailwind pattern? Users can define their custom theme color with shades ranging from 50 to 950, following a structure like:

customTheme = {
  50: "#aaaaa",
  // ...
  950: "#aaa123"
}

If you find this approach fine for colors in the theme, here is the demo for that-

Screencast from 04-02-24 11:54:03 AM IST.webm

Let me know your thoughts. Thanks!

cc @HazAT

[Lms24]

Hey @Shubhdeep12 I think this is overall still rather low-prio so I'd rather focus on other things for now (I'm giving a talk about Spotlight in the next days so I'll be writing up some issues with things I find as I use Spotlight more again).

About your suggestion, do I understand it correctly that:

• we keep the tailwind colors as a default for now and these css classes will also be bundled into the spotlight overlay package
• we optionally let users specify a color palette in the Spotlight.init call and I guess we overwrite the classes at runtime with the given color values?

As long as this works technically, I think that's fine. A nice addition would be if we could provide some color palettes. I'm thinking of something like react-blue, angular-red, svelte-orange, etc... However, I'd say this something we can still tackle in the future after we support colors.

[Shubhdeep12]

Sure @Lms24, we'll tackle this in the future. Regarding your question-> we'll incorporate certain CSS variables tied to the Tailwind configuration. When a user provides a palette during initialization, we dynamically update the values of these variables at runtime. As a result, the classes generated by Tailwind, such as 'bg-primary-500,' will reflect the updated values

you mentioned a talk 😅. Could you please share some details? I'd love to attend if it's possible.

[BYK]

I don't think there's much value in this ticket for the foreseeable future so closing it. Happy to reconsider if there's demand.