chore(uirefresh): create flag, update color palette (#1053)

.gitignore

@@ -36,6 +36,8 @@ public/datafeed
 # Don't ignore custom styling
 !public/tradingview/custom-styles.css 
 !public/tradingview/colors.css
+!public/tradingview/custom-styles-deprecated.css 
+!public/tradingview/colors-deprecated.css
 
 # Local Library Development
 local-abacus-hash

public/tradingview/colors-deprecated.css

@@ -0,0 +1,64 @@
+/* This file will be deprecated with the ui-refresh. Please duplicate any changes here into colors.css */
+
+/* Theme: Classic (default) */
+:root {
+  --color-layer-0: #08080C; /* ColorToken.GrayBlue7; */
+  --color-layer-1: #101018; /* ColorToken.GrayBlue6; */
+  --color-layer-2: #181825; /* ColorToken.GrayBlue5; */
+  --color-layer-3: #212131; /* ColorToken.GrayBlue4; */
+  --color-layer-4: #29293D; /* ColorToken.GrayBlue3; */
+  --color-layer-5: #303045; /* ColorToken.GrayBlue2; */
+  --color-layer-6: #38384D; /* ColorToken.GrayBlue1; */
+  --color-layer-7: #464659; /* ColorToken.GrayBlue0; */
+
+  --color-border: #303045; /* ColorToken.GrayBlue2; */
+
+  --color-text-0: #807E98; /* ColorToken.GrayPurple2; */
+  --color-text-1: #C8C7D8; /* ColorToken.GrayPurple1; */
+  --color-text-2: #FAFAFD; /* ColorToken.LightGray2; */
+  --color-text-button: #FAFAFA; /* ColorToken.LightGray0; */
+
+  --color-accent: #6966FF; /* ColorToken.Purple1; */
+}
+
+/* Theme: Light */
+:root.theme-light {
+  --color-layer-0: #FFFFFF; /* ColorToken.White; */
+  --color-layer-1: #E9ECEE; /* ColorToken.LightGray7; */
+  --color-layer-2: #FFFFFF; /* ColorToken.White; */
+  --color-layer-3: #F7F8FA; /* ColorToken.LightGray1; */
+  --color-layer-4: #FFFFFF; /* ColorToken.White; */
+  --color-layer-5: #EDF0F2; /* ColorToken.LightGray4; */
+  --color-layer-6: #D5DADF; /* ColorToken.LightGray10; */
+  --color-layer-7: #C2CBD3; /* ColorToken.MediumGray1; */
+
+  --color-border: #D1D9E0; /* ColorToken.LightGray11; */
+
+  --color-text-0: #737373; /* ColorToken.DarkGray1; */
+  --color-text-1: #4B4B4B; /* ColorToken.DarkGray3; */
+  --color-text-2: #181818; /* ColorToken.DarkGray13; */
+  --color-text-button: #FFFFFF; /* ColorToken.White; */
+
+  --color-accent: #7774FF; /* ColorToken.Purple0; */
+}
+
+/* Theme: Dark */
+:root.theme-dark {
+  --color-layer-0: #000000; /* ColorToken.Black; */
+  --color-layer-1: #18181B; /* ColorToken.DarkGray12; */
+  --color-layer-2: #0C0C0D; /* ColorToken.DarkGray15; */
+  --color-layer-3: #212124; /* ColorToken.DarkGray11; */
+  --color-layer-4: #303033; /* ColorToken.DarkGray6; */
+  --color-layer-5: #3B3B3F; /* ColorToken.DarkGray5; */
+  --color-layer-6: #494950; /* ColorToken.DarkGray4; */
+  --color-layer-7: #56565C; /* ColorToken.DarkGray2; */
+
+  --color-border: #494950; /* ColorToken.DarkGray4; */
+
+  --color-text-0: #888891; /* ColorToken.DarkGray0; */
+  --color-text-1: #CACACE; /* ColorToken.MediumGray0; */
+  --color-text-2: #FAFAFA; /* ColorToken.LightGray0; */
+  --color-text-button: #FAFAFA; /* ColorToken.LightGray0; */
+
+  --color-accent: #7774FF; /* ColorToken.Purple0; */
+}

public/tradingview/colors.css

@@ -1,3 +1,5 @@
+/* This file is intended to replace colors-deprecated.css with the ui-refresh */
+
 /* Theme: Classic (default) */
 :root {
   --color-layer-0: #08080C; /* ColorToken.GrayBlue7; */
@@ -21,20 +23,20 @@
 
 /* Theme: Light */
 :root.theme-light {
-  --color-layer-0: #FFFFFF; /* ColorToken.White; */
-  --color-layer-1: #E9ECEE; /* ColorToken.LightGray6; */
+  --color-layer-0: #E9ECEE; /* ColorToken.LightGray7; */
+  --color-layer-1: #ECEFF1; /* ColorToken.LightGray5; */
   --color-layer-2: #FFFFFF; /* ColorToken.White; */
   --color-layer-3: #F7F8FA; /* ColorToken.LightGray1; */
   --color-layer-4: #FFFFFF; /* ColorToken.White; */
   --color-layer-5: #EDF0F2; /* ColorToken.LightGray4; */
-  --color-layer-6: #D5DADF; /* ColorToken.LightGray9; */
+  --color-layer-6: #D5DADF; /* ColorToken.LightGray10; */
   --color-layer-7: #C2CBD3; /* ColorToken.MediumGray1; */
 
-  --color-border: #D1D9E0; /* ColorToken.LightGray10; */
+  --color-border: #D1D9E0; /* ColorToken.LightGray11; */
 
   --color-text-0: #737373; /* ColorToken.DarkGray1; */
   --color-text-1: #4B4B4B; /* ColorToken.DarkGray3; */
-  --color-text-2: #181818; /* ColorToken.DarkGray12; */
+  --color-text-2: #181818; /* ColorToken.DarkGray13; */
   --color-text-button: #FFFFFF; /* ColorToken.White; */
 
   --color-accent: #7774FF; /* ColorToken.Purple0; */
@@ -43,9 +45,9 @@
 /* Theme: Dark */
 :root.theme-dark {
   --color-layer-0: #000000; /* ColorToken.Black; */
-  --color-layer-1: #18181B; /* ColorToken.DarkGray11; */
-  --color-layer-2: #0C0C0D; /* ColorToken.DarkGray13; */
-  --color-layer-3: #212124; /* ColorToken.DarkGray10; */
+  --color-layer-1: #1B1B1D; /* ColorToken.DarkGray14; */
+  --color-layer-2: #212124; /* ColorToken.DarkGray11; */
+  --color-layer-3: #28282B; /* ColorToken.DarkGray9; */
   --color-layer-4: #303033; /* ColorToken.DarkGray6; */
   --color-layer-5: #3B3B3F; /* ColorToken.DarkGray5; */
   --color-layer-6: #494950; /* ColorToken.DarkGray4; */

public/tradingview/custom-styles.css

@@ -1,3 +1,5 @@
+/* This file is intended to replace custom-styles-deprecated.css with the ui-refresh */
+
 @import './colors.css';
 
 @font-face {

src/constants/styles/base.ts

@@ -7,12 +7,13 @@ export enum ColorToken {
   LightGray2 = '#FAFAFD',
   LightGray3 = '#F5F5F5',
   LightGray4 = '#EDF0F2',
-  LightGray5 = '#EDEDED',
-  LightGray6 = '#E9ECEE',
-  LightGray7 = '#E6E6E6',
-  LightGray8 = '#DBDBDB',
-  LightGray9 = '#D5DADF',
-  LightGray10 = '#D1D9E0',
+  LightGray5 = '#ECEFF1',
+  LightGray6 = '#EDEDED',
+  LightGray7 = '#E9ECEE',
+  LightGray8 = '#E6E6E6',
+  LightGray9 = '#DBDBDB',
+  LightGray10 = '#D5DADF',
+  LightGray11 = '#D1D9E0',
 
   MediumGray0 = '#CACACE',
   MediumGray1 = '#C2CBD3',
@@ -26,11 +27,13 @@ export enum ColorToken {
   DarkGray6 = '#303033',
   DarkGray7 = '#313135',
   DarkGray8 = '#292929',
-  DarkGray9 = '#23232F',
-  DarkGray10 = '#212124',
-  DarkGray11 = '#18181B',
-  DarkGray12 = '#181818',
-  DarkGray13 = '#0C0C0D',
+  DarkGray9 = '#28282B',
+  DarkGray10 = '#23232F',
+  DarkGray11 = '#212124',
+  DarkGray12 = '#18181B',
+  DarkGray13 = '#181818',
+  DarkGray14 = '#1B1B1D',
+  DarkGray15 = '#0C0C0D',
 
   GrayBlue0 = '#464659',
   GrayBlue1 = '#38384D',
@@ -48,12 +51,13 @@ export enum ColorToken {
   Purple0 = '#7774FF',
   Purple1 = '#6966FF',
 
-  Green0 = '#1AFFB9',
-  Green1 = '#3ED9A4',
-  Green2 = '#2CCC98',
-  Green3 = '#3EB68A',
-  Green4 = '#2C5254',
-  Green5 = '#CEEDE3',
+  Green0 = '#CEEDE3',
+  Green1 = '#1AFFB9',
+  Green2 = '#3ED9A4',
+  Green3 = '#2CCC98',
+  Green4 = '#3EB68A',
+  Green5 = '#14AE7A',
+  Green6 = '#2C5254',
 
   Yellow0 = '#FFCC48',
   Yellow1 = '#FFB647',

src/lib/testFlags.ts

@@ -71,6 +71,10 @@ class TestFlags {
   get enableStaticTyping() {
     return !!this.queryParams.statictyping;
   }
+
+  get uiRefresh() {
+    return !!this.queryParams.uirefresh;
+  }
 }
 
 export const testFlags = new TestFlags();

src/lib/tradingView/utils.ts

@@ -13,6 +13,7 @@ import { Themes } from '@/styles/themes';
 import { AppTheme, type AppColorMode } from '@/state/configs';
 
 import { getDisplayableTickerFromMarket } from '../assetUtils';
+import { testFlags } from '../testFlags';
 
 const MIN_NUM_TRADES_FOR_ORDERBOOK_PRICES = 10;
 
@@ -222,11 +223,15 @@ export const getWidgetOverrides = ({
 
 export const getWidgetOptions = (): Partial<TradingTerminalWidgetOptions> &
   Pick<TradingTerminalWidgetOptions, 'container'> => {
+  const { uiRefresh } = testFlags;
+
   return {
     // debug: true,
     container: 'tv-price-chart',
     library_path: '/tradingview/', // relative to public folder
-    custom_css_url: '/tradingview/custom-styles.css',
+    custom_css_url: uiRefresh
+      ? '/tradingview/custom-styles.css'
+      : '/tradingview/custom-styles-deprecated.css',
     custom_font_family: "'Satoshi', system-ui, -apple-system, Helvetica, Arial, sans-serif",
     autosize: true,
     disabled_features: [