feat: add color for background label

vegaprotocol · Mar 25, 2024 · 462c537 · 462c537
1 parent 4f25ce0
commit 462c537
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/src/feature/depth-chart/display-objects/label.ts b/src/feature/depth-chart/display-objects/label.ts
@@ -2,7 +2,7 @@ import { Container, Graphics, Text } from "@ui/renderer";
 
 import { Colors } from "../helpers";
 
-type LabelColors = Pick<Colors, "backgroundSurface" | "textPrimary">;
+type LabelColors = Pick<Colors, "backgroundLabel" | "textPrimary">;
 
 /**
  * Draw a label
@@ -47,7 +47,7 @@ export class Label extends Container {
     const padding = resolution * 1.5;
 
     this.background.clear();
-    this.background.beginFill(colors.backgroundSurface, 1);
+    this.background.beginFill(colors.backgroundLabel, 1);
     this.background.drawRect(
       x - (anchorX * width + padding),
       y - (anchorY * height + padding),

diff --git a/src/feature/depth-chart/helpers/helpers-color.ts b/src/feature/depth-chart/helpers/helpers-color.ts
@@ -8,6 +8,10 @@ export interface Colors {
   backgroundSurface: number;
   textPrimary: number;
   textSecondary: number;
+  /**
+   * Behind labels on axis, can be useful to prevent unclear numbers
+   */
+  backgroundLabel: number;
 }
 
 export function getColors(element: HTMLElement | null): Colors {
@@ -49,5 +53,10 @@ export function getColors(element: HTMLElement | null): Colors {
         ?.getPropertyValue("--pennant-background-surface-color")
         .trim() || "#0a0a0a",
     ),
+    backgroundLabel: string2hex(
+      cssStyleDeclaration
+        ?.getPropertyValue("--pennant-background-label-color")
+        .trim() || "#0a0a0a",
+    ),
   };
 }
diff --git a/src/feature/depth-chart/ui.ts b/src/feature/depth-chart/ui.ts
@@ -32,6 +32,7 @@ type UiColors = Pick<
   | "sellStroke"
   | "textPrimary"
   | "textSecondary"
+  | "backgroundLabel"
 >;
 
 function pointer(event: any) {

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -167,6 +167,9 @@
   /* Dimensions. */
   --pennant-candlestick-stroke-width: 1px;
   --pennant-depth-stroke-width: 2px;
+
+  /* Label bg */
+  --pennant-background-label-color: var(--pennant-background-surface-color);
 }
 
 [data-theme="dark"] {
@@ -218,4 +221,7 @@
   /* Typography. */
   --pennant-font-color-base: var(--pennant-color-content);
   --pennant-font-color-secondary: var(--pennant-color-content-secondary);
+
+  /* Label bg */
+  --pennant-background-label-color: var(--pennant-background-surface-color);
 }