Revert "Issue #3238501 by kostyashupenko, Spokje, mherchel, nod_, longwave, lauriii, bnjmnm: Remove Internet Explorer 11 polyfills"

This reverts commit 145d7286a7.

core/.eslintignore

@@ -6,6 +6,9 @@ node_modules/**/*
 !modules/ckeditor5/js/ckeditor5_plugins/**/*.js
 modules/locale/tests/locale_test.es6.js
 !tests/Drupal/Nightwatch/**/*.js
+misc/polyfills/array.find.es6.js
+misc/polyfills/element.closest.es6.js
+misc/polyfills/object.assign.es6.js
 
 # Ignore deliberately malformed YAML files.
 modules/system/tests/fixtures/HtaccessTest/access_test.yml

core/assets/vendor/css-escape/css.escape.js

@@ -0,0 +1,106 @@
+/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
+;(function(root, factory) {
+	// https://github.com/umdjs/umd/blob/master/returnExports.js
+	if (typeof exports == 'object') {
+		// For Node.js.
+		module.exports = factory(root);
+	} else if (typeof define == 'function' && define.amd) {
+		// For AMD. Register as an anonymous module.
+		define([], factory.bind(root, root));
+	} else {
+		// For browser globals (not exposing the function separately).
+		factory(root);
+	}
+}(typeof global != 'undefined' ? global : this, function(root) {
+
+	if (root.CSS && root.CSS.escape) {
+		return root.CSS.escape;
+	}
+
+	// https://drafts.csswg.org/cssom/#serialize-an-identifier
+	var cssEscape = function(value) {
+		if (arguments.length == 0) {
+			throw new TypeError('`CSS.escape` requires an argument.');
+		}
+		var string = String(value);
+		var length = string.length;
+		var index = -1;
+		var codeUnit;
+		var result = '';
+		var firstCodeUnit = string.charCodeAt(0);
+		while (++index < length) {
+			codeUnit = string.charCodeAt(index);
+			// Note: there’s no need to special-case astral symbols, surrogate
+			// pairs, or lone surrogates.
+
+			// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+			// (U+FFFD).
+			if (codeUnit == 0x0000) {
+				result += '\uFFFD';
+				continue;
+			}
+
+			if (
+				// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+				// U+007F, […]
+				(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+				// If the character is the first character and is in the range [0-9]
+				// (U+0030 to U+0039), […]
+				(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+				// If the character is the second character and is in the range [0-9]
+				// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+				(
+					index == 1 &&
+					codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+					firstCodeUnit == 0x002D
+				)
+			) {
+				// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+				result += '\\' + codeUnit.toString(16) + ' ';
+				continue;
+			}
+
+			if (
+				// If the character is the first character and is a `-` (U+002D), and
+				// there is no second character, […]
+				index == 0 &&
+				length == 1 &&
+				codeUnit == 0x002D
+			) {
+				result += '\\' + string.charAt(index);
+				continue;
+			}
+
+			// If the character is not handled by one of the above rules and is
+			// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+			// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+			// U+005A), or [a-z] (U+0061 to U+007A), […]
+			if (
+				codeUnit >= 0x0080 ||
+				codeUnit == 0x002D ||
+				codeUnit == 0x005F ||
+				codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+				codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+				codeUnit >= 0x0061 && codeUnit <= 0x007A
+			) {
+				// the character itself
+				result += string.charAt(index);
+				continue;
+			}
+
+			// Otherwise, the escaped character.
+			// https://drafts.csswg.org/cssom/#escape-a-character
+			result += '\\' + string.charAt(index);
+
+		}
+		return result;
+	};
+
+	if (!root.CSS) {
+		root.CSS = {};
+	}
+
+	root.CSS.escape = cssEscape;
+	return cssEscape;
+
+}));

core/core.libraries.yml

@@ -311,6 +311,16 @@ ckeditor5.translations:
     # are not allowed.
     assets/vendor/ckeditor5/translation.js: {}
 
+css.escape:
+  remote: https://github.com/mathiasbynens/CSS.escape
+  version: "1.5.1"
+  license:
+    name: MIT
+    url: https://raw.githubusercontent.com/mathiasbynens/CSS.escape/v1.5.1/LICENSE-MIT.txt
+    gpl-compatible: true
+  js:
+    assets/vendor/css-escape/css.escape.js: { weight: -20 }
+
 drupal:
   version: VERSION
   js:
@@ -362,6 +372,7 @@ drupal.ajax:
     - core/jquery
     - core/drupal
     - core/drupalSettings
+    - core/drupal.nodelist.foreach
     - core/drupal.progress
     - core/once
     - core/tabbable
@@ -426,6 +437,17 @@ drupal.autocomplete:
     - core/tabbable.jquery.shim
     - core/drupal.jquery.position
 
+
+drupal.array.find:
+  version: VERSION
+  js:
+    misc/polyfills/array.find.js: { weight: -20 }
+
+drupal.array.includes:
+  version: VERSION
+  js:
+    misc/polyfills/array.includes.js: { weight: -20 }
+
 drupal.batch:
   version: VERSION
   js:
@@ -458,6 +480,11 @@ drupal.collapse:
     - core/drupal.form
     - core/once
 
+drupal.customevent:
+  version: VERSION
+  js:
+    misc/polyfills/customevent.js: { weight: -20 }
+
 drupal.debounce:
   version: VERSION
   js:
@@ -554,6 +581,18 @@ drupal.dropbutton:
     - core/drupalSettings
     - core/once
 
+drupal.element.closest:
+  version: VERSION
+  js:
+    misc/polyfills/element.closest.js: { weight: -20 }
+  dependencies:
+    - core/drupal.element.matches
+
+drupal.element.matches:
+  version: VERSION
+  js:
+    misc/polyfills/element.matches.js: { weight: -20 }
+
 drupal.entity-form:
   version: VERSION
   js:
@@ -590,6 +629,16 @@ drupal.message:
     - core/drupal
     - core/drupal.announce
 
+drupal.nodelist.foreach:
+  version: VERSION
+  js:
+    misc/polyfills/nodelist.foreach.js: { weight: -20 }
+
+drupal.object.assign:
+  version: VERSION
+  js:
+    misc/polyfills/object.assign.js: { weight: -20 }
+
 drupal.progress:
   version: VERSION
   js:
@@ -609,6 +658,11 @@ drupal.states:
     - core/drupalSettings
     - core/once
 
+drupal.string.includes:
+  version: VERSION
+  js:
+    misc/polyfills/string.includes.js: { weight: -20 }
+
 drupal.tabbingmanager:
   version: VERSION
   js:
@@ -664,6 +718,7 @@ drupal.timezone:
   js:
     misc/timezone.js: {}
   dependencies:
+    - core/drupal.nodelist.foreach
     - core/jquery
     - core/once
     - core/drupal
@@ -691,6 +746,15 @@ drupal.vertical-tabs:
     - core/drupalSettings
     - core/drupal.form
 
+es6-promise:
+  version: "4.2.8"
+  license:
+    name: MIT
+    url: https://raw.githubusercontent.com/stefanpenner/es6-promise/v4.2.8/LICENSE
+    gpl-compatible: true
+  js:
+    assets/vendor/es6-promise/es6-promise.auto.min.js: { weight: -20, minified: true }
+
 jquery:
   remote: https://github.com/jquery/jquery
   version: "3.6.0"
@@ -785,6 +849,18 @@ once:
     gpl-compatible: true
   js:
     assets/vendor/once/once.min.js: { weight: -19, minified: true }
+  dependencies:
+    - core/drupal.element.matches
+
+picturefill:
+  remote: https://github.com/scottjehl/picturefill
+  version: "3.0.3"
+  license:
+    name: MIT
+    url: https://raw.githubusercontent.com/scottjehl/picturefill/3.0.3/LICENSE
+    gpl-compatible: true
+  js:
+    assets/vendor/picturefill/picturefill.min.js: { weight: -10, minified: true }
 
 popperjs:
   version: "2.11.5"
@@ -794,6 +870,10 @@ popperjs:
     gpl-compatible: true
   js:
     assets/vendor/popperjs/popper.min.js: { minified: true }
+  dependencies:
+    - core/drupal.array.find
+    - core/es6-promise
+    - core/drupal.object.assign
 
 sortable:
   remote: https://github.com/SortableJS/Sortable
@@ -814,6 +894,8 @@ tabbable:
     gpl-compatible: true
   js:
     assets/vendor/tabbable/index.umd.min.js: { weight: -1, minified: true }
+  dependencies:
+    - core/css.escape
 
 tabbable.jquery.shim:
   version: VERSION

core/misc/cspell/dictionary.txt

@@ -270,6 +270,7 @@ ctund
 cucurbitaceae
 curle
 curlopt
+customevent
 customly
 customrequest
 cweagans
@@ -291,7 +292,6 @@ dblog
 dbtng
 dburl
 ddev
-dealerdirect
 deckard
 deconstructor
 deduplicated
@@ -486,6 +486,7 @@ fixnull
 flickr
 flipfit
 floatingspace
+fmod
 foaf
 foat
 focusring
@@ -560,6 +561,7 @@ hasher
 hashmarks
 hateoas
 hbox
+heartz
 heke
 heroless
 herpderp
@@ -582,7 +584,6 @@ hostnames
 hreflang
 hreflangs
 hrefs
-htdocs
 htkey
 htmlcorrector
 htmlto
@@ -769,7 +770,7 @@ metapackage
 metapackages
 metatag
 metatags
-meΦΩ
+meφω
 mglaman
 miaus
 middlewares
@@ -965,7 +966,6 @@ permissionless
 persistable
 phpass
 phpcbf
-phpcodesniffer
 phpcs
 phpdocumentor
 phpfile
@@ -976,6 +976,7 @@ phpunit
 phpunit's
 pianura
 pickable
+picturefill
 pingback
 pioggia
 pjpeg
@@ -1197,7 +1198,6 @@ skiptags
 skos
 skynet
 slatkin
-slevomat
 sloopal
 smacss
 smalldatetime
@@ -1414,6 +1414,8 @@ toplevel
 topop
 torder
 totalcount
+totranslate
+touchevent
 touchevents
 tparams
 trackback
@@ -1646,8 +1648,7 @@ zwei
 zwjhek
 zxvf
 zzgroup
-Èxample
-Über
 åwesome
+èxample
 über
-Ȅchȏ
+ȅchȏ

core/misc/polyfills/array.find.es6.js

@@ -0,0 +1,60 @@
+/**
+ * @file
+ * Provides a polyfill for Array.find().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function (predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError
+      // exception.
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be
+      // undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue,
+        //    k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true,
+  });
+}

core/misc/polyfills/array.find.js

@@ -0,0 +1,40 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function (predicate) {
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+      var len = o.length >>> 0;
+
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      var thisArg = arguments[1];
+      var k = 0;
+
+      while (k < len) {
+        var kValue = o[k];
+
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+
+        k++;
+      }
+
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}

core/misc/polyfills/array.includes.es6.js

@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Provides a polyfill for Array.includes().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has based on MDN Web Docs code samples. Code samples in the MDN Web Docs
+ * are licensed under CC0.
+ *
+ * @see https://web.archive.org/web/20161012020930/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Array.prototype.includes) {
+  // eslint-disable-next-line no-extend-native
+  Array.prototype.includes = function (searchElement) {
+    if (this == null) {
+      throw new TypeError(
+        'Array.prototype.includes called on null or undefined',
+      );
+    }
+
+    const O = Object(this);
+    const len = parseInt(O.length, 10) || 0;
+    if (len === 0) {
+      return false;
+    }
+    // eslint-disable-next-line prefer-rest-params
+    const n = parseInt(arguments[1], 10) || 0;
+    let k;
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k < 0) {
+        k = 0;
+      }
+    }
+    let currentElement;
+    while (k < len) {
+      currentElement = O[k];
+      if (
+        searchElement === currentElement ||
+        // eslint-disable-next-line no-self-compare
+        (searchElement !== searchElement && currentElement !== currentElement)
+      ) {
+        // NaN !== NaN
+        return true;
+      }
+      k += 1;
+    }
+    return false;
+  };
+}

core/misc/polyfills/array.includes.js

@@ -0,0 +1,48 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Array.prototype.includes) {
+  Array.prototype.includes = function (searchElement) {
+    if (this == null) {
+      throw new TypeError('Array.prototype.includes called on null or undefined');
+    }
+
+    const O = Object(this);
+    const len = parseInt(O.length, 10) || 0;
+
+    if (len === 0) {
+      return false;
+    }
+
+    const n = parseInt(arguments[1], 10) || 0;
+    let k;
+
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+
+      if (k < 0) {
+        k = 0;
+      }
+    }
+
+    let currentElement;
+
+    while (k < len) {
+      currentElement = O[k];
+
+      if (searchElement === currentElement || searchElement !== searchElement && currentElement !== currentElement) {
+        return true;
+      }
+
+      k += 1;
+    }
+
+    return false;
+  };
+}

core/misc/polyfills/customevent.es6.js

@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Provides a polyfill for CustomEvent.
+ *
+ * This is needed for Internet Explorer 11.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+// eslint-disable-next-line func-names
+(function () {
+  if (typeof window.CustomEvent === 'function') return false;
+
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: null };
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(
+      event,
+      params.bubbles,
+      params.cancelable,
+      params.detail,
+    );
+    return evt;
+  }
+
+  window.CustomEvent = CustomEvent;
+})();

core/misc/polyfills/customevent.js

@@ -0,0 +1,23 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function () {
+  if (typeof window.CustomEvent === 'function') return false;
+
+  function CustomEvent(event, params) {
+    params = params || {
+      bubbles: false,
+      cancelable: false,
+      detail: null
+    };
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+  }
+
+  window.CustomEvent = CustomEvent;
+})();

core/misc/polyfills/element.closest.es6.js

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Provides a polyfill for Element.prototype.closest().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function (s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}

core/misc/polyfills/element.closest.js

@@ -0,0 +1,19 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function (s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+
+    return null;
+  };
+}

core/misc/polyfills/element.matches.es6.js

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Provides a polyfill for Element.prototype.matches().
+ *
+ * This is needed for Internet Explorer 9+
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}

core/misc/polyfills/element.matches.js

@@ -0,0 +1,10 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}

core/misc/polyfills/nodelist.foreach.es6.js

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Provides a polyfill for NodeList.forEach().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}

core/misc/polyfills/nodelist.foreach.js

@@ -0,0 +1,10 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}

core/misc/polyfills/object.assign.es6.js

@@ -0,0 +1,42 @@
+/**
+ * @file
+ * Provides a polyfill for Object.assign().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (typeof Object.assign !== 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, 'assign', {
+    value: function assign(target, varArgs) {
+      // .length of function is 2
+      'use strict';
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true,
+  });
+}

core/misc/polyfills/object.assign.js

@@ -0,0 +1,36 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (typeof Object.assign !== 'function') {
+  Object.defineProperty(Object, 'assign', {
+    value: function assign(target, varArgs) {
+      'use strict';
+
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}

core/misc/polyfills/string.includes.es6.js

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Provides a polyfill for String.includes().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://web.archive.org/web/20210916035058/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+/* eslint-disable strict, lines-around-directive, no-extend-native */
+if (!String.prototype.includes) {
+  String.prototype.includes = function (search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) {
+      start = 0;
+    }
+    return this.indexOf(search, start) !== -1;
+  };
+}

core/misc/polyfills/string.includes.js

@@ -0,0 +1,22 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!String.prototype.includes) {
+  String.prototype.includes = function (search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+
+    if (start === undefined) {
+      start = 0;
+    }
+
+    return this.indexOf(search, start) !== -1;
+  };
+}

core/modules/block/block.libraries.yml

@@ -20,4 +20,5 @@ drupal.block.admin:
     - core/drupal.announce
     - core/drupal.debounce
     - core/drupal.dialog.ajax
+    - core/drupal.string.includes
     - core/once

core/modules/media_library/media_library.libraries.yml

@@ -23,6 +23,7 @@ widget:
     - core/drupal.dialog.ajax
     - core/once
     - core/sortable
+    - core/drupal.nodelist.foreach
 
 ui:
   version: VERSION

core/modules/responsive_image/js/responsive_image.ajax.es6.js

@@ -0,0 +1,12 @@
+(function (Drupal) {
+  /**
+   * Call picturefill so newly added responsive images are processed.
+   */
+  Drupal.behaviors.responsiveImageAJAX = {
+    attach() {
+      if (window.picturefill) {
+        window.picturefill();
+      }
+    },
+  };
+})(Drupal);

core/modules/responsive_image/js/responsive_image.ajax.js

@@ -0,0 +1,17 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+  Drupal.behaviors.responsiveImageAJAX = {
+    attach() {
+      if (window.picturefill) {
+        window.picturefill();
+      }
+    }
+
+  };
+})(Drupal);

core/modules/responsive_image/responsive_image.libraries.yml

@@ -0,0 +1,4 @@
+ajax:
+  version: VERSION
+  js:
+    js/responsive_image.ajax.js: {}

core/modules/responsive_image/responsive_image.module

@@ -29,7 +29,7 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
       $output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', [':responsive_image_style' => Url::fromRoute('entity.responsive_image_style.collection')->toString()]) . '</dd>';
       $output .= '<dl>';
       $output .= '<dt>' . t('Fallback image style') . '</dt>';
-      $output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. The fallback image should only appear on a site if an error occurs.') . '</dd>';
+      $output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. Because the responsive images module uses the Picturefill library so that responsive images can work in older browsers, the fallback image should only appear on a site if an error occurs.') . '</dd>';
       $output .= '<dt>' . t('Breakpoint groups: viewport sizing vs art direction') . '</dt>';
       $output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', [':breakpoint_help' => Url::fromRoute('help.page', ['name' => 'breakpoint'])->toString()]) . '</dd>';
       $output .= '<dt>' . t('Breakpoint settings: sizes vs image styles') . '</dt>';
@@ -191,7 +191,9 @@ function template_preprocess_responsive_image(&$variables) {
   else {
     $variables['output_image_tag'] = FALSE;
     // Prepare the fallback image. We use the src attribute, which might cause
-    // double downloads in browsers that don't support the picture tag.
+    // double downloads in browsers that don't support the picture tag (might,
+    // because when picturefill kicks in, it cancels the download and triggers
+    // the download for the correct image).
     $variables['img_element'] = [
       '#theme' => 'image',
       '#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),

core/modules/responsive_image/src/Element/ResponsiveImage.php

@@ -17,6 +17,9 @@ class ResponsiveImage extends RenderElement {
   public function getInfo() {
     return [
       '#theme' => 'responsive_image',
+      '#attached' => [
+        'library' => ['core/picturefill'],
+      ],
     ];
   }
 

core/modules/views_ui/views_ui.libraries.yml

@@ -24,6 +24,7 @@ views_ui.listing:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/drupal.string.includes
     - core/once
     - views_ui/admin.styling
 

core/package.json

@@ -70,7 +70,9 @@
     "ckeditor5": "34.1.x",
     "cross-env": "^7.0.2",
     "cspell": "^5.0.0",
+    "css.escape": "1.5.x",
     "dotenv-safe": "^8.2.0",
+    "es6-promise": "4.2.x",
     "eslint": "^8.9.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.4.0",
@@ -90,7 +92,9 @@
     "mkdirp": "^1.0.4",
     "nightwatch": "^2.1.3",
     "normalize.css": "8.0.x",
+    "picturefill": "3.0.x",
     "postcss": "^7.0.18",
+    "postcss-calc": "^7.0.1",
     "postcss-header": "^2.0.0",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",

core/postcss.config.js

@@ -9,6 +9,7 @@ module.exports = ctx => ({
         './themes/claro/css/src/base/variables.css'
       ]
     }),
+    require("postcss-calc"),
     require('autoprefixer')({
       cascade: false
     }),

core/scripts/css/compile.js

@@ -2,6 +2,7 @@ const chalk = require('chalk');
 const log = require('./log');
 const fs = require('fs');
 const postcss = require('postcss');
+const postcssCalc = require("postcss-calc");
 const postcssImport = require('postcss-import');
 const postcssHeader = require('postcss-header');
 const postcssUrl = require('postcss-url');
@@ -47,6 +48,7 @@ module.exports = (filePath, callback) => {
           'prefers-color-scheme-query': false,
         }
       }),
+      postcssCalc,
       postcssPixelsToRem({
           propList: [
             '*',

core/scripts/js/vendor-update.js

@@ -79,6 +79,22 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
       library: 'internal.backbone',
       files: ['backbone.js', 'backbone-min.js', 'backbone-min.map'],
     },
+    {
+      pack: 'css.escape',
+      folder: 'css-escape',
+      library: 'css.escape',
+      files: ['css.escape.js'],
+    },
+    {
+      pack: 'es6-promise',
+      files: [
+        { from: 'dist/es6-promise.auto.min.js', to: 'es6-promise.auto.min.js' },
+        {
+          from: 'dist/es6-promise.auto.min.map',
+          to: 'es6-promise.auto.min.map',
+        },
+      ],
+    },
     {
       pack: 'farbtastic',
       library: 'jquery.farbtastic',
@@ -126,6 +142,10 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
         { from: 'dist/once.min.js.map', to: 'once.min.js.map' },
       ],
     },
+    {
+      pack: 'picturefill',
+      files: [{ from: 'dist/picturefill.min.js', to: 'picturefill.min.js' }],
+    },
     {
       pack: '@popperjs/core',
       folder: 'popperjs',

core/themes/claro/claro.libraries.yml

@@ -242,6 +242,7 @@ form.password-confirm:
   js:
     js/user.theme.js: {}
   dependencies:
+    - core/drupal.object.assign
     - core/drupal
     - claro/global-styling
 

core/themes/claro/css/base/variables.css

@@ -88,7 +88,7 @@
   --font-family-serif: "Times New Roman", times, serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
-  --line-height-form-label: calc(18rem / 16); /* 18px */
+  --line-height-form-label: 1.125rem; /* 18px */
   --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
   --font-size-h1: 2.027rem; /* ~32px */
   --font-size-h2: 1.802rem; /* ~29px */
@@ -148,7 +148,7 @@
   --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
   --input-font-size: var(--font-size-base);
   --input-line-height: var(--space-l);
-  --input-padding-vertical--small: calc(var(--space-xs) - (var(--input-border-size) * 2));
+  --input-padding-vertical--small: calc(var(--space-xs) - var(--input-border-size)*2);
   --input-padding-horizontal--small: calc(var(--space-m) - var(--input-border-size));
   --input-font-size--small: var(--font-size-xs);
   --input-line-height--small: 1.3125rem;
@@ -212,12 +212,12 @@
   --jui-dialog-title-color: var(--color-white);
   --jui-dialog-title-bg-color: var(--color-text);
   --jui-dialog-title-font-size: var(--font-size-h4);
-  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
+  --jui-dialog-close-button-size: calc(var(--space-m)*2);
   --jui-dialog-close-button-border-radius: 50%;
-  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
+  --jui-dialog-close-button-reserved-space: calc(var(--space-m)*4);
-  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
+  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m)*3);
   --jui-dialog-border-radius: 0.25rem;
-  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4) var(--color-text);
+  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m)/-4) var(--color-text);
   --jui-dialog--focus-outline: 2px dotted transparent;
   --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
   --jui-dialog-z-index: 1260;
@@ -226,7 +226,7 @@
    * Progress bar.
    */
   --progress-bar-border-size: 1px;
-  --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
+  --progress-bar-small-size: calc(var(--space-xs) - var(--progress-bar-border-size)*2);
   --progress-bar-small-size-radius: var(--space-xs);
   --progress-bar-spacing-size: var(--space-xs);
   --progress-bar-transition: width 0.5s ease-out;
@@ -238,7 +238,7 @@
   /**
    * Tabledrag icon size.
    */
-  --tabledrag-handle-icon-size: calc(17rem / 16); /* 17px */
+  --tabledrag-handle-icon-size: 1.0625rem; /* 17px */
   /**
    * Ajax progress.
    */
@@ -257,10 +257,10 @@
   --vertical-tabs-border-size: 1px;
   --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
   --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
-  --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
+  --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-2);
-  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
+  --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size)*-1);
-  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-1);
-  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace)*-1);
   --vertical-tabs-menu-separator-color: var(--color-gray-200);
   --vertical-tabs-menu-separator-size: 1px;
   --vertical-tabs-menu-width: 20em;

core/themes/claro/css/components/action-link.css

@@ -50,7 +50,7 @@
 
 .action-link {
   display: inline-block;
-  padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
+  padding: calc(var(--space-m) - var(--space-l)/2 + var(--space-m)/2) var(--space-m);
   cursor: pointer;
   text-decoration: none;
   color: var(--color-gray-800);
@@ -65,7 +65,7 @@
 /* Small variant. */
 
 .no-touchevents .action-link--small {
-  padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
+  padding: calc(var(--space-s) - var(--space-l)/2 + var(--space-s)/2) var(--space-s);
   font-size: var(--font-size-s);
 }
 

core/themes/claro/css/components/autocomplete-loading.module.css

@@ -90,7 +90,7 @@ _:-ms-fullscreen,
   color: var(--color-link);
   font-size: var(--font-size-xxs); /* ~11px */
   font-weight: bold;
-  line-height: calc(18rem / 16); /* 18px */
+  line-height: 1.125rem; /* 18px */
 }
 
 [dir="rtl"] .claro-autocomplete__message {

core/themes/claro/css/components/button.css

@@ -87,7 +87,7 @@
 
 .no-touchevents .button--extrasmall {
   margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
-  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
+  padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px); /* 1 */
   font-size: var(--font-size-xs);
 }
 

core/themes/claro/css/components/details.css

@@ -37,7 +37,7 @@
 
 :root {
   --size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
-  --summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
+  --summary-accordion-padding-vertical: calc(var(--space-l) + var(--space-m)/2 - var(--space-l)/2);
   --summary-accordion-line-height: var(--space-l);
 }
 
@@ -148,7 +148,7 @@
   display: inline-block;
   width: var(--space-m);
   height: var(--space-m);
-  margin-top: calc(var(--space-m) / -2);
+  margin-top: calc(var(--space-m)/-2);
   content: "";
   transition: transform var(--details-transform-transition-duration) ease-in 0s;
   transform: rotate(90deg); /* LTR */
@@ -298,7 +298,7 @@
 
   .claro-details[open] > .claro-details__summary::before,
   [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
-    margin-top: calc(0.125rem / -2);
+    margin-top: -0.0625rem;
     margin-right: 0.125rem;
     transform: rotate(-45deg); /* for LTR and RTL */
     background: none;
@@ -451,7 +451,7 @@
   margin-bottom: var(--space-m);
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
-  line-height: calc(17rem / 16); /* 17px */
+  line-height: 1.0625rem; /* 17px */
 }
 
 .claro-details__description.is-disabled {

core/themes/claro/css/components/dialog.css

@@ -41,7 +41,7 @@
   border-top-left-radius: var(--jui-dialog-border-radius);
   border-top-right-radius: var(--jui-dialog-border-radius);
   background: var(--jui-dialog-title-bg-color);
-  line-height: calc(var(--space-m) * 2);
+  line-height: calc(var(--space-m)*2);
 }
 
 [dir="rtl"] .ui-dialog .ui-dialog-titlebar {

core/themes/claro/css/components/dropbutton.css

@@ -30,12 +30,12 @@
   --dropbutton-small-spacing-size: 0.625rem;
   --dropbutton-small-font-size: var(--font-size-xs);
   --dropbutton-small-line-height: 0.75rem;
-  --dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
+  --dropbutton-small-toggle-size: calc(var(--dropbutton-small-spacing-size)*2 + var(--dropbutton-small-line-height));
   /* Variant variables: extra small. */
   --dropbutton-extrasmall-spacing-size: 0.375rem;
   --dropbutton-extrasmall-font-size: var(--font-size-xs);
   --dropbutton-extrasmall-line-height: 0.75rem;
-  --dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
+  --dropbutton-extrasmall-toggle-size: calc(var(--dropbutton-extrasmall-spacing-size)*2 + var(--dropbutton-extrasmall-line-height));
 }
 
 .dropbutton-wrapper {
@@ -212,7 +212,7 @@
   .dropbutton__toggle::before {
     width: 0.5625rem;
     height: 0.5625rem;
-    margin-top: calc(0.5625rem / (2 * -1.41429));
+    margin-top: -0.19886rem;
     transform: translate(50%, -50%) rotate(135deg); /* LTR */
     border: 0.125rem solid;
     border-width: 0.125rem 0.125rem 0 0;
@@ -220,7 +220,7 @@
   }
 
   .dropbutton-wrapper.open .dropbutton__toggle::before {
-    margin-top: calc(0.5625rem / (2 * 1.41429));
+    margin-top: 0.19886rem;
     transform: translate(50%, -50%) rotate(315deg);
   }
   [dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
@@ -233,11 +233,11 @@
   .no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
     width: 0.4375rem;
     height: 0.4375rem;
-    margin-top: calc(0.4375rem / (2 * -1.41429));
+    margin-top: -0.15467rem;
   }
 
   .dropbutton-wrapper.open .dropbutton__toggle::before {
-    margin-top: calc(0.4375rem / (2 * 1.41429));
+    margin-top: 0.15467rem;
   }
 }
 

core/themes/claro/css/components/fieldset.css

@@ -63,10 +63,10 @@ _:-ms-fullscreen,
   float: none;
   width: auto;
   margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
-  margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+  margin-bottom: calc(var(--space-xs)/2); /* 4px */
   color: inherit;
   font-size: var(--font-size-s); /* 14px */
-  line-height: calc(18rem / 16); /* 18px */
+  line-height: 1.125rem; /* 18px */
 }
 
 /* This is used only on install configure form. */
@@ -103,11 +103,11 @@ _:-ms-fullscreen,
 }
 
 .fieldset__description {
-  margin-top: calc(6rem / 16); /* 6px */
+  margin-top: 0.375rem; /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-bottom: 0.375rem; /* 6px */
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
-  line-height: calc(17rem / 16); /* 17px */
+  line-height: 1.0625rem; /* 17px */
 }
 
 .fieldset__description.is-disabled {
@@ -117,12 +117,12 @@ _:-ms-fullscreen,
 /* Error message (Inline form errors). */
 
 .fieldset__error-message {
-  margin-top: calc(6rem / 16); /* 6px */
+  margin-top: 0.375rem; /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-bottom: 0.375rem; /* 6px */
   color: var(--input--error-color);
   font-size: var(--font-size-xs); /* ~13px */
   font-weight: normal;
-  line-height: calc(17rem / 16); /* 17px */
+  line-height: 1.0625rem; /* 17px */
 }
 
 .fieldset__wrapper {

core/themes/claro/css/components/file.css

@@ -16,7 +16,7 @@
   background-position: left 0.0625rem;
   background-size: var(--space-m) var(--space-m);
   font-size: var(--font-size-s);
-  line-height: calc(18rem / 16);
+  line-height: 1.125rem;
 }
 
 [dir="rtl"] .file {

core/themes/claro/css/components/form--checkbox-radio.css

@@ -30,15 +30,15 @@
 
 .form-type--boolean .form-boolean {
   position: relative;
-  top: calc(var(--space-l) / 2);
+  top: calc(var(--space-l)/2);
   float: left; /* LTR */
-  margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
+  margin-left: calc(var(--input--label-spacing)*-1); /* LTR */
   transform: translateY(-50%);
 }
 
 [dir="rtl"] .form-type--boolean .form-boolean {
   float: right;
-  margin-right: calc(var(--input--label-spacing) * -1);
+  margin-right: calc(var(--input--label-spacing)*-1);
   margin-left: 0;
 }
 

core/themes/claro/css/components/form--password-confirm.css

@@ -93,7 +93,7 @@
 .password-strength__bar {
   min-width: var(--progress-bar-small-size);
   height: var(--progress-bar-small-size);
-  margin: calc(var(--progress-bar-border-size) * -1);
+  margin: calc(var(--progress-bar-border-size)*-1);
   transition: var(--progress-bar-transition);
   border: var(--progress-bar-border-size) solid transparent;
   border-radius: var(--progress-bar-small-size-radius);

core/themes/claro/css/components/form--text.css

@@ -13,7 +13,7 @@
 .form-element {
   box-sizing: border-box;
   max-width: 100%;
-  min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
+  min-height: calc(var(--input-padding-vertical)*2 + var(--input-border-size)*2 + var(--input-line-height)); /* iOS. */
   padding: var(--input-padding-vertical) var(--input-padding-horizontal);
   color: var(--input-fg-color);
   border: var(--input-border-size) solid var(--input-border-color);
@@ -27,7 +27,7 @@
 
 .no-touchevents .form-element--extrasmall,
 .no-touchevents .form-element[name$="][_weight]"] {
-  min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
+  min-height: calc(var(--input--extrasmall-padding-vertical)*2 + var(--input-border-size)*2 + var(--input--extrasmall-line-height)); /* iOS. */
   padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
   font-size: var(--input--extrasmall-font-size);
   line-height: var(--input--extrasmall-line-height);

core/themes/claro/css/components/form.css

@@ -48,8 +48,8 @@ tr .form-item,
 
 .form-item__label {
   display: table;
-  margin-top: calc(var(--space-xs) / 2); /* 4px */
+  margin-top: calc(var(--space-xs)/2); /* 4px */
-  margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+  margin-bottom: calc(var(--space-xs)/2); /* 4px */
   font-size: var(--font-size-s); /* ~14px */
   font-weight: bold;
   line-height: var(--line-height-form-label);
@@ -102,11 +102,11 @@ tr .form-item,
  */
 
 .form-item__description {
-  margin-top: calc(6rem / 16); /* 6px */
+  margin-top: 0.375rem; /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-bottom: 0.375rem; /* 6px */
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
-  line-height: calc(17rem / 16); /* 17px */
+  line-height: 1.0625rem; /* 17px */
 }
 
 /* Description states. */
@@ -120,12 +120,12 @@ tr .form-item,
  */
 
 .form-item__error-message {
-  margin-top: calc(6rem / 16); /* 6px */
+  margin-top: 0.375rem; /* 6px */
-  margin-bottom: calc(6rem / 16); /* 6px */
+  margin-bottom: 0.375rem; /* 6px */
   color: var(--input--error-color);
   font-size: var(--font-size-xs); /* ~13px */
   font-weight: normal;
-  line-height: calc(17rem / 16); /* 17px */
+  line-height: 1.0625rem; /* 17px */
 }
 
 .form-item__prefix.is-disabled,

core/themes/claro/css/components/image-preview.css

@@ -12,7 +12,7 @@
 
 :root {
   --color-pattern: var(--color-gray-200);
-  --size-pattern-square: calc(7rem / 16);
+  --size-pattern-square: 0.4375rem;
 }
 
 /**
@@ -41,7 +41,7 @@
     var(--size-pattern-square) var(--size-pattern-square),
     var(--size-pattern-square) var(--size-pattern-square),
     0 0;
-  background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
+  background-size: calc(var(--size-pattern-square)*2) calc(var(--size-pattern-square)*2);
 }
 
 @media screen and (-ms-high-contrast: active) {

core/themes/claro/css/components/pager.css

@@ -47,8 +47,8 @@
 
 .pager__item {
   display: inline-block;
-  margin-right: calc(var(--space-xs) / 2);
+  margin-right: calc(var(--space-xs)/2);
-  margin-left: calc(var(--space-xs) / 2);
+  margin-left: calc(var(--space-xs)/2);
   vertical-align: top;
 }
 
@@ -161,8 +161,8 @@
 }
 
 .pager__item--mini {
-  margin-right: calc(var(--space-m) / 2);
+  margin-right: calc(var(--space-m)/2);
-  margin-left: calc(var(--space-m) / 2);
+  margin-left: calc(var(--space-m)/2);
 }
 
 .pager__link--mini {

core/themes/claro/css/components/progress.css

@@ -17,7 +17,7 @@
   --progress-bar-border-color: var(--color-absolutezero);
   --progress-bar-label-font-size: var(--font-size-base);
   --progress-bar-small-label-font-size: var(--font-size-label);
-  --progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
+  --progress-bar-default-size: calc(var(--space-m) - var(--progress-bar-border-size)*2);
   --progress-bar-default-size-radius: var(--space-m);
 }
 
@@ -53,8 +53,8 @@
   width: var(--progress-bar-default-size);
   min-width: var(--progress-bar-default-size);
   height: var(--progress-bar-default-size);
-  margin-top: calc(var(--progress-bar-border-size) * -1);
+  margin-top: calc(var(--progress-bar-border-size)*-1);
-  margin-left: calc(var(--progress-bar-border-size) * -1); /* LTR */
+  margin-left: calc(var(--progress-bar-border-size)*-1); /* LTR */
   transition: var(--progress-bar-transition);
   border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
   border-radius: var(--progress-bar-default-size-radius);
@@ -62,7 +62,7 @@
 }
 
 [dir="rtl"] .progress__bar {
-  margin-right: calc(var(--progress-bar-border-size) * -1);
+  margin-right: calc(var(--progress-bar-border-size)*-1);
   margin-left: 0;
 }
 

core/themes/claro/css/components/shortcut.css

@@ -16,7 +16,7 @@
   */
   --shortcut-bg-color: var(--color-gray-800);
   --shortcut-border-radius-size: var(--base-border-radius);
-  --shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
+  --shortcut-padding-size: calc(var(--space-xs)*0.5) var(--space-m);
   --shortcut-icon-size: var(--space-l);
 }
 
@@ -38,7 +38,7 @@
   margin-left: var(--space-s); /* LTR */
   padding: var(--shortcut-padding-size);
   transition: var(--transition);
-  transform: translateY(calc(-1 * var(--space-xs)));
+  transform: translateY(calc(var(--space-xs)*-1));
   vertical-align: top;
   opacity: 0;
   color: var(--color-white);
@@ -65,7 +65,7 @@
   width: var(--shortcut-icon-size);
   height: var(--shortcut-icon-size);
   vertical-align: -0.0625rem;
-  background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
+  background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size)*4) var(--shortcut-icon-size) no-repeat;
 }
 
 [dir="rtl"] .shortcut-action__icon {
@@ -74,14 +74,14 @@
 
 .shortcut-action--add:hover .shortcut-action__icon,
 .shortcut-action--add:focus .shortcut-action__icon {
-  background-position: calc(-1 * var(--shortcut-icon-size)) top;
+  background-position: calc(var(--shortcut-icon-size)*-1) top;
 }
 
 .shortcut-action--remove .shortcut-action__icon {
-  background-position: calc(-2 * var(--shortcut-icon-size)) top;
+  background-position: calc(var(--shortcut-icon-size)*-2) top;
 }
 
 .shortcut-action--remove:focus .shortcut-action__icon,
 .shortcut-action--remove:hover .shortcut-action__icon {
-  background-position: calc(-3 * var(--shortcut-icon-size)) top;
+  background-position: calc(var(--shortcut-icon-size)*-3) top;
 }

core/themes/claro/css/components/system-admin--admin-list.css

@@ -38,7 +38,7 @@
 }
 
 .admin-item:not(:last-child) {
-  border-bottom: calc(1em / 16) solid var(--color-gray-200);
+  border-bottom: 0.0625em solid var(--color-gray-200);
 }
 
 .admin-item__title {

core/themes/claro/css/components/system-admin--modules.css

@@ -12,7 +12,7 @@
 
 :root {
   --module-table-cell-padding-vertical: var(--space-m);
-  --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
+  --module-table-cell-padding-horizontal: calc(var(--space-m) - var(--input-border-size)*2);
 }
 
 .modules-table-filter {
@@ -147,7 +147,7 @@ td.module-list__description {
 .module-details__links {
   position: relative;
   /* Negative margin matches the value of action link's top padding. */
-  margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
+  margin-top: calc(var(--space-s)*-1 - var(--space-l)/2*-1 + var(--space-s)/2*-1);
   margin-bottom: var(--space-m);
 }
 
@@ -169,7 +169,7 @@ td.module-list__description {
   position: relative;
   top: -1px;
   display: inline-block;
-  width: calc(var(--space-m) * 2);
+  width: calc(var(--space-m)*2);
   height: 1.25rem;
   content: "";
   cursor: pointer;

core/themes/claro/css/components/system-admin--panel.css

@@ -14,15 +14,15 @@
   margin-top: 1em;
   margin-bottom: 3em;
   padding: 0;
-  border-bottom: calc(1em / 16) solid var(--color-gray-200);
+  border-bottom: 0.0625em solid var(--color-gray-200);
 }
 
 .panel__title {
   margin: 0;
-  padding: calc(12em / 18) calc(24em / 18);
+  padding: 0.66667em 1.33333em;
   background: var(--color-gray-050);
-  font-size: calc(18em / 16);
+  font-size: 1.125em;
-  line-height: calc(24em / 18);
+  line-height: 1.33333em;
 }
 
 .panel__content,

core/themes/claro/css/components/table--file-multiple-widget.css

@@ -38,7 +38,7 @@
 
 .table-file-multiple-widget .tabledrag-changed {
   float: left; /* LTR */
-  line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--space-xs) * 2));
+  line-height: calc(var(--tabledrag-handle-icon-size) + var(--space-xs)*2);
 }
 
 [dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
@@ -46,7 +46,7 @@
 }
 
 .table-file-multiple-widget td {
-  height: calc(var(--space-m) * 3);
+  height: calc(var(--space-m)*3);
 }
 
 .table-file-multiple-widget td > :first-child {
@@ -62,7 +62,7 @@
 }
 
 .table-file-multiple-widget th {
-  height: calc(var(--space-m) * 2);
+  height: calc(var(--space-m)*2);
   color: var(--color-gray-800);
   background: var(--color-gray-050);
   font-size: var(--font-size-s);
@@ -79,7 +79,7 @@
 }
 
 .table-file-multiple-widget .checkbox .form-type--boolean {
-  line-height: calc(var(--space-m) * 3);
+  line-height: calc(var(--space-m)*3);
 }
 
 .no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
@@ -110,8 +110,8 @@
 
 @media screen and (max-width: 37.5em) {
   .claro-details__wrapper .file-widget-multiple__table-wrapper {
-    margin-right: calc(var(--space-m) * -1);
+    margin-right: calc(var(--space-m)*-1);
-    margin-left: calc(var(--space-m) * -1);
+    margin-left: calc(var(--space-m)*-1);
   }
 
   .claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {

core/themes/claro/css/components/tabledrag.css

@@ -58,11 +58,11 @@ body.drag {
 
 .draggable .tabledrag-changed {
   position: relative;
-  left: calc(var(--space-xs) * -1); /* LTR */
+  left: calc(var(--space-xs)*-1); /* LTR */
 }
 
 [dir="rtl"] .draggable .tabledrag-changed {
-  right: calc(var(--space-xs) * -1); /* LTR */
+  right: calc(var(--space-xs)*-1); /* LTR */
   left: auto;
 }
 
@@ -124,7 +124,7 @@ body.drag {
   display: inline-block;
   width: var(--tabledrag-handle-icon-size);
   height: var(--tabledrag-handle-icon-size);
-  margin-left: calc(var(--space-m) * -1); /* LTR */
+  margin-left: calc(var(--space-m)*-1); /* LTR */
   padding: var(--space-xs) var(--space-m);
   content: "";
   transition: transform 0.1s ease-in-out 0s;
@@ -132,7 +132,7 @@ body.drag {
 }
 
 [dir="rtl"] .tabledrag-handle::after {
-  margin-right: calc(var(--space-m) * -1);
+  margin-right: calc(var(--space-m)*-1);
   margin-left: 0;
 }
 
@@ -174,9 +174,9 @@ body.drag {
 
 .tabledrag-handle:focus::before {
   display: block;
-  width: calc(var(--space-m) + (var(--space-xs) * 2)); /* Same as height. */
+  width: calc(var(--space-m) + var(--space-xs)*2); /* Same as height. */
-  height: calc(var(--space-m) + (var(--space-xs) * 2)); /* Hande svg height + its vertical padding */
+  height: calc(var(--space-m) + var(--space-xs)*2); /* Hande svg height + its vertical padding */
-  margin: 0 calc(var(--space-xs) * -1) calc((var(--space-m) + (var(--space-xs) * 2)) * -1); /* Bottom: handle height as negative value. */
+  margin: 0 calc(var(--space-xs)*-1) calc(var(--space-m)*-1 + var(--space-xs)*2*-1); /* Bottom: handle height as negative value. */
   content: "";
   border-radius: var(--base-border-radius);
   outline: var(--outline-size) dotted transparent;
@@ -317,16 +317,16 @@ body.drag {
 
 .indentation {
   position: relative;
-  left: calc(var(--space-xs) * -0.5); /* LTR */
+  left: calc(var(--space-xs)*-0.5); /* LTR */
   float: left; /* LTR */
-  width: calc(25rem / 16); /* 25px */
+  width: 1.5625rem; /* 25px */
-  height: calc(25rem / 16); /* 25px */
+  height: 1.5625rem; /* 25px */
   background: none !important;
   line-height: 0;
 }
 
 [dir="rtl"] .indentation {
-  right: calc(var(--space-xs) * -0.5);
+  right: calc(var(--space-xs)*-0.5);
   left: auto;
   float: right;
 }
@@ -340,8 +340,8 @@ body.drag {
  */
 
 .tree {
-  width: calc(25rem / 16); /* 25px */
+  width: 1.5625rem; /* 25px */
-  height: calc(25rem / 16); /* 25px */
+  height: 1.5625rem; /* 25px */
 }
 
 .tree__item {

core/themes/claro/css/components/tables.css

@@ -302,7 +302,7 @@ td.priority-medium {
 
 .tabledrag-toggle-weight-wrapper {
   margin-top: var(--space-l);
-  line-height: calc(28rem / 16);
+  line-height: 1.75rem;
 }
 
 .tabledrag-toggle-weight-wrapper + table,

core/themes/claro/css/components/tabs.css

@@ -161,7 +161,7 @@
 }
 
 .tabs__tab.is-active:focus::before {
-  top: calc(var(--tabs--focus-height) * -1);
+  top: calc(var(--tabs--focus-height)*-1);
   height: calc(var(--tabs-link-height) + 2px);
 }
 
@@ -219,7 +219,7 @@
 
   .is-horizontal .tabs--secondary {
     overflow: hidden;
-    margin: calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) 0;
+    margin: calc(var(--tabs--focus-height)*-1 + -0.1875rem) calc(var(--tabs--focus-height)*-1 + -0.1875rem) 0;
     padding: calc(var(--tabs--focus-height) + 0.1875rem) calc(var(--tabs--focus-height) + 0.1875rem) 0;
     border-radius: 0;
   }

core/themes/claro/css/components/vertical-tabs.css

@@ -77,7 +77,7 @@
   z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
   display: block;
   width: 100%;
-  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
+  margin-top: calc(var(--vertical-tabs-menu-separator-size)*-1);
   border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
 }
 
@@ -129,7 +129,7 @@
 .vertical-tabs__menu-link {
   position: relative;
   display: block;
-  margin-top: calc(var(--vertical-tabs-border-size) * -1);
+  margin-top: calc(var(--vertical-tabs-border-size)*-1);
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
   text-decoration: none;
   word-wrap: break-word;
@@ -172,17 +172,17 @@
 .vertical-tabs__menu-link::before {
   position: absolute;
   z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
-  top: calc(var(--vertical-tabs-border-size) * -1);
+  top: calc(var(--vertical-tabs-border-size)*-1);
   right: 0; /* LTR */
-  bottom: calc(var(--vertical-tabs-border-size) * -1);
+  bottom: calc(var(--vertical-tabs-border-size)*-1);
-  left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
+  left: calc(var(--vertical-tabs-menu-link--active-border-size)*-1); /* LTR */
   content: "";
   pointer-events: none;
   background-clip: padding-box;
 }
 
 [dir="rtl"] .vertical-tabs__menu-link::before {
-  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  right: calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
   left: 0;
 }
 
@@ -196,7 +196,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
   content: "";
   pointer-events: none;
   border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
@@ -316,7 +316,7 @@
 
 .vertical-tabs__item {
   /* Render on top of the border of vertical-tabs__items. */
-  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-border-size) * -1) 0;
+  margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-border-size)*-1) 0;
   border-radius: 0;
 }
 
@@ -326,7 +326,7 @@
 }
 
 .vertical-tabs__item.last {
-  margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
+  margin-bottom: calc(var(--vertical-tabs-border-size)*-1);
   border-bottom-right-radius: var(--details-accordion-border-size-radius);
   border-bottom-left-radius: var(--details-accordion-border-size-radius);
 }

core/themes/claro/css/components/views-ui.css

@@ -99,14 +99,14 @@ details.fieldset-no-legend {
 }
 
 .views-ui-dialog .form-element {
-  min-height: calc(((var(--input-padding-vertical--small) + var(--input-border-size)) * 2) + var(--input-line-height--small)); /* iOS. */
+  min-height: calc(var(--input-padding-vertical--small)*2 + var(--input-border-size)*2 + var(--input-line-height--small)); /* iOS. */
   padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
   font-size: var(--input-font-size--small);
   line-height: var(--input-line-height--small);
 }
 
 .views-ui-dialog .form-element--type-select {
-  padding-right: calc((var(--space-m) * 2) + var(--input-border-size) * 2);
+  padding-right: calc(var(--space-m)*2 + var(--input-border-size)*2);
   background-position: 100% 56%;
 }
 
@@ -184,7 +184,7 @@ details.fieldset-no-legend {
 }
 
 .views-display-top__extra-actions-wrapper {
-  margin: calc(var(--space-xs) / 2) var(--space-xs) var(--space-xs);
+  margin: calc(var(--space-xs)/2) var(--space-xs) var(--space-xs);
 }
 
 /* @end */
@@ -320,7 +320,7 @@ details.fieldset-no-legend {
 .views-tabs .add a::before {
   display: inline-block;
   width: 1em;
-  height: calc(1em - (var(--input-border-size) * 2));
+  height: calc(1em - var(--input-border-size)*2);
   content: "";
   /* Copy of icon from .action-link--icon-plus */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' stroke-width='2' stroke='%23545560'%3E%3Cpath d='m3 8h10'/%3E%3Cpath d='m8 3v10'/%3E%3C/svg%3E");
@@ -686,6 +686,6 @@ details.fieldset-no-legend {
   }
   [dir="rtl"] .views-display-top__extra-actions-wrapper {
     margin-right: auto;
-    margin-left: calc(var(--space-xs) / 2);
+    margin-left: calc(var(--space-xs)/2);
   }
 }

core/themes/claro/css/layout/card-list.css

@@ -13,9 +13,9 @@
 :root {
   --card-list-spacing: var(--space-m);
   /* Using 100% as base causes issues in IE11. */
-  --cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
+  --cards-two-cols-width: calc(49.95% + var(--card-list-spacing)/2 - var(--card-list-spacing));
-  --cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
+  --cards-three-cols-width: calc(33.3% + var(--card-list-spacing)/3 - var(--card-list-spacing));
-  --cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
+  --cards-four-cols-width: calc(24.975% + var(--card-list-spacing)/4 - var(--card-list-spacing));
 }
 
 .card-list {

core/themes/claro/css/layout/local-actions.css

@@ -28,7 +28,7 @@
 
 .local-actions__item {
   display: inline-block;
-  margin: 0 calc(var(--space-xs) / 2);
+  margin: 0 calc(var(--space-xs)/2);
 }
 
 .local-actions__item:first-child {
@@ -37,7 +37,7 @@
 
 [dir="rtl"] .local-actions__item:first-child {
   margin-right: 0;
-  margin-left: calc(var(--space-xs) / 2);
+  margin-left: calc(var(--space-xs)/2);
 }
 
 .local-actions__item:last-child {
@@ -45,7 +45,7 @@
 }
 
 [dir="rtl"] .local-actions__item:last-child {
-  margin-right: calc(var(--space-xs) / 2);
+  margin-right: calc(var(--space-xs)/2);
   margin-left: 0;
 }
 

core/themes/claro/css/theme/media-library.css

@@ -61,7 +61,7 @@
   z-index: var(--vertical-tabs-menu--z-index); /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
   display: block;
   width: 100%;
-  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
+  margin-top: calc(var(--vertical-tabs-menu-separator-size)*-1);
   content: "";
   border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
 }
@@ -69,7 +69,7 @@
 .media-library-menu__link {
   position: relative;
   display: block;
-  margin-top: calc(var(--vertical-tabs-border-size) * -1);
+  margin-top: calc(var(--vertical-tabs-border-size)*-1);
   padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
   text-decoration: none;
   word-wrap: break-word;
@@ -116,17 +116,17 @@
 .media-library-menu__link::before {
   position: absolute;
   z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* This should be on a lower level than the menu-item separator lines. */
-  top: calc(var(--vertical-tabs-border-size) * -1);
+  top: calc(var(--vertical-tabs-border-size)*-1);
   right: 0; /* LTR */
-  bottom: calc(var(--vertical-tabs-border-size) * -1);
+  bottom: calc(var(--vertical-tabs-border-size)*-1);
-  left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
+  left: calc(var(--vertical-tabs-menu-link--active-border-size)*-1); /* LTR */
   content: "";
   pointer-events: none;
   background-clip: padding-box;
 }
 
 [dir="rtl"] .media-library-menu__link::before {
-  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  right: calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
   left: 0;
 }
 
@@ -136,7 +136,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  margin: calc(var(--vertical-tabs-border-size)*-1) calc(var(--vertical-tabs-menu-link--active-border-size)*-1);
   content: "";
   pointer-events: none;
   border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
@@ -217,7 +217,7 @@
 .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
   margin: var(--space-xs) 0; /* LTR */
   /* Left padding is double the background size of the button icon. */
-  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
+  padding: calc(var(--space-xs)/2 - 1px) calc(var(--space-s) - 1px) calc(var(--space-xs)/2 - 1px) calc(var(--space-s)*2);
 }
 
 /* This is needed to override the default extrasmall button left margin. */
@@ -259,10 +259,10 @@
 
 @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .ui-dialog > .ui-dialog-content {
-    padding-right: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+    padding-right: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
   }
   [dir="rtl"] .ui-dialog > .ui-dialog-content {
-    padding-left: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+    padding-left: calc(var(--space-s) - var(--focus-border-size) - var(--focus-border-offset-size) - 2px);
   }
 }
 
@@ -702,7 +702,7 @@
 .media-library-item__name {
   display: block;
   overflow: hidden;
-  margin: calc(var(--space-xs) / 2) var(--space-xs);
+  margin: calc(var(--space-xs)/2) var(--space-xs);
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 0.875rem;

core/themes/olivero/css/base/variables.css

@@ -71,7 +71,7 @@
   --grid-gap: var(--sp);
   --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
   --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
-  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */
+  --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count)); /* Width of a grid column. */
 }
 
 @media (min-width: 43.75rem) {
@@ -106,23 +106,23 @@
 :root {
 
   /* Layout helpers */
-  --sp0-25: calc(0.25 * var(--sp));
+  --sp0-25: calc(var(--sp)*0.25);
-  --sp0-5: calc(0.5 * var(--sp));
+  --sp0-5: calc(var(--sp)*0.5);
-  --sp0-75: calc(0.75 * var(--sp));
+  --sp0-75: calc(var(--sp)*0.75);
-  --sp1: calc(1 * var(--sp));
+  --sp1: calc(var(--sp)*1);
-  --sp1-5: calc(1.5 * var(--sp));
+  --sp1-5: calc(var(--sp)*1.5);
-  --sp2: calc(2 * var(--sp));
+  --sp2: calc(var(--sp)*2);
-  --sp2-5: calc(2.5 * var(--sp));
+  --sp2-5: calc(var(--sp)*2.5);
-  --sp3: calc(3 * var(--sp));
+  --sp3: calc(var(--sp)*3);
-  --sp4: calc(4 * var(--sp));
+  --sp4: calc(var(--sp)*4);
-  --sp5: calc(5 * var(--sp));
+  --sp5: calc(var(--sp)*5);
-  --sp6: calc(6 * var(--sp));
+  --sp6: calc(var(--sp)*6);
-  --sp7: calc(7 * var(--sp));
+  --sp7: calc(var(--sp)*7);
-  --sp8: calc(8 * var(--sp));
+  --sp8: calc(var(--sp)*8);
-  --sp9: calc(9 * var(--sp));
+  --sp9: calc(var(--sp)*9);
-  --sp10: calc(10 * var(--sp));
+  --sp10: calc(var(--sp)*10);
-  --sp11: calc(11 * var(--sp));
+  --sp11: calc(var(--sp)*11);
-  --sp12: calc(12 * var(--sp));
+  --sp12: calc(var(--sp)*12);
 
   /**
    * Gray colors.
@@ -150,10 +150,10 @@
   --color--primary-hue: 202;
   --color--primary-saturation: 79%;
   --color--primary-lightness: 50;
-  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
+  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.36)));
-  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
+  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.24))); /* Blue dark */
-  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
+  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*var(--color--primary-lightness))); /* Blue medium */
-  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) + 24 - var(--color--primary-lightness)*0.24))); /* Blue bright */
 
   /**
    * Named Colors.
@@ -165,7 +165,7 @@
   --color--green: #3fa21c; /* Green */
 
   /* Header */
-  --header-height-wide-when-fixed: calc(6 * var(--sp));
+  --header-height-wide-when-fixed: calc(var(--sp)*6);
 
   /* Width of slide out navigation */
   --mobile-nav-width: 31.25rem;

core/themes/olivero/css/components/breadcrumb.css

@@ -33,11 +33,11 @@
 }
 
 [dir="ltr"] .breadcrumb:after {
-    right: calc(var(--sp1) * -1)
+    right: calc(var(--sp1)*-1)
 }
 
 [dir="rtl"] .breadcrumb:after {
-    left: calc(var(--sp1) * -1)
+    left: calc(var(--sp1)*-1)
 }
 
 .breadcrumb:after {
@@ -68,19 +68,19 @@
 }
 
 [dir="ltr"] .breadcrumb__content {
-  margin-left: calc(var(--sp0-5) * -1)
+  margin-left: calc(var(--sp0-5)*-1)
 }
 
 [dir="rtl"] .breadcrumb__content {
-  margin-right: calc(var(--sp0-5) * -1)
+  margin-right: calc(var(--sp0-5)*-1)
 }
 
 [dir="ltr"] .breadcrumb__content {
-  margin-right: calc(var(--sp1) * -1)
+  margin-right: calc(var(--sp1)*-1)
 }
 
 [dir="rtl"] .breadcrumb__content {
-  margin-left: calc(var(--sp1) * -1)
+  margin-left: calc(var(--sp1)*-1)
 }
 
 [dir="ltr"] .breadcrumb__content {
@@ -93,8 +93,8 @@
 
 .breadcrumb__content {
   overflow: auto;
-  margin-top: calc(var(--sp0-5) * -1);
+  margin-top: calc(var(--sp0-5)*-1);
-  margin-bottom: calc(var(--sp0-5) * -1);
+  margin-bottom: calc(var(--sp0-5)*-1);
   padding-top: var(--sp0-5);
   padding-bottom: var(--sp0-5);
   -webkit-overflow-scrolling: touch
@@ -112,19 +112,19 @@
   }
 
 [dir="ltr"] .breadcrumb__list {
-  margin-left: calc(var(--sp1) * -1)
+  margin-left: calc(var(--sp1)*-1)
 }
 
 [dir="rtl"] .breadcrumb__list {
-  margin-right: calc(var(--sp1) * -1)
+  margin-right: calc(var(--sp1)*-1)
 }
 
 [dir="ltr"] .breadcrumb__list {
-  margin-right: calc(var(--sp1) * -1)
+  margin-right: calc(var(--sp1)*-1)
 }
 
 [dir="rtl"] .breadcrumb__list {
-  margin-left: calc(var(--sp1) * -1)
+  margin-left: calc(var(--sp1)*-1)
 }
 
 [dir="ltr"] .breadcrumb__list {

core/themes/olivero/css/components/button.css

@@ -44,8 +44,8 @@
   height: var(--sp3);
   margin-top: var(--sp1);
   margin-bottom: var(--sp1);
-  padding-top: calc((var(--sp3) - var(--line-height-s)) / 2);
+  padding-top: calc(var(--sp3)/2 - var(--line-height-s)/2);
-  padding-bottom: calc((var(--sp3) - var(--line-height-s)) / 2);
+  padding-bottom: calc(var(--sp3)/2 - var(--line-height-s)/2);
   padding-left: var(--sp1-5);
   padding-right: var(--sp1-5);
   cursor: pointer;
@@ -137,8 +137,8 @@
 
 .button--small {
   height: var(--sp2-5);
-  padding-top: calc((var(--sp2-5) - var(--line-height-s)) / 2);
+  padding-top: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
-  padding-bottom: calc((var(--sp2-5) - var(--line-height-s)) / 2);
+  padding-bottom: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
   padding-left: var(--sp);
   padding-right: var(--sp);
   font-size: var(--font-size-base);

core/themes/olivero/css/components/comments.css

@@ -241,12 +241,12 @@
 
 [dir="ltr"] .add-comment__picture,[dir="ltr"] 
 .comment__picture {
-    left: calc(-1 * var(--sp5));
+    left: calc(var(--sp5)*-1);
   }
 
 [dir="rtl"] .add-comment__picture,[dir="rtl"] 
 .comment__picture {
-    right: calc(-1 * var(--sp5));
+    right: calc(var(--sp5)*-1);
   }
 
 .add-comment__picture,
@@ -259,11 +259,11 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .indented .comment__picture {
-    left: calc(-1 * var(--sp4));
+    left: calc(var(--sp4)*-1);
   }
 
 [dir="rtl"] .indented .comment__picture {
-    right: calc(-1 * var(--sp4));
+    right: calc(var(--sp4)*-1);
   }
 
 .indented .comment__picture {
@@ -312,11 +312,11 @@
 }
 
 [dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
-    left: calc(-1 * var(--comment-indentation) - var(--sp));
+    left: calc(var(--comment-indentation)*-1 - var(--sp));
 }
 
 [dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
-    right: calc(-1 * var(--comment-indentation) - var(--sp));
+    right: calc(var(--comment-indentation)*-1 - var(--sp));
 }
 
 [dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
@@ -338,11 +338,11 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
-      left: calc(-1 * var(--comment-indentation--md) + var(--sp));
+      left: calc(var(--comment-indentation--md)*-1 + var(--sp));
   }
 
 [dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
-      right: calc(-1 * var(--comment-indentation--md) + var(--sp));
+      right: calc(var(--comment-indentation--md)*-1 + var(--sp));
   }
     }
 

core/themes/olivero/css/components/content-moderation.css

@@ -110,15 +110,15 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
+      margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
   }
 
 [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(-2 * (var(--grid-col-width) + var(--grid-gap)))
+      margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+      width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
       margin-top: var(--sp2);
       margin-bottom: var(--sp4)
   }
@@ -127,15 +127,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+      margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+      margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
+      width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
   }
     }
 
@@ -150,6 +150,6 @@
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap))
+      width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11)
   }
     }

core/themes/olivero/css/components/details.css

@@ -108,10 +108,10 @@
 .olivero-details__summary:after,
 .collapse-processed > .olivero-details__summary .details-title:after {
   position: absolute;
-  top: calc(var(--details-border-width) * -1);
+  top: calc(var(--details-border-width)*-1);
-  right: calc(var(--details-border-width) * -1);
+  right: calc(var(--details-border-width)*-1);
-  bottom: calc(var(--details-border-width) * -1);
+  bottom: calc(var(--details-border-width)*-1);
-  left: calc(var(--details-border-width) * -1);
+  left: calc(var(--details-border-width)*-1);
   content: "";
   pointer-events: none;
   opacity: 0;

core/themes/olivero/css/components/embedded-media.css

@@ -145,12 +145,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
   }
 
@@ -158,12 +158,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
   }
   }
 
@@ -171,12 +171,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
   }
 
@@ -184,12 +184,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
   }
 
@@ -255,12 +255,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-left {
-    margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
 
 [dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-left {
-    margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
   }
 

core/themes/olivero/css/components/header-navigation.css

@@ -246,7 +246,7 @@ body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .he
 
 body.is-always-mobile-nav .header-nav {
       overflow: auto;
-      max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
+      max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);
       transition: transform 0.2s, visibility 0.2s;
       border-top-width: var(--sp11)
   }
@@ -255,15 +255,15 @@ body.is-always-mobile-nav .header-nav {
 @media (min-width: 90rem) {
 
 [dir="ltr"] body.is-always-mobile-nav .header-nav {
-      padding-right: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)))
+      padding-right: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
   }
 
 [dir="rtl"] body.is-always-mobile-nav .header-nav {
-      padding-left: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)))
+      padding-left: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
   }
 
 body.is-always-mobile-nav .header-nav {
-      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))))
+      max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width)*7 + var(--grid-gap)*7)
   }
     }
 

core/themes/olivero/css/components/header-search-narrow.css

@@ -24,8 +24,8 @@
 /* Width of the entire grid maxes out. */
 
 .block-search-narrow {
-  margin-left: calc(-1 * var(--sp));
+  margin-left: calc(var(--sp)*-1);
-  margin-right: calc(-1 * var(--sp));
+  margin-right: calc(var(--sp)*-1);
   margin-bottom: var(--sp2);
   background: var(--color--black)
 }
@@ -61,7 +61,7 @@
 
 .block-search-narrow input[type="search"] {
     width: calc(100% + var(--sp2));
-    height: calc(3 * var(--sp));
+    height: calc(var(--sp)*3);
     padding-top: 0;
     padding-bottom: 0;
     transition: background-size 0.4s;
@@ -120,7 +120,7 @@
   }
 
 .block-search-narrow input[type="search"] {
-      height: calc(4 * var(--sp))
+      height: calc(var(--sp)*4)
   }
     }
 

core/themes/olivero/css/components/header-site-branding.css

@@ -24,12 +24,12 @@
 /* Width of the entire grid maxes out. */
 
 [dir="ltr"] .site-branding {
-  margin-left: calc(-1 * var(--container-padding));
+  margin-left: calc(var(--container-padding)*-1);
   margin-right: var(--sp)
 }
 
 [dir="rtl"] .site-branding {
-  margin-right: calc(-1 * var(--container-padding));
+  margin-right: calc(var(--container-padding)*-1);
   margin-left: var(--sp)
 }
 
@@ -53,7 +53,7 @@
   display: flex;
   flex-shrink: 1;
   align-items: flex-end;
-  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
+  min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
   min-height: var(--sp3); /* Negative margin to break out of .container element. */
   padding-top: 0;
   padding-bottom: var(--sp0-5);
@@ -70,7 +70,7 @@
 @media (min-width: 43.75rem) {
 
 .site-branding {
-    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
+    min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
     min-height: var(--sp6);
     padding-bottom: var(--sp)
 }
@@ -79,18 +79,18 @@
 @media (min-width: 62.5rem) {
 
 .site-branding {
-    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)) /* Span minimum of 2 column widths. */
+    min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
 }
   }
 
 @media (min-width: 75rem) {
 
 [dir="ltr"] .site-branding {
-    margin-left: calc(-1 * var(--container-padding))
+    margin-left: calc(var(--container-padding)*-1)
   }
 
 [dir="rtl"] .site-branding {
-    margin-right: calc(-1 * var(--container-padding))
+    margin-right: calc(var(--container-padding)*-1)
   }
 
 .site-branding {

core/themes/olivero/css/components/messages.css

@@ -68,7 +68,7 @@
 }
 
 .messages {
-  min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
+  min-height: calc(var(--messages-icon-size) + var(--sp1)*2);
   padding-top: var(--sp1);
   padding-bottom: var(--sp1);
   color: var(--color--white);

core/themes/olivero/css/components/navigation/nav-primary-button.css

@@ -109,10 +109,10 @@
 
 @media (min-width: 75rem) {
     [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
-      margin-right: calc(-1 * var(--sp2))
+      margin-right: calc(var(--sp2)*-1)
   }
     [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
-      margin-left: calc(-1 * var(--sp2))
+      margin-left: calc(var(--sp2)*-1)
   }
     body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
       flex-shrink: 0;

core/themes/olivero/css/components/navigation/nav-primary-wide.css

@@ -207,7 +207,7 @@
     body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
       position: absolute;
       z-index: 105; /* Appear above search container. */
-      top: calc(100% - (0.5 * var(--sp)));
+      top: calc(100% - var(--sp)*0.5);
       left: 50%;
       visibility: hidden;
       overflow: auto;
@@ -218,8 +218,8 @@
        */
       max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
       margin-top: 0;
-      padding-top: calc(3 * var(--sp));
+      padding-top: calc(var(--sp)*3);
-      padding-bottom: calc(3 * var(--sp));
+      padding-bottom: calc(var(--sp)*3);
       transition: none;
       transform: translate(-50%, -1.25rem);
       opacity: 0;
@@ -246,7 +246,7 @@
 
       body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before {
         top: 0;
-        left: calc(var(--sp0-5) * -1);
+        left: calc(var(--sp0-5)*-1);
         height: 100%;
         transform: none;
       }

core/themes/olivero/css/components/navigation/nav-primary.css

@@ -268,11 +268,11 @@
 */
 
 [dir="ltr"] .primary-nav__menu--level-2 {
-  margin-left: calc(-1 * var(--sp));
+  margin-left: calc(var(--sp)*-1);
 }
 
 [dir="rtl"] .primary-nav__menu--level-2 {
-  margin-right: calc(-1 * var(--sp));
+  margin-right: calc(var(--sp)*-1);
 }
 
 [dir="ltr"] .primary-nav__menu--level-2 {
@@ -312,11 +312,11 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .primary-nav__menu--level-2 {
-    margin-left: calc(-1 * var(--sp3));
+    margin-left: calc(var(--sp3)*-1);
   }
 
 [dir="rtl"] .primary-nav__menu--level-2 {
-    margin-right: calc(-1 * var(--sp3));
+    margin-right: calc(var(--sp3)*-1);
   }
 
 [dir="ltr"] .primary-nav__menu--level-2 {

core/themes/olivero/css/components/node-teaser.css

@@ -78,7 +78,7 @@
   }
 
 .node--view-mode-teaser .primary-image + .node__title {
-      flex-basis: calc(100% - calc(4.5 * var(--sp)))
+      flex-basis: calc(100% - var(--sp)*4.5)
     }
 
 @media (min-width: 62.5rem) {
@@ -93,8 +93,8 @@
     }
 
 .node--view-mode-teaser .primary-image img {
-      width: calc(3.5 * var(--sp));
+      width: calc(var(--sp)*3.5);
-      height: calc(3.5 * var(--sp));
+      height: calc(var(--sp)*3.5);
       object-fit: cover;
       border-radius: 50%
     }
@@ -110,11 +110,11 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .node--view-mode-teaser .primary-image {
-      left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
+      left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .node--view-mode-teaser .primary-image {
-      right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
+      right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .node--view-mode-teaser .primary-image {

core/themes/olivero/css/components/powered-by-block.css

@@ -39,16 +39,16 @@
     }
 
 [dir="ltr"] .block-system-powered-by-block .drupal-logo {
-    margin-left: calc(var(--sp) / 4)
+    margin-left: calc(var(--sp)/4)
 }
 
 [dir="rtl"] .block-system-powered-by-block .drupal-logo {
-    margin-right: calc(var(--sp) / 4)
+    margin-right: calc(var(--sp)/4)
 }
 
 .block-system-powered-by-block .drupal-logo {
     display: inline-block;
-    margin-top: calc(-1 * var(--sp) / 4);
+    margin-top: calc(var(--sp)*-1/4);
   }
 
 .block-system-powered-by-block svg {

core/themes/olivero/css/components/tabs.css

@@ -62,7 +62,7 @@
 .tabs__tab {
   display: none;
   margin: 0;
-  margin-bottom: calc(-1 * var(--tabs-border-width))
+  margin-bottom: calc(var(--tabs-border-width)*-1)
 }
 
 .tabs__tab.is-active {
@@ -72,11 +72,11 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .tabs__tab {
-    margin-left: calc(-1 * var(--tabs-border-width))
+    margin-left: calc(var(--tabs-border-width)*-1)
   }
 
 [dir="rtl"] .tabs__tab {
-    margin-right: calc(-1 * var(--tabs-border-width))
+    margin-right: calc(var(--tabs-border-width)*-1)
   }
 
 .tabs__tab {
@@ -160,11 +160,11 @@ html:not(.js) .tabs__tab {
   }
 
 [dir="ltr"] .tabs__link.is-active:after {
-      left: calc(-1 * var(--tabs-border-width))
+      left: calc(var(--tabs-border-width)*-1)
 }
 
 [dir="rtl"] .tabs__link.is-active:after {
-      right: calc(-1 * var(--tabs-border-width))
+      right: calc(var(--tabs-border-width)*-1)
 }
 
 [dir="ltr"] .tabs__link.is-active:after {
@@ -177,8 +177,8 @@ html:not(.js) .tabs__tab {
 
 .tabs__link.is-active:after {
       position: absolute;
-      top: calc(-1 * var(--tabs-border-width));
+      top: calc(var(--tabs-border-width)*-1);
-      height: calc(100% + var(--tabs-border-width) * 2);
+      height: calc(100% + var(--tabs-border-width)*2);
       content: ""
     }
 
@@ -194,8 +194,8 @@ html:not(.js) .tabs__tab {
 
 .tabs__link.is-active:after {
         top: auto;
-        bottom: calc(-1 * var(--tabs-border-width));
+        bottom: calc(var(--tabs-border-width)*-1);
-        width: calc(100% + 2 * var(--tabs-border-width));
+        width: calc(100% + var(--tabs-border-width)*2);
         height: 0;
         border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
     }
@@ -217,12 +217,12 @@ html:not(.js) .tabs__tab {
 /* Button that opens and closes primary tabs at narrow viewports. */
 
 [dir="ltr"] .tabs__trigger {
-  margin-left: calc(-1 * var(--tabs-border-width));
+  margin-left: calc(var(--tabs-border-width)*-1);
   margin-right: 0
 }
 
 [dir="rtl"] .tabs__trigger {
-  margin-right: calc(-1 * var(--tabs-border-width));
+  margin-right: calc(var(--tabs-border-width)*-1);
   margin-left: 0
 }
 
@@ -269,7 +269,7 @@ html:not(.js) .tabs__trigger {
   display: block;
   width: var(--sp);
   height: 0.625rem;
-  margin-top: calc(-2 * var(--tabs-border-width))
+  margin-top: calc(var(--tabs-border-width)*-2)
 }
 
 [dir="ltr"] .tabs__trigger-icon > span {

core/themes/olivero/css/components/tags.css

@@ -29,11 +29,11 @@
 }
 
 [dir="ltr"] .field--tags__label {
-  margin-right: calc(var(--sp1-5) - (var(--sp0-5) / 2));
+  margin-right: calc(var(--sp1-5) - var(--sp0-5)/2);
 }
 
 [dir="rtl"] .field--tags__label {
-  margin-left: calc(var(--sp1-5) - (var(--sp0-5) / 2));
+  margin-left: calc(var(--sp1-5) - var(--sp0-5)/2);
 }
 
 .field--tags__label {
@@ -78,19 +78,19 @@
 }
 
 [dir="ltr"] .field--tags__items {
-  margin-left: calc((var(--sp0-5) / 2) * -1);
+  margin-left: calc(var(--sp0-5)/2*-1);
 }
 
 [dir="rtl"] .field--tags__items {
-  margin-right: calc((var(--sp0-5) / 2) * -1);
+  margin-right: calc(var(--sp0-5)/2*-1);
 }
 
 [dir="ltr"] .field--tags__items {
-  margin-right: calc((var(--sp0-5) / 2) * -1);
+  margin-right: calc(var(--sp0-5)/2*-1);
 }
 
 [dir="rtl"] .field--tags__items {
-  margin-left: calc((var(--sp0-5) / 2) * -1);
+  margin-left: calc(var(--sp0-5)/2*-1);
 }
 
 [dir="ltr"] .field--tags__items {
@@ -112,33 +112,33 @@
 .field--tags__items {
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc((var(--sp0-5) / 2) * -1);
+  margin-top: calc(var(--sp0-5)/2*-1);
-  margin-bottom: calc((var(--sp0-5) / 2) * -1);
+  margin-bottom: calc(var(--sp0-5)/2*-1);
   padding-top: 0;
   padding-bottom: 0;
   list-style: none;
 }
 
 [dir="ltr"] .field--tags__item {
-  margin-left: calc(var(--sp0-5) / 2);
+  margin-left: calc(var(--sp0-5)/2);
 }
 
 [dir="rtl"] .field--tags__item {
-  margin-right: calc(var(--sp0-5) / 2);
+  margin-right: calc(var(--sp0-5)/2);
 }
 
 [dir="ltr"] .field--tags__item {
-  margin-right: calc(var(--sp0-5) / 2);
+  margin-right: calc(var(--sp0-5)/2);
 }
 
 [dir="rtl"] .field--tags__item {
-  margin-left: calc(var(--sp0-5) / 2);
+  margin-left: calc(var(--sp0-5)/2);
 }
 
 .field--tags__item {
   display: flex;
-  margin-top: calc(var(--sp0-5) / 2);
+  margin-top: calc(var(--sp0-5)/2);
-  margin-bottom: calc(var(--sp0-5) / 2);
+  margin-bottom: calc(var(--sp0-5)/2);
 }
 
 .field--tags__item:nth-last-child(n+2):after {

core/themes/olivero/css/components/text-content.css

@@ -202,7 +202,7 @@
 
 .text-content blockquote, .cke_editable blockquote {
       font-size: 2.5rem;
-      line-height: calc(3.5 * var(--sp))
+      line-height: calc(var(--sp)*3.5)
   }
     }
 

core/themes/olivero/css/components/vertical-tabs.css

@@ -70,7 +70,7 @@
   }
 
 .vertical-tabs__panes {
-  margin-top: calc(var(--vertical-tabs-menu-border-width) * -1)
+  margin-top: calc(var(--vertical-tabs-menu-border-width)*-1)
 }
 
 @media (min-width: 62.5rem) {
@@ -140,11 +140,11 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .vertical-tabs__menu-item.is-selected {
-    margin-right: calc(var(--vertical-tabs-menu-border-width) * -1);
+    margin-right: calc(var(--vertical-tabs-menu-border-width)*-1);
   }
 
 [dir="rtl"] .vertical-tabs__menu-item.is-selected {
-    margin-left: calc(var(--vertical-tabs-menu-border-width) * -1);
+    margin-left: calc(var(--vertical-tabs-menu-border-width)*-1);
   }
 
 [dir="ltr"] .vertical-tabs__menu-item.is-selected {

core/themes/olivero/css/components/wide-image.css

@@ -47,15 +47,15 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .wide-image {
-    margin-left: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .wide-image {
-    margin-right: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))))
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .wide-image {
-    width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+    width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
     margin-top: var(--sp2);
     margin-bottom: var(--sp4)
 }
@@ -64,15 +64,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .wide-image {
-    margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .wide-image {
-    margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .wide-image {
-    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
+    width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
 }
   }
 
@@ -81,14 +81,14 @@
 @media (min-width: 62.5rem) {
 
 .sidebar-grid .wide-image {
-    width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap))
+    width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
 }
   }
 
 @media (min-width: 81.25rem) {
 
 .sidebar-grid .wide-image {
-    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap))
+    width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
 }
   }
 

core/themes/olivero/css/layout/layout-builder-fourcol-section.css

@@ -36,7 +36,7 @@
 @media (min-width: 43.75rem) {
 
 .layout--fourcol-section > .layout__region {
-      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
       flex-grow: 0;
       flex-shrink: 0;
       margin-bottom: 0
@@ -56,22 +56,22 @@
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] 
     .layout--fourcol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] 
     .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] 
     .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] 
     .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
   }
 
@@ -82,7 +82,7 @@
 
 @media (min-width: 62.5rem) {
     .layout--fourcol-section > .layout__region {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+      flex-basis: calc(25% - var(--grid-gap)*0.75);
     }
 
     .layout--fourcol-section > .layout__region--first,
@@ -91,24 +91,24 @@
     }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     .layout--fourcol-section > .layout__region--second,
     .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap) * 0.5);
+      margin-left: calc(var(--grid-gap)*0.5);
-      margin-right: calc(var(--grid-gap) * 0.5);
+      margin-right: calc(var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
   }

core/themes/olivero/css/layout/layout-builder-threecol-section.css

@@ -44,27 +44,27 @@
 
 @media (min-width: 62.5rem) {
     [dir="ltr"] .layout--threecol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     [dir="rtl"] .layout--threecol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     .layout--threecol-section > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.5);
+      margin-left: calc(var(--grid-gap)*0.5);
-      margin-right: calc(var(--grid-gap) * 0.5);
+      margin-right: calc(var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--threecol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--threecol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     .layout--threecol-section--25-50-25 > .layout__region--first,
     .layout--threecol-section--25-50-25 > .layout__region--third {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
 
     .layout--threecol-section--25-50-25 > .layout__region--second {
@@ -72,7 +72,7 @@
     }
     .layout--threecol-section--25-25-50 > .layout__region--first,
     .layout--threecol-section--25-25-50 > .layout__region--second {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
 
     .layout--threecol-section--25-25-50 > .layout__region--third {
@@ -84,11 +84,11 @@
 
     .layout--threecol-section--50-25-25 > .layout__region--second,
     .layout--threecol-section--50-25-25 > .layout__region--third {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
     .layout--threecol-section--33-34-33 > .layout__region--first,
     .layout--threecol-section--33-34-33 > .layout__region--second,
     .layout--threecol-section--33-34-33 > .layout__region--third {
-      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+      flex-basis: calc(33.33% - var(--grid-gap)*0.667);
     }
 }

core/themes/olivero/css/layout/layout-builder-twocol-section.css

@@ -44,108 +44,108 @@
 
 @media (min-width: 43.75rem) {
     [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
     .layout--twocol-section--50-50 > .layout__region--first {
-      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-right: calc(var(--grid-gap) * 0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     .layout--twocol-section--50-50 > .layout__region--second {
-      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
     }
     [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.3333)
+      margin-right: calc(var(--grid-gap)*0.3333)
   }
     [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.3333)
+      margin-left: calc(var(--grid-gap)*0.3333)
   }
     .layout--twocol-section--33-67 > .layout__region--first {
-      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
     }
 
     [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.6666)
+      margin-left: calc(var(--grid-gap)*0.6666)
   }
 
     [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-right: calc(var(--grid-gap) * 0.6666)
+      margin-right: calc(var(--grid-gap)*0.6666)
   }
 
     .layout--twocol-section--33-67 > .layout__region--second {
-      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
     }
     [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.6666)
+      margin-right: calc(var(--grid-gap)*0.6666)
   }
     [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.6666)
+      margin-left: calc(var(--grid-gap)*0.6666)
   }
     .layout--twocol-section--67-33 > .layout__region--first {
-      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
     }
 
     [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.3333)
+      margin-left: calc(var(--grid-gap)*0.3333)
   }
 
     [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-right: calc(var(--grid-gap) * 0.3333)
+      margin-right: calc(var(--grid-gap)*0.3333)
   }
 
     .layout--twocol-section--67-33 > .layout__region--second {
-      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
     }
     [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.25)
+      margin-right: calc(var(--grid-gap)*0.25)
   }
     [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.25)
+      margin-left: calc(var(--grid-gap)*0.25)
   }
     .layout--twocol-section--25-75 > .layout__region--first {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      flex-basis: calc(25% - var(--grid-gap)*0.25);
     }
 
     [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.75)
+      margin-left: calc(var(--grid-gap)*0.75)
   }
 
     [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-right: calc(var(--grid-gap) * 0.75)
+      margin-right: calc(var(--grid-gap)*0.75)
   }
 
     .layout--twocol-section--25-75 > .layout__region--second {
-      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      flex-basis: calc(75% - var(--grid-gap)*0.75);
     }
     [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-right: calc(var(--grid-gap) * 0.75)
+      margin-right: calc(var(--grid-gap)*0.75)
   }
     [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-left: calc(var(--grid-gap) * 0.75)
+      margin-left: calc(var(--grid-gap)*0.75)
   }
     .layout--twocol-section--75-25 > .layout__region--first {
-      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      flex-basis: calc(75% - var(--grid-gap)*0.75);
     }
 
     [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-left: calc(var(--grid-gap) * 0.25)
+      margin-left: calc(var(--grid-gap)*0.25)
   }
 
     [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-right: calc(var(--grid-gap) * 0.25)
+      margin-right: calc(var(--grid-gap)*0.25)
   }
 
     .layout--twocol-section--75-25 > .layout__region--second {
-      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      flex-basis: calc(25% - var(--grid-gap)*0.25);
     }
 }

core/themes/olivero/css/layout/layout-content-narrow.css

@@ -90,22 +90,22 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
         }
 
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
@@ -133,7 +133,7 @@
   }
 
 .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+        width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
         margin-top: var(--sp3);
         margin-bottom: var(--sp3)
     }
@@ -150,15 +150,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-left: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+        margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-right: calc(-1 * (var(--grid-col-width) + var(--grid-gap)))
+        margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap))
+        width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
     }
       }
 

core/themes/olivero/css/layout/layout-footer.css

@@ -42,7 +42,7 @@
 
 .site-footer__inner {
     padding-top: var(--sp4);
-    padding-bottom: calc(13 * var(--sp))
+    padding-bottom: calc(var(--sp)*13)
 }
   }
 

core/themes/olivero/css/layout/layout-views-grid.css

@@ -38,8 +38,8 @@
    * Calculated values.
    */
   --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
-  --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+  --views-grid--total-gap-width: calc(var(--views-grid--gap-count)*var(--views-grid--layout-gap));
-  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width))/var(--views-grid--column-count));
 
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
@@ -47,7 +47,7 @@
 }
 
 .views-view-grid--vertical {
-  margin-bottom: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+  margin-bottom: calc(var(--views-grid--layout-gap)*-1); /* Offset the bottom row's padding. */
   column-width: var(--views-grid-item--min-width);
   column-count: var(--views-grid--column-count);
   grid-column-gap: var(--views-grid--layout-gap)

core/themes/olivero/css/layout/region-content-below.css

@@ -39,7 +39,7 @@
 }
 
     .region--content-below > * {
-      flex-basis: calc(50% - (var(--grid-gap) / 2));
+      flex-basis: calc(50% - var(--grid-gap)/2);
       flex-grow: 1;
       flex-shrink: 0
     }
@@ -57,7 +57,7 @@
 
 @media (min-width: 43.75rem) {
     .region--content-below > * {
-      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667))
+      flex-basis: calc(33.33% - var(--grid-gap)*0.667)
     }
 
       [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] 

core/themes/olivero/css/layout/social-bar.css

@@ -76,8 +76,8 @@
 .social-bar__inner {
     position: relative;
     width: var(--content-left);
-    padding-top: calc(5 * var(--sp));
+    padding-top: calc(var(--sp)*5);
-    padding-bottom: calc(5 * var(--sp))
+    padding-bottom: calc(var(--sp)*5)
 }
 
     [dir="ltr"] .social-bar__inner.is-fixed {
@@ -91,7 +91,7 @@
     .social-bar__inner.is-fixed {
       position: fixed;
       top: var(--sp6);
-      height: calc(100vh - 6 * var(--sp));
+      height: calc(100vh - var(--sp)*6);
     }
   }
 

core/themes/olivero/olivero.libraries.yml

@@ -56,6 +56,9 @@ global-styling:
     js/navigation-utils.js: {}
 
   dependencies:
+    - core/drupal.element.closest
+    - core/drupal.element.matches
+    - core/drupal.nodelist.foreach
     - core/drupal
     - core/once
     - core/tabbable
@@ -217,6 +220,8 @@ messages:
   version: VERSION
   js:
     js/messages.js: {}
+  dependencies:
+    - core/drupal.array.includes
 
 navigation-primary:
   version: VERSION

core/yarn.lock

@@ -2714,6 +2714,11 @@ css-what@^6.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@1.5.x:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -3125,6 +3130,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es6-promise@4.2.x:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5211,6 +5221,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picturefill@3.0.x:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/picturefill/-/picturefill-3.0.3.tgz#a5c38eeb02d74def38e1790ff61e166166b4f224"
+  integrity sha512-JDdx+3i4fs2pkqwWZJgGEM2vFWsq+01YsQFT9CKPGuv2Q0xSdrQZoxi9XwyNARTgxiOdgoAwWQRluLRe/JQX2g==
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -5253,6 +5268,15 @@ postcss-attribute-case-insensitive@^4.0.1:
     postcss "^7.0.2"
     postcss-selector-parser "^6.0.2"
 
+postcss-calc@^7.0.1:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
+  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
+  dependencies:
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
+
 postcss-calc@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
@@ -5834,7 +5858,7 @@ postcss-value-parser@^3.2.3:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==