@oanda/labs-crowd-view-widget 1.0.46 → 1.0.48

package/src/CrowdViewWidget/Main.tsx

@@ -17,7 +17,7 @@ import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
-  const { size } = useLayoutProvider();
+  const { size, isDark } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const [bookType, setBookType] = useState(BookType.Order);
@@ -52,48 +52,55 @@ const Main = ({ division }: MainProps) => {
           className="lw-text-sm lw-tracking-normal"
           data-testid="crowd-view-widget"
         >
-          <Tabs
-            mobileFullWidth
-            activeTab={bookType}
-            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
-            items={navigationConfig}
-            labelCallback={lang}
-          />
-          <div className="lw-mb-6 lw-mt-12 lw-flex">
-            <div
-              className={cn('lw-mr-2', {
-                'lw-w-full': !isDesktop,
-                'lw-w-[280px]': isDesktop,
-              })}
-            >
-              <Select
-                options={instrumentSelectConfigWithDivision}
-                searchPlaceholder={lang('search')}
-                selectLabel={lang('instrument')}
-                selectedOption={instrument}
-                setSelectedOption={(val) =>
-                  setInstrument(val as { id: InstrumentId; label: string })
-                }
-              />
-            </div>
+          <div>
+            <Tabs
+              mobileFullWidth
+              activeTab={bookType}
+              handleClick={(e) =>
+                setBookType(e.currentTarget.value as BookType)
+              }
+              items={navigationConfig}
+              labelCallback={lang}
+            />
             <div
-              className={cn({
-                'lw-w-full': !isDesktop,
-                'lw-w-[280px]': isDesktop,
+              className={cn('lw-mb-6 lw-mt-12', {
+                'lw-flex': isDesktop,
               })}
             >
-              <Select
-                options={granularitySelectConfigWithLang}
-                searchPlaceholder={lang('search')}
-                selectLabel={lang('granularity')}
-                selectedOption={granularity}
-                setSelectedOption={(val) =>
-                  setGranularity(val as { id: Granularity; label: string })
-                }
-              />
+              <div
+                className={cn('lw-mr-2', {
+                  'lw-w-full lw-mb-2': !isDesktop,
+                  'lw-w-[280px]': isDesktop,
+                })}
+              >
+                <Select
+                  options={instrumentSelectConfigWithDivision}
+                  searchPlaceholder={lang('search')}
+                  selectLabel={lang('instrument')}
+                  selectedOption={instrument}
+                  setSelectedOption={(val) =>
+                    setInstrument(val as { id: InstrumentId; label: string })
+                  }
+                />
+              </div>
+              <div
+                className={cn({
+                  'lw-w-full': !isDesktop,
+                  'lw-w-[280px]': isDesktop,
+                })}
+              >
+                <Select
+                  options={granularitySelectConfigWithLang}
+                  searchPlaceholder={lang('search')}
+                  selectLabel={lang('granularity')}
+                  selectedOption={granularity}
+                  setSelectedOption={(val) =>
+                    setGranularity(val as { id: Granularity; label: string })
+                  }
+                />
+              </div>
             </div>
           </div>
-
           <ChartWithData
             bookType={bookType}
             division={division}
@@ -101,7 +108,7 @@ const Main = ({ division }: MainProps) => {
             instrument={instrument.id}
           />
 
-          <Legend bookType={bookType} />
+          <Legend bookType={bookType} isDark={isDark} />
         </div>
       )}
     </>

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -48,7 +48,7 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ data }: ChartProps) => {
+const Chart = ({ data, isDesktop }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
@@ -58,7 +58,7 @@ const Chart = ({ data }: ChartProps) => {
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark, lang)}
+      option={getOption(data, isDark, isDesktop, lang)}
       opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (_params: unknown, instance: EChartsType) => {

package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx

@@ -5,7 +5,6 @@ import {
   SpinnerSize,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import classnames from 'classnames';
 import React from 'react';
 
 import { Chart } from './Chart';
@@ -30,41 +29,20 @@ const ChartWithData = ({
 
   return (
     <>
-      <div
-        className={classnames('lw-relative lw-w-full', {
-          'lw-h-[450px]': isDesktop,
-          'lw-h-[390px]': !isDesktop,
-        })}
-      >
+      <div className="lw-relative lw-h-[450px] lw-w-full">
         {error && (
-          <div
-            className={classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              }
-            )}
-          >
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
           </div>
         )}
         {loading && (
-          <div
-            className={classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              }
-            )}
-          >
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
         {!loading && !error && !!data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} />
+            <Chart data={data} isDesktop={isDesktop} />
           </div>
         )}
       </div>

package/src/CrowdViewWidget/components/Chart/chartOptions.ts

@@ -2,6 +2,7 @@ import {
   colorPalette,
   getGridLines,
   getLineCommons,
+  themeColors,
 } from '@oanda/labs-widget-common';
 
 import { CHART_CONFIG } from '../../constants';
@@ -26,6 +27,7 @@ export const getOption: GetOptionType = (
     bookType,
   },
   isDark,
+  isDesktop,
   labelCallback
 ) => {
   let selectedPrice: number;
@@ -49,7 +51,9 @@ export const getOption: GetOptionType = (
     chartWidth: CHART_CONFIG.WIDTH,
     chartHeight: CHART_CONFIG.HEIGHT,
     xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
-    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
+    yLabelSize: isDesktop
+      ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
+      : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,
     bottomLeftBox: false,
   });
 
@@ -68,6 +72,9 @@ export const getOption: GetOptionType = (
       axisPointer: {
         type: 'cross',
         axis: 'x',
+        crossStyle: {
+          color: isDark ? colorPalette.orange : themeColors.borderPrimary.light,
+        },
         label: {
           formatter: (params) => {
             if (params.axisDimension === 'y') {
@@ -124,6 +131,7 @@ export const getOption: GetOptionType = (
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        margin: isDesktop ? 4 : 2,
         formatter: (value: number) => value.toFixed(precision - 1),
       },
     },
@@ -133,8 +141,16 @@ export const getOption: GetOptionType = (
         id: 'candlestick',
         data: candlesSeriesData,
         itemStyle: {
-          color: colorPalette.raspberryLight,
-          color0: colorPalette.bottleGreenLight,
+          color: isDark ? colorPalette.orange : colorPalette.raspberryLight,
+          color0: isDark
+            ? colorPalette.bottleGreenDark
+            : colorPalette.bottleGreenLight,
+          borderColor: isDark
+            ? colorPalette.orange
+            : colorPalette.raspberryLight,
+          borderColor0: isDark
+            ? colorPalette.bottleGreenDark
+            : colorPalette.bottleGreenLight,
         },
 
         markPoint: {
@@ -171,7 +187,7 @@ export const getOption: GetOptionType = (
                 height: rectHeight,
               },
               style: {
-                fill: getRectColor(sentiment),
+                fill: getRectColor(sentiment, isDark),
               },
               silent: true,
               emphasisDisabled: true,
@@ -193,7 +209,7 @@ export const getOption: GetOptionType = (
         name: 'main-grid',
         top: '0px',
         left: '0px',
-        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,
+        right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
         bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
       },
     ],

package/src/CrowdViewWidget/components/Chart/types.ts

@@ -40,11 +40,13 @@ export interface UseCrowdViewDataReturn {
 export type GetOptionType = (
   props: CrowdViewData,
   isDark: boolean,
+  isDesktop: boolean,
   labelCallback: (key: string, params?: Record<string, unknown>) => string
 ) => EChartsOption;
 
 export interface ChartProps {
   data: CrowdViewData;
+  isDesktop: boolean;
 }
 
 export interface ChartWithDataProps {

package/src/CrowdViewWidget/components/Chart/utils/chartUtils.ts

@@ -87,10 +87,17 @@ const getGradientColor = (
   return colorScale(value).hex();
 };
 
-export const getRectColor = (sentiment: number) =>
-  sentiment < 0
-    ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])
-    : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);
+export const getRectColor = (sentiment: number, isDark: boolean) => {
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+
+  return sentiment < 0
+    ? getGradientColor(
+        sentiment * -1,
+        colorPalette.short[0],
+        colorPalette.short[1]
+      )
+    : getGradientColor(sentiment, colorPalette.long[0], colorPalette.long[1]);
+};
 
 export const getTooltipFormatter = ({
   params,
@@ -160,10 +167,14 @@ ${
 <p>${
         matchedBucket.sentiment < 0
           ? labelCallback(
-              bookType === BookType.Order ? 'sell_advantage' : 'short_advantage'
+              bookType === BookType.Order
+                ? 'sell_overbalance'
+                : 'short_overbalance'
             )
           : labelCallback(
-              bookType === BookType.Order ? 'buy_advantage' : 'long_advantage'
+              bookType === BookType.Order
+                ? 'buy_overbalance'
+                : 'long_overbalance'
             )
       }: ${Math.abs(matchedBucket.sentiment)}% </p>`
     : ''

package/src/CrowdViewWidget/components/Legend/Legend.tsx

@@ -9,23 +9,27 @@ interface LegendProps {
   longValues?: [number, number];
   shortValues?: [number, number];
   bookType: BookType;
+  isDark: boolean;
 }
 
 export const Legend = ({
   longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
   shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
   bookType,
+  isDark,
 }: LegendProps) => {
   const { lang } = useLocale();
 
   return (
-    <div className="lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl">
+    <div className="lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl">
       <LegendBar
+        isDark={isDark}
         label={lang(bookType === BookType.Order ? 'buy' : 'long')}
         type="long"
         values={longValues}
       />
       <LegendBar
+        isDark={isDark}
         label={lang(bookType === BookType.Order ? 'sell' : 'short')}
         type="short"
         values={shortValues}

package/src/CrowdViewWidget/components/Legend/LegendBar.tsx

@@ -8,13 +8,18 @@ interface LegendBarProps {
   values: number[];
   type: LegendType;
   label: string;
+  isDark: boolean;
 }
 
-export const LegendBar = ({ values, type, label }: LegendBarProps) => {
-  const colors = COLOR_MAP[type];
+export const LegendBar = ({ values, type, label, isDark }: LegendBarProps) => {
+  const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
 
   return (
     <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
+      <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
+        {label}
+      </span>
       <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
         <div
           className="lw-h-full lw-flex-1"
@@ -27,10 +32,10 @@ export const LegendBar = ({ values, type, label }: LegendBarProps) => {
 
       <div className="lw-flex lw-w-full lw-justify-between">
         <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[0].toFixed(2)}% {label}
+          {values[0].toFixed(2)}%
         </span>
         <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[1].toFixed(2)}% {label}
+          {`≤ ${values[1].toFixed(2)}`}%
         </span>
       </div>
     </div>

package/src/CrowdViewWidget/constants.ts

@@ -1,3 +1,5 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
 import { InstrumentId } from './types';
 
 export const BOOKS_THRESHOLDS = {
@@ -19,14 +21,21 @@ export const CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_MOBILE: 40,
   INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
 } as const;
 
 export const COLOR_MAP = {
-  long: ['#eaf5fa', '#83c4e0'],
-  short: ['#fef7e7', '#fcd171'],
+  dark: {
+    long: [colorPalette.darkBlue10, colorPalette.darkBlue90],
+    short: [colorPalette.darkYellow10, colorPalette.darkYellow90],
+  },
+  light: {
+    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],
+    short: [colorPalette.lightYellow10, colorPalette.lightYellow90],
+  },
 } as const;
 
 export const INSTRUMENTS_CONFIG: Record<

package/src/translations/sources/en.json

@@ -3,7 +3,7 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_advantage": "Buy advantage",
+  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
   "candle": "Candle",
   "close_price": "Close price",
@@ -11,7 +11,7 @@
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_advantage": "Sell advantage",
+  "long_overbalance": "Long overbalance",
   "long": "Long",
   "low": "Low",
   "no_matching_results": "No matching results",
@@ -23,9 +23,9 @@
   "positions": "Positions",
   "price_range": "Price range",
   "search": "Search",
-  "sell_advantage": "Sell advantage",
+  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
   "sentiment": "Sentiment",
-  "short_advantage": "Buy advantage",
+  "short_overbalance": "Short overbalance",
   "short": "Short"
 }

package/test/components/Chart/utils/chartUtils.test.ts

@@ -48,20 +48,37 @@ describe('chartUtils', () => {
   });
 
   describe('getRectColor', () => {
-    it('uses long color scale for positive sentiment', () => {
-      const color = getRectColor(BOOKS_THRESHOLDS.MAX);
+    it('uses long color scale for positive sentiment in light mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       // At max threshold, should be at or near target color
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.long[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.long[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
 
-    it('uses short color scale for negative sentiment', () => {
-      const color = getRectColor(-BOOKS_THRESHOLDS.MAX);
+    it('uses short color scale for negative sentiment in light mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, false);
       expect(typeof color).toBe('string');
       expect(color.toLowerCase()).toContain(
-        COLOR_MAP.short[1].slice(1).toLowerCase().substring(0, 3)
+        COLOR_MAP.light.short[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses long color scale for positive sentiment in dark mode', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      // At max threshold, should be at or near target color
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.long[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses short color scale for negative sentiment in dark mode', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, true);
+      expect(typeof color).toBe('string');
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.dark.short[1].slice(1).toLowerCase().substring(0, 3)
       );
     });
   });
@@ -152,7 +169,7 @@ describe('chartUtils', () => {
       expect(html).toContain('orders');
       expect(html).toContain('price_range');
       // Selected price 1.3306 falls into second bucket 1.3305 - 1.3310 which has negative sentiment
-      expect(html).toContain('sell_advantage');
+      expect(html).toContain('sell_overbalance');
     });
   });
 });

package/test/components/Legend.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Legend } from '../../src/CrowdViewWidget/components';
+import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 import { BookType } from '../../src/gql/types/graphql';
 
 describe('Crowd View Widget', () => {
@@ -15,13 +16,56 @@ describe('Crowd View Widget', () => {
         const { getAllByText } = render(
           <Legend
             bookType={BookType.Position}
+            isDark={false}
             longValues={[0.15, 0.55]}
             shortValues={[0.15, 0.55]}
           />
         );
 
-        expect(getAllByText(/long/)).toHaveLength(2);
-        expect(getAllByText(/short/)).toHaveLength(2);
+        expect(getAllByText(/long/)).toHaveLength(1);
+        expect(getAllByText(/short/)).toHaveLength(1);
+      });
+
+      it('passes isDark prop to LegendBar components in light mode', () => {
+        const { getAllByTestId } = render(
+          <Legend
+            bookType={BookType.Position}
+            isDark={false}
+            longValues={[0.15, 0.55]}
+            shortValues={[0.15, 0.55]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use light mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasLightColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.light.long[0]) ||
+            style?.includes(COLOR_MAP.light.short[0])
+        );
+        expect(hasLightColors).toBe(true);
+      });
+
+      it('passes isDark prop to LegendBar components in dark mode', () => {
+        const { getAllByTestId } = render(
+          <Legend
+            bookType={BookType.Position}
+            isDark={true}
+            longValues={[0.15, 0.55]}
+            shortValues={[0.15, 0.55]}
+          />
+        );
+        const segments = getAllByTestId('legend-bar-segment');
+        expect(segments.length).toBe(2);
+        // Check that segments use dark mode colors (either long or short)
+        const styles = segments.map((segment) => segment.getAttribute('style'));
+        const hasDarkColors = styles.some(
+          (style) =>
+            style?.includes(COLOR_MAP.dark.long[0]) ||
+            style?.includes(COLOR_MAP.dark.short[0])
+        );
+        expect(hasDarkColors).toBe(true);
       });
     });
   });

package/test/components/LegendBar.test.tsx

@@ -6,6 +6,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { LegendBar } from '../../src/CrowdViewWidget/components';
+import { COLOR_MAP } from '../../src/CrowdViewWidget/constants';
 
 describe('Crowd View Widget', () => {
   describe('components', () => {
@@ -14,20 +15,91 @@ describe('Crowd View Widget', () => {
 
       it('renders LegendBar with min and max values', () => {
         const { getByText } = render(
-          <LegendBar label="long" type="long" values={mockValues} />
+          <LegendBar
+            isDark={false}
+            label="long"
+            type="long"
+            values={mockValues}
+          />
         );
 
-        expect(getByText('0.15% long')).toBeInTheDocument();
-        expect(getByText('0.55% long')).toBeInTheDocument();
+        expect(getByText('long')).toBeInTheDocument();
+        expect(getByText('0.15%')).toBeInTheDocument();
+        expect(getByText('≤ 0.55%')).toBeInTheDocument();
       });
 
       it('renders exactly 1 segment', () => {
         const { getAllByTestId } = render(
-          <LegendBar label="short" type="short" values={mockValues} />
+          <LegendBar
+            isDark={false}
+            label="short"
+            type="short"
+            values={mockValues}
+          />
         );
         const segments = getAllByTestId('legend-bar-segment');
         expect(segments.length).toBe(1);
       });
+
+      it('uses light mode colors when isDark is false', () => {
+        const { getByTestId } = render(
+          <LegendBar
+            isDark={false}
+            label="long"
+            type="long"
+            values={mockValues}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.getAttribute('style');
+        expect(style).toContain(COLOR_MAP.light.long[0]);
+        expect(style).toContain(COLOR_MAP.light.long[1]);
+      });
+
+      it('uses dark mode colors when isDark is true', () => {
+        const { getByTestId } = render(
+          <LegendBar
+            isDark={true}
+            label="long"
+            type="long"
+            values={mockValues}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.getAttribute('style');
+        expect(style).toContain(COLOR_MAP.dark.long[0]);
+        expect(style).toContain(COLOR_MAP.dark.long[1]);
+      });
+
+      it('uses light mode short colors when isDark is false', () => {
+        const { getByTestId } = render(
+          <LegendBar
+            isDark={false}
+            label="short"
+            type="short"
+            values={mockValues}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.getAttribute('style');
+        expect(style).toContain(COLOR_MAP.light.short[0]);
+        expect(style).toContain(COLOR_MAP.light.short[1]);
+      });
+
+      it('uses dark mode short colors when isDark is true', () => {
+        const { getByTestId } = render(
+          <LegendBar
+            isDark={true}
+            label="short"
+            type="short"
+            values={mockValues}
+          />
+        );
+        const segment = getByTestId('legend-bar-segment');
+        const style = segment.getAttribute('style');
+        expect(style).toContain(COLOR_MAP.dark.short[0]);
+        expect(style).toContain(COLOR_MAP.dark.short[1]);
+      });
     });
   });
 });