Update buttons border

centrifuge · Oct 25, 2024 · 6a15c8d · 6a15c8d
1 parent 97ab29e
commit 6a15c8d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/fabric/src/components/Button/VisualButton.tsx b/fabric/src/components/Button/VisualButton.tsx
@@ -97,12 +97,11 @@ export const StyledButton = styled.span<StyledProps>(
       borderRadius: 'button',
       pointerEvents: $disabled ? 'none' : 'initial',
       minHeight: $small ? 32 : 40,
-      boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none',
 
       '&:hover': {
         color: fgHover,
         backgroundColor: isTertiaryIcon ? undefined : bgHover,
-        borderColor: isTertiaryIcon ? undefined : borderHover,
+        boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none',
       },
       '&:active': {
         color: fgPressed,

diff --git a/fabric/src/theme/tokens/baseTheme.ts b/fabric/src/theme/tokens/baseTheme.ts
@@ -31,9 +31,9 @@ export const baseTheme: Omit<FabricTheme, 'colors' | 'scheme'> = {
     cardInteractive: '1px 3px 6px rgba(0, 0, 0, 0.15)',
     cardActive: ' 0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(0, 0, 0, 0.2)',
     cardOverlay: '4px 8px 24px rgba(0, 0, 0, 0.2)',
-    buttonPrimary: `1px 2px 7px var(--fabric-shadowButtonPrimary)`,
+    buttonPrimary: `0px 0px 0px 3px var(--fabric-shadowButtonPrimary)`,
     buttonSecondary: `1px 2px 1px var(--fabric-shadowButtonSecondary)`,
-    buttonInverted: `1px 2px 7px var(--fabric-shadowButtonInverted)`,
+    buttonInverted: `0px 0px 0px 3px var(--fabric-shadowButtonInverted)`,
   },
   zIndices: {
     sticky: 10,

diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -62,7 +62,7 @@ const colors = {
   borderButtonPrimaryHover: yellowScale[100],
   borderButtonPrimaryPressed: yellowScale[100],
   borderButtonPrimaryDisabled: 'transparent',
-  shadowButtonPrimary: 'transparent',
+  shadowButtonPrimary: yellowScale[100],
 
   backgroundButtonSecondary: black,
   backgroundButtonSecondaryFocus: black,
@@ -112,7 +112,7 @@ const colors = {
   borderButtonInvertedHover: grayScale[50],
   borderButtonInvertedPressed: grayScale[50],
   borderButtonInvertedDisabled: 'transparent',
-  shadowButtonInverted: 'transparent',
+  shadowButtonInverted: grayScale[50],
 }
 
 export const colorTheme = {