@12-apps/ui 6.21.0 → 6.23.0

package/src/components/layout/Card/Card.metrics.ts

@@ -0,0 +1,171 @@
+import type { CardBorderRadius } from './Card.base';
+import type { UiShadow } from '../../../tokens/shadow';
+
+/**
+ * THE NUMBERS BOTH `Card` RENDERERS DRAW WITH.
+ *
+ * `Card.styles.ts` (web, emotion over MUI) and `Card.native.tsx` /
+ * `Card.look.native.ts` (React Native) read this one table. The web turns the
+ * radii into `theme.spacing()` and the shadows into CSS strings (`shadowCss`
+ * in `src/tokens/shadow.ts` writes exactly the text it always has); native
+ * hands the same shadow objects to `boxShadow` and the same numbers to a
+ * `StyleSheet`.
+ *
+ * Nothing here imports a renderer, a theme or a colour: a shadow's COLOUR is
+ * the caller's, because the two sides reach for the same arithmetic through
+ * different doors (`alpha` from `@mui/material/styles` on the web, from
+ * `src/tokens/color` natively — a port of it, asserted equal).
+ */
+
+/* ── The envelope ─────────────────────────────────────────────────────────── */
+
+/**
+ * `theme.spacing(n)` per named radius. `none` is written as a bare `0` by the
+ * web rather than `spacing(0)`, so it is spelled that way on both sides.
+ */
+export const CARD_RADIUS_UNITS: Record<Exclude<CardBorderRadius, 'full'>, number> = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 3,
+};
+
+/** `full` is a percentage of the box, not a length. */
+export const CARD_RADIUS_FULL = '50%';
+
+/** The hairline `outlined` and `glass` draw. */
+export const CARD_BORDER_WIDTH = 1;
+
+/* ── Shadows ──────────────────────────────────────────────────────────────── */
+
+/** A card's shadows are `UiShadow`s; `src/tokens/shadow.ts` says why they have a shape. */
+export type CardShadow = UiShadow;
+
+/**
+ * MUI's `theme.shadows[1]` — the elevation a `Paper` paints and therefore the
+ * shadow every `elevated` card on the web already has.
+ *
+ * It is restated here rather than derived because the web never names it: it
+ * arrives through `MuiCard` -> `MuiPaper`, and React Native has no Paper to
+ * inherit it from. (`variant="elevated"`'s own `elevation: 4` is not a CSS
+ * property and paints nothing — see {@link CARD_ELEVATION}.)
+ */
+export const CARD_PAPER_SHADOW: readonly UiShadow[] = [
+  { offsetX: 0, offsetY: 2, blurRadius: 1, spreadDistance: -1, color: 'rgba(0, 0, 0, 0.2)' },
+  { offsetX: 0, offsetY: 1, blurRadius: 1, spreadDistance: 0, color: 'rgba(0, 0, 0, 0.14)' },
+  { offsetX: 0, offsetY: 1, blurRadius: 3, spreadDistance: 0, color: 'rgba(0, 0, 0, 0.12)' },
+];
+
+/**
+ * What `elevated` declares at rest and on hover.
+ *
+ * `elevation` is not a CSS property, so on the web these paint NOTHING and an
+ * elevated card shows `MuiPaper`'s own elevation-1 shadow. Kept because they
+ * are what the source says, and mirrored natively by leaving
+ * {@link CARD_PAPER_SHADOW} in place for both states.
+ */
+export const CARD_ELEVATION = { rest: 4, lifted: 8 } as const;
+
+/* ── Variant surfaces ─────────────────────────────────────────────────────── */
+
+/** `glass`: a 0.1 wash of the paper behind a 20px blur, inside a primary hairline. */
+export const CARD_GLASS = {
+  backgroundAlpha: { rest: 0.1, lifted: 0.15 },
+  borderAlpha: { rest: 0.2, lifted: 0.3 },
+  blurPx: 20,
+  shadow: { offsetY: 8, blurRadius: 32, alpha: 0.1 },
+} as const;
+
+/** `gradient`: primary into secondary at 135°, over a hue-tinted drop shadow. */
+export const CARD_GRADIENT = {
+  angleDeg: 135,
+  shadow: { offsetY: 4, blurRadius: 20, alpha: 0.3 },
+} as const;
+
+/** `neumorphic`: two opposed shadows, blurred twice their offset. */
+export const CARD_NEUMORPHIC = {
+  spread: { rest: 8, lifted: 12 },
+  blurFactor: 2,
+  alpha: {
+    dark: { near: 0.3, far: 0.1 },
+    light: { near: { rest: 0.2, lifted: 0.3 }, far: { rest: 0.8, lifted: 0.9 } },
+  },
+} as const;
+
+/**
+ * The offset pair `neumorphic` paints, given the two colours the mode picked:
+ * `near` down-right, `far` up-left, both blurred twice the offset.
+ */
+export function neumorphicShadows(lifted: boolean, near: string, far: string): UiShadow[] {
+  const spread = lifted ? CARD_NEUMORPHIC.spread.lifted : CARD_NEUMORPHIC.spread.rest;
+  const blurRadius = spread * CARD_NEUMORPHIC.blurFactor;
+  return [
+    { offsetX: spread, offsetY: spread, blurRadius, spreadDistance: 0, color: near },
+    { offsetX: -spread, offsetY: -spread, blurRadius, spreadDistance: 0, color: far },
+  ];
+}
+
+/**
+ * `section`: a flat ink wash rather than a palette slot, so a section reads as
+ * a recess in whatever surface it sits on.
+ */
+export const CARD_SECTION_BACKGROUND = {
+  dark: { rest: 'rgba(0, 0, 0, 0.2)', lifted: 'rgba(0, 0, 0, 0.25)' },
+  light: { rest: 'rgba(0, 0, 0, 0.02)', lifted: 'rgba(0, 0, 0, 0.04)' },
+} as const;
+
+/* ── Decorations ──────────────────────────────────────────────────────────── */
+
+/** `glow`: a haloed primary shadow that widens under the pointer. */
+export const CARD_GLOW = {
+  rest: { blurRadius: 20, alpha: 0.3 },
+  lifted: { blurRadius: 30, alpha: 0.4 },
+} as const;
+
+/**
+ * `pulse`: a ring of the primary hue that grows 15px out of the card's edge and
+ * fades, every two seconds. The web draws it as an `::after` box-shadow spread
+ * behind the paper (`z-index: -1`).
+ */
+export const CARD_PULSE = {
+  alpha: 0.3,
+  durationMs: 2000,
+  spread: 15,
+  /** The fraction of the cycle the ring is still visible for. */
+  fadeAt: 0.7,
+  zIndex: -1,
+} as const;
+
+/** `interactive`: the card rises 2px under the pointer and settles while pressed. */
+export const CARD_INTERACTIVE_LIFT = 2;
+
+/** `loading`: the card dims, stops taking pointers and centres a spinner over itself. */
+export const CARD_LOADING = { opacity: 0.6, spinnerZIndex: 10, spinnerSize: 40 } as const;
+
+/* ── The slots ────────────────────────────────────────────────────────────── */
+
+/** `CardContent`: `theme.spacing(2)`, halved by `dense`. */
+export const CARD_CONTENT_PADDING_UNITS = { normal: 2, dense: 1 } as const;
+
+/**
+ * `CardHeader`, in MUI's own px: 16 all round, the avatar 16 from the content,
+ * the action pulled back out of the padding on three sides.
+ */
+export const CARD_HEADER = {
+  padding: 16,
+  avatarGap: 16,
+  action: { marginTop: -4, marginRight: -8, marginBottom: -4 },
+} as const;
+
+/** A `CardHeader` given raw `children` is a plain `theme.spacing(2)` box instead. */
+export const CARD_HEADER_CHILDREN_PADDING_UNITS = 2;
+
+/**
+ * `CardActions`, in MUI's own px: 8 all round, and 8 between the actions unless
+ * `disableSpacing` turns the run off.
+ */
+export const CARD_ACTIONS = { padding: 8, gap: 8 } as const;
+
+/** `CardMedia`'s default height. */
+export const CARD_MEDIA_HEIGHT = 200;

package/src/components/layout/Card/Card.native.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { resolveCardProps } from './Card.helpers';
+import { cardLook } from './Card.look.native';
+import { CARD_LOADING, CARD_PULSE } from './Card.metrics';
+import { CardInkContext } from './CardParts.native';
+import type { CardProps } from './Card.types.native';
+import { PulseRing } from '../../../platform/pulse-ring.native';
+import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { renderTextChildren } from '../../../platform/text-children';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { muiTypeStyle } from '../../../tokens/mui-type';
+
+// The shared stories import all five names from `./Card`, which resolves here
+// under Metro and in the native Storybook; the slots live in their own file to
+// keep this one about the envelope, and are re-exported so that import works.
+export { CardActions, CardContent, CardHeader, CardMedia } from './CardParts.native';
+
+/** The spinner a loading card centres over itself; `role` comes from `ActivityIndicator`. */
+function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+  return (
+    <View testID={testID} style={[styles.spinner, { zIndex: CARD_LOADING.spinnerZIndex }]}>
+      <ActivityIndicator
+        size={Platform.OS === 'ios' ? 'large' : CARD_LOADING.spinnerSize}
+        color={color}
+      />
+    </View>
+  );
+}
+
+export const Card = React.forwardRef<View, CardProps>((rawProps, ref) => {
+  const resolved = resolveCardProps(rawProps);
+  const { children, loading, pulse, onClick, onPress, onFocus, onBlur, ...others } = resolved;
+  const theme = useUiTheme();
+  const look = cardLook(theme, resolved);
+
+  const testID = resolveTestId(others, 'card');
+  const idFor = (suffix: string): string => childTestId(others, suffix, 'card');
+  const rest = withoutTestIdProps(others);
+  // `cardLook` consumed these, and the reserved ones paint nothing on either
+  // renderer; none of them is a `View` prop.
+  const {
+    variant: _variant,
+    interactive,
+    glow: _glow,
+    borderRadius: _borderRadius,
+    style,
+    expandable: _expandable,
+    expanded: _expanded,
+    onExpandToggle: _onExpandToggle,
+    entranceAnimation: _entranceAnimation,
+    animationDelay: _animationDelay,
+    skeleton: _skeleton,
+    hoverScale: _hoverScale,
+    ...viewProps
+  } = rest;
+
+  // A loading card is inert: no handler fires and pointer events are off, so a
+  // half-rendered card cannot be pressed through. Same rule as the web.
+  const idle = !loading;
+  const handlePress = (event: GestureResponderEvent): void => {
+    onClick?.(event);
+    onPress?.(event);
+  };
+
+  // The ink goes to the SLOTS through context and to bare text children
+  // directly: on the web one `color` on the card covers both, because CSS
+  // inherits and React Native does not.
+  const body = (
+    <CardInkContext.Provider value={look.ink}>
+      {pulse ? (
+        <PulseRing
+          color={theme.palette.primary.main}
+          radius={look.radius}
+          spread={CARD_PULSE.spread}
+          durationMs={CARD_PULSE.durationMs}
+          fadeAt={CARD_PULSE.fadeAt}
+          opacity={CARD_PULSE.alpha}
+          testID={idFor('pulse')}
+        />
+      ) : null}
+      {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} /> : null}
+      {renderTextChildren(children, { ...muiTypeStyle(theme, 'body1'), color: look.ink })}
+    </CardInkContext.Provider>
+  );
+
+  const shared = { testID, onFocus: idle ? onFocus : undefined, onBlur: idle ? onBlur : undefined };
+
+  if (!interactive && !onClick && !onPress) {
+    return (
+      <View ref={ref} style={[look.container, style]} {...shared} {...viewProps}>
+        {body}
+      </View>
+    );
+  }
+
+  const container = ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+    look.container,
+    pressed && idle ? look.pressed : null,
+    style,
+  ];
+
+  return (
+    <Pressable ref={ref} style={container} onPress={idle ? handlePress : undefined} {...shared} {...viewProps}>
+      {body}
+    </Pressable>
+  );
+});
+
+Card.displayName = 'Card';
+
+const styles = StyleSheet.create({
+  spinner: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none',
+  },
+});

package/src/components/layout/Card/Card.styles.ts

@@ -1,18 +1,34 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
-import type { CardProps, CardVariant } from './Card.types';
-
-type BorderRadius = NonNullable<CardProps['borderRadius']>;
-
-// Define pulse animation
+import type { CardBorderRadius, CardVariant } from './Card.base';
+import {
+  CARD_BORDER_WIDTH,
+  CARD_ELEVATION,
+  CARD_GLASS,
+  CARD_GLOW,
+  CARD_GRADIENT,
+  CARD_INTERACTIVE_LIFT,
+  CARD_NEUMORPHIC,
+  CARD_PULSE,
+  CARD_RADIUS_FULL,
+  CARD_RADIUS_UNITS,
+  CARD_SECTION_BACKGROUND,
+  neumorphicShadows,
+} from './Card.metrics';
+import { shadowCss, shadowListCss } from '../../../tokens/shadow';
+
+type BorderRadius = CardBorderRadius;
+
+// Define pulse animation. The 15px spread and the 2s period are the shared
+// metrics, so the native ring grows by exactly as much for exactly as long.
 const pulseAnimation = keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 15px currentColor;
+    box-shadow: 0 0 0 ${CARD_PULSE.spread}px currentColor;
     opacity: 0;
   }
   100% {
@@ -22,20 +38,10 @@ const pulseAnimation = keyframes`
 `;
 
 const borderRadiusFor = (theme: Theme, radius: BorderRadius): number | string => {
-  switch (radius) {
-    case 'none':
-      return 0;
-    case 'sm':
-      return theme.spacing(0.5);
-    case 'lg':
-      return theme.spacing(2);
-    case 'xl':
-      return theme.spacing(3);
-    case 'full':
-      return '50%';
-    default:
-      return theme.spacing(1);
-  }
+  if (radius === 'full') return CARD_RADIUS_FULL;
+  const units = CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md;
+  // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.
+  return units === 0 ? 0 : theme.spacing(units);
 };
 
 const pulseSurface = (theme: Theme): CSSObject => ({
@@ -50,27 +56,43 @@ const pulseSurface = (theme: Theme): CSSObject => ({
     bottom: '0',
     borderRadius: 'inherit',
     backgroundColor: theme.palette.primary.main,
-    opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
+    opacity: CARD_PULSE.alpha,
+    animation: `${pulseAnimation} ${CARD_PULSE.durationMs / 1000}s infinite`,
     pointerEvents: 'none',
-    zIndex: -1,
+    zIndex: CARD_PULSE.zIndex,
   },
 });
 
 const neumorphicShadow = (theme: Theme, lifted: boolean): string => {
-  const spread = lifted ? 12 : 8;
-  const blur = spread * 2;
-
-  return theme.palette.mode === 'dark'
-    ? `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.common.black, 0.3)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, 0.1)}`
-    : `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.grey[400], lifted ? 0.3 : 0.2)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, lifted ? 0.9 : 0.8)}`;
+  const { dark, light } = CARD_NEUMORPHIC.alpha;
+  const [near, far] =
+    theme.palette.mode === 'dark'
+      ? [
+          alpha(theme.palette.common.black, dark.near),
+          alpha(theme.palette.common.white, dark.far),
+        ]
+      : [
+          alpha(theme.palette.grey[400], lifted ? light.near.lifted : light.near.rest),
+          alpha(theme.palette.common.white, lifted ? light.far.lifted : light.far.rest),
+        ];
+
+  return shadowListCss(neumorphicShadows(lifted, near, far));
 };
 
 const sectionBackground = (theme: Theme, lifted: boolean): string => {
-  if (theme.palette.mode === 'dark') {
-    return lifted ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.2)';
-  }
-  return lifted ? 'rgba(0, 0, 0, 0.04)' : 'rgba(0, 0, 0, 0.02)';
+  const wash = CARD_SECTION_BACKGROUND[theme.palette.mode === 'dark' ? 'dark' : 'light'];
+  return lifted ? wash.lifted : wash.rest;
+};
+
+const glowShadow = (theme: Theme, lifted: boolean): string => {
+  const { blurRadius, alpha: opacity } = lifted ? CARD_GLOW.lifted : CARD_GLOW.rest;
+  return shadowCss({
+    offsetX: 0,
+    offsetY: 0,
+    blurRadius,
+    spreadDistance: 0,
+    color: alpha(theme.palette.primary.main, opacity),
+  });
 };
 
 interface Surface {
@@ -85,30 +107,48 @@ interface Surface {
  */
 const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => Surface> = {
   elevated: (_theme, lifted) => ({
-    surface: { elevation: 4 } as CSSObject,
-    hover: { elevation: lifted ? 8 : 4 } as CSSObject,
+    surface: { elevation: CARD_ELEVATION.rest } as CSSObject,
+    hover: { elevation: lifted ? CARD_ELEVATION.lifted : CARD_ELEVATION.rest } as CSSObject,
   }),
   outlined: (theme, lifted) => ({
-    surface: { border: `1px solid ${theme.palette.divider}`, boxShadow: 'none' },
+    surface: {
+      border: `${CARD_BORDER_WIDTH}px solid ${theme.palette.divider}`,
+      boxShadow: 'none',
+    },
     hover: { borderColor: lifted ? theme.palette.primary.main : theme.palette.divider },
   }),
   glass: (theme, lifted) => ({
     surface: {
-      backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
-      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+      backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),
+      backdropFilter: `blur(${CARD_GLASS.blurPx}px)`,
+      border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest)}`,
+      boxShadow: shadowCss({
+        offsetX: 0,
+        offsetY: CARD_GLASS.shadow.offsetY,
+        blurRadius: CARD_GLASS.shadow.blurRadius,
+        spreadDistance: 0,
+        color: alpha(theme.palette.common.black, CARD_GLASS.shadow.alpha),
+      }),
     },
     hover: {
-      backgroundColor: alpha(theme.palette.background.paper, lifted ? 0.15 : 0.1),
-      border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+      backgroundColor: alpha(
+        theme.palette.background.paper,
+        lifted ? CARD_GLASS.backgroundAlpha.lifted : CARD_GLASS.backgroundAlpha.rest,
+      ),
+      border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.lifted)}`,
     },
   }),
   gradient: (theme, lifted) => ({
     surface: {
       background: cardGradient(theme, false),
       color: theme.palette.primary.contrastText,
-      boxShadow: `0 4px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: shadowCss({
+        offsetX: 0,
+        offsetY: CARD_GRADIENT.shadow.offsetY,
+        blurRadius: CARD_GRADIENT.shadow.blurRadius,
+        spreadDistance: 0,
+        color: alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha),
+      }),
     },
     hover: { background: cardGradient(theme, lifted) },
   }),
@@ -133,8 +173,8 @@ const VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => S
 
 const cardGradient = (theme: Theme, dark: boolean): string =>
   dark
-    ? `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`
-    : `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`;
+    ? `linear-gradient(${CARD_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`
+    : `linear-gradient(${CARD_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`;
 
 // An unrecognised variant gets the shared base only — no interactive, glow or
 // pulse decoration, as before.
@@ -170,12 +210,12 @@ export const cardStyles = (
   return {
     ...base,
     ...(interactive && { cursor: 'pointer', '&:active': { transform: 'translateY(0)' } }),
-    ...(glow && { boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.3)}` }),
+    ...(glow && { boxShadow: glowShadow(theme, false) }),
     ...(pulse && pulseSurface(theme)),
     ...chosen.surface,
     '&:hover': {
-      ...(interactive && { transform: 'translateY(-2px)' }),
-      ...(glow && { boxShadow: `0 0 30px ${alpha(theme.palette.primary.main, 0.4)}` }),
+      ...(interactive && { transform: `translateY(-${CARD_INTERACTIVE_LIFT}px)` }),
+      ...(glow && { boxShadow: glowShadow(theme, true) }),
       ...chosen.hover,
     },
   };

package/src/components/layout/Card/Card.tsx

@@ -9,7 +9,14 @@ import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { resolveCardProps } from './Card.helpers';
+import {
+  CARD_CONTENT_PADDING_UNITS,
+  CARD_HEADER_CHILDREN_PADDING_UNITS,
+  CARD_LOADING,
+  CARD_MEDIA_HEIGHT,
+} from './Card.metrics';
 import { cardStyles } from './Card.styles';
+import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type {
   CardActionsProps,
   CardContentProps,
@@ -31,7 +38,6 @@ export const Card: React.FC<CardProps> = (rawProps) => {
     onFocus,
     onBlur,
     sx,
-    dataTestId,
     // These props are reserved for future implementation but need to be extracted
     // to prevent them from being passed to the underlying MuiCard
     expandable: _expandable,
@@ -45,6 +51,12 @@ export const Card: React.FC<CardProps> = (rawProps) => {
   } = resolveCardProps(rawProps);
 
   const theme = useTheme();
+  // Every spelling of the test id the shared contract allows, mapped to the one
+  // the DOM reads, and stripped from what is spread — `testID` is React
+  // Native's name for it and is not a DOM attribute. The native `Card` does the
+  // same in reverse.
+  const ownTestId = resolveTestId(restProps, 'card');
+  const props = withoutTestIdProps(restProps);
 
   // A loading card is inert: no handlers fire and pointer events are off, so a
   // half-rendered card cannot be clicked through.
@@ -52,18 +64,18 @@ export const Card: React.FC<CardProps> = (rawProps) => {
 
   return (
     <MuiCard
-      data-testid={dataTestId || 'card'}
+      data-testid={ownTestId}
       onClick={idle ? onClick : undefined}
       onFocus={idle ? onFocus : undefined}
       onBlur={idle ? onBlur : undefined}
       sx={{
         ...cardStyles(theme, { variant, interactive, glow, pulse, borderRadius }),
         position: 'relative',
-        opacity: loading ? 0.6 : 1,
+        opacity: loading ? CARD_LOADING.opacity : 1,
         pointerEvents: loading ? 'none' : 'auto',
         ...sx,
       }}
-      {...restProps}
+      {...props}
     >
       {loading && (
         <Box
@@ -72,7 +84,7 @@ export const Card: React.FC<CardProps> = (rawProps) => {
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            zIndex: 10,
+            zIndex: CARD_LOADING.spinnerZIndex,
           }}
         >
           <CircularProgress />
@@ -89,41 +101,47 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
   action,
   avatar,
   children,
-  dataTestId,
-  ...props
+  ...others
 }) => {
+  const ownTestId = resolveTestId(others, 'card-header');
+  const props = withoutTestIdProps(others);
+
   if (children) {
-    return <Box sx={{ p: 2 }} data-testid={dataTestId || 'card-header'}>{children}</Box>;
+    return (
+      <Box sx={{ p: CARD_HEADER_CHILDREN_PADDING_UNITS }} data-testid={ownTestId}>
+        {children}
+      </Box>
+    );
   }
 
   return (
     <MuiCardHeader
-      data-testid={dataTestId || 'card-header'}
+      data-testid={ownTestId}
       avatar={avatar}
       action={action}
       title={title}
       subheader={subtitle}
       titleTypographyProps={{
-        'data-testid': dataTestId ? `${dataTestId}-title` : 'card-title',
+        'data-testid': childTestId(others, 'title', 'card'),
       } as Record<string, unknown>}
       subheaderTypographyProps={{
-        'data-testid': dataTestId ? `${dataTestId}-subtitle` : 'card-subtitle',
+        'data-testid': childTestId(others, 'subtitle', 'card'),
       } as Record<string, unknown>}
       {...props}
     />
   );
 };
 
-export const CardContent: React.FC<CardContentProps> = ({ children, dense = false, dataTestId, ...props }) => (
+export const CardContent: React.FC<CardContentProps> = ({ children, dense = false, ...others }) => (
     <MuiCardContent
-      data-testid={dataTestId || 'card-content'}
+      data-testid={resolveTestId(others, 'card-content')}
       sx={{
-        padding: dense ? 1 : 2,
+        padding: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal,
         '&:last-child': {
-          paddingBottom: dense ? 1 : 2,
+          paddingBottom: dense ? CARD_CONTENT_PADDING_UNITS.dense : CARD_CONTENT_PADDING_UNITS.normal,
         },
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiCardContent>
@@ -133,8 +151,7 @@ export const CardActions: React.FC<CardActionsProps> = ({
   children,
   disableSpacing = false,
   alignment = 'left',
-  dataTestId,
-  ...props
+  ...others
 }) => {
   const getJustifyContent = () => {
     switch (alignment) {
@@ -151,12 +168,12 @@ export const CardActions: React.FC<CardActionsProps> = ({
 
   return (
     <MuiCardActions
-      data-testid={dataTestId || 'card-actions'}
+      data-testid={resolveTestId(others, 'card-actions')}
       disableSpacing={disableSpacing}
       sx={{
         justifyContent: getJustifyContent(),
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiCardActions>
@@ -167,18 +184,17 @@ export const CardMedia: React.FC<CardMediaProps> = ({
   component = 'div',
   image,
   title,
-  height = 200,
+  height = CARD_MEDIA_HEIGHT,
   children,
-  dataTestId,
-  ...props
+  ...others
 }) => (
     <MuiCardMedia
-      data-testid={dataTestId || 'card-media'}
+      data-testid={resolveTestId(others, 'card-media')}
       component={component}
       height={height}
       image={image}
       title={title}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiCardMedia>