Merge pull request #2206 from anyproto/feat/color-icons-palette

Author: ra3orblade

src/json/theme.ts

@@ -14,15 +14,15 @@ export default {
 		},
 		bg: {
 			grey: '#9b9b9b',
-			yellow: '#e9d619',
-			orange: '#fe9a00',
-			red: '#fb592c',
-			pink: '#f6339a',
-			purple: '#ad46ff',
-			blue: '#3e58eb',
+			yellow: '#dcc000',
+			orange: '#f08a00',
+			red: '#f04520',
+			pink: '#f030a0',
+			purple: '#a840f0',
+			blue: '#4a60f0',
 			ice: '#2aa7ee',
 			teal: '#00bba7',
-			lime: '#5dd400',
+			lime: '#5ec400',
 		},
 
 		list: [ 'grey', 'yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'ice', 'teal', 'lime' ],
@@ -38,16 +38,16 @@ export default {
 
 		color: {
 			default: '#252525',
-			grey: '#b6b6b6',
-			yellow: '#e9d619',
-			orange: '#fe9a00',
-			red: '#fb592c',
-			pink: '#f6339a',
-			purple: '#ad46ff',
-			blue: '#3e58eb',
+			grey: '#9b9b9b',
+			yellow: '#dcc000',
+			orange: '#f08a00',
+			red: '#f04520',
+			pink: '#f030a0',
+			purple: '#a840f0',
+			blue: '#4a60f0',
 			ice: '#2aa7ee',
 			teal: '#00bba7',
-			lime: '#5dd400',
+			lime: '#5ec400',
 		},
 
 		textColor: {
@@ -137,16 +137,16 @@ export default {
 
 		color: {
 			default: '#e1e1e1',
-			grey: '#737373',
-			yellow: '#e9d619',
-			orange: '#fe9a00',
-			red: '#fb592c',
-			pink: '#f6339a',
-			purple: '#ad46ff',
-			blue: '#3e58eb',
+			grey: '#9b9b9b',
+			yellow: '#dcc000',
+			orange: '#f08a00',
+			red: '#f04520',
+			pink: '#f030a0',
+			purple: '#a840f0',
+			blue: '#4a60f0',
 			ice: '#2aa7ee',
 			teal: '#00bba7',
-			lime: '#5dd400',
+			lime: '#5ec400',
 		},
 
 		textColor: {
@@ -181,7 +181,7 @@ export default {
 			primaryColor: '#bb2528',
 			primaryTextColor: '#fff',
 			primaryBorderColor: '#7c0000',
-			lineColor: '#F8b229',
+			lineColor: '#f8b229',
 			secondaryColor: '#006100',
 			tertiaryColor: '#fff'
 		},
@@ -227,7 +227,7 @@ export default {
 				strokeHover: 'rgba(160, 160, 160, 0.7)', // Brighter hover
 			},
 			canvas: {
-				background: '#1F1F1F',
+				background: '#1f1f1f',
 				grid: '#333333',
 				nodeCenter: 'rgba(40, 40, 40, 0.95)', // Darker center for contrast
 				nodeGlow: 'rgba(80, 100, 140, 0.1)', // Very weak general glow

src/scss/_vars.scss

@@ -128,6 +128,19 @@
 	--color-tag-teal: #0caaa3;
 	--color-tag-lime: #64b90f;
 
+	/* Icons */
+
+	--color-icons-yellow: #dcc000;
+	--color-icons-orange: #f08a00;
+	--color-icons-red: #f04520;
+	--color-icons-pink: #f030a0;
+	--color-icons-purple: #a840f0;
+	--color-icons-blue: #4a60f0;
+	--color-icons-ice: #2aa7ee;
+	--color-icons-teal: #00bba7;
+	--color-icons-lime: #5ec400;
+	--color-icons-grey: #9b9b9b;
+
 	/* Font */
 
 	--font-size-9: 9px;

src/scss/component/icon.scss

@@ -17,16 +17,16 @@
 };
 
 .icon.iconColor-default { color: var(--color-control-accent); }
-.icon.iconColor-grey { color: var(--color-grey); }
-.icon.iconColor-yellow { color: var(--color-yellow); }
-.icon.iconColor-orange { color: var(--color-orange); }
-.icon.iconColor-red { color: var(--color-red); }
-.icon.iconColor-pink { color: var(--color-pink); }
-.icon.iconColor-purple { color: var(--color-purple); }
-.icon.iconColor-blue { color: var(--color-blue); }
-.icon.iconColor-ice { color: var(--color-ice); }
-.icon.iconColor-teal { color: var(--color-teal); }
-.icon.iconColor-lime { color: var(--color-lime); }
+.icon.iconColor-grey { color: var(--color-icons-grey); }
+.icon.iconColor-yellow { color: var(--color-icons-yellow); }
+.icon.iconColor-orange { color: var(--color-icons-orange); }
+.icon.iconColor-red { color: var(--color-icons-red); }
+.icon.iconColor-pink { color: var(--color-icons-pink); }
+.icon.iconColor-purple { color: var(--color-icons-purple); }
+.icon.iconColor-blue { color: var(--color-icons-blue); }
+.icon.iconColor-ice { color: var(--color-icons-ice); }
+.icon.iconColor-teal { color: var(--color-icons-teal); }
+.icon.iconColor-lime { color: var(--color-icons-lime); }
 .icon.iconColor-darkGrey { color: var(--color-dark-grey); }
 .icon.iconColor-darkOrange { color: var(--color-dark-orange); }
 .icon.iconColor-darkRed { color: var(--color-dark-red); }

src/scss/component/iconObject.scss

@@ -55,7 +55,7 @@
 		.icon.hasSvg { color: var(--color-text-tertiary); }
 
 		&.isDone {
-			.icon.hasSvg { color: var(--color-lime); }
+			.icon.hasSvg { color: var(--color-icons-lime); }
 		}
 	}
 

src/scss/component/tag.scss

@@ -30,10 +30,19 @@
 		&.canEdit { padding-right: 20px; }
 	}
 
-	&.isSelect {
-		border: 1px solid var(--color-shape-secondary); background: var(--color-bg-primary) !important;
-	}
+	&.isSelect { border: 1px solid var(--color-shape-secondary); background: var(--color-bg-primary) !important; }
 	&.isSelect {
 		.tagRemove { display: none; }
+
+		&.textColor-grey .inner { color: var(--color-grey); }
+		&.textColor-yellow .inner { color: var(--color-yellow); }
+		&.textColor-orange .inner { color: var(--color-orange); }
+		&.textColor-red .inner { color: var(--color-red); }
+		&.textColor-pink .inner { color: var(--color-pink); }
+		&.textColor-purple .inner { color: var(--color-purple); }
+		&.textColor-blue .inner { color: var(--color-blue); }
+		&.textColor-ice .inner { color: var(--color-ice); }
+		&.textColor-teal .inner { color: var(--color-teal); }
+		&.textColor-lime .inner { color: var(--color-lime); }
 	}
 }