[CSS-in-JS] Global theme

scripts/babel/proptypes-from-ts-props/index.js

@@ -770,7 +770,7 @@ function getPropTypesForNode(node, optional, state) {
           types.arrayExpression(
             node.properties.map(property =>
               types.stringLiteral(
-                property.key.name || property.key.name || property.key.value
+                property.key ? property.key.name || property.key.value : property.argument.name
               )
             )
           ),

src-docs/src/components/with_theme/theme_context.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
-import {
-  EuiThemeProvider,
-  EuiThemeDefault,
-  EuiThemeAmsterdam,
-} from '../../../../src/services';
+import { EuiThemeProvider } from '../../../../src/services';
+import { EuiThemeAmsterdam } from '../../../../src/themes/eui-amsterdam/theme';
+import { EuiThemeDefault } from '../../../../src/themes/eui/theme';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 

src-docs/src/routes.js

@@ -223,6 +223,7 @@ import { I18nTokens } from './views/package/i18n_tokens';
 import { SuperSelectExample } from './views/super_select/super_select_example';
 
 import { ThemeExample } from './views/theme/theme_example';
+import ThemeValues from './views/theme/values';
 
 /** Elastic Charts */
 
@@ -238,10 +239,6 @@ import { ElasticChartsPieExample } from './views/elastic_charts/pie_example';
 
 import { ElasticChartsAccessibilityExample } from './views/elastic_charts/accessibility_example';
 
-/** ! Temporary ! */
-
-import Canopy from './views/emotion/canopy';
-
 const createExample = (example, customTitle) => {
   if (!example) {
     throw new Error(
@@ -324,18 +321,6 @@ const createMarkdownExample = (example, title) => {
 };
 
 const navigation = [
-  {
-    name: 'Temporary',
-    items: [
-      createExample(
-        {
-          intro: <Canopy />,
-          sections: [],
-        },
-        'Canopy'
-      ),
-    ],
-  },
   {
     name: 'Guidelines',
     items: [
@@ -496,10 +481,20 @@ const navigation = [
       ResizeObserverExample,
       ResponsiveExample,
       TextDiffExample,
-      ThemeExample,
       WindowEventExample,
     ].map((example) => createExample(example)),
   },
+  {
+    name: 'Theming',
+    items: [
+      createExample(ThemeExample, 'Theme provider'),
+      {
+        name: 'Global values',
+        component: ThemeValues,
+        isNew: true,
+      },
+    ],
+  },
   {
     name: 'Package',
     items: [Changelog, I18nTokens],

src-docs/src/services/playground/knobs.js

@@ -96,7 +96,38 @@ export const humanizeType = (type) => {
       humanizedType = type.name;
   }
 
-  return humanizedType;
+  let typeMarkup;
+
+  if (humanizedType) {
+    typeMarkup = humanizedType;
+
+    const functionMatches = [
+      ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
+    ];
+
+    const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
+
+    if (functionMatches.length > 0) {
+      let elements = '';
+      let j = 0;
+      for (let i = 0; i < types.length; i++) {
+        if (functionMatches[j]) {
+          elements =
+            `${elements}` +
+            `${types[i]}` +
+            '\n' +
+            `${functionMatches[j][0]}` +
+            '\n';
+          j++;
+        } else {
+          elements = `${elements}` + `${types[i]}` + '\n';
+        }
+      }
+      typeMarkup = elements;
+    }
+  }
+
+  return typeMarkup || humanizedType;
 };
 
 const getTooltip = (description, type, name) => (
@@ -359,87 +390,46 @@ const Knob = ({
 };
 
 const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
-  return knobNames.map((name, idx) => {
-    const codeBlockProps = {
-      className: 'guideSection__tableCodeBlock',
-      paddingSize: 'none',
-      language: 'ts',
-    };
-
-    /**
-     * TS Type
-     */
-    let humanizedType;
-
-    if (
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.type
-    )
-      humanizedType = humanizeType(state[name].custom.origin.type);
-
-    let typeMarkup;
-
-    if (humanizedType) {
-      typeMarkup = humanizedType && (
-        <EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
-      );
-
-      const functionMatches = [
-        ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
-      ];
-
-      const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
-
-      if (functionMatches.length > 0) {
-        let elements = '';
-        let j = 0;
-        for (let i = 0; i < types.length; i++) {
-          if (functionMatches[j]) {
-            elements =
-              `${elements}` +
-              `${types[i]}` +
-              '\n' +
-              `${functionMatches[j][0]}` +
-              '\n';
-            j++;
-          } else {
-            elements = `${elements}` + `${types[i]}` + '\n';
-          }
-        }
-        typeMarkup = (
-          <EuiCodeBlock {...codeBlockProps}>{elements}</EuiCodeBlock>
-        );
-      }
-    }
+  const codeBlockProps = {
+    className: 'guideSection__tableCodeBlock',
+    paddingSize: 'none',
+    language: 'ts',
+  };
 
+  return knobNames.map((name, idx) => {
     /**
      * Prop name
      */
     let humanizedName = <strong className="eui-textBreakNormal">{name}</strong>;
 
-    if (
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.required
-    ) {
+    if (state[name].custom?.origin?.required) {
       humanizedName = (
         <>
           {humanizedName} <EuiTextColor color="danger">(required)</EuiTextColor>
         </>
       );
     }
 
+    /**
+     * TS Type
+     */
+    let typeMarkup;
+
+    if (state[name].custom?.origin?.type) {
+      const humanizedType = humanizeType(state[name].custom.origin.type);
+
+      if (humanizedType) {
+        typeMarkup = (
+          <EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
+        );
+      }
+    }
+
     /**
      * Default value
      */
     let defaultValueMarkup;
-    if (
-      // !isPlayground &&
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.defaultValue
-    ) {
+    if (state[name].custom?.origin?.defaultValue) {
       const defaultValue = state[name].custom.origin.defaultValue;
       defaultValueMarkup = (
         <EuiText size="xs">

src-docs/src/views/code/code_example.js

@@ -68,9 +68,7 @@ export const CodeExample = {
           <EuiLink external href="https://prismjs.com/">
             library
           </EuiLink>
-          .
-          <br />
-          The <EuiCode>language</EuiCode> prop can also be omitted to simply
+          . The <EuiCode>language</EuiCode> prop can also be omitted to simply
           render formatted but unhighlighted code.
         </p>
         <p>