[Liminal UI] Implement buttons

[fbmcipher]

Parent issue: #3229

---

Tasks

• [ ] Implement new buttons: Replace the current buttons in main with the new Liminal UI buttons from new design, paying special attention to the blend modes and extra borders.

Notes

Buttons (top-right)

Design notes

• The buttons used in the CC have a minimal presence. They are designed to blend with the background glow as much as possible, while still feeling clearly pressable.
• They're up of a subtle radial gradient background, and two opposing border strokes creating an amorphous lighting effect.
• Buttons can be grouped – like in the case of indent/outdent.

Implementation notes

• The Figma component contains designs for all button states.
• The root button element should use the color-dodge CSS blend mode – this will causes the colours of the background glow to blend subtly with the buttons.
• Prefer to implement buttons using HTML/CSS as this allows them to scale responsively – static SVGs provided in the asset pack have been provided as a fallback.
• Pay special attention to the opacities, gradients and colours of the button.
• Implement all states of the button: enabled/disabled, grouped/ungrouped, small/medium.

[yangchristina]

@fbmcipher still working on it, this is what I have so far:

@fbmcipher I'm pretty confused about what the border-radius is supposed to be for these two.

From figma, the first one seems to have:

          borderTopLeftRadius: 49,
          borderTopRightRadius: 24,
          borderBottomRightRadius: 24,
          borderBottomLeftRadius: 49,

and the other one just

borderRadius: 64,

Is this right? This is what I have in the photo.

[fbmcipher]

@yangchristina So far, the button themselves look great, and I'm really happy with how those are coming along.

For the "grouped" buttons, the idea is to keep the grouped edge flat so it feels like they come together to form one continuous unit.

The Outdent button (left) looks great, and the rightmost edge of that button is flattened correctly. The Indent button (right) just needs its leftmost edge flattened correspondingly – just inverting the direction of the first button will do the trick.

---

One thing I do want to clarify about the slightly unusual/uneven border-radius numbers.

Design is quite a different flow to development – my focus is much more on the visual outcome of the work than the values themselves. I don't tend to manually key in values – I slide the dials in the GUI until things feel right.

That leads to weird border values, like 49 – which I'd never really want to commit to code, just because of how unusual it reads!

In CSS, if we want to get that "capsule" look, we set the border-radius to the height of the element, or greater. In Figma it looks like I've used both 64px and 49px to get the fully rounded capsule effect, and it makes it a little unclear/ambiguous as to why there is that difference. This is just an intentionally high number to get the pill shape. A really high value, like 999px, would have had the same effect.

For these kinds of border radii, I'd round them both down to 48px – the visual output will be the same, and we don't have to commit weird, inconsistent – which will stick out like a sore thumb in a codebase like em's which is so focussed on code cleanliness!

I'll make an effort in the future to clean up some of the values before handover so you can copy directly from Figma.