Atom Packages: Styling Modal Panel


#1

I am writing a package which makes use of a Modal Panel. It uses a lot of HTML, so I wondered whether it is possible to apply a style sheet to this panel?


#2

Yes, it‘s possible. Just make sure to stick to the style guide, so you don‘t replicate existing styles and ensure your modification are theme-agnostic

Your package should generally only specify structural styling, and these should come from the style guide. Your package shouldn’t specify colors, padding sizes, or anything in absolute pixels. You should instead use the theme variables. If you follow this guideline, your package will look good out of the box with any theme!

Styling itself is as easy as adding stylesheets (CSS or LESS) to the styles folder in your package. Check the flight manual for details or check out some real-world examples.


#3

Thanks for this information. I have started making changes to the style sheet, and have explored the style guide.

Is it possible to use the variables using plain CSS?


#4

It’s not. You have to use Less. Any Less files in your package will be compiled automatically when your code is loaded.


#5

I guess in theory it might work. You could add an extra LESS file that assigns LESS variables to CSS custom properties (I haven’t tried this). To be honest, I think it’s not worth taking the extra-step since it overcomplicates things.