ColorBox demo: use dx-icon-color for Hero outline (#30376)

Zedwag · web-flow · commit 53f78cfe5e89 · 2025-07-15T11:31:11.000+02:00
diff --git a/apps/demos/Demos/ColorBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/ColorBox/Overview/Angular/app/app.component.css
@@ -37,23 +37,3 @@
 .brush {
   color: #f05b41;
 }
-
-.superhero,
-::ng-deep .dx-color-scheme-greenmist .superhero {
-  color: #404041;
-}
-
-::ng-deep .dx-color-scheme-dark .superhero,
-::ng-deep .dx-color-scheme-darkmoon .superhero,
-::ng-deep .dx-color-scheme-darkviolet .superhero,
-::ng-deep .dx-color-scheme-blue-dark .superhero,
-::ng-deep .dx-color-scheme-orange-dark .superhero,
-::ng-deep .dx-color-scheme-teal-dark .superhero,
-::ng-deep .dx-color-scheme-lime-dark .superhero,
-::ng-deep .dx-color-scheme-purple-dark .superhero {
-  color: #a8a8a8;
-}
-
-::ng-deep .dx-color-scheme-contrast .superhero {
-  color: #fff;
-}
diff --git a/apps/demos/Demos/ColorBox/Overview/Angular/app/app.component.html b/apps/demos/Demos/ColorBox/Overview/Angular/app/app.component.html
@@ -63,7 +63,7 @@
         >
           <use href="../../../../images/Brush.svg#brush"></use>
         </svg>
-        <svg class="superhero" width="360" height="254">
+        <svg class="superhero dx-color-icon" width="360" height="254">
           <use href="../../../../images/Hero.svg#hero"></use>
         </svg>
       </div>
diff --git a/apps/demos/Demos/ColorBox/Overview/React/App.tsx b/apps/demos/Demos/ColorBox/Overview/React/App.tsx
@@ -76,7 +76,7 @@ function App() {
             <svg className="brush" width="360" height="254" style={{ color }}>
                 <use href="../../../../images/Brush.svg#brush"></use>
               </svg>
-              <svg className="superhero" width="360" height="254">
+              <svg className="superhero dx-color-icon" width="360" height="254">
                 <use href="../../../../images/Hero.svg#hero"></use>
               </svg>
           </div>
diff --git a/apps/demos/Demos/ColorBox/Overview/React/styles.css b/apps/demos/Demos/ColorBox/Overview/React/styles.css
@@ -37,23 +37,3 @@
 .brush {
   color: #f05b41;
 }
-
-.superhero,
-.dx-color-scheme-greenmist .superhero {
-  color: #404041;
-}
-
-.dx-color-scheme-dark .superhero,
-.dx-color-scheme-darkmoon .superhero,
-.dx-color-scheme-darkviolet .superhero,
-.dx-color-scheme-blue-dark .superhero,
-.dx-color-scheme-orange-dark .superhero,
-.dx-color-scheme-teal-dark .superhero,
-.dx-color-scheme-lime-dark .superhero,
-.dx-color-scheme-purple-dark .superhero {
-  color: #a8a8a8;
-}
-
-.dx-color-scheme-contrast .superhero {
-  color: #fff;
-}
diff --git a/apps/demos/Demos/ColorBox/Overview/ReactJs/App.js b/apps/demos/Demos/ColorBox/Overview/ReactJs/App.js
@@ -79,7 +79,7 @@ function App() {
               <use href="../../../../images/Brush.svg#brush"></use>
             </svg>
             <svg
-              className="superhero"
+              className="superhero dx-color-icon"
               width="360"
               height="254"
             >
diff --git a/apps/demos/Demos/ColorBox/Overview/ReactJs/styles.css b/apps/demos/Demos/ColorBox/Overview/ReactJs/styles.css
@@ -37,23 +37,3 @@
 .brush {
   color: #f05b41;
 }
-
-.superhero,
-.dx-color-scheme-greenmist .superhero {
-  color: #404041;
-}
-
-.dx-color-scheme-dark .superhero,
-.dx-color-scheme-darkmoon .superhero,
-.dx-color-scheme-darkviolet .superhero,
-.dx-color-scheme-blue-dark .superhero,
-.dx-color-scheme-orange-dark .superhero,
-.dx-color-scheme-teal-dark .superhero,
-.dx-color-scheme-lime-dark .superhero,
-.dx-color-scheme-purple-dark .superhero {
-  color: #a8a8a8;
-}
-
-.dx-color-scheme-contrast .superhero {
-  color: #fff;
-}
diff --git a/apps/demos/Demos/ColorBox/Overview/Vue/App.vue b/apps/demos/Demos/ColorBox/Overview/Vue/App.vue
@@ -59,7 +59,7 @@
           <svg class="brush" width="360" height="254" :style="{ color }">
             <use :href='"../../../../images/Brush.svg#brush"'></use>
           </svg>
-          <svg class="superhero" width="360" height="254">
+          <svg class="superhero dx-color-icon" width="360" height="254">
             <use :href='"../../../../images/Hero.svg#hero"'></use>
           </svg>
         </div>
@@ -127,24 +127,4 @@ const eventHandlingLabel = { 'aria-label': 'Event Handling' };
 .brush {
   color: #f05b41;
 }
-
-.superhero,
-.dx-color-scheme-greenmist .superhero {
-  color: #404041;
-}
-
-.dx-color-scheme-dark .superhero,
-.dx-color-scheme-darkmoon .superhero,
-.dx-color-scheme-darkviolet .superhero,
-.dx-color-scheme-blue-dark .superhero,
-.dx-color-scheme-orange-dark .superhero,
-.dx-color-scheme-teal-dark .superhero,
-.dx-color-scheme-lime-dark .superhero,
-.dx-color-scheme-purple-dark .superhero {
-  color: #a8a8a8;
-}
-
-.dx-color-scheme-contrast .superhero {
-  color: #fff;
-}
 </style>
diff --git a/apps/demos/Demos/ColorBox/Overview/jQuery/index.html b/apps/demos/Demos/ColorBox/Overview/jQuery/index.html
@@ -53,7 +53,7 @@
               <svg class="brush" width="360" height="254">
                 <use href="../../../../images/Brush.svg#brush"></use>
               </svg>
-              <svg class="superhero" width="360" height="254">
+              <svg class="superhero dx-color-icon" width="360" height="254">
                 <use href="../../../../images/Hero.svg#hero"></use>
               </svg>
             </div>
diff --git a/apps/demos/Demos/ColorBox/Overview/jQuery/styles.css b/apps/demos/Demos/ColorBox/Overview/jQuery/styles.css
@@ -37,23 +37,3 @@
 .brush {
   color: #f05b41;
 }
-
-.superhero,
-.dx-color-scheme-greenmist .superhero {
-  color: #404041;
-}
-
-.dx-color-scheme-dark .superhero,
-.dx-color-scheme-darkmoon .superhero,
-.dx-color-scheme-darkviolet .superhero,
-.dx-color-scheme-blue-dark .superhero,
-.dx-color-scheme-orange-dark .superhero,
-.dx-color-scheme-teal-dark .superhero,
-.dx-color-scheme-lime-dark .superhero,
-.dx-color-scheme-purple-dark .superhero {
-  color: #a8a8a8;
-}
-
-.dx-color-scheme-contrast .superhero {
-  color: #fff;
-}
diff --git a/apps/demos/testing/etalons/ColorBox-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/ColorBox-Overview (fluent.blue.light).png
diff --git a/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`	`>`
`64`	`64`	`<use href="../../../../images/Brush.svg#brush"></use>`
`65`	`65`	`</svg>`
`66`		`- <svg class="superhero" width="360" height="254">`
	`66`	`+ <svg class="superhero dx-color-icon" width="360" height="254">`
`67`	`67`	`<use href="../../../../images/Hero.svg#hero"></use>`
`68`	`68`	`</svg>`
`69`	`69`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ function App() {`
`79`	`79`	`<use href="../../../../images/Brush.svg#brush"></use>`
`80`	`80`	`</svg>`
`81`	`81`	`<svg`
`82`		`- className="superhero"`
	`82`	`+ className="superhero dx-color-icon"`
`83`	`83`	`width="360"`
`84`	`84`	`height="254"`
`85`	`85`	`>`