Update TrendIndicator colors. Remove comparison label color

Shopify · Jun 17, 2024 · effe87a · effe87a
1 parent 131de48
commit effe87a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 47 deletions.
diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts
@@ -141,6 +141,10 @@ const DEFAULT_GROUP_LABEL_HIDE = false;
 
 const DEFAULT_CROSSHAIR_WIDTH = 1;
 
+const TREND_POSITIVE = '#078d4e';
+const TREND_NEGATIVE = '#616161';
+const TREND_NEUTRAL = '#8a8a8a';
+
 export const DARK_THEME: Theme = {
   seriesColors: {
     empty: variables.colorGray140,
@@ -225,9 +229,9 @@ export const DARK_THEME: Theme = {
     labelColor: variables.colorGray30,
     backgroundColor: variables.colorGray150,
     trendIndicator: {
-      positive: variables.colorDarkPositive,
-      negative: variables.colorDarkNegative,
-      neutral: variables.colorDarkNeutral,
+      positive: TREND_POSITIVE,
+      negative: TREND_NEGATIVE,
+      neutral: TREND_NEUTRAL,
     },
   },
   annotations: {
@@ -240,9 +244,9 @@ export const DARK_THEME: Theme = {
     pillOpacity: 0.6,
   },
   trendIndicator: {
-    positive: variables.colorDarkPositive,
-    negative: variables.colorDarkNegative,
-    neutral: variables.colorDarkNeutral,
+    positive: TREND_POSITIVE,
+    negative: TREND_NEGATIVE,
+    neutral: TREND_NEUTRAL,
   },
   missingData: {
     lineColor: variables.colorGray130,
@@ -306,10 +310,6 @@ const TEAL_14_SOLID = 'rgba(21, 117, 117, 1)';
 const ORANGE_10_SOLID = 'rgba(228, 124, 29, 1)';
 const OLIVE_16_SOLID = 'rgba(64, 76, 3, 1)';
 
-const LIGHT_POSITIVE = '#29845A';
-const LIGHT_NEGATIVE = '#E51C00';
-const LIGHT_NEUTRAL = '#8A8A8A';
-
 export const LIGHT_THEME: Theme = {
   seriesColors: {
     empty: variables.colorGray20,
@@ -391,9 +391,9 @@ export const LIGHT_THEME: Theme = {
     labelColor: variables.colorGray100,
     backgroundColor: variables.colorGray10,
     trendIndicator: {
-      positive: LIGHT_POSITIVE,
-      negative: LIGHT_NEGATIVE,
-      neutral: LIGHT_NEUTRAL,
+      positive: TREND_POSITIVE,
+      negative: TREND_NEGATIVE,
+      neutral: TREND_NEUTRAL,
     },
   },
   annotations: {
@@ -406,9 +406,9 @@ export const LIGHT_THEME: Theme = {
     pillOpacity: 1,
   },
   trendIndicator: {
-    positive: LIGHT_POSITIVE,
-    negative: LIGHT_NEGATIVE,
-    neutral: LIGHT_NEUTRAL,
+    positive: TREND_POSITIVE,
+    negative: TREND_NEGATIVE,
+    neutral: TREND_NEUTRAL,
   },
   missingData: {
     lineColor: variables.colorGray40,

diff --git a/packages/polaris-viz-core/src/styles/shared/_variables.scss b/packages/polaris-viz-core/src/styles/shared/_variables.scss
@@ -10,14 +10,6 @@ $color-purple-dark: rgb(80, 36, 143);
 $color-dark-comparison: rgba(144, 176, 223, 0.8);
 $color-light-comparison: rgba(103, 147, 204, 1);
 
-$color-light-positive: var(--p-icon-success, rgba(0, 127, 95, 1));
-$color-light-negative: var(--p-icon-critical, rgba(215, 44, 13, 1));
-$color-light-neutral: var(--p-icon-subdued, rgba(140, 145, 150, 1));
-
-$color-dark-positive: var(--p-icon-success, #039c86);
-$color-dark-negative: var(--p-icon-critical, #f24f62);
-$color-dark-neutral: var(--p-icon-subdued, #8c9196);
-
 $color-gray-00: #ffffff;
 $color-gray-10: #f6f6f7;
 $color-gray-20: #eeeeef;
@@ -177,14 +169,6 @@ $font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI'
   colorDarkComparison: $color-dark-comparison;
   colorLightComparison: $color-light-comparison;
 
-  colorLightPositive: $color-light-positive;
-  colorLightNegative: $color-light-negative;
-  colorLightNeutral: $color-light-neutral;
-
-  colorDarkPositive: $color-dark-positive;
-  colorDarkNegative: $color-dark-negative;
-  colorDarkNeutral: $color-dark-neutral;
-
   colorGray00: $color-gray-00;
   colorGray10: $color-gray-10;
   colorGray20: $color-gray-20;

diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- Removed comparison color from labels in `<SimpleBarChart />`.
+- Updated `<TrendIndicator />` negative color to neutral grey.
 
 ## [13.2.0] - 2024-05-27
 

diff --git a/packages/polaris-viz/src/chromatic/components/StorySection.tsx b/packages/polaris-viz/src/chromatic/components/StorySection.tsx
@@ -9,7 +9,7 @@ export function StorySection({
 }) {
   return (
     <div>
-      <p>
+      <p style={{color: 'black'}}>
         <strong>{title}</strong>
       </p>
       <div style={{display: 'grid', gap: '10px'}}>{children}</div>

diff --git a/packages/polaris-viz/src/components/shared/HorizontalBars/HorizontalBars.tsx b/packages/polaris-viz/src/components/shared/HorizontalBars/HorizontalBars.tsx
@@ -168,11 +168,7 @@ export function HorizontalBars({
               <LabelWrapper animationDelay={seriesAnimationDelay} x={labelX}>
                 <Label
                   barHeight={barHeight}
-                  color={
-                    data[seriesIndex].isComparison
-                      ? selectedTheme.seriesColors.comparison
-                      : selectedTheme.xAxis.labelColor
-                  }
+                  color={selectedTheme.xAxis.labelColor}
                   label={label}
                   labelWidth={labelWidth}
                   y={y}

diff --git a/tests/setup/tests.ts b/tests/setup/tests.ts
@@ -30,14 +30,6 @@ jest.mock(
       colorDarkComparison: 'rgba(144, 176, 223, 0.8)',
       colorLightComparison: 'rgba(103, 147, 204, 1)',
 
-      colorLightPositive: 'var(--p-icon-success, rgba(0, 127, 95, 1))',
-      colorLightNegative: 'var(--p-icon-critical, rgba(215, 44, 13, 1))',
-      colorLightnNeutral: 'var(--p-icon-subdued, rgba(140, 145, 150, 1))',
-
-      colorDarkPositive: 'var(--p-icon-success, #039c86)',
-      colorDarkNegative: 'var(--p-icon-critical, #f24f62)',
-      colorDarkNeutral: 'var(--p-icon-subdued, #8c9196)',
-
       colorGray00: '#ffffff',
       colorGray10: '#f6f6f7',
       colorGray20: '#eeeeef',