diff --git a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/React/styles.css b/apps/demos/Demos/Box/Overview/React/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/React/styles.css +++ b/apps/demos/Demos/Box/Overview/React/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/ReactJs/styles.css b/apps/demos/Demos/Box/Overview/ReactJs/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Box/Overview/ReactJs/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/Vue/App.vue b/apps/demos/Demos/Box/Overview/Vue/App.vue index c4738f045779..2df5d3d991c3 100644 --- a/apps/demos/Demos/Box/Overview/Vue/App.vue +++ b/apps/demos/Demos/Box/Overview/Vue/App.vue @@ -167,7 +167,7 @@ import { DxBox, DxItem } from 'devextreme-vue/box'; .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/Box/Overview/jQuery/styles.css b/apps/demos/Demos/Box/Overview/jQuery/styles.css index edd7b423678a..f59b2ced2372 100644 --- a/apps/demos/Demos/Box/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Box/Overview/jQuery/styles.css @@ -23,5 +23,5 @@ .small { height: 50px; - border: 1px solid lightgray; + border: 1px solid var(--dxds-color-border-neutral-default-rest, lightgray); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css index 88bd7d096d98..38a345addcc2 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css index 5b305c350e58..79c48db21920 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css index 5b305c350e58..79c48db21920 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css @@ -16,5 +16,5 @@ .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue index bf8d7b92da5f..2ced29c9911f 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue +++ b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue @@ -63,6 +63,6 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) { .multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css index 9043d25c5915..a4912d017a34 100644 --- a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css @@ -16,5 +16,5 @@ #multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; - border-color: #ddd; + border-color: var(--dxds-color-border-neutral-subdued-rest, #ddd); } diff --git a/apps/demos/Demos/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/Charts/AreaSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css index 402fd3bc24ad..f96156066b2c 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css @@ -4,7 +4,7 @@ ::ng-deep .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } ::ng-deep .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue index f554930cbfb2..19b8802a76d1 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue +++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue @@ -35,7 +35,7 @@ const years = ['2021', '2022', '2023']; .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -43,7 +43,7 @@ const years = ['2021', '2022', '2023']; font-weight: 400; width: 200px; padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .long-title h3 { diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue index 056f1b376996..0fd223c5ffd6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue +++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue @@ -71,15 +71,15 @@ withDefaults(defineProps<{ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .rows-content .sparkline { diff --git a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css index 24db67de5f3b..dbcbb1b1e3c6 100644 --- a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css +++ b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css @@ -4,7 +4,7 @@ .demo-table { width: 100%; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); border-collapse: collapse; } @@ -13,20 +13,20 @@ font-weight: 400; width: 200px; padding: 25px 10px 5px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table th { padding: 25px 15px 20px; - border: 1px solid #c2c2c2; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table tr:nth-child(2) td { - border-top: 1px solid #c2c2c2; + border-top: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table td:first-of-type { - border-left: 1px solid #c2c2c2; + border-left: 1px solid var(--dxds-color-border-neutral-default-rest, #c2c2c2); } .demo-table .sparkline { diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css index a72aa6c086ad..cd2a4159f975 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css index 5b2879e8b76b..5f182dc7abad 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css index 5b2879e8b76b..5f182dc7abad 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css @@ -3,7 +3,7 @@ } .template-text { - fill: #767676; + fill: var(--dxds-color-border-utility-gray-default-rest, #767676); font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue index cf027de190b9..814500c4b175 100644 --- a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue +++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue @@ -26,7 +26,7 @@ const getFilePath = (text: string): string => `../../../../images/flags/3x2/${te diff --git a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css index c6ffdc033671..a467b216c216 100644 --- a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css @@ -17,7 +17,7 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; + color: var(--dxds-color-content-neutral-deep-rest, #999); } .dark #gridContainer tr.notes-row td { @@ -25,7 +25,7 @@ } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } .dark #gridContainer tbody.dx-state-hover { @@ -37,9 +37,9 @@ } .dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-surface-neutral-default-hovered, #ccc); } #gridContainer tbody.dx-state-hover tr.notes-row td { - color: #888; + color: var(--dxds-color-content-neutral-deep-rest, #888); } diff --git a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css index c6ffdc033671..a467b216c216 100644 --- a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css @@ -17,7 +17,7 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; + color: var(--dxds-color-content-neutral-deep-rest, #999); } .dark #gridContainer tr.notes-row td { @@ -25,7 +25,7 @@ } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } .dark #gridContainer tbody.dx-state-hover { @@ -37,9 +37,9 @@ } .dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-surface-neutral-default-hovered, #ccc); } #gridContainer tbody.dx-state-hover tr.notes-row td { - color: #888; + color: var(--dxds-color-content-neutral-deep-rest, #888); } 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; } diff --git a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css index 73a56738519f..773e7c0fd78b 100644 --- a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css +++ b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } ::ng-deep #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/React/styles.css b/apps/demos/Demos/Form/ItemCustomization/React/styles.css index d77a1059925e..9a36c6b7d1b3 100644 --- a/apps/demos/Demos/Form/ItemCustomization/React/styles.css +++ b/apps/demos/Demos/Form/ItemCustomization/React/styles.css @@ -1,5 +1,5 @@ #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css index d77a1059925e..9a36c6b7d1b3 100644 --- a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css +++ b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css @@ -1,5 +1,5 @@ #helpedInfo { - color: #42a5f5; + color: var(--dxds-color-content-primary-default-rest, #42a5f5); } #tooltip-content { diff --git a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue index 4f980c6eaf2a..1d6d13f767cd 100644 --- a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue +++ b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue @@ -30,7 +30,7 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/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; } 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/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; } 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 { diff --git a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css index 678e69ed92f0..b64e77781de1 100644 --- a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css @@ -13,5 +13,5 @@ } ::ng-deep .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/React/styles.css b/apps/demos/Demos/ProgressBar/Overview/React/styles.css index fc17d76af3e6..8535cc080f72 100644 --- a/apps/demos/Demos/ProgressBar/Overview/React/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/React/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css index fc17d76af3e6..8535cc080f72 100644 --- a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue index 19d63cf2fa9c..81cd988bd061 100644 --- a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue +++ b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue @@ -77,6 +77,6 @@ function timer() { } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css index 2365a7eb4108..a386c0b44f22 100644 --- a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css @@ -13,5 +13,5 @@ } .complete .dx-progressbar-range { - background-color: green; + background-color: var(--dxds-color-surface-success-default-rest, green); } diff --git a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css index 30e7015e37ff..a2e355fe2d1e 100644 --- a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css @@ -1,17 +1,17 @@ ::ng-deep .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } ::ng-deep .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } ::ng-deep .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } ::ng-deep .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } ::ng-deep #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/React/styles.css b/apps/demos/Demos/RadioGroup/Overview/React/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/React/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/React/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css index fcb2f4524e98..1e715328f131 100644 --- a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css index eb3c6236ff6d..5b740e73397f 100644 --- a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css +++ b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css @@ -1,17 +1,17 @@ .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: gray; + background: var(--dxds-color-content-neutral-deep-rest, gray); } .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: green; + background: var(--dxds-color-content-success-default-rest, green); } .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: orange; + background: var(--dxds-color-content-warning-default-rest, orange); } .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot { - background: red; + background: var(--dxds-color-content-danger-default-rest, red); } #radio-group-with-selection { diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css index f7de14c6c659..30e7a34f6bb1 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css @@ -5,24 +5,24 @@ } ::ng-deep #page .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } ::ng-deep #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } ::ng-deep #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } ::ng-deep #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } ::ng-deep #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } ::ng-deep .item { @@ -33,5 +33,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css index 2aca99d2c103..7a3379e28e4e 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css @@ -6,24 +6,24 @@ } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -34,5 +34,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css index 2aca99d2c103..7a3379e28e4e 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css @@ -6,24 +6,24 @@ } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -34,5 +34,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue index d5938408e37d..bb7006938f75 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue +++ b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue @@ -114,24 +114,24 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as } .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -142,6 +142,6 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css index 4843cf529992..e78a4bdb1538 100644 --- a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css +++ b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css @@ -5,24 +5,24 @@ } #page .header { - background-color: #C6B1DE; + background-color: var(--dxds-color-surface-utility-purple-default-rest, #C6B1DE); text-align: center; } #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-default-rest, #EDBBE7); } #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #F9E2AE); } #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-default-rest, #9FD89F); } #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-default-rest, #B4D6FA); } .item { @@ -33,5 +33,5 @@ font-size: 20px; padding-top: 10px; text-align: center; - color: #000; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #000); } diff --git a/apps/demos/Demos/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 { 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/TabPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css index 046af40d3171..6db5699730a0 100644 --- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css @@ -82,15 +82,15 @@ } ::ng-deep .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } ::ng-deep .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } ::ng-deep .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } ::ng-deep .task-item-text, @@ -122,5 +122,5 @@ } ::ng-deep .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/React/styles.css b/apps/demos/Demos/TabPanel/Overview/React/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/React/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/React/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue index bfe6973f9762..8cf27a2d6de3 100644 --- a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue +++ b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue @@ -44,15 +44,15 @@ withDefaults(defineProps<{ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -84,6 +84,6 @@ withDefaults(defineProps<{ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } diff --git a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css index 7d2c7f569c05..94b68840684c 100644 --- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css @@ -82,15 +82,15 @@ } .task-item-priority-high::before { - background-color: #e1bee7; + background-color: var(--dxds-color-surface-utility-red-default-rest, #e1bee7); } .task-item-priority-medium::before { - background-color: #ffe0b2; + background-color: var(--dxds-color-surface-utility-yellow-default-rest, #ffe0b2); } .task-item-priority-low::before { - background-color: #c8e6c9; + background-color: var(--dxds-color-surface-utility-green-default-rest, #c8e6c9); } .task-item-text, @@ -122,5 +122,5 @@ } .dx-theme-fluent.dx-color-scheme-blue-dark .task-item { - background-color: #1f1f1f; + background-color: var(--dxds-color-surface-utility-red-default-rest, #1f1f1f); } 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; 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); }