Adjust ImageIcon, Text, and Card focus/hover styles

Author: calebjacob

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "2.0.18",
+  "version": "2.1.0",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

src/components/Card.module.scss

@@ -18,6 +18,10 @@
     min-width: 0;
   }
 
+  :global(.dark) & {
+    --card-shadow-hover-color: rgba(0, 0, 0, 0.2);
+  }
+
   &[data-padding='s'] {
     padding: var(--gap-s);
   }
@@ -51,23 +55,26 @@
     gap: var(--gap-l);
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     z-index: 5;
   }
+  &:focus-visible {
+    z-index: 10;
+  }
 
   &[role='button'],
   &[href] {
     cursor: pointer;
 
     &:hover {
-      --card-background-color: var(--sand-0) !important;
-      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.075);
+      background-color: var(--card-background-hover-color, var(--sand-0)) !important;
+      border-color: var(--card-border-hover-color, var(--card-border-color)) !important;
       &[data-background='sand-0'] {
-        --card-background-color: var(--sand-1) !important;
+        background-color: var(--card-background-hover-color, var(--sand-1)) !important;
       }
     }
-    &:focus-visible {
+
+    &[data-focus='true']:focus-visible {
       box-shadow: 0 0 0 4px var(--violet-5);
       border-color: var(--violet-9);
     }
@@ -115,10 +122,9 @@
   .card {
     border-radius: 0;
     box-shadow: none;
-    margin-bottom: -1px;
 
-    &:last-child {
-      margin-bottom: 0;
+    &:not(:last-child) {
+      margin-bottom: -1px;
     }
 
     &:first-child {

src/components/Card.tsx

@@ -9,7 +9,10 @@ type Props = ComponentPropsWithRef<'div'> & {
   href?: string;
   target?: ComponentPropsWithRef<'a'>['target'];
   background?: ThemeColor;
+  backgroundHover?: ThemeColor;
   border?: ThemeColor;
+  borderHover?: ThemeColor;
+  indicateFocus?: boolean;
   padding?: 's' | 'm' | 'l';
   paddingInline?: 's' | 'm' | 'l';
   gap?: 'xs' | 's' | 'm' | 'l';
@@ -20,8 +23,11 @@ export const Card = forwardRef<HTMLDivElement, Props>(
     {
       animateIn,
       background = 'sand-0',
+      backgroundHover,
       border = 'sand-5',
+      borderHover,
       className = '',
+      indicateFocus = true,
       gap,
       padding,
       paddingInline,
@@ -38,6 +44,7 @@ export const Card = forwardRef<HTMLDivElement, Props>(
         className={`${s.card} ${className}`}
         data-animate-in={animateIn}
         data-background={background}
+        data-focus={indicateFocus}
         data-gap={gap}
         data-padding={padding}
         data-padding-inline={paddingInline}
@@ -46,7 +53,9 @@ export const Card = forwardRef<HTMLDivElement, Props>(
         ref={ref}
         style={{
           '--card-background-color': `var(--${background})`,
+          '--card-background-hover-color': backgroundHover ? `var(--${backgroundHover})` : undefined,
           '--card-border-color': `var(--${border})`,
+          '--card-border-hover-color': borderHover ? `var(--${borderHover})` : undefined,
           ...style,
         }}
         {...props}

src/components/ImageIcon.module.scss

@@ -47,10 +47,20 @@
     height: var(--icon-size-xl);
     padding: 8px;
   }
-}
 
-a:focus-visible .imageIcon {
-  box-shadow:
-    0 0 0 1px var(--violet-9),
-    0 0 0 5px var(--violet-5);
+  &[data-parent-clickable='true'] {
+    a:focus-visible &,
+    [role='button']:focus-visible &,
+    button:focus-visible & {
+      box-shadow:
+        0 0 0 1px var(--violet-9),
+        0 0 0 5px var(--violet-5);
+    }
+
+    a:hover &,
+    [role='button']:hover &,
+    button:hover & {
+      transform: scale(1.15, 1.15);
+    }
+  }
 }

src/components/ImageIcon.tsx

@@ -7,14 +7,28 @@ type Props = {
   alt: string;
   className?: string;
   fallbackIcon?: ReactNode;
+  indicateParentClickable?: boolean;
   size?: ThemeIconSize;
   src: string | undefined;
   style?: CSSProperties;
 };
 
-export const ImageIcon = ({ alt, className = '', fallbackIcon, size = 'm', src, ...props }: Props) => {
+export const ImageIcon = ({
+  alt,
+  className = '',
+  fallbackIcon,
+  indicateParentClickable,
+  size = 'm',
+  src,
+  ...props
+}: Props) => {
   return (
-    <div className={`${s.imageIcon} ${className} image-icon`} data-size={size} {...props}>
+    <div
+      className={`${s.imageIcon} ${className} image-icon`}
+      data-parent-clickable={indicateParentClickable}
+      data-size={size}
+      {...props}
+    >
       {src ? <img src={src} alt={alt} /> : fallbackIcon}
     </div>
   );

src/components/Text.module.scss

@@ -23,25 +23,7 @@ a.text {
     font-family: monospace !important;
   }
 
-  a > & {
-    display: inline;
-  }
-  a:has(&) {
-    line-height: 0;
-  }
-  &[role='button']:hover,
-  &[role='button']:focus-visible,
-  [role='button']:hover > &,
-  [role='button']:focus-visible > &,
-  button:hover > &,
-  button:focus-visible > &,
-  a:hover > &,
-  a:focus-visible > & {
-    color: var(--violet-11) !important;
-    text-decoration: underline;
-  }
-
-  &[data-clickable-highlight='true'] {
+  &[data-parent-clickable='true'] {
     [role='button']:hover &,
     [role='button']:focus-visible &,
     button:hover &,

src/components/Text.tsx

@@ -21,12 +21,12 @@ const defaultSizes: Record<Tag, ThemeFontSize> = {
 type Props = Omit<ComponentPropsWithRef<'p'>, 'color'> & {
   as?: Tag;
   clampLines?: number;
-  clickableHighlight?: boolean;
   color?: ThemeColor;
   decoration?: CSSProperties['textDecoration'];
   family?: 'standard' | 'monospace';
   forceWordBreak?: boolean;
   href?: string;
+  indicateParentClickable?: boolean;
   target?: ComponentProps<'a'>['target'];
   size?: ThemeFontSize;
   noWrap?: boolean;
@@ -41,9 +41,9 @@ export const Text = forwardRef<HTMLParagraphElement, Props>(
       children,
       clampLines,
       className = '',
-      clickableHighlight,
       family,
       forceWordBreak,
+      indicateParentClickable,
       size,
       style,
       noWrap,
@@ -66,7 +66,7 @@ export const Text = forwardRef<HTMLParagraphElement, Props>(
         className={`${s.text} ${className}`}
         data-clamp-lines={clampLines}
         data-size={size ?? defaultSize}
-        data-clickable-highlight={clickableHighlight}
+        data-parent-clickable={indicateParentClickable}
         data-family={family}
         role={onClick ? 'button' : undefined}
         tabIndex={onClick ? 0 : undefined}