Info message updates

- added new `success` style
- added two propes `filled` and `outlined` with which you can modify the look and switch on or off these props separatly

gitbutler-ui/src/lib/components/InfoMessage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-	export type MessageStyle = 'neutral' | 'error' | 'pop' | 'warn';
+	export type MessageStyle = 'neutral' | 'error' | 'pop' | 'warn' | 'success';
 </script>
 
 <script lang="ts">
@@ -9,6 +9,8 @@
 	import type iconsJson from '../icons/icons.json';
 
 	export let style: MessageStyle = 'neutral';
+	export let outlined: boolean = true;
+	export let filled: boolean = false;
 	export let title: string | undefined = undefined;
 	export let primary: string | undefined = undefined;
 	export let secondary: string | undefined = undefined;
@@ -20,21 +22,24 @@
 		neutral: 'info',
 		pop: 'info',
 		warn: 'warning',
-		error: 'error'
+		error: 'error',
+		success: 'success'
 	};
 
 	const iconColorMap: { [Key in MessageStyle]: IconColor } = {
 		neutral: 'pop',
 		pop: 'pop',
 		warn: 'warn',
-		error: 'error'
+		error: 'error',
+		success: 'success'
 	};
 
 	const primaryButtonMap: { [Key in MessageStyle]: ButtonColor } = {
 		neutral: 'primary',
 		pop: 'primary',
 		warn: 'warn',
-		error: 'error'
+		error: 'error',
+		success: 'success'
 	};
 </script>
 
@@ -44,6 +49,9 @@
 	class:error={style == 'error'}
 	class:pop={style == 'pop'}
 	class:warn={style == 'warn'}
+	class:success={style == 'success'}
+	class:has-border={outlined}
+	class:has-background={filled}
 	class:shadow
 >
 	<Icon name={iconMap[style]} color={iconColorMap[style]} />
@@ -78,6 +86,7 @@
 		padding: var(--space-16);
 		border-radius: var(--radius-m);
 		gap: var(--space-12);
+		background-color: var(--clr-theme-container-light);
 	}
 	.info-message__inner {
 		display: flex;
@@ -96,26 +105,60 @@
 		gap: var(--space-6);
 		justify-content: flex-end;
 	}
+	.info-message__text {
+		&:empty {
+			display: none;
+		}
+	}
+
+	/* MODIFIERS */
 	.neutral {
-		background-color: var(--clr-theme-container-light);
-		border: 1px solid var(--clr-theme-container-outline-light);
+		border: 0 solid var(--clr-theme-container-outline-light);
 	}
 	.error {
-		background-color: var(--clr-theme-container-light);
-		border: 1px solid var(--clr-theme-scale-err-60);
+		border: 0 solid var(--clr-theme-scale-err-60);
 	}
 	.pop {
-		background-color: var(--clr-theme-container-light);
-		border: 1px solid var(--clr-theme-scale-pop-50);
+		border: 0 solid var(--clr-theme-scale-pop-50);
 	}
 	.warn {
-		background-color: var(--clr-theme-container-light);
-		border: 1px solid var(--clr-theme-scale-warn-60);
+		border: 0 solid var(--clr-theme-scale-warn-60);
+	}
+	.success {
+		border: 0 solid var(--clr-theme-scale-succ-60);
 	}
 	.shadow {
 		box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
 	}
 
+	/* OUTLINED */
+
+	.has-border {
+		border-width: 1px;
+	}
+
+	.has-background {
+		&.neutral {
+			background-color: var(--clr-theme-container-pale);
+		}
+
+		&.error {
+			background-color: var(--clr-theme-err-container);
+		}
+
+		&.pop {
+			background-color: var(--clr-theme-pop-container);
+		}
+
+		&.warn {
+			background-color: var(--clr-theme-warn-container);
+		}
+
+		&.success {
+			background-color: var(--clr-theme-succ-container);
+		}
+	}
+
 	/* rendered markdown requires global */
 	:global(.info-message__text a) {
 		cursor: pointer;

gitbutler-ui/src/styles/tokens.css

@@ -79,17 +79,17 @@
 	--clr-theme-container-outline-sub: var(--clr-core-ntrl-50);
 	--clr-theme-container-pale: var(--clr-core-ntrl-90);
 	--clr-theme-container-sub: var(--clr-core-ntrl-80);
-	--clr-theme-err-container: var(--clr-core-err-95);
+	--clr-theme-err-container: var(--clr-core-err-90);
 	--clr-theme-err-element: var(--clr-core-err-50);
 	--clr-theme-err-on-container: var(--clr-core-err-40);
 	--clr-theme-err-on-element: var(--clr-core-err-90);
 	--clr-theme-err-outline: var(--clr-core-err-50);
-	--clr-theme-pop-container: var(--clr-core-pop-95);
+	--clr-theme-pop-container: var(--clr-core-pop-90);
 	--clr-theme-pop-element: var(--clr-core-pop-50);
 	--clr-theme-pop-on-container: var(--clr-core-pop-10);
 	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
 	--clr-theme-pop-outline: var(--clr-core-pop-40);
-	--clr-theme-purple-container: var(--clr-core-purple-95);
+	--clr-theme-purple-container: var(--clr-core-purple-90);
 	--clr-theme-purple-element: var(--clr-core-purple-50);
 	--clr-theme-purple-on-container: var(--clr-core-purple-40);
 	--clr-theme-purple-on-element: var(--clr-core-purple-90);
@@ -150,12 +150,12 @@
 	--clr-theme-scale-warn-70: var(--clr-core-warn-70);
 	--clr-theme-scale-warn-80: var(--clr-core-warn-80);
 	--clr-theme-scale-warn-90: var(--clr-core-warn-90);
-	--clr-theme-succ-container: var(--clr-core-succ-95);
+	--clr-theme-succ-container: var(--clr-core-succ-90);
 	--clr-theme-succ-element: var(--clr-core-succ-50);
 	--clr-theme-succ-on-container: var(--clr-core-succ-40);
 	--clr-theme-succ-on-element: var(--clr-core-succ-90);
 	--clr-theme-succ-outline: var(--clr-core-succ-40);
-	--clr-theme-warn-container: var(--clr-core-warn-95);
+	--clr-theme-warn-container: var(--clr-core-warn-90);
 	--clr-theme-warn-element: var(--clr-core-warn-50);
 	--clr-theme-warn-on-container: var(--clr-core-warn-40);
 	--clr-theme-warn-on-element: var(--clr-core-warn-90);