Add tokenfield

customize.dist/src/less2/include/colortheme.less

@@ -311,6 +311,12 @@
 @cp_history-bg2: #BBB;
 @cp_history-fg: @cp_toolbar-bottom-fg;
 
+// Tokenfield
+@cp_token-bg: @cryptpad_color_lighter_grey;
+@cp_token-fg: @cryptpad_text_col;
+@cp_token-bg-hover: @cryptpad_color_light_grey;
+@cp_token-invalid: @cryptpad_color_warn_red;
+
 // Usergrid
 @cp_usergrid-fg: @cryptpad_text_col;
 @cp_usergrid-selected-bg: @colortheme_logo-2;

customize.dist/src/less2/include/tokenfield.less

@@ -40,28 +40,23 @@
             box-sizing: border-box;
             display: inline-flex;
             align-items: center;
-            background-color: rgba(0, 0, 0, 0.1);
+            background-color: @cp_token-bg;
             white-space: nowrap;
             margin: 2px 0;
             margin-right: 5px;
             height: 24px;
             vertical-align: middle;
             cursor: default;
-            color: @cryptpad_text_col;
+            color: @cp_token-fg;
 
             &:hover {
-                background-color: rgba(0, 0, 0, 0.2);
+                background-color: @cp_token-bg-hover;
             }
             &.invalid {
                 background: none;
                 border: 1px solid transparent;
                 border-radius: 0;
-                border-bottom: 1px dotted #d9534f;
+                border-bottom: 1px dotted @cp_token-invalid;
-            }
-            &.invalid.active {
-                background: #ededed;
-                border: 1px solid #ededed;
-                border-radius: 3px;
             }
             .token-label {
                 display: inline-block;
@@ -82,15 +77,8 @@
                 vertical-align: middle;
                 padding-right: 4px;
             }
-            &.active {
-                border-color: rgba(82, 168, 236, 0.8);
-            }
-            &.duplicate {
-                border-color: #ebccd1;
-            }
         }
         .token-input {
-            background: none;
             flex: 1;
             border: 0;
             padding: 0;