refactor: Used css variables also added missing colors

frappe/public/js/frappe/widgets/widget_dialog.js

@@ -240,7 +240,7 @@ class ShortcutDialog extends WidgetDialog {
 				fieldtype: "Select",
 				fieldname: "color",
 				label: __("Color"),
-				options: ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan", "Teal"],
+				options: ["Grey", "Green", "Red", "Orange", "Pink", "Yellow", "Blue", "Cyan"],
 				default: "Grey",
 				onchange: () => {
 					let color = this.dialog.fields_dict.color.value.toLowerCase();
@@ -248,7 +248,7 @@ class ShortcutDialog extends WidgetDialog {
 					if (!$select.parent().find('.color-box').get(0)) {
 						$(`<div class="color-box"></div>`).insertBefore($select.get(0));
 					}
-					$select.parent().find('.color-box').get(0).style.backgroundColor = color;
+					$select.parent().find('.color-box').get(0).style.backgroundColor = `var(--text-on-${color})`;
 				}
 			},
 			{

frappe/public/scss/common/css_variables.scss

@@ -24,6 +24,17 @@
 	--blue-100: #D3E9FC;
 	--blue-50 : #F0F8FE;
 
+	--cyan-900: #006464; 
+	--cyan-800: #007272;
+	--cyan-700: #008b8b;
+	--cyan-600: #02c5c5;
+	--cyan-500: #00ffff;
+	--cyan-400: #2ef8f8;
+	--cyan-300: #6efcfc;
+	--cyan-200: #a0f8f8;
+	--cyan-100: #c7fcfc;
+	--cyan-50 : #dafafa;
+
 	--green-900: #2D401D;
 	--green-800: #44622A;
 	--green-700: #518B21;
@@ -151,6 +162,8 @@
 	--bg-gray: var(--gray-200);
 	--bg-light-gray: var(--gray-100);
 	--bg-purple: var(--purple-100);
+	--bg-pink: var(--pink-50);
+	--bg-cyan: var(--cyan-50);
 
 	--text-on-blue: var(--blue-600);
 	--text-on-light-blue: var(--blue-500);
@@ -163,6 +176,8 @@
 	--text-on-gray: var(--gray-600);
 	--text-on-light-gray: var(--gray-800);
 	--text-on-purple: var(--purple-500);
+	--text-on-pink: var(--pink-500);
+	--text-on-cyan: var(--cyan-600);
 
 	--awesomplete-hover-bg: var(--control-bg);
 

frappe/public/scss/common/indicator.scss

@@ -77,6 +77,16 @@
 	@include indicator-pill-color('green');
 }
 
+.indicator.cyan {
+	@include indicator-color('cyan');
+}
+
+.indicator-pill.cyan,
+.indicator-pill-right.cyan,
+.indicator-pill-round.cyan {
+	@include indicator-pill-color('cyan');
+}
+
 .indicator.blue {
 	@include indicator-color('blue');
 }
@@ -131,6 +141,16 @@
 	@include indicator-pill-color('red');
 }
 
+.indicator.pink {
+	@include indicator-color('pink');
+}
+
+.indicator-pill.pink,
+.indicator-pill-right.pink,
+.indicator-pill-round.pink {
+	@include indicator-pill-color('pink');
+}
+
 .indicator-pill.darkgrey,
 .indicator-pill-right.darkgrey,
 .indicator-pill-round.darkgrey {