[Visual Refresh] Add forms.maxWidth token (#8221)

packages/eui-theme-borealis/src/variables/_forms.ts

@@ -5,6 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { computed, mathWithUnits } from '@elastic/eui-theme-common';
 import {
   dark_background_colors,
   dark_border_colors,
@@ -60,6 +61,10 @@ const _dark_forms = {
 };
 
 export const forms = {
+  maxWidth: computed(
+    ([base]) => mathWithUnits(base, (x) => x * 25),
+    ['size.base']
+  ),
   LIGHT: _forms,
   DARK: _dark_forms,
 };

packages/eui-theme-common/src/global_styling/functions/index.ts

@@ -7,3 +7,4 @@
  */
 
 export * from './size';
+export * from './math';

packages/eui-theme-common/src/global_styling/functions/math.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Utility for performing math callbacks on a string with CSS units
+ * and returning a string with its unit preserved.
+ *
+ * Example usage:
+ * 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';
+ */
+type ValueTypes = string | number | undefined; // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
+
+export const mathWithUnits = (
+  values: ValueTypes | ValueTypes[], // Can accept a single input or array of inputs
+  callback: (...args: number[]) => number, // Can be multiplication, division, addition, etc.
+  unit: string = '' // Optional: allow specifying an override unit to return
+) => {
+  if (!Array.isArray(values)) values = [values];
+
+  const foundNumericValues: number[] = [];
+  let foundUnit = '';
+
+  values.forEach((value) => {
+    if (typeof value === 'string') {
+      const regex = /(?<value>-?[\d.]+)(?<unit>%|[a-zA-Z]*)/;
+      const matches = regex.exec(value);
+
+      const numericValue = Number(matches?.groups?.value);
+
+      if (!isNaN(numericValue)) {
+        foundNumericValues.push(numericValue);
+      } else {
+        throw new Error('No valid numeric value found');
+      }
+
+      if (!unit && matches?.groups?.unit) {
+        if (!foundUnit) {
+          foundUnit = matches.groups.unit;
+        } else if (foundUnit !== matches.groups.unit) {
+          throw new Error(
+            'Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead'
+          );
+        }
+      }
+    } else if (typeof value === 'number') {
+      foundNumericValues.push(value);
+    } else {
+      throw new Error('Invalid value type - pass a string or number');
+    }
+  });
+
+  return `${callback(...foundNumericValues)}${unit || foundUnit}`;
+};

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -8,7 +8,7 @@
 
 import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
 import { _EuiThemeButtonColors } from './buttons';
-import { _EuiThemeFormColors } from './forms';
+import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 
 export type _EuiThemeComponentColors = {
   buttonGroupBorderColor: ColorModeSwitch;
@@ -122,7 +122,7 @@ export type _EuiThemeComponentColors = {
 
 export type _EuiThemeComponents = {
   buttons: StrictColorModeSwitch<_EuiThemeButtonColors>;
-  forms: StrictColorModeSwitch<_EuiThemeFormColors>;
+  forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
   /**
    * internal-only key that holds temporary tokens used while migrating themes
    */

packages/eui-theme-common/src/global_styling/variables/forms.ts

@@ -8,6 +8,10 @@
 
 import { ColorModeSwitch } from '../types';
 
+export type _EuiThemeForm = {
+  maxWidth: string;
+};
+
 export type _EuiThemeFormColors = {
   background: ColorModeSwitch;
   backgroundDisabled: ColorModeSwitch;

packages/eui/src/components/form/form.styles.ts

@@ -18,7 +18,7 @@ import {
 // don't need the extra overhead/color computing expense of every form var.
 // For microperf, we're making this its own util
 export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
-  mathWithUnits(euiTheme.size.base, (x) => x * 25);
+  euiTheme.components.forms.maxWidth;
 
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;

packages/eui/src/global_styling/functions/math.ts

@@ -6,55 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * Utility for performing math callbacks on a string with CSS units
- * and returning a string with its unit preserved.
- *
- * Example usage:
- * 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';
- */
-type ValueTypes = string | number | undefined; // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
-
-export const mathWithUnits = (
-  values: ValueTypes | ValueTypes[], // Can accept a single input or array of inputs
-  callback: (...args: number[]) => number, // Can be multiplication, division, addition, etc.
-  unit: string = '' // Optional: allow specifying an override unit to return
-) => {
-  if (!Array.isArray(values)) values = [values];
-
-  const foundNumericValues: number[] = [];
-  let foundUnit = '';
-
-  values.forEach((value) => {
-    if (typeof value === 'string') {
-      const regex = /(?<value>-?[\d.]+)(?<unit>%|[a-zA-Z]*)/;
-      const matches = regex.exec(value);
-
-      const numericValue = Number(matches?.groups?.value);
-
-      if (!isNaN(numericValue)) {
-        foundNumericValues.push(numericValue);
-      } else {
-        throw new Error('No valid numeric value found');
-      }
-
-      if (!unit && matches?.groups?.unit) {
-        if (!foundUnit) {
-          foundUnit = matches.groups.unit;
-        } else if (foundUnit !== matches.groups.unit) {
-          throw new Error(
-            'Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead'
-          );
-        }
-      }
-    } else if (typeof value === 'number') {
-      foundNumericValues.push(value);
-    } else {
-      throw new Error('Invalid value type - pass a string or number');
-    }
-  });
-
-  return `${callback(...foundNumericValues)}${unit || foundUnit}`;
-};
+export { mathWithUnits } from '@elastic/eui-theme-common';

packages/eui/src/themes/amsterdam/global_styling/variables/_forms.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { mathWithUnits } from '@elastic/eui-theme-common';
+
 import { computed } from '../../../../services/theme/utils';
 import {
   darken,
@@ -122,6 +124,10 @@ const _dark_forms = {
 };
 
 export const forms = {
+  maxWidth: computed(
+    ([base]) => mathWithUnits(base, (x) => x * 25),
+    ['size.base']
+  ),
   LIGHT: _forms,
   DARK: _dark_forms,
 };