@elastic/eui-theme-common 0.0.3 → 0.0.5

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

@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+import { mathWithUnits } from './math';
+describe('mathWithUnits', () => {
+    describe('extracts numerical values from CSS strings with units, performs math callbacks, and returns units as is', () => {
+        test('px and multiplication', () => {
+            expect(mathWithUnits('10px', (x) => x * 10)).toEqual('100px');
+        });
+        test('em and division', () => {
+            expect(mathWithUnits('40%', (x) => x / 2)).toEqual('20%');
+        });
+        test('rem and addition', () => {
+            expect(mathWithUnits('1rem', (x) => x + 2)).toEqual('3rem');
+        });
+        test('unitless and negative values', () => {
+            expect(mathWithUnits('-5.5', (x) => x - 1.2)).toEqual('-6.7');
+        });
+        test('allows passing an optional unit if none is passed', () => {
+            expect(mathWithUnits('0', (x) => x, 'vh')).toEqual('0vh');
+        });
+    });
+    describe('handles numeric input types', () => {
+        test('unitless', () => {
+            expect(mathWithUnits(6, (x) => Math.pow(x, 2))).toEqual('36');
+        });
+        test('allows passing an optional unit', () => {
+            expect(mathWithUnits(3.5, (x) => x % 1.5, 'px')).toEqual('0.5px');
+        });
+    });
+    describe('multiple inputs', () => {
+        it('accepts an array of inputs, parses each input, and returns them as a separate arg to the callback', () => {
+            expect(mathWithUnits(['3px', '4px', '5px'], (x, y, z) => x + y + z)).toEqual('12px');
+        });
+        it('allows mixing strings and numbers', () => {
+            expect(mathWithUnits(['6px', 3], (x, y) => x / y)).toEqual('2px');
+        });
+        it('throws on multiple different unit types', () => {
+            expect(() => mathWithUnits(['1px', '1em'], (x, y) => x + y)).toThrow('Multiple units found');
+        });
+        it('allows different unit types if an override unit is passed', () => {
+            expect(mathWithUnits(['50%', '5rem'], (x, y) => x / y, 'px')).toEqual('10px');
+        });
+    });
+    describe('weird edge cases', () => {
+        it('throws on undefined', () => {
+            expect(() => mathWithUnits(undefined, (x) => x * 3)).toThrow('Invalid value type');
+        });
+        it('throws on strings that do not contain numbers', () => {
+            expect(() => mathWithUnits('no number', (x) => x * 3)).toThrow('No valid numeric value found');
+        });
+        it('throws on strings with numbers that are actually NaNs', () => {
+            expect(() => mathWithUnits('34.23.12', (x) => x * 3)).toThrow('No valid numeric value found');
+        });
+        it('ignores multiple values/units, only using the first match', () => {
+            expect(mathWithUnits('10px 20px', (x) => x)).toEqual('10px');
+        });
+        it('ignores multiple percentage signs', () => {
+            expect(mathWithUnits('100%%%', (x) => x)).toEqual('100%');
+        });
+    });
+});
+//# sourceMappingURL=math.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"math.test.js","sourceRoot":"","sources":["../../../../src/global_styling/functions/math.test.ts"],"names":[],"mappings":"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"}

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

@@ -67,7 +67,7 @@ export declare type _EuiThemeBrandTextColors = {
 export declare type _EuiThemeShadeColors = {
     /**
      * Used as the background color of primary **page content and panels** including modals and flyouts.
-     * @deprecated - use `white`
+     * @deprecated - use specific semantic color tokens instead
      */
     emptyShade: ColorModeSwitch;
     /**
@@ -97,7 +97,7 @@ export declare type _EuiThemeShadeColors = {
     darkestShade: ColorModeSwitch;
     /**
      * The opposite of `emptyShade`
-     * @deprecated - use`black`
+     * @deprecated - use specific semantic color tokens instead
      */
     fullShade: ColorModeSwitch;
 };
@@ -165,6 +165,7 @@ export declare type _EuiThemeBackgroundColors = {
     backgroundBaseSubdued: ColorModeSwitch;
     backgroundBasePlain: ColorModeSwitch;
     backgroundBaseDisabled: ColorModeSwitch;
+    backgroundBaseHighlighted: ColorModeSwitch;
     backgroundBaseFormsPrepend: ColorModeSwitch;
     backgroundBaseFormsControlDisabled: ColorModeSwitch;
     backgroundBaseInteractiveHover: ColorModeSwitch;
@@ -206,6 +207,8 @@ export declare type _EuiThemeTransparentBackgroundColors = {
     /** @deprecated */
     backgroundTransparentSubdued: ColorModeSwitch;
     /** @deprecated */
+    backgroundTransparentHighlighted: ColorModeSwitch;
+    /** @deprecated */
     backgroundTransparentPlain: ColorModeSwitch;
 };
 export declare type _EuiThemeBorderColors = {
@@ -283,6 +286,8 @@ export declare type _EuiThemeConstantColors = {
      * @deprecated
      */
     ink: string;
+    plainLight: string;
+    plainDark: string;
     vis: _EuiThemeVisColors;
 };
 export declare type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeBrandTextColors & _EuiThemeShadeColors & _EuiThemeSpecialColors & _EuiThemeTextColors & _EuiThemeBackgroundColors & _EuiThemeTransparentBackgroundColors & _EuiThemeBorderColors;

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

@@ -1,10 +1,11 @@
 import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
 import { _EuiThemeButtonColors } from './buttons';
-import { _EuiThemeFormColors } from './forms';
+import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 export declare type _EuiThemeComponentColors = {
     buttonGroupBorderColor: ColorModeSwitch;
     buttonGroupBorderColorSelected: ColorModeSwitch;
     buttonGroupFocusColor: ColorModeSwitch;
+    badgeBackground: ColorModeSwitch;
     badgeBackgroundSubdued: ColorModeSwitch;
     badgeBorderColorHollow: ColorModeSwitch;
     badgeIconButtonBackgroundHover: ColorModeSwitch;
@@ -36,9 +37,11 @@ export declare type _EuiThemeComponentColors = {
     codeSelectorIdColor: ColorModeSwitch;
     collapsibleNavGroupBackground: ColorModeSwitch;
     collapsibleNavGroupBackgroundDark: ColorModeSwitch;
+    dataGridBorderColor: ColorModeSwitch;
     dataGridVerticalLineBorderColor: ColorModeSwitch;
     dataGridRowBackgroundStriped: ColorModeSwitch;
     dataGridRowBackgroundHover: ColorModeSwitch;
+    dataGridRowBackgroundSelect: ColorModeSwitch;
     dragDropDraggingBackground: ColorModeSwitch;
     dragDropDraggingOverBackground: ColorModeSwitch;
     headerBackground: ColorModeSwitch;
@@ -46,6 +49,7 @@ export declare type _EuiThemeComponentColors = {
     headerDarkSearchBorderColor: ColorModeSwitch;
     headerDarkSectionItemBackgroundFocus: ColorModeSwitch;
     filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
+    flyoutFooterBackground: ColorModeSwitch;
     flyoutCloseButtonInsideBackground: ColorModeSwitch;
     keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;
     listGroupItemBackgroundPrimaryActive: ColorModeSwitch;
@@ -87,7 +91,7 @@ export declare type _EuiThemeComponentColors = {
 };
 export declare type _EuiThemeComponents = {
     buttons: StrictColorModeSwitch<_EuiThemeButtonColors>;
-    forms: StrictColorModeSwitch<_EuiThemeFormColors>;
+    forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
     /**
      * internal-only key that holds temporary tokens used while migrating themes
      */

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

@@ -1,4 +1,7 @@
 import { ColorModeSwitch } from '../types';
+export declare type _EuiThemeForm = {
+    maxWidth: string;
+};
 export declare type _EuiThemeFormColors = {
     background: ColorModeSwitch;
     backgroundDisabled: ColorModeSwitch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-common",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {

package/src/global_styling/index.scss

@@ -9,7 +9,4 @@
 // Mixins provide generic code expansion through helpers
 @import 'mixins/index';
 
-// Utility classes provide one-off selectors for common css problems
-@import 'utility/index';
-
 // The reset file has moved to global_styles.tsx

package/src/global_styling/mixins/_helpers.scss

@@ -81,15 +81,6 @@
   @include euiOverflowShadow('x');
 }
 
-/**
- * For quickly applying a full-height element whether using flex or not
- */
-@mixin euiFullHeight {
-  height: 100%;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
 // Hiding elements offscreen to only be read by screen reader
 // See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
 @mixin euiScreenReaderOnly {

package/src/global_styling/mixins/_shadow.scss

@@ -63,14 +63,6 @@
   }
 }
 
-@mixin euiSlightShadowHover($color: $euiShadowColor) {
-  box-shadow:
-    0 1px 5px rgba($color, shadowOpacity(.1)),
-    0 3.6px 13px rgba($color, shadowOpacity(.07)),
-    0 8.4px 23px rgba($color, shadowOpacity(.06)),
-    0 23px 35px rgba($color, shadowOpacity(.05));
-}
-
 // stylelint-disable color-named
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $euiScrollBarCornerThin * 1.25;

package/src/global_styling/variables/_size.scss

@@ -7,8 +7,6 @@ $euiSizeL:    $euiSize * 1.5 !default;
 $euiSizeXL:   $euiSize * 2 !default;
 $euiSizeXXL:  $euiSize * 2.5 !default;
 
-$euiButtonMinWidth: $euiSize * 7 !default;
-
 $euiScrollBar: $euiSize !default;
 // Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
 $euiScrollBarCorner: $euiSizeXS !default;