From 441d140145cc04476892be8d833e15aa9571b54a Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Thu, 23 Jan 2025 13:23:27 -0500
Subject: [PATCH] fix: story

---
 .changeset/dry-birds-tan.md               |  7 +++++++
 packages/tokens/stories/color.stories.tsx | 12 ++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/dry-birds-tan.md

diff --git a/.changeset/dry-birds-tan.md b/.changeset/dry-birds-tan.md
new file mode 100644
index 000000000..84fb25bb5
--- /dev/null
+++ b/.changeset/dry-birds-tan.md
@@ -0,0 +1,7 @@
+---
+"@launchpad-ui/tokens": patch
+"@launchpad-ui/icons": patch
+"@launchpad-ui/box": patch
+---
+
+Remove `color` prefix from `gradient` tokens
diff --git a/packages/tokens/stories/color.stories.tsx b/packages/tokens/stories/color.stories.tsx
index 06e81774f..196f08e11 100644
--- a/packages/tokens/stories/color.stories.tsx
+++ b/packages/tokens/stories/color.stories.tsx
@@ -75,13 +75,15 @@ const TokenTable = ({ tokens }: { tokens: Record<string, string> }) => {
 									<TooltipTrigger>
 										<Button
 											onPress={() => {
-												navigator.clipboard.writeText(`--lp-color-${key}`);
+												navigator.clipboard.writeText(
+													value.substring(value.lastIndexOf('--'), value.lastIndexOf(')')),
+												);
 												ToastQueue.success('Copied!');
 											}}
 											style={{ font: 'var(--lp-text-code-1-regular)' }}
 											variant="minimal"
 										>
-											{`--lp-color-${key}`}
+											{value.substring(value.lastIndexOf('--'), value.lastIndexOf(')'))}
 										</Button>
 										<Tooltip placement="bottom">Copy to clipboard</Tooltip>
 									</TooltipTrigger>
@@ -98,9 +100,7 @@ const TokenTable = ({ tokens }: { tokens: Record<string, string> }) => {
 };
 
 const global = Object.keys(vars.color)
-	.filter((key) =>
-		['black', 'blue', 'green', 'gray', 'red', 'purple', 'white', 'brand', 'gradient'].includes(key),
-	)
+	.filter((key) => !['bg', 'border', 'fill', 'shadow', 'text'].includes(key))
 	.reduce((obj, key) => {
 		// @ts-expect-error fixme
 		obj[key] = vars.color[key];
@@ -108,7 +108,7 @@ const global = Object.keys(vars.color)
 	}, {});
 
 export const Global = {
-	render: () => <TokenTable tokens={flatten(global)} />,
+	render: () => <TokenTable tokens={{ ...flatten(global), ...vars.gradient }} />,
 };
 
 const alias = Object.keys(vars.color)