refactor(components)!: remove warning variants

packages/components/src/Alert.tsx

@@ -17,7 +17,6 @@ const alert = cva(styles.base, {
 			error: styles.error,
 			info: styles.info,
 			success: styles.success,
-			warning: styles.warning,
 		},
 		variant: {
 			default: styles.default,

packages/components/src/TagGroup.tsx

@@ -26,7 +26,6 @@ const tag = cva(styles.tag, {
 		variant: {
 			default: styles.default,
 			success: styles.success,
-			warning: styles.warning,
 			error: styles.error,
 			beta: styles.beta,
 			federal: styles.federal,

packages/components/src/Toast.tsx

@@ -34,7 +34,6 @@ const icon = cva(styles.icon, {
 			error: styles.error,
 			info: styles.info,
 			success: styles.success,
-			warning: styles.warning,
 		},
 	},
 	defaultVariants: {
@@ -192,8 +191,6 @@ const ToastQueue = {
 		toastQueue.add({ children, status: 'info' }, { ...options, timeout }),
 	success: (children: ToastContent['children'], options?: ToastOptions) =>
 		toastQueue.add({ children, status: 'success' }, { ...options, timeout }),
-	warning: (children: ToastContent['children'], options?: ToastOptions) =>
-		toastQueue.add({ children, status: 'warning' }, { ...options, timeout }),
 };
 
 const SnackbarQueue = {
@@ -209,10 +206,6 @@ const SnackbarQueue = {
 		const key = snackbarQueue.add({ ...content, status: 'success' }, { ...options });
 		return () => snackbarQueue.close(key);
 	},
-	warning: (content: SnackbarContent, options?: ToastOptions) => {
-		const key = snackbarQueue.add({ ...content, status: 'warning' }, { ...options });
-		return () => snackbarQueue.close(key);
-	},
 };
 
 /**

packages/components/src/styles/Alert.module.css

@@ -18,30 +18,27 @@
 	&.success .icon {
 		color: var(--lp-color-fill-feedback-success);
 	}
-
-	&.warning .icon {
-		color: var(--lp-color-fill-feedback-warning);
-	}
 }
 
 .default {
 	align-items: flex-start;
 	padding: var(--lp-spacing-400);
+	border-style: solid;
+	border-width: 1px;
 
 	&.error {
 		background-color: var(--lp-color-bg-feedback-error);
+		border-color: var(--lp-color-border-feedback-error);
 	}
 
 	&.info {
 		background-color: var(--lp-color-bg-feedback-info);
+		border-color: var(--lp-color-border-feedback-info);
 	}
 
 	&.success {
 		background-color: var(--lp-color-bg-feedback-success);
-	}
-
-	&.warning {
-		background-color: var(--lp-color-bg-feedback-warning);
+		border-color: var(--lp-color-border-feedback-success);
 	}
 
 	&:has(.heading) {

packages/components/src/styles/TagGroup.module.css

@@ -62,11 +62,6 @@
 	background-color: var(--lp-color-bg-feedback-success);
 }
 
-.warning {
-	color: var(--lp-color-text-feedback-warning);
-	background-color: var(--lp-color-bg-feedback-warning);
-}
-
 .error {
 	color: var(--lp-color-text-feedback-error);
 	background-color: var(--lp-color-bg-feedback-error);

packages/components/src/styles/Toast.module.css

@@ -72,19 +72,15 @@
 	}
 
 	& .info {
-		fill: var(--lp-color-cyan-400);
+		fill: var(--lp-color-fill-feedback-info);
 	}
 
 	& .error {
-		fill: var(--lp-color-pink-500);
-	}
-
-	& .warning {
-		fill: var(--lp-color-yellow-500);
+		fill: var(--lp-color-fill-feedback-error);
 	}
 
 	& .success {
-		fill: var(--lp-color-system-green-500);
+		fill: var(--lp-color-fill-feedback-success);
 	}
 
 	&[data-focus-visible] {

packages/components/stories/Alert.stories.tsx

@@ -52,18 +52,6 @@ export const Success: Story = {
 	},
 };
 
-export const Warning: Story = {
-	args: {
-		children: (
-			<>
-				<Heading>Heading</Heading>
-				<Text>Content</Text>
-			</>
-		),
-		status: 'warning',
-	},
-};
-
 export const Subtle: Story = {
 	args: {
 		children: <Text>Content</Text>,

packages/components/stories/TagGroup.stories.tsx

@@ -101,7 +101,6 @@ export const Variants: Story = {
 				<TagList>
 					<Tag>Default</Tag>
 					<Tag variant="success">Success</Tag>
-					<Tag variant="warning">Warning</Tag>
 					<Tag variant="error">Error</Tag>
 					<Tag variant="beta">Beta</Tag>
 					<Tag variant="federal">Federal</Tag>