fix(ds-theme): add new css vars and refactor code

Refinitiv · Nov 6, 2024 · 5936387 · 5936387
1 parent 09b9584
commit 5936387
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 36 deletions.
diff --git a/packages/demo-block/demo.css b/packages/demo-block/demo.css
@@ -2,7 +2,8 @@ html {
   font-family: Arial, Helvetica, sans-serif;
   background: #515c61;
   height: 100%;
-  --demo-block-background: var(--color-scheme-ticktext, 'transparent');
+  /* --color-scheme-background-color is available in DS Theme only*/
+  --demo-block-background: var(--color-scheme-background-color, var(--color-scheme-ticktext, 'transparent'));
 }
 
 body {

diff --git a/packages/ds-theme/src/custom-elements/ef-chart.less b/packages/ds-theme/src/custom-elements/ef-chart.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-chart';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-flag.less b/packages/ds-theme/src/custom-elements/ef-flag.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-flag';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-heatmap.less b/packages/ds-theme/src/custom-elements/ef-heatmap.less
@@ -1,7 +1,6 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-heatmap';
 
 :host {
-  &:extend(:host all);
   --below-point-color: @dataviz-color-scale-negative;
   --above-point-color: @dataviz-color-scale-positive;
 }
diff --git a/packages/ds-theme/src/custom-elements/ef-icon.less b/packages/ds-theme/src/custom-elements/ef-icon.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-icon';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-interactive-chart.less b/packages/ds-theme/src/custom-elements/ef-interactive-chart.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-interactive-chart';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-led-gauge.less b/packages/ds-theme/src/custom-elements/ef-led-gauge.less
@@ -1,7 +1,6 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-led-gauge';
 
 :host {
-  &:extend(:host all);
   --range-color: @cont-color-status-fg-info-base;
   --bottom-selected-color: @cont-color-status-fg-neutral-base;
 }
diff --git a/packages/ds-theme/src/custom-elements/ef-progress-bar.less b/packages/ds-theme/src/custom-elements/ef-progress-bar.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-progress-bar';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-sparkline.less b/packages/ds-theme/src/custom-elements/ef-sparkline.less
@@ -1,7 +1,6 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-sparkline';
 
 :host {
-  &:extend(:host all);
   --upper-line-color: @cont-color-status-bg-positive-base;
   --lower-line-color: @cont-color-status-bg-negative-base;
 }
diff --git a/packages/ds-theme/src/custom-elements/ef-swing-gauge.less b/packages/ds-theme/src/custom-elements/ef-swing-gauge.less
@@ -1,7 +1,6 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-swing-gauge';
 
 :host {
-  &:extend(:host all);
   --primary-color: @dataviz-color-primary;
   --secondary-color: @dataviz-color-complementary;
   --center-line-color: @separator-color;

diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-chart.less b/packages/ds-theme/src/custom-elements/ef-tornado-chart.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tornado-chart';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-item.less b/packages/ds-theme/src/custom-elements/ef-tornado-item.less
@@ -1,5 +1 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tornado-item';
-
-:host {
-  &:extend(:host all);
-}
diff --git a/packages/ds-theme/src/native-elements/html.less b/packages/ds-theme/src/native-elements/html.less
@@ -0,0 +1,12 @@
+@import '@refinitiv-ui/halo-theme/src/native-elements/html';
+
+// Expose global background color in DS Theme
+// This helps to solve background color in demo page and several users requested for this
+@css-properties-extra: {
+  --color-scheme-background-color: @global-background-color;
+  --color-scheme-text-color: @global-text-color;
+};
+
+html {
+  @css-properties-extra();
+}
diff --git a/packages/ds-theme/src/variants/light/variables.less b/packages/ds-theme/src/variants/light/variables.less
@@ -1,8 +1,5 @@
 @import (reference) '../../variables';
 
-// TODO: Find a better solution to demo-block background-color.
-@tick-text-color                          : @global-background-color;
-
 // Primary colours
 @scheme-color-primary                     : @cont-color-common-container-brand-base;
 @scheme-color-secondary                   : @cont-color-common-container-secondary-base;
@@ -274,3 +271,45 @@
 @dataviz-color-scale-low-negative        : @cont-color-data-viz-diverging-bg-positive-negative-negative-300;
 @dataviz-color-scale-low-positive        : @cont-color-data-viz-diverging-bg-positive-negative-positive-300;
 @dataviz-color-scale-range               : @cont-color-data-viz-categorical-bg-category-1;
+
+// Movement colours profile (NEGATIVE)
+@negative-color-american                 : @cont-color-status-bg-negative-base;
+@negative-color-asian1                   : @cont-color-status-bg-positive-base;
+@negative-color-asian2                   : @cont-color-status-bg-negative-base;
+@negative-color-european                 : @cont-color-status-bg-negative-base;
+
+// Movement colours profile (NEUTRAL)
+@neutral-color-american                  : @cont-color-status-bg-neutral-base;
+@neutral-color-asian1                    : @cont-color-status-bg-neutral-base;
+@neutral-color-asian2                    : @cont-color-status-bg-positive-base;
+@neutral-color-european                  : @cont-color-status-bg-positive-base;
+
+// Movement colours profile (POSITIVE)
+@positive-color-american                 : @cont-color-status-bg-positive-base;
+@positive-color-asian1                   : @cont-color-status-bg-negative-base;
+@positive-color-asian2                   : @color-dataviz-cyan;
+@positive-color-european                 : @color-dataviz-cyan;
+
+// Tick colours (NEGATIVE)
+@tickdown-color-american                 : @cont-color-status-bg-negative-base;
+@tickdown-color-asian1                   : @cont-color-status-bg-positive-base;
+@tickdown-color-asian2                   : @cont-color-status-bg-negative-base;
+@tickdown-color-european                 : @cont-color-status-bg-negative-base;
+
+// Tick colours (POSITIVE)
+@tickup-color-american                   : @cont-color-status-bg-positive-base;
+@tickup-color-asian1                     : @cont-color-status-bg-negative-base;
+@tickup-color-asian2                     : @cont-color-status-bg-positive-base;
+@tickup-color-european                   : @cont-color-status-bg-positive-base;
+
+// Tick text colour
+@tick-text-color                          : @cont-color-status-fg-on-positive-base; // very likely that all statuses can use the same color
+
+
+@cont-color-status-bg-neutral-base: #505b67;
+@cont-color-status-bg-positive-base: #006835;
+@cont-color-status-bg-negative-base: #b70300;
+
+@cont-color-status-fg-on-neutral-base: #ffffff;
+@cont-color-status-fg-on-negative-base: #ffffff;
+@cont-color-status-fg-on-positive-base: #ffffff;