From 9516175e283b0752f99559d72cfa7efc8d52417c Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 6 Dec 2024 11:09:10 +0100 Subject: [PATCH] feat(lib): Inherits the dark/light theme's mode management using css variables and an ODS Charts DEFAULT mode --- docs/assets/color-mode.js | 8 +- docs/examples/index.js | 28 +- docs/use_cases/index.js | 1 - src/theme/ODS.project.ts | 136 +++---- src/theme/colors/colors-css-variables.ts | 331 ++++++++++++++++++ src/theme/dark/ODS.colors.blue.ts | 9 +- src/theme/dark/ODS.colors.categorical.ts | 17 +- src/theme/dark/ODS.colors.darker-tints.ts | 8 +- src/theme/dark/ODS.colors.functional.ts | 9 +- src/theme/dark/ODS.colors.green.ts | 9 +- src/theme/dark/ODS.colors.lighter-tints.ts | 8 +- src/theme/dark/ODS.colors.pink.ts | 9 +- src/theme/dark/ODS.colors.purple.ts | 9 +- .../dark/ODS.colors.supporting-colors.ts | 8 +- src/theme/dark/ODS.colors.ts | 17 +- src/theme/dark/ODS.colors.yellow.ts | 9 +- src/theme/dark/ODS.common.ts | 2 +- src/theme/dark/ODS.lines.axis.ts | 24 +- src/theme/default/ODS.colors.blue.ts | 18 + src/theme/default/ODS.colors.categorical.ts | 24 ++ src/theme/default/ODS.colors.darker-tints.ts | 17 + src/theme/default/ODS.colors.functional.ts | 18 + src/theme/default/ODS.colors.green.ts | 18 + src/theme/default/ODS.colors.lighter-tints.ts | 17 + src/theme/default/ODS.colors.pink.ts | 18 + src/theme/default/ODS.colors.purple.ts | 18 + .../default/ODS.colors.supporting-colors.ts | 11 + src/theme/default/ODS.colors.ts | 24 ++ src/theme/default/ODS.colors.yellow.ts | 18 + src/theme/default/ODS.common.ts | 11 + src/theme/default/ODS.lines.axis.ts | 82 +++++ src/theme/legends/ods-chart-legends.ts | 16 +- src/theme/light/ODS.colors.blue.ts | 9 +- src/theme/light/ODS.colors.categorical.ts | 15 +- src/theme/light/ODS.colors.darker-tints.ts | 8 +- src/theme/light/ODS.colors.functional.ts | 9 +- src/theme/light/ODS.colors.green.ts | 9 +- src/theme/light/ODS.colors.lighter-tints.ts | 8 +- src/theme/light/ODS.colors.pink.ts | 9 +- src/theme/light/ODS.colors.purple.ts | 9 +- .../light/ODS.colors.supporting-colors.ts | 8 +- src/theme/light/ODS.colors.ts | 15 +- src/theme/light/ODS.colors.yellow.ts | 9 +- src/theme/light/ODS.common.ts | 2 +- src/theme/light/ODS.lines.axis.ts | 24 +- src/theme/ods-chart-theme.ts | 240 ++++++++++++- .../popover/ods-chart-popover-definitions.ts | 50 ++- src/theme/popover/ods-chart-popover.ts | 53 ++- 48 files changed, 1272 insertions(+), 157 deletions(-) create mode 100644 src/theme/colors/colors-css-variables.ts create mode 100644 src/theme/default/ODS.colors.blue.ts create mode 100644 src/theme/default/ODS.colors.categorical.ts create mode 100644 src/theme/default/ODS.colors.darker-tints.ts create mode 100644 src/theme/default/ODS.colors.functional.ts create mode 100644 src/theme/default/ODS.colors.green.ts create mode 100644 src/theme/default/ODS.colors.lighter-tints.ts create mode 100644 src/theme/default/ODS.colors.pink.ts create mode 100644 src/theme/default/ODS.colors.purple.ts create mode 100644 src/theme/default/ODS.colors.supporting-colors.ts create mode 100644 src/theme/default/ODS.colors.ts create mode 100644 src/theme/default/ODS.colors.yellow.ts create mode 100644 src/theme/default/ODS.common.ts create mode 100644 src/theme/default/ODS.lines.axis.ts diff --git a/docs/assets/color-mode.js b/docs/assets/color-mode.js index 05b7659..4853e79 100644 --- a/docs/assets/color-mode.js +++ b/docs/assets/color-mode.js @@ -21,10 +21,12 @@ const setTheme = (theme) => { if (theme === 'auto') { - document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); - } else { - document.documentElement.setAttribute('data-bs-theme', theme); + theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } + document.documentElement.setAttribute('data-bs-theme', theme); + document.querySelectorAll('iframe').forEach((iframe) => { + iframe.contentDocument.body.setAttribute('data-bs-theme', theme); + }); }; setTheme(getPreferredTheme()); diff --git a/docs/examples/index.js b/docs/examples/index.js index fc44aef..3baf622 100644 --- a/docs/examples/index.js +++ b/docs/examples/index.js @@ -35,20 +35,21 @@ async function wait(timer = 0) { }); } -function generateChartDiv(id, direction) { +function generateChartDiv(id, direction, mode) { return ` -
+

Title

Sub-Title
-
+
${buildChartDiv(id)}
-
+
`; } @@ -64,7 +65,7 @@ function generateConfigurator(id) { }, header: { begin: (id, itemId) => `

-

`, @@ -89,6 +90,7 @@ function generateConfigurator(id) {
@@ -287,6 +289,10 @@ async function displayChart( while (!(iframe.contentWindow.boosted && iframe.contentWindow.ODSCharts && iframe.contentWindow.echarts)) { await wait(50); } + + if (document.querySelector('[data-bs-theme]')) { + iframe.contentDocument.body.setAttribute('data-bs-theme', document.querySelector('[data-bs-theme]').getAttribute('data-bs-theme')); + } } let iframe = document.querySelector(`#${id} iframe`); @@ -333,6 +339,12 @@ async function displayChart( legendsOrientation = 'horizontal'; } + if (['light', 'dark'].includes(themeManager.options.mode)) { + iframe.contentDocument.querySelector('.graph-holder').setAttribute('data-bs-theme', themeManager.options.mode); + } else { + iframe.contentDocument.querySelector('.graph-holder').removeAttribute('data-bs-theme'); + } + const actualTheme = iframe.contentDocument.getElementById('mainCSS').getAttribute('cssThemeName'); if (actualTheme !== cssThemeName) { @@ -445,7 +457,11 @@ async function displayChart( div = iframe.contentDocument.getElementById(chartId); } - document.getElementById(id + '_html').innerText = generateChartDiv(id, usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column'); + document.getElementById(id + '_html').innerText = generateChartDiv( + id, + usedLegends === 'odscharts' && 'vertical' === legendsOrientation ? 'row' : 'column', + themeManager.options.mode + ); document.getElementById(id + '_code').innerText = `/////////////////////////////////////////////////// // Used data /////////////////////////////////////////////////// diff --git a/docs/use_cases/index.js b/docs/use_cases/index.js index b6df4fc..734694c 100644 --- a/docs/use_cases/index.js +++ b/docs/use_cases/index.js @@ -1,6 +1,5 @@ var addViewCode = (prefixId = '', htmlId = 'htmlId', codeId = 'codeId') => { var htmlElt = document.getElementById(prefixId + htmlId); - htmlElt.setAttribute('data-bs-theme', 'light'); var innitHtmlDoc = htmlElt.innerHTML; document.write(` diff --git a/src/theme/ODS.project.ts b/src/theme/ODS.project.ts index b91b444..26d6ce6 100644 --- a/src/theme/ODS.project.ts +++ b/src/theme/ODS.project.ts @@ -401,14 +401,14 @@ export interface EChartsProject { export const ODS_PROJECT: EChartsProject = { color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], - backgroundColor: 'transparent', + backgroundColor: 'var(--bs-body-bg, transparent)', textStyle: {}, title: { textStyle: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, subtextStyle: { - color: '#666666', + color: 'var(--bs-secondary-color, #666666)', }, }, line: { @@ -436,114 +436,114 @@ export const ODS_PROJECT: EChartsProject = { bar: { itemStyle: { barBorderWidth: '2', - barBorderColor: '#ffffff', + barBorderColor: 'var(--bs-body-bg, #ffffff)', }, }, pie: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, scatter: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, boxplot: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, parallel: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, sankey: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, funnel: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, gauge: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, candlestick: { itemStyle: { - color: '#32C832', - color0: '#CD3C14', - borderColor: '#32C832', - borderColor0: '#CD3C14', + color: 'var(--bs-success, #32c832)', + color0: 'var(--bs-danger, #cd3c14)', + borderColor: 'var(--bs-success, #228722)', + borderColor0: 'var(--bs-danger, #cd3c14)', borderWidth: 1, }, }, graph: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, lineStyle: { width: 1, - color: '#aaa', + color: 'var(--bs-secondary-color, #666666)', }, symbolSize: 4, symbol: 'emptyCircle', smooth: false, color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, }, map: { itemStyle: { - areaColor: '#eee', - borderColor: '#444', + areaColor: 'var(--bs-secondary-bg, #eeeeee)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 0.5, }, label: { - color: '#000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { itemStyle: { - areaColor: 'rgba(255,215,0,0.8)', - borderColor: '#444', + areaColor: 'rgba(var(--bs-warning-rgb, 255,215,0),0.8)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 1, }, label: { - color: 'rgb(100,0,0)', + color: 'var(--bs-black, rgb(100,0,0))', }, }, }, geo: { itemStyle: { - areaColor: '#eee', - borderColor: '#444', + areaColor: 'var(--bs-secondary-bg, #eeeeee)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 0.5, }, label: { - color: '#000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { itemStyle: { - areaColor: 'rgba(255,215,0,0.8)', - borderColor: '#444', + areaColor: 'rgba(var(--bs-warning-rgb, 255,215,0),0.8)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 1, }, label: { - color: 'rgb(100,0,0)', + color: 'var(--bs-black, rgb(100,0,0))', }, }, }, @@ -551,29 +551,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#eb0909', + color: 'var(--bs-danger, #eb0909)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['#ffffff'], + color: ['var(--bs-body-bg, #ffffff)'], }, }, }, @@ -581,29 +581,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#6E7079', + color: 'var(--secondary-color, #6E7079)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, @@ -611,29 +611,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#6E7079', + color: 'var(--bs-secondary-color, #6E7079)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, @@ -641,91 +641,91 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, toolbox: { iconStyle: { - borderColor: '#999', + borderColor: 'var(--bs-secondary-color, #999999)', }, emphasis: { iconStyle: { - borderColor: '#666', + borderColor: 'var(--bs-body-color, #666666)', }, }, }, legend: { textStyle: { - color: '#333', + color: 'var(--bs-body-color, #333333)', }, }, tooltip: { axisPointer: { lineStyle: { - color: '#ccc', + color: 'var(--bs-border-color-subtle, #cccccc)', width: 1, }, crossStyle: { - color: '#ccc', + color: 'var(--bs-border-color-subtle, #cccccc)', width: 1, }, }, }, timeline: { lineStyle: { - color: '#DAE1F5', + color: 'var(--bs-tertiary-bg, #dae1f5)', width: 2, }, itemStyle: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, controlStyle: { - color: '#A4B1D7', - borderColor: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', + borderColor: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, checkpointStyle: { - color: '#316bf3', - borderColor: 'fff', + color: 'var(--bs-info, #316bf3)', + borderColor: 'var(--bs-body-bg, #ffffff)', }, label: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', }, emphasis: { itemStyle: { - color: '#FFF', + color: 'var(--bs-body-bg, #ffffff)', }, controlStyle: { - color: '#A4B1D7', - borderColor: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', + borderColor: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, label: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', }, }, }, @@ -734,11 +734,11 @@ export const ODS_PROJECT: EChartsProject = { }, markPoint: { label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, }, }, diff --git a/src/theme/colors/colors-css-variables.ts b/src/theme/colors/colors-css-variables.ts new file mode 100644 index 0000000..9cbba8a --- /dev/null +++ b/src/theme/colors/colors-css-variables.ts @@ -0,0 +1,331 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +import { ODSChartsCSSThemesNames } from '../css-themes/css-themes'; + +/** + * Added for None or Boosted 4 themes + */ +const BOOSTED5_VARIABLE = ` +.ods-charts-context, [data-bs-theme=light] .ods-charts-context, .ods-charts-context[data-bs-theme=light] { + color-scheme: light; + --bs-blue: #4170d8; + --bs-indigo: #a885d8; + --bs-purple: #a885d8; + --bs-pink: #ffb4e6; + --bs-red: #cd3c14; + --bs-orange: #f16e00; + --bs-yellow: #fc0; + --bs-green: #228722; + --bs-teal: #50be87; + --bs-cyan: #4bb4e6; + --bs-black: #000; + --bs-white: #fff; + --bs-gray: #999; + --bs-gray-dark: #595959; + --bs-gray-100: #fafafa; + --bs-gray-200: #f6f6f6; + --bs-gray-300: #eee; + --bs-gray-400: #ddd; + --bs-gray-500: #ccc; + --bs-gray-600: #999; + --bs-gray-700: #666; + --bs-gray-800: #595959; + --bs-gray-900: #333; + --bs-gray-950: #141414; + --bs-body-color: #000; + --bs-body-color-rgb: 0, 0, 0; + --bs-body-bg: #fff; + --bs-body-bg-rgb: 255, 255, 255; + --bs-link-color: #000; + --bs-border-width: 0.125rem; + --bs-border-color: #000; + --bs-border-color-subtle: #ccc; + + --bs-secondary-color: #666; + --bs-secondary-bg: #eee; + --bs-primary: #f16e00; + --bs-secondary: #000; + --bs-success: #228722; + --bs-info: #4170d8; + --bs-warning: #fc0; + --bs-danger: #cd3c14; + --bs-light: #ccc; + --bs-dark: #000; + + --bs-warning-rgb: 255, 204, 0; + --bs-tertiary-color-rgb: 204, 204, 204; + --bs-tertiary-bg: #fafafa; +} + +[data-bs-theme=dark] .ods-charts-context, .ods-charts-context[data-bs-theme=dark] { + color-scheme: dark; + --bs-body-color: #fff; + --bs-body-color-rgb: 255, 255, 255; + --bs-body-bg: #141414; + --bs-body-bg-rgb: 20, 20, 20; + --bs-link-color: #fff; + --bs-border-color: #fff; + --bs-border-color-subtle: #666; + + --bs-secondary-color: #999; + --bs-secondary-bg: #333; + --bs-primary: #ff7900; + --bs-secondary: #fff; + --bs-success: #6c6; + --bs-info: #69f; + --bs-warning: #fc0; + --bs-danger: #f66; + --bs-light: #ccc; + --bs-dark: #000; + + --bs-warning-rgb: 255, 204, 0; + --bs-tertiary-color-rgb: 102, 102, 102; + --bs-tertiary-bg: #000; +} + + +[data-bs-theme] .ods-charts-context, .ods-charts-context[data-bs-theme] { + color: var(--bs-body-color); + background-color: var(--bs-body-bg); +} + + +[data-bs-theme] .ods-charts-context a, .ods-charts-context[data-bs-theme] a { + color: var(--bs-link-color); +} +`; + +/** + * Added for all themes + */ +const NON_BOOSTED5_VARIABLE = ` +.ods-charts-context, [data-bs-theme=light] .ods-charts-context, .ods-charts-context[data-bs-theme=light] { + --ods-yellow-100: #fff6b6; + --ods-yellow-200: #ffe45b; + --ods-yellow-300: #ffd200; + --ods-yellow-400: #ffb400; + --ods-yellow-500: #b98f11; + --ods-yellow-600: #9d6e06; + + --ods-yellow: var(--ods-yellow-300); + + --ods-blue-100: #b5e8f7; + --ods-blue-200: #80ceef; + --ods-blue-300: #4bb4e6; + --ods-blue-400: #3e9dd6; + --ods-blue-500: #237ecA; + --ods-blue-600: #085ebd; + + --ods-green-100: #B8EBD6; + --ods-green-200: #84D5AF; + --ods-green-300: #50BE87; + --ods-green-400: #27A971; + --ods-green-500: #198C51; + --ods-green-600: #0A6E31; + + --ods-pink-100: #FFE8F7; + --ods-pink-200: #FFCEEF; + --ods-pink-300: #FFB4E6; + --ods-pink-400: #FF8AD4; + --ods-pink-500: #D573BB; + --ods-pink-600: #BC4D9A; + + --ods-purple-100: #D9C2F0; + --ods-purple-200: #C1A4E4; + --ods-purple-300: #A885D8; + --ods-purple-400: #9373BD; + --ods-purple-500: #6E4AA7; + --ods-purple-600: #492191; + + --ods-yellow-1: var(--ods-yellow-600); + --ods-yellow-2: var(--ods-yellow-500); + --ods-yellow-3: var(--ods-yellow-400); + --ods-yellow-4: var(--ods-yellow-300); + --ods-yellow-5: var(--ods-yellow-200); + --ods-yellow-6: var(--ods-yellow-100); + + --ods-blue-1: var(--ods-blue-600); + --ods-blue-2: var(--ods-blue-500); + --ods-blue-3: var(--ods-blue-400); + --ods-blue-4: var(--ods-blue-300); + --ods-blue-5: var(--ods-blue-200); + --ods-blue-6: var(--ods-blue-100); + + --ods-green-1: var(--ods-green-600); + --ods-green-2: var(--ods-green-500); + --ods-green-3: var(--ods-green-400); + --ods-green-4: var(--ods-green-300); + --ods-green-5: var(--ods-green-200); + --ods-green-6: var(--ods-green-100); + + --ods-pink-1: var(--ods-pink-600); + --ods-pink-2: var(--ods-pink-500); + --ods-pink-3: var(--ods-pink-400); + --ods-pink-4: var(--ods-pink-300); + --ods-pink-5: var(--ods-pink-200); + --ods-pink-6: var(--ods-pink-100); + + --ods-purple-1: var(--ods-purple-600); + --ods-purple-2: var(--ods-purple-500); + --ods-purple-3: var(--ods-purple-400); + --ods-purple-4: var(--ods-purple-300); + --ods-purple-5: var(--ods-purple-200); + --ods-purple-6: var(--ods-purple-100); + + --ods-categorical-1: var(--ods-blue-600); + --ods-categorical-2: var(--ods-green-400); + --ods-categorical-3: var(--ods-pink-600); + --ods-categorical-4: var(--ods-purple-400); + --ods-categorical-5: var(--ods-yellow-600); + --ods-categorical-6: var(--bs-gray-900); + --ods-categorical-7: var(--ods-blue-400); + --ods-categorical-8: var(--ods-green-600); + --ods-categorical-9: var(--ods-pink-500); + --ods-categorical-10: var(--ods-purple-600); + --ods-categorical-11: var(--ods-yellow-500); + --ods-categorical-12: var(--bs-gray-700); + + --ods-default-1: var(--ods-blue-600); + --ods-default-2: var(--ods-green-600); + --ods-default-3: var(--ods-pink-600); + --ods-default-4: var(--ods-purple-600); + --ods-default-5: var(--ods-yellow-500); + --ods-default-6: var(--bs-gray-700); + --ods-default-7: var(--ods-blue-400); + --ods-default-8: var(--ods-green-400); + --ods-default-9: var(--ods-pink-500); + --ods-default-10: var(--ods-purple-400); + --ods-default-11: var(--ods-yellow-600); + --ods-default-12: var(--bs-gray-900); + + --ods-cyan-light: var(--ods-blue-100); + --ods-teal-light: var(--ods-green-100); + --ods-pink-light: var(--ods-pink-600); + --ods-indigo-light: var(--ods-purple-100); + --ods-yellow-light: var(--ods-yellow-100); + + --ods-cyan-dark: var(--ods-blue-600); + --ods-teal-dark: var(--ods-green-600); + --ods-pink-dark: var(--ods-pink-300); + --ods-indigo-dark: var(--ods-purple-600); + --ods-yellow-dark: var(--ods-yellow-400); + + --ods-functional-1: var(--bs-primary); + --ods-functional-2: var(--bs-gray-300); + --ods-functional-3: var(--bs-success); + --ods-functional-4: var(--bs-warning); + --ods-functional-5: var(--bs-danger); + --ods-functional-6: var(--bs-info); + +} + +[data-bs-theme=dark] .ods-charts-context, .ods-charts-context[data-bs-theme=dark] { + --ods-yellow-1: var(--ods-yellow-100); + --ods-yellow-2: var(--ods-yellow-200); + --ods-yellow-3: var(--ods-yellow-300); + --ods-yellow-4: var(--ods-yellow-400); + --ods-yellow-5: var(--ods-yellow-500); + --ods-yellow-6: var(--ods-yellow-600); + + --ods-blue-1: var(--ods-blue-100); + --ods-blue-1: var(--ods-blue-100); + --ods-blue-3: var(--ods-blue-300); + --ods-blue-4: var(--ods-blue-400); + --ods-blue-5: var(--ods-blue-500); + --ods-blue-6: var(--ods-blue-600); + + --ods-green-1: var(--ods-green-100); + --ods-green-1: var(--ods-green-100); + --ods-green-3: var(--ods-green-300); + --ods-green-4: var(--ods-green-400); + --ods-green-5: var(--ods-green-500); + --ods-green-6: var(--ods-green-600); + + --ods-pink-1: var(--ods-pink-100); + --ods-pink-1: var(--ods-pink-100); + --ods-pink-3: var(--ods-pink-300); + --ods-pink-4: var(--ods-pink-400); + --ods-pink-5: var(--ods-pink-500); + --ods-pink-6: var(--ods-pink-600); + + --ods-purple-1: var(--ods-purple-100); + --ods-purple-1: var(--ods-purple-100); + --ods-purple-3: var(--ods-purple-300); + --ods-purple-4: var(--ods-purple-400); + --ods-purple-5: var(--ods-purple-500); + --ods-purple-6: var(--ods-purple-600); + + /* TODO : check the dark categorical colors (I put back colors from https://github.com/Orange-OpenSource/ods-charts/issues/103) + */ + --ods-categorical-1: var(--ods-blue-500); + --ods-categorical-2: var(--ods-green-300); + --ods-categorical-3: var(--ods-pink-400); + --ods-categorical-4: var(--ods-purple-300); + --ods-categorical-5: var(--ods-yellow-400); + --ods-categorical-6: var(--bs-gray-600); + --ods-categorical-7: var(--ods-blue-300); + --ods-categorical-8: var(--ods-green-500); + --ods-categorical-9: var(--ods-pink-300); + --ods-categorical-10: var(--ods-purple-500); + --ods-categorical-11: var(--ods-yellow-300); + --ods-categorical-12: var(--bs-gray-500); + + /* TODO : check the dark default colors (I put back colors from https://github.com/Orange-OpenSource/ods-charts/issues/103) + */ + --ods-default-1: var(--ods-blue-500); + --ods-default-2: var(--ods-green-500); + --ods-default-3: var(--ods-pink-400); + --ods-default-4: var(--ods-purple-500); + --ods-default-5: var(--ods-yellow-300); + --ods-default-6: var(--bs-gray-500); + --ods-default-7: var(--ods-blue-300); + --ods-default-8: var(--ods-green-300); + --ods-default-9: var(--ods-pink-300); + --ods-default-10: var(--ods-purple-300); + --ods-default-11: var(--ods-yellow-400); + --ods-default-12: var(--bs-gray-600); + + --ods-cyan-light: var(--ods-blue-600); + --ods-teal-light: var(--ods-green-600); + --ods-pink-light: var(--ods-pink-300); + --ods-indigo-light: var(--ods-purple-600); + --ods-yellow-light: var(--ods-yellow-400); + + --ods-cyan-dark: var(--ods-blue-100); + --ods-teal-dark: var(--ods-green-100); + --ods-pink-dark: var(--ods-pink-600); + --ods-indigo-dark: var(--ods-purple-100); + --ods-yellow-dark: var(--ods-yellow-100); + + --ods-functional-1: var(--bs-primary); + --ods-functional-2: var(--bs-gray-700); + --ods-functional-3: var(--bs-success); + --ods-functional-4: var(--bs-warning); + --ods-functional-5: var(--bs-danger); + --ods-functional-6: var(--bs-info); +} +`; + +export const ODS_CHARTS_CSS_VARIABLES: { [theme in ODSChartsCSSThemesNames]: string } = { + BOOSTED4: ` + ${BOOSTED5_VARIABLE} + ${NON_BOOSTED5_VARIABLE} + `, + BOOSTED5: ` + ${NON_BOOSTED5_VARIABLE} + `, + CUSTOM: ` + ${BOOSTED5_VARIABLE} + ${NON_BOOSTED5_VARIABLE} + `, + NONE: ` + ${BOOSTED5_VARIABLE} + ${NON_BOOSTED5_VARIABLE} + `, +}; diff --git a/src/theme/dark/ODS.colors.blue.ts b/src/theme/dark/ODS.colors.blue.ts index c12b47f..6fcd8e4 100644 --- a/src/theme/dark/ODS.colors.blue.ts +++ b/src/theme/dark/ODS.colors.blue.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_BLUE = { - color: ['#B5E8F7', '#80CEEF', '#4BB4E6', '#3E9DD6', '#237ECA', '#085EBD'], + color: [ + 'var(--ods-blue-100, #B5E8F7)', + 'var(--ods-blue-200, #80CEEF)', + 'var(--ods-blue-300, #4BB4E6)', + 'var(--ods-blue-400, #3E9DD6)', + 'var(--ods-blue-500, #237ECA)', + 'var(--ods-blue-600, #085EBD)', + ], }; diff --git a/src/theme/dark/ODS.colors.categorical.ts b/src/theme/dark/ODS.colors.categorical.ts index a9bfc21..bec4b74 100644 --- a/src/theme/dark/ODS.colors.categorical.ts +++ b/src/theme/dark/ODS.colors.categorical.ts @@ -7,5 +7,20 @@ // export const DARK_COLORS_CATEGORICAL = { - color: ['#ffb4e6', '#d573bb', '#c1a4e4', '#9373bd', '#80ceef', '#3e9dd6', '#84d5af', '#27a971', '#ffd200', '#b98f11'], + // TODO: vheck if the colors to use are color: ['#ffb4e6', '#d573bb', '#c1a4e4', '#9373bd', '#80ceef', '#3e9dd6', '#84d5af', '#27a971', '#ffd200', '#b98f11'], + + color: [ + 'var(--ods-blue-500, #237eca)', + 'var(--ods-green-300, #50BE87)', + 'var(--ods-pink-400, #ff8ad4)', + 'var(--ods-purple-300, #a885d8)', + 'var(--ods-yellow-400, #ffb400)', + 'var(--bs-gray-600, #999999)', + 'var(--ods-blue-300, #4bb4e6)', + 'var(--ods-green-500, #198C51)', + 'var(--ods-pink-300, #ffb4e6)', + 'var(--ods-purple-500, #6e4aa7)', + 'var(--ods-yellow-300, #ffd200)', + 'var(--bs-gray-500, #cccccc)', + ], }; diff --git a/src/theme/dark/ODS.colors.darker-tints.ts b/src/theme/dark/ODS.colors.darker-tints.ts index f15b80f..669cce2 100644 --- a/src/theme/dark/ODS.colors.darker-tints.ts +++ b/src/theme/dark/ODS.colors.darker-tints.ts @@ -7,5 +7,11 @@ // export const DARK_COLORS_DARKER_TINTS = { - color: ['#B5E8F7', '#B8EBD6', '#FFE8F7', '#D9C2F0', '#FFF6B6'], + color: [ + 'var(--ods-blue-100,#B5E8F7)', + 'var(--ods-green-100, #B8EBD6)', + 'var(--ods-pink-100, #FFE8F7)', + 'var(--ods-purple-100, #D9C2F0)', + 'var(--ods-yellow-100, #FFF6B6', + ], }; diff --git a/src/theme/dark/ODS.colors.functional.ts b/src/theme/dark/ODS.colors.functional.ts index 58d114a..a29df73 100644 --- a/src/theme/dark/ODS.colors.functional.ts +++ b/src/theme/dark/ODS.colors.functional.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_FUNCTIONAL = { - color: ['#FF7900', '#666666', '#66CC66', '#FFCC00', '#FF4D4D', '#6699FF'], + color: [ + 'var(--ods-functional-1, #FF7900)', + 'var(--ods-functional-2, #666666)', + 'var(--ods-functional-3, #66CC66)', + 'var(--ods-functional-4, #FFCC00)', + 'var(--ods-functional-5, #FF4D4D)', + 'var(--ods-functional-6, #6699FF)', + ], }; diff --git a/src/theme/dark/ODS.colors.green.ts b/src/theme/dark/ODS.colors.green.ts index 1e4cef0..832f339 100644 --- a/src/theme/dark/ODS.colors.green.ts +++ b/src/theme/dark/ODS.colors.green.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_GREEN = { - color: ['#B8EBD6', '#84D5AF', '#50BE87', '#27A971', '#198C51', '#0A6E31'], + color: [ + 'var(--ods-green-100, #B8EBD6)', + 'var(--ods-green-200, #84D5AF)', + 'var(--ods-green-300, #50BE87)', + 'var(--ods-green-400, #27A971)', + 'var(--ods-green-500, #198C51)', + 'var(--ods-green-600, #0A6E31)', + ], }; diff --git a/src/theme/dark/ODS.colors.lighter-tints.ts b/src/theme/dark/ODS.colors.lighter-tints.ts index 0305b50..fb7cde2 100644 --- a/src/theme/dark/ODS.colors.lighter-tints.ts +++ b/src/theme/dark/ODS.colors.lighter-tints.ts @@ -7,5 +7,11 @@ // export const DARK_COLORS_LIGHTER_TINTS = { - color: ['#085EBD', '#0A6E31', '#FF8AD4', '#492191', '#FFB400'], + color: [ + 'var(--ods-blue-600,#085EBD)', + 'var(--ods-green-600, #0A6E31)', + 'var(--ods-pink-400, #FF8AD4)', + 'var(--ods-purple-600, #492191)', + 'var(--ods-yellow-400, #FFB400', + ], }; diff --git a/src/theme/dark/ODS.colors.pink.ts b/src/theme/dark/ODS.colors.pink.ts index 44371a7..15871a1 100644 --- a/src/theme/dark/ODS.colors.pink.ts +++ b/src/theme/dark/ODS.colors.pink.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_PINK = { - color: ['#FFE8F7', '#FFCEEF', '#FFB4E6', '#FF8AD4', '#D573BB', '#BC4D9A'], + color: [ + 'var(--ods-pink-100, #FFE8F7)', + 'var(--ods-pink-200, #FFCEEF)', + 'var(--ods-pink-300, #FFB4E6)', + 'var(--ods-pink-400, #FF8AD4)', + 'var(--ods-pink-500, #D573BB)', + 'var(--ods-pink-600, #BC4D9A)', + ], }; diff --git a/src/theme/dark/ODS.colors.purple.ts b/src/theme/dark/ODS.colors.purple.ts index 3aab3ed..4b1f4a8 100644 --- a/src/theme/dark/ODS.colors.purple.ts +++ b/src/theme/dark/ODS.colors.purple.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_PURPLE = { - color: ['#D9C2F0', '#C1A4E4', '#A885D8', '#9373BD', '#6E4AA7', '#492191'], + color: [ + 'var(--ods-purple-100, #D9C2F0)', + 'var(--ods-purple-200, #C1A4E4)', + 'var(--ods-purple-300, #A885D8)', + 'var(--ods-purple-400, #9373BD)', + 'var(--ods-purple-500, #6E4AA7)', + 'var(--ods-purple-600, #492191)', + ], }; diff --git a/src/theme/dark/ODS.colors.supporting-colors.ts b/src/theme/dark/ODS.colors.supporting-colors.ts index 35c5523..5eab1b9 100644 --- a/src/theme/dark/ODS.colors.supporting-colors.ts +++ b/src/theme/dark/ODS.colors.supporting-colors.ts @@ -7,5 +7,11 @@ // export const DARK_COLORS_SUPPORTING_COLORS = { - color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], + color: [ + 'var(--ods-blue-300, #4bb4e6)', + 'var(--ods-green-300, #50be87)', + 'var(--ods-pink-300, #ffb4e6)', + 'var(--ods-purple-300, #a885d8)', + 'var(--ods-yellow-300, #ffd200)', + ], }; diff --git a/src/theme/dark/ODS.colors.ts b/src/theme/dark/ODS.colors.ts index 56384d1..4cb5d14 100644 --- a/src/theme/dark/ODS.colors.ts +++ b/src/theme/dark/ODS.colors.ts @@ -7,5 +7,20 @@ // export const DARK_COLORS = { - color: ['#80ceef', '#84d5af', '#ffb4e6', '#c1a4e4', '#ffd200', '#cccccc', '#3e9dd6', '#27a971', '#d573bb', '#9373bd', '#b98f11', '#999999'], + // TODO : check if the date to use are color: ['#80ceef', '#84d5af', '#ffb4e6', '#c1a4e4', '#ffd200', '#cccccc', '#3e9dd6', '#27a971', '#d573bb', '#9373bd', '#b98f11', '#999999'], + + color: [ + 'var(--ods-blue-500, #237eca)', + 'var(--ods-green-500, #198C51)', + 'var(--ods-pink-400, #ff8ad4)', + 'var(--ods-purple-500, #6e4aa7)', + 'var(--ods-yellow-300, #ffd200)', + 'var(--bs-gray-500, #cccccc)', + 'var(--ods-blue-300, #4bb4e6)', + 'var(--ods-green-300, #50BE87)', + 'var(--ods-pink-300, #ffb4e6)', + 'var(--ods-purple-300, #a885d8)', + 'var(--ods-yellow-400, #ffb400)', + 'var(--bs-gray-600, #999999)', + ], }; diff --git a/src/theme/dark/ODS.colors.yellow.ts b/src/theme/dark/ODS.colors.yellow.ts index 14f72cf..e0dd3af 100644 --- a/src/theme/dark/ODS.colors.yellow.ts +++ b/src/theme/dark/ODS.colors.yellow.ts @@ -7,5 +7,12 @@ // export const DARK_COLORS_YELLOW = { - color: ['#FFF6B6', '#FFE45B', '#FFD200', '#FFB400', '#B98F11', '#9D6E06'], + color: [ + 'var(--ods-yellow-100, #FFF6B6)', + 'var(--ods-yellow-200, #FFE45B)', + 'var(--ods-yellow-300, #FFD200)', + 'var(--ods-yellow-400, #FFB400)', + 'var(--ods-yellow-500, #B98F11)', + 'var(--ods-yellow-600, #9D6E06)', + ], }; diff --git a/src/theme/dark/ODS.common.ts b/src/theme/dark/ODS.common.ts index f15e3e6..da420d5 100644 --- a/src/theme/dark/ODS.common.ts +++ b/src/theme/dark/ODS.common.ts @@ -7,5 +7,5 @@ // export const DARK_COMMON = { - backgroundColor: 'rgba(0, 0, 0, 1)', + backgroundColor: 'var(--bs-gray-950, #141414)', }; diff --git a/src/theme/dark/ODS.lines.axis.ts b/src/theme/dark/ODS.lines.axis.ts index b5e867a..ce1382d 100644 --- a/src/theme/dark/ODS.lines.axis.ts +++ b/src/theme/dark/ODS.lines.axis.ts @@ -11,17 +11,17 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, axisLabel: { show: true, - color: '#FFFFFF', + color: 'var(--bs-white, #fff)', }, axisTick: { show: false, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, }, @@ -29,17 +29,17 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, axisLabel: { show: true, - color: '#FFFFFF', + color: 'var(--bs-white, #fff)', }, axisTick: { show: false, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, }, @@ -47,17 +47,17 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, axisLabel: { show: true, - color: '#FFFFFF', + color: 'var(--bs-white, #fff)', }, axisTick: { show: false, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, }, @@ -65,17 +65,17 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, axisLabel: { show: true, - color: '#FFFFFF', + color: 'var(--bs-white, #fff)', }, axisTick: { show: false, lineStyle: { - color: '#666666', + color: 'var(--bs-gray-700, #666)', }, }, }, diff --git a/src/theme/default/ODS.colors.blue.ts b/src/theme/default/ODS.colors.blue.ts new file mode 100644 index 0000000..49abb3a --- /dev/null +++ b/src/theme/default/ODS.colors.blue.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_BLUE = { + color: [ + 'var(--ods-blue-1, #085EBD)', + 'var(--ods-blue-2, #237ECA)', + 'var(--ods-blue-3, #3E9DD6)', + 'var(--ods-blue-4, #4BB4E6)', + 'var(--ods-blue-5, #80CEEF)', + 'var(--ods-blue-6, #B5E8F7)', + ], +}; diff --git a/src/theme/default/ODS.colors.categorical.ts b/src/theme/default/ODS.colors.categorical.ts new file mode 100644 index 0000000..5e78b12 --- /dev/null +++ b/src/theme/default/ODS.colors.categorical.ts @@ -0,0 +1,24 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_CATEGORICAL = { + color: [ + 'var(--ods-categorical-1, #085ebd)', + 'var(--ods-categorical-2, #27a971)', + 'var(--ods-categorical-3, #bc4d9a)', + 'var(--ods-categorical-4, #9373bd)', + 'var(--ods-categorical-5, #9d6e06)', + 'var(--ods-categorical-6, #333333)', + 'var(--ods-categorical-7, #3e9dd6)', + 'var(--ods-categorical-8, #0a6e31)', + 'var(--ods-categorical-9, #d573bb)', + 'var(--ods-categorical-10, #492191)', + 'var(--ods-categorical-11, #b98f11)', + 'var(--ods-categorical-12, #666666)', + ], +}; diff --git a/src/theme/default/ODS.colors.darker-tints.ts b/src/theme/default/ODS.colors.darker-tints.ts new file mode 100644 index 0000000..a282de5 --- /dev/null +++ b/src/theme/default/ODS.colors.darker-tints.ts @@ -0,0 +1,17 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_DARKER_TINTS = { + color: [ + 'var(--ods-cyan-dark, #085EBD)', + 'var(--ods-teal-dark, #0A6E31)', + 'var(--ods-pink-dark, #FF8AD4)', + 'var(--ods-indigo-dark, #492191)', + 'var(--ods-yellow-dark, #FFB400)', + ], +}; diff --git a/src/theme/default/ODS.colors.functional.ts b/src/theme/default/ODS.colors.functional.ts new file mode 100644 index 0000000..b59615c --- /dev/null +++ b/src/theme/default/ODS.colors.functional.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_FUNCTIONAL = { + color: [ + 'var(--ods-functional-1, #F16E00)', + 'var(--ods-functional-2, #EEEEEE)', + 'var(--ods-functional-3, #228722)', + 'var(--ods-functional-4, #FFCC00)', + 'var(--ods-functional-5, #CD3C14)', + 'var(--ods-functional-6, #4170D8)', + ], +}; diff --git a/src/theme/default/ODS.colors.green.ts b/src/theme/default/ODS.colors.green.ts new file mode 100644 index 0000000..13c7a0d --- /dev/null +++ b/src/theme/default/ODS.colors.green.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_GREEN = { + color: [ + 'var(--ods-green-1, #0A6E31)', + 'var(--ods-green-2, #27A971)', + 'var(--ods-green-3, #84D5AF)', + 'var(--ods-green-4, #198C51)', + 'var(--ods-green-5, #50BE87)', + 'var(--ods-green-6, #B8EBD6)', + ], +}; diff --git a/src/theme/default/ODS.colors.lighter-tints.ts b/src/theme/default/ODS.colors.lighter-tints.ts new file mode 100644 index 0000000..035bf41 --- /dev/null +++ b/src/theme/default/ODS.colors.lighter-tints.ts @@ -0,0 +1,17 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_LIGHTER_TINTS = { + color: [ + 'var(--ods-cyan-light, #B5E8F7)', + 'var(--ods-teal-light, #B8EBD6)', + 'var(--ods-pink-light, #FFE8F7)', + 'var(--ods-indigo-light, #D9C2F0)', + 'var(--ods-yellow-light, #FFF6B6)', + ], +}; diff --git a/src/theme/default/ODS.colors.pink.ts b/src/theme/default/ODS.colors.pink.ts new file mode 100644 index 0000000..e01a942 --- /dev/null +++ b/src/theme/default/ODS.colors.pink.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_PINK = { + color: [ + 'var(--ods-pink-1, #BC4D9A)', + 'var(--ods-pink-2, #D573BB)', + 'var(--ods-pink-3, #FF8AD4)', + 'var(--ods-pink-4, #FFB4E6)', + 'var(--ods-pink-5, #FFCEEF)', + 'var(--ods-pink-6, #FFE8F7)', + ], +}; diff --git a/src/theme/default/ODS.colors.purple.ts b/src/theme/default/ODS.colors.purple.ts new file mode 100644 index 0000000..96583cb --- /dev/null +++ b/src/theme/default/ODS.colors.purple.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_PURPLE = { + color: [ + 'var(--ods-purple-1, #492191)', + 'var(--ods-purple-2, #6E4AA7)', + 'var(--ods-purple-3, #9373BD)', + 'var(--ods-purple-4, #A885D8)', + 'var(--ods-purple-5, #C1A4E4)', + 'var(--ods-purple-6, #D9C2F0)', + ], +}; diff --git a/src/theme/default/ODS.colors.supporting-colors.ts b/src/theme/default/ODS.colors.supporting-colors.ts new file mode 100644 index 0000000..10a6f61 --- /dev/null +++ b/src/theme/default/ODS.colors.supporting-colors.ts @@ -0,0 +1,11 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_SUPPORTING_COLORS = { + color: ['var(--bs-cyan, #4bb4e6)', 'var(--bs-teal, #50be87)', 'var(--bs-pink, #ffb4e6)', 'var(--bs-indigo, #a885d8)', 'var(--ods-yellow, #ffd200)'], +}; diff --git a/src/theme/default/ODS.colors.ts b/src/theme/default/ODS.colors.ts new file mode 100644 index 0000000..e21b3a1 --- /dev/null +++ b/src/theme/default/ODS.colors.ts @@ -0,0 +1,24 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS = { + color: [ + 'var(--ods-default-1, #085edb)', + 'var(--ods-default-2, #0a6e31)', + 'var(--ods-default-3, #bc4d9a)', + 'var(--ods-default-4, #492191)', + 'var(--ods-default-5, #b98f11)', + 'var(--ods-default-6, #666666)', + 'var(--ods-default-7, #3e9dd6)', + 'var(--ods-default-8, #27a971)', + 'var(--ods-default-9, #d573bb)', + 'var(--ods-default-10, #9373bd)', + 'var(--ods-default-11, #9d6e06)', + 'var(--ods-default-12, #333333)', + ], +}; diff --git a/src/theme/default/ODS.colors.yellow.ts b/src/theme/default/ODS.colors.yellow.ts new file mode 100644 index 0000000..7abc97b --- /dev/null +++ b/src/theme/default/ODS.colors.yellow.ts @@ -0,0 +1,18 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COLORS_YELLOW = { + color: [ + 'var(--ods-yellow-1, #9D6E06)', + 'var(--ods-yellow-2, #B98F11)', + 'var(--ods-yellow-3, #FFB400)', + 'var(--ods-yellow-4, #FFD200)', + 'var(--ods-yellow-5, #FFE45B)', + 'var(--ods-yellow-6, #FFF6B6)', + ], +}; diff --git a/src/theme/default/ODS.common.ts b/src/theme/default/ODS.common.ts new file mode 100644 index 0000000..cd1b259 --- /dev/null +++ b/src/theme/default/ODS.common.ts @@ -0,0 +1,11 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_COMMON = { + backgroundColor: 'var(--bs-body-bg, #fff)', +}; diff --git a/src/theme/default/ODS.lines.axis.ts b/src/theme/default/ODS.lines.axis.ts new file mode 100644 index 0000000..b323f0f --- /dev/null +++ b/src/theme/default/ODS.lines.axis.ts @@ -0,0 +1,82 @@ +// +// Software Name: Orange Design System Charts +// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license. +// + +export const DEFAULT_LINES_AXIS = { + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: 'var(--bs-border-color-subtle, #ccc)', + }, + }, + axisLabel: { + show: true, + color: 'var(--bs-body-color, #000000)', + }, + axisTick: { + show: false, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + axisLabel: { + show: true, + color: 'var(--bs-body-color, #000000)', + }, + axisTick: { + show: false, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + axisLabel: { + show: true, + color: 'var(--bs-body-color, #000000)', + }, + axisTick: { + show: false, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + axisLabel: { + show: true, + color: 'var(--bs-body-color, #000000)', + }, + axisTick: { + show: false, + lineStyle: { + color: 'var(--bs-border-color-subtle, #cccccc)', + }, + }, + }, +}; diff --git a/src/theme/legends/ods-chart-legends.ts b/src/theme/legends/ods-chart-legends.ts index 4538fba..a3d4591 100644 --- a/src/theme/legends/ods-chart-legends.ts +++ b/src/theme/legends/ods-chart-legends.ts @@ -33,14 +33,14 @@ const DEFAULT_CSS = `.ods-charts-no-css-lib.ods-charts-legend-holder { padding-bottom: 0.625rem; margin-right: 20px; margin-left: 20px; - color: #000; + color: var(--bs-body-color, #000000); } .ods-charts-no-css-lib .ods-charts-legend-link.ods-charts-legend-link-opacity { opacity: .25; } .ods-charts-no-css-lib .ods-charts-legend-color-holder { - border: 1px solid #000; + border: 1px solid var(--bs-border-color, #000000); display: inline-block; } @@ -59,10 +59,16 @@ const DEFAULT_CSS = `.ods-charts-no-css-lib.ods-charts-legend-holder { } .ods-charts-no-css-lib.ods-charts-legend-holder.ods-charts-mode-dark { - background-color: #000; + background-color: var(--bs-gray-950, #141414); } -.ods-charts-mode-dark .ods-charts-legend-link { - color: #fff; +.ods-charts-no-css-lib.ods-charts-legend-holder.ods-charts-mode-dark .ods-charts-legend-link { + color: var(--bs-white, #fff); +} +.ods-charts-no-css-lib.ods-charts-legend-holder.ods-charts-mode-light { + background-color: var(--bs-white, #fff); +} +.ods-charts-no-css-lib.ods-charts-legend-holder.ods-charts-mode-light .ods-charts-legend-link { + color: var(--bs-black, #000); } `; diff --git a/src/theme/light/ODS.colors.blue.ts b/src/theme/light/ODS.colors.blue.ts index 47ed9c6..4a51032 100644 --- a/src/theme/light/ODS.colors.blue.ts +++ b/src/theme/light/ODS.colors.blue.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_BLUE = { - color: ['#085EBD', '#237ECA', '#3E9DD6', '#4BB4E6', '#80CEEF', '#B5E8F7'], + color: [ + 'var(--ods-blue-600, #085EBD)', + 'var(--ods-blue-500, #237ECA)', + 'var(--ods-blue-400, #3E9DD6)', + 'var(--ods-blue-300, #4BB4E6)', + 'var(--ods-blue-200, #80CEEF)', + 'var(--ods-blue-100, #B5E8F7)', + ], }; diff --git a/src/theme/light/ODS.colors.categorical.ts b/src/theme/light/ODS.colors.categorical.ts index 41035da..7bf1fac 100644 --- a/src/theme/light/ODS.colors.categorical.ts +++ b/src/theme/light/ODS.colors.categorical.ts @@ -7,5 +7,18 @@ // export const LIGHT_COLORS_CATEGORICAL = { - color: ['#085ebd', '#27a971', '#bc4d9a', '#9373bd', '#9d6e06', '#333333', '#3e9dd6', '#0a6e31', '#d573bb', '#492191', '#b98f11', '#666666'], + color: [ + 'var(--ods-blue-600, #085ebd)', + 'var(--ods-green-400, #27a971)', + 'var(--ods-pink-600, #bc4d9a)', + 'var(--ods-purple-400, #9373bd)', + 'var(--ods-yellow-600, #9d6e06)', + 'var(--bs-gray-900, #333333)', + 'var(--ods-blue-400, #3e9dd6)', + 'var(--ods-green-600, #0a6e31)', + 'var(--ods-pink-500, #d573bb)', + 'var(--ods-purple-600, #492191)', + 'var(--ods-yellow-500, #b98f11)', + 'var(--bs-gray-700, #666666)', + ], }; diff --git a/src/theme/light/ODS.colors.darker-tints.ts b/src/theme/light/ODS.colors.darker-tints.ts index 9c5abab..a8ced5e 100644 --- a/src/theme/light/ODS.colors.darker-tints.ts +++ b/src/theme/light/ODS.colors.darker-tints.ts @@ -7,5 +7,11 @@ // export const LIGHT_COLORS_DARKER_TINTS = { - color: ['#085EBD', '#0A6E31', '#FF8AD4', '#492191', '#FFB400'], + color: [ + 'var(--ods-blue-600,#085EBD)', + 'var(--ods-green-600, #0A6E31)', + 'var(--ods-pink-400, #FF8AD4)', + 'var(--ods-purple-600, #492191)', + 'var(--ods-yellow-400, #FFB400', + ], }; diff --git a/src/theme/light/ODS.colors.functional.ts b/src/theme/light/ODS.colors.functional.ts index df1a7e2..e7da8cd 100644 --- a/src/theme/light/ODS.colors.functional.ts +++ b/src/theme/light/ODS.colors.functional.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_FUNCTIONAL = { - color: ['#F16E00', '#EEEEEE', '#228722', '#FFCC00', '#CD3C14', '#4170D8'], + color: [ + 'var(--ods-functional-1, #F16E00)', + 'var(--ods-functional-2, #EEEEEE)', + 'var(--ods-functional-3, #228722)', + 'var(--ods-functional-4, #FFCC00)', + 'var(--ods-functional-5, #CD3C14)', + 'var(--ods-functional-6, #4170D8)', + ], }; diff --git a/src/theme/light/ODS.colors.green.ts b/src/theme/light/ODS.colors.green.ts index a767b49..5483974 100644 --- a/src/theme/light/ODS.colors.green.ts +++ b/src/theme/light/ODS.colors.green.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_GREEN = { - color: ['#0A6E31', '#27A971', '#84D5AF', '#198C51', '#50BE87', '#B8EBD6'], + color: [ + 'var(--ods-green-600, #0A6E31)', + 'var(--ods-green-500, #198C51)', + 'var(--ods-green-400, #27A971)', + 'var(--ods-green-300, #50BE87)', + 'var(--ods-green-200, #84D5AF)', + 'var(--ods-green-100, #B8EBD6)', + ], }; diff --git a/src/theme/light/ODS.colors.lighter-tints.ts b/src/theme/light/ODS.colors.lighter-tints.ts index a31c568..ec37cd6 100644 --- a/src/theme/light/ODS.colors.lighter-tints.ts +++ b/src/theme/light/ODS.colors.lighter-tints.ts @@ -7,5 +7,11 @@ // export const LIGHT_COLORS_LIGHTER_TINTS = { - color: ['#B5E8F7', '#B8EBD6', '#FFE8F7', '#D9C2F0', '#FFF6B6'], + color: [ + 'var(--ods-blue-100,#B5E8F7)', + 'var(--ods-green-100, #B8EBD6)', + 'var(--ods-pink-100, #FFE8F7)', + 'var(--ods-purple-100, #D9C2F0)', + 'var(--ods-yellow-100, #FFF6B6', + ], }; diff --git a/src/theme/light/ODS.colors.pink.ts b/src/theme/light/ODS.colors.pink.ts index 32bc139..c232d25 100644 --- a/src/theme/light/ODS.colors.pink.ts +++ b/src/theme/light/ODS.colors.pink.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_PINK = { - color: ['#BC4D9A', '#D573BB', '#FF8AD4', '#FFB4E6', '#FFCEEF', '#FFE8F7'], + color: [ + 'var(--ods-pink-600, #BC4D9A)', + 'var(--ods-pink-500, #D573BB)', + 'var(--ods-pink-400, #FF8AD4)', + 'var(--ods-pink-300, #FFB4E6)', + 'var(--ods-pink-200, #FFCEEF)', + 'var(--ods-pink-100, #FFE8F7)', + ], }; diff --git a/src/theme/light/ODS.colors.purple.ts b/src/theme/light/ODS.colors.purple.ts index a98ed48..fb21189 100644 --- a/src/theme/light/ODS.colors.purple.ts +++ b/src/theme/light/ODS.colors.purple.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_PURPLE = { - color: ['#492191', '#6E4AA7', '#9373BD', '#A885D8', '#C1A4E4', '#D9C2F0'], + color: [ + 'var(--ods-purple-600, #492191)', + 'var(--ods-purple-500, #6E4AA7)', + 'var(--ods-purple-400, #9373BD)', + 'var(--ods-purple-300, #A885D8)', + 'var(--ods-purple-200, #C1A4E4)', + 'var(--ods-purple-100, #D9C2F0', + ], }; diff --git a/src/theme/light/ODS.colors.supporting-colors.ts b/src/theme/light/ODS.colors.supporting-colors.ts index 4ead483..1dc3330 100644 --- a/src/theme/light/ODS.colors.supporting-colors.ts +++ b/src/theme/light/ODS.colors.supporting-colors.ts @@ -7,5 +7,11 @@ // export const LIGHT_COLORS_SUPPORTING_COLORS = { - color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], + color: [ + 'var(--ods-blue-300, #4bb4e6)', + 'var(--ods-green-300, #50be87)', + 'var(--ods-pink-300, #ffb4e6)', + 'var(--ods-purple-300, #a885d8)', + 'var(--ods-yellow-300, #ffd200)', + ], }; diff --git a/src/theme/light/ODS.colors.ts b/src/theme/light/ODS.colors.ts index 65524c6..3a964ea 100644 --- a/src/theme/light/ODS.colors.ts +++ b/src/theme/light/ODS.colors.ts @@ -7,5 +7,18 @@ // export const LIGHT_COLORS = { - color: ['#085edb', '#0a6e31', '#bc4d9a', '#492191', '#b98f11', '#666666', '#3e9dd6', '#27a971', '#d573bb', '#9373bd', '#9d6e06', '#333333'], + color: [ + 'var(--ods-blue-600, #085edb)', + 'var(--ods-green-600, #0a6e31)', + 'var(--ods-pink-600, #bc4d9a)', + 'var(--ods-purple-600, #492191)', + 'var(--ods-yellow-500, #b98f11)', + 'var(--bs-gray-700, #666666)', + 'var(--ods-blue-400, #3e9dd6)', + 'var(--ods-green-400, #27a971)', + 'var(--ods-pink-500, #d573bb)', + 'var(--ods-purple-400, #9373bd)', + 'var(--ods-yellow-600, #9d6e06)', + 'var(--bs-gray-900, #333333)', + ], }; diff --git a/src/theme/light/ODS.colors.yellow.ts b/src/theme/light/ODS.colors.yellow.ts index 2edf532..c75d5c0 100644 --- a/src/theme/light/ODS.colors.yellow.ts +++ b/src/theme/light/ODS.colors.yellow.ts @@ -7,5 +7,12 @@ // export const LIGHT_COLORS_YELLOW = { - color: ['#9D6E06', '#B98F11', '#FFB400', '#FFD200', '#FFE45B', '#FFF6B6'], + color: [ + 'var(--ods-yellow-600, #9D6E06)', + 'var(--ods-yellow-500, #B98F11)', + 'var(--ods-yellow-400, #FFB400)', + 'var(--ods-yellow-300, #FFD200)', + 'var(--ods-yellow-200, #FFE45B)', + 'var(--ods-yellow-100, #FFF6B6)', + ], }; diff --git a/src/theme/light/ODS.common.ts b/src/theme/light/ODS.common.ts index 114c971..49c8249 100644 --- a/src/theme/light/ODS.common.ts +++ b/src/theme/light/ODS.common.ts @@ -7,5 +7,5 @@ // export const LIGHT_COMMON = { - backgroundColor: 'rgba(255, 255, 255, 1)', + backgroundColor: 'var(--bs-white, #fff)', }; diff --git a/src/theme/light/ODS.lines.axis.ts b/src/theme/light/ODS.lines.axis.ts index cb63ef9..63f91a1 100644 --- a/src/theme/light/ODS.lines.axis.ts +++ b/src/theme/light/ODS.lines.axis.ts @@ -11,17 +11,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #ccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-black, #000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #ccc)', }, }, }, @@ -29,17 +29,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #ccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-black, #000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #ccc)', }, }, }, @@ -47,17 +47,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-black, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #cccccc)', }, }, }, @@ -65,17 +65,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-black, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-gray-500, #cccccc)', }, }, }, diff --git a/src/theme/ods-chart-theme.ts b/src/theme/ods-chart-theme.ts index b5a5df6..fb81539 100644 --- a/src/theme/ods-chart-theme.ts +++ b/src/theme/ods-chart-theme.ts @@ -37,7 +37,7 @@ import { DARK_COLORS_PURPLE } from './dark/ODS.colors.purple'; import { DARK_COLORS_YELLOW } from './dark/ODS.colors.yellow'; import { EChartsProject, ODS_PROJECT } from './ODS.project'; import { ODSChartsLegends } from './legends/ods-chart-legends'; -import { mergeObjects } from '../tools/merge-objects'; +import { isVarArray, isVarObject, mergeObjects } from '../tools/merge-objects'; import { ODSChartsResize } from './resize/ods-chart-resize'; import { ODSChartsCSSThemeDefinition, ODSChartsCSSThemes, ODSChartsCSSThemesNames } from './css-themes/css-themes'; import { getStringValue } from '../tools/hash'; @@ -46,6 +46,20 @@ import { ODSChartsPopover } from './popover/ods-chart-popover'; import { ODSChartsPopoverConfig, ODSChartsPopoverDefinition, ODSChartsPopoverManagers } from './popover/ods-chart-popover-definitions'; import { isMainAxis } from './const/main-axis-type.const'; import { ODSChartsLegendHolderDefinition } from './legends/ods-chart-legends-definitions'; +import { DEFAULT_COLORS_YELLOW } from './default/ODS.colors.yellow'; +import { DEFAULT_COLORS_PURPLE } from './default/ODS.colors.purple'; +import { DEFAULT_COLORS_PINK } from './default/ODS.colors.pink'; +import { DEFAULT_COLORS_GREEN } from './default/ODS.colors.green'; +import { DEFAULT_COLORS_BLUE } from './default/ODS.colors.blue'; +import { DEFAULT_COLORS_LIGHTER_TINTS } from './default/ODS.colors.lighter-tints'; +import { DEFAULT_COLORS_DARKER_TINTS } from './default/ODS.colors.darker-tints'; +import { DEFAULT_COLORS_SUPPORTING_COLORS } from './default/ODS.colors.supporting-colors'; +import { DEFAULT_COLORS_FUNCTIONAL } from './default/ODS.colors.functional'; +import { DEFAULT_COLORS_CATEGORICAL } from './default/ODS.colors.categorical'; +import { DEFAULT_COLORS } from './default/ODS.colors'; +import { DEFAULT_COMMON } from './default/ODS.common'; +import { DEFAULT_LINES_AXIS } from './default/ODS.lines.axis'; +import { ODS_CHARTS_CSS_VARIABLES } from './colors/colors-css-variables'; /** * ODSChartsColorsSet is used for predefined color sets. @@ -121,6 +135,7 @@ export enum ODSChartsLineStyle { export enum ODSChartsMode { LIGHT = 'light', DARK = 'dark', + DEFAULT = 'default', } /** @@ -128,9 +143,11 @@ export enum ODSChartsMode { */ export interface ODSChartsThemeOptions { /** - * The mode of the theme can be {@link ODSChartsMode.LIGHT} or {@link ODSChartsMode.DARK}. + * The mode of the theme can be {@link ODSChartsMode.DEFAULT}, {@link ODSChartsMode.LIGHT} or {@link ODSChartsMode.DARK}. + * + * Default mode is {@link ODSChartsMode.DEFAULT}. + * The {@link ODSChartsMode.DEFAULT} mode uses the `data-bs-theme` attribute to determine if mode is light or dark (cf https://boosted.orange.com/docs/5.3/customize/color-modes/#content). * - * Default mode is {@link ODSChartsMode.LIGHT} */ mode?: ODSChartsMode; /** @@ -185,6 +202,13 @@ export interface ODSChartsThemeOptions { * Default cssTheme in {@link ODSChartsCSSThemes} is `ODSChartsCSSThemes.NONE` */ cssTheme?: ODSChartsCSSThemeDefinition; + /** + * cssSelector the selector of the DOM element where the grph will be built. + * It is used to get css variable values when using a third party theme genartor base on css variable like Boosted 5. + * + * Default cssSelector is `'body'` + */ + cssSelector?: string; } const THEMES: { @@ -270,6 +294,41 @@ const THEMES: { smooth: COMMON_LINE_STYLE_SMOOTH, }, }, + default: { + common: DEFAULT_COMMON, + linesAxis: DEFAULT_LINES_AXIS, + colors: { + default: DEFAULT_COLORS, + categorical: DEFAULT_COLORS_CATEGORICAL, + functional: DEFAULT_COLORS_FUNCTIONAL, + supportingColors: DEFAULT_COLORS_SUPPORTING_COLORS, + darkerTints: DEFAULT_COLORS_DARKER_TINTS, + lighterTints: DEFAULT_COLORS_LIGHTER_TINTS, + blue: DEFAULT_COLORS_BLUE, + green: DEFAULT_COLORS_GREEN, + pink: DEFAULT_COLORS_PINK, + purple: DEFAULT_COLORS_PURPLE, + yellow: DEFAULT_COLORS_YELLOW, + }, + visualMapColors: { + default: { visualMapColor: DEFAULT_COLORS.color }, + categorical: { visualMapColor: DEFAULT_COLORS_CATEGORICAL.color }, + functional: { visualMapColor: DEFAULT_COLORS_FUNCTIONAL.color }, + supportingColors: { visualMapColor: DEFAULT_COLORS_SUPPORTING_COLORS.color }, + darkerTints: { visualMapColor: DEFAULT_COLORS_DARKER_TINTS.color }, + lighterTints: { visualMapColor: DEFAULT_COLORS_LIGHTER_TINTS.color }, + blue: { visualMapColor: DEFAULT_COLORS_BLUE.color }, + green: { visualMapColor: DEFAULT_COLORS_GREEN.color }, + pink: { visualMapColor: DEFAULT_COLORS_PINK.color }, + purple: { visualMapColor: DEFAULT_COLORS_PURPLE.color }, + yellow: { visualMapColor: DEFAULT_COLORS_YELLOW.color }, + }, + linesStyle: { + broken: COMMON_LINE_STYLE_BROKEN, + withPoints: COMMON_LINE_STYLE_POINTS, + smooth: COMMON_LINE_STYLE_SMOOTH, + }, + }, }; /** @@ -306,6 +365,136 @@ export class ODSChartsTheme { private chartResizeManager: ODSChartsResize = undefined as unknown as ODSChartsResize; private chartPopoverManager: ODSChartsPopover = undefined as unknown as ODSChartsPopover; public cssThemeName: ODSChartsCSSThemesNames; + private cssVarsMapping: { [variable: string]: string } = {}; + + private _computedStyle: CSSStyleDeclaration | undefined | null = undefined; + + private get computedStyle(): CSSStyleDeclaration | undefined { + if (undefined === this._computedStyle) { + if (this.options.cssSelector) { + let contextElement = document.querySelector( + this.options.cssSelector + '>.ods-charts-style-' + (this.options.mode ? this.options.mode : ODSChartsMode.DEFAULT) + ); + if (!contextElement) { + const domElement: Element = (this.options.cssSelector ? document.querySelector(this.options.cssSelector) : null) as Element; + if (domElement) { + contextElement = document.createElement('div'); + if (this.options.mode && this.options.mode !== ODSChartsMode.DEFAULT) { + contextElement.setAttribute('data-bs-theme', this.options.mode); + } + contextElement.classList.add('ods-charts-context'); + contextElement.classList.add('ods-charts-style-' + (this.options.mode ? this.options.mode : ODSChartsMode.DEFAULT)); + domElement.append(contextElement); + } + } + if (contextElement) { + this._computedStyle = window.getComputedStyle(contextElement); + } + } + this._computedStyle = this._computedStyle ? this._computedStyle : null; + if (!this._computedStyle) { + console.error('uunable to build computed style for chart css context', this.options.cssSelector, this.options.cssSelector); + } + } + return this._computedStyle ? this._computedStyle : undefined; + } + + private removeComputedStyle() { + if (this.options.cssSelector) { + const contextElement = document.querySelector( + this.options.cssSelector + '>.ods-charts-style-' + (this.options.mode ? this.options.mode : ODSChartsMode.DEFAULT) + ); + if (contextElement) { + contextElement.remove(); + } + this._computedStyle = undefined; + } + } + + private getPropertyValue(name: string): string { + const value = this.computedStyle ? this.computedStyle.getPropertyValue(name) : ''; + return value ? value : ''; + } + + private replaceOneCssVar(css: any) { + let retunedValue = css; + if (this.options.cssSelector && 'string' === typeof retunedValue && !!this.computedStyle) { + try { + const regex = /var\(([^,]*),(.*)\)/g; + const matches = retunedValue.match(regex); + if (matches) { + for (const foundVar of matches) { + if (!(foundVar in this.cssVarsMapping)) { + const varPartsRex = /var\(([^,]+), ?(.+)\)/; + const varParts = foundVar.match(varPartsRex); + if (varParts) { + const varValue = this.getPropertyValue(varParts[1]); + if (!varValue) { + console.error('missing css var ', foundVar); + } + this.cssVarsMapping[foundVar] = varValue ? varValue : varParts[2]; + } else { + const varNameRex = /var\( ?(.+) ?\)/; + const varName = foundVar.match(varNameRex); + if (varName) { + const varValue = this.getPropertyValue(varName[1]); + if (varValue) { + this.cssVarsMapping[foundVar] = varValue; + } else { + console.error('missing css var ', foundVar); + this.cssVarsMapping[foundVar] = foundVar; + } + } else { + console.error('missing css var ', foundVar); + this.cssVarsMapping[foundVar] = foundVar; + } + } + } + + if (foundVar in this.cssVarsMapping) { + retunedValue = retunedValue.replace(foundVar, this.cssVarsMapping[foundVar]); + } + } + } + } catch (error) {} + } + return retunedValue; + } + + private replaceRecursivelyCssVars(subTreeConfig: T): T { + var newConfig: { [key: string]: any } = subTreeConfig; + for (const key of Object.keys(newConfig)) { + if (isVarArray(newConfig[key])) { + for (let index = 0; index < newConfig[key].length; index++) { + if (isVarObject(newConfig[key][index])) { + newConfig[key][index] = this.replaceRecursivelyCssVars(newConfig[key][index]); + } else if ('string' === typeof newConfig[key][index]) { + newConfig[key][index] = this.replaceOneCssVar(newConfig[key][index]); + } + } + } else if (isVarObject(newConfig[key])) { + newConfig[key] = this.replaceRecursivelyCssVars(newConfig[key]); + } else if ('string' === typeof newConfig[key]) { + newConfig[key] = this.replaceOneCssVar(newConfig[key]); + } + } + return newConfig as T; + } + + private replaceAllCssVars(themeConfiguration: T): T { + let result = themeConfiguration; + if (!document.getElementById('ods-charts-style-' + this.cssThemeName) && ODS_CHARTS_CSS_VARIABLES[this.cssThemeName]) { + const style = document.createElement('style'); + style.textContent = ODS_CHARTS_CSS_VARIABLES[this.cssThemeName]; + style.id = 'ods-charts-style-' + this.cssThemeName; + document.querySelector('head')?.append(style); + } + if (!!this.computedStyle) { + result = this.replaceRecursivelyCssVars(themeConfiguration); + this.removeComputedStyle(); + } + return result; + } private constructor( public name: string, @@ -316,6 +505,7 @@ export class ODSChartsTheme { (Object.keys(ODSChartsCSSThemes).find( (oneTheme) => ODSChartsCSSThemes[oneTheme as ODSChartsCSSThemesNames] === options.cssTheme ) as ODSChartsCSSThemesNames) || ODSChartsCSSThemesNames.CUSTOM; + this.theme = this.replaceAllCssVars(this.theme); } /** @@ -346,7 +536,7 @@ export class ODSChartsTheme { options = {}; } if (!options.mode) { - options.mode = ODSChartsMode.LIGHT; + options.mode = ODSChartsMode.DEFAULT; } const mode: ODSChartsMode = options.mode; if (!options.colors) { @@ -361,6 +551,9 @@ export class ODSChartsTheme { if (!options.cssTheme) { options.cssTheme = ODSChartsCSSThemes.NONE; } + if (!options.cssSelector) { + options.cssSelector = 'body'; + } var themeName = `ods.${getStringValue(mode)}.${getStringValue(options.colors)}.${getStringValue(options.visualMapColor)}.${getStringValue( options.lineStyle )}`; @@ -460,38 +653,63 @@ export class ODSChartsTheme { fontWeight: '700', fontSize: 14, fontFamily: 'Helvetica Neue, sans-serif', - color: ODSChartsMode.LIGHT === this.options.mode ? 'rgba(0, 0, 0, 1)' : '#FFFFFF', + color: + ODSChartsMode.DEFAULT === this.options.mode + ? 'var(--bs-body-color, #000)' + : ODSChartsMode.LIGHT === this.options.mode + ? 'var(--bs-black, #000)' + : 'var(--bs-white, #fff)', }; const axisLine = { show: true, lineStyle: { width: 2, - color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666', + color: + ODSChartsMode.DEFAULT === this.options.mode + ? 'var(--bs-border-color-subtle, #ccc)' + : ODSChartsMode.LIGHT === this.options.mode + ? 'var(--bs-gray-500, #ccc)' + : 'var(--bs-gray-700, #666)', }, }; const splitLine = { show: true, lineStyle: { width: 1, - color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666', + color: + ODSChartsMode.DEFAULT === this.options.mode + ? 'var(--bs-border-color-subtle, #ccc)' + : ODSChartsMode.LIGHT === this.options.mode + ? 'var(--bs-gray-500, #ccc)' + : 'var(--bs-gray-700, #666)', }, }; const legend = { textStyle: { fontWeight: 'bold', fontSize: 14, - color: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF', + color: + ODSChartsMode.DEFAULT === this.options.mode + ? 'var(--bs-body-color, #000)' + : ODSChartsMode.LIGHT === this.options.mode + ? 'var(--bs-black, #000)' + : 'var(--bs-white, #fff)', }, icon: 'rect', itemWidth: 10, itemHeight: 10, itemStyle: { - borderColor: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF', + borderColor: + ODSChartsMode.DEFAULT === this.options.mode + ? 'var(--bs-body-color, #000)' + : ODSChartsMode.LIGHT === this.options.mode + ? 'var(--bs-black, #000)' + : 'var(--bs-white, #fff)', borderWidth: 1, }, }; - const themeOptions: any = { + let themeOptions: any = { xAxis: { axisLabel: cloneDeepObject(axisLabel) }, yAxis: { axisLabel: cloneDeepObject(axisLabel) }, legend: cloneDeepObject(legend), @@ -509,6 +727,8 @@ export class ODSChartsTheme { const displayedColors = this.getDisplayedColors(this.theme.color); + themeOptions = this.replaceAllCssVars(themeOptions); + if (this.chartLegendManager) { this.chartLegendManager.addLegend( this.dataOptions, diff --git a/src/theme/popover/ods-chart-popover-definitions.ts b/src/theme/popover/ods-chart-popover-definitions.ts index aabbe10..658f082 100644 --- a/src/theme/popover/ods-chart-popover-definitions.ts +++ b/src/theme/popover/ods-chart-popover-definitions.ts @@ -8,6 +8,7 @@ import { cloneDeepObject } from '../../tools/clone-deep-object'; import { ODSChartsCSSThemesNames } from '../css-themes/css-themes'; +import { ODSChartsMode } from '../ods-chart-theme'; declare var boosted: any; export class ODSChartsPopoverManager { @@ -101,7 +102,13 @@ export class ODSChartsPopoverDefinition { export abstract class ODSChartsPopoverDefinitionWithRenderer extends ODSChartsPopoverDefinition { public abstract tooltipDelay: number; public abstract tooltipMarging: number; - public abstract getOrCreatePopupInstance: (selector: string, title: string, htmlContent: string, enterable: boolean) => ODSChartsPopoverManager | undefined; + public abstract getOrCreatePopupInstance: ( + selector: string, + title: string, + htmlContent: string, + enterable: boolean, + mode: ODSChartsMode + ) => ODSChartsPopoverManager | undefined; protected testIfMouseIsOverTooltip(previousPopover: ODSChartsPopoverManager) { try { @@ -207,12 +214,23 @@ class BOOSTED5_Definition extends ODSChartsPopoverDefinitionWithRenderer { return availability; }; - public getOrCreatePopupInstance: (selector: string, title: string, htmlContent: string, enterable: boolean) => ODSChartsPopoverManager | undefined = - this._getOrCreatePopupInstance.bind(this); + public getOrCreatePopupInstance: ( + selector: string, + title: string, + htmlContent: string, + enterable: boolean, + mode: ODSChartsMode + ) => ODSChartsPopoverManager | undefined = this._getOrCreatePopupInstance.bind(this); public tooltipDelay = 0; public tooltipMarging = 15; - private _getOrCreatePopupInstance(selector: string, title: string, htmlContent: string, enterable: boolean): ODSChartsPopoverManager | undefined { + private _getOrCreatePopupInstance( + selector: string, + title: string, + htmlContent: string, + enterable: boolean, + mode: ODSChartsMode + ): ODSChartsPopoverManager | undefined { try { let previousPopover: ODSChartsPopoverManager = boosted.Popover.getInstance(document.querySelector(selector)); if (previousPopover) { @@ -228,12 +246,23 @@ class BOOSTED5_Definition extends ODSChartsPopoverDefinitionWithRenderer { allowList.div = ['class']; allowList.label = ['class']; + let container: HTMLElement = document.getElementById('ods-chart-popover-container-' + mode) as HTMLElement; + if (!container) { + container = document.createElement('div'); + if ([ODSChartsMode.DARK, ODSChartsMode.LIGHT].includes(mode)) { + container.setAttribute('data-bs-theme', mode); + } + container.id = 'ods-chart-popover-container-' + mode; + container.classList.add('ods-charts-context'); + + document.querySelector('body')?.append(container); + } return boosted.Popover.getOrCreateInstance(document.querySelector(selector), { allowList: allowList, html: true, trigger: 'click', placement: 'top', - container: 'body', + container: container, title: title, content: htmlContent, customClass: enterable ? '' : 'pe-none', @@ -257,12 +286,17 @@ class BOOSTED4_Definition extends ODSChartsPopoverDefinitionWithRenderer { return availability; }; - public getOrCreatePopupInstance: (selector: string, title: string, htmlContent: string, enterable: boolean) => ODSChartsPopoverManager | undefined = - this._getOrCreatePopupInstance.bind(this); + public getOrCreatePopupInstance: ( + selector: string, + title: string, + htmlContent: string, + enterable: boolean, + mode: ODSChartsMode + ) => ODSChartsPopoverManager | undefined = this._getOrCreatePopupInstance.bind(this); public tooltipDelay = 0; public tooltipMarging = 10; - private _getOrCreatePopupInstance(selector: string, title: string, htmlContent: string, enterable: boolean) { + private _getOrCreatePopupInstance(selector: string, title: string, htmlContent: string, enterable: boolean, mode: ODSChartsMode) { const elt: any = document.querySelector(selector); const whiteList = cloneDeepObject(boosted.Tooltip.Default.whiteList); whiteList.span = ['style', 'class']; diff --git a/src/theme/popover/ods-chart-popover.ts b/src/theme/popover/ods-chart-popover.ts index 54e51be..1fa35c2 100644 --- a/src/theme/popover/ods-chart-popover.ts +++ b/src/theme/popover/ods-chart-popover.ts @@ -36,16 +36,33 @@ const DEFAULT_TEMPLATE_CSS = ` .ods-charts-popover .ods-charts-popover-inner { display: inline-block; - background-color: white; - border: 2px solid rgb(204, 204, 204); + background-color: var(--bs-body-bg, #fff); + color: var(--bs-body-color, #000); + border: 2px solid var(--bs-border-color-subtle, #ccc); padding: 20px 18px 20px 18px; } +.ods-charts-popover.ods-charts-mode-dark .ods-charts-popover-inner { + background-color: var(--bs-gray-950, #141414); + color: var(--bs-white, #fff); + border: 2px solid var(--bs-gray-700, #666); +} +.ods-charts-popover.ods-charts-mode-light .ods-charts-popover-inner { + background-color: var(--bs-white, #fff); + color: var(--bs-black, #000); + border: 2px solid var(--bs-gray-500, #ccc); +} .ods-charts-popover .ods-charts-popover-header { - color: black; + color: var(--bs-body-color, #000); font-size: 18px; font-weight: 700; padding-bottom:10px; +} +.ods-charts-popover.ods-charts-mode-dark .ods-charts-popover-header { + color: var(--bs-white, #fff); +} +.ods-charts-popover.ods-charts-mode-light .ods-charts-popover-header { + color: var(--bs-black, #000); } .ods-charts-popover .ods-charts-popover-arrow { @@ -62,16 +79,23 @@ const DEFAULT_TEMPLATE_CSS = ` display: block; content: ""; border-color: transparent; - border-top-color: rgb(204, 204, 204); + border-top-color: var(--bs-border-color-subtle, #ccc); border-width: 10px; border-bottom-width: 0px; border-style: solid; top: 2px; left: 0; } +.ods-charts-popover.ods-charts-mode-dark .ods-charts-popover-arrow::before { + border-top-color: var(--bs-gray-700, #666); +} +.ods-charts-popover.ods-charts-mode-dark .ods-charts-popover-arrow::before { + border-top-color: var(--bs-gray-500, #ccc); +} + .ods-charts-popover .ods-charts-popover-arrow::after { border-color: transparent; - border-top-color: white; + border-top-color: var(--bs-body-bg, #fff); border-width: 10px; border-bottom-width: 0px; position: absolute; @@ -81,13 +105,22 @@ const DEFAULT_TEMPLATE_CSS = ` top: 0; left: 0; } +.ods-charts-popover.ods-charts-mode-dark .ods-charts-popover-arrow::after{ + border-top-color: var(--bs-gray-950, #141414); +} +.ods-charts-popover.ods-charts-mode-light .ods-charts-popover-arrow::after{ + border-top-color: var(--bs-white, #fff); +} `; const DEFAULT_NONE_CSS = ` .ods-charts-no-css-lib .ods-charts-popover-color-holder { - border: 1px solid #000; + border: 1px solid var(--bs-popover-border-color, #ccc); display: inline-block; } +.ods-charts-no-css-lib.ods-charts-mode-dark .ods-charts-popover-color-holder { + border: 1px solid var(--bs-popover-border-color, #666); +} .ods-charts-no-css-lib .ods-charts-popover-color { width: 8px; @@ -100,7 +133,10 @@ const DEFAULT_NONE_CSS = ` font-weight: 700; font-size: 16px; line-height: 24px; - color: black; + color: var(--bs-body-color, #000000); +} +.ods-charts-no-css-lib.ods-charts-mode-dark .ods-charts-popover-text { + color: var(--bs-body-color, #fff); } `; @@ -577,7 +613,8 @@ export class ODSChartsPopover { this.popoverDefinition.getPopupContent ? this.popoverDefinition.getPopupContent(item.tooltipElements) : this.getPopupContent(item.tooltipElements, cssTheme, mode), - this.enterable + this.enterable, + mode ); if (!popover) { return;