Added color options

styles.css

@@ -195,3 +195,65 @@
 	border-radius: var(--radius-s);
 	border-left: 3px solid var(--text-error);
 }
+
+.taskweaver-color-picker-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-3);
+	margin-top: var(--size-4-2);
+}
+
+.taskweaver-preset-colors {
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+	gap: var(--size-4-2);
+}
+
+.taskweaver-color-option {
+	width: 36px;
+	height: 36px;
+	border-radius: var(--radius-s);
+	cursor: pointer;
+	border: 2px solid transparent;
+	transition: all 0.2s;
+	position: relative;
+}
+
+.taskweaver-color-option:hover {
+	transform: scale(1.1);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.taskweaver-color-option.selected {
+	border-color: var(--text-normal);
+	box-shadow: 0 0 0 2px var(--background-primary);
+}
+
+.taskweaver-custom-color {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+}
+
+.taskweaver-custom-color label {
+	color: var(--text-muted);
+	font-size: var(--font-ui-small);
+}
+
+.taskweaver-custom-color input[type="color"] {
+	width: 50px;
+	height: 36px;
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-s);
+	cursor: pointer;
+	background: transparent;
+}
+
+.taskweaver-custom-color input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 2px;
+}
+
+.taskweaver-custom-color input[type="color"]::-webkit-color-swatch {
+	border: none;
+	border-radius: var(--radius-s);
+}