[Emotion] Organizing files by type vs values and added `euiTheme.leve…

…ls` (#5827)
elastic · Apr 25, 2022 · 2d99775 · 2d99775
1 parent e26811a
commit 2d99775
Show file tree

Hide file tree

Showing 54 changed files with 651 additions and 549 deletions.
diff --git a/src-docs/src/views/theme/_props.tsx b/src-docs/src/views/theme/_props.tsx
@@ -12,19 +12,21 @@ import { EuiThemeComputed, EuiThemeShape } from '../../../../src/services';
 export const EuiTheme: FunctionComponent<EuiThemeShape> = () => <div />;
 
 import {
-  _EuiThemeColors,
+  _EuiThemeColorsMode,
   _EuiThemeConstantColors,
-} from '../../../../src/global_styling/variables/_colors';
+} from '../../../../src/global_styling/variables/colors';
 
-export const EuiThemeColors: FunctionComponent<_EuiThemeColors> = () => <div />;
+export const EuiThemeColors: FunctionComponent<_EuiThemeColorsMode> = () => (
+  <div />
+);
 
 export const EuiThemeConstantColors: FunctionComponent<_EuiThemeConstantColors> = () => (
   <div />
 );
 
-import { EuiThemeSize } from '../../../../src/global_styling/variables/_size';
+import { _EuiThemeSizes } from '../../../../src/global_styling/variables/size';
 
-export const _EuiThemeSize: FunctionComponent<EuiThemeSize> = () => <div />;
+export const EuiThemeSize: FunctionComponent<_EuiThemeSizes> = () => <div />;
 
 import {
   _EuiThemeFontBase,
@@ -49,7 +51,7 @@ import {
   _EuiThemeBorderTypes,
   _EuiThemeBorderRadiusValues,
   _EuiThemeBorderWidthValues,
-} from '../../../../src/global_styling/variables/_borders';
+} from '../../../../src/global_styling/variables/borders';
 
 export const EuiThemeBorderRadiusValues: FunctionComponent<_EuiThemeBorderRadiusValues> = () => (
   <div />
@@ -64,25 +66,31 @@ export const EuiThemeBorderTypes: FunctionComponent<_EuiThemeBorderTypes> = () =
   <div />
 );
 
-import { _EuiThemeFocus } from '../../../../src/global_styling/variables/_states';
+import { _EuiThemeFocus } from '../../../../src/global_styling/variables/states';
 
 export const EuiThemeFocus: FunctionComponent<_EuiThemeFocus> = () => <div />;
 
 import {
-  _EuiThemeAnimationSpeed,
-  _EuiThemeAnimationEasing,
-} from '../../../../src/global_styling/variables/_animations';
+  _EuiThemeAnimationSpeeds,
+  _EuiThemeAnimationEasings,
+} from '../../../../src/global_styling/variables/animations';
 
-export const EuiThemeAnimationSpeed: FunctionComponent<_EuiThemeAnimationSpeed> = () => (
+export const EuiThemeAnimationSpeed: FunctionComponent<_EuiThemeAnimationSpeeds> = () => (
+  <div />
+);
+export const EuiThemeAnimationEasing: FunctionComponent<_EuiThemeAnimationEasings> = () => (
   <div />
 );
-export const EuiThemeAnimationEasing: FunctionComponent<_EuiThemeAnimationEasing> = () => (
+
+import { _EuiThemeBreakpoints } from '../../../../src/global_styling/variables/breakpoint';
+
+export const EuiThemeBreakpoints: FunctionComponent<_EuiThemeBreakpoints> = () => (
   <div />
 );
 
-import { EuiThemeBreakpoint } from '../../../../src/global_styling/variables/_breakpoint';
+import { _EuiThemeLevels } from '../../../../src/global_styling/variables/levels';
 
-export const _EuiThemeBreakpoint: FunctionComponent<EuiThemeBreakpoint> = () => (
+export const EuiThemeLevelsProps: FunctionComponent<_EuiThemeLevels> = () => (
   <div />
 );
 

diff --git a/src-docs/src/views/theme/borders/_border_js.tsx b/src-docs/src/views/theme/borders/_border_js.tsx
@@ -9,7 +9,7 @@ import {
   _EuiThemeBorderTypes,
   _EuiThemeBorderRadiusValues,
   _EuiThemeBorderWidthValues,
-} from '../../../../../src/global_styling/variables/_borders';
+} from '../../../../../src/global_styling/variables/borders';
 
 import {
   EuiThemeBorderColorValues,

diff --git a/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx b/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx
@@ -9,15 +9,15 @@ import {
   EuiCode,
 } from '../../../../../src';
 
-import { _EuiThemeBreakpoint } from '../_props';
+import { EuiThemeBreakpoints } from '../_props';
 import { getPropsFromComponent } from '../../../services/props/get_props';
 import { ThemeExample } from '../_components/_theme_example';
 import { ThemeValuesTable } from '../_components/_theme_values_table';
 
 export default () => {
   const { euiTheme } = useEuiTheme();
   const breakpoint = euiTheme.breakpoint;
-  const breakpointTypes = getPropsFromComponent(_EuiThemeBreakpoint);
+  const breakpointTypes = getPropsFromComponent(EuiThemeBreakpoints);
   const breakpoints = Object.keys(breakpointTypes);
 
   const [currentBreakpoint, setCurrentBreakpoint] = useState(

diff --git a/src-docs/src/views/theme/color/_color_js.tsx b/src-docs/src/views/theme/color/_color_js.tsx
@@ -15,7 +15,7 @@ import {
   shade_colors,
   special_colors,
   text_colors,
-} from '../../../../../src/global_styling/variables/_colors';
+} from '../../../../../src/themes/amsterdam/global_styling/variables/_colors';
 import { ThemeValuesTable } from '../_components/_theme_values_table';
 
 export const brandKeys = Object.keys(brand_colors);

diff --git a/src-docs/src/views/theme/color/_contrast_js.tsx b/src-docs/src/views/theme/color/_contrast_js.tsx
@@ -11,7 +11,7 @@ import {
   EuiPanel,
   EuiHorizontalRule,
 } from '../../../../../src';
-import { _EuiThemeColors } from '../../../../../src/global_styling/variables/_colors';
+import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables/colors';
 
 import { getContrastRatings } from './_contrast_utilities';
 import { brandKeys, brandTextKeys, shadeKeys, textKeys } from './_color_js';
@@ -21,7 +21,7 @@ const allowedColors = [...brandKeys, ...shadeKeys, 'ghost', 'ink'];
 const textVariants = [...brandTextKeys, ...textColors];
 
 type ColorSection = {
-  color: keyof _EuiThemeColors;
+  color: keyof _EuiThemeColorsMode;
   minimumContrast: string | number;
   showTextVariants: boolean;
   matchPanelColor?: boolean;
@@ -53,7 +53,7 @@ export const ColorSectionJS: FunctionComponent<ColorSection> = ({
         <EuiFlexGrid columns={2} direction="column" gutterSize="s">
           {showTextVariants && colorIsCore(color) && (
             <ColorsContrastItem
-              foreground={`${color}Text` as keyof _EuiThemeColors}
+              foreground={`${color}Text`}
               background={'body'}
               minimumContrast={minimumContrast}
             />
@@ -65,7 +65,7 @@ export const ColorSectionJS: FunctionComponent<ColorSection> = ({
             }
             return (
               <ColorsContrastItem
-                foreground={color2 as keyof _EuiThemeColors}
+                foreground={color2}
                 background={color}
                 key={color2}
                 minimumContrast={minimumContrast}
@@ -79,8 +79,8 @@ export const ColorSectionJS: FunctionComponent<ColorSection> = ({
 };
 
 type ColorsContrastItem = {
-  foreground: keyof _EuiThemeColors;
-  background: keyof _EuiThemeColors;
+  foreground: string;
+  background: string;
   minimumContrast: string | number;
 };
 
@@ -90,8 +90,10 @@ const ColorsContrastItem: FunctionComponent<ColorsContrastItem> = ({
   minimumContrast,
 }) => {
   const { euiTheme } = useEuiTheme();
-  const backgroundColor = euiTheme.colors[background];
-  const foregroundColor = euiTheme.colors[foreground];
+  const backgroundColor =
+    euiTheme.colors[background as keyof _EuiThemeColorsMode];
+  const foregroundColor =
+    euiTheme.colors[foreground as keyof _EuiThemeColorsMode];
   const backgroundIsBody = background === 'body';
 
   const contrast = chroma.contrast(backgroundColor, foregroundColor);

diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx
@@ -20,7 +20,7 @@ import { brandKeys, shadeKeys } from './_color_js';
 
 import { ContrastSlider } from './_contrast_slider';
 import { ratingAA } from './_contrast_utilities';
-import { _EuiThemeColors } from '../../../../../src/global_styling/variables/_colors';
+import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables/colors';
 
 export default () => {
   const [showTextVariants, setShowTextVariants] = useState(true);
@@ -129,7 +129,7 @@ export default () => {
                 return (
                   <React.Fragment key={color}>
                     <ColorSectionJS
-                      color={color as keyof _EuiThemeColors}
+                      color={color as keyof _EuiThemeColorsMode}
                       minimumContrast={contrastValue}
                       showTextVariants={false}
                     />
@@ -172,7 +172,7 @@ export default () => {
                   <React.Fragment key={color}>
                     <ColorSectionJS
                       key={color}
-                      color={color as keyof _EuiThemeColors}
+                      color={color as keyof _EuiThemeColorsMode}
                       minimumContrast={contrastValue}
                       showTextVariants={showTextVariants}
                     />

diff --git a/src-docs/src/views/theme/customizing/_breakpoints.js b/src-docs/src/views/theme/customizing/_breakpoints.js
@@ -13,7 +13,7 @@ import { useDebouncedUpdate } from '../hooks';
 
 import { ThemeValue } from './_values';
 
-import { _EuiThemeBreakpoint } from '../_props';
+import { EuiThemeBreakpoints } from '../_props';
 
 export default ({ onThemeUpdate }) => {
   const { euiTheme } = useEuiTheme();
@@ -24,7 +24,7 @@ export default ({ onThemeUpdate }) => {
     onUpdate: onThemeUpdate,
   });
 
-  const breakpointTypes = getPropsFromComponent(_EuiThemeBreakpoint);
+  const breakpointTypes = getPropsFromComponent(EuiThemeBreakpoints);
 
   return (
     <div>

diff --git a/src-docs/src/views/theme/customizing/_colors.js b/src-docs/src/views/theme/customizing/_colors.js
@@ -20,7 +20,7 @@ import {
   shade_colors,
   special_colors,
   text_colors,
-} from '../../../../../src/global_styling/variables/_colors';
+} from '../../../../../src/themes/amsterdam/global_styling/variables/_colors';
 
 import { getPropsFromComponent } from '../../../services/props/get_props';
 

diff --git a/src-docs/src/views/theme/customizing/_levels.js b/src-docs/src/views/theme/customizing/_levels.js
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+  EuiText,
+  EuiSpacer,
+  useEuiTheme,
+  EuiPanel,
+  EuiTitle,
+} from '../../../../../src';
+
+import { getPropsFromComponent } from '../../../services/props/get_props';
+import { useDebouncedUpdate } from '../hooks';
+
+import { ThemeValue } from './_values';
+
+import { EuiThemeLevelsProps } from '../_props';
+
+export default ({ onThemeUpdate }) => {
+  const { euiTheme } = useEuiTheme();
+  const levels = euiTheme.levels;
+  const [levelClone, updateLevel] = useDebouncedUpdate({
+    property: 'levels',
+    value: levels,
+    onUpdate: onThemeUpdate,
+  });
+
+  const levelsTypes = getPropsFromComponent(EuiThemeLevelsProps);
+
+  return (
+    <div>
+      <EuiText>
+        <h2>Levels (z-index)</h2>
+      </EuiText>
+      <EuiSpacer size="xl" />
+      <EuiPanel color="subdued">
+        <EuiTitle size="xs">
+          <h3>
+            <code>_EuiThemeLevels</code>
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="s" grow={false}>
+          <p>
+            This list is a stringent set of leveling constants. It is fragile
+            and yet the values should be considered only competitive as
+            siblings.
+          </p>
+        </EuiText>
+
+        <EuiSpacer />
+
+        {Object.keys(levelsTypes).map((prop) => {
+          return (
+            <ThemeValue
+              key={prop}
+              property="levels"
+              type={levelsTypes[prop]}
+              name={prop}
+              value={levelClone[prop]}
+              onUpdate={(value) => updateLevel(prop, value)}
+              groupProps={{
+                alignItems: 'center',
+              }}
+              numberProps={{
+                style: { width: 140 },
+              }}
+            />
+          );
+        })}
+      </EuiPanel>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/theme/customizing/_size.js b/src-docs/src/views/theme/customizing/_size.js
@@ -12,7 +12,7 @@ import {
 
 import { getPropsFromComponent } from '../../../services/props/get_props';
 import { useDebouncedUpdate } from '../hooks';
-import { EuiTheme, _EuiThemeSize } from '../_props';
+import { EuiTheme, EuiThemeSize } from '../_props';
 import { ThemeValue } from './_values';
 
 export default ({ onThemeUpdate }) => {
@@ -26,7 +26,7 @@ export default ({ onThemeUpdate }) => {
   });
 
   const themeProps = getPropsFromComponent(EuiTheme);
-  const themeSizeProps = getPropsFromComponent(_EuiThemeSize);
+  const themeSizeProps = getPropsFromComponent(EuiThemeSize);
 
   return (
     <div>

diff --git a/src-docs/src/views/theme/customizing/values.tsx b/src-docs/src/views/theme/customizing/values.tsx
@@ -37,6 +37,8 @@ import Border from './_border';
 import Animation from './_animation';
 // @ts-ignore Importing from JS
 import Breakpoints from './_breakpoints';
+// @ts-ignore Importing from JS
+import Levels from './_levels';
 
 import Sass from './_sass';
 
@@ -109,6 +111,10 @@ export default () => {
 
             <Animation onThemeUpdate={updateTheme} />
 
+            <EuiHorizontalRule margin="xxl" />
+
+            <Levels onThemeUpdate={updateTheme} />
+
             <EuiSpacer />
           </>
         )}