Add CSS variable to define border for dialog

[wottpal]

In our design/brand language we use borders around dialogs, would be great to also being able to modify the ConnectKit dialog in that way. Currently, there doesn't seem to be a border variable available, correct? 🤔

[lochie]

Hey @wottpal, you can use the --ck-modal-box-shadow variable to create a border.

// 2px inside border
--ck-modal-box-shadow: inset 0 0 0 2px #000000; 

// 2px outside border
--ck-modal-box-shadow: 0 0 0 2px #000000;

// 2px inside border with a drop shadow
--ck-modal-box-shadow: inset 0 0 0 2px #000000, 0 2px 4px rgba(0, 0, 0, 0.02); 

You can see an example of this in the web95 and retro themes here: https://docs.family.co/connectkit/theming#theming

[wottpal]

Great, that worked 👌