diff --git a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css index b0a2fbb6fd75..5b2880e648c9 100644 --- a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/React/styles.css b/apps/demos/Demos/Accordion/Overview/React/styles.css index 9ffb8961b7e2..cd5a3086e6bf 100644 --- a/apps/demos/Demos/Accordion/Overview/React/styles.css +++ b/apps/demos/Demos/Accordion/Overview/React/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css index 9ffb8961b7e2..cd5a3086e6bf 100644 --- a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/Vue/App.vue b/apps/demos/Demos/Accordion/Overview/Vue/App.vue index bfc35834e3b7..0f4501c3163a 100644 --- a/apps/demos/Demos/Accordion/Overview/Vue/App.vue +++ b/apps/demos/Demos/Accordion/Overview/Vue/App.vue @@ -123,7 +123,7 @@ const selectedCompanies = computed({ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options > .caption { diff --git a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css index 9ffb8961b7e2..cd5a3086e6bf 100644 --- a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css @@ -36,7 +36,7 @@ right: 0; width: 340px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options > .caption { diff --git a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css index a3543e15c3b3..6813b1691acf 100644 --- a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css +++ b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/React/styles.css b/apps/demos/Demos/ActionSheet/Basics/React/styles.css index a3543e15c3b3..6813b1691acf 100644 --- a/apps/demos/Demos/ActionSheet/Basics/React/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/React/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css index a3543e15c3b3..6813b1691acf 100644 --- a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css index a3543e15c3b3..6813b1691acf 100644 --- a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); left: 0; position: absolute; bottom: 0; diff --git a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css index a3543e15c3b3..6813b1691acf 100644 --- a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css +++ b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css @@ -6,7 +6,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); left: 0; position: absolute; bottom: 0; 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..6efec6a65f96 100644 --- a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css @@ -6,22 +6,22 @@ } .demo-light { - background: rgba(245, 229, 166, 0.5); + background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5)); } .demo-dark { - background: rgba(148, 215, 199, 0.5); + background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5)); } .demo-dark.header { - background: rgba(243, 158, 108, 0.5); + background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5)); } .demo-dark.footer { - background: rgba(123, 155, 207, 0.5); + background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.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..6efec6a65f96 100644 --- a/apps/demos/Demos/Box/Overview/React/styles.css +++ b/apps/demos/Demos/Box/Overview/React/styles.css @@ -6,22 +6,22 @@ } .demo-light { - background: rgba(245, 229, 166, 0.5); + background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5)); } .demo-dark { - background: rgba(148, 215, 199, 0.5); + background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5)); } .demo-dark.header { - background: rgba(243, 158, 108, 0.5); + background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5)); } .demo-dark.footer { - background: rgba(123, 155, 207, 0.5); + background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.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..6efec6a65f96 100644 --- a/apps/demos/Demos/Box/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Box/Overview/ReactJs/styles.css @@ -6,22 +6,22 @@ } .demo-light { - background: rgba(245, 229, 166, 0.5); + background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5)); } .demo-dark { - background: rgba(148, 215, 199, 0.5); + background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5)); } .demo-dark.header { - background: rgba(243, 158, 108, 0.5); + background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5)); } .demo-dark.footer { - background: rgba(123, 155, 207, 0.5); + background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.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..d6e758f75056 100644 --- a/apps/demos/Demos/Box/Overview/Vue/App.vue +++ b/apps/demos/Demos/Box/Overview/Vue/App.vue @@ -150,24 +150,24 @@ import { DxBox, DxItem } from 'devextreme-vue/box'; } .demo-light { - background: rgba(245, 229, 166, 0.5); + background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5)); } .demo-dark { - background: rgba(148, 215, 199, 0.5); + background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5)); } .demo-dark.header { - background: rgba(243, 158, 108, 0.5); + background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5)); } .demo-dark.footer { - background: rgba(123, 155, 207, 0.5); + background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.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/jQuery/styles.css b/apps/demos/Demos/Box/Overview/jQuery/styles.css index edd7b423678a..6efec6a65f96 100644 --- a/apps/demos/Demos/Box/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Box/Overview/jQuery/styles.css @@ -6,22 +6,22 @@ } .demo-light { - background: rgba(245, 229, 166, 0.5); + background: var(--dxds-color-surface-utility-yellow-subdued-rest, rgba(245, 229, 166, 0.5)); } .demo-dark { - background: rgba(148, 215, 199, 0.5); + background: var(--dxds-color-surface-utility-green-subdued-rest, rgba(148, 215, 199, 0.5)); } .demo-dark.header { - background: rgba(243, 158, 108, 0.5); + background: var(--dxds-color-surface-utility-red-subdued-rest, rgba(243, 158, 108, 0.5)); } .demo-dark.footer { - background: rgba(123, 155, 207, 0.5); + background: var(--dxds-color-surface-utility-blue-subdued-rest, rgba(123, 155, 207, 0.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/MultipleSelection/Angular/app/app.component.css b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css index 1d82a376a3e9..15c7b467d266 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css index 9614a7464cf3..1cb684ac29f9 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css index 9614a7464cf3..1cb684ac29f9 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue index 201a9d75dc69..a5bedab6b51a 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue +++ b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue @@ -125,7 +125,7 @@ function clearValue() { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css index 9614a7464cf3..1cb684ac29f9 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css +++ b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css @@ -17,7 +17,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { 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..cc42669a831e 100644 --- a/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css @@ -17,19 +17,19 @@ } ::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 { - color: #8080ff; + color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } ::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff3030; + color: var(--dxds-color-content-utility-red-default-rest, #ff3030); } ::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff8080; + color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } ::ng-deep .dx-calendar-week-number-cell .week-number { @@ -43,7 +43,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/Overview/React/styles.css b/apps/demos/Demos/Calendar/Overview/React/styles.css index ad61e3eb9936..f110cdabf871 100644 --- a/apps/demos/Demos/Calendar/Overview/React/styles.css +++ b/apps/demos/Demos/Calendar/Overview/React/styles.css @@ -17,19 +17,19 @@ } .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 { - color: #8080ff; + color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff3030; + color: var(--dxds-color-content-utility-red-default-rest, #ff3030); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff8080; + color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-week-number-cell .week-number { @@ -43,7 +43,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css index ad61e3eb9936..f110cdabf871 100644 --- a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css @@ -17,19 +17,19 @@ } .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 { - color: #8080ff; + color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff3030; + color: var(--dxds-color-content-utility-red-default-rest, #ff3030); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff8080; + color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-week-number-cell .week-number { @@ -43,7 +43,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/Overview/Vue/App.vue b/apps/demos/Demos/Calendar/Overview/Vue/App.vue index a036f5de3c82..046a077ae9bb 100644 --- a/apps/demos/Demos/Calendar/Overview/Vue/App.vue +++ b/apps/demos/Demos/Calendar/Overview/Vue/App.vue @@ -152,19 +152,19 @@ 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 { - color: #8080ff; + color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff3030; + color: var(--dxds-color-content-utility-red-default-rest, #ff3030); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff8080; + color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-week-number-cell .week-number { @@ -178,7 +178,7 @@ function getCellCssClass({ date, view }: { date: Date, view: string }) { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css index ad61e3eb9936..f110cdabf871 100644 --- a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css @@ -17,19 +17,19 @@ } .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 { - color: #8080ff; + color: color-mix(in srgb, var(--dxds-color-content-utility-indigo-default-rest, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff3030; + color: var(--dxds-color-content-utility-red-default-rest, #ff3030); } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday { - color: #ff8080; + color: color-mix(in srgb, var(--dxds-color-content-utility-red-default-rest, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent); } .dx-calendar-week-number-cell .week-number { @@ -43,7 +43,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .option { diff --git a/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css b/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css index 551eda532d37..8e50f5a50c28 100644 --- a/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css +++ b/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css @@ -4,7 +4,6 @@ justify-content: center; aspect-ratio: 16 / 9; width: 100%; - background-color: #fff; } .vehicle__img { diff --git a/apps/demos/Demos/CardView/CardTemplate/React/styles.css b/apps/demos/Demos/CardView/CardTemplate/React/styles.css index 551eda532d37..8e50f5a50c28 100644 --- a/apps/demos/Demos/CardView/CardTemplate/React/styles.css +++ b/apps/demos/Demos/CardView/CardTemplate/React/styles.css @@ -4,7 +4,6 @@ justify-content: center; aspect-ratio: 16 / 9; width: 100%; - background-color: #fff; } .vehicle__img { diff --git a/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css b/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css index 551eda532d37..8e50f5a50c28 100644 --- a/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css @@ -4,7 +4,6 @@ justify-content: center; aspect-ratio: 16 / 9; width: 100%; - background-color: #fff; } .vehicle__img { diff --git a/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue b/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue index e2b4469b3939..3117fc2ef1b0 100644 --- a/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue +++ b/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue @@ -70,7 +70,6 @@ defineEmits(['show-info']); justify-content: center; aspect-ratio: 16 / 9; width: 100%; - background-color: #fff; } .vehicle__img { diff --git a/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css b/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css index 551eda532d37..8e50f5a50c28 100644 --- a/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css +++ b/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css @@ -4,7 +4,6 @@ justify-content: center; aspect-ratio: 16 / 9; width: 100%; - background-color: #fff; } .vehicle__img { diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css index ca85d74b11c2..7936382bf7e8 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css +++ b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css index ca85d74b11c2..7936382bf7e8 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css index ca85d74b11c2..7936382bf7e8 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue index afeeaf8e7bdd..77deaee9f07d 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue +++ b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue @@ -151,7 +151,7 @@ function onAllowColumnReorderingChanged(e: DxCheckBoxTypes.ValueChangedEvent) { .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css index ca85d74b11c2..7936382bf7e8 100644 --- a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css +++ b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css index a090550dad9f..49aaa7be041d 100644 --- a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css +++ b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/React/styles.css b/apps/demos/Demos/CardView/Selection/React/styles.css index a090550dad9f..49aaa7be041d 100644 --- a/apps/demos/Demos/CardView/Selection/React/styles.css +++ b/apps/demos/Demos/CardView/Selection/React/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css index a090550dad9f..49aaa7be041d 100644 --- a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css +++ b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/Vue/App.vue b/apps/demos/Demos/CardView/Selection/Vue/App.vue index 8cb7f16ed602..50eb56c7298e 100644 --- a/apps/demos/Demos/CardView/Selection/Vue/App.vue +++ b/apps/demos/Demos/CardView/Selection/Vue/App.vue @@ -119,7 +119,7 @@ const onAllowSelectAllChange = (e: DxCheckBoxTypes.ValueChangedEvent): void => { .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/CardView/Selection/jQuery/styles.css b/apps/demos/Demos/CardView/Selection/jQuery/styles.css index a090550dad9f..49aaa7be041d 100644 --- a/apps/demos/Demos/CardView/Selection/jQuery/styles.css +++ b/apps/demos/Demos/CardView/Selection/jQuery/styles.css @@ -1,7 +1,7 @@ .options-panel { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css index a87c14188457..80f0b5ddf367 100644 --- a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css +++ b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/React/styles.css b/apps/demos/Demos/Charts/Area/React/styles.css index df540e8ab03d..33a6a74498e0 100644 --- a/apps/demos/Demos/Charts/Area/React/styles.css +++ b/apps/demos/Demos/Charts/Area/React/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/ReactJs/styles.css b/apps/demos/Demos/Charts/Area/ReactJs/styles.css index df540e8ab03d..33a6a74498e0 100644 --- a/apps/demos/Demos/Charts/Area/ReactJs/styles.css +++ b/apps/demos/Demos/Charts/Area/ReactJs/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Charts/Area/Vue/App.vue b/apps/demos/Demos/Charts/Area/Vue/App.vue index 1948b51e2bb6..bb00f361c304 100644 --- a/apps/demos/Demos/Charts/Area/Vue/App.vue +++ b/apps/demos/Demos/Charts/Area/Vue/App.vue @@ -63,7 +63,7 @@ const type = ref(types[0]); diff --git a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css index c6ffdc033671..86e57cf37b03 100644 --- a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css @@ -17,29 +17,17 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; -} - -.dark #gridContainer tr.notes-row td { - color: #777; + color: var(--dxds-color-content-neutral-deep-rest, #999); } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; -} - -.dark #gridContainer tbody.dx-state-hover { - background-color: #484848; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } #gridContainer tbody.dx-state-hover tr.main-row td { - color: #000; -} - -.dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-content-neutral-default-rest, #000); } #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..86e57cf37b03 100644 --- a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css @@ -17,29 +17,17 @@ #gridContainer tr.notes-row td { height: 70px; - color: #999; -} - -.dark #gridContainer tr.notes-row td { - color: #777; + color: var(--dxds-color-content-neutral-deep-rest, #999); } #gridContainer tbody.dx-state-hover { - background-color: #ebebeb; -} - -.dark #gridContainer tbody.dx-state-hover { - background-color: #484848; + background-color: var(--dxds-color-surface-neutral-default-hovered, #ebebeb); } #gridContainer tbody.dx-state-hover tr.main-row td { - color: #000; -} - -.dark #gridContainer tbody.dx-state-hover tr.main-row td { - color: #ccc; + color: var(--dxds-color-content-neutral-default-rest, #000); } #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/RowEditing/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css index b0c2b21cb216..011a09b6849b 100644 --- a/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css +++ b/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep #events { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); padding: 20px; margin-top: 20px; } @@ -35,7 +35,7 @@ ::ng-deep #events ul li { padding: 7px 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd); } ::ng-deep #events ul li:last-child { diff --git a/apps/demos/Demos/DataGrid/RowEditing/React/styles.css b/apps/demos/Demos/DataGrid/RowEditing/React/styles.css index 3f72ac631657..3438a8c9cfaf 100644 --- a/apps/demos/Demos/DataGrid/RowEditing/React/styles.css +++ b/apps/demos/Demos/DataGrid/RowEditing/React/styles.css @@ -1,5 +1,5 @@ #events { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); padding: 20px; margin-top: 20px; } @@ -35,7 +35,7 @@ #events ul li { padding: 7px 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd); } #events ul li:last-child { diff --git a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css index 3f72ac631657..3438a8c9cfaf 100644 --- a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css +++ b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css @@ -1,5 +1,5 @@ #events { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); padding: 20px; margin-top: 20px; } @@ -35,7 +35,7 @@ #events ul li { padding: 7px 0; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #ddd); } #events ul li:last-child { diff --git a/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue b/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue index 8ca02fd24e45..b074ef56cafe 100644 --- a/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue +++ b/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue @@ -96,7 +96,7 @@ const clearEvents = () => { diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css index 88181fa44e06..13a0761c4b69 100644 --- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css +++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css @@ -12,7 +12,3 @@ padding-top: 20px; text-align: justify; } - -.dark #employeeInfo .employeeNotes { - color: rgb(181, 181, 181); -} diff --git a/apps/demos/Demos/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/Diagram/ItemSelection/Angular/app/app.component.css b/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css index 198e059e1729..58ce687bd94d 100644 --- a/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css +++ b/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css @@ -5,7 +5,7 @@ ::ng-deep .selected-data { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } ::ng-deep .selected-data .caption { diff --git a/apps/demos/Demos/Diagram/ItemSelection/React/styles.css b/apps/demos/Demos/Diagram/ItemSelection/React/styles.css index a45420e21bc9..9482e86fd356 100644 --- a/apps/demos/Demos/Diagram/ItemSelection/React/styles.css +++ b/apps/demos/Demos/Diagram/ItemSelection/React/styles.css @@ -5,7 +5,7 @@ .selected-data { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .selected-data .caption { diff --git a/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css b/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css index a45420e21bc9..9482e86fd356 100644 --- a/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css +++ b/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css @@ -5,7 +5,7 @@ .selected-data { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .selected-data .caption { diff --git a/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue b/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue index 2f9587c008ef..84c040e6d48d 100644 --- a/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue +++ b/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue @@ -71,7 +71,7 @@ function onSelectionChanged({ items }: DxDiagramTypes.SelectionChangedEvent) { .selected-data { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .selected-data .caption { diff --git a/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css b/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css index a45420e21bc9..9482e86fd356 100644 --- a/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css +++ b/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css @@ -5,7 +5,7 @@ .selected-data { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .selected-data .caption { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css index bb465cfc1896..3397ea3d2a30 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css @@ -17,7 +17,7 @@ ::ng-deep #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -30,7 +30,7 @@ ::ng-deep .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } ::ng-deep .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css index a4495a5e6e25..33e9a8e9f58c 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css index a4495a5e6e25..33e9a8e9f58c 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue index 9f0232ebe72b..d5d746a920ae 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue @@ -96,7 +96,7 @@ const toolbarContent = [{ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -109,7 +109,7 @@ const toolbarContent = [{ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css index a4495a5e6e25..33e9a8e9f58c 100644 --- a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css +++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css index f993cf9ad852..06bb0acae2cc 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css @@ -13,7 +13,7 @@ ::ng-deep #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ ::ng-deep .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } ::ng-deep .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css index 521c66dfcd01..3bfc5cd583fd 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css index 521c66dfcd01..3bfc5cd583fd 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue index c67eceb32b08..140d8ac38e69 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue @@ -96,7 +96,7 @@ const toolbarContent = [{ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -123,7 +123,7 @@ const toolbarContent = [{ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css index 521c66dfcd01..3bfc5cd583fd 100644 --- a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css +++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css @@ -13,7 +13,7 @@ #toolbar { background-color: var(--dx-component-color-bg); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08)); padding: 5px 10px; z-index: 10000; } @@ -40,7 +40,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .options-container { diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css index 5d6b101f78e1..5918e2dfad00 100644 --- a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css +++ b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css @@ -4,7 +4,7 @@ overflow-y: auto; padding: 18px; margin-top: 40px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } ::ng-deep .segment-size, diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css index 79fa64b7ef1f..094ca36c1b7e 100644 --- a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css +++ b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css @@ -4,7 +4,7 @@ overflow-y: auto; padding: 18px; margin-top: 40px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .segment-size, diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css index 79fa64b7ef1f..094ca36c1b7e 100644 --- a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css +++ b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css @@ -4,7 +4,7 @@ overflow-y: auto; padding: 18px; margin-top: 40px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .segment-size, diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue index ebdfe39d1e46..27143598e143 100644 --- a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue +++ b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue @@ -60,7 +60,7 @@ function onUploadProgress(e: DxFileUploaderTypes.ProgressEvent) { overflow-y: auto; padding: 18px; margin-top: 40px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .segment-size, diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css index 79fa64b7ef1f..094ca36c1b7e 100644 --- a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css +++ b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css @@ -4,7 +4,7 @@ overflow-y: auto; padding: 18px; margin-top: 40px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .segment-size, 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/FileUploader/FileUploading/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css index 24e6a3c02591..883161904eb5 100644 --- a/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css +++ b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css @@ -23,7 +23,7 @@ .options-panel { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/FileUploader/FileUploading/React/styles.css b/apps/demos/Demos/FileUploader/FileUploading/React/styles.css index 6584aaacc9ff..f2c6dae7552b 100644 --- a/apps/demos/Demos/FileUploader/FileUploading/React/styles.css +++ b/apps/demos/Demos/FileUploader/FileUploading/React/styles.css @@ -20,7 +20,7 @@ .options-panel { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css index 6584aaacc9ff..f2c6dae7552b 100644 --- a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css +++ b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css @@ -20,7 +20,7 @@ .options-panel { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue b/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue index 2182a6da1791..9f6b5df20c76 100644 --- a/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue +++ b/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue @@ -113,7 +113,7 @@ function onMultipleChanged(e: DxCheckBoxTypes.ValueChangedEvent) { .options-panel { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css b/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css index c9b5c9827d61..08b259b52b52 100644 --- a/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css +++ b/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css @@ -23,7 +23,7 @@ .options-panel { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css index 2492378a54d2..4a6f68bc0311 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css +++ b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css @@ -7,7 +7,7 @@ ::ng-deep .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } @@ -30,7 +30,7 @@ ::ng-deep .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css index 6347cb029d7e..2224d6b2f9f0 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css index 6347cb029d7e..2224d6b2f9f0 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue index 6805c80acf25..db0cd5348cb9 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue +++ b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue @@ -60,7 +60,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } @@ -83,7 +83,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css index 6347cb029d7e..2224d6b2f9f0 100644 --- a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css +++ b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css @@ -7,7 +7,7 @@ .results > div { flex-basis: 49%; max-width: 50%; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } @@ -30,7 +30,7 @@ .dx-filterbuilder { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 15px; margin: 24px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css index 30f04a1ad4dd..a93651ab3a24 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css @@ -1,6 +1,6 @@ ::ng-deep .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css index df0174f4d4a9..97a64b2b1de7 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css @@ -1,6 +1,6 @@ .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css index df0174f4d4a9..97a64b2b1de7 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css @@ -1,6 +1,6 @@ .filter-container { background-color: transparent; - box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12); + box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)); border-radius: 6px; padding: 5px; width: 500px; diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue index 65c62b0a2c2b..fd86c6bd3560 100644 --- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue +++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue @@ -38,7 +38,7 @@ function buttonClick() { diff --git a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue b/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue deleted file mode 100644 index b65e175e7ccf..000000000000 --- a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue +++ /dev/null @@ -1,15 +0,0 @@ - - diff --git a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css index 290eb4614812..6eeabd1e169b 100644 --- a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css @@ -14,7 +14,7 @@ right: 0; width: 180px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { diff --git a/apps/demos/Demos/Gallery/Overview/React/styles.css b/apps/demos/Demos/Gallery/Overview/React/styles.css index b3a7c00110c2..e5cae37b6afc 100644 --- a/apps/demos/Demos/Gallery/Overview/React/styles.css +++ b/apps/demos/Demos/Gallery/Overview/React/styles.css @@ -14,7 +14,7 @@ right: 0; width: 180px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { diff --git a/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css b/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css index b3a7c00110c2..e5cae37b6afc 100644 --- a/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css @@ -14,7 +14,7 @@ right: 0; width: 180px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { diff --git a/apps/demos/Demos/Gallery/Overview/Vue/styles.css b/apps/demos/Demos/Gallery/Overview/Vue/styles.css index b3a7c00110c2..e5cae37b6afc 100644 --- a/apps/demos/Demos/Gallery/Overview/Vue/styles.css +++ b/apps/demos/Demos/Gallery/Overview/Vue/styles.css @@ -14,7 +14,7 @@ right: 0; width: 180px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { diff --git a/apps/demos/Demos/Gallery/Overview/jQuery/styles.css b/apps/demos/Demos/Gallery/Overview/jQuery/styles.css index b3a7c00110c2..e5cae37b6afc 100644 --- a/apps/demos/Demos/Gallery/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Gallery/Overview/jQuery/styles.css @@ -14,7 +14,7 @@ right: 0; width: 180px; top: 0; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { diff --git a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css index ca581d399c69..b9263266319c 100644 --- a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/React/styles.css b/apps/demos/Demos/Gantt/Appearance/React/styles.css index ca581d399c69..b9263266319c 100644 --- a/apps/demos/Demos/Gantt/Appearance/React/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/React/styles.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css index ca581d399c69..b9263266319c 100644 --- a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue index a5c6c3354246..1b1ac1e8f694 100644 --- a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue +++ b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue @@ -176,7 +176,7 @@ function getTimeLeft(task: Task) { .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -211,22 +211,13 @@ function getTimeLeft(task: Task) { } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } - .custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - } - - .custom-task-edit-tooltip::after { - border-bottom-color: white; - } - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css index ca581d399c69..b9263266319c 100644 --- a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css @@ -4,7 +4,7 @@ .options { margin-bottom: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -39,22 +39,13 @@ } .custom-task-edit-tooltip { - background-color: white; - color: black; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: var(--dxds-color-surface-neutral-default-rest, #fff); + color: var(--dxds-color-content-neutral-default-rest, #000); + box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2)); padding: 10px 12px 12px; border-radius: 3px; } -.custom-task-edit-tooltip::before { - border-top-color: white; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -.custom-task-edit-tooltip::after { - border-bottom-color: white; -} - .custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; diff --git a/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css b/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/ContextMenu/React/styles.css b/apps/demos/Demos/Gantt/ContextMenu/React/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/ContextMenu/React/styles.css +++ b/apps/demos/Demos/Gantt/ContextMenu/React/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue b/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue index aa071881b13f..b34ed6482d1c 100644 --- a/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue +++ b/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue @@ -111,7 +111,7 @@ function onCustomCommandClick(e: DxGanttTypes.CustomCommandEvent) { .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css b/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css index ecd7d84b207c..3bf95106de72 100644 --- a/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css @@ -3,7 +3,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; } diff --git a/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css index 9f50459d0151..7e528f2a8895 100644 --- a/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css +++ b/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css @@ -3,7 +3,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; } diff --git a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css index 9f50459d0151..7e528f2a8895 100644 --- a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css @@ -3,7 +3,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; } diff --git a/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue b/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue index 08bc2b581d7f..3e601021f231 100644 --- a/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue +++ b/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue @@ -243,7 +243,7 @@ function endTaskIndexChanged(e: DxNumberBoxTypes.ValueChangedEvent) { } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; } diff --git a/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css index 9f50459d0151..7e528f2a8895 100644 --- a/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css @@ -3,7 +3,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; } diff --git a/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Sorting/React/styles.css b/apps/demos/Demos/Gantt/Sorting/React/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Sorting/React/styles.css +++ b/apps/demos/Demos/Gantt/Sorting/React/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css b/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Sorting/Vue/App.vue b/apps/demos/Demos/Gantt/Sorting/Vue/App.vue index f2e520433c38..9420c92c7c5d 100644 --- a/apps/demos/Demos/Gantt/Sorting/Vue/App.vue +++ b/apps/demos/Demos/Gantt/Sorting/Vue/App.vue @@ -91,7 +91,7 @@ function sortingChanged() { .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css b/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css index 74cf7ccafe78..85f49a332239 100644 --- a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css @@ -1,3 +1,3 @@ ::ng-deep .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/React/styles.css b/apps/demos/Demos/Gantt/StripLines/React/styles.css index 4c3c4c1e53ef..5d1d19151ace 100644 --- a/apps/demos/Demos/Gantt/StripLines/React/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/React/styles.css @@ -1,3 +1,3 @@ .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css index 4c3c4c1e53ef..5d1d19151ace 100644 --- a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css @@ -1,3 +1,3 @@ .dx-gantt .dx-gantt-tm.current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue index 31a74d311d75..8fdb8c7909d1 100644 --- a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue +++ b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue @@ -47,6 +47,6 @@ const currentTime = new Date(); diff --git a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css index bf78a9ceb6a0..d7c48cda5fe0 100644 --- a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css @@ -3,5 +3,5 @@ } #gantt .current-time { - border-left: 1px solid red; + border-left: 1px solid var(--dxds-color-border-utility-red-default-rest, red); } diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css index c52e2242d0fd..e0bbd3d864e6 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css @@ -3,31 +3,31 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-content-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-content-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-content-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-content-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-content-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-content-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-content-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-inverted-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; } @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css index c52e2242d0fd..e0bbd3d864e6 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css @@ -3,31 +3,31 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-content-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-content-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-content-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-content-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-content-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-content-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-content-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-inverted-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; } @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css index c52e2242d0fd..e0bbd3d864e6 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css @@ -3,31 +3,31 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-content-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-content-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-content-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-content-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-content-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-content-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-content-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-inverted-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; } @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue index 2644c14235a8..8b8711461f51 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue +++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue @@ -83,31 +83,31 @@ function getImagePath(taskId: number) { } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-content-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-content-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-content-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-content-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-content-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-content-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-content-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -119,7 +119,7 @@ function getImagePath(taskId: number) { .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-inverted-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; } @@ -157,7 +157,7 @@ function getImagePath(taskId: number) { bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css index c52e2242d0fd..e0bbd3d864e6 100644 --- a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css @@ -3,31 +3,31 @@ } .custom-task-color-0 { - background-color: #512DA8; + background-color: var(--dxds-color-content-utility-purple-default-rest, #512DA8); } .custom-task-color-1 { - background-color: #2E7D32; + background-color: var(--dxds-color-content-utility-green-default-rest, #2E7D32); } .custom-task-color-2 { - background-color: #1564C0; + background-color: var(--dxds-color-content-utility-blue-default-rest, #1564C0); } .custom-task-color-3 { - background-color: #C2185B; + background-color: var(--dxds-color-content-utility-pink-default-rest, #C2185B); } .custom-task-color-4 { - background-color: #C62828; + background-color: var(--dxds-color-content-utility-red-default-rest, #C62828); } .custom-task-color-5 { - background-color: #DD2C00; + background-color: var(--dxds-color-content-utility-orange-default-rest, #DD2C00); } .custom-task-color-6 { - background-color: #7B1FA2; + background-color: var(--dxds-color-content-utility-indigo-default-rest, #7B1FA2); } .custom-task { @@ -39,7 +39,7 @@ .custom-task-wrapper { padding: 8px; - color: #fff; + color: var(--dxds-color-content-neutral-default-inverted-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; } @@ -77,7 +77,7 @@ bottom: 0; width: 0%; height: 4px; - background: rgba(0, 0, 0, 0.3); + background: color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent); } .dx-gantt .dx-row { diff --git a/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css +++ b/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Validation/React/styles.css b/apps/demos/Demos/Gantt/Validation/React/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Validation/React/styles.css +++ b/apps/demos/Demos/Gantt/Validation/React/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css b/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css +++ b/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Validation/Vue/App.vue b/apps/demos/Demos/Gantt/Validation/Vue/App.vue index 895fed39f650..d7a04ef67029 100644 --- a/apps/demos/Demos/Gantt/Validation/Vue/App.vue +++ b/apps/demos/Demos/Gantt/Validation/Vue/App.vue @@ -80,7 +80,7 @@ const enablePredecessorGap = ref(true); .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gantt/Validation/jQuery/styles.css b/apps/demos/Demos/Gantt/Validation/jQuery/styles.css index de68ed02766e..374fb65be0aa 100644 --- a/apps/demos/Demos/Gantt/Validation/jQuery/styles.css +++ b/apps/demos/Demos/Gantt/Validation/jQuery/styles.css @@ -5,7 +5,7 @@ .options { margin-bottom: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: relative; } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css index bdf942fafa41..60a4cc57c3e3 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css @@ -4,5 +4,5 @@ } ::ng-deep .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue index 82bdcc4990c8..fab35a3aa19d 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue @@ -100,6 +100,6 @@ import { } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css index 19ecaa87e9b4..215cead57305 100644 --- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css +++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css @@ -4,5 +4,5 @@ } .description { - filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16)); + filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-surface-neutral-default-static-dark-rest, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent)); } diff --git a/apps/demos/Demos/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/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css index 0b903dd2516a..28d8cc0161bf 100644 --- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css +++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css index f58144828e66..14fe2e635f8a 100644 --- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css +++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css index f58144828e66..14fe2e635f8a 100644 --- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css +++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue index 02c74095d84b..75b10adb17d7 100644 --- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue +++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue @@ -108,7 +108,7 @@ function updateValues() { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css index f58144828e66..14fe2e635f8a 100644 --- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css +++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css index b19d51bf3f5e..0803b679c869 100644 --- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css +++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css @@ -22,7 +22,7 @@ .options { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); box-sizing: border-box; width: 100%; } diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css index 56bc1eb5b35a..4ab6166805b6 100644 --- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css +++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css @@ -22,7 +22,7 @@ .options { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); box-sizing: border-box; width: 100%; } diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css index 56bc1eb5b35a..4ab6166805b6 100644 --- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css +++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css @@ -22,7 +22,7 @@ .options { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); box-sizing: border-box; width: 100%; } diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue index 3390afe8eec7..9de1848a0b07 100644 --- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue +++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue @@ -104,7 +104,7 @@ const converter = { .options { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); box-sizing: border-box; width: 100%; } diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css index 56bc1eb5b35a..4ab6166805b6 100644 --- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css +++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css @@ -22,7 +22,7 @@ .options { margin-top: 20px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); box-sizing: border-box; width: 100%; } diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css index 8394711c458b..f36fca6d5cc4 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } ::ng-deep .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css index f87be5e72cf5..f08f0c784639 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css @@ -1,5 +1,5 @@ #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css index f87be5e72cf5..f08f0c784639 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css +++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css @@ -1,5 +1,5 @@ #chat-window { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); height: 350px; padding: 10px; } @@ -21,7 +21,7 @@ border-radius: 5px; margin: 5px; padding: 10px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1)); } .name { diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue index 0bd1e9b00649..a162e66b30c3 100644 --- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue +++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue @@ -102,7 +102,7 @@ const mentions = ref([{ diff --git a/apps/demos/Demos/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/RangeSelector/Calculation/Angular/app/app.component.css b/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css index 5479255ecba2..9c4e3cbd691c 100644 --- a/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css +++ b/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css @@ -8,7 +8,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; left: 0; diff --git a/apps/demos/Demos/RangeSelector/Calculation/React/styles.css b/apps/demos/Demos/RangeSelector/Calculation/React/styles.css index 771fb6a02f2a..fdde82a1d177 100644 --- a/apps/demos/Demos/RangeSelector/Calculation/React/styles.css +++ b/apps/demos/Demos/RangeSelector/Calculation/React/styles.css @@ -8,7 +8,7 @@ h2 { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; left: 0; diff --git a/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css b/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css index 771fb6a02f2a..fdde82a1d177 100644 --- a/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css +++ b/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css @@ -8,7 +8,7 @@ h2 { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; left: 0; diff --git a/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue b/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue index 6fd51b0fb0c1..b61998a65f49 100644 --- a/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue +++ b/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue @@ -82,7 +82,7 @@ h2 { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; left: 0; diff --git a/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css b/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css index 771fb6a02f2a..fdde82a1d177 100644 --- a/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css +++ b/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css @@ -8,7 +8,7 @@ h2 { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; left: 0; diff --git a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css index fa101c9159ce..07c32c9941b4 100644 --- a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css @@ -14,7 +14,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; @@ -37,7 +37,7 @@ } #grid { - border: 1px solid black; + border: 1px solid var(--dxds-color-border-neutral-default-static-dark-rest, #000); } .no-left-handle .dx-resizable-handle-top, @@ -77,19 +77,19 @@ } .dx-resizable-handle-right { - border-right: 1px dotted #999; + border-right: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-top { - border-top: 1px dotted #999; + border-top: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-left { - border-left: 1px dotted #999; + border-left: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-bottom { - border-bottom: 1px dotted #999; + border-bottom: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle::after { @@ -99,8 +99,8 @@ height: 9px; border: none; border-radius: 50%; - background-color: #fff; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); + box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24)); } .dx-resizable-handle-right::after { diff --git a/apps/demos/Demos/Resizable/Overview/React/styles.css b/apps/demos/Demos/Resizable/Overview/React/styles.css index fa101c9159ce..07c32c9941b4 100644 --- a/apps/demos/Demos/Resizable/Overview/React/styles.css +++ b/apps/demos/Demos/Resizable/Overview/React/styles.css @@ -14,7 +14,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; @@ -37,7 +37,7 @@ } #grid { - border: 1px solid black; + border: 1px solid var(--dxds-color-border-neutral-default-static-dark-rest, #000); } .no-left-handle .dx-resizable-handle-top, @@ -77,19 +77,19 @@ } .dx-resizable-handle-right { - border-right: 1px dotted #999; + border-right: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-top { - border-top: 1px dotted #999; + border-top: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-left { - border-left: 1px dotted #999; + border-left: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-bottom { - border-bottom: 1px dotted #999; + border-bottom: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle::after { @@ -99,8 +99,8 @@ height: 9px; border: none; border-radius: 50%; - background-color: #fff; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); + box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24)); } .dx-resizable-handle-right::after { diff --git a/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css b/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css index fa101c9159ce..07c32c9941b4 100644 --- a/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css @@ -14,7 +14,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; @@ -37,7 +37,7 @@ } #grid { - border: 1px solid black; + border: 1px solid var(--dxds-color-border-neutral-default-static-dark-rest, #000); } .no-left-handle .dx-resizable-handle-top, @@ -77,19 +77,19 @@ } .dx-resizable-handle-right { - border-right: 1px dotted #999; + border-right: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-top { - border-top: 1px dotted #999; + border-top: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-left { - border-left: 1px dotted #999; + border-left: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-bottom { - border-bottom: 1px dotted #999; + border-bottom: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle::after { @@ -99,8 +99,8 @@ height: 9px; border: none; border-radius: 50%; - background-color: #fff; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); + box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24)); } .dx-resizable-handle-right::after { diff --git a/apps/demos/Demos/Resizable/Overview/Vue/styles.css b/apps/demos/Demos/Resizable/Overview/Vue/styles.css index fa101c9159ce..07c32c9941b4 100644 --- a/apps/demos/Demos/Resizable/Overview/Vue/styles.css +++ b/apps/demos/Demos/Resizable/Overview/Vue/styles.css @@ -14,7 +14,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; @@ -37,7 +37,7 @@ } #grid { - border: 1px solid black; + border: 1px solid var(--dxds-color-border-neutral-default-static-dark-rest, #000); } .no-left-handle .dx-resizable-handle-top, @@ -77,19 +77,19 @@ } .dx-resizable-handle-right { - border-right: 1px dotted #999; + border-right: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-top { - border-top: 1px dotted #999; + border-top: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-left { - border-left: 1px dotted #999; + border-left: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-bottom { - border-bottom: 1px dotted #999; + border-bottom: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle::after { @@ -99,8 +99,8 @@ height: 9px; border: none; border-radius: 50%; - background-color: #fff; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); + box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24)); } .dx-resizable-handle-right::after { diff --git a/apps/demos/Demos/Resizable/Overview/jQuery/styles.css b/apps/demos/Demos/Resizable/Overview/jQuery/styles.css index fa101c9159ce..07c32c9941b4 100644 --- a/apps/demos/Demos/Resizable/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Resizable/Overview/jQuery/styles.css @@ -14,7 +14,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; right: 0; top: 0; @@ -37,7 +37,7 @@ } #grid { - border: 1px solid black; + border: 1px solid var(--dxds-color-border-neutral-default-static-dark-rest, #000); } .no-left-handle .dx-resizable-handle-top, @@ -77,19 +77,19 @@ } .dx-resizable-handle-right { - border-right: 1px dotted #999; + border-right: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-top { - border-top: 1px dotted #999; + border-top: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-left { - border-left: 1px dotted #999; + border-left: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle-bottom { - border-bottom: 1px dotted #999; + border-bottom: 1px dotted var(--dxds-color-border-neutral-default-rest, #999); } .dx-resizable-handle::after { @@ -99,8 +99,8 @@ height: 9px; border: none; border-radius: 50%; - background-color: #fff; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); + box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24)); } .dx-resizable-handle-right::after { 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..390e7ee05bb9 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-subdued-rest, #C6B1DE); text-align: center; } ::ng-deep #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-subdued-rest, #EDBBE7); } ::ng-deep #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-subdued-rest, #F9E2AE); } ::ng-deep #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-subdued-rest, #9FD89F); } ::ng-deep #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-subdued-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..7f1e721a6d21 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-subdued-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-subdued-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-subdued-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-subdued-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-subdued-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..7f1e721a6d21 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-subdued-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-subdued-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-subdued-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-subdued-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-subdued-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..168e63c9a09d 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-subdued-rest, #C6B1DE); text-align: center; } .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-subdued-rest, #EDBBE7); } .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-subdued-rest, #F9E2AE); } .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-subdued-rest, #9FD89F); } .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-subdued-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..65e13ff11bee 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-subdued-rest, #C6B1DE); text-align: center; } #page .content { - background-color: #EDBBE7; + background-color: var(--dxds-color-surface-utility-pink-subdued-rest, #EDBBE7); } #page .left-side-bar { - background-color: #F9E2AE; + background-color: var(--dxds-color-surface-utility-yellow-subdued-rest, #F9E2AE); } #page .right-side-bar { - background-color: #9FD89F; + background-color: var(--dxds-color-surface-utility-green-subdued-rest, #9FD89F); } #page .footer { - background-color: #B4D6FA; + background-color: var(--dxds-color-surface-utility-blue-subdued-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-rest, #000); } diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css index 636ad495a9d8..4855c52987b1 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css @@ -1,5 +1,5 @@ .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css index 636ad495a9d8..4855c52987b1 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css @@ -1,5 +1,5 @@ .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css index 636ad495a9d8..4855c52987b1 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css @@ -1,5 +1,5 @@ .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css index 636ad495a9d8..4855c52987b1 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css @@ -1,5 +1,5 @@ .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css index 636ad495a9d8..4855c52987b1 100644 --- a/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css @@ -1,5 +1,5 @@ .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css index 5d5acf5611b7..9f8212396406 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css @@ -2,10 +2,13 @@ text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + +::ng-deep .dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); +} diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css index 41fb881541dd..6a70278c80f3 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css +++ b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css @@ -2,10 +2,13 @@ text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + +.dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); +} diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css index 41fb881541dd..6a70278c80f3 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css @@ -2,10 +2,13 @@ text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + +.dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); +} diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue index 73d53e97738f..81f31a410d0b 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue +++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue @@ -28,11 +28,14 @@ const styleObject = ref({ backgroundColor: props.itemData.color }); text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + + .dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); + } diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css index 41fb881541dd..6a70278c80f3 100644 --- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css @@ -2,10 +2,13 @@ text-align: center; float: left; margin-right: 12px; - color: white; width: 18px; height: 18px; font-size: 19.5px; border-radius: 18px; margin-top: 2px; } + +.dx-scheduler-appointment-title { + color: var(--dxds-color-content-neutral-default-static-dark-rest, unset); +} diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css index 75eb7273ef59..3f8d9b940569 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 { @@ -13,7 +13,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css index f9853cc68495..c43e46365172 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 { @@ -13,7 +13,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css index f9853cc68495..c43e46365172 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 { @@ -13,7 +13,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue index 922ef39e7bc8..52d040f8e064 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 { @@ -107,7 +107,7 @@ function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) { } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css index f9853cc68495..c43e46365172 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 { @@ -13,7 +13,7 @@ } .options { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; display: flex; align-items: flex-start; diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css index ae46df1fcb67..eb5f63781db2 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css @@ -25,5 +25,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue index 36897e2e2d7d..8a791e85ec64 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue @@ -110,6 +110,6 @@ function onItemDragEnd(e: DxDraggableTypes.DragEndEvent) { } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css index 3b710d6f4094..4e7cac29cd25 100644 --- a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css @@ -24,5 +24,5 @@ } .dx-draggable-dragging > * { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2); + box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2)); } diff --git a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css index 5e279be151fd..5e20477afe78 100644 --- a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Scheduler/Editing/React/styles.css b/apps/demos/Demos/Scheduler/Editing/React/styles.css index 5e279be151fd..5e20477afe78 100644 --- a/apps/demos/Demos/Scheduler/Editing/React/styles.css +++ b/apps/demos/Demos/Scheduler/Editing/React/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css index 5e279be151fd..5e20477afe78 100644 --- a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css @@ -1,6 +1,6 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Scheduler/Editing/Vue/App.vue b/apps/demos/Demos/Scheduler/Editing/Vue/App.vue index 6505e0bc6725..0c5ccc35fc47 100644 --- a/apps/demos/Demos/Scheduler/Editing/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/Editing/Vue/App.vue @@ -93,7 +93,7 @@ function showDeletedToast(e: DxSchedulerTypes.AppointmentDeletedEvent) { diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue index b4fbc0066c8a..d200def588ef 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue @@ -50,23 +50,23 @@ function getCurrentTraining(date: number, employeeID: number) { } .dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue index d9e48370aa50..827888c8646e 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue @@ -39,9 +39,9 @@ withDefaults(defineProps<{ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -86,10 +86,9 @@ withDefaults(defineProps<{ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts index a4c5b52fa50b..a638e51408cf 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts +++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts @@ -1,14 +1,14 @@ export const employees = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js index d753b921c9d5..38383e561616 100644 --- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js +++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js @@ -1,14 +1,14 @@ const employees = [{ text: 'John Heart', id: 1, - color: 'var(--background-color-1)', + color: 'var(--person-color-1)', avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Greta Sims', id: 2, - color: 'var(--background-color-2)', + color: 'var(--person-color-2)', avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css index 97f1dab526a7..57b4c2ee9457 100644 --- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css @@ -16,11 +16,11 @@ .dx-color-scheme-orange-light, .dx-color-scheme-purple-light, .dx-color-scheme-teal-light { - --text-color-1: rgba(0, 0, 0, .6); - --text-color-2: rgba(255, 255, 255, 1); - --disabled-color: rgba(0, 0, 0, 0.38); - --background-color-1: rgba(50, 134, 56, 1); - --background-color-2: rgba(194, 81, 0, 1); + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(0, 0, 0, .6)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(255, 255, 255, 1)); + --disabled-color: var(--dxds-color-content-neutral-deep-rest, rgba(0, 0, 0, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(50, 134, 56, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(194, 81, 0, 1)); } .dx-color-scheme-dark, @@ -32,12 +32,11 @@ .dx-color-scheme-orange-dark, .dx-color-scheme-purple-dark, .dx-color-scheme-teal-dark { - --text-color-1: rgba(255, 255, 255, 1); - --text-color-2: rgba(54, 54, 64, 1); - --disabled-color: rgba(255, 255, 255, 0.38); - --background-color-1: rgba(159, 213, 161, 1); - --background-color-2: rgba(255, 181, 127, 1); - + --text-color-1: var(--dxds-color-content-neutral-subdued-rest, rgba(255, 255, 255, 1)); + --text-color-2: var(--dxds-color-content-neutral-default-inverted-rest, rgba(54, 54, 64, 1)); + --disabled-color: var(--dxds-color-content-neutral-subdued-disabled, rgba(255, 255, 255, 0.38)); + --person-color-1: var(--dxds-color-content-utility-green-default-rest, rgba(159, 213, 161, 1)); + --person-color-2: var(--dxds-color-content-utility-orange-default-rest, rgba(255, 181, 127, 1)); } .dx-scheduler-header .dx-toolbar .dx-button, @@ -77,9 +76,9 @@ overflow: hidden; position: relative; height: 124px; - border: 1px solid rgba(0, 0, 0, 0.24); + border: 1px solid var(--dxds-color-border-neutral-default-static-light-rest, rgba(0, 0, 0, 0.24)); border-radius: 50%; - background-color: rgba(255, 255, 255, 1); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } .avatar img { @@ -124,11 +123,10 @@ line-height: 20px; font-weight: normal; padding: 25px 20px 25px 40px; - color: #707070; } .dx-color-scheme-contrast .info { - color: #fff; + color: var(--dxds-color-content-neutral-default-on-surface-rest, #fff); } .day-cell { @@ -138,24 +136,20 @@ background-repeat: no-repeat; } -.dx-scheduler-appointment { - color: rgba(255, 255, 255, 1); -} - .employee-1 { - background-color: rgba(55, 126, 58, 0.08); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-2 { - background-color: rgba(194, 81, 0, 0.08); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent); } .employee-weekend-1 { - background-color: rgba(55, 126, 58, 0.12); + background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .employee-weekend-2 { - background-color: rgba(194, 81, 0, 0.12); + background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent); } .training-background-0 { diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css index e94ccc57283b..a0819a3ee66e 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css @@ -1,10 +1,10 @@ ::ng-deep .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } @@ -20,8 +20,8 @@ } ::ng-deep .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css index 52890693b7f4..e4f16303f642 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css @@ -1,10 +1,10 @@ .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } @@ -20,8 +20,8 @@ } .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css index 52890693b7f4..e4f16303f642 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css @@ -1,10 +1,10 @@ .dx-scheduler-appointment { - color: #242424; + color: var(--dxds-color-content-neutral-default-static-light-rest, #242424); } .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } @@ -20,8 +20,8 @@ } .conflict-informer { - background-color: #FCEAE8; - color: #C50F1F; + background-color: var(--dxds-color-surface-danger-deep-rest, #FCEAE8); + color: var(--dxds-color-content-danger-default-rest, #C50F1F); font-size: 12px; padding: 0 12px; height: 36px; diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue index 260dc02e5e76..8046841dbbe3 100644 --- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue +++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue @@ -271,12 +271,12 @@ const onOverlappingRuleChanged = (e: DxSelectBoxTypes.ValueChangedEvent) => { diff --git a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css index 7d2c7f569c05..7512e3b11b0c 100644 --- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css +++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css @@ -16,7 +16,7 @@ } .dx-theme-material .widget-container { - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .dx-tabpanel-tabs-position-left .dx-tabpanel-container, @@ -40,7 +40,7 @@ box-sizing: border-box; width: 272px; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -68,7 +68,7 @@ height: 50px; padding: 8px 12px 8px 8px; border-radius: 4px; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15); + box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15)); } .task-item::before { @@ -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, @@ -118,9 +118,9 @@ } .dx-color-scheme-contrast .task-item { - border: 1px solid #fff; + border: 1px solid var(--dxds-color-border-neutral-compound-on-surface-rest, #fff); } .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/Templates/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css index 33e8e593f7ec..6ee03da7bfe5 100644 --- a/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css +++ b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css @@ -27,7 +27,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/TabPanel/Templates/React/styles.css b/apps/demos/Demos/TabPanel/Templates/React/styles.css index ca49d985334a..f156f32c23ff 100644 --- a/apps/demos/Demos/TabPanel/Templates/React/styles.css +++ b/apps/demos/Demos/TabPanel/Templates/React/styles.css @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css index ca49d985334a..f156f32c23ff 100644 --- a/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css +++ b/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue index 6e111a725b49..2e9d45e10c76 100644 --- a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue +++ b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue @@ -112,7 +112,7 @@ const swipeEnabled = ref(true); .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css b/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css index 0335226ae77d..33c73534d716 100644 --- a/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css +++ b/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css @@ -27,7 +27,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css index 6ca9df460d49..76a56e9c6bb3 100644 --- a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css @@ -41,7 +41,7 @@ flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -66,10 +66,10 @@ } ::ng-deep .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-block-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } ::ng-deep .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/Tabs/Overview/React/styles.css b/apps/demos/Demos/Tabs/Overview/React/styles.css index b5813c6b2244..c88b4868da25 100644 --- a/apps/demos/Demos/Tabs/Overview/React/styles.css +++ b/apps/demos/Demos/Tabs/Overview/React/styles.css @@ -41,7 +41,7 @@ flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -66,10 +66,10 @@ } .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css b/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css index b5813c6b2244..c88b4868da25 100644 --- a/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css @@ -41,7 +41,7 @@ flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -66,10 +66,10 @@ } .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/Tabs/Overview/Vue/App.vue b/apps/demos/Demos/Tabs/Overview/Vue/App.vue index d100e9552bfb..fd23707a846b 100644 --- a/apps/demos/Demos/Tabs/Overview/Vue/App.vue +++ b/apps/demos/Demos/Tabs/Overview/Vue/App.vue @@ -166,7 +166,7 @@ watch(scrollByContent, enforceWidthConstraint); flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -191,11 +191,11 @@ watch(scrollByContent, enforceWidthConstraint); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css index b5813c6b2244..9c7620ca6f49 100644 --- a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css +++ b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css @@ -41,7 +41,7 @@ flex-direction: column; flex-shrink: 0; padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .caption { @@ -66,10 +66,10 @@ } .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal { - border-block-end: 1px solid rgb(225, 225, 225, 0.4); + border-block-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical { height: 232px; - border-inline-end: 1px solid rgb(225, 225, 225, 0.4); + border-inline-end: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgb(225, 225, 225, 0.4)); } diff --git a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css index 01e5b0b3bd12..b60adca44fc8 100644 --- a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css +++ b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css @@ -1,5 +1,5 @@ ::ng-deep .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } ::ng-deep .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/React/styles.css b/apps/demos/Demos/TagBox/Grouping/React/styles.css index f997c92f251f..108b01458bb9 100644 --- a/apps/demos/Demos/TagBox/Grouping/React/styles.css +++ b/apps/demos/Demos/TagBox/Grouping/React/styles.css @@ -1,5 +1,5 @@ .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css index f997c92f251f..108b01458bb9 100644 --- a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css +++ b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css @@ -1,5 +1,5 @@ .custom-icon .icon { - color: #f05b41; + color: var(--dxds-color-content-utility-orange-default-rest, #f05b41); } .custom-icon { diff --git a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue index dfb2ee0cce13..ed3d59cddeb6 100644 --- a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue +++ b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue @@ -13,7 +13,7 @@ withDefaults(defineProps<{ diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css index ae902455272f..90b868955ad7 100644 --- a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css +++ b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css @@ -18,6 +18,6 @@ object-fit: contain; margin-right: 10px; border-radius: 25px; - border: 1px solid lightgray; - background-color: #fff; + border: 1px solid var(--dxds-color-border-neutral-default-rest, #d3d3d3); + background-color: var(--dxds-color-surface-neutral-default-static-light-rest, #fff); } diff --git a/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css index 91cbcba74eb8..41e65e8952ef 100644 --- a/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css @@ -5,7 +5,7 @@ .options { padding: 20px; margin-top: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; width: 100%; diff --git a/apps/demos/Demos/TreeList/Resizing/React/styles.css b/apps/demos/Demos/TreeList/Resizing/React/styles.css index 4edea6cc5e09..5929d67c5b73 100644 --- a/apps/demos/Demos/TreeList/Resizing/React/styles.css +++ b/apps/demos/Demos/TreeList/Resizing/React/styles.css @@ -5,7 +5,7 @@ .options { padding: 20px; margin-top: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; width: 100%; diff --git a/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css b/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css index 4edea6cc5e09..5929d67c5b73 100644 --- a/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css +++ b/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css @@ -5,7 +5,7 @@ .options { padding: 20px; margin-top: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; width: 100%; diff --git a/apps/demos/Demos/TreeList/Resizing/Vue/App.vue b/apps/demos/Demos/TreeList/Resizing/Vue/App.vue index e20a6454532c..19dcf7ecaddb 100644 --- a/apps/demos/Demos/TreeList/Resizing/Vue/App.vue +++ b/apps/demos/Demos/TreeList/Resizing/Vue/App.vue @@ -63,7 +63,7 @@ const expandedRowKeys = [1, 3, 6]; .options { padding: 20px; margin-top: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; width: 100%; diff --git a/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css b/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css index 4edea6cc5e09..5929d67c5b73 100644 --- a/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css +++ b/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css @@ -5,7 +5,7 @@ .options { padding: 20px; margin-top: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); position: absolute; bottom: 0; width: 100%; diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css index d680f0903069..83d6ada865d3 100644 --- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css @@ -12,7 +12,7 @@ padding: 20px; margin-left: 20px; font-weight: 600; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } ::ng-deep .log-container > div:first-child { diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css index 43f6830a0055..3181590b7f35 100644 --- a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css +++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css @@ -12,7 +12,7 @@ padding: 20px; margin-left: 20px; font-weight: 600; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .log-container > div:first-child { diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css index 43f6830a0055..3181590b7f35 100644 --- a/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css @@ -12,7 +12,7 @@ padding: 20px; margin-left: 20px; font-weight: 600; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .log-container > div:first-child { diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue b/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue index 3942f68ac98c..c15f7ae1bca5 100644 --- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue +++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue @@ -104,7 +104,7 @@ function contextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent) { .log-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-weight: 600; position: relative; } diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css index f554d4eb59ab..9515357847e8 100644 --- a/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css @@ -12,7 +12,7 @@ padding: 20px; margin-left: 20px; font-weight: 600; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); } .log-container > div:first-child { diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css index 97b7fecad98c..838cdebd4261 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue index d76877e5223c..c2fcfb559ed1 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue @@ -240,7 +240,7 @@ function getTopVisibleNode(component: DxSortableInstance) { padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css index 97b7fecad98c..838cdebd4261 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue index ca750ebcae7c..95da607c674b 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue @@ -247,7 +247,7 @@ function getTopVisibleNode(component: DxSortableInstance) { padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css index aa11fd467b95..63ed4aaa3c56 100644 --- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css @@ -22,7 +22,7 @@ padding: 20px 30px; font-size: 115%; font-weight: bold; - border-right: 1px solid rgba(165, 165, 165, 0.4); + border-right: 1px solid var(--dxds-color-border-neutral-subdued-rest, rgba(165, 165, 165, 0.4)); height: 100%; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css index dc87c3307911..871172628a77 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css @@ -26,10 +26,6 @@ font-size: 24px; } -::ng-deep .dark #product-details > div { - color: #f0f0f0; -} - ::ng-deep .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue index 2b59e7b60940..d28f85ccf584 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue @@ -67,10 +67,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) { font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css index dc87c3307911..871172628a77 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css @@ -26,10 +26,6 @@ font-size: 24px; } -::ng-deep .dark #product-details > div { - color: #f0f0f0; -} - ::ng-deep .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue index dae822a30afa..86ab29b8ec7b 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue @@ -61,10 +61,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) { font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css index ff9fb16cb1e3..6dea8b412006 100644 --- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css @@ -26,10 +26,6 @@ font-size: 24px; } -.dark #product-details > div { - color: #f0f0f0; -} - .hidden { visibility: hidden; } diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css index 3fa0b19e6f3e..a97feb8597fe 100644 --- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css +++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css @@ -11,7 +11,7 @@ ::ng-deep .selected-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-size: 115%; font-weight: bold; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css index c3359c11e892..02d0e2b52889 100644 --- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css +++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css @@ -19,14 +19,14 @@ .selected-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-size: 115%; font-weight: bold; } .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; box-sizing: border-box; } diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css index c3359c11e892..02d0e2b52889 100644 --- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css +++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css @@ -19,14 +19,14 @@ .selected-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-size: 115%; font-weight: bold; } .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; box-sizing: border-box; } diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue index 7338a432faac..05d093526c55 100644 --- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue +++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue @@ -161,7 +161,7 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { .selected-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-size: 115%; font-weight: bold; } @@ -176,7 +176,7 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; box-sizing: border-box; } diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css index d8dd0b37daa4..50e5fc2edf24 100644 --- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css +++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css @@ -11,7 +11,7 @@ .selected-container { padding: 20px; margin-left: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); font-size: 115%; font-weight: bold; } @@ -26,7 +26,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; box-sizing: border-box; } diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css index b8381146afda..d323f69a54ba 100644 --- a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css @@ -9,7 +9,7 @@ ::ng-deep .border { width: 60px; height: 40px; - stroke: rgba(191, 191, 191, 0.25); + stroke: var(--dxds-color-border-neutral-subdued-rest, rgba(191, 191, 191, 0.25)); stroke-width: 1px; fill: transparent; } diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css index 7fa1244f9d7d..0413901f2d35 100644 --- a/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css @@ -9,7 +9,7 @@ .border { width: 60px; height: 40px; - stroke: rgba(191, 191, 191, 0.25); + stroke: var(--dxds-color-border-neutral-subdued-rest, rgba(191, 191, 191, 0.25)); stroke-width: 1px; fill: transparent; } diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css index 7fa1244f9d7d..0413901f2d35 100644 --- a/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css @@ -9,7 +9,7 @@ .border { width: 60px; height: 40px; - stroke: rgba(191, 191, 191, 0.25); + stroke: var(--dxds-color-border-neutral-subdued-rest, rgba(191, 191, 191, 0.25)); stroke-width: 1px; fill: transparent; } diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue b/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue index 20361ed857ab..e4472e82094b 100644 --- a/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue @@ -67,7 +67,7 @@ const formatNumber = new Intl.NumberFormat('en-US', { .border { width: 60px; height: 40px; - stroke: rgba(191, 191, 191, 0.25); + stroke: var(--dxds-color-border-neutral-subdued-rest, rgba(191, 191, 191, 0.25)); stroke-width: 1px; fill: transparent; } diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css index 7fa1244f9d7d..0413901f2d35 100644 --- a/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css @@ -9,7 +9,7 @@ .border { width: 60px; height: 40px; - stroke: rgba(191, 191, 191, 0.25); + stroke: var(--dxds-color-border-neutral-subdued-rest, rgba(191, 191, 191, 0.25)); stroke-width: 1px; fill: transparent; } diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css index ab19881dc5e3..603d765d30ae 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css +++ b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css index 8faa7332ebdc..404c6e402a57 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css index 8faa7332ebdc..404c6e402a57 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css +++ b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue b/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue index 2f635b70960b..0a7b724291b5 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue +++ b/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue @@ -105,7 +105,7 @@ function zoomFactorChanged({ zoomFactor }: DxVectorMapTypes.ZoomFactorChangedEve .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css index 8faa7332ebdc..404c6e402a57 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css +++ b/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css @@ -4,7 +4,7 @@ .options { padding: 20px; - background-color: rgba(191, 191, 191, 0.15); + background-color: var(--dx-color-options-panel-bg); margin-top: 20px; } diff --git a/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png index 3aeb1771dac9..8e656b37487f 100644 Binary files a/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png index b2a6f3fa11aa..3248cbc187c5 100644 Binary files a/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png index 79082562de7e..ccd92f807c89 100644 Binary files a/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png index 26c773cdef97..83adcf7aa551 100644 Binary files a/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png index ef620be63022..1edfda22a549 100644 Binary files a/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png index b7524939a0df..1e650ff4e169 100644 Binary files a/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png index 822aa8ce6adc..b32da09a51b3 100644 Binary files a/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png index 75b12465ad08..ae2765f4b431 100644 Binary files a/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png index 4b427dc15c21..14038dbbba46 100644 Binary files a/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png index 4bacfff61cae..ad7be6817b42 100644 Binary files a/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png index 29a413a83d36..5dad346d004b 100644 Binary files a/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png index c5590a9eba7a..c8d3fe329ba8 100644 Binary files a/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png index 7a37c71a542e..1d2cb4659bc8 100644 Binary files a/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png index 52df0c0650ab..6c862c946ba8 100644 Binary files a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png index 207866b937a4..d913973d2b8f 100644 Binary files a/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png b/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png index 6d2a63ef7ebe..0d5c3eae7ddf 100644 Binary files a/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png index 23be52599757..14312af8f41a 100644 Binary files a/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png and b/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png index d3a97bfb9a8b..c9ec7d65fd88 100644 Binary files a/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png and b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png index 8722b1d45beb..348d546e511d 100644 Binary files a/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png and b/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png index 2e32c09e1b6a..90d7ce32c19d 100644 Binary files a/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png and b/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png index 889049d13440..7d4ae32aebaa 100644 Binary files a/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png and b/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png index 19564eb7f52e..ef5d17eb4a5a 100644 Binary files a/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png and b/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png index 32de59b69303..ca08db4761ae 100644 Binary files a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (material.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (material.blue.light).png index 613e5a847bf4..c15e5ee9e6ee 100644 Binary files a/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (material.blue.light).png and b/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (material.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (material.blue.light).png index 7c0e1d5d12fc..676f83c6cc14 100644 Binary files a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (material.blue.light).png and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (material.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (material.blue.light).png index e6054491064c..9b7cb77a4c91 100644 Binary files a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (material.blue.light).png and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (material.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (material.blue.light).png index c9cc23674313..d49dfbb39803 100644 Binary files a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (material.blue.light).png and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (material.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (material.blue.light).png index e02843a2ebc8..a83801f1597c 100644 Binary files a/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (material.blue.light).png and b/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png index 5d693ea239d5..c8ac7baee988 100644 Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png index 4bbc1d455c54..a27cd380e322 100644 Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png index 0f2b1f96728c..c451ce86c316 100644 Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png index 0f2b1f96728c..c451ce86c316 100644 Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png index 7de218f5d396..4bfe48c4b229 100644 Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png index 270e7564e0f6..e5ffd515011f 100644 Binary files a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png and b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png index 69a9754c71bb..e582c8903402 100644 Binary files a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png and b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png index b917da98778e..a8e47fe3709f 100644 Binary files a/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png and b/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (material.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (material.blue.light).png index fb0a5aeec4a9..c3eddd6fc5ec 100644 Binary files a/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (material.blue.light).png and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png index f7a4e3df866d..4b2b439e9bbd 100644 Binary files a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png index fdc6fa13a3db..ab4983ec6007 100644 Binary files a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png index a1da23090c33..e7cde44e2720 100644 Binary files a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png index 8038b536c61f..069f5d7cd8cc 100644 Binary files a/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png index fad3adc1d944..27828cbd3352 100644 Binary files a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png differ diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png index d99cc578b566..227b3094d905 100644 Binary files a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png differ diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss index 3186b5f06bef..782d2578a3ff 100644 --- a/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss @@ -42,4 +42,5 @@ $theme-marker-mode: null !default; --dx-color-link: #{ds.$color-content-primary-default-rest}; --dx-color-shadow: #{ds.$color-shadow-key}; --dx-color-separator: #{ds.$color-border-neutral-subdued-rest}; + --dx-color-options-panel-bg: color-mix(in srgb, #{ds.$color-surface-neutral-default-inverted-rest} calc(#{ds.$opacity-5} * 100%), transparent); } diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss index 7635e6596312..ec1a7e3e0bfe 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss @@ -296,6 +296,7 @@ $base-invalid-color-hover: $base-danger-hover !default; $base-invalid-color-active: $base-danger-active !default; $base-invalid-color-selected: $base-danger-selected !default; +$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default; :root { --dx-component-color-bg: #{$base-bg}; @@ -311,4 +312,5 @@ $base-invalid-color-selected: $base-danger-selected !default; --dx-color-link: #{$base-link-color}; --dx-color-shadow: #{$base-shadow-color}; --dx-color-separator: #{$base-separator-color}; + --dx-color-options-panel-bg: #{$base-color-options-panel-bg}; } diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss index ec2543c27f6f..752b971d39c7 100644 --- a/packages/devextreme-scss/scss/widgets/generic/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/_colors.scss @@ -407,6 +407,7 @@ $typography-bg: $base-bg !default; $typography-color: $base-text-color !default; $typography-link-color: $base-link-color !default; +$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default; :root { --dx-component-color-bg: #{$base-bg}; @@ -422,4 +423,5 @@ $typography-link-color: $base-link-color !default; --dx-color-link: #{$base-link-color}; --dx-color-shadow: #{$base-shadow-color}; --dx-color-separator: #{$base-border-color}; + --dx-color-options-panel-bg: #{$base-color-options-panel-bg}; } diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss index 9f9d0d689230..d16ee5fe4b67 100644 --- a/packages/devextreme-scss/scss/widgets/material/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss @@ -217,6 +217,8 @@ $typography-bg: $base-bg !default; $typography-color: $base-text-color !default; $typography-link-color: $base-link-color !default; +$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default; + :root { --dx-component-color-bg: #{$base-bg}; --dx-color-main-bg: #{$typography-bg}; @@ -231,4 +233,5 @@ $typography-link-color: $base-link-color !default; --dx-color-link: #{$base-link-color}; --dx-color-shadow: #{$base-shadow-color}; --dx-color-separator: #{$base-border-color}; + --dx-color-options-panel-bg: #{$base-color-options-panel-bg}; }