pkp/pkp-lib#9626 Use default colors for UsefulTips icon

src/components/Icon/Icon.vue

@@ -1,6 +1,9 @@
 <template>
 	<span :class="classes">
-		<component :is="svgIcons[icon]"></component>
+		<component
+			:is="svgIcons[icon]"
+			:is-primary="isPrimary ? true : null"
+		></component>
 	</span>
 </template>
 
@@ -229,13 +232,18 @@ const props = defineProps({
 	icon: {type: String, required: true},
 	/** Use when an icon sits alongside text to ensure adequate spacing between the icon and text. */
 	inline: Boolean,
+	/** If the icon color should use primary color (blue) */
+	isPrimary: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const classes = computed(() => {
 	return {
 		'inline-block align-middle rtl:scale-x-[-1]': true,
 		'text-negative': props.icon === 'Error',
-		'text-success': props.icon === 'Help',
+		'text-primary': props.isPrimary,
 		'pkpIcon--inline': props.inline,
 	};
 });

src/components/Icon/icons/UsefulTips.vue

@@ -2,11 +2,22 @@
 	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
 			d="M15 17C15 14 19 12 19 8C19 4 16 1 12 1C8 1 5 4 5 8C5 12 9 14 9 17V20C9 22 10 23 12 23C14 23 15 22 15 20V17ZM9 18H15H9Z"
+			:fill="props.isPrimary ? null : '#FDF873'"
 		/>
 		<path
 			d="M9 18H15M15 17C15 14 19 12 19 8C19 4 16 1 12 1C8 1 5 4 5 8C5 12 9 14 9 17V20C9 22 10 23 12 23C14 23 15 22 15 20V17Z"
-			stroke="currentColor"
+			:stroke="props.isPrimary ? 'currentColor' : '#002C40'"
 			stroke-width="2"
 		/>
 	</svg>
 </template>
+
+<script setup>
+const props = defineProps({
+	/** If the icon color should use primary color (blue) */
+	isPrimary: {
+		type: Boolean,
+		default: false,
+	},
+});
+</script>

src/components/Tooltip/Tooltip.stories.js

@@ -22,3 +22,10 @@ export const Default = {
 		label: 'Tooltip for the demonstration component.',
 	},
 };
+
+export const IsPrimary = {
+	args: {
+		tooltip: 'This tooltip uses the primary color',
+		isPrimary: true,
+	},
+};

src/components/Tooltip/Tooltip.vue

@@ -8,7 +8,7 @@
 		:class="flex ? 'flex' : 'inline-block'"
 		@click.prevent
 	>
-		<Icon icon="UsefulTips" :class="iconClass" />
+		<Icon icon="UsefulTips" :class="iconClass" :is-primary="isPrimary" />
 		<span v-if="label" class="-screenReader">{{ label }}</span>
 	</span>
 </template>
@@ -44,6 +44,11 @@ export default {
 			type: Boolean,
 			default: () => false,
 		},
+		/** If the icon color should use primary color (blue) */
+		isPrimary: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		iconClass() {