style: tune mark color adaption

lineupjs · Dec 28, 2021 · 8f2093f · 8f2093f
1 parent c1490fd
commit 8f2093f
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/src/renderer/DotCellRenderer.ts b/src/renderer/DotCellRenderer.ts
@@ -125,7 +125,7 @@ export default class DotCellRenderer implements ICellRendererFactory {
 
     const render = (ctx: CanvasRenderingContext2D, value: number, color: string, width: number) => {
       ctx.save();
-      ctx.globalAlpha = DOT.opacity;
+      ctx.globalAlpha = DOT.opacitySingle;
       ctx.fillStyle = color || DOT.color;
       ctx.fillRect(Math.max(0, value * width - DOT.size / 2), 0, DOT.size, CANVAS_HEIGHT);
       ctx.restore();

diff --git a/src/renderer/utils.ts b/src/renderer/utils.ts
@@ -202,8 +202,8 @@ export function colorOf(col: Column) {
 // side effect
 const adaptColorCache: { [bg: string]: string } = {};
 
-export const BIG_MARK_LIGHTNESS_FACTOR = 1.2;
-export const SMALL_MARK_LIGHTNESS_FACTOR = 0.8;
+export const BIG_MARK_LIGHTNESS_FACTOR = 1.1;
+export const SMALL_MARK_LIGHTNESS_FACTOR = 0.9;
 
 export function adaptColor(color: string, lightnessFactor = 1, saturationFactor = 1): string {
   const key = `${color}-${saturationFactor}-${lightnessFactor}`;

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -43,11 +43,11 @@ $lu_renderer_dot_opacity: 0.5 !default;
 
 $lu_renderer_dot_single_color: $lu_renderer_dot_color !default;
 $lu_renderer_dot_single_size: 7px !default;
-$lu_renderer_dot_single_opacity: 0.75 !default;
+$lu_renderer_dot_single_opacity: 1 !default;
 
 $lu_renderer_tick_color: $lu_renderer_dot_color !default;
 $lu_renderer_tick_size: 3px !default;
-$lu_renderer_tick_opacity: 1 !default;
+$lu_renderer_tick_opacity: $lu_renderer_dot_single_opacity !default;
 
 $lu_hist_color: #c1c1c1;
 

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -41,6 +41,7 @@ export const DOT = {
   color: getStyle('lu_renderer_dot_color', 'gray'),
   size: Number.parseInt(getStyle('lu_renderer_dot_size', '5px'), 10),
   opacity: Number.parseFloat(getStyle('lu_renderer_dot_opacity', '0.5')),
+  opacitySingle: Number.parseFloat(getStyle('lu_renderer_dot_opacity', '1')),
 };
 /** @internal */
 export const TICK = {

diff --git a/src/styles/renderer/_tick.scss b/src/styles/renderer/_tick.scss
@@ -5,8 +5,8 @@
 .#{$lu_css_prefix}-renderer-tick {
   > div {
     background: $lu_renderer_tick_color;
-    opacity: $lu_renderer_tick_opacity;
     width: $lu_renderer_tick_size;
+    opacity: $lu_renderer_tick_opacity;
     height: 100%;
     top: 0%;
     transform: translate(-50%, 0);