refactor: update card colors and rename backgroundAction (#4725)

update card colors and rename backgroundAction
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/components/NavBar/ShoppingBag.css.ts

@@ -6,7 +6,7 @@ export const bagQuantity = style([
     position: 'absolute',
     top: '4',
     right: '4',
-    backgroundColor: 'backgroundAction',
+    backgroundColor: 'accentAction',
     borderRadius: 'round',
     color: 'explicitWhite',
     textAlign: 'center',

src/nft/components/collection/Card.css.ts

@@ -117,7 +117,7 @@ export const erc1155PlusButton = style([
   }),
   {
     ':hover': {
-      backgroundColor: themeVars.colors.backgroundAction,
+      backgroundColor: themeVars.colors.accentAction,
       color: themeVars.colors.textPrimary,
     },
   },

src/nft/components/collection/Card.tsx

@@ -13,7 +13,7 @@ import {
   SuspiciousIcon20,
 } from 'nft/components/icons'
 import { body, subheadSmall } from 'nft/css/common.css'
-import { themeVars, vars } from 'nft/css/sprinkles.css'
+import { themeVars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
 import { GenieAsset, Rarity, UniformHeight, UniformHeights } from 'nft/types'
 import { fallbackProvider, putCommas } from 'nft/utils'
@@ -456,19 +456,21 @@ const Button = ({ children, quantity, selectedChildren, onClick, onSelectedClick
               ? 'accentFailure'
               : asset.notForSale
               ? 'textTertiary'
-              : 'blue400'
+              : 'accentAction'
           }
-          style={{
-            background: `${
+          background={
             buttonHovered || isMobile
-                ? selected
-                  ? vars.color.accentFailure
-                  : vars.color.blue400
+              ? asset.notForSale
+                ? 'backgroundInteractive'
                 : selected
-                ? '#FA2B391F'
-                : '#4C82FB1F'
-            }`,
-          }}
+                ? 'accentFailure'
+                : 'accentAction'
+              : asset.notForSale
+              ? 'backgroundModule'
+              : selected
+              ? 'accentFailureSoft'
+              : 'accentActionSoft'
+          }
           className={clsx(styles.button, subheadSmall)}
           onClick={(e) =>
             selected

src/nft/css/sprinkles.css.ts

@@ -4,6 +4,8 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 const themeContractValues = {
   colors: {
     accentFailure: '',
+    accentFailureSoft: '',
+    accentAction: '',
     accentActionSoft: '',
 
     explicitWhite: '',
@@ -11,7 +13,6 @@ const themeContractValues = {
     green: '',
     violet: '',
 
-    backgroundAction: '',
     backgroundFloating: '',
     backgroundInteractive: '',
     backgroundModule: '',
@@ -177,7 +178,6 @@ export const vars = createGlobalTheme(':root', {
     grey200: '#B7BED4',
     grey100: '#DDE3F7',
     grey50: '#EDEFF7',
-    accentActionSoft: 'rgba(76, 130, 251, 0.24)',
     accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)',
     outline: 'rgba(153, 161, 189, 0.24)',
     lightGrayOverlay: '#99A1BD14',

src/nft/themes/darkTheme.ts

@@ -3,6 +3,8 @@ import { Theme, vars } from 'nft/css/sprinkles.css'
 export const darkTheme: Theme = {
   colors: {
     accentFailure: vars.color.red300,
+    accentFailureSoft: 'rgba(253, 118, 107, 0.12)',
+    accentAction: vars.color.blue400,
     accentActionSoft: '#000000E5',
 
     explicitWhite: '#FFFFFF',
@@ -10,7 +12,6 @@ export const darkTheme: Theme = {
     gold: vars.color.gold200,
     violet: vars.color.violet200,
 
-    backgroundAction: vars.color.blue400,
     backgroundFloating: '0000000C',
     backgroundInteractive: vars.color.grey700,
     backgroundModule: vars.color.grey800,

src/nft/themes/lightTheme.ts

@@ -3,11 +3,12 @@ import { Theme, vars } from 'nft/css/sprinkles.css'
 export const lightTheme: Theme = {
   colors: {
     accentFailure: vars.color.red400,
-    accentActionSoft: '#FFFFFFE5',
+    accentFailureSoft: 'rgba(250, 43, 57, 0.12)',
+    accentAction: vars.color.pink400,
+    accentActionSoft: 'rgba(251, 17, 142, 0.12)',
 
     explicitWhite: '#FFFFFF',
 
-    backgroundAction: vars.color.pink400,
     backgroundFloating: '#00000000',
     backgroundInteractive: vars.color.grey100,
     backgroundModule: vars.color.grey50,