fix(components): warning Tag variant and token added (#1719)

* fix(components): add Tag variant

* fix(components): changeset added

* fix(tokens): snapshot test updated to include new warning feedback color tokens

* fix(components): add Tag variant

* fix(components): changeset added

* fix(tokens): snapshot test updated to include new warning feedback color tokens

* fix(components): use white bg only for multiple selection mode to avoid overriding original bg

---------

Co-authored-by: Susanna Nevalainen <[email protected]>

Author: Zuzze

.changeset/stupid-cases-wink.md

@@ -0,0 +1,6 @@
+---
+"@launchpad-ui/components": minor
+"@launchpad-ui/tokens": minor
+---
+
+Warning feedback tokens and Tag warning variant added

packages/components/src/TagGroup.tsx

@@ -36,6 +36,7 @@ const tagStyles = cva(styles.tag, {
 			federal: styles.federal,
 			new: styles.new,
 			info: styles.info,
+			warning: styles.warning,
 		},
 	},
 	defaultVariants: {

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

@@ -30,7 +30,7 @@
 		color: var(--lp-color-text-interactive-disabled);
 	}
 
-	&[data-selection-mode] {
+	&[data-selection-mode='multiple'] {
 		background-color: var(--lp-color-bg-interactive-secondary-base);
 		border: 1px solid var(--lp-color-border-interactive-secondary-base);
 	}
@@ -71,6 +71,11 @@
 	background-color: var(--lp-color-bg-feedback-error);
 }
 
+.warning {
+	color: var(--lp-color-text-feedback-warning);
+	background-color: var(--lp-color-bg-feedback-warning);
+}
+
 .beta {
 	color: var(--lp-color-text-product-beta);
 	background-color: var(--lp-color-bg-product-beta);

packages/components/stories/TagGroup.stories.tsx

@@ -97,6 +97,7 @@ 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>

packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap

@@ -19,6 +19,7 @@ exports[`Tokens > builds dark tokens 1`] = `
   --lp-color-bg-feedback-error: var(--lp-color-red-900);
   --lp-color-bg-feedback-info: var(--lp-color-blue-900);
   --lp-color-bg-feedback-success: var(--lp-color-green-900);
+  --lp-color-bg-feedback-warning: var(--lp-color-brand-orange-dark);
   --lp-color-bg-interactive-primary-base: var(--lp-color-blue-600);
   --lp-color-bg-interactive-primary-active: var(--lp-color-blue-600);
   --lp-color-bg-interactive-primary-focus: var(--lp-color-blue-500);
@@ -56,6 +57,7 @@ exports[`Tokens > builds dark tokens 1`] = `
   --lp-color-text-feedback-error: var(--lp-color-red-400);
   --lp-color-text-feedback-success: var(--lp-color-green-400);
   --lp-color-text-feedback-info: var(--lp-color-blue-400);
+  --lp-color-text-feedback-warning: var(--lp-color-brand-orange-light);
   --lp-color-text-interactive-base: var(--lp-color-blue-400);
   --lp-color-text-interactive-active: var(--lp-color-purple-400);
   --lp-color-text-interactive-secondary: var(--lp-color-gray-400);
@@ -210,6 +212,7 @@ exports[`Tokens > builds default tokens 1`] = `
   --lp-color-bg-feedback-error: var(--lp-color-red-50);
   --lp-color-bg-feedback-info: var(--lp-color-blue-50);
   --lp-color-bg-feedback-success: var(--lp-color-green-50);
+  --lp-color-bg-feedback-warning: var(--lp-color-brand-orange-light);
   --lp-color-bg-interactive-primary-base: var(--lp-color-blue-500);
   --lp-color-bg-interactive-primary-active: var(--lp-color-blue-500);
   --lp-color-bg-interactive-primary-focus: var(--lp-color-blue-600);
@@ -254,6 +257,7 @@ exports[`Tokens > builds default tokens 1`] = `
   --lp-color-text-feedback-error: var(--lp-color-red-600);
   --lp-color-text-feedback-success: var(--lp-color-green-600);
   --lp-color-text-feedback-info: var(--lp-color-blue-600);
+  --lp-color-text-feedback-warning: var(--lp-color-brand-orange-dark);
   --lp-color-text-interactive-base: var(--lp-color-blue-600);
   --lp-color-text-interactive-active: var(--lp-color-purple-700);
   --lp-color-text-interactive-primary-base: var(--lp-color-white-950);

packages/tokens/tokens/color-aliases.dark.json

@@ -11,6 +11,9 @@
 				},
 				"success": {
 					"$value": "{color.green.900}"
+				},
+				"warning": {
+					"$value": "{color.brand.orange.dark}"
 				}
 			},
 			"interactive": {
@@ -175,6 +178,9 @@
 				},
 				"info": {
 					"$value": "{color.blue.400}"
+				},
+				"warning": {
+					"$value": "{color.brand.orange.light}"
 				}
 			},
 			"interactive": {

packages/tokens/tokens/color-aliases.default.json

@@ -21,6 +21,9 @@
 				},
 				"success": {
 					"$value": "{color.green.50}"
+				},
+				"warning": {
+					"$value": "{color.brand.orange.light}"
 				}
 			},
 			"interactive": {
@@ -299,6 +302,9 @@
 				},
 				"info": {
 					"$value": "{color.blue.600}"
+				},
+				"warning": {
+					"$value": "{color.brand.orange.dark}"
 				}
 			},
 			"interactive": {