fewer calc()

cchaos · Mar 3, 2021 · 60ef501 · 60ef501
1 parent 10ad430
commit 60ef501
Showing 1 changed file with 12 additions and 26 deletions.
diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts
@@ -271,34 +271,18 @@ const colorVis = {
   euiColorVis9_behindText: euiPaletteColorBlind.euiColorVis9.behindText,
 };
 
+const base = 16;
+
 const sizes = {
-  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)`
-  ),
+  euiSize: computed(['base'], ([base]) => `${base}px`),
+  euiSizeXS: computed(['base'], ([base]) => `${base * 0.25}px`),
+  euiSizeS: computed(['base'], ([base]) => `${base * 0.5}px`),
+  euiSizeM: computed(['base'], ([base]) => `${base * 0.75}px`),
+  euiSizeL: computed(['base'], ([base]) => `${base * 1.5}px`),
+  euiSizeXL: computed(['base'], ([base]) => `${base * 2}px`),
+  euiSizeXXL: computed(['base'], ([base]) => `${base * 2.5}px`),
 
-  euiButtonMinWidth: computed(
-    ['sizes.euiSize'],
-    ([euiSize]) => `calc(${euiSize} * 7)`
-  ),
+  euiButtonMinWidth: computed(['base'], ([base]) => `${base * 7}px`),
 
   euiScrollBar: computed(['sizes.euiSize'], ([euiSize]) => euiSize),
   euiScrollBarCorner: computed(
@@ -347,6 +331,7 @@ export const euiThemeDefault = {
     dark,
   },
   colorVis,
+  base,
   sizes,
   borders: {
     ...borderRadius,
@@ -491,6 +476,7 @@ export const euiThemeAmsterdam = {
     dark: amsterdam_dark,
   },
   colorVis,
+  base,
   sizes,
   borders: {
     ...amsterdam_borderRadius,