@elastic/eui-theme-common 8.0.0 → 9.0.0-snapshot.1776170631053

package/lib/cjs/global_styling/functions/math.d.ts

@@ -6,6 +6,11 @@
  * mathWithUnits('4px', (x) => x / 2) = '2px';
  * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
  * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
+ *
+ * When any input contains a CSS var() reference, the callback is probed with
+ * test values to determine its linear coefficients, and an equivalent calc()
+ * expression is emitted instead:
+ * mathWithUnits('var(--size)', (x) => x / 2) = 'calc(var(--size) / 2)';
  */
 declare type ValueTypes = string | number | undefined;
 export declare const mathWithUnits: (values: ValueTypes | ValueTypes[], callback: (...args: number[]) => number, unit?: string) => string;

package/lib/cjs/global_styling/functions/math.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mathWithUnits = void 0;
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != _typeof(e[e.length - 1]) && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
@@ -24,12 +30,35 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
  * mathWithUnits('4px', (x) => x / 2) = '2px';
  * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
  * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
+ *
+ * When any input contains a CSS var() reference, the callback is probed with
+ * test values to determine its linear coefficients, and an equivalent calc()
+ * expression is emitted instead:
+ * mathWithUnits('var(--size)', (x) => x / 2) = 'calc(var(--size) / 2)';
  */
 // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
 
+// --- Temporary perf instrumentation ---
+var _callCount = 0;
+var _totalTime = 0;
+// --- End instrumentation ---
+
 var mathWithUnits = exports.mathWithUnits = function mathWithUnits(values, callback) {
   var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var _t0 = performance.now();
+  _callCount++;
   if (!Array.isArray(values)) values = [values];
+
+  // When any value is a CSS var() reference, emit a calc() expression
+  // instead of evaluating the callback in JS
+  if (values.some(function (v) {
+    return typeof v === 'string' && v.includes('var(');
+  })) {
+    var _elapsed2 = performance.now() - _t0;
+    _totalTime += _elapsed2;
+    console.log("mathWithUnits #".concat(_callCount, " (var path): ").concat(_elapsed2.toFixed(3), "ms | total: ").concat(_totalTime.toFixed(3), "ms"), values);
+    return _emitCalcForVars(values, callback, unit);
+  }
   var foundNumericValues = [];
   var foundUnit = '';
   values.forEach(function (value) {
@@ -59,5 +88,109 @@ var mathWithUnits = exports.mathWithUnits = function mathWithUnits(values, callb
       throw new Error('Invalid value type - pass a string or number');
     }
   });
-  return "".concat(callback.apply(void 0, foundNumericValues)).concat(unit || foundUnit);
+  var _result = "".concat(callback.apply(void 0, foundNumericValues)).concat(unit || foundUnit);
+  var _elapsed = performance.now() - _t0;
+  _totalTime += _elapsed;
+  console.log("mathWithUnits #".concat(_callCount, ": ").concat(_elapsed.toFixed(3), "ms | total: ").concat(_totalTime.toFixed(3), "ms"), values, '->', _result);
+  return _result;
+};
+
+/**
+ * When CSS var() references are present, probe the callback with test values
+ * to determine its linear coefficients, then emit an equivalent calc() expression.
+ *
+ * Only the var() positions are probed (at 0 vs 1). Literal values (numbers and
+ * parseable CSS strings) are fixed at their actual numeric values during probing,
+ * so callbacks like `(x, y) => x * y` work correctly when one arg is a literal.
+ *
+ * Assumes the callback is linear *in the var() arguments*.
+ */
+var _emitCalcForVars = function _emitCalcForVars(values, callback, overrideUnit) {
+  var n = values.length;
+
+  // Classify each value: is it a var() ref or a literal we can parse?
+  var isVar = [];
+  var baselineArgs = []; // Actual numeric values for literals, 0 for var refs
+  var cssUnit = overrideUnit;
+  for (var i = 0; i < n; i++) {
+    var v = values[i];
+    if (typeof v === 'string' && v.includes('var(')) {
+      isVar.push(true);
+      baselineArgs.push(0);
+    } else if (typeof v === 'number') {
+      isVar.push(false);
+      baselineArgs.push(v);
+    } else if (typeof v === 'string') {
+      isVar.push(false);
+      var match = /(-?[\d.]+)(%|[a-zA-Z]*)/.exec(v);
+      baselineArgs.push(Number(match === null || match === void 0 ? void 0 : match[1]) || 0);
+      if (!cssUnit && match !== null && match !== void 0 && match[2]) {
+        cssUnit = match[2];
+      }
+    } else {
+      isVar.push(false);
+      baselineArgs.push(0);
+    }
+  }
+  if (!cssUnit) cssUnit = 'px';
+
+  // Probe: fix literal positions at their actual values,
+  // probe each var() position at 0 (baseline) then 1 to determine its coefficient
+  var constant = _preciseRound(callback.apply(void 0, baselineArgs));
+  var varIndices = [];
+  var coefficients = [];
+  for (var _i = 0; _i < n; _i++) {
+    if (!isVar[_i]) continue;
+    varIndices.push(_i);
+    var probe = [].concat(baselineArgs);
+    probe[_i] = 1;
+    coefficients.push(_preciseRound(callback.apply(void 0, _toConsumableArray(probe)) - constant));
+  }
+
+  // Build calc() expression — only var() positions appear as variable terms
+  var varTerms = [];
+  for (var j = 0; j < varIndices.length; j++) {
+    var coeff = coefficients[j];
+    if (coeff === 0) continue;
+    var valueStr = String(values[varIndices[j]]);
+    if (varTerms.length === 0) {
+      varTerms.push(_formatTerm(coeff, valueStr));
+    } else if (coeff > 0) {
+      varTerms.push("+ ".concat(_formatTerm(coeff, valueStr)));
+    } else {
+      varTerms.push("- ".concat(_formatTerm(Math.abs(coeff), valueStr)));
+    }
+  }
+
+  // If no var() terms contribute (callback ignores its input), return the constant directly
+  if (varTerms.length === 0) {
+    return constant === 0 ? "0".concat(cssUnit) : "".concat(constant).concat(cssUnit);
+  }
+
+  // Append constant if non-zero
+  if (constant !== 0) {
+    var cStr = "".concat(Math.abs(constant)).concat(cssUnit);
+    varTerms.push(constant > 0 ? "+ ".concat(cStr) : "- ".concat(cStr));
+  }
+  return "calc(".concat(varTerms.join(' '), ")");
+};
+
+/** Format a coefficient × value term for calc(). Coefficient may be negative for first terms. */
+var _formatTerm = function _formatTerm(coeff, value) {
+  var absCoeff = Math.abs(coeff);
+  if (absCoeff === 1) {
+    return coeff < 0 ? "".concat(value, " * -1") : value;
+  }
+
+  // Use division for readability when coefficient is a simple reciprocal
+  var reciprocal = 1 / absCoeff;
+  if (Number.isInteger(reciprocal) && reciprocal > 1) {
+    return "".concat(value, " / ").concat(coeff < 0 ? -reciprocal : reciprocal);
+  }
+  return "".concat(coeff, " * ").concat(value);
+};
+
+/** Round to avoid floating-point artifacts from callback probing */
+var _preciseRound = function _preciseRound(n) {
+  return Math.round(n * 1e10) / 1e10;
 };

package/lib/cjs/global_styling/functions/math.test.js

@@ -73,6 +73,79 @@ describe('mathWithUnits', function () {
       }, 'px')).toEqual('10px');
     });
   });
+  describe('CSS var() references emit calc() expressions', function () {
+    test('single var with multiplication', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x * 2;
+      })).toEqual('calc(2 * var(--size))');
+    });
+    test('single var with division', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x / 2;
+      })).toEqual('calc(var(--size) / 2)');
+    });
+    test('single var with fractional multiplication', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x * 0.75;
+      })).toEqual('calc(0.75 * var(--size))');
+    });
+    test('single var with addition', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x + 2;
+      })).toEqual('calc(var(--size) + 2px)');
+    });
+    test('single var with negative division', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x / -2;
+      })).toEqual('calc(var(--size) / -2)');
+    });
+    test('single var identity', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x;
+      })).toEqual('calc(var(--size))');
+    });
+    test('multiple vars with subtraction', function () {
+      expect((0, _math.mathWithUnits)(['var(--a)', 'var(--b)'], function (x, y) {
+        return x - y;
+      })).toEqual('calc(var(--a) - var(--b))');
+    });
+    test('multiple vars with complex linear', function () {
+      expect((0, _math.mathWithUnits)(['var(--a)', 'var(--b)'], function (x, y) {
+        return x - 3 * y;
+      })).toEqual('calc(var(--a) - 3 * var(--b))');
+    });
+    test('mixed var and literal', function () {
+      expect((0, _math.mathWithUnits)(['var(--a)', '4px'], function (x, y) {
+        return x + y;
+      })).toEqual('calc(var(--a) + 4px)');
+    });
+    test('unit detection from literal input', function () {
+      expect((0, _math.mathWithUnits)(['var(--a)', '2rem'], function (x, y) {
+        return x + y;
+      })).toEqual('calc(var(--a) + 2rem)');
+    });
+    test('override unit is respected', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x + 4;
+      }, '%')).toEqual('calc(var(--size) + 4%)');
+    });
+    test('constant-only result', function () {
+      expect((0, _math.mathWithUnits)('var(--size)', function (_x) {
+        return 16;
+      })).toEqual('16px');
+    });
+    test('var mixed with number input — multiplication', function () {
+      expect((0, _math.mathWithUnits)(['var(--size)', 3], function (x, y) {
+        return x * y;
+      })).toEqual('calc(3 * var(--size))');
+    });
+    test('var mixed with number input — addition with closure', function () {
+      var base = 16;
+      expect((0, _math.mathWithUnits)('var(--size)', function (x) {
+        return x + base;
+      })).toEqual('calc(var(--size) + 16px)');
+    });
+  });
   describe('weird edge cases', function () {
     it('throws on undefined', function () {
       expect(function () {

package/lib/cjs/global_styling/variables/buttons.d.ts

@@ -18,6 +18,7 @@ export declare type _EuiThemeButtonColors = {
     backgroundWarningHover: ColorModeSwitch;
     backgroundRiskHover: ColorModeSwitch;
     backgroundDangerHover: ColorModeSwitch;
+    backgroundAssistanceHover: ColorModeSwitch;
     backgroundTextHover: ColorModeSwitch;
     backgroundPrimaryActive: ColorModeSwitch;
     backgroundAccentActive: ColorModeSwitch;
@@ -46,6 +47,7 @@ export declare type _EuiThemeButtonColors = {
     backgroundFilledWarningHover: ColorModeSwitch;
     backgroundFilledRiskHover: ColorModeSwitch;
     backgroundFilledDangerHover: ColorModeSwitch;
+    backgroundFilledAssistanceHover: ColorModeSwitch;
     backgroundFilledTextHover: ColorModeSwitch;
     backgroundFilledPrimaryActive: ColorModeSwitch;
     backgroundFilledAccentActive: ColorModeSwitch;

package/lib/cjs/global_styling/variables/colors.d.ts

@@ -65,6 +65,7 @@ export declare type _EuiThemeBrandTextColors = {
     textWarning: ColorModeSwitch;
     textRisk: ColorModeSwitch;
     textDanger: ColorModeSwitch;
+    textAssistance: ColorModeSwitch;
 };
 export declare type _EuiThemeShadeColors = {
     /**
@@ -167,6 +168,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundBaseWarning: ColorModeSwitch;
     backgroundBaseRisk: ColorModeSwitch;
     backgroundBaseDanger: ColorModeSwitch;
+    backgroundBaseAssistance: ColorModeSwitch;
     backgroundBaseSubdued: ColorModeSwitch;
     backgroundBasePlain: ColorModeSwitch;
     backgroundBaseDisabled: ColorModeSwitch;
@@ -174,6 +176,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundBaseFormsPrepend: ColorModeSwitch;
     backgroundBaseFormsControlDisabled: ColorModeSwitch;
     backgroundBaseInteractiveHover: ColorModeSwitch;
+    backgroundBaseInteractiveHoverAssistance: ColorModeSwitch;
     backgroundBaseInteractiveSelect: ColorModeSwitch;
     backgroundBaseInteractiveSelectHover: ColorModeSwitch;
     backgroundBaseInteractiveOverlay: ColorModeSwitch;
@@ -187,6 +190,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundLightWarning: ColorModeSwitch;
     backgroundLightRisk: ColorModeSwitch;
     backgroundLightDanger: ColorModeSwitch;
+    backgroundLightAssistance: ColorModeSwitch;
     backgroundLightText: ColorModeSwitch;
     backgroundFilledPrimary: ColorModeSwitch;
     backgroundFilledAccent: ColorModeSwitch;
@@ -196,6 +200,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundFilledWarning: ColorModeSwitch;
     backgroundFilledRisk: ColorModeSwitch;
     backgroundFilledDanger: ColorModeSwitch;
+    backgroundFilledAssistance: ColorModeSwitch;
     backgroundFilledText: ColorModeSwitch;
 };
 /** TODO: remove once usages are re-mapped */
@@ -234,6 +239,7 @@ export declare type _EuiThemeBorderColors = {
     borderBaseWarning: ColorModeSwitch;
     borderBaseRisk: ColorModeSwitch;
     borderBaseDanger: ColorModeSwitch;
+    borderBaseAssistance: ColorModeSwitch;
     borderBasePlain: ColorModeSwitch;
     borderBaseSubdued: ColorModeSwitch;
     borderBaseProminent: ColorModeSwitch;
@@ -255,6 +261,7 @@ export declare type _EuiThemeBorderColors = {
     borderStrongWarning: ColorModeSwitch;
     borderStrongRisk: ColorModeSwitch;
     borderStrongDanger: ColorModeSwitch;
+    borderStrongAssistance: ColorModeSwitch;
     borderStrongText: ColorModeSwitch;
 };
 export declare type _EuiThemeVisColors = {

package/lib/esm/global_styling/functions/math.d.ts

@@ -6,6 +6,11 @@
  * mathWithUnits('4px', (x) => x / 2) = '2px';
  * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
  * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
+ *
+ * When any input contains a CSS var() reference, the callback is probed with
+ * test values to determine its linear coefficients, and an equivalent calc()
+ * expression is emitted instead:
+ * mathWithUnits('var(--size)', (x) => x / 2) = 'calc(var(--size) / 2)';
  */
 declare type ValueTypes = string | number | undefined;
 export declare const mathWithUnits: (values: ValueTypes | ValueTypes[], callback: (...args: number[]) => number, unit?: string) => string;

package/lib/esm/global_styling/functions/math.js

@@ -5,12 +5,26 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+// --- Temporary perf instrumentation ---
+let _callCount = 0;
+let _totalTime = 0;
+// --- End instrumentation ---
 export const mathWithUnits = (values, // Can accept a single input or array of inputs
 callback, // Can be multiplication, division, addition, etc.
 unit = '' // Optional: allow specifying an override unit to return
 ) => {
+    const _t0 = performance.now();
+    _callCount++;
     if (!Array.isArray(values))
         values = [values];
+    // When any value is a CSS var() reference, emit a calc() expression
+    // instead of evaluating the callback in JS
+    if (values.some((v) => typeof v === 'string' && v.includes('var('))) {
+        const _elapsed = performance.now() - _t0;
+        _totalTime += _elapsed;
+        console.log(`mathWithUnits #${_callCount} (var path): ${_elapsed.toFixed(3)}ms | total: ${_totalTime.toFixed(3)}ms`, values);
+        return _emitCalcForVars(values, callback, unit);
+    }
     const foundNumericValues = [];
     let foundUnit = '';
     values.forEach((value) => {
@@ -40,5 +54,106 @@ unit = '' // Optional: allow specifying an override unit to return
             throw new Error('Invalid value type - pass a string or number');
         }
     });
-    return `${callback(...foundNumericValues)}${unit || foundUnit}`;
+    const _result = `${callback(...foundNumericValues)}${unit || foundUnit}`;
+    const _elapsed = performance.now() - _t0;
+    _totalTime += _elapsed;
+    console.log(`mathWithUnits #${_callCount}: ${_elapsed.toFixed(3)}ms | total: ${_totalTime.toFixed(3)}ms`, values, '->', _result);
+    return _result;
 };
+/**
+ * When CSS var() references are present, probe the callback with test values
+ * to determine its linear coefficients, then emit an equivalent calc() expression.
+ *
+ * Only the var() positions are probed (at 0 vs 1). Literal values (numbers and
+ * parseable CSS strings) are fixed at their actual numeric values during probing,
+ * so callbacks like `(x, y) => x * y` work correctly when one arg is a literal.
+ *
+ * Assumes the callback is linear *in the var() arguments*.
+ */
+const _emitCalcForVars = (values, callback, overrideUnit) => {
+    const n = values.length;
+    // Classify each value: is it a var() ref or a literal we can parse?
+    const isVar = [];
+    const baselineArgs = []; // Actual numeric values for literals, 0 for var refs
+    let cssUnit = overrideUnit;
+    for (let i = 0; i < n; i++) {
+        const v = values[i];
+        if (typeof v === 'string' && v.includes('var(')) {
+            isVar.push(true);
+            baselineArgs.push(0);
+        }
+        else if (typeof v === 'number') {
+            isVar.push(false);
+            baselineArgs.push(v);
+        }
+        else if (typeof v === 'string') {
+            isVar.push(false);
+            const match = /(-?[\d.]+)(%|[a-zA-Z]*)/.exec(v);
+            baselineArgs.push(Number(match?.[1]) || 0);
+            if (!cssUnit && match?.[2]) {
+                cssUnit = match[2];
+            }
+        }
+        else {
+            isVar.push(false);
+            baselineArgs.push(0);
+        }
+    }
+    if (!cssUnit)
+        cssUnit = 'px';
+    // Probe: fix literal positions at their actual values,
+    // probe each var() position at 0 (baseline) then 1 to determine its coefficient
+    const constant = _preciseRound(callback(...baselineArgs));
+    const varIndices = [];
+    const coefficients = [];
+    for (let i = 0; i < n; i++) {
+        if (!isVar[i])
+            continue;
+        varIndices.push(i);
+        const probe = [...baselineArgs];
+        probe[i] = 1;
+        coefficients.push(_preciseRound(callback(...probe) - constant));
+    }
+    // Build calc() expression — only var() positions appear as variable terms
+    const varTerms = [];
+    for (let j = 0; j < varIndices.length; j++) {
+        const coeff = coefficients[j];
+        if (coeff === 0)
+            continue;
+        const valueStr = String(values[varIndices[j]]);
+        if (varTerms.length === 0) {
+            varTerms.push(_formatTerm(coeff, valueStr));
+        }
+        else if (coeff > 0) {
+            varTerms.push(`+ ${_formatTerm(coeff, valueStr)}`);
+        }
+        else {
+            varTerms.push(`- ${_formatTerm(Math.abs(coeff), valueStr)}`);
+        }
+    }
+    // If no var() terms contribute (callback ignores its input), return the constant directly
+    if (varTerms.length === 0) {
+        return constant === 0 ? `0${cssUnit}` : `${constant}${cssUnit}`;
+    }
+    // Append constant if non-zero
+    if (constant !== 0) {
+        const cStr = `${Math.abs(constant)}${cssUnit}`;
+        varTerms.push(constant > 0 ? `+ ${cStr}` : `- ${cStr}`);
+    }
+    return `calc(${varTerms.join(' ')})`;
+};
+/** Format a coefficient × value term for calc(). Coefficient may be negative for first terms. */
+const _formatTerm = (coeff, value) => {
+    const absCoeff = Math.abs(coeff);
+    if (absCoeff === 1) {
+        return coeff < 0 ? `${value} * -1` : value;
+    }
+    // Use division for readability when coefficient is a simple reciprocal
+    const reciprocal = 1 / absCoeff;
+    if (Number.isInteger(reciprocal) && reciprocal > 1) {
+        return `${value} / ${coeff < 0 ? -reciprocal : reciprocal}`;
+    }
+    return `${coeff} * ${value}`;
+};
+/** Round to avoid floating-point artifacts from callback probing */
+const _preciseRound = (n) => Math.round(n * 1e10) / 1e10;

package/lib/esm/global_styling/functions/math.test.js

@@ -46,6 +46,51 @@ describe('mathWithUnits', () => {
             expect(mathWithUnits(['50%', '5rem'], (x, y) => x / y, 'px')).toEqual('10px');
         });
     });
+    describe('CSS var() references emit calc() expressions', () => {
+        test('single var with multiplication', () => {
+            expect(mathWithUnits('var(--size)', (x) => x * 2)).toEqual('calc(2 * var(--size))');
+        });
+        test('single var with division', () => {
+            expect(mathWithUnits('var(--size)', (x) => x / 2)).toEqual('calc(var(--size) / 2)');
+        });
+        test('single var with fractional multiplication', () => {
+            expect(mathWithUnits('var(--size)', (x) => x * 0.75)).toEqual('calc(0.75 * var(--size))');
+        });
+        test('single var with addition', () => {
+            expect(mathWithUnits('var(--size)', (x) => x + 2)).toEqual('calc(var(--size) + 2px)');
+        });
+        test('single var with negative division', () => {
+            expect(mathWithUnits('var(--size)', (x) => x / -2)).toEqual('calc(var(--size) / -2)');
+        });
+        test('single var identity', () => {
+            expect(mathWithUnits('var(--size)', (x) => x)).toEqual('calc(var(--size))');
+        });
+        test('multiple vars with subtraction', () => {
+            expect(mathWithUnits(['var(--a)', 'var(--b)'], (x, y) => x - y)).toEqual('calc(var(--a) - var(--b))');
+        });
+        test('multiple vars with complex linear', () => {
+            expect(mathWithUnits(['var(--a)', 'var(--b)'], (x, y) => x - 3 * y)).toEqual('calc(var(--a) - 3 * var(--b))');
+        });
+        test('mixed var and literal', () => {
+            expect(mathWithUnits(['var(--a)', '4px'], (x, y) => x + y)).toEqual('calc(var(--a) + 4px)');
+        });
+        test('unit detection from literal input', () => {
+            expect(mathWithUnits(['var(--a)', '2rem'], (x, y) => x + y)).toEqual('calc(var(--a) + 2rem)');
+        });
+        test('override unit is respected', () => {
+            expect(mathWithUnits('var(--size)', (x) => x + 4, '%')).toEqual('calc(var(--size) + 4%)');
+        });
+        test('constant-only result', () => {
+            expect(mathWithUnits('var(--size)', (_x) => 16)).toEqual('16px');
+        });
+        test('var mixed with number input — multiplication', () => {
+            expect(mathWithUnits(['var(--size)', 3], (x, y) => x * y)).toEqual('calc(3 * var(--size))');
+        });
+        test('var mixed with number input — addition with closure', () => {
+            const base = 16;
+            expect(mathWithUnits('var(--size)', (x) => x + base)).toEqual('calc(var(--size) + 16px)');
+        });
+    });
     describe('weird edge cases', () => {
         it('throws on undefined', () => {
             expect(() => mathWithUnits(undefined, (x) => x * 3)).toThrow('Invalid value type');

package/lib/esm/global_styling/variables/buttons.d.ts

@@ -18,6 +18,7 @@ export declare type _EuiThemeButtonColors = {
     backgroundWarningHover: ColorModeSwitch;
     backgroundRiskHover: ColorModeSwitch;
     backgroundDangerHover: ColorModeSwitch;
+    backgroundAssistanceHover: ColorModeSwitch;
     backgroundTextHover: ColorModeSwitch;
     backgroundPrimaryActive: ColorModeSwitch;
     backgroundAccentActive: ColorModeSwitch;
@@ -46,6 +47,7 @@ export declare type _EuiThemeButtonColors = {
     backgroundFilledWarningHover: ColorModeSwitch;
     backgroundFilledRiskHover: ColorModeSwitch;
     backgroundFilledDangerHover: ColorModeSwitch;
+    backgroundFilledAssistanceHover: ColorModeSwitch;
     backgroundFilledTextHover: ColorModeSwitch;
     backgroundFilledPrimaryActive: ColorModeSwitch;
     backgroundFilledAccentActive: ColorModeSwitch;

package/lib/esm/global_styling/variables/colors.d.ts

@@ -65,6 +65,7 @@ export declare type _EuiThemeBrandTextColors = {
     textWarning: ColorModeSwitch;
     textRisk: ColorModeSwitch;
     textDanger: ColorModeSwitch;
+    textAssistance: ColorModeSwitch;
 };
 export declare type _EuiThemeShadeColors = {
     /**
@@ -167,6 +168,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundBaseWarning: ColorModeSwitch;
     backgroundBaseRisk: ColorModeSwitch;
     backgroundBaseDanger: ColorModeSwitch;
+    backgroundBaseAssistance: ColorModeSwitch;
     backgroundBaseSubdued: ColorModeSwitch;
     backgroundBasePlain: ColorModeSwitch;
     backgroundBaseDisabled: ColorModeSwitch;
@@ -174,6 +176,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundBaseFormsPrepend: ColorModeSwitch;
     backgroundBaseFormsControlDisabled: ColorModeSwitch;
     backgroundBaseInteractiveHover: ColorModeSwitch;
+    backgroundBaseInteractiveHoverAssistance: ColorModeSwitch;
     backgroundBaseInteractiveSelect: ColorModeSwitch;
     backgroundBaseInteractiveSelectHover: ColorModeSwitch;
     backgroundBaseInteractiveOverlay: ColorModeSwitch;
@@ -187,6 +190,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundLightWarning: ColorModeSwitch;
     backgroundLightRisk: ColorModeSwitch;
     backgroundLightDanger: ColorModeSwitch;
+    backgroundLightAssistance: ColorModeSwitch;
     backgroundLightText: ColorModeSwitch;
     backgroundFilledPrimary: ColorModeSwitch;
     backgroundFilledAccent: ColorModeSwitch;
@@ -196,6 +200,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundFilledWarning: ColorModeSwitch;
     backgroundFilledRisk: ColorModeSwitch;
     backgroundFilledDanger: ColorModeSwitch;
+    backgroundFilledAssistance: ColorModeSwitch;
     backgroundFilledText: ColorModeSwitch;
 };
 /** TODO: remove once usages are re-mapped */
@@ -234,6 +239,7 @@ export declare type _EuiThemeBorderColors = {
     borderBaseWarning: ColorModeSwitch;
     borderBaseRisk: ColorModeSwitch;
     borderBaseDanger: ColorModeSwitch;
+    borderBaseAssistance: ColorModeSwitch;
     borderBasePlain: ColorModeSwitch;
     borderBaseSubdued: ColorModeSwitch;
     borderBaseProminent: ColorModeSwitch;
@@ -255,6 +261,7 @@ export declare type _EuiThemeBorderColors = {
     borderStrongWarning: ColorModeSwitch;
     borderStrongRisk: ColorModeSwitch;
     borderStrongDanger: ColorModeSwitch;
+    borderStrongAssistance: ColorModeSwitch;
     borderStrongText: ColorModeSwitch;
 };
 export declare type _EuiThemeVisColors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-common",
-  "version": "8.0.0",
+  "version": "9.0.0-snapshot.1776170631053",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -10,6 +10,7 @@
     "build:compile:cjs": "NODE_ENV=production NO_COREJS_POLYFILL=true babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx",
     "build:types": "NODE_ENV=production tsc --project tsconfig.types.json",
     "build-pack": "yarn build && npm pack",
+    "watch": "node ../../scripts/watch-eui.js --package @elastic/eui-theme-common",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
     "lint-es": "eslint --cache src/**/*.ts --max-warnings 0",
     "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
@@ -82,5 +83,6 @@
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"
-  }
+  },
+  "stableVersion": "9.0.0"
 }