Optimize calc() usage in scss files

CHANGELOG.md

@@ -16,9 +16,13 @@
 - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
 - Add slugs to markdown headers ([#1051](https://github.com/opensearch-project/oui/pull/1051))
 - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044))
+
+- Optimize `calc()` usage in scss files ([#1002](https://github.com/opensearch-project/oui/issues/1002))
+
 - Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
 - Implement validation for icon input source & set default icon to `Beaker` ([#1137](https://github.com/opensearch-project/oui/pull/1137))
 
+
 ### 🐛 Bug Fixes
 
 - Add exit code to compile-scss script on failure ([#1024](https://github.com/opensearch-project/oui/pull/1024))
@@ -41,10 +45,12 @@
 - Remove Internet Explorer specific code ([#890](https://github.com/opensearch-project/oui/pull/890))
 - Update caniuse database ([#1046](https://github.com/opensearch-project/oui/pull/1046))
 - Bump TypeScript to v4.6.4 ([#879](https://github.com/opensearch-project/oui/pull/879))
+
 - Clean up `react-datepicker` package to remove unnecessary directories and files ([#1067](https://github.com/opensearch-project/oui/pull/1067))
 - Bump `@types/react` and `csstype` ([#1105](https://github.com/opensearch-project/oui/pull/1105))
 - Add `scripts` folder to lint-es script ([#1143](https://github.com/opensearch-project/oui/pull/1143))
 
+
 ### 🪛 Refactoring
 
 ### 🔩 Tests

i18ntokens.json

@@ -2653,7 +2653,9 @@
       "start": {
         "line": 143,
         "column": 4,
+
         "index": 4717
+
       },
       "end": {
         "line": 148,
@@ -2672,11 +2674,12 @@
         "line": 143,
         "column": 4,
         "index": 4717
+
       },
       "end": {
         "line": 148,
         "column": 44,
-        "index": 4902
+        index": 4902
       }
     },
     "filepath": "src/components/list_group/pinnable_list_group/pinnable_list_group.tsx"

scripts/babel/variables-from-scss/index.js

@@ -28,6 +28,7 @@ module.exports = (babel) => ({
             assignments.push(specifier.local.name);
           } else if (specifier.type === 'ImportSpecifier') {
             usedVariableNames.push(specifier.imported.name);
+
             deconstructedAssignments.push(
               specifier.imported.name === specifier.local.name
                 ? specifier.local.name
@@ -64,4 +65,5 @@ module.exports = (babel) => ({
       }
     },
   },
+
 });

scripts/compile-charts.js

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+
 const { execSync } = require('child_process');
 const chalk = require('chalk');
 const path = require('path');

scripts/compile-themes.js

@@ -10,8 +10,8 @@
  */
 
 const path = require('path');
-const util = require('util');
-const { writeFile, mkdir } = require('fs/promises');
+const util = require('util')
+const { writeFile, mkdir } = require('fs/promises'
 const globModule = require('glob');
 
 const chalk = require('chalk');
@@ -47,8 +47,8 @@ async function compileScssFiles(
 
   const inputFilenames = await glob(sourcePattern, undefined);
 
-  await Promise.all(
-    inputFilenames.map(async (inputFilename) => {
+  await Promise.all
+    inputFilenames.map(async (inputFilename) => 
       console.log(chalk`{cyan …} Compiling {gray ${inputFilename}}`);
 
       try {
@@ -73,8 +73,7 @@ async function compileScssFiles(
 
         process.exitCode = 1;
         return;
-      }
-
+
       /* OUI -> EUI Aliases */
       try {
         const { name } = path.parse(inputFilename);
@@ -87,8 +86,8 @@ async function compileScssFiles(
           true
         );
         console.log(
-          chalk`{green ✔} Finished compiling {gray ${inputFilename}} to ${outputFilenames
-            .map((filename) => chalk.gray(filename))
+          chalk`{green ✔} Finished compiling {gray ${inputFilename}} to ${outputFilename
+            .map((filename) => chalk.gray(filename)
             .join(', ')}`
         );
       } catch (error) {
@@ -118,26 +117,33 @@ async function compileScssFile(
     '.min.css'
   );
 
+
   const {
     css: renderedCss,
     variables: extractedVars,
   } = await compileWithVariables(path.resolve(inputFilename));
 
+
   /* OUI -> EUI Aliases: Modified */
   // const extractedVarTypes = await deriveSassVariableTypes(
   const extractedVarTypes_ = await deriveSassVariableTypes(
+
     /* End of Aliases */
+
     extractedVars,
     `${packageName}/${outputVarsFilename}`,
     outputVarTypesFilename
   );
 
   /* OUI -> EUI Aliases */
+
   const declarationMatcher = /^declare\s+module\s+(['"]@opensearch-project\/oui.*?['"])\s*\{/gms;
+
   let match;
   const declarations = [];
 
   while ((match = declarationMatcher.exec(extractedVarTypes_)) !== null) {
+
     declarations.push(
       `declare module ${match[1].replace(
         '@opensearch-project/oui',
@@ -149,14 +155,17 @@ async function compileScssFile(
     );
   }
   const extractedVarTypes = `${extractedVarTypes_}\n${declarations.join('\n')}`;
+
   /* End of Aliases */
 
   const { css: postprocessedCss } = await postcss(postcssConfiguration).process(
     /* OUI -> EUI Aliases: Modified */
     //renderedCss,
+
     renameToEUI
       ? renderedCss.toString().replace(/([. '"-])oui/g, '$1eui')
       : renderedCss,
+
     /* End of Aliases */
     {
       from: outputCssFilename,
@@ -169,9 +178,11 @@ async function compileScssFile(
   ).process(
     /* OUI -> EUI Aliases: Modified */
     //renderedCss,
+
     renameToEUI
       ? renderedCss.toString().replace(/([. '"-])oui/g, '$1eui')
       : renderedCss,
+
     /* End of Aliases */
     {
       from: outputCssFilename,
@@ -202,6 +213,7 @@ if (require.main === module) {
     process.exit(1);
   }
 
+
   compileScssFiles(
     path.join('src', 'theme_*.scss'),
     'dist',
@@ -210,4 +222,5 @@ if (require.main === module) {
     console.error(err);
     process.exit(2);
   });
+
 }

scripts/preinstall.js

@@ -53,8 +53,10 @@ if (!INIT_CWD?.startsWith?.(PWD)) {
 
   if (existsSync('node_modules')) {
     for (const name of readdirSync('node_modules')) {
+
       if (!depsToKeep.includes(name))
         rmSync(join('node_modules', name), { recursive: true, force: true });
+
     }
   }
 
@@ -79,11 +81,13 @@ if (!INIT_CWD?.startsWith?.(PWD)) {
 
   if (existsSync('node_modules/@types')) {
     for (const name of readdirSync('node_modules/@types')) {
+
       if (!typesToKeep.includes(name))
         rmSync(join('node_modules/@types', name), {
           recursive: true,
           force: true,
         });
+
     }
   }
 

src-docs/src/components/guide_section/guide_section.tsx

@@ -133,8 +133,10 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
 
   const renderPlaygroundToggle = () => {
     const isPlaygroundUnsupported =
+
       typeof window !== 'undefined' && typeof document !== 'undefined';
 
+
     if (!isPlaygroundUnsupported && !!playground) {
       return (
         <OuiSwitch

src-docs/src/views/guidelines/sass.js

@@ -15,6 +15,9 @@ import zindexs from '!!variables-from-scss!!../../../../src/global_styling/varia
 import animations from '!!variables-from-scss!!../../../../src/global_styling/variables/_animations.scss';
 import breakpoints from '!!variables-from-scss!!../../../../src/global_styling/variables/_responsive.scss';
 
+import { rgbToHex } from '../../../../src/services';
+
+
 import { Link } from 'react-router-dom';
 
 import { GuidePage, GuideRuleTitle } from '../../components';

src/components/card/_card.scss

@@ -133,15 +133,15 @@
     .ouiCard__top {
 
       .ouiCard__image {
-        width: calc(100% + (#{$paddingAmount} * 2));
+        width: calc(100% + #{$paddingAmount * 2});
         left: $paddingAmount * -1;
         top: $paddingAmount * -1;
         margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image
 
         // IF both exist, position the icon centered on top of image
         + .ouiCard__icon {
           transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
-          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
+          transform: translate(-50%, calc(-50% - #{$paddingAmount})); // sass-lint:disable-line no-duplicate-properties
         }
       }
     }

src/components/combo_box/_combo_box.scss

@@ -41,7 +41,7 @@
 
       // Ensure the input doesn't drop to the next line when the OuiBadge has a very long text
       // Overrides the default OuiBadge max-width that is 100%
-      max-width: calc(100% - #{$ouiSizeXS * .5} - #{$inputMinWidth});
+      max-width: calc(100% - #{$ouiSizeXS * 0.5} - #{$inputMinWidth});
     }
 
     .ouiComboBoxIcon {

src/components/control_bar/_control_bar.scss

@@ -206,7 +206,7 @@
 @keyframes ouiControlBarOpenPanelLarge {
   0% {
     // Accounts for the initial height offset from the top
-    transform: translateY(calc((#{$ouiControlBarInitialHeight} * 3) * -1));
+    transform: translateY(calc(#{$ouiControlBarInitialHeight} * -3));
   }
 
   100% {

src/components/flex/_flex_grid.scss

@@ -85,7 +85,7 @@ $fractions: (
   @each $fraction, $map in $fractions {
     .ouiFlexGrid--#{$gutterName}.ouiFlexGrid--#{$fraction} {
       > .ouiFlexItem {
-        flex-basis: calc(#{map-get($map, 'percentage')} - #{$gutterSize});
+        flex-basis: calc(map-get($map, 'percentage') - #{$gutterSize}); 
       }
 
       &.ouiFlexGrid--directionColumn { /* 1 */

src/components/form/range/_range_slider.scss

@@ -102,7 +102,9 @@
   // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    margin-top: calc(calc($ouiRangeTrackBorderWidth * -2 + $ouiRangeTrackHeight) / 2) - calc($ouiRangeThumbHeight / 2);
+
+    margin-top: calc(($ouiRangeTrackBorderWidth * -2 + $ouiRangeTrackHeight - $ouiRangeThumbHeight) / 2);
+
   }
 
   &::-ms-thumb {

src/components/form/range/_range_thumb.scss

@@ -16,7 +16,7 @@
   position: absolute;
   left: 0;
   top: 50%;
-  margin-top: calc(-1 * $ouiRangeThumbHeight / 2);
+  margin-top: calc($ouiRangeThumbHeight / -2);
   pointer-events: none;
   z-index: 1; // higher than .ouiRangeHighlight that is 0
 

src/components/resizable_container/_resizable_button.scss

@@ -35,8 +35,10 @@
   &.ouiResizableButton--horizontal {
     cursor: col-resize;
     width: $ouiResizableButtonSize;
-    margin-left: calc(-1 * $ouiResizableButtonSize / 2);
-    margin-right: calc(-1 * $ouiResizableButtonSize / 2);
+
+    margin-left: calc( $ouiResizableButtonSize / -2);
+    margin-right: calc( $ouiResizableButtonSize / -2);
+
 
     &:before,
     &:after {

src/components/tool_tip/_tool_tip.scss

@@ -21,8 +21,10 @@
 
   // Custom sizing
   $arrowSize: $ouiSizeM;
-  $arrowPlusSize: (calc($arrowSize/2) + 1px) * -1; /* 1 */
-  $arrowMinusSize: (calc($arrowSize/2) - 1px) * -1; /* 1 */
+
+  $arrowPlusSize: calc(-($arrowSize/2 + 1px)); /* 1 */
+  $arrowMinusSize: calc(-($arrowSize/2 - 1px)); /* 1 */
+
 
   .ouiToolTip__arrow {
     content: '';

src/components/tree_view/tree_view.scss

@@ -60,7 +60,9 @@
 }
 
 .ouiTreeView__iconWrapper {
-  margin-top: calc(-1 * $ouiSizeXS / 2);
+
+  margin-top: calc($ouiSizeXS / -2);
+
   margin-right: $ouiSizeS;
 
   // This helps tokens appear vertically centered