loop for column colors

www/kanban/app-kanban.less

@@ -21,14 +21,16 @@
     @board-bg: #eaeaea;
 
     @palette0: #C9C9C9; // Default bg color for header
-    @palette1: #FFD4D4;
+
-    @palette2: #FFDECA;
+    @kanban-colors:
-    @palette3: #FFE69C;
+        #FFD4D4,
-    @palette4: #DBFFB7;
+        #FFDECA,
-    @palette5: #AFFDC2;
+        #FFE69C,
-    @palette6: #C9FFFE;
+        #DBFFB7,
-    @palette7: #C8D6FF;
+        #AFFDC2,
-    @palette8: #E4CAFF;
+        #C9FFFE,
+        #C8D6FF,
+        #E4CAFF;
 
     .kanban-board-header {
         background-color: @palette0;
@@ -46,54 +48,18 @@
     .cp-kanban-palette-nocolor {
         background-color: @palette0;
     }
-    .cp-kanban-palette-color1 {
+
-        background-color: @palette1;
+    .kanban-colors(@kanban-colors; @index) when (@index > 0){
-        &.kanban-board-inner {
+        .kanban-colors(@kanban-colors; (@index - 1));
-            background-color: lighten(@palette1, 5%);
+        @color: extract(@kanban-colors, @index);
-        }
+        .cp-kanban-palette-color@{index}{
-    }
+            background-color: @color;
-    .cp-kanban-palette-color2 {
+            &.kanban-board-inner {
-        background-color: @palette2;
+                background-color: fade(@color, 50%);
-        &.kanban-board-inner {
+            }
-            background-color: lighten(@palette2, 5%);
-        }
-    }
-    .cp-kanban-palette-color3 {
-        background-color: @palette3;
-        &.kanban-board-inner {
-            background-color: lighten(@palette3, 10%);
-        }
-    }
-    .cp-kanban-palette-color4 {
-        background-color: @palette4;
-        &.kanban-board-inner {
-            background-color: lighten(@palette4, 10%);
-        }
-    }
-    .cp-kanban-palette-color5 {
-        background-color: @palette5;
-        &.kanban-board-inner {
-            background-color: lighten(@palette5, 10%);
-        }
-    }
-    .cp-kanban-palette-color6 {
-        background-color: @palette6;
-        &.kanban-board-inner {
-            background-color: lighten(@palette6, 5%);
-        }
-    }
-    .cp-kanban-palette-color7 {
-        background-color: @palette7;
-        &.kanban-board-inner {
-            background-color: lighten(@palette7, 5%);
-        }
-    }
-    .cp-kanban-palette-color8 {
-        background-color: @palette8;
-        &.kanban-board-inner {
-            background-color: lighten(@palette8, 5%);
         }
     }
+    .kanban-colors(@kanban-colors; length(@kanban-colors));
 
     .cp-kanban-edit-modal {
         display: flex;