Projects site integrated editor improvements

[jamdelion]

• Hide inline-end border for selected tab
• Add button border radius property

This PR adds some variables that can be used in the projects site to customise the style of the integrated editor projects. It also adds a pseudo-element that can be toggled with a variable to affect the styling of the sidebar tabs.

The designs for this are here: https://www.figma.com/design/2XzRDyXtthyzeNMZtdChTQ/Projects-site---Designs?node-id=10785-10788&m=dev

See corresponding projects site changes here: https://github.com/RaspberryPiFoundation/projects-ui/pull/3611

[jamdelion]

Using a variable here ensures that this psuedo-element will not display unless the width variable is set.

The projects site sets the variable to 2px to get it the element to display. It is used to hide the inline-end border of the tabs in the sidebar.

[zetter-rpf]

Changes look good,

Because the level of customisation, it seems possible that a future editor release might break something by introducing something new that is unstyled or by breaking one of the overrides.

Is this something you will check for an manage when you upgrade the editor-ui component? I was just wondering if it's worth doing anything to easier to check as we're working on the code editor such having an example in the project that uses the overrides.

[jamdelion]

Changes look good,

Because the level of customisation, it seems possible that a future editor release might break something by introducing something new that is unstyled or by breaking one of the overrides.

Is this something you will check for an manage when you upgrade the editor-ui component? I was just wondering if it's worth doing anything to easier to check as we're working on the code editor such having an example in the project that uses the overrides.

Thanks @zetter-rpf, that sounds sensible. Would you recommend using storybook for this, or something else?

[zetter-rpf]

Would you recommend using storybook for this, or something else?

Storybook might be useful for this. I'm not sure about what state storybook is in for this project and I don't think the team is using it so I was going to suggest removing it (but can keep if if it's useful for this).

Alternatively, we could make a new HTML file that renders the component similar to web-component.html and link to it from the public index.html

Up to you if you think it's worth spending time on this now and it should't block this change - you might have a better idea than me as to how reliable this way of theming has been in the past.