From 417225ecf324b7d999fc81eb1583e6a0e7b6a526 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 14:28:17 +0300 Subject: [PATCH 01/23] Design System: use design tokens for hardcoded colors in Charts demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in AreaSparklines, BarSparklines, SimpleSparklines, WinlossSparklines, AxisLabelCustomization, CenterLabelCustomization, ExportCustomMarkup. Fallback preserves the exact legacy value, so existing themes are visually unaffected; fluent-next resolves the token. --- .../AreaSparklines/Angular/app/app.component.css | 10 +++++----- .../demos/Demos/Charts/AreaSparklines/React/styles.css | 10 +++++----- .../Demos/Charts/AreaSparklines/ReactJs/styles.css | 10 +++++----- apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue | 4 ++-- .../Demos/Charts/AreaSparklines/Vue/RowTemplate.vue | 6 +++--- .../Demos/Charts/AreaSparklines/jQuery/styles.css | 10 +++++----- .../Angular/app/app.component.css | 2 +- .../Charts/AxisLabelCustomization/React/styles.css | 2 +- .../Charts/AxisLabelCustomization/ReactJs/styles.css | 2 +- .../AxisLabelCustomization/Vue/LabelTemplate.vue | 2 +- .../Charts/AxisLabelCustomization/jQuery/styles.css | 2 +- .../Charts/BarSparklines/Angular/app/app.component.css | 10 +++++----- apps/demos/Demos/Charts/BarSparklines/React/styles.css | 10 +++++----- .../Demos/Charts/BarSparklines/ReactJs/styles.css | 10 +++++----- apps/demos/Demos/Charts/BarSparklines/Vue/App.vue | 10 +++++----- .../Demos/Charts/BarSparklines/Vue/RowTemplate.vue | 6 +++--- .../demos/Demos/Charts/BarSparklines/jQuery/styles.css | 10 +++++----- .../Angular/app/app.component.html | 2 +- .../CenterLabelCustomization/React/CenterTemplate.tsx | 2 +- .../CenterLabelCustomization/ReactJs/CenterTemplate.js | 2 +- .../CenterLabelCustomization/Vue/CenterTemplate.vue | 2 +- .../Charts/CenterLabelCustomization/jQuery/index.js | 2 +- .../ExportCustomMarkup/Angular/app/app.component.css | 2 +- .../Demos/Charts/ExportCustomMarkup/React/styles.css | 2 +- .../Demos/Charts/ExportCustomMarkup/ReactJs/styles.css | 2 +- .../demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue | 2 +- .../Demos/Charts/ExportCustomMarkup/jQuery/styles.css | 2 +- .../SimpleSparklines/Angular/app/app.component.css | 10 +++++----- .../Demos/Charts/SimpleSparklines/React/styles.css | 10 +++++----- .../Demos/Charts/SimpleSparklines/ReactJs/styles.css | 10 +++++----- apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue | 4 ++-- .../Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue | 6 +++--- .../Demos/Charts/SimpleSparklines/jQuery/styles.css | 10 +++++----- .../WinlossSparklines/Angular/app/app.component.css | 10 +++++----- .../Demos/Charts/WinlossSparklines/React/styles.css | 10 +++++----- .../Demos/Charts/WinlossSparklines/ReactJs/styles.css | 10 +++++----- apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue | 4 ++-- .../Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue | 6 +++--- .../Demos/Charts/WinlossSparklines/jQuery/styles.css | 10 +++++----- 39 files changed, 118 insertions(+), 118 deletions(-) diff --git a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css index 402fd3bc24ad..f96156066b2c 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css @@ -4,7 +4,7 @@ ::ng-deep .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue index f554930cbfb2..19b8802a76d1 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue +++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue @@ -35,7 +35,7 @@ const years = ['2021', '2022', '2023']; .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -43,7 +43,7 @@ const years = ['2021', '2022', '2023']; font-weight: 400; width: 200px; padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .long-title h3 { diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue index 056f1b376996..0fd223c5ffd6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue +++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue @@ -71,15 +71,15 @@ withDefaults(defineProps<{ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css index a72aa6c086ad..cd2a4159f975 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css index 5b2879e8b76b..5f182dc7abad 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css index 5b2879e8b76b..5f182dc7abad 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue index cf027de190b9..814500c4b175 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue @@ -26,7 +26,7 @@ const getFilePath = (text: string): string => `../../../../images/flags/3x2/${te diff --git a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css index c6ffdc033671..a467b216c216 100644 --- a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css @@ -17,7 +17,7 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; + color: var(--dxds-color-content-neutral-deep-rest, #999); } .dark #gridContainer tr.notes-row td { @@ -25,7 +25,7 @@ } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } .dark #gridContainer tbody.dx-state-hover { @@ -37,9 +37,9 @@ } .dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-surface-neutral-default-hovered, #ccc); } #gridContainer tbody.dx-state-hover tr.notes-row td { - color: #888; + color: var(--dxds-color-content-neutral-deep-rest, #888); } diff --git a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css index c6ffdc033671..a467b216c216 100644 --- a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css @@ -17,7 +17,7 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; + color: var(--dxds-color-content-neutral-deep-rest, #999); } .dark #gridContainer tr.notes-row td { @@ -25,7 +25,7 @@ } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } .dark #gridContainer tbody.dx-state-hover { @@ -37,9 +37,9 @@ } .dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-surface-neutral-default-hovered, #ccc); } #gridContainer tbody.dx-state-hover tr.notes-row td { - color: #888; + color: var(--dxds-color-content-neutral-deep-rest, #888); } From aba09dcdab1b4df86f1ab601d548e4bfbd491b18 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 15:21:39 +0300 Subject: [PATCH 04/23] Design System: use design tokens for hardcoded colors in Gantt demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in TaskTemplate (6 of 7 custom task colors, both #fff occurrences) and StripLines. Fallback preserves the exact legacy value. #7B1FA2 stays untouched (still unresolved by designers). --- .../StripLines/Angular/app/app.component.css | 2 +- .../Demos/Gantt/StripLines/React/styles.css | 2 +- .../Demos/Gantt/StripLines/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/StripLines/Vue/App.vue | 2 +- .../Demos/Gantt/StripLines/jQuery/styles.css | 2 +- .../TaskTemplate/Angular/app/app.component.css | 16 ++++++++-------- .../Demos/Gantt/TaskTemplate/React/styles.css | 16 ++++++++-------- .../Demos/Gantt/TaskTemplate/ReactJs/styles.css | 16 ++++++++-------- apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue | 16 ++++++++-------- .../Demos/Gantt/TaskTemplate/jQuery/styles.css | 16 ++++++++-------- 10 files changed, 45 insertions(+), 45 deletions(-) diff --git a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css index 74cf7ccafe78..85f49a332239 100644 --- a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css @@ -1,3 +1,3 @@ ::ng-deep .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/React/styles.css b/apps/demos/Demos/Gantt/StripLines/React/styles.css index 4c3c4c1e53ef..5d1d19151ace 100644 --- a/apps/demos/Demos/Gantt/StripLines/React/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/React/styles.css @@ -1,3 +1,3 @@ .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css index 4c3c4c1e53ef..5d1d19151ace 100644 --- a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css @@ -1,3 +1,3 @@ .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue index 31a74d311d75..8fdb8c7909d1 100644 --- a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue +++ b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue @@ -47,6 +47,6 @@ const currentTime = new Date(); diff --git a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css index bf78a9ceb6a0..d7c48cda5fe0 100644 --- a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css @@ -3,5 +3,5 @@ } #gantt .current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css index c52e2242d0fd..5978db5c3683 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css @@ -3,27 +3,27 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-surface-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-surface-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .custom-task-wrapper > * { @@ -54,7 +54,7 @@ height: 32px; border-radius: 50%; margin: 8px; - background-color: #fff; + background-color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); overflow: hidden; } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css index c52e2242d0fd..5978db5c3683 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css @@ -3,27 +3,27 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-surface-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-surface-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .custom-task-wrapper > * { @@ -54,7 +54,7 @@ height: 32px; border-radius: 50%; margin: 8px; - background-color: #fff; + background-color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); overflow: hidden; } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css index c52e2242d0fd..5978db5c3683 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css @@ -3,27 +3,27 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-surface-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-surface-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .custom-task-wrapper > * { @@ -54,7 +54,7 @@ height: 32px; border-radius: 50%; margin: 8px; - background-color: #fff; + background-color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); overflow: hidden; } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue index 2644c14235a8..0cda59d27791 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue +++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue @@ -83,27 +83,27 @@ function getImagePath(taskId: number) { } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-surface-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-surface-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { @@ -119,7 +119,7 @@ function getImagePath(taskId: number) { .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .custom-task-wrapper > * { @@ -134,7 +134,7 @@ function getImagePath(taskId: number) { height: 32px; border-radius: 50%; margin: 8px; - background-color: #fff; + background-color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); overflow: hidden; } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css index c52e2242d0fd..5978db5c3683 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css @@ -3,27 +3,27 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-surface-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-surface-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .custom-task-wrapper > * { @@ -54,7 +54,7 @@ height: 32px; border-radius: 50%; margin: 8px; - background-color: #fff; + background-color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); overflow: hidden; } From c47b65dd83044e13932d3139a038e1c851922fc7 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 15:46:17 +0300 Subject: [PATCH 05/23] Design System: use design tokens for hardcoded colors in TileView demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in ItemTemplate and Item3RdPartyEngineTemplate. Fallback preserves the exact legacy value. --- .../TileView/Item3RdPartyEngineTemplate/jQuery/styles.css | 8 ++++---- .../TileView/ItemTemplate/Angular/app/app.component.css | 8 ++++---- apps/demos/Demos/TileView/ItemTemplate/React/styles.css | 8 ++++---- apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css | 8 ++++---- apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css | 8 ++++---- apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css | 8 ++++---- 6 files changed, 24 insertions(+), 24 deletions(-) diff --git a/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css b/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css index 1e37a088863f..3cfb26a0a567 100644 --- a/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css +++ b/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css @@ -11,18 +11,18 @@ } .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } .dx-tile-content > .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; diff --git a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css index 65a4ccc034ad..a50e92de132c 100644 --- a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css +++ b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css @@ -14,18 +14,18 @@ } ::ng-deep .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } ::ng-deep .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } ::ng-deep .dx-tile-content .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; diff --git a/apps/demos/Demos/TileView/ItemTemplate/React/styles.css b/apps/demos/Demos/TileView/ItemTemplate/React/styles.css index a648e54c5bca..0d6b4d1abc1a 100644 --- a/apps/demos/Demos/TileView/ItemTemplate/React/styles.css +++ b/apps/demos/Demos/TileView/ItemTemplate/React/styles.css @@ -14,18 +14,18 @@ } .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } .dx-tile-content .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; diff --git a/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css b/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css index a648e54c5bca..0d6b4d1abc1a 100644 --- a/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css @@ -14,18 +14,18 @@ } .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } .dx-tile-content .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; diff --git a/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css b/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css index a648e54c5bca..0d6b4d1abc1a 100644 --- a/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css +++ b/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css @@ -14,18 +14,18 @@ } .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } .dx-tile-content .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; diff --git a/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css b/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css index a648e54c5bca..0d6b4d1abc1a 100644 --- a/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css +++ b/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css @@ -14,18 +14,18 @@ } .dx-tile { - border: 1px solid #999; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #999); } .dx-tile.dx-state-hover { - border-color: #eee; + border-color: var(--dxds-color-surface-utility-gray-default-rest, #eee); } .dx-tile-content .price { font-size: 12px; position: absolute; - background-color: black; - color: white; + background-color: var(--dxds-color-surface-utility-gray-default-rest, black); + color: var(--dxds-color-content-neutral-default-on-surface-rest, white); opacity: 0.6; padding: 2px; left: 9px; From 04f0a722894f282a78dcee035da733a382024e1c Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 15:57:30 +0300 Subject: [PATCH 06/23] Design System: use design tokens for hardcoded colors in Common demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in PopupAndNotificationsOverview (#f05b41 across all 6 occurrences, #ff6a50, #fff) and FormsOverview (#d2d3d5). Fallback preserves the exact legacy value. rgba(19, 32, 51, 0.8) and rgba(255, 255, 255, 0.4) stay untouched (still unresolved by designers). --- .../Angular/app/app.component.css | 2 +- .../Common/FormsOverview/React/styles.css | 2 +- .../Common/FormsOverview/ReactJs/styles.css | 2 +- .../Demos/Common/FormsOverview/Vue/App.vue | 2 +- .../Common/FormsOverview/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 20 +++++++++---------- .../React/styles.css | 20 +++++++++---------- .../ReactJs/styles.css | 20 +++++++++---------- .../Vue/styles.css | 20 +++++++++---------- .../jQuery/styles.css | 20 +++++++++---------- 10 files changed, 55 insertions(+), 55 deletions(-) diff --git a/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css index 432998a9c7d3..d4b09312a97a 100644 --- a/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css +++ b/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css @@ -6,7 +6,7 @@ height: 128px; width: 128px; margin-right: 10px; - border: 1px solid #d2d3d5; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d2d3d5); border-radius: 50%; background-image: url('../../../../images/petersmith.png'); background-size: contain; diff --git a/apps/demos/Demos/Common/FormsOverview/React/styles.css b/apps/demos/Demos/Common/FormsOverview/React/styles.css index a8a271680b68..0924047fecd4 100644 --- a/apps/demos/Demos/Common/FormsOverview/React/styles.css +++ b/apps/demos/Demos/Common/FormsOverview/React/styles.css @@ -6,7 +6,7 @@ height: 128px; width: 128px; margin-right: 10px; - border: 1px solid #d2d3d5; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d2d3d5); border-radius: 50%; background-image: url('../../../../images/petersmith.png'); background-size: contain; diff --git a/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css index a8a271680b68..0924047fecd4 100644 --- a/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css +++ b/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css @@ -6,7 +6,7 @@ height: 128px; width: 128px; margin-right: 10px; - border: 1px solid #d2d3d5; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d2d3d5); border-radius: 50%; background-image: url('../../../../images/petersmith.png'); background-size: contain; diff --git a/apps/demos/Demos/Common/FormsOverview/Vue/App.vue b/apps/demos/Demos/Common/FormsOverview/Vue/App.vue index 769f197452ba..5945f1ac0587 100644 --- a/apps/demos/Demos/Common/FormsOverview/Vue/App.vue +++ b/apps/demos/Demos/Common/FormsOverview/Vue/App.vue @@ -86,7 +86,7 @@ const notesOptions = { height: 140 }; height: 128px; width: 128px; margin-right: 10px; - border: 1px solid #d2d3d5; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d2d3d5); border-radius: 50%; background-image: url("../../../../images/petersmith.png"); background-size: contain; diff --git a/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css b/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css index a8a271680b68..0924047fecd4 100644 --- a/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css +++ b/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css @@ -6,7 +6,7 @@ height: 128px; width: 128px; margin-right: 10px; - border: 1px solid #d2d3d5; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d2d3d5); border-radius: 50%; background-image: url('../../../../images/petersmith.png'); background-size: contain; diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css index cbc73f88b149..6835f4c9ec1e 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css @@ -1,6 +1,6 @@ ::ng-deep .large-text { font-size: 24px; - color: #ff6a50; + color: var(--dxds-color-content-utility-orange-default-rest, #ff6a50); } ::ng-deep .opacity { @@ -20,7 +20,7 @@ ::ng-deep .images .item-content { position: relative; margin: 5px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); cursor: pointer; } @@ -37,7 +37,7 @@ } ::ng-deep .images .item-content:hover > .item-options { - box-shadow: inset 0 0 0 2px #f05b41; + box-shadow: inset 0 0 0 2px var(--dxds-color-border-utility-orange-default-rest, #f05b41); } ::ng-deep .item-content .item-options > div { @@ -54,9 +54,9 @@ } ::ng-deep .images .item-content:hover > .item-options > div { - border-bottom: 2px solid #f05b41; - border-left: 2px solid #f05b41; - border-right: 2px solid #f05b41; + border-bottom: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-left: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-right: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); } ::ng-deep .item-content .item-options .address, @@ -82,7 +82,7 @@ } ::ng-deep .item-content .item-options .agent > div:hover { - color: #f05b41; + color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); } ::ng-deep .item-content .item-options .agent img { @@ -123,13 +123,13 @@ } ::ng-deep .dx-button.favorites { - background-color: #f05b41; - color: #fff; + background-color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); position: absolute; top: 5px; right: 0; } ::ng-deep .dx-button.favorites .dx-icon { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css index ca4086485d13..67a836f12dcf 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css @@ -1,6 +1,6 @@ .large-text { font-size: 24px; - color: #ff6a50; + color: var(--dxds-color-content-utility-orange-default-rest, #ff6a50); } .opacity { @@ -20,7 +20,7 @@ .images .item-content { position: relative; margin: 5px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); cursor: pointer; } @@ -37,7 +37,7 @@ } .images .item-content:hover > .item-options { - box-shadow: inset 0 0 0 2px #f05b41; + box-shadow: inset 0 0 0 2px var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options > div { @@ -54,9 +54,9 @@ } .images .item-content:hover > .item-options > div { - border-bottom: 2px solid #f05b41; - border-left: 2px solid #f05b41; - border-right: 2px solid #f05b41; + border-bottom: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-left: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-right: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .address, @@ -82,7 +82,7 @@ } .item-content .item-options .agent > div:hover { - color: #f05b41; + color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .agent img { @@ -123,13 +123,13 @@ } .dx-button.favorites { - background-color: #f05b41; - color: #fff; + background-color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); position: absolute; top: 5px; right: 0; } .dx-button.favorites .dx-icon { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css index ca4086485d13..67a836f12dcf 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css @@ -1,6 +1,6 @@ .large-text { font-size: 24px; - color: #ff6a50; + color: var(--dxds-color-content-utility-orange-default-rest, #ff6a50); } .opacity { @@ -20,7 +20,7 @@ .images .item-content { position: relative; margin: 5px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); cursor: pointer; } @@ -37,7 +37,7 @@ } .images .item-content:hover > .item-options { - box-shadow: inset 0 0 0 2px #f05b41; + box-shadow: inset 0 0 0 2px var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options > div { @@ -54,9 +54,9 @@ } .images .item-content:hover > .item-options > div { - border-bottom: 2px solid #f05b41; - border-left: 2px solid #f05b41; - border-right: 2px solid #f05b41; + border-bottom: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-left: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-right: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .address, @@ -82,7 +82,7 @@ } .item-content .item-options .agent > div:hover { - color: #f05b41; + color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .agent img { @@ -123,13 +123,13 @@ } .dx-button.favorites { - background-color: #f05b41; - color: #fff; + background-color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); position: absolute; top: 5px; right: 0; } .dx-button.favorites .dx-icon { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/styles.css index ca4086485d13..67a836f12dcf 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/styles.css +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/styles.css @@ -1,6 +1,6 @@ .large-text { font-size: 24px; - color: #ff6a50; + color: var(--dxds-color-content-utility-orange-default-rest, #ff6a50); } .opacity { @@ -20,7 +20,7 @@ .images .item-content { position: relative; margin: 5px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); cursor: pointer; } @@ -37,7 +37,7 @@ } .images .item-content:hover > .item-options { - box-shadow: inset 0 0 0 2px #f05b41; + box-shadow: inset 0 0 0 2px var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options > div { @@ -54,9 +54,9 @@ } .images .item-content:hover > .item-options > div { - border-bottom: 2px solid #f05b41; - border-left: 2px solid #f05b41; - border-right: 2px solid #f05b41; + border-bottom: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-left: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-right: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .address, @@ -82,7 +82,7 @@ } .item-content .item-options .agent > div:hover { - color: #f05b41; + color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .agent img { @@ -123,13 +123,13 @@ } .dx-button.favorites { - background-color: #f05b41; - color: #fff; + background-color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); position: absolute; top: 5px; right: 0; } .dx-button.favorites .dx-icon { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css index ca4086485d13..67a836f12dcf 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css @@ -1,6 +1,6 @@ .large-text { font-size: 24px; - color: #ff6a50; + color: var(--dxds-color-content-utility-orange-default-rest, #ff6a50); } .opacity { @@ -20,7 +20,7 @@ .images .item-content { position: relative; margin: 5px; - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); cursor: pointer; } @@ -37,7 +37,7 @@ } .images .item-content:hover > .item-options { - box-shadow: inset 0 0 0 2px #f05b41; + box-shadow: inset 0 0 0 2px var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options > div { @@ -54,9 +54,9 @@ } .images .item-content:hover > .item-options > div { - border-bottom: 2px solid #f05b41; - border-left: 2px solid #f05b41; - border-right: 2px solid #f05b41; + border-bottom: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-left: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); + border-right: 2px solid var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .address, @@ -82,7 +82,7 @@ } .item-content .item-options .agent > div:hover { - color: #f05b41; + color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); } .item-content .item-options .agent img { @@ -123,13 +123,13 @@ } .dx-button.favorites { - background-color: #f05b41; - color: #fff; + background-color: var(--dxds-color-border-utility-orange-default-rest, #f05b41); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); position: absolute; top: 5px; right: 0; } .dx-button.favorites .dx-icon { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } From 270a8ecd8b423d5851d7d55ba7fb7301b72c4e65 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 16:07:00 +0300 Subject: [PATCH 07/23] Design System: use design tokens for hardcoded colors in ResponsiveBox and TabPanel demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in ResponsiveBox/Overview (5 panel colors + text color) and TabPanel/Overview (3 priority colors + dark-mode background). Fallback preserves the exact legacy value. #fff and rgba(0, 0, 0, 0.15) in TabPanel stay untouched (still unresolved by designers). --- .../Overview/Angular/app/app.component.css | 12 ++++++------ .../Demos/ResponsiveBox/Overview/React/styles.css | 12 ++++++------ .../Demos/ResponsiveBox/Overview/ReactJs/styles.css | 12 ++++++------ apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue | 12 ++++++------ .../Demos/ResponsiveBox/Overview/jQuery/styles.css | 12 ++++++------ .../TabPanel/Overview/Angular/app/app.component.css | 8 ++++---- apps/demos/Demos/TabPanel/Overview/React/styles.css | 8 ++++---- .../demos/Demos/TabPanel/Overview/ReactJs/styles.css | 8 ++++---- apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue | 8 ++++---- apps/demos/Demos/TabPanel/Overview/jQuery/styles.css | 8 ++++---- 10 files changed, 50 insertions(+), 50 deletions(-) diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css index f7de14c6c659..30e7a34f6bb1 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css @@ -5,24 +5,24 @@ } ::ng-deep #page .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } ::ng-deep #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } ::ng-deep #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } ::ng-deep #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } ::ng-deep #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } ::ng-deep .item { @@ -33,5 +33,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css index 2aca99d2c103..7a3379e28e4e 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css @@ -6,24 +6,24 @@ } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -34,5 +34,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css index 2aca99d2c103..7a3379e28e4e 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css @@ -6,24 +6,24 @@ } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -34,5 +34,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue index d5938408e37d..bb7006938f75 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue +++ b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue @@ -114,24 +114,24 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -142,6 +142,6 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css index 4843cf529992..e78a4bdb1538 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css @@ -5,24 +5,24 @@ } #page .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -33,5 +33,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css index 046af40d3171..6db5699730a0 100644 --- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css @@ -82,15 +82,15 @@ } ::ng-deep .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } ::ng-deep .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } ::ng-deep .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } ::ng-deep .task-item-text, @@ -122,5 +122,5 @@ } ::ng-deep .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/React/styles.css b/apps/demos/Demos/TabPanel/Overview/React/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/React/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/React/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue index bfe6973f9762..8cf27a2d6de3 100644 --- a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue +++ b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue @@ -44,15 +44,15 @@ withDefaults(defineProps<{ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -84,6 +84,6 @@ withDefaults(defineProps<{ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } From 59fc30886a921c54724a10c5b0755c58bc88ae92 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 16:21:41 +0300 Subject: [PATCH 08/23] Design System: use design tokens for hardcoded colors in Diagram and FileUploader demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in CustomShapesWithTemplates(+WithEditing), CustomDropzone, FileSelection. Fallback preserves the exact legacy value. --- .../CustomShapesWithTemplates/Angular/app/app.component.css | 2 +- .../Demos/Diagram/CustomShapesWithTemplates/React/styles.css | 2 +- .../Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css | 2 +- .../CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue | 2 +- .../Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 2 +- .../CustomShapesWithTemplatesWithEditing/React/styles.css | 2 +- .../CustomShapesWithTemplatesWithEditing/ReactJs/styles.css | 2 +- .../Vue/CustomShapeTemplate.vue | 2 +- .../CustomShapesWithTemplatesWithEditing/jQuery/styles.css | 2 +- .../FileUploader/CustomDropzone/Angular/app/app.component.css | 2 +- apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css | 2 +- apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css | 2 +- apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue | 2 +- apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css | 2 +- .../FileUploader/FileSelection/Angular/app/app.component.css | 2 +- apps/demos/Demos/FileUploader/FileSelection/React/styles.css | 2 +- apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css | 2 +- apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue | 2 +- apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css | 2 +- 20 files changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css index a63da81e6b33..b62e1885425f 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css @@ -14,7 +14,7 @@ ::ng-deep #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } ::ng-deep #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css index 19c663799ca1..407f0220b7b2 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css index 19c663799ca1..407f0220b7b2 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue index 6811e94a8dd7..92bdf4e50a37 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue @@ -50,7 +50,7 @@ function showEmployeeInfo() { #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css index 19c663799ca1..407f0220b7b2 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css index 142d4c910973..bf921356e7a9 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css @@ -14,7 +14,7 @@ ::ng-deep #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } ::ng-deep #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css index 9f3bca9114d4..b86078c06062 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css index 9f3bca9114d4..b86078c06062 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue index 556e8d670df0..59c29094398b 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue @@ -63,7 +63,7 @@ const deleteEmployeeFunc = () => props.deleteEmployee(props.employee); #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css index 9f3bca9114d4..b86078c06062 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css @@ -14,7 +14,7 @@ #diagram .template .template-button { cursor: pointer; font-size: 8pt; - fill: navy; + fill: var(--dxds-color-content-utility-blue-default-rest, navy); } #diagram .template .template-button:hover { diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css index b7d1cee4d5b3..7417e98a1709 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css @@ -1,7 +1,7 @@ ::ng-deep #dropzone-external { width: 350px; height: 350px; - background-color: rgba(0,0,0,0.08); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(0,0,0,0.08)); border-width: 2px; border-style: dashed; padding: 10px; diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css index 122de3b12f6c..06c30fc45bc6 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css @@ -1,7 +1,7 @@ #dropzone-external { width: 350px; height: 350px; - background-color: rgba(0,0,0,0.08); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(0,0,0,0.08)); border-width: 2px; border-style: dashed; padding: 10px; diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css index 122de3b12f6c..06c30fc45bc6 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css @@ -1,7 +1,7 @@ #dropzone-external { width: 350px; height: 350px; - background-color: rgba(0,0,0,0.08); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(0,0,0,0.08)); border-width: 2px; border-style: dashed; padding: 10px; diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue index 5d3af78c07ae..174f768ad332 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue +++ b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue @@ -108,7 +108,7 @@ function onUploadStarted() { #dropzone-external { width: 350px; height: 350px; - background-color: rgba(0,0,0,0.08); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(0,0,0,0.08)); border-width: 2px; border-style: dashed; padding: 10px; diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css index 122de3b12f6c..06c30fc45bc6 100644 --- a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css +++ b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css @@ -1,7 +1,7 @@ #dropzone-external { width: 350px; height: 350px; - background-color: rgba(0,0,0,0.08); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(0,0,0,0.08)); border-width: 2px; border-style: dashed; padding: 10px; diff --git a/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css index 278ea5a0cd17..12aedb2f51e4 100644 --- a/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css +++ b/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css @@ -10,7 +10,7 @@ } ::ng-deep #fileuploader-container { - border: 1px solid #d3d3d3; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); margin: 20px 20px 0; } diff --git a/apps/demos/Demos/FileUploader/FileSelection/React/styles.css b/apps/demos/Demos/FileUploader/FileSelection/React/styles.css index 1fcad162704a..f2c4f22d399b 100644 --- a/apps/demos/Demos/FileUploader/FileSelection/React/styles.css +++ b/apps/demos/Demos/FileUploader/FileSelection/React/styles.css @@ -10,7 +10,7 @@ } .fileuploader-container { - border: 1px solid #d3d3d3; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); margin: 20px 20px 0; } diff --git a/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css b/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css index 1fcad162704a..f2c4f22d399b 100644 --- a/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css +++ b/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css @@ -10,7 +10,7 @@ } .fileuploader-container { - border: 1px solid #d3d3d3; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); margin: 20px 20px 0; } diff --git a/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue b/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue index bda11f5f2ea5..c96c6255b2c1 100644 --- a/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue +++ b/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue @@ -72,7 +72,7 @@ function onButtonClick() { } .fileuploader-container { - border: 1px solid #d3d3d3; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); margin: 20px 20px 0; } diff --git a/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css b/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css index 671d0d1e2e03..6478b541d9b5 100644 --- a/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css +++ b/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css @@ -10,7 +10,7 @@ } #fileuploader-container { - border: 1px solid #d3d3d3; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); margin: 20px 20px 0; } From 12f1afceade977867d80f4b0f481a7d9d886597b Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 16:35:02 +0300 Subject: [PATCH 09/23] Design System: use design tokens for hardcoded colors in Sortable and Toolbar demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in Sortable/Kanban (3 priority colors, #86c285 across both occurrences) and Toolbar/Adaptability (#999, #ddd across both occurrences, #fff). Fallback preserves the exact legacy value. #adadad and the rgba(...) boilerplate/shadow colors stay untouched (still unresolved by designers). --- .../Demos/Sortable/Kanban/Angular/app/app.component.css | 8 ++++---- apps/demos/Demos/Sortable/Kanban/React/styles.css | 8 ++++---- apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css | 8 ++++---- apps/demos/Demos/Sortable/Kanban/Vue/App.vue | 8 ++++---- apps/demos/Demos/Sortable/Kanban/jQuery/styles.css | 8 ++++---- .../Toolbar/Adaptability/Angular/app/app.component.css | 8 ++++---- apps/demos/Demos/Toolbar/Adaptability/React/styles.css | 8 ++++---- apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css | 8 ++++---- apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue | 8 ++++---- apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css | 8 ++++---- 10 files changed, 40 insertions(+), 40 deletions(-) diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css index 6a50599389a3..2a2918c14dc1 100644 --- a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css +++ b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css @@ -56,7 +56,7 @@ left: 5px; width: 5px; border-radius: 2px; - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-1 { @@ -64,15 +64,15 @@ } .priority-2 { - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-3 { - background: #edc578; + background: var(--dxds-color-surface-utility-yellow-default-rest, #edc578); } .priority-4 { - background: #ef7d59; + background: var(--dxds-color-surface-utility-red-default-rest, #ef7d59); } ::ng-deep .dx-sortable { diff --git a/apps/demos/Demos/Sortable/Kanban/React/styles.css b/apps/demos/Demos/Sortable/Kanban/React/styles.css index 1b69778ed9e7..b74dd7411e99 100644 --- a/apps/demos/Demos/Sortable/Kanban/React/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/React/styles.css @@ -56,7 +56,7 @@ left: 5px; width: 5px; border-radius: 2px; - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-1 { @@ -64,13 +64,13 @@ } .priority-2 { - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-3 { - background: #edc578; + background: var(--dxds-color-surface-utility-yellow-default-rest, #edc578); } .priority-4 { - background: #ef7d59; + background: var(--dxds-color-surface-utility-red-default-rest, #ef7d59); } diff --git a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css index 1b69778ed9e7..b74dd7411e99 100644 --- a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css @@ -56,7 +56,7 @@ left: 5px; width: 5px; border-radius: 2px; - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-1 { @@ -64,13 +64,13 @@ } .priority-2 { - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-3 { - background: #edc578; + background: var(--dxds-color-surface-utility-yellow-default-rest, #edc578); } .priority-4 { - background: #ef7d59; + background: var(--dxds-color-surface-utility-red-default-rest, #ef7d59); } diff --git a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue index ec6d5be55d9e..3ce62d15a812 100644 --- a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue +++ b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue @@ -137,7 +137,7 @@ function getPriorityClass(task: Task) { left: 5px; width: 5px; border-radius: 2px; - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-1 { @@ -145,15 +145,15 @@ function getPriorityClass(task: Task) { } .priority-2 { - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-3 { - background: #edc578; + background: var(--dxds-color-surface-utility-yellow-default-rest, #edc578); } .priority-4 { - background: #ef7d59; + background: var(--dxds-color-surface-utility-red-default-rest, #ef7d59); } .dx-sortable { diff --git a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css index 1b69778ed9e7..b74dd7411e99 100644 --- a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css +++ b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css @@ -56,7 +56,7 @@ left: 5px; width: 5px; border-radius: 2px; - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-1 { @@ -64,13 +64,13 @@ } .priority-2 { - background: #86c285; + background: var(--dxds-color-surface-utility-green-default-rest, #86c285); } .priority-3 { - background: #edc578; + background: var(--dxds-color-surface-utility-yellow-default-rest, #edc578); } .priority-4 { - background: #ef7d59; + background: var(--dxds-color-surface-utility-red-default-rest, #ef7d59); } diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css index 020f47e2dd24..7858819652f6 100644 --- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css +++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css @@ -9,7 +9,7 @@ height: 36px; border: none; border-radius: 50px; - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); } @@ -30,7 +30,7 @@ ::ng-deep .resizable-container { padding: 10px; height: 300px; - border: 1px dotted #999; + border: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); border-radius: 4px; box-sizing: border-box; } @@ -51,10 +51,10 @@ ::ng-deep .toolbar-separator { height: 36px; margin: 0 5px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } ::ng-deep .toolbar-menu-separator { height: 1px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/Toolbar/Adaptability/React/styles.css b/apps/demos/Demos/Toolbar/Adaptability/React/styles.css index 3675f14a1f5a..796111638973 100644 --- a/apps/demos/Demos/Toolbar/Adaptability/React/styles.css +++ b/apps/demos/Demos/Toolbar/Adaptability/React/styles.css @@ -5,7 +5,7 @@ height: 36px; border: none; border-radius: 50px; - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); } @@ -26,7 +26,7 @@ .resizable-container { padding: 10px; height: 300px; - border: 1px dotted #999; + border: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); border-radius: 4px; box-sizing: border-box; } @@ -47,10 +47,10 @@ .toolbar-separator { height: 36px; margin: 0 5px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } .toolbar-menu-separator { height: 1px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css index 3675f14a1f5a..796111638973 100644 --- a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css +++ b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css @@ -5,7 +5,7 @@ height: 36px; border: none; border-radius: 50px; - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); } @@ -26,7 +26,7 @@ .resizable-container { padding: 10px; height: 300px; - border: 1px dotted #999; + border: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); border-radius: 4px; box-sizing: border-box; } @@ -47,10 +47,10 @@ .toolbar-separator { height: 36px; margin: 0 5px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } .toolbar-menu-separator { height: 1px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue index d1060dcd1bea..8cc05bfaf13b 100644 --- a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue +++ b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue @@ -415,7 +415,7 @@ function onFontFamilyClick() { height: 36px; border: none; border-radius: 50px; - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); } @@ -436,7 +436,7 @@ function onFontFamilyClick() { .resizable-container { padding: 10px; height: 300px; - border: 1px dotted #999; + border: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); border-radius: 4px; box-sizing: border-box; } @@ -457,12 +457,12 @@ function onFontFamilyClick() { .toolbar-separator { height: 36px; margin: 0 5px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } .toolbar-menu-separator { height: 1px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } .dx-button-content { diff --git a/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css b/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css index 3675f14a1f5a..796111638973 100644 --- a/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css +++ b/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css @@ -5,7 +5,7 @@ height: 36px; border: none; border-radius: 50px; - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); } @@ -26,7 +26,7 @@ .resizable-container { padding: 10px; height: 300px; - border: 1px dotted #999; + border: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); border-radius: 4px; box-sizing: border-box; } @@ -47,10 +47,10 @@ .toolbar-separator { height: 36px; margin: 0 5px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } .toolbar-menu-separator { height: 1px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-subdued-rest, #ddd); } From 77228a2bbd9b2bff2916ca650714e83cb92e485a Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 16:48:41 +0300 Subject: [PATCH 10/23] Design System: use design tokens for hardcoded colors in RadioGroup, ProgressBar and Gauges demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in RadioGroup/Overview (gray/green/orange/red priority dots), ProgressBar/Overview (green complete state), and Gauges/Overview (#f05b41 across all 4 CSS occurrences, #fff). Fallback preserves the exact legacy value. The #f05b41 JS widget-config color (needle/scale, set via JS API rather than CSS) is out of scope and left untouched. --- .../Gauges/Overview/Angular/app/app.component.css | 10 +++++----- apps/demos/Demos/Gauges/Overview/React/styles.css | 10 +++++----- apps/demos/Demos/Gauges/Overview/ReactJs/styles.css | 10 +++++----- apps/demos/Demos/Gauges/Overview/Vue/styles.css | 10 +++++----- apps/demos/Demos/Gauges/Overview/jQuery/styles.css | 10 +++++----- .../ProgressBar/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/ProgressBar/Overview/React/styles.css | 2 +- .../Demos/ProgressBar/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/ProgressBar/Overview/Vue/App.vue | 2 +- .../demos/Demos/ProgressBar/Overview/jQuery/styles.css | 2 +- .../RadioGroup/Overview/Angular/app/app.component.css | 8 ++++---- apps/demos/Demos/RadioGroup/Overview/React/styles.css | 8 ++++---- .../demos/Demos/RadioGroup/Overview/ReactJs/styles.css | 8 ++++---- apps/demos/Demos/RadioGroup/Overview/Vue/styles.css | 8 ++++---- apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css | 8 ++++---- 15 files changed, 50 insertions(+), 50 deletions(-) diff --git a/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css b/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css index 743a4822825d..5e1aa94f8c26 100644 --- a/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css @@ -43,11 +43,11 @@ } ::ng-deep #slider .dx-slider-bar { - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); } ::ng-deep #slider .dx-slider-handle { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); width: 16px; height: 16px; margin-top: -8px; @@ -61,10 +61,10 @@ } ::ng-deep #slider .dx-slider-handle::after { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } ::ng-deep #slider .dx-slider-range.dx-slider-range-visible { - border-color: #f05b41; - background-color: #f05b41; + border-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } diff --git a/apps/demos/Demos/Gauges/Overview/React/styles.css b/apps/demos/Demos/Gauges/Overview/React/styles.css index fb2bf9e621d5..c5dd917e435c 100644 --- a/apps/demos/Demos/Gauges/Overview/React/styles.css +++ b/apps/demos/Demos/Gauges/Overview/React/styles.css @@ -43,11 +43,11 @@ } #slider .dx-slider-bar { - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); } #slider .dx-slider-handle { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); width: 16px; height: 16px; margin-top: -8px; @@ -61,10 +61,10 @@ } #slider .dx-slider-handle::after { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } #slider .dx-slider-range.dx-slider-range-visible { - border-color: #f05b41; - background-color: #f05b41; + border-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } diff --git a/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css b/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css index fb2bf9e621d5..c5dd917e435c 100644 --- a/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css @@ -43,11 +43,11 @@ } #slider .dx-slider-bar { - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); } #slider .dx-slider-handle { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); width: 16px; height: 16px; margin-top: -8px; @@ -61,10 +61,10 @@ } #slider .dx-slider-handle::after { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } #slider .dx-slider-range.dx-slider-range-visible { - border-color: #f05b41; - background-color: #f05b41; + border-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } diff --git a/apps/demos/Demos/Gauges/Overview/Vue/styles.css b/apps/demos/Demos/Gauges/Overview/Vue/styles.css index 284d2c5b034f..e81ae75479ee 100644 --- a/apps/demos/Demos/Gauges/Overview/Vue/styles.css +++ b/apps/demos/Demos/Gauges/Overview/Vue/styles.css @@ -43,11 +43,11 @@ } #slider .dx-slider-bar { - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); } #slider .dx-slider-handle { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); width: 16px; height: 16px; margin-top: -8px; @@ -61,10 +61,10 @@ } #slider .dx-slider-handle::after { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } #slider .dx-slider-range.dx-slider-range-visible { - border-color: #f05b41; - background-color: #f05b41; + border-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } diff --git a/apps/demos/Demos/Gauges/Overview/jQuery/styles.css b/apps/demos/Demos/Gauges/Overview/jQuery/styles.css index fb2bf9e621d5..c5dd917e435c 100644 --- a/apps/demos/Demos/Gauges/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Gauges/Overview/jQuery/styles.css @@ -43,11 +43,11 @@ } #slider .dx-slider-bar { - background-color: #fff; + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); } #slider .dx-slider-handle { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); width: 16px; height: 16px; margin-top: -8px; @@ -61,10 +61,10 @@ } #slider .dx-slider-handle::after { - background-color: #f05b41; + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } #slider .dx-slider-range.dx-slider-range-visible { - border-color: #f05b41; - background-color: #f05b41; + border-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); + background-color: var(--dxds-color-surface-utility-orange-default-rest, #f05b41); } diff --git a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css index 678e69ed92f0..b64e77781de1 100644 --- a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css @@ -13,5 +13,5 @@ } ::ng-deep .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/React/styles.css b/apps/demos/Demos/ProgressBar/Overview/React/styles.css index fc17d76af3e6..8535cc080f72 100644 --- a/apps/demos/Demos/ProgressBar/Overview/React/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/React/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css index fc17d76af3e6..8535cc080f72 100644 --- a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue index 19d63cf2fa9c..81cd988bd061 100644 --- a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue +++ b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue @@ -77,6 +77,6 @@ function timer() { } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css index 2365a7eb4108..a386c0b44f22 100644 --- a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css index 30e7015e37ff..a2e355fe2d1e 100644 --- a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css @@ -1,17 +1,17 @@ ::ng-deep .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } ::ng-deep .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } ::ng-deep .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } ::ng-deep .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } ::ng-deep #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/React/styles.css b/apps/demos/Demos/RadioGroup/Overview/React/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/React/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/React/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css index fcb2f4524e98..1e715328f131 100644 --- a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { From 68a27b8014bc2fa89d89ecb4612984fe2fa41f1b Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 17:03:58 +0300 Subject: [PATCH 11/23] Design System: use design tokens for hardcoded colors in Box, Calendar, LoadPanel and MultiView demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in Box/Overview, Calendar/Overview, LoadPanel/Overview (both border occurrences), MultiView/Overview (both border occurrences). Fallback preserves the exact legacy value. Note: Calendar/Overview's .weekend color rule is already overridden by higher-specificity theme CSS in both the legacy and new theme (pre-existing, unrelated to this change). --- apps/demos/Demos/Box/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Box/Overview/React/styles.css | 2 +- apps/demos/Demos/Box/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Box/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Box/Overview/jQuery/styles.css | 2 +- .../Demos/Calendar/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Calendar/Overview/React/styles.css | 2 +- apps/demos/Demos/Calendar/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Calendar/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Calendar/Overview/jQuery/styles.css | 2 +- .../Demos/LoadPanel/Overview/Angular/app/app.component.css | 4 ++-- apps/demos/Demos/LoadPanel/Overview/React/styles.css | 4 ++-- apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css | 4 ++-- apps/demos/Demos/LoadPanel/Overview/Vue/App.vue | 4 ++-- apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css | 4 ++-- .../Demos/MultiView/Overview/Angular/app/app.component.css | 4 ++-- apps/demos/Demos/MultiView/Overview/React/styles.css | 4 ++-- apps/demos/Demos/MultiView/Overview/ReactJs/styles.css | 4 ++-- apps/demos/Demos/MultiView/Overview/Vue/App.vue | 4 ++-- apps/demos/Demos/MultiView/Overview/jQuery/styles.css | 4 ++-- 20 files changed, 30 insertions(+), 30 deletions(-) diff --git a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/React/styles.css b/apps/demos/Demos/Box/Overview/React/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/React/styles.css +++ b/apps/demos/Demos/Box/Overview/React/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/ReactJs/styles.css b/apps/demos/Demos/Box/Overview/ReactJs/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Box/Overview/ReactJs/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/Vue/App.vue b/apps/demos/Demos/Box/Overview/Vue/App.vue index c4738f045779..2df5d3d991c3 100644 --- a/apps/demos/Demos/Box/Overview/Vue/App.vue +++ b/apps/demos/Demos/Box/Overview/Vue/App.vue @@ -167,7 +167,7 @@ import { DxBox, DxItem } from 'devextreme-vue/box'; .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/jQuery/styles.css b/apps/demos/Demos/Box/Overview/jQuery/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Box/Overview/jQuery/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css index 430b9b273c6d..51a17c39ebf3 100644 --- a/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css @@ -17,7 +17,7 @@ } ::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { - color: #3030ff; + color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff); } ::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { diff --git a/apps/demos/Demos/Calendar/Overview/React/styles.css b/apps/demos/Demos/Calendar/Overview/React/styles.css index ad61e3eb9936..b8daab5c3bbb 100644 --- a/apps/demos/Demos/Calendar/Overview/React/styles.css +++ b/apps/demos/Demos/Calendar/Overview/React/styles.css @@ -17,7 +17,7 @@ } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { - color: #3030ff; + color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css index ad61e3eb9936..b8daab5c3bbb 100644 --- a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css @@ -17,7 +17,7 @@ } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { - color: #3030ff; + color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { diff --git a/apps/demos/Demos/Calendar/Overview/Vue/App.vue b/apps/demos/Demos/Calendar/Overview/Vue/App.vue index a036f5de3c82..d73e7dab1f7e 100644 --- a/apps/demos/Demos/Calendar/Overview/Vue/App.vue +++ b/apps/demos/Demos/Calendar/Overview/Vue/App.vue @@ -152,7 +152,7 @@ function getCellCssClass({ date, view }: { date: Date, view: string }) { } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { - color: #3030ff; + color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { diff --git a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css index ad61e3eb9936..b8daab5c3bbb 100644 --- a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css @@ -17,7 +17,7 @@ } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { - color: #3030ff; + color: var(--dxds-color-content-utility-indigo-default-rest, #3030ff); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { diff --git a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css index 60ed6d539ae0..fd58f7dd3ab8 100644 --- a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css @@ -10,8 +10,8 @@ margin: 20px 0; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } #employee > p { diff --git a/apps/demos/Demos/LoadPanel/Overview/React/styles.css b/apps/demos/Demos/LoadPanel/Overview/React/styles.css index 60ed6d539ae0..fd58f7dd3ab8 100644 --- a/apps/demos/Demos/LoadPanel/Overview/React/styles.css +++ b/apps/demos/Demos/LoadPanel/Overview/React/styles.css @@ -10,8 +10,8 @@ margin: 20px 0; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } #employee > p { diff --git a/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css index 60ed6d539ae0..fd58f7dd3ab8 100644 --- a/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css @@ -10,8 +10,8 @@ margin: 20px 0; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } #employee > p { diff --git a/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue b/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue index cbdbea3efb3e..cd009db99cab 100644 --- a/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue +++ b/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue @@ -107,8 +107,8 @@ function onHidden() { margin: 20px 0; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } #employee > p { diff --git a/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css b/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css index 60ed6d539ae0..fd58f7dd3ab8 100644 --- a/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css +++ b/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css @@ -10,8 +10,8 @@ margin: 20px 0; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } #employee > p { diff --git a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css index 4445385b0ca9..13c5a61034dc 100644 --- a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css @@ -6,8 +6,8 @@ margin: 25px; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); padding: 20px 0 30px; } diff --git a/apps/demos/Demos/MultiView/Overview/React/styles.css b/apps/demos/Demos/MultiView/Overview/React/styles.css index d7204f9c1b91..2666b7a60aa0 100644 --- a/apps/demos/Demos/MultiView/Overview/React/styles.css +++ b/apps/demos/Demos/MultiView/Overview/React/styles.css @@ -5,8 +5,8 @@ .multiview-item { margin: 25px; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); padding: 20px 0 30px; } diff --git a/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css b/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css index d7204f9c1b91..2666b7a60aa0 100644 --- a/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css @@ -5,8 +5,8 @@ .multiview-item { margin: 25px; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); padding: 20px 0 30px; } diff --git a/apps/demos/Demos/MultiView/Overview/Vue/App.vue b/apps/demos/Demos/MultiView/Overview/Vue/App.vue index 0ca4bb256a9c..e779b2139929 100644 --- a/apps/demos/Demos/MultiView/Overview/Vue/App.vue +++ b/apps/demos/Demos/MultiView/Overview/Vue/App.vue @@ -82,8 +82,8 @@ const companies = multiViewItems; .multiview-item { margin: 25px; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); padding: 20px 0 30px; } diff --git a/apps/demos/Demos/MultiView/Overview/jQuery/styles.css b/apps/demos/Demos/MultiView/Overview/jQuery/styles.css index 876edfa071a8..5d513fcab6b1 100644 --- a/apps/demos/Demos/MultiView/Overview/jQuery/styles.css +++ b/apps/demos/Demos/MultiView/Overview/jQuery/styles.css @@ -6,8 +6,8 @@ margin: 25px; -webkit-touch-callout: none; user-select: none; - border-top: 1px solid lightgray; - border-bottom: 1px solid lightgray; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); padding: 20px 0 30px; } From 57e89d4c4d6b4c73b6583dc906566503025ec7a7 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 17:13:32 +0300 Subject: [PATCH 12/23] Design System: use design tokens for hardcoded colors in Chat/MessageStreaming demo (WG) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces hardcoded colors with var(--dxds-*, original) per the exact selector/property mapping from plan.md §2.2.1: chat-suggestion-card border/background (rest + hover), card title and prompt text colors. Fallback preserves the exact legacy value (uppercase hex, as in source). rgba(0, 0, 0, 0.02/0.04) box-shadow colors stay untouched (still unresolved by designers). --- .../MessageStreaming/Angular/app/app.component.css | 12 ++++++------ .../Demos/Chat/MessageStreaming/React/styles.css | 12 ++++++------ .../Demos/Chat/MessageStreaming/ReactJs/styles.css | 12 ++++++------ apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue | 12 ++++++------ .../Demos/Chat/MessageStreaming/jQuery/styles.css | 12 ++++++------ 5 files changed, 30 insertions(+), 30 deletions(-) diff --git a/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css b/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css index d3a89301022c..dd681d34f64a 100644 --- a/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css +++ b/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css @@ -56,8 +56,8 @@ ::ng-deep .chat-suggestion-card { border-radius: 12px; padding: 16px; - border: 1px solid #EBEBEB; - background: #FAFAFA; + border: 1px solid var(--dxds-color-border-neutral-deep-rest, #EBEBEB); + background: var(--dxds-color-surface-neutral-subdued-rest, #FAFAFA); display: flex; flex-direction: column; align-items: flex-start; @@ -71,20 +71,20 @@ } ::ng-deep .chat-suggestion-card:hover { - border: 1px solid #E0E0E0; - background: #F5F5F5; + border: 1px solid var(--dxds-color-border-neutral-subdued-rest, #E0E0E0); + background: var(--dxds-color-surface-neutral-deep-rest, #F5F5F5); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02); } ::ng-deep .chat-suggestion-card-title { - color: #242424; + color: var(--dxds-color-content-neutral-default-rest, #242424); font-size: 12px; font-weight: 600; line-height: 16px; } ::ng-deep .chat-suggestion-card-prompt { - color: #616161; + color: var(--dxds-color-content-neutral-subdued-rest, #616161); font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/apps/demos/Demos/Chat/MessageStreaming/React/styles.css b/apps/demos/Demos/Chat/MessageStreaming/React/styles.css index 7149e8fb31da..63c769a798a6 100644 --- a/apps/demos/Demos/Chat/MessageStreaming/React/styles.css +++ b/apps/demos/Demos/Chat/MessageStreaming/React/styles.css @@ -61,8 +61,8 @@ .chat-suggestion-card { border-radius: 12px; padding: 16px; - border: 1px solid #EBEBEB; - background: #FAFAFA; + border: 1px solid var(--dxds-color-border-neutral-deep-rest, #EBEBEB); + background: var(--dxds-color-surface-neutral-subdued-rest, #FAFAFA); display: flex; flex-direction: column; align-items: flex-start; @@ -76,20 +76,20 @@ } .chat-suggestion-card:hover { - border: 1px solid #E0E0E0; - background: #F5F5F5; + border: 1px solid var(--dxds-color-border-neutral-subdued-rest, #E0E0E0); + background: var(--dxds-color-surface-neutral-deep-rest, #F5F5F5); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02); } .chat-suggestion-card-title { - color: #242424; + color: var(--dxds-color-content-neutral-default-rest, #242424); font-size: 12px; font-weight: 600; line-height: 16px; } .chat-suggestion-card-prompt { - color: #616161; + color: var(--dxds-color-content-neutral-subdued-rest, #616161); font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css b/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css index 7149e8fb31da..63c769a798a6 100644 --- a/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css +++ b/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css @@ -61,8 +61,8 @@ .chat-suggestion-card { border-radius: 12px; padding: 16px; - border: 1px solid #EBEBEB; - background: #FAFAFA; + border: 1px solid var(--dxds-color-border-neutral-deep-rest, #EBEBEB); + background: var(--dxds-color-surface-neutral-subdued-rest, #FAFAFA); display: flex; flex-direction: column; align-items: flex-start; @@ -76,20 +76,20 @@ } .chat-suggestion-card:hover { - border: 1px solid #E0E0E0; - background: #F5F5F5; + border: 1px solid var(--dxds-color-border-neutral-subdued-rest, #E0E0E0); + background: var(--dxds-color-surface-neutral-deep-rest, #F5F5F5); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02); } .chat-suggestion-card-title { - color: #242424; + color: var(--dxds-color-content-neutral-default-rest, #242424); font-size: 12px; font-weight: 600; line-height: 16px; } .chat-suggestion-card-prompt { - color: #616161; + color: var(--dxds-color-content-neutral-subdued-rest, #616161); font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue b/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue index 40464a956557..cf4ce67ae862 100644 --- a/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue +++ b/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue @@ -254,8 +254,8 @@ function sendSuggestion(prompt: string): void { .chat-suggestion-card { border-radius: 12px; padding: 16px; - border: 1px solid #EBEBEB; - background: #FAFAFA; + border: 1px solid var(--dxds-color-border-neutral-deep-rest, #EBEBEB); + background: var(--dxds-color-surface-neutral-subdued-rest, #FAFAFA); display: flex; flex-direction: column; align-items: flex-start; @@ -269,20 +269,20 @@ function sendSuggestion(prompt: string): void { } .chat-suggestion-card:hover { - border: 1px solid #E0E0E0; - background: #F5F5F5; + border: 1px solid var(--dxds-color-border-neutral-subdued-rest, #E0E0E0); + background: var(--dxds-color-surface-neutral-deep-rest, #F5F5F5); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02); } .chat-suggestion-card-title { - color: #242424; + color: var(--dxds-color-content-neutral-default-rest, #242424); font-size: 12px; font-weight: 600; line-height: 16px; } .chat-suggestion-card-prompt { - color: #616161; + color: var(--dxds-color-content-neutral-subdued-rest, #616161); font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css b/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css index 8fd3e68dbc75..a9c5b470bbd2 100644 --- a/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css +++ b/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css @@ -61,8 +61,8 @@ .chat-suggestion-card { border-radius: 12px; padding: 16px; - border: 1px solid #EBEBEB; - background: #FAFAFA; + border: 1px solid var(--dxds-color-border-neutral-deep-rest, #EBEBEB); + background: var(--dxds-color-surface-neutral-subdued-rest, #FAFAFA); display: flex; flex-direction: column; align-items: flex-start; @@ -76,20 +76,20 @@ } .chat-suggestion-card:hover { - border: 1px solid #E0E0E0; - background: #F5F5F5; + border: 1px solid var(--dxds-color-border-neutral-subdued-rest, #E0E0E0); + background: var(--dxds-color-surface-neutral-deep-rest, #F5F5F5); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02); } .chat-suggestion-card-title { - color: #242424; + color: var(--dxds-color-content-neutral-default-rest, #242424); font-size: 12px; font-weight: 600; line-height: 16px; } .chat-suggestion-card-prompt { - color: #616161; + color: var(--dxds-color-content-neutral-subdued-rest, #616161); font-size: 12px; font-weight: 400; line-height: 16px; From 7fd3c8df7c44ec8563e57217f9db26e7eac02763 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 7 Aug 2026 17:19:31 +0300 Subject: [PATCH 13/23] Design System: use design tokens for hardcoded colors in ButtonGroup, Form and Pagination demos (WG) Replaces hardcoded colors with var(--dxds-*, original) in ButtonGroup/Overview (#ddd), Form/ItemCustomization (#42a5f5), Pagination/Overview (#fff). Fallback preserves the exact legacy value. Completes Phase A of the hardcoded-colors task (39 demos, 84 colors). --- .../Demos/ButtonGroup/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/ButtonGroup/Overview/React/styles.css | 2 +- apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue | 2 +- apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css | 2 +- .../Demos/Form/ItemCustomization/Angular/app/app.component.css | 2 +- apps/demos/Demos/Form/ItemCustomization/React/styles.css | 2 +- apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css | 2 +- .../Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue | 2 +- apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css | 2 +- .../Demos/Pagination/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Pagination/Overview/React/styles.css | 2 +- apps/demos/Demos/Pagination/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Pagination/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Pagination/Overview/jQuery/styles.css | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css index 88bd7d096d98..38a345addcc2 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css index 5b305c350e58..79c48db21920 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css index 5b305c350e58..79c48db21920 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue index bf8d7b92da5f..2ced29c9911f 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue +++ b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue @@ -63,6 +63,6 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) { .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css index 9043d25c5915..a4912d017a34 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css @@ -16,5 +16,5 @@ #multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css index 73a56738519f..773e7c0fd78b 100644 --- a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css +++ b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } ::ng-deep #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/React/styles.css b/apps/demos/Demos/Form/ItemCustomization/React/styles.css index d77a1059925e..9a36c6b7d1b3 100644 --- a/apps/demos/Demos/Form/ItemCustomization/React/styles.css +++ b/apps/demos/Demos/Form/ItemCustomization/React/styles.css @@ -1,5 +1,5 @@ #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css index d77a1059925e..9a36c6b7d1b3 100644 --- a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css +++ b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css @@ -1,5 +1,5 @@ #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue index 4f980c6eaf2a..1d6d13f767cd 100644 --- a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue +++ b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue @@ -30,7 +30,7 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css index 88181fa44e06..13a0761c4b69 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css @@ -12,7 +12,3 @@ padding-top: 20px; text-align: justify; } - -.dark #employeeInfo .employeeNotes { - color: rgb(181, 181, 181); -} diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css index bb465cfc1896..ac302242f4a0 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css @@ -17,7 +17,7 @@ ::ng-deep #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -30,7 +30,7 @@ ::ng-deep .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } ::ng-deep .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css index a4495a5e6e25..124d691a8235 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css index a4495a5e6e25..124d691a8235 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue index 9f0232ebe72b..579d766dc226 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue @@ -96,7 +96,7 @@ const toolbarContent = [{ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -109,7 +109,7 @@ const toolbarContent = [{ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css index a4495a5e6e25..124d691a8235 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css index f993cf9ad852..d62b8b855e8e 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css @@ -13,7 +13,7 @@ ::ng-deep #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ ::ng-deep .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } ::ng-deep .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css index 521c66dfcd01..793f26309270 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css index 521c66dfcd01..793f26309270 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue index c67eceb32b08..cdfbee6aedf9 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue @@ -96,7 +96,7 @@ const toolbarContent = [{ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -123,7 +123,7 @@ const toolbarContent = [{ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css index 521c66dfcd01..793f26309270 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .options-container { diff --git a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css index 2492378a54d2..dc23e5ecc801 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css +++ b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css @@ -7,7 +7,7 @@ ::ng-deep .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); position: relative; } @@ -30,7 +30,7 @@ ::ng-deep .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css index 6347cb029d7e..f31801557851 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css index 6347cb029d7e..f31801557851 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue index 6805c80acf25..206f9fd9cb70 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue +++ b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue @@ -60,7 +60,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); position: relative; } @@ -83,7 +83,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css index 6347cb029d7e..f31801557851 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css index 30f04a1ad4dd..a93651ab3a24 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css @@ -1,6 +1,6 @@ ::ng-deep .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css index df0174f4d4a9..97a64b2b1de7 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css @@ -1,6 +1,6 @@ .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css index df0174f4d4a9..97a64b2b1de7 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css @@ -1,6 +1,6 @@ .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue index 65c62b0a2c2b..fd86c6bd3560 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue @@ -38,7 +38,7 @@ function buttonClick() { diff --git a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue b/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue deleted file mode 100644 index b65e175e7ccf..000000000000 --- a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue +++ /dev/null @@ -1,15 +0,0 @@ - - diff --git a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css index ca581d399c69..2b012453ca34 100644 --- a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/React/styles.css b/apps/demos/Demos/Gantt/Appearance/React/styles.css index ca581d399c69..b9395711e94d 100644 --- a/apps/demos/Demos/Gantt/Appearance/React/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/React/styles.css @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css index ca581d399c69..b9395711e94d 100644 --- a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue index a5c6c3354246..8be3c879a0ee 100644 --- a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue +++ b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue @@ -211,22 +211,13 @@ function getTimeLeft(task: Task) { } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } - .custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - } - - .custom-task-edit-tooltip::after { - border-bottom-color: white; - } - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css index ca581d399c69..2b012453ca34 100644 --- a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dxds-color-surface-neutral-deep-rest, rgba(191, 191, 191, 0.15)); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css index 5978db5c3683..4309cf3f7244 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css @@ -27,7 +27,7 @@ } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-surface-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css index 5978db5c3683..4309cf3f7244 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css @@ -27,7 +27,7 @@ } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-surface-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css index 5978db5c3683..4309cf3f7244 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css @@ -27,7 +27,7 @@ } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-surface-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue index 0cda59d27791..263498280b9c 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue +++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue @@ -107,7 +107,7 @@ function getImagePath(taskId: number) { } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-surface-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -157,7 +157,7 @@ function getImagePath(taskId: number) { bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css index 5978db5c3683..4309cf3f7244 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css @@ -27,7 +27,7 @@ } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-surface-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css index bdf942fafa41..60a4cc57c3e3 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css @@ -4,5 +4,5 @@ } ::ng-deep .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue index 82bdcc4990c8..fab35a3aa19d 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue @@ -100,6 +100,6 @@ import { } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css index 8394711c458b..26bdcecc65a8 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.05) * 100%), transparent); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } ::ng-deep .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css index f87be5e72cf5..6f3ab699ba81 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css @@ -1,5 +1,5 @@ #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.05) * 100%), transparent); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css index f87be5e72cf5..6f3ab699ba81 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css @@ -1,5 +1,5 @@ #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.05) * 100%), transparent); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue index 0bd1e9b00649..5684ee4e1ee8 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue +++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue @@ -102,7 +102,7 @@ const mentions = ref([{ diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css index 41fb881541dd..6a70278c80f3 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css @@ -2,10 +2,13 @@ text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + +.dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); +} diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css index ae46df1fcb67..eb5f63781db2 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css @@ -25,5 +25,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue index 36897e2e2d7d..8a791e85ec64 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue @@ -110,6 +110,6 @@ function onItemDragEnd(e: DxDraggableTypes.DragEndEvent) { } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css index b3967d051eab..09715a0d022d 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css @@ -16,11 +16,11 @@ ::ng-deep .dx-color-scheme-orange-light, ::ng-deep .dx-color-scheme-purple-light, ::ng-deep .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: var(--dxds-color-surface-utility-green-default-rest, rgba(50, 134, 56, 1)); - --background-color-2: var(--dxds-color-surface-utility-orange-default-rest, rgba(194, 81, 0, 1)); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } ::ng-deep .dx-color-scheme-dark, @@ -32,12 +32,11 @@ ::ng-deep .dx-color-scheme-orange-dark, ::ng-deep .dx-color-scheme-purple-dark, ::ng-deep .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: var(--dxds-color-surface-utility-orange-default-rest, rgba(159, 213, 161, 1)); - --background-color-2: var(--dxds-color-surface-utility-green-default-rest, rgba(255, 181, 127, 1)); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } ::ng-deep .dx-scheduler-header .dx-toolbar .dx-button, @@ -71,15 +70,15 @@ padding-right: 6px; } -::ng-deep .avatar { +::ng-deep .avatar { width: 124px; float: left; overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } ::ng-deep .avatar img { @@ -128,7 +127,7 @@ } ::ng-deep .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } ::ng-deep .day-cell { @@ -143,19 +142,19 @@ } ::ng-deep .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } ::ng-deep .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } ::ng-deep .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } ::ng-deep .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } ::ng-deep .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts index 6a0b62221343..3bbcd2c40b26 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts @@ -27,14 +27,14 @@ export class Data { const employees: Employee[] = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts index 569113fd0a45..a35dd96e9085 100644 --- a/apps/demos/Demos/Scheduler/Overview/React/data.ts +++ b/apps/demos/Demos/Scheduler/Overview/React/data.ts @@ -82,14 +82,14 @@ export const data: Appointment[] = [ export const employees: Resource[] = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css index 39cc285ff231..57b4c2ee9457 100644 --- a/apps/demos/Demos/Scheduler/Overview/React/styles.css +++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css @@ -16,11 +16,11 @@ .dx-color-scheme-orange-light, .dx-color-scheme-purple-light, .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: var(--dxds-color-surface-utility-green-default-rest, rgba(50, 134, 56, 1)); - --background-color-2: var(--dxds-color-surface-utility-orange-default-rest, rgba(194, 81, 0, 1)); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } .dx-color-scheme-dark, @@ -32,12 +32,11 @@ .dx-color-scheme-orange-dark, .dx-color-scheme-purple-dark, .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: var(--dxds-color-surface-utility-orange-default-rest, rgba(159, 213, 161, 1)); - --background-color-2: var(--dxds-color-surface-utility-green-default-rest, rgba(255, 181, 127, 1)); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } .dx-scheduler-header .dx-toolbar .dx-button, @@ -77,9 +76,9 @@ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -124,11 +123,10 @@ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .day-cell { @@ -138,24 +136,20 @@ background-repeat: no-repeat; } -.dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); -} - .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js index 2ae3c1170144..d5d49d6ebdee 100644 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js @@ -82,7 +82,7 @@ export const employees = [ { text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', @@ -90,7 +90,7 @@ export const employees = [ { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css index 39cc285ff231..57b4c2ee9457 100644 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css @@ -16,11 +16,11 @@ .dx-color-scheme-orange-light, .dx-color-scheme-purple-light, .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: var(--dxds-color-surface-utility-green-default-rest, rgba(50, 134, 56, 1)); - --background-color-2: var(--dxds-color-surface-utility-orange-default-rest, rgba(194, 81, 0, 1)); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } .dx-color-scheme-dark, @@ -32,12 +32,11 @@ .dx-color-scheme-orange-dark, .dx-color-scheme-purple-dark, .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: var(--dxds-color-surface-utility-orange-default-rest, rgba(159, 213, 161, 1)); - --background-color-2: var(--dxds-color-surface-utility-green-default-rest, rgba(255, 181, 127, 1)); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } .dx-scheduler-header .dx-toolbar .dx-button, @@ -77,9 +76,9 @@ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -124,11 +123,10 @@ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .day-cell { @@ -138,24 +136,20 @@ background-repeat: no-repeat; } -.dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); -} - .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue index e3f4a252671c..0496214cda33 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue @@ -65,11 +65,11 @@ const dataSource = data; .dx-color-scheme-orange-light, .dx-color-scheme-purple-light, .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: var(--dxds-color-surface-utility-green-default-rest, rgba(50, 134, 56, 1)); - --background-color-2: var(--dxds-color-surface-utility-orange-default-rest, rgba(194, 81, 0, 1)); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } .dx-color-scheme-dark, @@ -81,12 +81,11 @@ const dataSource = data; .dx-color-scheme-orange-dark, .dx-color-scheme-purple-dark, .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: var(--dxds-color-surface-utility-orange-default-rest, rgba(159, 213, 161, 1)); - --background-color-2: var(--dxds-color-surface-utility-green-default-rest, rgba(255, 181, 127, 1)); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } .dx-scheduler-header .dx-toolbar .dx-button, @@ -121,7 +120,7 @@ const dataSource = data; } .dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue index b4fbc0066c8a..d200def588ef 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue @@ -50,23 +50,23 @@ function getCurrentTraining(date: number, employeeID: number) { } .dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue index d9e48370aa50..827888c8646e 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue @@ -39,9 +39,9 @@ withDefaults(defineProps<{ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -86,10 +86,9 @@ withDefaults(defineProps<{ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts index a4c5b52fa50b..a638e51408cf 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts +++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts @@ -1,14 +1,14 @@ export const employees = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js index d753b921c9d5..38383e561616 100644 --- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js +++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js @@ -1,14 +1,14 @@ const employees = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css index 39cc285ff231..57b4c2ee9457 100644 --- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css @@ -16,11 +16,11 @@ .dx-color-scheme-orange-light, .dx-color-scheme-purple-light, .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: var(--dxds-color-surface-utility-green-default-rest, rgba(50, 134, 56, 1)); - --background-color-2: var(--dxds-color-surface-utility-orange-default-rest, rgba(194, 81, 0, 1)); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } .dx-color-scheme-dark, @@ -32,12 +32,11 @@ .dx-color-scheme-orange-dark, .dx-color-scheme-purple-dark, .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: var(--dxds-color-surface-utility-orange-default-rest, rgba(159, 213, 161, 1)); - --background-color-2: var(--dxds-color-surface-utility-green-default-rest, rgba(255, 181, 127, 1)); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } .dx-scheduler-header .dx-toolbar .dx-button, @@ -77,9 +76,9 @@ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -124,11 +123,10 @@ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .day-cell { @@ -138,24 +136,20 @@ background-repeat: no-repeat; } -.dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); -} - .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css index e94ccc57283b..e8d17f0ff653 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { @@ -20,8 +20,8 @@ } ::ng-deep .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css index 52890693b7f4..1788102a7128 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css @@ -1,5 +1,5 @@ .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { @@ -20,8 +20,8 @@ } .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css index 52890693b7f4..1788102a7128 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css @@ -1,5 +1,5 @@ .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { @@ -20,8 +20,8 @@ } .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue index 260dc02e5e76..456a7753c952 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue @@ -271,7 +271,7 @@ const onOverlappingRuleChanged = (e: DxSelectBoxTypes.ValueChangedEvent) => { diff --git a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css index b5813c6b2244..f1f36c7fee8c 100644 --- a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css @@ -41,7 +41,7 @@ flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.05) * 100%), transparent); } .caption { @@ -66,10 +66,10 @@ } .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-block-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css index 01e5b0b3bd12..b60adca44fc8 100644 --- a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css +++ b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } ::ng-deep .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/React/styles.css b/apps/demos/Demos/TagBox/Grouping/React/styles.css index f997c92f251f..108b01458bb9 100644 --- a/apps/demos/Demos/TagBox/Grouping/React/styles.css +++ b/apps/demos/Demos/TagBox/Grouping/React/styles.css @@ -1,5 +1,5 @@ .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css index f997c92f251f..108b01458bb9 100644 --- a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css +++ b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css @@ -1,5 +1,5 @@ .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue index dfb2ee0cce13..ed3d59cddeb6 100644 --- a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue +++ b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue @@ -13,7 +13,7 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css index ae902455272f..90b868955ad7 100644 --- a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css +++ b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css @@ -18,6 +18,6 @@ object-fit: contain; margin-right: 10px; border-radius: 25px; - border: 1px solid lightgray; - background-color: #fff; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css index 97b7fecad98c..838cdebd4261 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue index d76877e5223c..c2fcfb559ed1 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue @@ -240,7 +240,7 @@ function getTopVisibleNode(component: DxSortableInstance) { padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css index 97b7fecad98c..838cdebd4261 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue index ca750ebcae7c..95da607c674b 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue @@ -247,7 +247,7 @@ function getTopVisibleNode(component: DxSortableInstance) { padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css index dc87c3307911..871172628a77 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css @@ -26,10 +26,6 @@ font-size: 24px; } -::ng-deep .dark #product-details > div { - color: #f0f0f0; -} - ::ng-deep .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue index 2b59e7b60940..d28f85ccf584 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue @@ -67,10 +67,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) { font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css index dc87c3307911..871172628a77 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css @@ -26,10 +26,6 @@ font-size: 24px; } -::ng-deep .dark #product-details > div { - color: #f0f0f0; -} - ::ng-deep .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue index dae822a30afa..86ab29b8ec7b 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue @@ -61,10 +61,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) { font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } From 2f56ef72c83b319854e9b9b58ac51023ab43b331 Mon Sep 17 00:00:00 2001 From: Andrei Kharitonov Date: Tue, 11 Aug 2026 17:08:40 +0200 Subject: [PATCH 15/23] fixes --- .../HiddenDays/Angular/app/app.component.css | 12 ++++++++---- .../Demos/Scheduler/HiddenDays/React/styles.css | 12 ++++++++---- .../Demos/Scheduler/HiddenDays/ReactJs/styles.css | 12 ++++++++---- apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css | 12 ++++++++---- .../Demos/Scheduler/HiddenDays/jQuery/styles.css | 12 ++++++++---- .../Scheduler/Overview/Angular/app/app.component.css | 3 +-- 6 files changed, 41 insertions(+), 22 deletions(-) diff --git a/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css index 95736308e283..7366be05fbb2 100644 --- a/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css @@ -33,10 +33,10 @@ display: none; margin-top: 8px; padding: 10px 12px; - background: #fdf3f4; - border-left: 3px solid #c50f1f; + background: var(--dxds-color-surface-danger-deep-rest, #fdf3f4); + border-left: 3px solid var(--dxds-color-surface-danger-default-rest, #c50f1f); border-radius: 4px; - color: #c50f1f; + color: var(--dxds-color-content-danger-default-rest, #c50f1f); font-size: 13px; line-height: 1.4; } @@ -46,7 +46,11 @@ } ::ng-deep .hidden-days-demo.is-invalid .option .dx-checkbox-icon { - border-color: #c50f1f; + border-color: var(--dxds-color-border-danger-compound-rest, #c50f1f); +} + +::ng-deep .hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover { + border-color: var(--dxds-color-border-danger-compound-hovered, #c50f1f); } ::ng-deep .hidden-days-demo.is-invalid .dx-scheduler-work-space { diff --git a/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css index 82a48bdf0b98..b12ce3fa288e 100644 --- a/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css +++ b/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css @@ -33,10 +33,10 @@ display: none; margin-top: 8px; padding: 10px 12px; - background: #fdf3f4; - border-left: 3px solid #c50f1f; + background: var(--dxds-color-surface-danger-deep-rest, #fdf3f4); + border-left: 3px solid var(--dxds-color-surface-danger-default-rest, #c50f1f); border-radius: 4px; - color: #c50f1f; + color: var(--dxds-color-content-danger-default-rest, #c50f1f); font-size: 13px; line-height: 1.4; } @@ -46,7 +46,11 @@ } .hidden-days-demo.is-invalid .option .dx-checkbox-icon { - border-color: #c50f1f; + border-color: var(--dxds-color-border-danger-compound-rest, #c50f1f); +} + +.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover { + border-color: var(--dxds-color-border-danger-compound-hovered, #c50f1f); } .hidden-days-demo.is-invalid .dx-scheduler-work-space { diff --git a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css index 82a48bdf0b98..b12ce3fa288e 100644 --- a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css @@ -33,10 +33,10 @@ display: none; margin-top: 8px; padding: 10px 12px; - background: #fdf3f4; - border-left: 3px solid #c50f1f; + background: var(--dxds-color-surface-danger-deep-rest, #fdf3f4); + border-left: 3px solid var(--dxds-color-surface-danger-default-rest, #c50f1f); border-radius: 4px; - color: #c50f1f; + color: var(--dxds-color-content-danger-default-rest, #c50f1f); font-size: 13px; line-height: 1.4; } @@ -46,7 +46,11 @@ } .hidden-days-demo.is-invalid .option .dx-checkbox-icon { - border-color: #c50f1f; + border-color: var(--dxds-color-border-danger-compound-rest, #c50f1f); +} + +.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover { + border-color: var(--dxds-color-border-danger-compound-hovered, #c50f1f); } .hidden-days-demo.is-invalid .dx-scheduler-work-space { diff --git a/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css index 82a48bdf0b98..b12ce3fa288e 100644 --- a/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css +++ b/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css @@ -33,10 +33,10 @@ display: none; margin-top: 8px; padding: 10px 12px; - background: #fdf3f4; - border-left: 3px solid #c50f1f; + background: var(--dxds-color-surface-danger-deep-rest, #fdf3f4); + border-left: 3px solid var(--dxds-color-surface-danger-default-rest, #c50f1f); border-radius: 4px; - color: #c50f1f; + color: var(--dxds-color-content-danger-default-rest, #c50f1f); font-size: 13px; line-height: 1.4; } @@ -46,7 +46,11 @@ } .hidden-days-demo.is-invalid .option .dx-checkbox-icon { - border-color: #c50f1f; + border-color: var(--dxds-color-border-danger-compound-rest, #c50f1f); +} + +.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover { + border-color: var(--dxds-color-border-danger-compound-hovered, #c50f1f); } .hidden-days-demo.is-invalid .dx-scheduler-work-space { diff --git a/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css index 82a48bdf0b98..b12ce3fa288e 100644 --- a/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css @@ -33,10 +33,10 @@ display: none; margin-top: 8px; padding: 10px 12px; - background: #fdf3f4; - border-left: 3px solid #c50f1f; + background: var(--dxds-color-surface-danger-deep-rest, #fdf3f4); + border-left: 3px solid var(--dxds-color-surface-danger-default-rest, #c50f1f); border-radius: 4px; - color: #c50f1f; + color: var(--dxds-color-content-danger-default-rest, #c50f1f); font-size: 13px; line-height: 1.4; } @@ -46,7 +46,11 @@ } .hidden-days-demo.is-invalid .option .dx-checkbox-icon { - border-color: #c50f1f; + border-color: var(--dxds-color-border-danger-compound-rest, #c50f1f); +} + +.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover { + border-color: var(--dxds-color-border-danger-compound-hovered, #c50f1f); } .hidden-days-demo.is-invalid .dx-scheduler-work-space { diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css index 09715a0d022d..14b1a530cf2c 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css @@ -123,7 +123,6 @@ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } ::ng-deep .dx-color-scheme-contrast .info { @@ -138,7 +137,7 @@ } ::ng-deep .dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } ::ng-deep .employee-1 { From d946d346c815a20179d12863838a9fcfe4979962 Mon Sep 17 00:00:00 2001 From: Andrei Kharitonov Date: Tue, 11 Aug 2026 17:27:10 +0200 Subject: [PATCH 16/23] fix panels colors --- .../Demos/Accordion/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Accordion/Overview/React/styles.css | 2 +- apps/demos/Demos/Accordion/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Accordion/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Accordion/Overview/jQuery/styles.css | 2 +- .../Demos/ActionSheet/Basics/Angular/app/app.component.css | 2 +- apps/demos/Demos/ActionSheet/Basics/React/styles.css | 2 +- apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css | 2 +- apps/demos/Demos/ActionSheet/Basics/Vue/styles.css | 2 +- apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css | 2 +- .../Calendar/MultipleSelection/Angular/app/app.component.css | 2 +- apps/demos/Demos/Calendar/MultipleSelection/React/styles.css | 2 +- .../demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css | 2 +- apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue | 2 +- apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css | 2 +- .../CardView/ColumnChooser/Angular/app/app.component.css | 2 +- apps/demos/Demos/CardView/ColumnChooser/React/styles.css | 2 +- apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css | 2 +- apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue | 2 +- apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css | 2 +- .../Demos/CardView/Selection/Angular/app/app.component.css | 2 +- apps/demos/Demos/CardView/Selection/React/styles.css | 2 +- apps/demos/Demos/CardView/Selection/ReactJs/styles.css | 2 +- apps/demos/Demos/CardView/Selection/Vue/App.vue | 2 +- apps/demos/Demos/CardView/Selection/jQuery/styles.css | 2 +- apps/demos/Demos/Charts/Area/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/Area/React/styles.css | 2 +- apps/demos/Demos/Charts/Area/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/Area/Vue/App.vue | 2 +- apps/demos/Demos/Charts/Area/jQuery/styles.css | 2 +- .../Charts/AxisCustomPosition/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/AxisCustomPosition/React/styles.css | 2 +- apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/AxisCustomPosition/Vue/App.vue | 2 +- apps/demos/Demos/Charts/AxisCustomPosition/jQuery/styles.css | 2 +- .../Demos/Charts/Colorization/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/Colorization/React/styles.css | 2 +- apps/demos/Demos/Charts/Colorization/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/Colorization/Vue/App.vue | 2 +- apps/demos/Demos/Charts/Colorization/jQuery/styles.css | 2 +- .../Charts/CustomAnnotations/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/CustomAnnotations/React/styles.css | 2 +- apps/demos/Demos/Charts/CustomAnnotations/ReactJs/styles.css | 2 +- .../Demos/Charts/CustomAnnotations/Vue/AnnotationTemplate.vue | 2 +- apps/demos/Demos/Charts/CustomAnnotations/jQuery/styles.css | 2 +- apps/demos/Demos/Charts/Line/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/Line/React/styles.css | 2 +- apps/demos/Demos/Charts/Line/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/Line/Vue/App.vue | 2 +- apps/demos/Demos/Charts/Line/jQuery/styles.css | 2 +- apps/demos/Demos/Charts/Palette/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/Palette/React/styles.css | 2 +- apps/demos/Demos/Charts/Palette/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/Palette/Vue/App.vue | 2 +- apps/demos/Demos/Charts/Palette/jQuery/styles.css | 2 +- .../PieResolveLabelOverlap/Angular/app/app.component.css | 2 +- .../Demos/Charts/PieResolveLabelOverlap/React/styles.css | 2 +- .../Demos/Charts/PieResolveLabelOverlap/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/PieResolveLabelOverlap/Vue/App.vue | 2 +- .../Demos/Charts/PieResolveLabelOverlap/jQuery/styles.css | 2 +- .../Charts/PointsAggregation/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/PointsAggregation/React/styles.css | 2 +- apps/demos/Demos/Charts/PointsAggregation/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/PointsAggregation/Vue/App.vue | 2 +- apps/demos/Demos/Charts/PointsAggregation/jQuery/styles.css | 2 +- .../Charts/ResolveLabelOverlap/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/ResolveLabelOverlap/React/styles.css | 2 +- .../demos/Demos/Charts/ResolveLabelOverlap/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/ResolveLabelOverlap/Vue/App.vue | 2 +- apps/demos/Demos/Charts/ResolveLabelOverlap/jQuery/styles.css | 2 +- .../Demos/Charts/ScaleBreaks/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/ScaleBreaks/React/styles.css | 2 +- apps/demos/Demos/Charts/ScaleBreaks/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/ScaleBreaks/Vue/App.vue | 2 +- apps/demos/Demos/Charts/ScaleBreaks/jQuery/styles.css | 2 +- apps/demos/Demos/Charts/Spline/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/Spline/React/styles.css | 2 +- apps/demos/Demos/Charts/Spline/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/Spline/Vue/App.vue | 2 +- apps/demos/Demos/Charts/Spline/jQuery/styles.css | 2 +- .../Demos/Charts/SplineArea/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/SplineArea/React/styles.css | 2 +- apps/demos/Demos/Charts/SplineArea/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/SplineArea/Vue/App.vue | 2 +- apps/demos/Demos/Charts/SplineArea/jQuery/styles.css | 2 +- .../Charts/TilingAlgorithms/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/TilingAlgorithms/React/styles.css | 2 +- apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/styles.css | 2 +- apps/demos/Demos/Charts/TilingAlgorithms/Vue/App.vue | 2 +- apps/demos/Demos/Charts/TilingAlgorithms/jQuery/styles.css | 2 +- .../Charts/TooltipCustomization/Angular/app/app.component.css | 2 +- apps/demos/Demos/Charts/TooltipCustomization/React/styles.css | 2 +- .../Demos/Charts/TooltipCustomization/ReactJs/styles.css | 2 +- .../Demos/Charts/TooltipCustomization/Vue/TooltipTemplate.vue | 2 +- .../demos/Demos/Charts/TooltipCustomization/jQuery/styles.css | 2 +- .../Demos/Chat/Customization/Angular/app/app.component.css | 2 +- apps/demos/Demos/Chat/Customization/React/styles.css | 2 +- apps/demos/Demos/Chat/Customization/ReactJs/styles.css | 2 +- apps/demos/Demos/Chat/Customization/Vue/App.vue | 2 +- apps/demos/Demos/Chat/Customization/jQuery/styles.css | 2 +- .../Demos/Chat/MessageEditing/Angular/app/app.component.css | 2 +- apps/demos/Demos/Chat/MessageEditing/React/styles.css | 2 +- apps/demos/Demos/Chat/MessageEditing/ReactJs/styles.css | 2 +- apps/demos/Demos/Chat/MessageEditing/Vue/App.vue | 2 +- apps/demos/Demos/Chat/MessageEditing/jQuery/styles.css | 2 +- .../Chat/PromptSuggestions/Angular/app/app.component.css | 2 +- apps/demos/Demos/Chat/PromptSuggestions/React/styles.css | 2 +- apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css | 2 +- apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue | 2 +- apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css | 2 +- .../EditorAppearanceVariants/Angular/app/app.component.css | 2 +- .../Demos/Common/EditorAppearanceVariants/React/styles.css | 2 +- .../Demos/Common/EditorAppearanceVariants/ReactJs/styles.css | 2 +- apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue | 2 +- .../Demos/Common/EditorAppearanceVariants/jQuery/styles.css | 2 +- .../Common/EditorsOverview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Common/EditorsOverview/React/styles.css | 2 +- apps/demos/Demos/Common/EditorsOverview/ReactJs/styles.css | 2 +- apps/demos/Demos/Common/EditorsOverview/Vue/App.vue | 2 +- apps/demos/Demos/Common/EditorsOverview/jQuery/styles.css | 2 +- .../EditorsRightToLeftSupport/Angular/app/app.component.css | 2 +- .../Demos/Common/EditorsRightToLeftSupport/React/styles.css | 2 +- .../Demos/Common/EditorsRightToLeftSupport/ReactJs/styles.css | 2 +- apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue | 2 +- .../Demos/Common/EditorsRightToLeftSupport/jQuery/styles.css | 2 +- .../Demos/Common/ListsOverview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Common/ListsOverview/React/styles.css | 2 +- apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css | 2 +- apps/demos/Demos/Common/ListsOverview/Vue/styles.css | 2 +- apps/demos/Demos/Common/ListsOverview/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 2 +- .../Common/NavigationRightToLeftSupport/React/styles.css | 2 +- .../Common/NavigationRightToLeftSupport/ReactJs/styles.css | 2 +- .../Demos/Common/NavigationRightToLeftSupport/Vue/App.vue | 2 +- .../Common/NavigationRightToLeftSupport/jQuery/styles.css | 2 +- .../Demos/DataGrid/Appearance/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/Appearance/React/styles.css | 2 +- apps/demos/Demos/DataGrid/Appearance/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/Appearance/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/Appearance/jQuery/styles.css | 2 +- .../DataGrid/ColumnChooser/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/ColumnChooser/React/styles.css | 2 +- apps/demos/Demos/DataGrid/ColumnChooser/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/ColumnChooser/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/ColumnChooser/jQuery/styles.css | 2 +- .../DataGrid/ColumnResizing/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/ColumnResizing/React/styles.css | 2 +- apps/demos/Demos/DataGrid/ColumnResizing/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/ColumnResizing/jQuery/styles.css | 2 +- .../CustomizeKeyboardNavigation/Angular/app/app.component.css | 2 +- .../DataGrid/CustomizeKeyboardNavigation/React/styles.css | 2 +- .../DataGrid/CustomizeKeyboardNavigation/ReactJs/styles.css | 2 +- .../Demos/DataGrid/CustomizeKeyboardNavigation/Vue/styles.css | 2 +- .../DataGrid/CustomizeKeyboardNavigation/jQuery/styles.css | 2 +- .../EditStateManagement/Angular/app/app.component.css | 2 +- .../demos/Demos/DataGrid/EditStateManagement/React/styles.css | 2 +- .../Demos/DataGrid/EditStateManagement/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue | 2 +- .../Demos/DataGrid/EditStateManagement/jQuery/styles.css | 2 +- .../Demos/DataGrid/Filtering/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/Filtering/React/styles.css | 2 +- apps/demos/Demos/DataGrid/Filtering/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/Filtering/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/Filtering/jQuery/styles.css | 2 +- .../DataGrid/LocalReordering/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/LocalReordering/React/styles.css | 2 +- apps/demos/Demos/DataGrid/LocalReordering/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/LocalReordering/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/LocalReordering/jQuery/styles.css | 2 +- .../MultipleRecordSelectionAPI/Angular/app/app.component.css | 2 +- .../DataGrid/MultipleRecordSelectionAPI/React/styles.css | 2 +- .../DataGrid/MultipleRecordSelectionAPI/ReactJs/styles.css | 2 +- .../Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue | 2 +- .../DataGrid/MultipleRecordSelectionAPI/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 2 +- .../DataGrid/MultipleRecordSelectionModes/React/styles.css | 2 +- .../DataGrid/MultipleRecordSelectionModes/ReactJs/styles.css | 2 +- .../Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue | 2 +- .../DataGrid/MultipleRecordSelectionModes/jQuery/styles.css | 2 +- .../DataGrid/MultipleSorting/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/MultipleSorting/React/styles.css | 2 +- apps/demos/Demos/DataGrid/MultipleSorting/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/MultipleSorting/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/MultipleSorting/jQuery/styles.css | 2 +- .../DataGrid/NewRecordPosition/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/NewRecordPosition/React/styles.css | 2 +- .../demos/Demos/DataGrid/NewRecordPosition/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/NewRecordPosition/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/NewRecordPosition/jQuery/styles.css | 2 +- .../DataGrid/RealTimeUpdates/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/RealTimeUpdates/React/styles.css | 2 +- apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/RealTimeUpdates/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/RealTimeUpdates/jQuery/styles.css | 2 +- .../DataGrid/RecordGrouping/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/RecordGrouping/React/styles.css | 2 +- apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue | 2 +- apps/demos/Demos/DataGrid/RecordGrouping/jQuery/styles.css | 2 +- .../Demos/DataGrid/RecordPaging/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/RecordPaging/React/styles.css | 2 +- apps/demos/Demos/DataGrid/RecordPaging/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/RecordPaging/Vue/styles.css | 2 +- apps/demos/Demos/DataGrid/RecordPaging/jQuery/styles.css | 2 +- .../RemoteCRUDOperations/Angular/app/app.component.css | 2 +- .../Demos/DataGrid/RemoteCRUDOperations/React/styles.css | 2 +- .../Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue | 2 +- .../Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css | 2 +- .../DataGrid/RightToLeftSupport/Angular/app/app.component.css | 2 +- apps/demos/Demos/DataGrid/RightToLeftSupport/React/styles.css | 2 +- .../Demos/DataGrid/RightToLeftSupport/ReactJs/styles.css | 2 +- apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue | 2 +- .../demos/Demos/DataGrid/RightToLeftSupport/jQuery/styles.css | 2 +- .../Demos/Diagram/ItemSelection/Angular/app/app.component.css | 2 +- apps/demos/Demos/Diagram/ItemSelection/React/styles.css | 2 +- apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css | 2 +- apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue | 2 +- apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css | 2 +- .../FileUploader/ChunkUpload/Angular/app/app.component.css | 2 +- apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css | 2 +- apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css | 2 +- apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue | 2 +- apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css | 2 +- .../FileUploader/FileUploading/Angular/app/app.component.css | 2 +- apps/demos/Demos/FileUploader/FileUploading/React/styles.css | 2 +- .../demos/Demos/FileUploader/FileUploading/ReactJs/styles.css | 2 +- apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue | 2 +- apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css | 2 +- .../Overview/Angular/app/app.component.css | 2 +- .../Demos/FloatingActionButton/Overview/React/styles.css | 2 +- .../Demos/FloatingActionButton/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/FloatingActionButton/Overview/Vue/App.vue | 2 +- .../Demos/FloatingActionButton/Overview/jQuery/styles.css | 2 +- .../Demos/Form/Adaptability/Angular/app/app.component.css | 2 +- apps/demos/Demos/Form/Adaptability/React/styles.css | 2 +- apps/demos/Demos/Form/Adaptability/ReactJs/styles.css | 2 +- apps/demos/Demos/Form/Adaptability/Vue/App.vue | 2 +- apps/demos/Demos/Form/Adaptability/jQuery/styles.css | 2 +- apps/demos/Demos/Form/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Form/Overview/React/styles.css | 2 +- apps/demos/Demos/Form/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Form/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Form/Overview/jQuery/styles.css | 2 +- .../Demos/Gallery/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gallery/Overview/React/styles.css | 2 +- apps/demos/Demos/Gallery/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Gallery/Overview/Vue/styles.css | 2 +- apps/demos/Demos/Gallery/Overview/jQuery/styles.css | 2 +- apps/demos/Demos/Gantt/Appearance/React/styles.css | 2 +- apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/Appearance/Vue/App.vue | 2 +- .../Demos/Gantt/ContextMenu/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gantt/ContextMenu/React/styles.css | 2 +- apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue | 2 +- apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css | 2 +- .../Demos/Gantt/ExportToPDF/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gantt/ExportToPDF/React/styles.css | 2 +- apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue | 2 +- apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css | 2 +- apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gantt/Sorting/React/styles.css | 2 +- apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/Sorting/Vue/App.vue | 2 +- apps/demos/Demos/Gantt/Sorting/jQuery/styles.css | 2 +- .../Demos/Gantt/Validation/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gantt/Validation/React/styles.css | 2 +- apps/demos/Demos/Gantt/Validation/ReactJs/styles.css | 2 +- apps/demos/Demos/Gantt/Validation/Vue/App.vue | 2 +- apps/demos/Demos/Gantt/Validation/jQuery/styles.css | 2 +- .../Gauges/ValueIndicatorsAPI/Angular/app/app.component.css | 2 +- apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css | 2 +- apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css | 2 +- apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue | 2 +- apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css | 2 +- .../HtmlEditor/MarkdownSupport/Angular/app/app.component.css | 2 +- apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css | 2 +- .../demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css | 2 +- apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue | 2 +- apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css | 2 +- .../Demos/HtmlEditor/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/HtmlEditor/Overview/React/styles.css | 2 +- apps/demos/Demos/HtmlEditor/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/HtmlEditor/Overview/Vue/App.vue | 2 +- apps/demos/Demos/HtmlEditor/Overview/jQuery/styles.css | 2 +- .../Demos/HtmlEditor/Tables/Angular/app/app.component.css | 2 +- apps/demos/Demos/HtmlEditor/Tables/React/styles.css | 2 +- apps/demos/Demos/HtmlEditor/Tables/ReactJs/styles.css | 2 +- apps/demos/Demos/HtmlEditor/Tables/Vue/App.vue | 2 +- apps/demos/Demos/HtmlEditor/Tables/jQuery/styles.css | 2 +- .../Demos/List/ItemDeletion/Angular/app/app.component.css | 2 +- apps/demos/Demos/List/ItemDeletion/React/styles.css | 2 +- apps/demos/Demos/List/ItemDeletion/ReactJs/styles.css | 2 +- apps/demos/Demos/List/ItemDeletion/Vue/App.vue | 2 +- apps/demos/Demos/List/ItemDeletion/jQuery/styles.css | 2 +- apps/demos/Demos/List/Search/Angular/app/app.component.css | 2 +- apps/demos/Demos/List/Search/React/styles.css | 2 +- apps/demos/Demos/List/Search/ReactJs/styles.css | 2 +- apps/demos/Demos/List/Search/Vue/App.vue | 2 +- apps/demos/Demos/List/Search/jQuery/styles.css | 2 +- apps/demos/Demos/List/Selection/Angular/app/app.component.css | 2 +- apps/demos/Demos/List/Selection/React/styles.css | 2 +- apps/demos/Demos/List/Selection/ReactJs/styles.css | 2 +- apps/demos/Demos/List/Selection/Vue/App.vue | 2 +- apps/demos/Demos/List/Selection/jQuery/styles.css | 2 +- .../Demos/LoadPanel/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/LoadPanel/Overview/React/styles.css | 2 +- apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/LoadPanel/Overview/Vue/App.vue | 2 +- apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css | 2 +- .../Localization/UsingGlobalize/Angular/app/app.component.css | 2 +- apps/demos/Demos/Localization/UsingGlobalize/React/styles.css | 2 +- .../Demos/Localization/UsingGlobalize/ReactJs/styles.css | 2 +- apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue | 2 +- .../demos/Demos/Localization/UsingGlobalize/jQuery/styles.css | 2 +- .../Localization/UsingIntl/Angular/app/app.component.css | 2 +- apps/demos/Demos/Localization/UsingIntl/React/styles.css | 2 +- apps/demos/Demos/Localization/UsingIntl/ReactJs/styles.css | 2 +- apps/demos/Demos/Localization/UsingIntl/Vue/App.vue | 2 +- apps/demos/Demos/Localization/UsingIntl/jQuery/styles.css | 2 +- .../Demos/Lookup/EventHandling/Angular/app/app.component.css | 2 +- apps/demos/Demos/Lookup/EventHandling/React/styles.css | 2 +- apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css | 2 +- apps/demos/Demos/Lookup/EventHandling/Vue/styles.css | 2 +- apps/demos/Demos/Map/Markers/Angular/app/app.component.css | 2 +- apps/demos/Demos/Map/Markers/React/styles.css | 2 +- apps/demos/Demos/Map/Markers/ReactJs/styles.css | 2 +- apps/demos/Demos/Map/Markers/Vue/App.vue | 2 +- apps/demos/Demos/Map/Markers/jQuery/styles.css | 2 +- .../Demos/Map/ProvidersAndTypes/Angular/app/app.component.css | 2 +- apps/demos/Demos/Map/ProvidersAndTypes/React/styles.css | 2 +- apps/demos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css | 2 +- apps/demos/Demos/Map/ProvidersAndTypes/Vue/App.vue | 2 +- apps/demos/Demos/Map/ProvidersAndTypes/jQuery/styles.css | 2 +- apps/demos/Demos/Map/Routes/Angular/app/app.component.css | 2 +- apps/demos/Demos/Map/Routes/React/styles.css | 2 +- apps/demos/Demos/Map/Routes/ReactJs/styles.css | 2 +- apps/demos/Demos/Map/Routes/Vue/App.vue | 2 +- apps/demos/Demos/Map/Routes/jQuery/styles.css | 2 +- apps/demos/Demos/Menu/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Menu/Overview/React/styles.css | 2 +- apps/demos/Demos/Menu/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Menu/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.css | 2 +- apps/demos/Demos/Menu/Scrolling/React/styles.css | 2 +- apps/demos/Demos/Menu/Scrolling/ReactJs/styles.css | 2 +- apps/demos/Demos/Menu/Scrolling/Vue/App.vue | 2 +- apps/demos/Demos/Menu/Scrolling/jQuery/styles.css | 2 +- .../Demos/MultiView/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/MultiView/Overview/React/styles.css | 2 +- apps/demos/Demos/MultiView/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/MultiView/Overview/Vue/App.vue | 2 +- apps/demos/Demos/MultiView/Overview/jQuery/styles.css | 2 +- .../PivotGrid/Customization/Angular/app/app.component.css | 2 +- apps/demos/Demos/PivotGrid/Customization/React/styles.css | 2 +- apps/demos/Demos/PivotGrid/Customization/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/Customization/Vue/App.vue | 2 +- .../ExcelJsHeaderAndFooter/Angular/app/app.component.css | 2 +- .../Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css | 2 +- .../Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue | 2 +- .../Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css | 2 +- .../Demos/PivotGrid/FieldPanel/Angular/app/app.component.css | 2 +- apps/demos/Demos/PivotGrid/FieldPanel/React/styles.css | 2 +- apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue | 2 +- apps/demos/Demos/PivotGrid/FieldPanel/jQuery/styles.css | 2 +- .../Demos/PivotGrid/Filtering/Angular/app/app.component.css | 2 +- apps/demos/Demos/PivotGrid/Filtering/React/styles.css | 2 +- apps/demos/Demos/PivotGrid/Filtering/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/Filtering/Vue/App.vue | 2 +- apps/demos/Demos/PivotGrid/Filtering/jQuery/styles.css | 2 +- .../IntegratedFieldChooser/Angular/app/app.component.css | 2 +- .../Demos/PivotGrid/IntegratedFieldChooser/React/styles.css | 2 +- .../Demos/PivotGrid/IntegratedFieldChooser/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue | 2 +- .../Demos/PivotGrid/IntegratedFieldChooser/jQuery/styles.css | 2 +- .../StandaloneFieldChooser/Angular/app/app.component.css | 2 +- .../Demos/PivotGrid/StandaloneFieldChooser/React/styles.css | 2 +- .../Demos/PivotGrid/StandaloneFieldChooser/ReactJs/styles.css | 2 +- apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue | 2 +- .../Demos/PivotGrid/StandaloneFieldChooser/jQuery/styles.css | 2 +- .../RangeSelector/Calculation/Angular/app/app.component.css | 2 +- apps/demos/Demos/RangeSelector/Calculation/React/styles.css | 2 +- apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css | 2 +- apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue | 2 +- apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css | 2 +- .../Demos/Resizable/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Resizable/Overview/React/styles.css | 2 +- apps/demos/Demos/Resizable/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Resizable/Overview/Vue/styles.css | 2 +- .../Scheduler/AllDayPanelMode/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css | 2 +- apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css | 2 +- apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css | 2 +- .../CurrentTimeIndicator/Angular/app/app.component.css | 2 +- .../Demos/Scheduler/CurrentTimeIndicator/React/styles.css | 2 +- .../Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue | 2 +- .../Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css | 2 +- .../Demos/Scheduler/Editing/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/Editing/React/styles.css | 2 +- apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/Editing/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/Editing/jQuery/styles.css | 2 +- .../Demos/Scheduler/GroupByDate/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/GroupByDate/React/styles.css | 2 +- apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/GroupByDate/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/GroupByDate/jQuery/styles.css | 2 +- .../Demos/Scheduler/HiddenDays/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/HiddenDays/React/styles.css | 2 +- apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css | 2 +- apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css | 2 +- .../ResolveTimeConflicts/Angular/app/app.component.css | 2 +- .../Demos/Scheduler/ResolveTimeConflicts/React/styles.css | 2 +- .../Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue | 2 +- .../Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css | 2 +- .../Demos/Scheduler/Resources/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/Resources/React/styles.css | 2 +- apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/Resources/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/Resources/jQuery/styles.css | 2 +- .../Demos/Scheduler/Timelines/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/Timelines/React/styles.css | 2 +- apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/Timelines/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css | 2 +- .../Demos/Scheduler/WorkShifts/Angular/app/app.component.css | 2 +- apps/demos/Demos/Scheduler/WorkShifts/React/styles.css | 2 +- apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css | 2 +- apps/demos/Demos/Scheduler/WorkShifts/Vue/App.vue | 2 +- apps/demos/Demos/Scheduler/WorkShifts/jQuery/styles.css | 2 +- .../Demos/ScrollView/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/ScrollView/Overview/React/styles.css | 2 +- apps/demos/Demos/ScrollView/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/ScrollView/Overview/Vue/App.vue | 2 +- apps/demos/Demos/ScrollView/Overview/jQuery/styles.css | 2 +- .../SelectBox/SearchAndEditing/Angular/app/app.component.css | 2 +- apps/demos/Demos/SelectBox/SearchAndEditing/React/styles.css | 2 +- .../demos/Demos/SelectBox/SearchAndEditing/ReactJs/styles.css | 2 +- apps/demos/Demos/SelectBox/SearchAndEditing/Vue/App.vue | 2 +- apps/demos/Demos/SelectBox/SearchAndEditing/jQuery/styles.css | 2 +- .../Sortable/Customization/Angular/app/app.component.css | 2 +- apps/demos/Demos/Sortable/Customization/React/styles.css | 2 +- apps/demos/Demos/Sortable/Customization/ReactJs/styles.css | 2 +- apps/demos/Demos/Sortable/Customization/Vue/App.vue | 2 +- apps/demos/Demos/Sortable/Customization/jQuery/styles.css | 2 +- .../Demos/SpeechToText/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/SpeechToText/Overview/React/styles.css | 2 +- apps/demos/Demos/SpeechToText/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/SpeechToText/Overview/Vue/App.vue | 2 +- apps/demos/Demos/SpeechToText/Overview/jQuery/styles.css | 2 +- .../Demos/Stepper/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/Stepper/Overview/React/styles.css | 2 +- apps/demos/Demos/Stepper/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/Stepper/Overview/Vue/App.vue | 2 +- apps/demos/Demos/Stepper/Overview/jQuery/styles.css | 2 +- .../Demos/TabPanel/Overview/Angular/app/app.component.css | 2 +- apps/demos/Demos/TabPanel/Overview/React/styles.css | 2 +- apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css | 2 +- apps/demos/Demos/TabPanel/Overview/Vue/App.vue | 2 +- apps/demos/Demos/TabPanel/Overview/jQuery/styles.css | 2 +- .../Demos/TabPanel/Templates/Angular/app/app.component.css | 2 +- apps/demos/Demos/TabPanel/Templates/React/styles.css | 2 +- apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css | 2 +- apps/demos/Demos/TabPanel/Templates/Vue/App.vue | 2 +- apps/demos/Demos/TabPanel/Templates/jQuery/styles.css | 2 +- .../Demos/TileView/Directions/Angular/app/app.component.css | 2 +- apps/demos/Demos/TileView/Directions/React/styles.css | 2 +- apps/demos/Demos/TileView/Directions/ReactJs/styles.css | 2 +- apps/demos/Demos/TileView/Directions/Vue/App.vue | 2 +- apps/demos/Demos/TileView/Directions/jQuery/styles.css | 2 +- apps/demos/Demos/Toast/Stack/Angular/app/app.component.css | 2 +- apps/demos/Demos/Toast/Stack/React/styles.css | 2 +- apps/demos/Demos/Toast/Stack/ReactJs/styles.css | 2 +- apps/demos/Demos/Toast/Stack/Vue/App.vue | 2 +- apps/demos/Demos/Toast/Stack/jQuery/styles.css | 2 +- .../TreeList/ColumnChooser/Angular/app/app.component.css | 2 +- apps/demos/Demos/TreeList/ColumnChooser/React/styles.css | 2 +- apps/demos/Demos/TreeList/ColumnChooser/ReactJs/styles.css | 2 +- apps/demos/Demos/TreeList/ColumnChooser/Vue/App.vue | 2 +- apps/demos/Demos/TreeList/ColumnChooser/jQuery/styles.css | 2 +- .../CustomizeKeyboardNavigation/Angular/app/app.component.css | 2 +- .../TreeList/CustomizeKeyboardNavigation/React/styles.css | 2 +- .../TreeList/CustomizeKeyboardNavigation/ReactJs/styles.css | 2 +- .../Demos/TreeList/CustomizeKeyboardNavigation/Vue/styles.css | 2 +- .../TreeList/CustomizeKeyboardNavigation/jQuery/styles.css | 2 +- .../TreeList/LocalReordering/Angular/app/app.component.css | 2 +- apps/demos/Demos/TreeList/LocalReordering/React/styles.css | 2 +- apps/demos/Demos/TreeList/LocalReordering/ReactJs/styles.css | 2 +- apps/demos/Demos/TreeList/LocalReordering/Vue/App.vue | 2 +- apps/demos/Demos/TreeList/LocalReordering/jQuery/styles.css | 2 +- .../MultipleRowSelection/Angular/app/app.component.css | 2 +- .../Demos/TreeList/MultipleRowSelection/React/styles.css | 2 +- .../Demos/TreeList/MultipleRowSelection/ReactJs/styles.css | 2 +- apps/demos/Demos/TreeList/MultipleRowSelection/Vue/App.vue | 2 +- .../Demos/TreeList/MultipleRowSelection/jQuery/styles.css | 2 +- .../Demos/TreeList/Resizing/Angular/app/app.component.css | 2 +- apps/demos/Demos/TreeList/Resizing/React/styles.css | 2 +- apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css | 2 +- apps/demos/Demos/TreeList/Resizing/Vue/App.vue | 2 +- apps/demos/Demos/TreeList/Resizing/jQuery/styles.css | 2 +- .../ContextMenuIntegration/Angular/app/app.component.css | 2 +- .../Demos/TreeView/ContextMenuIntegration/React/styles.css | 2 +- .../Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css | 2 +- apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue | 2 +- .../Demos/TreeView/ContextMenuIntegration/jQuery/styles.css | 2 +- .../Angular/app/app.component.css | 4 ++-- .../TreeView/ItemSelectionAndCustomization/React/styles.css | 4 ++-- .../TreeView/ItemSelectionAndCustomization/ReactJs/styles.css | 4 ++-- .../Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue | 4 ++-- .../TreeView/ItemSelectionAndCustomization/jQuery/styles.css | 4 ++-- .../VectorMap/CustomAnnotations/Angular/app/app.component.css | 2 +- apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css | 2 +- .../Demos/VectorMap/CustomAnnotations/ReactJs/styles.css | 2 +- .../VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue | 2 +- .../demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css | 2 +- .../VectorMap/DynamicViewport/Angular/app/app.component.css | 2 +- apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css | 2 +- apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css | 2 +- apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue | 2 +- apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css | 2 +- 529 files changed, 534 insertions(+), 534 deletions(-) diff --git a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css index b0a2fbb6fd75..e3f0bf483712 100644 --- a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/React/styles.css b/apps/demos/Demos/Accordion/Overview/React/styles.css index 9ffb8961b7e2..013779ad9520 100644 --- a/apps/demos/Demos/Accordion/Overview/React/styles.css +++ b/apps/demos/Demos/Accordion/Overview/React/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css index 9ffb8961b7e2..013779ad9520 100644 --- a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/Vue/App.vue b/apps/demos/Demos/Accordion/Overview/Vue/App.vue index bfc35834e3b7..234f3d874f2f 100644 --- a/apps/demos/Demos/Accordion/Overview/Vue/App.vue +++ b/apps/demos/Demos/Accordion/Overview/Vue/App.vue @@ -123,7 +123,7 @@ const selectedCompanies = computed({ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css index 9ffb8961b7e2..013779ad9520 100644 --- a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options > .caption { diff --git a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css index a3543e15c3b3..684f9aadb897 100644 --- a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css +++ b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/React/styles.css b/apps/demos/Demos/ActionSheet/Basics/React/styles.css index a3543e15c3b3..684f9aadb897 100644 --- a/apps/demos/Demos/ActionSheet/Basics/React/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/React/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css index a3543e15c3b3..684f9aadb897 100644 --- a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css index a3543e15c3b3..684f9aadb897 100644 --- a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css index a3543e15c3b3..684f9aadb897 100644 --- a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css index 1d82a376a3e9..f62beeaee70e 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css index 9614a7464cf3..076b2dbd2f47 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css index 9614a7464cf3..076b2dbd2f47 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue index 201a9d75dc69..65b3461a0b02 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue +++ b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue @@ -125,7 +125,7 @@ function clearValue() { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css index 9614a7464cf3..076b2dbd2f47 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .option { diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css index ca85d74b11c2..ad658335bc40 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css +++ b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css index ca85d74b11c2..ad658335bc40 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css index ca85d74b11c2..ad658335bc40 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue index afeeaf8e7bdd..05ea98685b34 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue +++ b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue @@ -151,7 +151,7 @@ function onAllowColumnReorderingChanged(e: DxCheckBoxTypes.ValueChangedEvent) { .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css index ca85d74b11c2..ad658335bc40 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css index a090550dad9f..3f3ade114be2 100644 --- a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css +++ b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/React/styles.css b/apps/demos/Demos/CardView/Selection/React/styles.css index a090550dad9f..3f3ade114be2 100644 --- a/apps/demos/Demos/CardView/Selection/React/styles.css +++ b/apps/demos/Demos/CardView/Selection/React/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css index a090550dad9f..3f3ade114be2 100644 --- a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/Vue/App.vue b/apps/demos/Demos/CardView/Selection/Vue/App.vue index 8cb7f16ed602..c9ba6d1b63d6 100644 --- a/apps/demos/Demos/CardView/Selection/Vue/App.vue +++ b/apps/demos/Demos/CardView/Selection/Vue/App.vue @@ -119,7 +119,7 @@ const onAllowSelectAllChange = (e: DxCheckBoxTypes.ValueChangedEvent): void => { .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/jQuery/styles.css b/apps/demos/Demos/CardView/Selection/jQuery/styles.css index a090550dad9f..3f3ade114be2 100644 --- a/apps/demos/Demos/CardView/Selection/jQuery/styles.css +++ b/apps/demos/Demos/CardView/Selection/jQuery/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); } .options-container { diff --git a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css index a87c14188457..316bc7e81405 100644 --- a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/React/styles.css b/apps/demos/Demos/Charts/Area/React/styles.css index df540e8ab03d..0b8cf8a2ac94 100644 --- a/apps/demos/Demos/Charts/Area/React/styles.css +++ b/apps/demos/Demos/Charts/Area/React/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/ReactJs/styles.css b/apps/demos/Demos/Charts/Area/ReactJs/styles.css index df540e8ab03d..0b8cf8a2ac94 100644 --- a/apps/demos/Demos/Charts/Area/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/Area/ReactJs/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: color-mix(in srgb, var(--dxds-color-surface-neutral-default-inverted-rest, #bfbfbf) calc(var(--dxds-opacity-5, 0.15) * 100%), transparent); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/Vue/App.vue b/apps/demos/Demos/Charts/Area/Vue/App.vue index 1948b51e2bb6..8427f38ee215 100644 --- a/apps/demos/Demos/Charts/Area/Vue/App.vue +++ b/apps/demos/Demos/Charts/Area/Vue/App.vue @@ -63,7 +63,7 @@ const type = ref(types[0]);