style(lib/commons): var -> let and const codemod (#4455)

Just like #4451 but for
`lib/commons`

Smaller part of the full vision:
#4444

Author: gaiety-deque

lib/commons/color/element-is-distinct.js

@@ -25,17 +25,17 @@ function _getFonts(style) {
  * @return {Boolean}
  */
 function elementIsDistinct(node, ancestorNode) {
-  var nodeStyle = window.getComputedStyle(node);
+  const nodeStyle = window.getComputedStyle(node);
 
   // Check if the link has a background
   if (nodeStyle.getPropertyValue('background-image') !== 'none') {
     return true;
   }
 
   // Check if the link has a border or outline
-  var hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(
+  const hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(
     (result, edge) => {
-      var borderClr = new Color();
+      const borderClr = new Color();
       borderClr.parseString(nodeStyle.getPropertyValue(edge + '-color'));
 
       // Check if a border/outline was specified
@@ -54,13 +54,13 @@ function elementIsDistinct(node, ancestorNode) {
     return true;
   }
 
-  var parentStyle = window.getComputedStyle(ancestorNode);
+  const parentStyle = window.getComputedStyle(ancestorNode);
   // Compare fonts
   if (_getFonts(nodeStyle)[0] !== _getFonts(parentStyle)[0]) {
     return true;
   }
 
-  var hasStyle = [
+  let hasStyle = [
     'text-decoration-line',
     'text-decoration-style',
     'font-weight',
@@ -74,7 +74,7 @@ function elementIsDistinct(node, ancestorNode) {
     );
   }, false);
 
-  var tDec = nodeStyle.getPropertyValue('text-decoration');
+  const tDec = nodeStyle.getPropertyValue('text-decoration');
   if (tDec.split(' ').length < 3) {
     // old style CSS text decoration
     hasStyle =

lib/commons/color/flatten-shadow-colors.js

@@ -11,11 +11,11 @@ import Color from './color';
  * @return {Color} Blended color
  */
 export default function flattenShadowColors(fgColor, bgColor) {
-  var alpha = fgColor.alpha;
-  var r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
-  var g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
-  var b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
-  var a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
+  const alpha = fgColor.alpha;
+  const r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
+  const g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
+  const b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
+  const a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
 
   return new Color(r, g, b, a);
 }

lib/commons/color/get-background-stack.js

@@ -98,7 +98,7 @@ function shallowArraysEqual(a, b) {
     return false;
   }
 
-  for (var i = 0; i < a.length; ++i) {
+  for (let i = 0; i < a.length; ++i) {
     if (a[i] !== b[i]) {
       return false;
     }

lib/commons/color/get-contrast.js

@@ -18,8 +18,8 @@ function getContrast(bgColor, fgColor) {
     fgColor = flattenColors(fgColor, bgColor);
   }
 
-  var bL = bgColor.getRelativeLuminance();
-  var fL = fgColor.getRelativeLuminance();
+  const bL = bgColor.getRelativeLuminance();
+  const fL = fgColor.getRelativeLuminance();
 
   return (Math.max(fL, bL) + 0.05) / (Math.min(fL, bL) + 0.05);
 }

lib/commons/color/has-valid-contrast-ratio.js

@@ -14,11 +14,11 @@ import getContrast from './get-contrast';
  * @deprecated
  */
 function hasValidContrastRatio(bg, fg, fontSize, isBold) {
-  var contrast = getContrast(bg, fg);
-  var isSmallFont =
+  const contrast = getContrast(bg, fg);
+  const isSmallFont =
     (isBold && Math.ceil(fontSize * 72) / 96 < 14) ||
     (!isBold && Math.ceil(fontSize * 72) / 96 < 18);
-  var expectedContrastRatio = isSmallFont ? 4.5 : 3;
+  const expectedContrastRatio = isSmallFont ? 4.5 : 3;
 
   return {
     isValid: contrast > expectedContrastRatio,

lib/commons/dom/get-composed-parent.js

@@ -13,7 +13,7 @@ function getComposedParent(element) {
     // we'll skip this part for now.
     return getComposedParent(element.assignedSlot); // parent of a shadow DOM slot
   } else if (element.parentNode) {
-    var parentNode = element.parentNode;
+    const parentNode = element.parentNode;
     if (parentNode.nodeType === 1) {
       return parentNode; // Regular node
     } else if (parentNode.host) {

lib/commons/dom/get-element-coordinates.js

@@ -20,7 +20,7 @@ import getScrollOffset from './get-scroll-offset';
  * @property {Number} height The height of the element
  */
 function getElementCoordinates(element) {
-  var scrollOffset = getScrollOffset(document),
+  const scrollOffset = getScrollOffset(document),
     xOffset = scrollOffset.left,
     yOffset = scrollOffset.top,
     coords = element.getBoundingClientRect();

lib/commons/dom/get-scroll-offset.js

@@ -13,7 +13,7 @@ function getScrollOffset(element) {
 
   // 9 === Node.DOCUMENT_NODE
   if (element.nodeType === 9) {
-    var docElement = element.documentElement,
+    const docElement = element.documentElement,
       body = element.body;
 
     return {

lib/commons/dom/has-content-virtual.js

@@ -42,12 +42,12 @@ export function hasChildTextNodes(elm) {
 function hasContentVirtual(elm, noRecursion, ignoreAria) {
   return (
     // It has text
+    // or one of it's descendants does
     hasChildTextNodes(elm) ||
     // It is a graphical element
     isVisualContent(elm.actualNode) ||
     // It has an ARIA label
     (!ignoreAria && !!labelVirtual(elm)) ||
-    // or one of it's descendants does
     (!noRecursion &&
       elm.children.some(
         child => child.actualNode.nodeType === 1 && hasContentVirtual(child)

lib/commons/dom/is-focusable.js

@@ -23,7 +23,7 @@ export default function isFocusable(el) {
     return true;
   }
   // check if the tabindex is specified and a parseable number
-  var tabindex = vNode.attr('tabindex');
+  const tabindex = vNode.attr('tabindex');
   if (tabindex && !isNaN(parseInt(tabindex, 10))) {
     return true;
   }