remap palette from eui to @kbn/palette pkg

elastic · Oct 25, 2024 · e5b22b6 · e5b22b6
1 parent 57ce853
commit e5b22b6
Show file tree

Hide file tree

Showing 92 changed files with 547 additions and 177 deletions.
diff --git a/examples/esql_ast_inspector/public/components/esql_inspector/helpers.tsx b/examples/esql_ast_inspector/public/components/esql_inspector/helpers.tsx
@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 import { EsqlQuery, Walker } from '@kbn/esql-ast';
-import { euiPaletteColorBlind } from '@elastic/eui';
+import { euiPaletteColorBlind } from '@kbn/palettes';
 import { Annotation } from '../annotations';
 
 const palette = euiPaletteColorBlind();

diff --git a/package.json b/package.json
@@ -707,6 +707,7 @@
     "@kbn/osquery-plugin": "link:x-pack/plugins/osquery",
     "@kbn/paertial-results-example-plugin": "link:examples/partial_results_example",
     "@kbn/painless-lab-plugin": "link:x-pack/plugins/painless_lab",
+    "@kbn/palettes": "link:packages/kbn-palettes",
     "@kbn/panel-loader": "link:packages/kbn-panel-loader",
     "@kbn/plugin-check": "link:packages/kbn-plugin-check",
     "@kbn/portable-dashboards-example": "link:examples/portable_dashboards_example",

diff --git a/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts b/packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts
@@ -93,7 +93,7 @@ export const getThemeSettings = (
       name: i18n.translate('core.ui_settings.params.themeNameTitle', {
         defaultMessage: 'Theme name',
       }),
-      value: 'amsterdam',
+      value: 'borealis',
       requiresPageReload: true,
       schema: schema.oneOf([
         schema.literal('amsterdam'),

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx b/packages/kbn-coloring/src/shared_components/color_mapping/categorical_color_mapping.tsx
@@ -15,6 +15,7 @@ import { colorMappingReducer, updateModel } from './state/color_mapping';
 import { Container } from './components/container/container';
 import { ColorMapping } from './config';
 import { uiReducer } from './state/ui';
+import { PaletteType } from './config/types';
 
 export interface ColorMappingInputCategoricalData {
   type: 'categories';
@@ -45,6 +46,10 @@ export interface ColorMappingProps {
   model: ColorMapping.Config;
   /** A map of paletteId and palette configuration */
   palettes: Map<string, ColorMapping.CategoricalPalette>;
+  /**
+   * specifies palette types to pick from palettes
+   */
+  paletteType?: PaletteType;
   /** A data description of what needs to be colored */
   data: ColorMappingInputData;
   /** Theme dark mode */

diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx
@@ -14,7 +14,17 @@ import { ColorMapping } from '../../config';
 import { getPalette } from '../../palettes';
 import { PaletteColors } from './palette_colors';
 import { RGBPicker } from './rgb_picker';
-import { NeutralPalette } from '../../palettes/neutral';
+import { NeutralPalette } from '../../palettes';
+
+interface ColorPickerProps {
+  color: ColorMapping.CategoricalColor | ColorMapping.ColorCode;
+  getPaletteFn: ReturnType<typeof getPalette>;
+  palette: ColorMapping.CategoricalPalette;
+  isDarkMode: boolean;
+  close: () => void;
+  selectColor: (color: ColorMapping.CategoricalColor | ColorMapping.ColorCode) => void;
+  deleteStep?: () => void;
+}
 
 export function ColorPicker({
   palette,
@@ -24,15 +34,7 @@ export function ColorPicker({
   selectColor,
   isDarkMode,
   deleteStep,
-}: {
-  color: ColorMapping.CategoricalColor | ColorMapping.ColorCode;
-  getPaletteFn: ReturnType<typeof getPalette>;
-  palette: ColorMapping.CategoricalPalette;
-  isDarkMode: boolean;
-  close: () => void;
-  selectColor: (color: ColorMapping.CategoricalColor | ColorMapping.ColorCode) => void;
-  deleteStep?: () => void;
-}) {
+}: ColorPickerProps) {
   const [tab, setTab] = useState(
     color.type === 'categorical' &&
       (color.paletteId === palette.id || color.paletteId === NeutralPalette.id)

diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_swatch.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_swatch.tsx
@@ -40,6 +40,7 @@ interface ColorPickerSwatchProps {
   isDarkMode: boolean;
   forType: 'assignment' | 'specialAssignment' | 'gradient';
 }
+
 export const ColorSwatch = ({
   colorMode,
   assignmentColor,
@@ -151,7 +152,6 @@ export const ColorSwatch = ({
         close={() => dispatch(hideColorPickerVisibility())}
         isDarkMode={isDarkMode}
         selectColor={(color) => {
-          // dispatch update
           onColorChange(color);
         }}
         deleteStep={

diff --git a/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx b/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx
@@ -20,9 +20,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ColorMapping } from '../../config';
-import { getPalette } from '../../palettes';
+import { getPalette, NeutralPalette } from '../../palettes';
 import { isSameColor } from '../../color/color_math';
-import { NeutralPalette } from '../../palettes/neutral';
+import { DEFAULT_MAX_PALETTE_COLORS } from '../../config/default_color_mapping';
 
 export function PaletteColors({
   palette,
@@ -37,9 +37,12 @@ export function PaletteColors({
   getPaletteFn: ReturnType<typeof getPalette>;
   selectColor: (color: ColorMapping.CategoricalColor | ColorMapping.ColorCode) => void;
 }) {
-  const colors = Array.from({ length: palette.colorCount }, (d, i) => {
-    return palette.getColor(i, isDarkMode, false);
-  });
+  const colors = Array.from(
+    { length: Math.min(palette.colorCount, DEFAULT_MAX_PALETTE_COLORS) },
+    (d, i) => {
+      return palette.getColor(i, isDarkMode, false);
+    }
+  );
   const neutralColors = Array.from({ length: NeutralPalette.colorCount }, (d, i) => {
     return NeutralPalette.getColor(i, isDarkMode, false);
   });

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/components/container/container.tsx b/packages/kbn-coloring/src/shared_components/color_mapping/components/container/container.tsx
@@ -20,7 +20,7 @@ import { getPalette } from '../../palettes';
 import { selectColorMode, selectComputedAssignments, selectPalette } from '../../state/selectors';
 import { ColorMappingInputData } from '../../categorical_color_mapping';
 import { Gradient } from '../palette_selector/gradient';
-import { NeutralPalette } from '../../palettes/neutral';
+import { NeutralPalette } from '../../palettes';
 import { ScaleMode } from '../palette_selector/scale';
 import { UnassignedTermsConfig } from './unassigned_terms_config';
 import { AssignmentsConfig } from './assigments';
@@ -57,6 +57,9 @@ export function Container({
           <EuiFlexItem>
             <PaletteSelector
               palettes={palettes}
+              // Show all palettes on gradient mode for now
+              // paletteType={colorMode.type === 'categorical' ? 'categorical' : undefined}
+              paletteType="categorical"
               getPaletteFn={getPaletteFn}
               isDarkMode={isDarkMode}
             />

diff --git a/...ring/src/shared_components/color_mapping/components/palette_selector/palette_selector.tsx b/...ring/src/shared_components/color_mapping/components/palette_selector/palette_selector.tsx
@@ -16,16 +16,22 @@ import { RootState, updatePalette } from '../../state/color_mapping';
 import { ColorMapping } from '../../config';
 import { updateAssignmentsPalette, updateColorModePalette } from '../../config/assignments';
 import { getPalette } from '../../palettes';
+import { DEFAULT_MAX_PALETTE_COLORS } from '../../config/default_color_mapping';
+import { PaletteType } from '../../config/types';
+
+interface PaletteSelectorProps {
+  getPaletteFn: ReturnType<typeof getPalette>;
+  palettes: Map<string, ColorMapping.CategoricalPalette>;
+  isDarkMode: boolean;
+  paletteType?: PaletteType;
+}
 
 export function PaletteSelector({
   palettes,
   getPaletteFn,
   isDarkMode,
-}: {
-  getPaletteFn: ReturnType<typeof getPalette>;
-  palettes: Map<string, ColorMapping.CategoricalPalette>;
-  isDarkMode: boolean;
-}) {
+  paletteType,
+}: PaletteSelectorProps) {
   const dispatch = useDispatch();
   const model = useSelector((state: RootState) => state.colorMapping);
 
@@ -98,14 +104,18 @@ export function PaletteSelector({
           data-test-subj="kbnColoring_ColorMapping_PalettePicker"
           fullWidth
           palettes={[...palettes.values()]
-            .filter((d) => d.name !== 'Neutral')
+            .filter((p) => p.name !== 'Neutral')
+            .filter(paletteType ? (p) => p.type === paletteType : () => true)
             .map((palette) => ({
               'data-test-subj': `kbnColoring_ColorMapping_Palette-${palette.id}`,
               value: palette.id,
               title: palette.name,
-              palette: Array.from({ length: palette.colorCount }, (_, i) => {
-                return palette.getColor(i, isDarkMode, false);
-              }),
+              palette: Array.from(
+                { length: Math.min(palette.colorCount, DEFAULT_MAX_PALETTE_COLORS) },
+                (_, i) => {
+                  return palette.getColor(i, isDarkMode, false);
+                }
+              ),
               type: 'fixed',
             }))}
           onChange={(selectedPaletteId) => {

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/config/default_color_mapping.ts b/packages/kbn-coloring/src/shared_components/color_mapping/config/default_color_mapping.ts
@@ -8,11 +8,13 @@
  */
 
 import { ColorMapping } from '.';
-import { AVAILABLE_PALETTES, getPalette } from '../palettes';
-import { EUIAmsterdamColorBlindPalette } from '../palettes/eui_amsterdam';
-import { NeutralPalette } from '../palettes/neutral';
+import { AVAILABLE_PALETTES, NeutralPalette, ElasticPalette, getPalette } from '../palettes';
 import { getColor, getGradientColorScale } from '../color/color_handling';
 
+/**
+ * Max colors to display in palette strips
+ */
+export const DEFAULT_MAX_PALETTE_COLORS = 10;
 export const DEFAULT_NEUTRAL_PALETTE_INDEX = 1;
 export const DEFAULT_OTHER_ASSIGNMENT_INDEX = 0;
 
@@ -32,7 +34,7 @@ export const DEFAULT_COLOR_MAPPING_CONFIG: ColorMapping.Config = {
       touched: false,
     },
   ],
-  paletteId: EUIAmsterdamColorBlindPalette.id,
+  paletteId: ElasticPalette.id,
   colorMode: {
     type: 'categorical',
   },

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/config/types.ts b/packages/kbn-coloring/src/shared_components/color_mapping/config/types.ts
@@ -139,6 +139,8 @@ export interface GradientColorMode {
   sort: 'asc' | 'desc';
 }
 
+export type PaletteType = 'categorical' | 'gradient';
+
 export interface Config {
   paletteId: string;
   colorMode: CategoricalColorMode | GradientColorMode;
@@ -154,7 +156,7 @@ export interface Config {
 export interface CategoricalPalette {
   id: string;
   name: string;
-  type: 'categorical';
+  type: PaletteType;
   colorCount: number;
   getColor: (valueInRange: number, isDarkMode: boolean, loop: boolean) => string;
 }
diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/index.ts b/packages/kbn-coloring/src/shared_components/color_mapping/index.ts
@@ -19,6 +19,7 @@ export * from './palettes';
 export * from './color/color_handling';
 export { SPECIAL_TOKENS_STRING_CONVERSION, getSpecialString } from './color/rule_matching';
 export {
+  DEFAULT_MAX_PALETTE_COLORS,
   DEFAULT_COLOR_MAPPING_CONFIG,
   DEFAULT_OTHER_ASSIGNMENT_INDEX,
   getPaletteColors,

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/palettes/categorical/elastic.ts b/packages/kbn-coloring/src/shared_components/color_mapping/palettes/categorical/elastic.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import { ColorMapping } from '../../config';
+
+export const ELASTIC_PALETTE_COLORS = [
+  '#00BEB8',
+  '#93E5E0',
+  '#599DFF',
+  '#B4D5FF',
+  '#ED6BA2',
+  '#FFBED5',
+  '#F66D64',
+  '#FFC0B8',
+  '#ED9E00',
+  '#FFD569',
+  '#00CBC5',
+  '#C0F1EE',
+  '#78B0FF',
+  '#D2E7FF',
+  '#F588B3',
+  '#FFD9E7',
+  '#FC8A80',
+  '#FFDAD5',
+  '#F5AF00',
+  '#FCE8B0',
+  '#5DD8D2',
+  '#D9FDFB',
+  '#96C3FF',
+  '#E5F1FF',
+  '#FBA3C4',
+  '#FFEBF5',
+  '#FFA59C',
+  '#FFE9E5',
+  '#FEC514',
+  '#FFF1CC',
+];
+
+export const ElasticPalette: ColorMapping.CategoricalPalette = {
+  id: 'elastic_borealis',
+  name: i18n.translate('coloring.colorMapping.palettes.elastic.name', {
+    defaultMessage: 'Elastic (default)',
+  }),
+  colorCount: ELASTIC_PALETTE_COLORS.length,
+  type: 'categorical',
+  getColor(indexInRange, isDarkMode, loop) {
+    return ELASTIC_PALETTE_COLORS[
+      loop ? indexInRange % ELASTIC_PALETTE_COLORS.length : indexInRange
+    ];
+  },
+};
diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/palettes/categorical/index.ts b/packages/kbn-coloring/src/shared_components/color_mapping/palettes/categorical/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export * from './neutral';
+export * from './elastic';
diff --git a/...ponents/color_mapping/palettes/neutral.ts → ...r_mapping/palettes/categorical/neutral.ts b/...ponents/color_mapping/palettes/neutral.ts → ...r_mapping/palettes/categorical/neutral.ts
@@ -7,9 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ColorMapping } from '../config';
+import { ColorMapping } from '../../config';
 
-const schemeGreys = ['#f2f4fb', '#d4d9e5', '#98a2b3', '#696f7d', '#353642'];
+// const schemeGreys = ['#F5F9FE', '#CED4DE', '#959FAF', '#626D7E', '#303845'];
+const schemeGreys = ['#F6F9FC', '#D0D4DA', '#989FAA', '#666D78', '#373D45'];
 export const NEUTRAL_COLOR_LIGHT = schemeGreys.slice();
 export const NEUTRAL_COLOR_DARK = schemeGreys.slice().reverse();
 

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/palettes/gradient/complementary.ts b/packages/kbn-coloring/src/shared_components/color_mapping/palettes/gradient/complementary.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import { ColorMapping } from '../../config';
+
+export const COMPLEMENTARY_PALETTE_COLORS = [
+  '#599DFF',
+  '#96C3FF',
+  '#D2E7FF',
+  '#F5F9FE',
+  '#F3E5C1',
+  '#DDBF6A',
+  '#C79700',
+];
+
+export const ComplementaryPalette: ColorMapping.CategoricalPalette = {
+  id: 'complementary',
+  name: i18n.translate('coloring.colorMapping.palettes.complementary.name', {
+    defaultMessage: 'Complementary',
+  }),
+  colorCount: COMPLEMENTARY_PALETTE_COLORS.length,
+  type: 'gradient',
+  getColor(indexInRange, isDarkMode, loop) {
+    return COMPLEMENTARY_PALETTE_COLORS[
+      loop ? indexInRange % COMPLEMENTARY_PALETTE_COLORS.length : indexInRange
+    ];
+  },
+};
diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/palettes/gradient/cool.ts b/packages/kbn-coloring/src/shared_components/color_mapping/palettes/gradient/cool.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import { ColorMapping } from '../../config';
+
+export const COOL_PALETTE_COLORS = [
+  '#F1F9FF',
+  '#D2E7FF',
+  '#B4D5FF',
+  '#96C3FF',
+  '#78B0FF',
+  '#599DFF',
+];
+
+export const CoolPalette: ColorMapping.CategoricalPalette = {
+  id: 'cool',
+  name: i18n.translate('coloring.colorMapping.palettes.cool.name', {
+    defaultMessage: 'Cool',
+  }),
+  colorCount: COOL_PALETTE_COLORS.length,
+  type: 'gradient',
+  getColor(indexInRange, isDarkMode, loop) {
+    return COOL_PALETTE_COLORS[loop ? indexInRange % COOL_PALETTE_COLORS.length : indexInRange];
+  },
+};