From 7cfd6df80c60515730e90adf32d561bb1c5b9789 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 14:28:17 +0300
Subject: [PATCH 01/13] 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
 </script>
 <style scoped>
 .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/jQuery/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css
index 5b2879e8b76b..5f182dc7abad 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/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/BarSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css
index 9a7d34a45b4a..22dfae1751fb 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/BarSparklines/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/BarSparklines/React/styles.css b/apps/demos/Demos/Charts/BarSparklines/React/styles.css
index e0923613de5f..9151055d473c 100644
--- a/apps/demos/Demos/Charts/BarSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/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/BarSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css
index e0923613de5f..9151055d473c 100644
--- a/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/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/BarSparklines/Vue/App.vue b/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
index 3cb3f4bdb304..600e7aca17c8 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
@@ -68,7 +68,7 @@ function onValueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -77,20 +77,20 @@ function onValueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   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/BarSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
index d61a40662202..1c5c17dfaf89 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
@@ -67,15 +67,15 @@ const getValueField = (name: string): string => name + props.year;
   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/BarSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css
index e0923613de5f..9151055d473c 100644
--- a/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/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/CenterLabelCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
index 35a12b8f18c1..98b87eeba1b2 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
@@ -42,7 +42,7 @@
           text-anchor="middle"
           x="100"
           y="120"
-          fill="#494949"
+          fill="var(--dxds-color-content-neutral-subdued-rest, #494949)"
         >
           <tspan x="100">{{ country }}</tspan>
           <!-- display: inline -->
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
index a1bb21f9b49a..2a83b4304e0e 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
@@ -22,7 +22,7 @@ export default function TooltipTemplate(pieChart: ReturnType<PieChartRef['instan
     <svg>
       <circle cx="100" cy="100" r={pieChart.getInnerRadius() - 6} fill="#eee"></circle>
       <image href={getImagePath(country)} x="70" y="58" width="60" height="40" />
-      <text textAnchor="middle" x="100" y="120" style={{ fontSize: 18, fill: '#494949' }}>
+      <text textAnchor="middle" x="100" y="120" style={{ fontSize: 18, fill: 'var(--dxds-color-content-neutral-subdued-rest, #494949)' }}>
         <tspan x="100">{country}</tspan>
         <tspan x="100" dy="20px" style={{ fontWeight: 600 }}>{
           calculateTotal(pieChart)
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js b/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
index 37a8225eaa3d..3dca4c901c0d 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
@@ -35,7 +35,7 @@ export default function TooltipTemplate(pieChart) {
         textAnchor="middle"
         x="100"
         y="120"
-        style={{ fontSize: 18, fill: '#494949' }}
+        style={{ fontSize: 18, fill: 'var(--dxds-color-content-neutral-subdued-rest, #494949)' }}
       >
         <tspan x="100">{country}</tspan>
         <tspan
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue b/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
index 3112daac8d63..5a1d013afd72 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
@@ -14,7 +14,7 @@
       height="40"
     />
     <text
-      :style="{fontSize: 18, fill: '#494949'}"
+      :style="{fontSize: 18, fill: 'var(--dxds-color-content-neutral-subdued-rest, #494949)'}"
       text-anchor="middle"
       x="100"
       y="120"
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js b/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
index 0a55416d1b15..c1b1fe040294 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
@@ -46,7 +46,7 @@ $(() => {
       const text = createText({
         x: 100,
         y: 120,
-        fill: '#494949',
+        fill: 'var(--dxds-color-content-neutral-subdued-rest, #494949)',
         'text-anchor': 'middle',
         'font-size': 18,
       }, [country, formatNumber(total)]);
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
index 8b338fff11ce..438cfe92da8b 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 }
 
 ::ng-deep .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-neutral-default-on-surface-rest, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
index a8e4f5ab3fe5..8381122d51bd 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-neutral-default-on-surface-rest, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
index a8e4f5ab3fe5..8381122d51bd 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-neutral-default-on-surface-rest, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
index 3650ad53fb12..154d1b705823 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
@@ -66,7 +66,7 @@ defineExpose({
 </script>
 <style>
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-neutral-default-on-surface-rest, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
index a8e4f5ab3fe5..8381122d51bd 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-neutral-default-on-surface-rest, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css
index 402fd3bc24ad..f96156066b2c 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/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/SimpleSparklines/React/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/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/SimpleSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/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/SimpleSparklines/Vue/App.vue b/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
index cce4276a7c9f..1e82ad20f5d8 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
@@ -32,7 +32,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;
 }
 
@@ -40,7 +40,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/SimpleSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue
index 6f82dd7db275..aaa0d12a0c43 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/SimpleSparklines/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/SimpleSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/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/WinlossSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css
index 402fd3bc24ad..f96156066b2c 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/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/WinlossSparklines/React/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/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/WinlossSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/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/WinlossSparklines/Vue/App.vue b/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue
index f554930cbfb2..19b8802a76d1 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/WinlossSparklines/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/WinlossSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
index 886f8e473462..f4c7d18b9908 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
@@ -69,15 +69,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/WinlossSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css
index 24db67de5f3b..dbcbb1b1e3c6 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/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 {

From 96ac8418b829f9e25d961484cad32411c44c50a3 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 14:45:55 +0300
Subject: [PATCH 02/13] Design System: use design tokens for hardcoded colors
 in Scheduler demos (WG)

Replaces hardcoded colors with var(--dxds-*, original) in Overview,
CurrentTimeIndicator, Timelines, Templates. Fallback preserves the exact
legacy value, so existing themes are visually unaffected; fluent-next
resolves the token.
---
 .../CurrentTimeIndicator/Angular/app/app.component.css    | 4 ++--
 .../Demos/Scheduler/CurrentTimeIndicator/React/styles.css | 4 ++--
 .../Scheduler/CurrentTimeIndicator/ReactJs/styles.css     | 4 ++--
 .../Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue      | 4 ++--
 .../Scheduler/CurrentTimeIndicator/jQuery/styles.css      | 4 ++--
 .../Scheduler/Overview/Angular/app/app.component.css      | 8 ++++----
 apps/demos/Demos/Scheduler/Overview/React/styles.css      | 8 ++++----
 apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css    | 8 ++++----
 apps/demos/Demos/Scheduler/Overview/Vue/App.vue           | 8 ++++----
 apps/demos/Demos/Scheduler/Overview/jQuery/styles.css     | 8 ++++----
 .../Scheduler/Templates/Angular/app/app.component.css     | 2 +-
 apps/demos/Demos/Scheduler/Templates/React/styles.css     | 2 +-
 apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css   | 2 +-
 apps/demos/Demos/Scheduler/Templates/Vue/styles.css       | 2 +-
 apps/demos/Demos/Scheduler/Templates/jQuery/styles.css    | 2 +-
 .../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 +-
 20 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
index 75eb7273ef59..73b054cdae52 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
@@ -3,9 +3,9 @@
 }
 
 ::ng-deep .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content-neutral-default-rest, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-surface-neutral-deep-rest, #e4e4e4);
 }
 
 ::ng-deep .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
index f9853cc68495..11bf11425c04 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content-neutral-default-rest, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-surface-neutral-deep-rest, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
index f9853cc68495..11bf11425c04 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content-neutral-default-rest, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-surface-neutral-deep-rest, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
index 922ef39e7bc8..5a170cf8cf74 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
@@ -97,9 +97,9 @@ function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) {
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content-neutral-default-rest, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-surface-neutral-deep-rest, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
index f9853cc68495..11bf11425c04 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content-neutral-default-rest, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-surface-neutral-deep-rest, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
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 3c13932a2a05..b3967d051eab 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -19,8 +19,8 @@
   --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: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --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));
 }
 
 ::ng-deep .dx-color-scheme-dark,
@@ -35,8 +35,8 @@
   --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: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
+  --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));
 
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index 97f1dab526a7..39cc285ff231 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -19,8 +19,8 @@
   --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: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --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));
 }
 
 .dx-color-scheme-dark,
@@ -35,8 +35,8 @@
   --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: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
+  --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));
 
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index 97f1dab526a7..39cc285ff231 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
@@ -19,8 +19,8 @@
   --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: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --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));
 }
 
 .dx-color-scheme-dark,
@@ -35,8 +35,8 @@
   --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: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
+  --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));
 
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 33e565df6b49..e3f4a252671c 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
@@ -68,8 +68,8 @@ const dataSource = data;
   --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: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --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));
 }
 
 .dx-color-scheme-dark,
@@ -84,8 +84,8 @@ const dataSource = data;
   --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: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
+  --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));
 
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index 97f1dab526a7..39cc285ff231 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
@@ -19,8 +19,8 @@
   --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: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --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));
 }
 
 .dx-color-scheme-dark,
@@ -35,8 +35,8 @@
   --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: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
+  --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));
 
 }
 
diff --git a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
index 6c8ae9343a50..6988ed58c4f0 100644
--- a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
@@ -35,7 +35,7 @@
 
 ::ng-deep .movie-preview > .movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content-neutral-default-rest, #242424);
 }
 
 ::ng-deep .movie-preview > .movie-details > .title {
diff --git a/apps/demos/Demos/Scheduler/Templates/React/styles.css b/apps/demos/Demos/Scheduler/Templates/React/styles.css
index 754b4e4f8522..dfb31b214756 100644
--- a/apps/demos/Demos/Scheduler/Templates/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/React/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content-neutral-default-rest, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
index 754b4e4f8522..dfb31b214756 100644
--- a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content-neutral-default-rest, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/Vue/styles.css b/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
index 754b4e4f8522..dfb31b214756 100644
--- a/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content-neutral-default-rest, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
index bf977aebaa30..367fc45df1c9 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview > .movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content-neutral-default-rest, #242424);
 }
 
 .movie-preview > .movie-details > .title {
diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
index 3da991324e1e..56a3a91a5c97 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 }
 
 ::ng-deep .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-neutral-default-on-surface-rest, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/styles.css b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
index 01365f1c9068..39ce1721238b 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
@@ -5,7 +5,7 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-neutral-default-on-surface-rest, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
index 01365f1c9068..39ce1721238b 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
@@ -5,7 +5,7 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-neutral-default-on-surface-rest, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
index 32d62714bf5e..421eea39e8e3 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
@@ -73,7 +73,7 @@ function onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-neutral-default-on-surface-rest, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
index 01365f1c9068..39ce1721238b 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
@@ -5,7 +5,7 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-neutral-default-on-surface-rest, white);
 }
 
 .options {

From d049e36a3775d37ba50c883e4de23eb2c9a5ca03 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 15:01:52 +0300
Subject: [PATCH 03/13] Design System: use design tokens for hardcoded colors
 in DataGrid demos (WG)

Replaces hardcoded colors with var(--dxds-*, original) in Row,
Row3RdPartyEngineTemplate, RemoteCRUDOperations. Fallback preserves the
exact legacy value. Colors still marked unresolved by designers (#000,
#484848, #777 in Row's dark-mode hover rules) are left untouched.
---
 .../RemoteCRUDOperations/Angular/app/app.component.css    | 2 +-
 .../Demos/DataGrid/RemoteCRUDOperations/React/styles.css  | 2 +-
 .../DataGrid/RemoteCRUDOperations/ReactJs/styles.css      | 2 +-
 .../demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue | 2 +-
 .../Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css | 2 +-
 .../Demos/DataGrid/Row/Angular/app/app.component.css      | 8 ++++----
 apps/demos/Demos/DataGrid/Row/React/styles.css            | 8 ++++----
 apps/demos/Demos/DataGrid/Row/ReactJs/styles.css          | 8 ++++----
 apps/demos/Demos/DataGrid/Row/Vue/App.vue                 | 8 ++++----
 apps/demos/Demos/DataGrid/Row/jQuery/styles.css           | 8 ++++----
 .../DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css  | 8 ++++----
 11 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
index f7282228a08f..16195de09b5b 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
@@ -57,7 +57,7 @@
 
 ::ng-deep #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd);
 }
 
 ::ng-deep #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
index 781c7df1ede6..917b2155995c 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
index 781c7df1ede6..917b2155995c 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
index b96c0d4946f0..92aa7f6fc896 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
@@ -233,7 +233,7 @@ const clearRequests = () => {
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
index 781c7df1ede6..917b2155995c 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
index cdebff7ee675..6e88de29352c 100644
--- a/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 
 ::ng-deep #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-neutral-deep-rest, #999);
 }
 
 ::ng-deep .dark #gridContainer tr.notes-row td {
@@ -25,7 +25,7 @@
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb);
 }
 
 ::ng-deep .dark #gridContainer tbody.dx-state-hover {
@@ -37,9 +37,9 @@
 }
 
 ::ng-deep .dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-surface-neutral-default-hovered, #ccc);
 }
 
 ::ng-deep #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/Row/React/styles.css b/apps/demos/Demos/DataGrid/Row/React/styles.css
index c6ffdc033671..a467b216c216 100644
--- a/apps/demos/Demos/DataGrid/Row/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/React/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/Row/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
index c6ffdc033671..a467b216c216 100644
--- a/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/ReactJs/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/Row/Vue/App.vue b/apps/demos/Demos/DataGrid/Row/Vue/App.vue
index 4ce1ce0e6cc4..ba321aa64077 100644
--- a/apps/demos/Demos/DataGrid/Row/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Row/Vue/App.vue
@@ -98,7 +98,7 @@ const formatDate = new Intl.DateTimeFormat('en-US').format;
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-neutral-deep-rest, #999);
 }
 
 .dark #gridContainer tr.notes-row td {
@@ -106,7 +106,7 @@ const formatDate = new Intl.DateTimeFormat('en-US').format;
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb);
 }
 
 .dark #gridContainer tbody.dx-state-hover {
@@ -118,10 +118,10 @@ const formatDate = new Intl.DateTimeFormat('en-US').format;
 }
 
 .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);
 }
 </style>
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 22d3a9befd6e7fa29ce7416c9d69d1711034b303 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 15:21:39 +0300
Subject: [PATCH 04/13] 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();
 </script>
 <style>
   .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);
   }
 </style>
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 de39e9c34eb25fb2d03c2bf505e4cb0e44d96f4b Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 15:46:17 +0300
Subject: [PATCH 05/13] 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 77a83fbf860fb60046726e7e1e513184fd6059d1 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 15:57:30 +0300
Subject: [PATCH 06/13] 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 d68956b75ad48498505cbeaf46999e7c059f350b Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 16:07:00 +0300
Subject: [PATCH 07/13] 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);
 }
 </style>
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);
 }
 </style>
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 b66b72b9a42386b41262f6a4dcc56bccd9981974 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 16:21:41 +0300
Subject: [PATCH 08/13] 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 2232d03cf898d5ba378c0cad26938c36fbf09407 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 16:35:02 +0300
Subject: [PATCH 09/13] 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 3b2fcdbc11f7fdf995a09c7d2100ddeac2bd9d4c Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 16:48:41 +0300
Subject: [PATCH 10/13] 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);
 }
 </style>
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 1aec596cd718729cc75d9f403978d28be644a2ea Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 17:03:58 +0300
Subject: [PATCH 11/13] 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);
 }
 
 </style>
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 c98260c2ae0deb80c2bf397d7f0c420775d60482 Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 17:13:32 +0300
Subject: [PATCH 12/13] 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 ee510e3d2160e483f370c175a0cff926bf0e93aa Mon Sep 17 00:00:00 2001
From: dmlvr <dmitrii.lavrinovich@devexpress.com>
Date: Fri, 7 Aug 2026 17:19:31 +0300
Subject: [PATCH 13/13] 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);
   }
 </style>
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<{
 </script>
 <style scoped>
 #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary-default-rest, #42a5f5);
 }
 
 #tooltip-content {
diff --git a/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css b/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css
index d77a1059925e..9a36c6b7d1b3 100644
--- a/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Form/ItemCustomization/jQuery/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/Pagination/Overview/Angular/app/app.component.css b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
index f65579fc60ad..1596cc652ac5 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
 }
 
 ::ng-deep .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/React/styles.css b/apps/demos/Demos/Pagination/Overview/React/styles.css
index 346ba3ee6b1e..e4a018c658a8 100644
--- a/apps/demos/Demos/Pagination/Overview/React/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/React/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
index 346ba3ee6b1e..e4a018c658a8 100644
--- a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue
index 2479506b66b8..9577263e41f9 100644
--- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue
@@ -112,7 +112,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
index 346ba3ee6b1e..e4a018c658a8 100644
--- a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-surface-neutral-default-rest, #fff);
 }
 
 .employees__img {