ui(feat): Adds light/dark mode support for viewport overlay text and markers (#5041)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/ui-next/src/components/Viewport/ViewportOverlay.css

@@ -7,7 +7,6 @@
 .ViewportOverlay .overlay-element {
   position: absolute;
   font-weight: 400;
-  text-shadow: 1px 1px #000;
   pointer-events: none;
 }
 .overlay-top {
@@ -17,6 +16,17 @@
   bottom: 2.15rem;
 }
 
+/* Base text styling without shadow */
 .overlay-text {
+  /* No default shadow - will be applied by shadow classes */
+}
+
+/* Dark shadow for light backgrounds */
+.shadow-dark {
   text-shadow: 0.8px 0.8px 0.5px rgba(0, 0, 0, 0.65);
 }
+
+/* Light shadow for dark backgrounds */
+.shadow-light {
+  text-shadow: 0.8px 0.8px 0.5px rgba(255, 255, 255, 0.65);
+}

platform/ui-next/src/components/Viewport/ViewportOverlay.tsx

@@ -17,11 +17,11 @@ const classes = {
   bottomLeft: 'overlay-bottom left-viewport',
 };
 
-function ViewportOverlay({ topLeft, topRight, bottomRight, bottomLeft, color = 'text-highlight' }) {
+function ViewportOverlay({ topLeft, topRight, bottomRight, bottomLeft, color = 'text-highlight', shadowClass = 'shadow-dark' }) {
   const overlay = 'absolute pointer-events-none viewport-overlay';
 
   return (
-    <div className={classNames(color, 'overlay-text text-base leading-5')}>
+    <div className={classNames(color, 'overlay-text', shadowClass, 'text-base leading-5')}>
       <div
         data-cy="viewport-overlay-top-left"
         className={classNames(overlay, classes.topLeft)}
@@ -58,6 +58,7 @@ ViewportOverlay.propTypes = {
   bottomRight: PropTypes.node,
   bottomLeft: PropTypes.node,
   color: PropTypes.string,
+  shadowClass: PropTypes.string,
 };
 
-export { ViewportOverlay };
+export { ViewportOverlay };

platform/ui-next/src/tailwind.css

@@ -10,6 +10,8 @@
   :root {
     --highlight: 191 74% 63%;
     --neutral: 213 22% 59%;
+    --neutral-light: 214 69% 81%;
+    --neutral-dark: 214 16% 21%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 234 64% 10%;

platform/ui-next/tailwind.config.js

@@ -45,6 +45,8 @@ module.exports = {
       colors: {
         highlight: 'hsl(var(--highlight))',
         neutral: 'hsl(var(--neutral))',
+        'neutral-light': 'hsl(var(--neutral-light))',
+        'neutral-dark': 'hsl(var(--neutral-dark))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',