@elastic/eui-theme-common 0.0.8 → 0.0.10

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 export interface _EuiThemeFocus {
     /**
      * Default color of the focus ring, some components may override this property

package/lib/{cjs/global_styling → esm/services/theme}/types.d.ts

@@ -1,15 +1,15 @@
 import type { CSSObject } from '@emotion/react';
-import type { RecursivePartial, ValueOf } from '../types';
-import { _EuiThemeAnimation } from './variables/animations';
-import { _EuiThemeBreakpoints } from './variables/breakpoint';
-import { _EuiThemeBorder } from './variables/borders';
-import { _EuiThemeColors } from './variables/colors';
-import { _EuiThemeBase, _EuiThemeSizes } from './variables/size';
-import { _EuiThemeFont } from './variables/typography';
-import { _EuiThemeFocus } from './variables/states';
-import { _EuiThemeLevels } from './variables/levels';
-import { _EuiThemeComponents } from './variables/components';
-import { _EuiThemeFlags } from './variables';
+import type { RecursivePartial, ValueOf } from '../../types';
+import { _EuiThemeAnimation } from '../../global_styling/variables/animations';
+import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint';
+import { _EuiThemeBorder } from '../../global_styling/variables/borders';
+import { _EuiThemeColors } from '../../global_styling/variables/colors';
+import { _EuiThemeBase, _EuiThemeSizes } from '../../global_styling/variables/size';
+import { _EuiThemeFont } from '../../global_styling/variables/typography';
+import { _EuiThemeFocus } from '../../global_styling/variables/states';
+import { _EuiThemeLevels } from '../../global_styling/variables/levels';
+import { _EuiThemeComponents } from '../../global_styling/variables/components';
+import { _EuiThemeFlags } from '../../global_styling/variables';
 export declare const COLOR_MODES_STANDARD: {
     readonly light: "LIGHT";
     readonly dark: "DARK";
@@ -65,4 +65,8 @@ export declare type EuiThemeNested = {
     setNearestThemeCSSVariables: Function;
     themeCSSVariables?: CSSObject;
 };
-//# sourceMappingURL=types.d.ts.map
+export interface UseEuiTheme<T extends {} = {}> {
+    euiTheme: EuiThemeComputed<T>;
+    colorMode: EuiThemeColorModeStandard;
+    modifications: EuiThemeModifications<T>;
+}

package/lib/esm/services/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/services/theme/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAoBH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AACX,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-common",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.202",
+    "chroma-js": "^2.4.2",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
@@ -32,6 +33,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@emotion/react": "^11.11.0",
+    "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

package/src/global_styling/functions/_colors.scss

@@ -16,7 +16,7 @@
 // For theming. Checks the text color and tells us whether it's light or dark.
 // Based on that we either tint (add white) or shade (add black).
 @function tintOrShade($color, $tint, $shade) {
-  @if (lightness($euiTextColor) > 50) {
+  @if (lightness($euiColorTextParagraph) > 50) {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -25,7 +25,7 @@
 
 // The reverse of the above
 @function shadeOrTint($color, $shade, $tint) {
-  @if (lightness($euiTextColor) < 50) {
+  @if (lightness($euiColorTextParagraph) < 50) {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -35,7 +35,7 @@
 // Similar to above, but uses the light or dark color based
 // on whether it's the light or dark theme
 @function lightOrDarkTheme($lightColor, $darkColor) {
-  @if (lightness($euiTextColor) < 50) {
+  @if (lightness($euiColorTextParagraph) < 50) {
     @return $lightColor;
   } @else {
     @return $darkColor;

package/src/global_styling/mixins/_form.scss

@@ -40,7 +40,7 @@
 @mixin euiFormControlText {
   @include euiFont;
   font-size: $euiFontSizeS;
-  color: $euiTextColor;
+  color: $euiColorTextParagraph;
 
   @include euiPlaceholderPerBrowser {
     color: $euiFormControlPlaceholderText;
@@ -168,8 +168,8 @@
 
 @mixin euiFormControlReadOnlyStyle {
   cursor: default;
-  color: $euiTextColor;
-  -webkit-text-fill-color: $euiTextColor; // Required for Safari
+  color: $euiColorTextParagraph;
+  -webkit-text-fill-color: $euiColorTextParagraph; // Required for Safari
   // Use transparency since there is no border and in case form is on a non-white background
   background: $euiFormBackgroundReadOnlyColor;
   border-color: transparent;

package/src/global_styling/mixins/_shadow.scss

@@ -1,5 +1,5 @@
 @function shadowOpacity($opacity) {
-  @if (lightness($euiTextColor) < 50) {
+  @if (lightness($euiColorTextParagraph) < 50) {
     @return $opacity * 1;
   } @else {
     @return $opacity * 2.5;

package/src/global_styling/mixins/_typography.scss

@@ -53,13 +53,13 @@
 }
 
 @mixin euiText {
-  color: $euiTextColor;
+  color: $euiColorTextParagraph;
   font-weight: $euiFontWeightRegular;
 }
 
 @mixin euiTitle($size: 'm') {
   @include euiTextBreakWord;
-  color: $euiTitleColor;
+  color: $euiColorTextHeading;
 
   @if (map-has-key($euiTitles, $size)) {
     @each $property, $value in map-get($euiTitles, $size) {

package/lib/cjs/global_styling/types.d.ts.map

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

package/lib/cjs/global_styling/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","names":["COLOR_MODES_STANDARD","exports","light","dark","COLOR_MODES_INVERSE"],"sources":["../../../src/global_styling/types.ts"],"sourcesContent":["/*\n * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one\n * or more contributor license agreements. Licensed under the Elastic License\n * 2.0 and the Server Side Public License, v 1; you may not use this file except\n * in compliance with, at your election, the Elastic License 2.0 or the Server\n * Side Public License, v 1.\n */\n\nimport type { CSSObject } from '@emotion/react';\n\nimport type { RecursivePartial, ValueOf } from '../types';\n\nimport { _EuiThemeAnimation } from './variables/animations';\nimport { _EuiThemeBreakpoints } from './variables/breakpoint';\nimport { _EuiThemeBorder } from './variables/borders';\nimport { _EuiThemeColors } from './variables/colors';\nimport { _EuiThemeBase, _EuiThemeSizes } from './variables/size';\nimport { _EuiThemeFont } from './variables/typography';\nimport { _EuiThemeFocus } from './variables/states';\nimport { _EuiThemeLevels } from './variables/levels';\nimport { _EuiThemeComponents } from './variables/components';\nimport { _EuiThemeFlags } from './variables';\n\nexport const COLOR_MODES_STANDARD = {\n  light: 'LIGHT',\n  dark: 'DARK',\n} as const;\nexport const COLOR_MODES_INVERSE = 'INVERSE' as const;\n\nexport type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE;\nexport type EuiThemeColorModeStandard = ValueOf<typeof COLOR_MODES_STANDARD>;\nexport type EuiThemeColorMode =\n  | 'light'\n  | 'dark'\n  | EuiThemeColorModeStandard\n  | 'inverse'\n  | EuiThemeColorModeInverse;\n\nexport type ColorModeSwitch<T = string> =\n  | {\n      [key in EuiThemeColorModeStandard]: T;\n    }\n  | T;\n\nexport type StrictColorModeSwitch<T = string> = {\n  [key in EuiThemeColorModeStandard]: T;\n};\n\nexport type EuiThemeShape = {\n  colors: _EuiThemeColors;\n  /** - Default value: 16 */\n  base: _EuiThemeBase;\n  /**\n   * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information\n   */\n  size: _EuiThemeSizes;\n  font: _EuiThemeFont;\n  border: _EuiThemeBorder;\n  focus: _EuiThemeFocus;\n  animation: _EuiThemeAnimation;\n  breakpoint: _EuiThemeBreakpoints;\n  levels: _EuiThemeLevels;\n  components: _EuiThemeComponents;\n  flags: _EuiThemeFlags;\n};\n\nexport type EuiThemeSystem<T = {}> = {\n  root: EuiThemeShape & T;\n  model: EuiThemeShape & T;\n  key: string;\n};\n\nexport type EuiThemeModifications<T = {}> = RecursivePartial<EuiThemeShape & T>;\n\nexport type ComputedThemeShape<\n  T,\n  P = string | number | bigint | boolean | null | undefined\n> = T extends P | ColorModeSwitch<infer X>\n  ? T extends ColorModeSwitch<X>\n    ? X extends P\n      ? X\n      : {\n          [K in keyof (X &\n            Exclude<\n              T,\n              keyof X | keyof StrictColorModeSwitch\n            >)]: ComputedThemeShape<\n            (X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)[K],\n            P\n          >;\n        }\n    : T\n  : {\n      [K in keyof T]: ComputedThemeShape<T[K], P>;\n    };\n\nexport type EuiThemeComputed<T = {}> = ComputedThemeShape<EuiThemeShape & T> & {\n  themeName: string;\n};\n\nexport type EuiThemeNested = {\n  isGlobalTheme: boolean;\n  hasDifferentColorFromGlobalTheme: boolean;\n  bodyColor: string;\n  colorClassName: string;\n  setGlobalCSSVariables: Function;\n  globalCSSVariables?: CSSObject;\n  setNearestThemeCSSVariables: Function;\n  themeCSSVariables?: CSSObject;\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBO,IAAMA,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG;EAClCE,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE;AACR,CAAU;AACH,IAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAG,SAAkB","ignoreList":[]}

package/lib/esm/global_styling/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/global_styling/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAiBH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AACX,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAkB,CAAC"}