From f17441b514c9f3e866212bd44a2d4614e7ca6abf Mon Sep 17 00:00:00 2001
From: Julie Wongbandue <juliewongbandue@gmail.com>
Date: Mon, 11 Sep 2023 13:09:28 -0400
Subject: [PATCH] Add violet cache story

---
 src/color/colors-brand.story.tsx      | 43 +++++++++++++++++++++++++++
 src/components/Button/Button.style.ts |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/color/colors-brand.story.tsx b/src/color/colors-brand.story.tsx
index 15a2ff15..1c2540cd 100644
--- a/src/color/colors-brand.story.tsx
+++ b/src/color/colors-brand.story.tsx
@@ -4,6 +4,7 @@ import { Story } from '../storybook';
 import { Header as H } from '../typography';
 
 import { ColorPalette, ColorStory } from './storyComponents';
+import { parseToRgb } from 'polished';
 
 import {
   fuschia,
@@ -90,6 +91,48 @@ export function Taupe() {
 }
 Taupe.storyName = 'taupe';
 
+function ColorSwatch({ color, title, ...props }) {
+  const { red, green, blue } = parseToRgb(color);
+  const rbgString = `rgb(${red}, ${green}, ${blue})`;
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        overflow: 'hidden',
+        paddingRight: '1rem',
+      }}
+      {...props}
+    >
+      <ColorSwatchStyled color={color} />
+      <Header size="5">{title}</Header>
+      <Header size="5">{color}</Header>
+      <Header size="5">{rbgString}</Header>
+    </div>
+  );
+}
+
+const ColorSwatchStyled = styled.div`
+  width: calc(3rem + 1.25vw);
+  height: calc(3rem + 1.25vw);
+  background: ${({ color }) => color};
+  margin-right: 0.125rem;
+  border-radius: 0.25rem;
+`;
+export function Violet() {
+  const violetCache = [
+    0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000,
+  ];
+  return (
+    <>
+      <Header>Violet</Header>
+      {violetCache.map((grade, i) => (
+        <ColorSwatch key={i} color={violet(grade)} title={grade} />
+      ))}
+    </>
+  );
+}
+Violet.storyName = 'violet';
+
 const Header = styled(H)`
   margin: 0;
 `;
diff --git a/src/components/Button/Button.style.ts b/src/components/Button/Button.style.ts
index 84d03176..3e97737e 100755
--- a/src/components/Button/Button.style.ts
+++ b/src/components/Button/Button.style.ts
@@ -560,7 +560,7 @@ function buttonUpsellNew({ format }) {
   return css`
     border: 1px solid transparent;
     background: ${core.color.upsell.New};
-    color: #fff;
+    color: ${violet(0)};
 
     &:active {
       background: ${violet(600)};