Merge pull request #16408 from johndoknjas/square-highlight-misalignment

Square highlight misalignment in `.svg` board themes

modules/pref/src/main/Theme.scala

@@ -21,7 +21,7 @@ sealed trait ThemeObject:
 object Theme extends ThemeObject:
 
   val all = List(
-    new Theme("brown", "svg/brown.svg"),
+    new Theme("brown", "brown.png"),
     new Theme("wood", "wood.jpg"),
     new Theme("wood2", "wood2.jpg"),
     new Theme("wood3", "wood3.jpg"),
@@ -30,20 +30,20 @@ object Theme extends ThemeObject:
     new Theme("maple2", "maple2.jpg"),
     new Theme("horsey", "horsey.jpg"),
     new Theme("leather", "leather.jpg"),
-    new Theme("blue", "svg/blue.svg"),
+    new Theme("blue", "blue.png"),
     new Theme("blue2", "blue2.jpg"),
     new Theme("blue3", "blue3.jpg"),
     new Theme("canvas", "canvas2.jpg"),
     new Theme("blue-marble", "blue-marble.jpg"),
-    new Theme("ic", "svg/ic.svg"),
-    new Theme("green", "svg/green.svg"),
+    new Theme("ic", "ic.png"),
+    new Theme("green", "green.png"),
     new Theme("marble", "marble.jpg"),
     new Theme("green-plastic", "green-plastic.png"),
     new Theme("olive", "olive.jpg"),
     new Theme("grey", "grey.jpg"),
     new Theme("metal", "metal.jpg"),
     new Theme("newspaper", "svg/newspaper.svg"),
-    new Theme("purple", "svg/purple.svg"),
+    new Theme("purple", "purple.png"),
     new Theme("purple-diag", "purple-diag.png"),
     new Theme("pink", "pink-pyramid.png")
   )

ui/common/css/theme/board/_boards.scss

@@ -1,6 +1,6 @@
 $board-themes-2d: (
   'blue': (
-    file-ext: 'svg',
+    file-ext: 'png',
     coord-color-white: #dee3e6,
     coord-color-black: #788a94,
   ),
@@ -61,12 +61,12 @@ $board-themes-2d: (
     coord-color-black: #c28e16,
   ),
   'green': (
-    file-ext: 'svg',
+    file-ext: 'png',
     coord-color-white: #ffffdd,
     coord-color-black: #6d8753,
   ),
   'brown': (
-    file-ext: 'svg',
+    file-ext: 'png',
     coord-color-white: #f0d9b5,
     coord-color-black: #946f51,
   ),
@@ -107,7 +107,7 @@ $board-themes-2d: (
     coord-color-black: #8d8d8d,
   ),
   'purple': (
-    file-ext: 'svg',
+    file-ext: 'png',
     coord-color-white: #9f90b0,
     coord-color-black: #7d4a8d,
   ),
@@ -117,7 +117,7 @@ $board-themes-2d: (
     coord-color-black: #957ab0,
   ),
   'ic': (
-    file-ext: 'svg',
+    file-ext: 'png',
     coord-color-white: #ececec,
     coord-color-black: #c1c18e,
   ),

ui/dasher/css/_board.scss

@@ -85,7 +85,7 @@
         $name-override: map-get($theme, name-override);
         $file-name: if($name-override, $name-override, $name);
 
-        @if $file-ext == 'svg' {
+        @if index(('brown', 'blue', 'purple', 'green', 'ic', 'newspaper'), $file-name) {
           background-image: img-url('board/svg/#{$file-name}.svg');
           background-size: 256px;
         } @else {