From 9766b784e352bbdabb46202beb36f95574ac5ea2 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 25 Feb 2021 10:34:45 -0600
Subject: [PATCH] convert numbers to strings with units

---
 src/services/theme/theme.ts | 44 ++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts
index eecef66ea27..b9a5833426f 100644
--- a/src/services/theme/theme.ts
+++ b/src/services/theme/theme.ts
@@ -272,28 +272,46 @@ const colorVis = {
 };
 
 const sizes = {
-  euiSize: 16,
-  euiSizeXS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.25),
-  euiSizeS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.5),
-  euiSizeM: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.75),
-  euiSizeL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 1.5),
-  euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2),
-  euiSizeXXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2.5),
+  euiSize: '16px',
+  euiSizeXS: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.25)`
+  ),
+  euiSizeS: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.5)`
+  ),
+  euiSizeM: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.75)`
+  ),
+  euiSizeL: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 1.5)`
+  ),
+  euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => `calc(${euiSize} * 2)`),
+  euiSizeXXL: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 2.5)`
+  ),
 
-  euiButtonMinWidth: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 7),
+  euiButtonMinWidth: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 7)`
+  ),
 
   euiScrollBar: computed(['sizes.euiSize'], ([euiSize]) => euiSize),
   euiScrollBarCorner: computed(
     ['sizes.euiSizeS'],
-    ([euiSizeS]) => euiSizeS * 0.75
+    ([euiSizeS]) => `calc(${euiSizeS} * 0.75)`
   ),
 };
 
 const borderRadius = {
-  euiBorderRadius: 4,
+  euiBorderRadius: '4px',
   euiBorderRadiusSmall: computed(
     ['borders.euiBorderRadius'],
-    ([euiBorderRadius]) => euiBorderRadius * 0.5
+    ([euiBorderRadius]) => `calc(${euiBorderRadius} * 0.5)`
   ),
 };
 
@@ -459,11 +477,11 @@ export const amsterdam_dark = {
 const amsterdam_borderRadius = {
   euiBorderRadius: computed(
     ['sizes.euiSizeS'],
-    ([euiSizeS]) => euiSizeS * 0.75
+    ([euiSizeS]) => `calc(${euiSizeS} * 0.75)`
   ),
   euiBorderRadiusSmall: computed(
     ['sizes.euiSizeS'],
-    ([euiSizeS]) => euiSizeS * 0.5
+    ([euiSizeS]) => `calc(${euiSizeS} * 0.5)`
   ),
 };