From dfcc243fe1ea70a7f1e9a983ccf2fbc9ee4da73f Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 27 Mar 2024 00:24:49 +0300 Subject: [PATCH] Update chart samples to use new variables --- doc/chart/BasicDoc.vue | 12 ++++---- doc/chart/ComboDoc.vue | 30 +++++++++---------- doc/chart/DoughnutDoc.vue | 12 ++++---- doc/chart/HorizontalBarDoc.vue | 36 +++++++++++------------ doc/chart/LineDoc.vue | 24 +++++++-------- doc/chart/LineStylesDoc.vue | 30 +++++++++---------- doc/chart/MultiAxisDoc.vue | 24 +++++++-------- doc/chart/PieChartDoc.vue | 12 ++++---- doc/chart/PolarAreaDoc.vue | 36 +++++++++++------------ doc/chart/RadarDoc.vue | 54 +++++++++++++++++----------------- doc/chart/StackedBarDoc.vue | 30 +++++++++---------- doc/chart/VerticalBarDoc.vue | 36 +++++++++++------------ package.json | 2 +- 13 files changed, 169 insertions(+), 169 deletions(-) diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue index 07b9ee35d..df0e706c8 100644 --- a/doc/chart/BasicDoc.vue +++ b/doc/chart/BasicDoc.vue @@ -61,8 +61,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { @@ -132,8 +132,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { @@ -200,8 +200,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue index 3886879af..ba9200a40 100644 --- a/doc/chart/ComboDoc.vue +++ b/doc/chart/ComboDoc.vue @@ -49,7 +49,7 @@ export default { { type: 'line', label: 'Dataset 1', - borderColor: documentStyle.getPropertyValue('--orange-500'), + borderColor: documentStyle.getPropertyValue('--p-orange-500'), borderWidth: 2, fill: false, tension: 0.4, @@ -58,7 +58,7 @@ export default { { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34], borderColor: 'white', borderWidth: 2 @@ -66,7 +66,7 @@ export default { { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -75,8 +75,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -139,7 +139,7 @@ const setChartData = () => { { type: 'line', label: 'Dataset 1', - borderColor: documentStyle.getPropertyValue('--orange-500'), + borderColor: documentStyle.getPropertyValue('--p-orange-500'), borderWidth: 2, fill: false, tension: 0.4, @@ -148,7 +148,7 @@ const setChartData = () => { { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34], borderColor: 'white', borderWidth: 2 @@ -156,7 +156,7 @@ const setChartData = () => { { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -165,8 +165,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -223,7 +223,7 @@ const setChartOptions = () => { { type: 'line', label: 'Dataset 1', - borderColor: documentStyle.getPropertyValue('--orange-500'), + borderColor: documentStyle.getPropertyValue('--p-orange-500'), borderWidth: 2, fill: false, tension: 0.4, @@ -232,7 +232,7 @@ const setChartOptions = () => { { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34], borderColor: 'white', borderWidth: 2 @@ -240,7 +240,7 @@ const setChartOptions = () => { { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -249,8 +249,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue index 3079402ff..df5719d8a 100644 --- a/doc/chart/DoughnutDoc.vue +++ b/doc/chart/DoughnutDoc.vue @@ -50,8 +50,8 @@ export default { datasets: [ { data: [540, 325, 702], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; @@ -101,8 +101,8 @@ const setChartData = () => { datasets: [ { data: [540, 325, 702], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; @@ -147,8 +147,8 @@ const setChartOptions = () => { datasets: [ { data: [300, 50, 100], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue index 910d2a1c4..ac29468c6 100644 --- a/doc/chart/HorizontalBarDoc.vue +++ b/doc/chart/HorizontalBarDoc.vue @@ -48,14 +48,14 @@ export default { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -64,8 +64,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { indexAxis: 'y', @@ -133,14 +133,14 @@ const setChartData = () => { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -149,8 +149,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { indexAxis: 'y', @@ -212,14 +212,14 @@ const setChartOptions = () => { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -228,8 +228,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { indexAxis: 'y', diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue index c12ef8e6f..80f9e5fa7 100644 --- a/doc/chart/LineDoc.vue +++ b/doc/chart/LineDoc.vue @@ -50,14 +50,14 @@ export default { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), tension: 0.4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4 } ] @@ -66,8 +66,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -131,14 +131,14 @@ const setChartData = () => { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), tension: 0.4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4 } ] @@ -147,8 +147,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -206,14 +206,14 @@ const setChartOptions = () => { label: 'First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), tension: 0.4 }, { label: 'Second Dataset', data: [28, 48, 40, 19, 86, 27, 90], fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4 } ] @@ -222,8 +222,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue index 444f17bc4..f6a1ef199 100644 --- a/doc/chart/LineStylesDoc.vue +++ b/doc/chart/LineStylesDoc.vue @@ -51,7 +51,7 @@ export default { data: [65, 59, 80, 81, 56, 55, 40], fill: false, tension: 0.4, - borderColor: documentStyle.getPropertyValue('--cyan-500') + borderColor: documentStyle.getPropertyValue('--p-cyan-500') }, { label: 'Second Dataset', @@ -59,13 +59,13 @@ export default { fill: false, borderDash: [5, 5], tension: 0.4, - borderColor: documentStyle.getPropertyValue('--orange-500') + borderColor: documentStyle.getPropertyValue('--p-orange-500') }, { label: 'Third Dataset', data: [12, 51, 62, 33, 21, 62, 45], fill: true, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4, backgroundColor: 'rgba(107, 114, 128, 0.2)' } @@ -75,8 +75,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -141,7 +141,7 @@ const setChartData = () => { data: [65, 59, 80, 81, 56, 55, 40], fill: false, tension: 0.4, - borderColor: documentStyle.getPropertyValue('--cyan-500') + borderColor: documentStyle.getPropertyValue('--p-cyan-500') }, { label: 'Second Dataset', @@ -149,13 +149,13 @@ const setChartData = () => { fill: false, borderDash: [5, 5], tension: 0.4, - borderColor: documentStyle.getPropertyValue('--orange-500') + borderColor: documentStyle.getPropertyValue('--p-orange-500') }, { label: 'Third Dataset', data: [12, 51, 62, 33, 21, 62, 45], fill: true, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4, backgroundColor: 'rgba(107, 114, 128, 0.2)' } @@ -165,8 +165,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -225,7 +225,7 @@ const setChartOptions = () => { data: [65, 59, 80, 81, 56, 55, 40], fill: false, tension: 0.4, - borderColor: documentStyle.getPropertyValue('--cyan-500') + borderColor: documentStyle.getPropertyValue('--p-cyan-500') }, { label: 'Second Dataset', @@ -233,13 +233,13 @@ const setChartOptions = () => { fill: false, borderDash: [5, 5], tension: 0.4, - borderColor: documentStyle.getPropertyValue('--orange-500') + borderColor: documentStyle.getPropertyValue('--p-orange-500') }, { label: 'Third Dataset', data: [12, 51, 62, 33, 21, 62, 45], fill: true, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), tension: 0.4, backgroundColor: 'rgba(107, 114, 128, 0.2)' } @@ -249,8 +249,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue index 39e886af0..b8b4e4a85 100644 --- a/doc/chart/MultiAxisDoc.vue +++ b/doc/chart/MultiAxisDoc.vue @@ -49,7 +49,7 @@ export default { { label: 'Dataset 1', fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), yAxisID: 'y', tension: 0.4, data: [65, 59, 80, 81, 56, 55, 10] @@ -57,7 +57,7 @@ export default { { label: 'Dataset 2', fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), yAxisID: 'y1', tension: 0.4, data: [28, 48, 40, 19, 86, 27, 90] @@ -68,8 +68,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { stacked: false, @@ -148,7 +148,7 @@ const setChartData = () => { { label: 'Dataset 1', fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), yAxisID: 'y', tension: 0.4, data: [65, 59, 80, 81, 56, 55, 10] @@ -156,7 +156,7 @@ const setChartData = () => { { label: 'Dataset 2', fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), yAxisID: 'y1', tension: 0.4, data: [28, 48, 40, 19, 86, 27, 90] @@ -167,8 +167,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { stacked: false, @@ -241,7 +241,7 @@ const setChartOptions = () => { { label: 'Dataset 1', fill: false, - borderColor: documentStyle.getPropertyValue('--cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), yAxisID: 'y', tension: 0.4, data: [65, 59, 80, 81, 56, 55, 10] @@ -249,7 +249,7 @@ const setChartOptions = () => { { label: 'Dataset 2', fill: false, - borderColor: documentStyle.getPropertyValue('--gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), yAxisID: 'y1', tension: 0.4, data: [28, 48, 40, 19, 86, 27, 90] @@ -260,8 +260,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { stacked: false, diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue index c3737651f..34423cb16 100644 --- a/doc/chart/PieChartDoc.vue +++ b/doc/chart/PieChartDoc.vue @@ -48,8 +48,8 @@ export default { datasets: [ { data: [540, 325, 702], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; @@ -99,8 +99,8 @@ const setChartData = () => { datasets: [ { data: [540, 325, 702], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; @@ -145,8 +145,8 @@ const setChartOptions = () => { datasets: [ { data: [540, 325, 702], - backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')], - hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')] + backgroundColor: [documentStyle.getPropertyValue('--p-cyan-500'), documentStyle.getPropertyValue('--p-orange-500'), documentStyle.getPropertyValue('--p-gray-500')], + hoverBackgroundColor: [documentStyle.getPropertyValue('--p-cyan-400'), documentStyle.getPropertyValue('--p-orange-400'), documentStyle.getPropertyValue('--p-gray-400')] } ] }; diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue index aec8cb97a..965702863 100644 --- a/doc/chart/PolarAreaDoc.vue +++ b/doc/chart/PolarAreaDoc.vue @@ -48,11 +48,11 @@ export default { { data: [11, 16, 7, 3, 14], backgroundColor: [ - documentStyle.getPropertyValue('--pink-500'), - documentStyle.getPropertyValue('--gray-500'), - documentStyle.getPropertyValue('--orange-500'), - documentStyle.getPropertyValue('--purple-500'), - documentStyle.getPropertyValue('--cyan-500') + documentStyle.getPropertyValue('--p-pink-500'), + documentStyle.getPropertyValue('--p-gray-500'), + documentStyle.getPropertyValue('--p-orange-500'), + documentStyle.getPropertyValue('--p-purple-500'), + documentStyle.getPropertyValue('--p-cyan-500') ], label: 'My dataset' } @@ -63,7 +63,7 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { @@ -112,11 +112,11 @@ const setChartData = () => { { data: [11, 16, 7, 3, 14], backgroundColor: [ - documentStyle.getPropertyValue('--pink-500'), - documentStyle.getPropertyValue('--gray-500'), - documentStyle.getPropertyValue('--orange-500'), - documentStyle.getPropertyValue('--purple-500'), - documentStyle.getPropertyValue('--cyan-500') + documentStyle.getPropertyValue('--p-pink-500'), + documentStyle.getPropertyValue('--p-gray-500'), + documentStyle.getPropertyValue('--p-orange-500'), + documentStyle.getPropertyValue('--p-purple-500'), + documentStyle.getPropertyValue('--p-cyan-500') ], label: 'My dataset' } @@ -127,7 +127,7 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { @@ -170,11 +170,11 @@ const setChartOptions = () => { { data: [11, 16, 7, 3, 14], backgroundColor: [ - documentStyle.getPropertyValue('--pink-500'), - documentStyle.getPropertyValue('--gray-500'), - documentStyle.getPropertyValue('--orange-500'), - documentStyle.getPropertyValue('--purple-500'), - documentStyle.getPropertyValue('--cyan-500') + documentStyle.getPropertyValue('--p-pink-500'), + documentStyle.getPropertyValue('--p-gray-500'), + documentStyle.getPropertyValue('--p-orange-500'), + documentStyle.getPropertyValue('--p-purple-500'), + documentStyle.getPropertyValue('--p-cyan-500') ], label: 'My dataset' } @@ -185,7 +185,7 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { plugins: { diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue index 445568933..19321e723 100644 --- a/doc/chart/RadarDoc.vue +++ b/doc/chart/RadarDoc.vue @@ -49,20 +49,20 @@ export default { datasets: [ { label: 'My First dataset', - borderColor: documentStyle.getPropertyValue('--gray-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'), - pointBorderColor: documentStyle.getPropertyValue('--gray-400'), + borderColor: documentStyle.getPropertyValue('--p-gray-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-gray-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-gray-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-gray-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', - borderColor: documentStyle.getPropertyValue('--cyan-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'), - pointBorderColor: documentStyle.getPropertyValue('--cyan-400'), + borderColor: documentStyle.getPropertyValue('--p-cyan-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-cyan-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] @@ -71,7 +71,7 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); return { plugins: { @@ -121,20 +121,20 @@ const setChartData = () => { datasets: [ { label: 'My First dataset', - borderColor: documentStyle.getPropertyValue('--bluegray-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'), - pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'), + borderColor: documentStyle.getPropertyValue('--p-bluegray-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-bluegray-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-bluegray-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-bluegray-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', - borderColor: documentStyle.getPropertyValue('--pink-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'), - pointBorderColor: documentStyle.getPropertyValue('--pink-400'), + borderColor: documentStyle.getPropertyValue('--p-pink-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-pink-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-pink-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-pink-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] @@ -143,7 +143,7 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); return { plugins: { @@ -187,20 +187,20 @@ const setChartOptions = () => { datasets: [ { label: 'My First dataset', - borderColor: documentStyle.getPropertyValue('--gray-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--gray-400'), - pointBorderColor: documentStyle.getPropertyValue('--gray-400'), + borderColor: documentStyle.getPropertyValue('--p-gray-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-gray-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-gray-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--gray-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-gray-400'), data: [65, 59, 90, 81, 56, 55, 40] }, { label: 'My Second dataset', - borderColor: documentStyle.getPropertyValue('--cyan-400'), - pointBackgroundColor: documentStyle.getPropertyValue('--cyan-400'), - pointBorderColor: documentStyle.getPropertyValue('--cyan-400'), + borderColor: documentStyle.getPropertyValue('--p-cyan-400'), + pointBackgroundColor: documentStyle.getPropertyValue('--p-cyan-400'), + pointBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), pointHoverBackgroundColor: textColor, - pointHoverBorderColor: documentStyle.getPropertyValue('--cyan-400'), + pointHoverBorderColor: documentStyle.getPropertyValue('--p-cyan-400'), data: [28, 48, 40, 19, 96, 27, 100] } ] @@ -209,7 +209,7 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); return { plugins: { diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue index 1a1a398de..2b24fc163 100644 --- a/doc/chart/StackedBarDoc.vue +++ b/doc/chart/StackedBarDoc.vue @@ -49,19 +49,19 @@ export default { { type: 'bar', label: 'Dataset 1', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [50, 25, 12, 48, 90, 76, 42] }, { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34] }, { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--orange-500'), + backgroundColor: documentStyle.getPropertyValue('--p-orange-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -70,8 +70,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -140,19 +140,19 @@ const setChartData = () => { { type: 'bar', label: 'Dataset 1', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [50, 25, 12, 48, 90, 76, 42] }, { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34] }, { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--orange-500'), + backgroundColor: documentStyle.getPropertyValue('--p-orange-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -161,8 +161,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -225,19 +225,19 @@ const setChartOptions = () => { { type: 'bar', label: 'Dataset 1', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [50, 25, 12, 48, 90, 76, 42] }, { type: 'bar', label: 'Dataset 2', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), data: [21, 84, 24, 75, 37, 65, 34] }, { type: 'bar', label: 'Dataset 3', - backgroundColor: documentStyle.getPropertyValue('--orange-500'), + backgroundColor: documentStyle.getPropertyValue('--p-orange-500'), data: [41, 52, 24, 74, 23, 21, 32] } ] @@ -246,8 +246,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue index 0e7fb5f62..937341476 100644 --- a/doc/chart/VerticalBarDoc.vue +++ b/doc/chart/VerticalBarDoc.vue @@ -48,14 +48,14 @@ export default { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -64,8 +64,8 @@ export default { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -132,14 +132,14 @@ const setChartData = () => { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -148,8 +148,8 @@ const setChartData = () => { const setChartOptions = () => { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, @@ -210,14 +210,14 @@ const setChartOptions = () => { datasets: [ { label: 'My First dataset', - backgroundColor: documentStyle.getPropertyValue('--cyan-500'), - borderColor: documentStyle.getPropertyValue('--cyan-500'), + backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'), + borderColor: documentStyle.getPropertyValue('--p-cyan-500'), data: [65, 59, 80, 81, 56, 55, 40] }, { label: 'My Second dataset', - backgroundColor: documentStyle.getPropertyValue('--gray-500'), - borderColor: documentStyle.getPropertyValue('--gray-500'), + backgroundColor: documentStyle.getPropertyValue('--p-gray-500'), + borderColor: documentStyle.getPropertyValue('--p-gray-500'), data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -226,8 +226,8 @@ const setChartOptions = () => { setChartOptions() { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); - const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); - const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + const textColorSecondary = documentStyle.getPropertyValue('--text-secondary-color'); + const surfaceBorder = documentStyle.getPropertyValue('--border-color'); return { maintainAspectRatio: false, diff --git a/package.json b/package.json index 7826a9d64..113852e33 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primevue", - "version": "3.51.0-SNAPSHOT", + "version": "4.0.0-beta.1", "homepage": "https://primevue.org/", "repository": { "type": "git",