elastic · cchaos · Oct 6, 2021 · Oct 5, 2021 · Oct 5, 2021 · Oct 5, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `39.0.0`.
+- Added support for `ghost` and `text` `EuiIcon` colors on Elastic logos ([#5245](https://github.com/elastic/eui/pull/5245))
 
 ## [`39.0.0`](https://github.com/elastic/eui/tree/v39.0.0)
 

diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
@@ -104,14 +104,23 @@ export const IconExample = {
     },
     {
       title: 'Elastic logos',
+      wrapText: false,
       text: (
-        <p>
-          Product logos follow similar rules as app logos. Note the use of{' '}
-          <EuiCode>.euiIcon__fillNegative</EuiCode> on portions of the SVGs to
-          handle flipping colors for dark mode.
-        </p>
+        <>
+          <EuiText>
+            <p>
+              These logos are restricted in use to Elastic products or when
+              referencing Elastic products. They are multi-color with some
+              internal paths having a class of{' '}
+              <EuiCode>.euiIcon__fillNegative</EuiCode> to handle flipping
+              colors for dark mode. The only other colors most of them support
+              are ghost and text which turn them into a solid shape.
+            </p>
+          </EuiText>
+          <EuiSpacer />
+          <Logos />
+        </>
       ),
-      demo: <Logos />,
     },
     {
       title: 'Apps',

diff --git a/src-docs/src/views/icon/logos.js b/src-docs/src/views/icon/logos.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
 
 import {
   EuiFlexGrid,
@@ -8,18 +9,19 @@ import {
   EuiCodeBlock,
   EuiSpacer,
   EuiCopy,
+  EuiSplitPanel,
+  EuiButtonGroup,
 } from '../../../../src/components';
 
 export const iconTypes = [
+  'logoElastic',
+  'logoElasticStack',
+  'logoElasticsearch',
   'logoAppSearch',
   'logoBeats',
   'logoBusinessAnalytics',
-  'logoCode',
   'logoCloud',
   'logoCloudEnterprise',
-  'logoElastic',
-  'logoElasticStack',
-  'logoElasticsearch',
   'logoEnterpriseSearch',
   'logoKibana',
   'logoLogging',
@@ -31,40 +33,73 @@ export const iconTypes = [
   'logoSiteSearch',
   'logoUptime',
   'logoWorkplaceSearch',
-].sort();
+];
+
+export const allowedColors = ['multi', 'ghost', 'text'];
+
+export default () => {
+  const [showGhost, setShowGhost] = useState(false);
+  const [iconColor, setIconColor] = useState(allowedColors[0]);
+  const panelClasses = classNames({
+    guideDemo__ghostBackground: showGhost,
+  });
 
-export default () => (
-  <>
-    <EuiCodeBlock language="html" isCopyable paddingSize="m">
-      {'<EuiIcon type="logoElasticsearch" size="xl" />'}
-    </EuiCodeBlock>
-    <EuiSpacer />
-    <EuiFlexGrid direction="column" columns={3}>
-      {iconTypes.map((iconType) => (
-        <EuiFlexItem key={iconType}>
-          <EuiCopy
-            display="block"
-            textToCopy={iconType}
-            afterMessage={`${iconType} copied`}
-          >
-            {(copy) => (
-              <EuiPanel
-                hasShadow={false}
-                hasBorder={false}
-                onClick={copy}
-                paddingSize="s"
+  return (
+    <EuiSplitPanel.Outer hasBorder>
+      <EuiSplitPanel.Inner color="subdued">
+        <EuiButtonGroup
+          legend="Logo color"
+          name="logoColor"
+          idSelected={iconColor}
+          onChange={(optionId) => {
+            setIconColor(optionId);
+            setShowGhost(optionId === 'ghost');
+          }}
+          options={allowedColors.map((color) => {
+            return {
+              id: color,
+              label: color,
+            };
+          })}
+        />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner color="transparent" className={panelClasses}>
+        <EuiCodeBlock language="html" isCopyable paddingSize="m">
+          {iconColor === 'multi'
+            ? '<EuiIcon type="logoElasticsearch" size="xl" />'
+            : `<EuiIcon type="logoElasticsearch" size="xl" color="${iconColor}" />`}
+        </EuiCodeBlock>
+        <EuiSpacer />
+        <EuiFlexGrid direction="column" columns={3}>
+          {iconTypes.map((iconType) => (
+            <EuiFlexItem key={iconType}>
+              <EuiCopy
+                display="block"
+                textToCopy={iconType}
+                afterMessage={`${iconType} copied`}
               >
-                <EuiIcon
-                  className="eui-alignMiddle"
-                  type={iconType}
-                  size="xl"
-                />{' '}
-                &emsp; <small>{iconType}</small>
-              </EuiPanel>
-            )}
-          </EuiCopy>
-        </EuiFlexItem>
-      ))}
-    </EuiFlexGrid>
-  </>
-);
+                {(copy) => (
+                  <EuiPanel
+                    hasShadow={false}
+                    hasBorder={false}
+                    onClick={copy}
+                    paddingSize="s"
+                    className={panelClasses}
+                  >
+                    <EuiIcon
+                      className="eui-alignMiddle"
+                      type={iconType}
+                      size="xl"
+                      color={iconColor === 'multi' ? undefined : iconColor}
+                    />{' '}
+                    &emsp; <small>{iconType}</small>
+                  </EuiPanel>
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  );
+};
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -4330,6 +4330,7 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `
 <svg
   aria-hidden="true"
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  data-type="logoElastic"
   fill="none"
   focusable="false"
   height="32"
@@ -4339,27 +4340,30 @@ exports[`EuiIcon props type logoElastic is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M32 16.77a6.334 6.334 0 00-1.14-3.641 6.298 6.298 0 00-3.02-2.32 9.098 9.098 0 00-.873-5.965A9.05 9.05 0 0022.56.746a9.007 9.007 0 00-5.994-.419 9.037 9.037 0 00-4.93 3.446 4.789 4.789 0 00-5.78-.07A4.833 4.833 0 004.198 9.26a6.384 6.384 0 00-3.035 2.33A6.42 6.42 0 000 15.242 6.341 6.341 0 001.145 18.9a6.305 6.305 0 003.039 2.321 9.334 9.334 0 00-.16 1.725 9.067 9.067 0 001.727 5.333 9.014 9.014 0 004.526 3.287 8.982 8.982 0 005.587-.023 9.016 9.016 0 004.5-3.322 4.789 4.789 0 005.77.074 4.833 4.833 0 001.672-5.542 6.383 6.383 0 003.032-2.331A6.419 6.419 0 0032 16.77z"
-    fill="#FFF"
+    class="outline"
+    clip-rule="evenodd"
+    d="M30.86 13.129A6.333 6.333 0 0132 16.77a6.419 6.419 0 01-1.162 3.652 6.382 6.382 0 01-3.032 2.331 4.833 4.833 0 01-1.672 5.542 4.789 4.789 0 01-5.77-.074 9.016 9.016 0 01-4.5 3.322 8.982 8.982 0 01-5.587.023 9.014 9.014 0 01-4.526-3.287 9.067 9.067 0 01-1.727-5.333c0-.579.053-1.156.16-1.725A6.305 6.305 0 011.145 18.9 6.341 6.341 0 010 15.242a6.42 6.42 0 011.163-3.652 6.384 6.384 0 013.035-2.33 4.833 4.833 0 011.658-5.557 4.789 4.789 0 015.78.07 9.037 9.037 0 014.93-3.446 9.007 9.007 0 015.994.419 9.05 9.05 0 014.407 4.098 9.097 9.097 0 01.873 5.965 6.298 6.298 0 013.02 2.32zm-18.28.658l7.002 3.211 7.066-6.213a7.85 7.85 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001zm-7.247 7.441A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001zm4.755-11.024l-4.8-1.137.002-.002a3.82 3.82 0 011.312-4.358 3.785 3.785 0 014.538.023l-1.052 5.474zm-5.216.01a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255zm18.286 17.848a3.737 3.737 0 01-2.285-.785l1.037-5.454 4.8 1.125a3.812 3.812 0 01-1.801 4.68c-.54.283-1.14.432-1.751.434zm-1.31-7.499l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.311 5.311 0 00-.936-3.01 5.282 5.282 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
+    fill="#fff"
+    fill-rule="evenodd"
   />
   <path
-    d="M12.58 13.787l7.002 3.211 7.066-6.213a7.854 7.854 0 00.152-1.557 7.944 7.944 0 00-1.54-4.704 7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92z"
+    d="M12.58 13.787l7.002 3.211 7.066-6.213a7.849 7.849 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001z"
     fill="#FEC514"
   />
   <path
-    d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.921 7.921 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248z"
+    d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001z"
     fill="#00BFB3"
   />
   <path
-    d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-4.538-.023A3.82 3.82 0 005.29 9.065"
+    d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-5.914 1.94 3.82 3.82 0 00.064 2.395"
     fill="#F04E98"
   />
   <path
     d="M4.872 10.214a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255z"
     fill="#1BA9F5"
   />
   <path
-    d="M20.873 27.277a3.737 3.737 0 002.285.785 3.783 3.783 0 003.101-1.63 3.813 3.813 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
+    d="M20.873 27.277a3.736 3.736 0 002.285.785 3.783 3.783 0 003.101-1.63 3.812 3.812 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
     fill="#93C90E"
   />
   <path

diff --git a/src/components/icon/_icon.scss b/src/components/icon/_icon.scss
@@ -40,14 +40,24 @@
   }
 }
 
-// App icon special cases for fully mono
-.euiIcon--text,
-.euiIcon--subdued,
-.euiIcon--primary,
-.euiIcon--customColor {
-  &,
-  .euiIcon__fillSecondary {
-    fill: currentColor;
+// Really force all paths to inherit when the color is ghost/text (specifically for logos)
+.euiIcon--ghost:not([data-type='logoElastic']),
+.euiIcon--text:not([data-type='logoElastic']) {
+  *[fill],
+  .euiIcon__fillNegative {
+    fill: currentColor !important; // sass-lint:disable-line no-important
+  }
+}
+
+// Elastic logo specific colors
+.euiIcon--ghost[data-type='logoElastic'],
+.euiIcon--text[data-type='logoElastic'] {
+  *[fill] {
+    fill: none !important; // sass-lint:disable-line no-important
+  }
+
+  .outline {
+    fill: currentColor !important; // sass-lint:disable-line no-important
   }
 }
 

diff --git a/src/components/icon/assets/logo_elastic.tsx b/src/components/icon/assets/logo_elastic.tsx
@@ -20,6 +20,7 @@ const EuiIconLogoElastic = ({
   ...props
 }: React.SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    data-type="logoElastic"
     xmlns="http://www.w3.org/2000/svg"
     width={32}
     height={32}
@@ -30,32 +31,35 @@ const EuiIconLogoElastic = ({
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <path
-      fill="#FFF"
-      d="M32 16.77a6.334 6.334 0 00-1.14-3.641 6.298 6.298 0 00-3.02-2.32 9.098 9.098 0 00-.873-5.965A9.05 9.05 0 0022.56.746a9.007 9.007 0 00-5.994-.419 9.037 9.037 0 00-4.93 3.446 4.789 4.789 0 00-5.78-.07A4.833 4.833 0 004.198 9.26a6.384 6.384 0 00-3.035 2.33A6.42 6.42 0 000 15.242 6.341 6.341 0 001.145 18.9a6.305 6.305 0 003.039 2.321 9.334 9.334 0 00-.16 1.725 9.067 9.067 0 001.727 5.333 9.014 9.014 0 004.526 3.287 8.982 8.982 0 005.587-.023 9.016 9.016 0 004.5-3.322 4.789 4.789 0 005.77.074 4.833 4.833 0 001.672-5.542 6.383 6.383 0 003.032-2.331A6.419 6.419 0 0032 16.77z"
+      className="outline"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M30.86 13.129A6.333 6.333 0 0132 16.77a6.419 6.419 0 01-1.162 3.652 6.382 6.382 0 01-3.032 2.331 4.833 4.833 0 01-1.672 5.542 4.789 4.789 0 01-5.77-.074 9.016 9.016 0 01-4.5 3.322 8.982 8.982 0 01-5.587.023 9.014 9.014 0 01-4.526-3.287 9.067 9.067 0 01-1.727-5.333c0-.579.053-1.156.16-1.725A6.305 6.305 0 011.145 18.9 6.341 6.341 0 010 15.242a6.42 6.42 0 011.163-3.652 6.384 6.384 0 013.035-2.33 4.833 4.833 0 011.658-5.557 4.789 4.789 0 015.78.07 9.037 9.037 0 014.93-3.446 9.007 9.007 0 015.994.419 9.05 9.05 0 014.407 4.098 9.097 9.097 0 01.873 5.965 6.298 6.298 0 013.02 2.32zm-18.28.658l7.002 3.211 7.066-6.213a7.85 7.85 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001zm-7.247 7.441A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001zm4.755-11.024l-4.8-1.137.002-.002a3.82 3.82 0 011.312-4.358 3.785 3.785 0 014.538.023l-1.052 5.474zm-5.216.01a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255zm18.286 17.848a3.737 3.737 0 01-2.285-.785l1.037-5.454 4.8 1.125a3.812 3.812 0 01-1.801 4.68c-.54.283-1.14.432-1.751.434zm-1.31-7.499l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.311 5.311 0 00-.936-3.01 5.282 5.282 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
+      fill="#fff"
     />
     <path
+      d="M12.58 13.787l7.002 3.211 7.066-6.213a7.849 7.849 0 00.152-1.557c0-1.692-.539-3.34-1.54-4.704a7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92-.001.001z"
       fill="#FEC514"
-      d="M12.58 13.787l7.002 3.211 7.066-6.213a7.854 7.854 0 00.152-1.557 7.944 7.944 0 00-1.54-4.704 7.897 7.897 0 00-4.02-2.869 7.87 7.87 0 00-4.932.086 7.9 7.9 0 00-3.92 3.007l-1.174 6.118 1.367 2.92z"
     />
     <path
+      d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.92 7.92 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248.001.001z"
       fill="#00BFB3"
-      d="M5.333 21.228A7.964 7.964 0 006.72 27.53a7.918 7.918 0 004.04 2.874 7.89 7.89 0 004.95-.097 7.921 7.921 0 003.926-3.03l1.166-6.102-1.555-2.985-7.03-3.211-6.885 6.248z"
     />
     <path
+      d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-5.914 1.94 3.82 3.82 0 00.064 2.395"
       fill="#F04E98"
-      d="M5.288 9.067l4.8 1.137L11.14 4.73a3.785 3.785 0 00-4.538-.023A3.82 3.82 0 005.29 9.065"
     />
     <path
-      fill="#1BA9F5"
       d="M4.872 10.214a5.294 5.294 0 00-2.595 1.882 5.324 5.324 0 00-.142 6.124 5.287 5.287 0 002.505 2l6.733-6.101-1.235-2.65-5.266-1.255z"
+      fill="#1BA9F5"
     />
     <path
+      d="M20.873 27.277a3.736 3.736 0 002.285.785 3.783 3.783 0 003.101-1.63 3.812 3.812 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
       fill="#93C90E"
-      d="M20.873 27.277a3.737 3.737 0 002.285.785 3.783 3.783 0 003.101-1.63 3.813 3.813 0 00.451-3.484l-4.8-1.125-1.037 5.454z"
     />
     <path
-      fill="#07C"
       d="M21.848 20.563l5.28 1.238a5.34 5.34 0 002.622-1.938 5.37 5.37 0 001.013-3.106 5.312 5.312 0 00-.936-3.01 5.283 5.283 0 00-2.475-1.944l-6.904 6.07 1.4 2.69z"
+      fill="#07C"
     />
   </svg>
 );