From effe87a297ed43776c2c8207a3587382d575b31e Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Mon, 17 Jun 2024 09:31:32 -0500 Subject: [PATCH] Update TrendIndicator colors. Remove comparison label color --- packages/polaris-viz-core/src/constants.ts | 32 +++++++++---------- .../src/styles/shared/_variables.scss | 16 ---------- packages/polaris-viz/CHANGELOG.md | 7 +++- .../src/chromatic/components/StorySection.tsx | 2 +- .../shared/HorizontalBars/HorizontalBars.tsx | 6 +--- tests/setup/tests.ts | 8 ----- 6 files changed, 24 insertions(+), 47 deletions(-) diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts index b6264910b..336f3a0b3 100644 --- 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 index 8952f2553..fc14be49c 100644 --- 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 index bd5a03f72..157425c68 100644 --- 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 + +### Changed + +- Removed comparison color from labels in ``. +- Updated `` 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 index eb0cfbf7c..31b2a0f2f 100644 --- 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 (
-

+

{title}

{children}
diff --git a/packages/polaris-viz/src/components/shared/HorizontalBars/HorizontalBars.tsx b/packages/polaris-viz/src/components/shared/HorizontalBars/HorizontalBars.tsx index 1d5523ec0..d2b623f5a 100644 --- 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({