convert numbers to strings with units

cchaos · Feb 25, 2021 · 9766b78 · 9766b78
1 parent 156f7fe
commit 9766b78
Showing 1 changed file with 31 additions and 13 deletions.
diff --git 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)`
   ),
 };