diff --git a/lost-pixel/baseline/components-button-props--format.png b/lost-pixel/baseline/components-button-props--format.png
index 5e8a6869..35f90d10 100644
Binary files a/lost-pixel/baseline/components-button-props--format.png and b/lost-pixel/baseline/components-button-props--format.png differ
diff --git a/lost-pixel/baseline/components-card-category--card-category.png b/lost-pixel/baseline/components-card-category--card-category.png
index 4de84db3..062a4630 100644
Binary files a/lost-pixel/baseline/components-card-category--card-category.png and b/lost-pixel/baseline/components-card-category--card-category.png differ
diff --git a/lost-pixel/baseline/tokens-color--upsell.png b/lost-pixel/baseline/tokens-color--upsell.png
index 649a86b0..cbb23278 100644
Binary files a/lost-pixel/baseline/tokens-color--upsell.png and b/lost-pixel/baseline/tokens-color--upsell.png differ
diff --git a/src/components/Button/Button.style.ts b/src/components/Button/Button.style.ts
index 9e3ca5cc..e7db8b40 100755
--- a/src/components/Button/Button.style.ts
+++ b/src/components/Button/Button.style.ts
@@ -55,7 +55,6 @@ export const ButtonStyled = styled.button<any>`
   ${buttonTextShift};
   ${buttonChecked};
   ${buttonUpsell};
-  ${buttonUpsellNew}
 `;
 
 const sizePads = {
@@ -515,45 +514,13 @@ function buttonTextShift({ variant, textShift, iconPosition }) {
 
 // Temporary until CSSVar design tokens are released and Button
 // style logic is rewritten.
-function buttonUpsell({ format, theme }) {
-  if (format !== 'upsell') return;
-
-  const color = core.color.upsell.sm;
-  const colorHover =
-    theme.name === 'dark'
-      ? 'linear-gradient(to right,#00cc6b,#00cca7,#00b0e7)'
-      : 'linear-gradient(to right,#00de59,#00d39e,#00aaf3)';
-  const colorActive =
-    theme.name === 'dark'
-      ? 'linear-gradient(to right,#009c52,#00a385,#008cb8)'
-      : 'linear-gradient(to right,#00af46,#00a47a,#0089c4)';
-
-  return css`
-    border: 1px solid transparent;
-    background: ${color} padding-box, ${color} border-box;
-    color: #fff;
-
-    &:active {
-      background: ${color} padding-box, ${colorActive} border-box;
-      transform: scale(0.98);
-      color: #fff;
-    }
-
-    &:hover:not(:active) {
-      background: ${colorHover} padding-box, ${colorHover} border-box;
-      border: 1px solid transparent;
-      color: #fff;
-    }
-  `;
-}
-
-function buttonUpsellNew({ format }) {
-  if (format !== 'upsell-new') return;
+function buttonUpsell({ format }) {
+  if (!format.includes('upsell')) return;
 
   return css`
     border: 1px solid transparent;
     background: ${core.color.upsell.New};
-    color: ${violet(0)};
+    color: #fff;
 
     &:active {
       background: ${violet(600)};
diff --git a/src/tokens/color/upsell/sm.ts b/src/tokens/color/upsell/sm.ts
index 3a33be88..56927133 100644
--- a/src/tokens/color/upsell/sm.ts
+++ b/src/tokens/color/upsell/sm.ts
@@ -1,7 +1,8 @@
 import { Token, readToken } from '../../util';
+import { violet } from '../../../color/colors';
 
-const dark = 'linear-gradient(to right,#00AA59,#00B191,#0098C8)';
-const light = 'linear-gradient(to right,#00BE4C,#00B285,#0095D5)';
+const dark = violet(400);
+const light = violet(400);
 
 const token: Token = {
   default: 'light',
diff --git a/src/tokens/color/upsell/xl.ts b/src/tokens/color/upsell/xl.ts
index deb8d944..5e99fae0 100644
--- a/src/tokens/color/upsell/xl.ts
+++ b/src/tokens/color/upsell/xl.ts
@@ -1,7 +1,8 @@
 import { Token, readToken } from '../../util';
+import { violet } from '../../../color/colors';
 
-const dark = 'linear-gradient(to right,#00AA59,#00B191,#0098C8)';
-const light = 'linear-gradient(to right,#00B655,#00B285,#00A9D5)';
+const dark = violet(400);
+const light = violet(400);
 
 const token: Token = {
   default: 'light',