Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(theme): cleanup remaining theme changes #2602

Merged
merged 2 commits into from
Jan 28, 2025
Merged

style(theme): cleanup remaining theme changes #2602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54492bc
style(theme): cleanup remaining colors
markov00 Jan 28, 2025
e42266b
added comments and links to EUI
markov00 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions packages/charts/api/charts.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,24 +638,6 @@ export class Chart extends React_2.Component<ChartProps, ChartState> {
render(): React_2.JSX.Element;
}

// @public
export interface ChartBaseColors {
// (undocumented)
darkestShade: string;
// (undocumented)
darkShade: string;
// (undocumented)
emptyShade: string;
// (undocumented)
lightestShade: string;
// (undocumented)
lightShade: string;
// (undocumented)
mediumShade: string;
// (undocumented)
title: string;
}

// @public (undocumented)
export interface ChartProps {
// (undocumented)
Expand Down Expand Up @@ -883,9 +865,6 @@ export interface CustomTooltipProps<D extends BaseDatum = Datum, SI extends Seri
// @public (undocumented)
export type CustomXDomain = (DomainRange & Pick<LogScaleOptions, 'logBase'>) | OrdinalDomain;

// @public
export const DARK_BASE_COLORS: ChartBaseColors;

// @public (undocumented)
export const DARK_THEME: Theme;

Expand Down Expand Up @@ -1925,9 +1904,6 @@ export const LegendValue: Readonly<{
// @public (undocumented)
export type LegendValue = $Values<typeof LegendValue>;

// @public
export const LIGHT_BASE_COLORS: ChartBaseColors;

// @public (undocumented)
export const LIGHT_THEME: Theme;

Expand Down
1 change: 0 additions & 1 deletion packages/charts/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ export * from './utils/themes/theme_common';
export { getChartsTheme } from './utils/themes/get_charts_theme';
export { LIGHT_THEME } from './utils/themes/light_theme';
export { DARK_THEME } from './utils/themes/dark_theme';
export { LIGHT_BASE_COLORS, DARK_BASE_COLORS } from './utils/themes/base_colors';
export { LEGACY_LIGHT_THEME } from './utils/themes/legacy_light_theme';
export { LEGACY_DARK_THEME } from './utils/themes/legacy_dark_theme';

Expand Down
106 changes: 57 additions & 49 deletions packages/charts/src/utils/themes/base_colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,10 @@

import chroma from 'chroma-js';

import { ChartBaseColors } from './theme';

/**
* Base light theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades
* @public
*/
export const LIGHT_BASE_COLORS: ChartBaseColors = {
emptyShade: '#FFF',
lightestShade: '#F1F4FA',
lightShade: '#D3DAE6',
mediumShade: '#98A2B3',
darkShade: '#69707D',
darkestShade: '#343741',
title: '#1A1C21',
};

/**
* Base dark theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades
* @public
* Primitive colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts
* @internal
*/
export const DARK_BASE_COLORS: ChartBaseColors = {
emptyShade: '#1D1E24',
lightestShade: '#25262E',
lightShade: '#343741',
mediumShade: '#535966',
darkShade: '#98A2B3',
darkestShade: '#D4DAE5',
title: '#DFE5EF',
};

/** @internal */
export const PRIMITIVE_COLORS = {
white: '#FFFFFF',
blueBlack: '#07101F',
Expand Down Expand Up @@ -69,7 +42,10 @@ export const PRIMITIVE_COLORS = {
pink90: '#BC1E70',
};

/** @internal */
/**
* Semantic colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts
* @internal
*/
export const SEMANTIC_COLORS = {
plainLight: PRIMITIVE_COLORS.white,
plainDark: PRIMITIVE_COLORS.blueBlack,
Expand Down Expand Up @@ -103,37 +79,54 @@ const primary100RGB = chroma(SEMANTIC_COLORS.primary100).rgb().join(' ');
const plainLightRGB = chroma(SEMANTIC_COLORS.plainLight).rgb().join(' ');
const shade145RGB = chroma(SEMANTIC_COLORS.shade145).rgb().join(' ');

/** @internal */
/**
* Semantic colors from EUI theme Borealis https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts
*
* @internal
*/
export const SEMANTIC_ALPHA_COLORS = {
primary100Alpha4: `rgba(${primary100RGB} / 0.04)`,
plainLightAlpha8: `rgba(${plainLightRGB} / 0.08)`,
plainLightAlpha70: `rgba(${plainLightRGB} / 0.7)`,
shade145Alpha70: `rgba(${shade145RGB} / 0.7)`,
};

/** @internal */
/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts
* @internal
*/
export const DARK_BORDER_COLORS = {
borderBaseSubdued: SEMANTIC_COLORS.shade120,
borderBasePlain: SEMANTIC_COLORS.shade100,
borderBasePrimary: SEMANTIC_COLORS.primary120,
};

/** @internal */
/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts
* @internal
*/
export const LIGHT_BORDER_COLORS = {
borderBaseSubdued: SEMANTIC_COLORS.shade20,
borderBasePlain: SEMANTIC_COLORS.shade30,
borderBasePrimary: SEMANTIC_COLORS.primary30,
};

/** @internal */
/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts
* @internal
*/
export const DARK_TEXT_COLORS = {
textParagraph: SEMANTIC_COLORS.shade30,
textHeading: SEMANTIC_COLORS.shade20,
textSubdued: SEMANTIC_COLORS.shade60,
textDisabled: SEMANTIC_COLORS.shade80,
textInverse: SEMANTIC_COLORS.plainDark,
};
/** @internal */

/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts
* @internal
*/
export const LIGHT_TEXT_COLORS = {
textParagraph: SEMANTIC_COLORS.shade130,
textHeading: SEMANTIC_COLORS.shade140,
Expand All @@ -142,17 +135,10 @@ export const LIGHT_TEXT_COLORS = {
textInverse: SEMANTIC_COLORS.plainLight,
};

/** @internal */
export const LIGHT_BACKGROUND_COLORS = {
backgroundBasePlain: SEMANTIC_COLORS.plainLight,
backgroundBaseDisabled: SEMANTIC_COLORS.shade15,
backgroundBaseInteractiveHover: SEMANTIC_ALPHA_COLORS.primary100Alpha4,
backgroundFilledPrimary: SEMANTIC_COLORS.primary90,
backgroundFilledText: SEMANTIC_COLORS.shade60,
backgroundFilledAccent: SEMANTIC_COLORS.accent90,
};

/** @internal */
/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts
* @internal
*/
export const DARK_BACKGROUND_COLORS = {
backgroundBasePlain: SEMANTIC_COLORS.shade145,
backgroundBaseDisabled: SEMANTIC_COLORS.shade130,
Expand All @@ -162,17 +148,39 @@ export const DARK_BACKGROUND_COLORS = {
backgroundFilledAccent: SEMANTIC_COLORS.accent60,
};

/** @internal */
/**
* Colors from https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts
* @internal
*/
export const LIGHT_BACKGROUND_COLORS = {
backgroundBasePlain: SEMANTIC_COLORS.plainLight,
backgroundBaseDisabled: SEMANTIC_COLORS.shade15,
backgroundBaseInteractiveHover: SEMANTIC_ALPHA_COLORS.primary100Alpha4,
backgroundFilledPrimary: SEMANTIC_COLORS.primary90,
backgroundFilledText: SEMANTIC_COLORS.shade60,
backgroundFilledAccent: SEMANTIC_COLORS.accent90,
};

/**
* Custom light colors specific for charts
* @internal
*/
export const LIGHT_BACKGROUND_COLORS_CUSTOM = {
backgroundBasePlainAlpha70: SEMANTIC_ALPHA_COLORS.plainLightAlpha70,
};

/** @internal */
/**
* Custom dark colors specific for charts
* @internal
*/
export const DARK_BACKGROUND_COLORS_CUSTOM = {
backgroundBasePlainAlpha70: SEMANTIC_ALPHA_COLORS.shade145Alpha70,
};

/** @internal */
/**
* Severity colors from EUI https://github.com/elastic/eui/blob/f4892c31cdbf6112d23f11421a87ac14323de62a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts
* @internal
*/
export const SEVERITY_COLORS = {
euiColorSeverity5: SEMANTIC_COLORS.shade30,
euiColorSeverity7: SEMANTIC_COLORS.warning30,
Expand Down
13 changes: 6 additions & 7 deletions packages/charts/src/utils/themes/dark_theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import {
DARK_BASE_COLORS,
DARK_TEXT_COLORS,
DARK_BORDER_COLORS,
DARK_BACKGROUND_COLORS,
Expand Down Expand Up @@ -267,7 +266,7 @@ export const DARK_THEME: Theme = {
majorLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: DARK_BASE_COLORS.title,
fill: '#DFE5EF',
},
minorLabel: {
fontStyle: 'normal',
Expand All @@ -277,7 +276,7 @@ export const DARK_THEME: Theme = {
majorCenterLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: DARK_BASE_COLORS.title,
fill: '#DFE5EF',
},
minorCenterLabel: {
fontStyle: 'normal',
Expand All @@ -288,7 +287,7 @@ export const DARK_THEME: Theme = {
stroke: '#D4DAE5',
},
tickLine: {
stroke: DARK_BASE_COLORS.mediumShade,
stroke: '#535966',
},
progressLine: {
stroke: '#D4DAE5',
Expand Down Expand Up @@ -456,15 +455,15 @@ export const DARK_THEME: Theme = {
},
lineAnnotation: {
line: {
stroke: DARK_BASE_COLORS.darkShade,
stroke: '#98A2B3',
strokeWidth: 1,
opacity: 1,
},
},
rectAnnotation: {
strokeWidth: 0,
opacity: 0.25,
fill: DARK_BASE_COLORS.darkShade,
stroke: DARK_BASE_COLORS.darkShade,
fill: '#98A2B3',
stroke: '#98A2B3',
},
};
23 changes: 11 additions & 12 deletions packages/charts/src/utils/themes/light_theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
DARK_TEXT_COLORS,
LIGHT_BACKGROUND_COLORS,
LIGHT_BACKGROUND_COLORS_CUSTOM,
LIGHT_BASE_COLORS,
LIGHT_BORDER_COLORS,
LIGHT_TEXT_COLORS,
} from './base_colors';
Expand Down Expand Up @@ -262,36 +261,36 @@ export const LIGHT_THEME: Theme = {
tickLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: '#646a77', // LIGHT_BASE_COLORS.darkShade,
fill: '#646a77',
},
majorLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: LIGHT_BASE_COLORS.darkestShade,
fill: '#343741',
},
minorLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: '#646a77', // LIGHT_BASE_COLORS.darkShade,
fill: '#646a77',
},
majorCenterLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: LIGHT_BASE_COLORS.darkestShade,
fill: '#343741',
},
minorCenterLabel: {
fontStyle: 'normal',
fontFamily: DEFAULT_FONT_FAMILY,
fill: '#646a77', // LIGHT_BASE_COLORS.darkShade,
fill: '#646a77',
},
targetLine: {
stroke: LIGHT_BASE_COLORS.darkestShade,
stroke: '#343741',
},
tickLine: {
stroke: LIGHT_BASE_COLORS.mediumShade,
stroke: '#98A2B3',
},
progressLine: {
stroke: LIGHT_BASE_COLORS.darkestShade,
stroke: '#343741',
},
},
partition: {
Expand Down Expand Up @@ -455,15 +454,15 @@ export const LIGHT_THEME: Theme = {
},
lineAnnotation: {
line: {
stroke: LIGHT_BASE_COLORS.darkShade,
stroke: '#69707D',
strokeWidth: 1,
opacity: 1,
},
},
rectAnnotation: {
strokeWidth: 0,
opacity: 0.25,
fill: LIGHT_BASE_COLORS.darkShade,
stroke: LIGHT_BASE_COLORS.darkShade,
fill: '#69707D',
stroke: '#69707D',
},
};
14 changes: 0 additions & 14 deletions packages/charts/src/utils/themes/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,6 @@ import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment
import { Margins, Padding, SimplePadding } from '../dimensions';
import { Point } from '../point';

/**
* Base color definitions - theme-specific
* @public
*/
export interface ChartBaseColors {
emptyShade: string;
lightShade: string;
lightestShade: string;
mediumShade: string;
darkShade: string;
darkestShade: string;
title: string;
}

/** @public */
export interface Visible {
visible: boolean;
Expand Down