update all upsell tokens to violet(400) (#374)

* update all upsell tokens to violet(400) * update button's upsell format * chore(baseline): update lost-pixel baselines (#375) Co-authored-by: juliewongbandue <[email protected]> --------- Co-authored-by: devex-bot-github <[email protected]> Co-authored-by: juliewongbandue <[email protected]>
vimeo · Feb 7, 2024 · ef4250e · ef4250e
1 parent a0d3422
commit ef4250e
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 40 deletions.
diff --git a/lost-pixel/baseline/components-button-props--format.png b/lost-pixel/baseline/components-button-props--format.png
diff --git a/lost-pixel/baseline/components-card-category--card-category.png b/lost-pixel/baseline/components-card-category--card-category.png
diff --git a/lost-pixel/baseline/tokens-color--upsell.png b/lost-pixel/baseline/tokens-color--upsell.png
diff --git 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
@@ -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
@@ -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',