Skip to content

Commit

Permalink
fix: better theme defaults for light and dark themes (#340)
Browse files Browse the repository at this point in the history 
Alters the color and sizing values in the theme objects to be a bit more pleasing.
  • Loading branch information
@cchaos
cchaos authored Aug 26, 2019
1 parent 0277306 commit 693cdc1
Show file tree
Hide file tree
Showing 14 changed files with 108 additions and 101 deletions.
6 changes: 3 additions & 3 deletions src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('annotation marker', () => {
marker: {
icon: <div />,
transform: 'translate(calc(0px - 0%),calc(20px - 50%))',
color: '#000',
color: '#777',
dimensions: { width: 0, height: 0 },
},
},
Expand Down Expand Up @@ -111,7 +111,7 @@ describe('annotation marker', () => {
marker: {
icon: <div />,
transform: 'translate(calc(0px - 0%),calc(0px - 50%))',
color: '#000',
color: '#777',
dimensions: { width: 0, height: 0 },
},
},
Expand Down Expand Up @@ -151,7 +151,7 @@ describe('annotation marker', () => {
marker: {
icon: <div />,
transform: 'translate(calc(20px - 0%),calc(20px - 50%))',
color: '#000',
color: '#777',
dimensions: { width: 0, height: 0 },
},
},
Expand Down
12 changes: 6 additions & 6 deletions src/chart_types/xy_chart/rendering/rendering.bands.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,9 +442,9 @@ describe('Rendering bands - areas', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -477,9 +477,9 @@ describe('Rendering bands - areas', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -512,9 +512,9 @@ describe('Rendering bands - areas', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down
64 changes: 32 additions & 32 deletions src/chart_types/xy_chart/rendering/rendering.bars.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -99,9 +99,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -248,9 +248,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -283,9 +283,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -331,9 +331,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -366,9 +366,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -436,9 +436,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -471,9 +471,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -556,9 +556,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -591,9 +591,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -639,9 +639,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -674,9 +674,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -759,9 +759,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -794,9 +794,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -842,9 +842,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down Expand Up @@ -877,9 +877,9 @@ describe('Rendering bars', () => {
displayValue: undefined,
seriesStyle: {
displayValue: {
fill: 'gray',
fill: '#777',
fontFamily: 'sans-serif',
fontSize: 10,
fontSize: 8,
fontStyle: 'normal',
offsetX: 0,
offsetY: 0,
Expand Down
8 changes: 4 additions & 4 deletions src/chart_types/xy_chart/store/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -779,8 +779,8 @@ describe('Chart State utils', () => {
visible: true,
fill: 'green', // the override strokeWidth
opacity: 1,
radius: 1,
strokeWidth: 0.5,
radius: 2,
strokeWidth: 1,
});
});
test('can compute area geometries with custom style', () => {
Expand Down Expand Up @@ -871,8 +871,8 @@ describe('Chart State utils', () => {
visible: false,
fill: 'point-fill-custom-color', // the override strokeWidth
opacity: 1,
radius: 1,
strokeWidth: 0.5,
radius: 2,
strokeWidth: 1,
});
});
test('can compute bars geometries counts', () => {
Expand Down
2 changes: 1 addition & 1 deletion src/chart_types/xy_chart/utils/axis_utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -797,7 +797,7 @@ describe('Axis computational utils', () => {
expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id)).toEqual({
top: 0,
left: 10,
width: 12 + 5 + 10 + 10 + 10,
width: 50,
height: 100,
});

Expand Down
3 changes: 2 additions & 1 deletion src/components/_annotation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
pointer-events: none;
position: absolute;
user-select: none;
font-size: $euiFontSizeXS;
font-weight: $euiFontWeightBold;
}

.echAnnotation--hidden,
Expand All @@ -15,7 +17,6 @@
position: absolute;
padding: 0;

// overflow: hidden;
transition: opacity $euiAnimSpeedNormal;
pointer-events: none;
user-select: none;
Expand Down
4 changes: 4 additions & 0 deletions src/components/_highlighter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@
width: 100%;
height: 100%;
}

.echHighlighter__rect {
fill: transparentize($euiColorGhost, .8);
}
4 changes: 3 additions & 1 deletion src/components/highlighter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
/>
);
}
return <rect key={i} x={x} y={y} width={geom.width} height={geom.height} fill="white" opacity={0.4} />;
return (
<rect key={i} x={x} y={y} width={geom.width} height={geom.height} className="echHighlighter__rect" />
);
})}
</g>
</svg>
Expand Down
8 changes: 4 additions & 4 deletions src/components/legend/legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,15 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
debug,
chartTheme,
} = this.props.chartStore!;
const postion = legendPosition.get();
const position = legendPosition.get();

if (!showLegend.get() || !legendInitialized.get() || legendItems.size === 0) {
return null;
}

const legendContainerStyle = this.getLegendStyle(postion, chartTheme);
const legendListStyle = this.getLegendListStyle(postion, chartTheme);
const legendClasses = classNames('echLegend', `echLegend--${postion}`, {
const legendContainerStyle = this.getLegendStyle(position, chartTheme);
const legendListStyle = this.getLegendListStyle(position, chartTheme);
const legendClasses = classNames('echLegend', `echLegend--${position}`, {
'echLegend--debug': debug,
invisible: !chartInitialized.get(),
});
Expand Down
2 changes: 1 addition & 1 deletion src/utils/themes/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const echPaletteForLightBackground: EchPalette = {
};

const echPaletteForDarkBackground: EchPalette = {
colors: ['#4DA1C0', '#01B2A4', '#C06C4C', '#BF4D4D', '#F5258C'],
colors: ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'],
};

const echPaletteForStatus: EchPalette = {
Expand Down
Loading

0 comments on commit 693cdc1

Please sign in to comment.