refactor: move AvatarPair sizing to css

Author: pawelgrimm

src/avatar/avatar-pair.module.css

@@ -3,7 +3,9 @@
     --reactist-avatar-pair-spacing: 12px;
     --reactist-avatar-pair-mask: 2px;
     --reactist-avatar-pair-rounded-radius: 5px;
-    --reactist-avatar-pair-rounded-mask-radius: 7px;
+    --reactist-avatar-pair-rounded-mask-radius: calc(
+        var(--reactist-avatar-pair-rounded-radius) + var(--reactist-avatar-pair-mask)
+    );
     --reactist-avatar-pair-rounded-mask-start: calc(
         var(--reactist-avatar-pair-spacing) - var(--reactist-avatar-pair-mask)
     );
@@ -19,6 +21,97 @@
     height: calc(var(--reactist-avatar-pair-size) + var(--reactist-avatar-pair-spacing));
 }
 
+.avatarPairSize-80 {
+    --reactist-avatar-pair-size: 80px;
+    --reactist-avatar-pair-spacing: 36px;
+    --reactist-avatar-pair-mask: 3px;
+    --reactist-avatar-pair-rounded-radius: 10px;
+}
+
+.avatarPairSize-72 {
+    --reactist-avatar-pair-size: 72px;
+    --reactist-avatar-pair-spacing: 32px;
+    --reactist-avatar-pair-mask: 3px;
+    --reactist-avatar-pair-rounded-radius: 10px;
+}
+
+.avatarPairSize-62 {
+    --reactist-avatar-pair-size: 62px;
+    --reactist-avatar-pair-spacing: 28px;
+    --reactist-avatar-pair-mask: 3px;
+    --reactist-avatar-pair-rounded-radius: 8.5px;
+}
+
+.avatarPairSize-50 {
+    --reactist-avatar-pair-size: 50px;
+    --reactist-avatar-pair-spacing: 22px;
+    --reactist-avatar-pair-mask: 3px;
+    --reactist-avatar-pair-rounded-radius: 7px;
+}
+
+.avatarPairSize-40 {
+    --reactist-avatar-pair-size: 40px;
+    --reactist-avatar-pair-spacing: 18px;
+    --reactist-avatar-pair-mask: 3px;
+    --reactist-avatar-pair-rounded-radius: 5.5px;
+}
+
+.avatarPairSize-36 {
+    --reactist-avatar-pair-size: 36px;
+    --reactist-avatar-pair-spacing: 16px;
+    --reactist-avatar-pair-mask: 2.5px;
+    --reactist-avatar-pair-rounded-radius: 5px;
+}
+
+.avatarPairSize-30 {
+    --reactist-avatar-pair-size: 30px;
+    --reactist-avatar-pair-spacing: 14px;
+    --reactist-avatar-pair-mask: 2.5px;
+    --reactist-avatar-pair-rounded-radius: 5px;
+}
+
+.avatarPairSize-28 {
+    --reactist-avatar-pair-size: 28px;
+    --reactist-avatar-pair-spacing: 12px;
+    --reactist-avatar-pair-mask: 2px;
+    --reactist-avatar-pair-rounded-radius: 5px;
+}
+
+.avatarPairSize-24 {
+    --reactist-avatar-pair-size: 24px;
+    --reactist-avatar-pair-spacing: 12px;
+    --reactist-avatar-pair-mask: 2px;
+    --reactist-avatar-pair-rounded-radius: 3.2px;
+}
+
+.avatarPairSize-20 {
+    --reactist-avatar-pair-size: 20px;
+    --reactist-avatar-pair-spacing: 10px;
+    --reactist-avatar-pair-mask: 2px;
+    --reactist-avatar-pair-rounded-radius: 3px;
+}
+
+.avatarPairSize-18 {
+    --reactist-avatar-pair-size: 18px;
+    --reactist-avatar-pair-spacing: 10px;
+    --reactist-avatar-pair-mask: 1.5px;
+    --reactist-avatar-pair-rounded-radius: 3px;
+}
+
+.avatarPairSize-16 {
+    --reactist-avatar-pair-size: 16px;
+    --reactist-avatar-pair-spacing: 8px;
+    --reactist-avatar-pair-mask: 1.25px;
+    --reactist-avatar-pair-rounded-radius: 2px;
+}
+
+.avatarPairSize-12 {
+    --reactist-avatar-pair-size: 12px;
+    --reactist-avatar-pair-spacing: 6px;
+    --reactist-avatar-pair-mask: 1px;
+    --reactist-avatar-pair-rounded-radius: 1.6px;
+}
+
 .avatarPair > * {
     position: absolute;
 }

src/avatar/avatar-pair.tsx

@@ -5,54 +5,12 @@ import classNames from 'classnames'
 import { Box } from '../box'
 import { polymorphicComponent } from '../utils/polymorphism'
 
-import { ROUNDED_AVATAR_RADIUS_BY_SIZE } from './utils'
-
 import styles from './avatar-pair.module.css'
 
 import type { ObfuscatedClassName } from '../utils/common-types'
 import type { PolymorphicComponentProps } from '../utils/polymorphism'
 import type { AvatarShape, AvatarSize } from './utils'
 
-type AvatarPairStyle = React.CSSProperties & {
-    '--reactist-avatar-pair-size': string
-    '--reactist-avatar-pair-spacing': string
-    '--reactist-avatar-pair-mask': string
-    '--reactist-avatar-pair-rounded-radius': string
-    '--reactist-avatar-pair-rounded-mask-radius': string
-}
-
-const AVATAR_PAIR_MASK_BY_SIZE: Record<AvatarSize, string> = {
-    80: '3px',
-    72: '3px',
-    62: '3px',
-    50: '3px',
-    40: '3px',
-    36: '2.5px',
-    30: '2.5px',
-    28: '2px',
-    24: '2px',
-    20: '2px',
-    18: '1.5px',
-    16: '1.25px',
-    12: '1px',
-}
-
-const AVATAR_PAIR_SPACING_BY_SIZE: Record<AvatarSize, string> = {
-    80: '36px',
-    72: '32px',
-    62: '28px',
-    50: '22px',
-    40: '18px',
-    36: '16px',
-    30: '14px',
-    28: '12px',
-    24: '12px',
-    20: '10px',
-    18: '10px',
-    16: '8px',
-    12: '6px',
-}
-
 /**
  * Props for the `AvatarPair` component.
  */
@@ -121,10 +79,10 @@ const AvatarPair = polymorphicComponent<'div', AvatarPairOwnProps, 'omitClassNam
                 ref={ref}
                 className={classNames(
                     styles.avatarPair,
+                    styles[`avatarPairSize-${size}`],
                     styles[`avatarPairShape-${shape}`],
                     exceptionallySetClassName,
                 )}
-                style={getAvatarPairStyle(size)}
                 data-testid={testId}
                 display="inlineBlock"
                 position="relative"
@@ -136,18 +94,5 @@ const AvatarPair = polymorphicComponent<'div', AvatarPairOwnProps, 'omitClassNam
     },
 )
 
-function getAvatarPairStyle(size: AvatarSize): AvatarPairStyle {
-    const mask = AVATAR_PAIR_MASK_BY_SIZE[size]
-    const roundedRadius = ROUNDED_AVATAR_RADIUS_BY_SIZE[size]
-
-    return {
-        '--reactist-avatar-pair-size': `${size}px`,
-        '--reactist-avatar-pair-spacing': AVATAR_PAIR_SPACING_BY_SIZE[size],
-        '--reactist-avatar-pair-mask': mask,
-        '--reactist-avatar-pair-rounded-radius': roundedRadius,
-        '--reactist-avatar-pair-rounded-mask-radius': `calc(${roundedRadius} + ${mask})`,
-    }
-}
-
 export { AvatarPair }
 export type { AvatarPairProps }