Kanban colored boards (#16647)

Add a column Color in ProjectBoard and color picker in new / edit project board form.

3 files changed, 54 insertions, 13 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4702cb281e..4e2782a4c8 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -114,6 +114,8 @@
   --color-placeholder-text: #aaa;
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);
+  --color-project-board-dark-label: #555555;
+  --color-project-board-light-label: #a6aab5;
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
   --color-reaction-active-bg: var(--color-primary-alpha-20);
@@ -2090,3 +2092,16 @@ table th[data-sortt-desc] {
   margin-top: -.5em;
   margin-bottom: -.5em;
 }
+
+.precolors {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 3px 10px auto;
+  width: 120px;
+
+  .color {
+    float: left;
+    width: 15px;
+    height: 15px;
+  }
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b52045dae1..1e572ffa7e 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2696,19 +2696,6 @@
       width: 15px;
       height: 15px;
     }
-
-    .precolors {
-      padding-left: 0;
-      padding-right: 0;
-      margin: 3px 10px auto;
-      width: 120px;
-
-      .color {
-        float: left;
-        width: 15px;
-        height: 15px;
-      }
-    }
   }
 }
 
diff --git a/web_src/less/features/projects.less b/web_src/less/features/projects.less
index f9d97a2086..99722b6cc5 100644
--- a/web_src/less/features/projects.less
+++ b/web_src/less/features/projects.less
@@ -23,6 +23,21 @@
 .board-column-header {
   display: flex;
   justify-content: space-between;
+
+  &.dark-label {
+    color: var(--color-project-board-dark-label) !important;
+
+    .board-label {
+      color: var(--color-project-board-dark-label) !important;
+    }
+  }
+  &.light-label {
+    color: var(--color-project-board-light-label) !important;
+
+    .board-label {
+      color: var(--color-project-board-light-label) !important;
+    }
+  }
 }
 
 .board-label {
@@ -81,3 +96,27 @@
 .card-ghost * {
   opacity: 0;
 }
+
+.color-field .minicolors.minicolors-theme-default {
+  display: block;
+
+  .minicolors-input {
+    height: 38px;
+    padding-left: 2rem;
+  }
+
+  .minicolors-swatch {
+    top: 10px;
+  }
+}
+
+.edit-project-board,
+.new-board-modal {
+  .color.picker.column {
+    display: flex;
+
+    .minicolors {
+      flex: 1;
+    }
+  }
+}