[CSS-in-JS] Sizes with units

[thompsongl]

Summary

Converts unitless number values to strings with units. Allows for use in string- and object-based Emotion styling.

Thinking that we can use the calc approach for now and determine if we want to move to a custom math function as we build more of the theme.

### Checklist

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[cchaos]

This looks good to me in the theme, but when I look out the output, this nesty calcs is a little cringy for me.

"euiScrollBarCorner": "calc(calc(16px * 0.5) * 0.75)"

[thompsongl]

this nesty calcs is a little cringy for me

We could roll our own calculation function to use instead. That way the output is always a px string.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[thompsongl]

Exploring options for a custom math function and found https://polished.js.org/docs/#math
Even though polished might not be right for us, I think the following is relevant for any math function we would write or use:

In cases where you need to do calculations with mixed units where one unit is a relative length unit, you will want to use CSS Calc.

warning While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing math user provided values.

Math on mixed units and user provided values is either risky or not possible. CSS calc is likely the safest choice of, but it might be worth building out more of the theme to see if any mixed/complex/risky cases arise before making a choice.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[thompsongl]

Latest commit results in output like:

  "base": 16,
  "sizes": {
    "euiSize": "16px",
    "euiSizeXS": "4px",
    "euiSizeS": "8px",
    "euiSizeM": "12px",
    "euiSizeL": "24px",
    "euiSizeXL": "32px",
    "euiSizeXXL": "40px",
    "euiButtonMinWidth": "112px",
    "euiScrollBar": "16px",
    "euiScrollBarCorner": "calc(8px * 0.75)"
  },

Note that euiScrollBarCorner still uses calc(), but the alternative would be to write a util to do internal px math. As is, this eliminates nested calc()s and still allows for calculations on calculated values
(euiSize -> euiSizeS -> euiScrollBarCorner).

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[cchaos]

Has there been more thought on how we might be able to simplify this without needing to write base 3 times?

[thompsongl]

Haven't put any thought to it until just now. I think at best you're looking at writing base twice, and I'm not sure it scales well beyond top-level keys like base. I can think about it a bit.

[cchaos]

🎉 This TS based error it awesome!

I also pushed up a change to the first example to showcase the calc().

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4578/

[thompsongl]

Will merge this soon so that work based on this branch can move forward