feat(tokens)!: refresh colors

.changeset/eighty-avocados-add.md

@@ -0,0 +1,19 @@
+---
+"@launchpad-ui/progress-bubbles": patch
+"@launchpad-ui/clipboard": patch
+"@launchpad-ui/tooltip": patch
+"@launchpad-ui/avatar": patch
+"@launchpad-ui/banner": patch
+"@launchpad-ui/button": patch
+"@launchpad-ui/alert": patch
+"@launchpad-ui/modal": patch
+"@launchpad-ui/chip": patch
+"@launchpad-ui/tag": patch
+"@launchpad-ui/popover": patch
+"@launchpad-ui/menu": patch
+"@launchpad-ui/select": patch
+"@launchpad-ui/form": patch
+"@launchpad-ui/core": patch
+---
+
+Use updated tokens

.changeset/honest-bottles-divide.md

@@ -0,0 +1,12 @@
+---
+"@launchpad-ui/components": minor
+"@launchpad-ui/tokens": minor
+"@launchpad-ui/vars": minor
+"launchpad-design-system": patch
+---
+
+Refresh colors:
+
+- Remove cyan, pink, yellow, and system primitives
+- Add green, red, and brand primitives
+- Remove warning and flair aliases/variants

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

@@ -12,6 +12,15 @@
 	--lp-component-alert-notification-flair-strong-button-color-text-hover: var(--lp-color-black-300);
 	--lp-component-alert-notification-flair-strong-button-color-text-focus: var(--lp-color-black-300);
 	--lp-component-alert-notification-flair-strong-button-color-text-active: var(--lp-color-black-300);
+	--lp-component-alert-color-bg-warning: var(--lp-color-brand-yellow-light);
+	--lp-component-alert-fill-warning: var(--lp-color-brand-yellow-dark);
+	--lp-component-alert-border-warning: var(--lp-color-brand-yellow-dark);
+}
+
+[data-theme='dark'] {
+	--lp-component-alert-color-bg-warning: var(--lp-color-brand-orange-dark);
+	--lp-component-alert-fill-warning: var(--lp-color-brand-yellow-base);
+	--lp-component-alert-border-warning: var(--lp-color-brand-orange-base);
 }
 
 .Alert {
@@ -90,7 +99,7 @@
 }
 
 .Alert.Alert--warning .Alert-icon {
-	fill: var(--lp-color-fill-feedback-warning);
+	fill: var(--lp-component-alert-fill-warning);
 }
 
 .Alert.Alert--error .Alert-icon {
@@ -170,8 +179,8 @@
 }
 
 .Alert.Alert--warning.Alert--bordered {
-	border: var(--lp-border-width-200) solid var(--lp-color-border-feedback-warning);
-	background-color: var(--lp-color-bg-feedback-warning);
+	border: var(--lp-border-width-200) solid var(--lp-component-alert-border-warning);
+	background-color: var(--lp-component-alert-color-bg-warning);
 }
 
 .Alert.Alert--error.Alert--bordered {

packages/avatar/src/styles/Avatar.module.css

@@ -19,19 +19,19 @@
 }
 
 .Avatar--color0 {
-	background-color: var(--lp-color-yellow-900);
+	background-color: var(--lp-color-brand-yellow-base);
 }
 
 .Avatar--color1 {
 	background-color: var(--lp-color-blue-600);
 }
 
 .Avatar--color2 {
-	background-color: var(--lp-color-pink-500);
+	background-color: var(--lp-color-brand-pink-base);
 }
 
 .Avatar--color3 {
-	background-color: var(--lp-color-cyan-500);
+	background-color: var(--lp-color-brand-cyan-base);
 }
 
 .Avatar--color4 {

packages/banner/src/styles/Banner.module.css

@@ -2,15 +2,17 @@
 
 :root,
 [data-theme='default'] {
-	--lp-component-banner-color-bg-error: var(--lp-color-system-red-200);
-	--lp-component-banner-color-bg-warning: var(--lp-color-system-yellow-200);
-	--lp-component-banner-color-bg-info: var(--lp-color-blue-200);
+	--lp-component-banner-color-bg-error: var(--lp-color-bg-feedback-error);
+	--lp-component-banner-color-bg-warning: var(--lp-color-brand-yellow-light);
+	--lp-component-banner-color-bg-info: var(--lp-color-bg-feedback-info);
+	--lp-component-banner-fill-warning: var(--lp-color-brand-yellow-dark);
+	--lp-component-banner-border-warning: var(--lp-color-brand-yellow-dark);
 }
 
 [data-theme='dark'] {
-	--lp-component-banner-color-bg-error: hsl(0 30% 17%);
-	--lp-component-banner-color-bg-warning: hsl(46 29% 17%);
-	--lp-component-banner-color-bg-info: hsl(232 32% 18%);
+	--lp-component-banner-color-bg-warning: var(--lp-color-brand-orange-dark);
+	--lp-component-banner-fill-warning: var(--lp-color-brand-yellow-base);
+	--lp-component-banner-border-warning: var(--lp-color-brand-orange-base);
 }
 
 .Banner {
@@ -46,7 +48,7 @@
 }
 
 .Banner.Banner--warning {
-	border-bottom-color: var(--lp-color-border-feedback-warning);
+	border-bottom-color: var(--lp-component-banner-border-warning);
 	background-color: var(--lp-component-banner-color-bg-warning);
 }
 
@@ -68,5 +70,5 @@
 }
 
 .Banner.Banner--warning .Banner-icon {
-	fill: var(--lp-color-fill-feedback-warning);
+	fill: var(--lp-component-banner-fill-warning);
 }

packages/button/src/styles/Button.module.css

@@ -7,14 +7,50 @@
 	--lp-component-button-color-bg-destructive-active: var(
 		--lp-color-bg-interactive-destructive-active
 	);
+	--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-500);
+	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-600);
+	--lp-color-border-interactive-primary-flair-focus: var(--lp-color-purple-800);
+	--lp-color-border-interactive-primary-flair-active: var(--lp-color-purple-800);
+	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-100);
+	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-300);
+	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-400);
+	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-400);
+	--lp-color-border-interactive-secondary-flair-base: var(--lp-color-purple-600);
+	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-700);
+	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-800);
+	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-800);
+	--lp-color-text-interactive-flair-base: var(--lp-color-purple-700);
+	--lp-color-text-interactive-flair-hover: var(--lp-color-purple-800);
+	--lp-color-text-interactive-flair-focus: var(--lp-color-purple-900);
+	--lp-color-text-interactive-flair-active: var(--lp-color-purple-900);
+	--lp-color-bg-interactive-tertiary-flair-base: transparent;
+	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-100);
+	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-300);
+	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-300);
 }
 
 [data-theme='dark'] {
 	--lp-component-button-color-bg-default: transparent;
-	--lp-component-button-color-border-destructive: var(--lp-color-system-red-600);
-	--lp-component-button-color-bg-destructive-hover: var(--lp-color-system-red-900);
-	--lp-component-button-color-bg-destructive-focus: var(--lp-color-system-red-900);
-	--lp-component-button-color-bg-destructive-active: var(--lp-color-system-red-900);
+	--lp-component-button-color-border-destructive: var(--lp-color-red-600);
+	--lp-component-button-color-bg-destructive-hover: var(--lp-color-red-900);
+	--lp-component-button-color-bg-destructive-focus: var(--lp-color-red-900);
+	--lp-component-button-color-bg-destructive-active: var(--lp-color-red-900);
+	--lp-color-border-interactive-primary-flair-base: var(--lp-color-purple-600);
+	--lp-color-border-interactive-primary-flair-hover: var(--lp-color-purple-700);
+	--lp-color-bg-interactive-secondary-flair-base: var(--lp-color-purple-950);
+	--lp-color-bg-interactive-secondary-flair-hover: var(--lp-color-purple-900);
+	--lp-color-bg-interactive-secondary-flair-focus: var(--lp-color-purple-950);
+	--lp-color-bg-interactive-secondary-flair-active: var(--lp-color-purple-950);
+	--lp-color-border-interactive-secondary-flair-hover: var(--lp-color-purple-500);
+	--lp-color-border-interactive-secondary-flair-focus: var(--lp-color-purple-700);
+	--lp-color-border-interactive-secondary-flair-active: var(--lp-color-purple-700);
+	--lp-color-text-interactive-flair-base: var(--lp-color-purple-400);
+	--lp-color-text-interactive-flair-hover: var(--lp-color-purple-400);
+	--lp-color-text-interactive-flair-focus: var(--lp-color-purple-400);
+	--lp-color-text-interactive-flair-active: var(--lp-color-purple-400);
+	--lp-color-bg-interactive-tertiary-flair-hover: var(--lp-color-purple-900);
+	--lp-color-bg-interactive-tertiary-flair-focus: var(--lp-color-purple-950);
+	--lp-color-bg-interactive-tertiary-flair-active: var(--lp-color-purple-950);
 }
 
 .Button,
@@ -163,9 +199,9 @@
 	--Button-icon-color-fill-destructive-active: var(--lp-color-fill-interactive-destructive);
 
 	/* BUTTON ICON DISABLED */
-	--Button-icon-color-fill-disabled: var(--lp-color-fill-interactive-disabled);
-	--Button-icon-color-fill-disabled-hover: var(--lp-color-fill-interactive-disabled);
-	--Button-icon-color-fill-disabled-active: var(--lp-color-fill-interactive-disabled);
+	--Button-icon-color-fill-disabled: var(--lp-color-text-interactive-disabled);
+	--Button-icon-color-fill-disabled-hover: var(--lp-color-text-interactive-disabled);
+	--Button-icon-color-fill-disabled-active: var(--lp-color-text-interactive-disabled);
 
 	/* SEARCH BAR CLEAR BUTTON ICON */
 	--Button-icon-clear-color-fill: var(--lp-color-blue-700);
@@ -270,6 +306,10 @@
 	width: 100%;
 }
 
+.Button-icon {
+	fill: currentColor;
+}
+
 .Button:not(.Button--icon) > .Button-icon {
 	vertical-align: middle;
 }
@@ -373,21 +413,21 @@
 	box-shadow: var(--Button-box-shadow-active);
 }
 
-.Button--icon.Button--primary .Button-icon {
+.Button--icon.Button--primary :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary);
 }
 
 .Button--primary:hover .Button-icon,
-.Button--icon.Button--primary:hover .Button-icon {
+.Button--icon.Button--primary:hover :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-hover);
 }
 
-.Button--icon.Button--primary:focus-visible .Button-icon {
+.Button--icon.Button--primary:focus-visible :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-focus);
 }
 
 .Button--primary:active .Button-icon,
-.Button--icon.Button--primary:active .Button-icon {
+.Button--icon.Button--primary:active :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-active);
 }
 
@@ -500,19 +540,19 @@
 	box-shadow: var(--Button-box-shadow-focus);
 }
 
-.Button--icon.Button--destructive .Button-icon {
+.Button--icon.Button--destructive :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive);
 }
 
-.Button--icon.Button--destructive:hover .Button-icon {
+.Button--icon.Button--destructive:hover :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-hover);
 }
 
-.Button--icon.Button--destructive:focus-visible .Button-icon {
+.Button--icon.Button--destructive:focus-visible :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-focus);
 }
 
-.Button--icon.Button--destructive:active .Button-icon {
+.Button--icon.Button--destructive:active :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-active);
 }
 
@@ -583,7 +623,7 @@
 	border-color: var(--Button-color-border-disabled);
 }
 
-.Button[disabled] [class*='_icon'] {
+.Button[disabled] [data-icon] {
 	fill: var(--Button-icon-color-fill-disabled);
 }
 

packages/chip/src/styles/Chip.module.css

@@ -47,8 +47,8 @@
 }
 
 .warning {
-	background-color: var(--lp-color-bg-feedback-warning);
-	color: var(--lp-color-text-feedback-warning);
+	background-color: var(--lp-color-brand-yellow-light);
+	color: var(--lp-color-brand-orange-dark);
 }
 
 .error {

packages/clipboard/src/styles/CopyToClipboard.module.css

@@ -3,7 +3,7 @@
 }
 
 .Clipboard-checkmark {
-	fill: var(--lp-color-system-green-500);
+	fill: var(--lp-color-fill-feedback-success);
 }
 
 .Clipboard-confirmation {

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/Button.tsx

@@ -29,9 +29,6 @@ const button = cva(styles.base, {
 			primary: styles.primary,
 			destructive: styles.destructive,
 			minimal: styles.minimal,
-			primaryFlair: styles.primaryFlair,
-			defaultFlair: styles.defaultFlair,
-			minimalFlair: styles.minimalFlair,
 		},
 	},
 	defaultVariants: {

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/Tooltip.tsx

@@ -39,6 +39,7 @@ const _Tooltip = (
 ) => {
 	return (
 		<AriaTooltip
+			data-theme={variant === 'default' ? 'dark' : undefined}
 			{...props}
 			offset={4}
 			crossOffset={0}