Palette again using similar hues as before

elastic · Dec 18, 2019 · 5ced4fc · 5ced4fc
1 parent ebd088c
commit 5ced4fc
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 224 deletions.
diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js
@@ -5,13 +5,10 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiSpacer,
-  EuiText,
-  EuiCode,
-  EuiCopy,
-  EuiLink,
 } from '../../../../src/components';
 
 import { palettes } from '../../../../src/services';
+import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
 
 const customPalettes = [
   {
@@ -38,40 +35,26 @@ export default () => (
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} style={{ maxWidth: 240 }}>
             <EuiFlexGroup
               gutterSize="none"
               alignItems="flexStart"
               responsive={false}
               wrap>
               {palette.palette.map(hexCode => (
-                <EuiFlexItem
-                  key={hexCode}
-                  grow={false}
-                  className={'guideColorPalette__swatch'}>
-                  <span title={hexCode} style={{ backgroundColor: hexCode }} />
-                </EuiFlexItem>
+                <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />
               ))}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiText>
-              <EuiCopy
-                beforeMessage="Click to copy palette config"
-                textToCopy={`palettes.euiPaletteColorBlind(${
-                  i > 0 ? i + 1 : ''
-                }${i > 1 ? ', true' : ''}).colors`}>
-                {copy => (
-                  <EuiLink onClick={copy}>
-                    <EuiCode>
-                      {`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${
-                        i > 1 ? ', true' : ''
-                      })`}
-                    </EuiCode>
-                  </EuiLink>
-                )}
-              </EuiCopy>
-            </EuiText>
+            <ColorPaletteCopyCode
+              textToCopy={`palettes.euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${
+                i > 1 ? ', true' : ''
+              }).colors`}
+              code={`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${
+                i > 1 ? ', true' : ''
+              })`}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="xl" />

diff --git a/src-docs/src/views/color_palette/color_palette_custom.js b/src-docs/src/views/color_palette/color_palette_custom.js
@@ -3,16 +3,13 @@ import React, { Fragment, useState } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiCopy,
-  EuiText,
   EuiRange,
-  EuiCode,
-  EuiLink,
   EuiFormRow,
   EuiSpacer,
 } from '../../../../src/components';
 
 import { palettes, colorPalette } from '../../../../src/services';
+import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
 
 const customPalettes = [
   [palettes.euiPaletteColorBlind().colors[3]],
@@ -51,36 +48,21 @@ export default () => {
       {customPalettes.map((palette, i) => (
         <EuiFlexGroup alignItems="center" key={i}>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup
-              gutterSize="none"
-              alignItems="flexStart"
-              responsive={false}>
+            <EuiFlexGroup gutterSize="none" responsive={false}>
               {colorPalette(palette, Number(length), i > 1).map(hexCode => (
-                <EuiFlexItem
-                  key={hexCode}
-                  grow={false}
-                  className={'guideColorPalette__swatch'}>
-                  <span title={hexCode} style={{ backgroundColor: hexCode }} />
-                </EuiFlexItem>
+                <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />
               ))}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiText>
-              <EuiCopy
-                beforeMessage="Click to copy palette config"
-                textToCopy={`colorPalette([], ${length}${
-                  i > 1 ? ', true' : ''
-                });`}>
-                {copy => (
-                  <EuiLink onClick={copy}>
-                    <EuiCode>{`colorPalette([${palette}], ${length}${
-                      i > 1 ? ', true' : ''
-                    });`}</EuiCode>
-                  </EuiLink>
-                )}
-              </EuiCopy>
-            </EuiText>
+            <ColorPaletteCopyCode
+              textToCopy={`colorPalette([], ${length}${
+                i > 1 ? ', true' : ''
+              });`}
+              code={`colorPalette([${palette}], ${length}${
+                i > 1 ? ', true' : ''
+              });`}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
       ))}

diff --git a/src-docs/src/views/color_palette/color_palette_quantitative.js b/src-docs/src/views/color_palette/color_palette_quantitative.js
@@ -3,16 +3,13 @@ import React, { Fragment, useState } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiCopy,
-  EuiText,
   EuiRange,
-  EuiCode,
-  EuiLink,
   EuiFormRow,
   EuiSpacer,
 } from '../../../../src/components';
 
 import { palettes } from '../../../../src/services';
+import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
 const paletteData = { ...palettes };
 delete paletteData.euiPaletteForLightBackground;
 delete paletteData.euiPaletteForDarkBackground;
@@ -44,32 +41,17 @@ export default () => {
       {paletteNames.map(paletteName => (
         <EuiFlexGroup alignItems="center" key={paletteName}>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup
-              gutterSize="none"
-              alignItems="flexStart"
-              responsive={false}>
+            <EuiFlexGroup gutterSize="none" responsive={false}>
               {paletteData[paletteName](Number(length)).colors.map(hexCode => (
-                <EuiFlexItem
-                  key={hexCode}
-                  grow={false}
-                  className={'guideColorPalette__swatch'}>
-                  <span title={hexCode} style={{ backgroundColor: hexCode }} />
-                </EuiFlexItem>
+                <ColorPaletteFlexItem hexCode={hexCode} key={hexCode} />
               ))}
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiText>
-              <EuiCopy
-                beforeMessage="Click to copy palette config"
-                textToCopy={`palettes.${paletteName}(${length}).colors;`}>
-                {copy => (
-                  <EuiLink onClick={copy}>
-                    <EuiCode>{`${paletteName}(${length})`}</EuiCode>
-                  </EuiLink>
-                )}
-              </EuiCopy>
-            </EuiText>
+            <ColorPaletteCopyCode
+              textToCopy={`palettes.${paletteName}(${length}).colors;`}
+              code={`${paletteName}(${length})`}
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
       ))}

diff --git a/src-docs/src/views/color_palette/shared.js b/src-docs/src/views/color_palette/shared.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+  EuiFlexItem,
+  EuiCopy,
+  EuiCode,
+  EuiLink,
+} from '../../../../src/components';
+
+export const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => {
+  return (
+    <EuiFlexItem
+      key={hexCode}
+      grow={false}
+      className={classNames('guideColorPalette__swatch', className)}
+      {...rest}>
+      <span title={hexCode} style={{ backgroundColor: hexCode }} />
+    </EuiFlexItem>
+  );
+};
+
+export const ColorPaletteCopyCode = ({ textToCopy, code }) => {
+  return (
+    <span>
+      <EuiCopy
+        beforeMessage="Click to copy palette config"
+        textToCopy={textToCopy}>
+        {copy => (
+          <EuiLink onClick={copy}>
+            <EuiCode>{code}</EuiCode>
+          </EuiLink>
+        )}
+      </EuiCopy>
+    </span>
+  );
+};
diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js
@@ -7,7 +7,7 @@ export class ColorPicker extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      color: '#D15D75',
+      color: '#D36086',
     };
   }
 

diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
@@ -10,11 +10,11 @@ export const ColorStops = () => {
   const [extendedColorStops, setExtendedColorStops] = useState([
     {
       stop: 100,
-      color: '#4DAC93',
+      color: '#5BBAA0',
     },
     {
       stop: 250,
-      color: '#D15D75',
+      color: '#D36086',
     },
     {
       stop: 350,

diff --git a/src-docs/src/views/color_picker/color_stops_range.js b/src-docs/src/views/color_picker/color_stops_range.js
@@ -22,23 +22,23 @@ export const ColorStopsRange = () => {
   };
 
   const [singleColorStops, setSingleColorStops] = useState([
-    { stop: 10, color: '#D15D75' },
+    { stop: 10, color: '#D36086' },
   ]);
 
   const handleSingleChange = colorStops => {
     setSingleColorStops(colorStops);
   };
 
   const [singleColorStops2, setSingleColorStops2] = useState([
-    { stop: 10, color: '#D15D75' },
+    { stop: 10, color: '#D36086' },
   ]);
 
   const handleSingleChange2 = colorStops => {
     setSingleColorStops2(colorStops);
   };
 
   const [singleColorStops3, setSingleColorStops3] = useState([
-    { stop: 10, color: '#D15D75' },
+    { stop: 10, color: '#D36086' },
   ]);
 
   const handleSingleChange3 = colorStops => {

diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js
@@ -10,7 +10,7 @@ import { DisplayToggles } from '../form_controls/display_toggles';
 import { useColorPicker, useColorStop } from './utils';
 
 export const KitchenSink = () => {
-  const [color, setColor] = useColorPicker('#D15D75');
+  const [color, setColor] = useColorPicker('#D36086');
   const [colorStops, setColorStops, addStop] = useColorStop(true);
 
   return (

diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js
@@ -10,7 +10,7 @@ import {
 import { useColorPicker, useColorStop } from './utils';
 
 export const Modes = () => {
-  const [color, setColor, errors] = useColorPicker('#D15D75');
+  const [color, setColor, errors] = useColorPicker('#D36086');
   const [colorStops, setColorStops] = useColorStop();
 
   return (

diff --git a/src-docs/src/views/color_picker/utils.js b/src-docs/src/views/color_picker/utils.js
@@ -10,11 +10,11 @@ export const useColorStop = (useRandomColor = false) => {
   const [colorStops, setColorStops] = useState([
     {
       stop: 20,
-      color: '#4DAC93',
+      color: '#5BBAA0',
     },
     {
       stop: 50,
-      color: '#D15D75',
+      color: '#D36086',
     },
     {
       stop: 65,

diff --git a/src-docs/src/views/combo_box/colors.js b/src-docs/src/views/combo_box/colors.js
@@ -18,7 +18,7 @@ export default class extends Component {
       },
       {
         label: 'Mimas',
-        color: '#D15D75',
+        color: '#D36086',
       },
       {
         label: 'Dione',
@@ -39,15 +39,15 @@ export default class extends Component {
       {
         label:
           "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-        color: '#E59145',
+        color: '#F19F58',
       },
       {
         label: 'Tethys',
         color: '#EEAFCF',
       },
       {
         label: 'Hyperion',
-        color: '#BAA066',
+        color: '#CDBD9D',
       },
     ];
 

diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js
@@ -31,7 +31,7 @@ export default class extends Component {
           size: 15,
         },
         label: 'Mimas',
-        color: '#D15D75',
+        color: '#D36086',
       },
       {
         value: {
@@ -67,7 +67,7 @@ export default class extends Component {
         },
         label:
           "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-        color: '#E59145',
+        color: '#F19F58',
       },
       {
         value: {
@@ -81,7 +81,7 @@ export default class extends Component {
           size: 4,
         },
         label: 'Hyperion',
-        color: '#BAA066',
+        color: '#CDBD9D',
       },
     ];
 

diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js
@@ -25,7 +25,6 @@ import { palettes } from '../../../../src/services';
 const paletteData = { ...palettes };
 delete paletteData.euiPaletteForLightBackground;
 delete paletteData.euiPaletteForDarkBackground;
-delete paletteData.euiPaletteColorBlind;
 const paletteNames = Object.keys(paletteData);
 
 const _Theming = props => {
@@ -36,7 +35,7 @@ const _Theming = props => {
     createPaletteOption(paletteName, index)
   );
 
-  const [barPalette, setBarPalette] = useState('4');
+  const [barPalette, setBarPalette] = useState('5');
   const onBarPaletteChange = value => {
     setBarPalette(value);
   };
@@ -117,12 +116,16 @@ const _Theming = props => {
 const createPaletteOption = function(paletteName, index) {
   return {
     value: String(index),
-    inputDisplay: createPalette(paletteData[paletteNames[index]](10).colors),
+    inputDisplay: createPalette(
+      paletteData[paletteNames[index]](index > 0 ? 10 : 1).colors
+    ),
     dropdownDisplay: (
       <Fragment>
         <strong>{paletteName}</strong>
         <EuiSpacer size="xs" />
-        {createPalette(paletteData[paletteNames[index]](10).colors)}
+        {createPalette(
+          paletteData[paletteNames[index]](index > 0 ? 10 : 1).colors
+        )}
       </Fragment>
     ),
   };