@recursica/adapter-mantine-v8 1.0.0

package/src/components/Button/Button.styleIsolation.dom.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { MantineProvider, Button as MantineButton } from "@mantine/core";
+import { Button as RecursicaButton } from "./Button";
+
+function mount(node: React.ReactElement): {
+  container: HTMLElement;
+  root: Root;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  flushSync(() => root.render(node));
+  return { container, root };
+}
+
+function unmount({ container, root }: { container: HTMLElement; root: Root }) {
+  root.unmount();
+  container.remove();
+}
+
+function withProvider(node: React.ReactElement) {
+  return <MantineProvider defaultColorScheme="light">{node}</MantineProvider>;
+}
+
+/**
+ * Guards against Recursica's Button CSS bleeding onto (or being bled onto by) a plain,
+ * unwrapped Mantine Button rendered in the same document. The two must be visibly different
+ * (Recursica's own classes/data-attributes), but the plain kit button must render identically
+ * whether or not a Recursica Button exists alongside it.
+ */
+describe("Button style isolation from the underlying Mantine kit", () => {
+  it("adds Recursica-only classes/attributes without leaking them onto a plain Mantine Button", () => {
+    const recursica = mount(
+      withProvider(<RecursicaButton>Recursica</RecursicaButton>),
+    );
+    const kit = mount(withProvider(<MantineButton>Plain</MantineButton>));
+
+    try {
+      const recursicaButton = recursica.container.querySelector("button")!;
+      const kitButton = kit.container.querySelector("button")!;
+
+      const recursicaClasses = Array.from(recursicaButton.classList);
+      const kitClasses = new Set(kitButton.classList);
+      const recursicaOnlyClasses = recursicaClasses.filter(
+        (cls) => !kitClasses.has(cls),
+      );
+
+      // Recursica's Button.module.css classes must exist...
+      expect(recursicaOnlyClasses.length).toBeGreaterThan(0);
+      // ...and none of them are present on the plain kit button.
+      for (const cls of recursicaOnlyClasses) {
+        expect(kitButton.classList.contains(cls)).toBe(false);
+      }
+
+      // Recursica-only markers confirm the two are meaningfully different components.
+      expect(recursicaButton.getAttribute("data-variant")).toBe("solid");
+      expect(kitButton.getAttribute("data-variant")).toBeNull();
+    } finally {
+      unmount(recursica);
+      unmount(kit);
+    }
+  });
+
+  it("renders a plain Mantine Button identically whether or not Recursica's Button is mounted alongside it", () => {
+    const recursica = mount(
+      withProvider(<RecursicaButton>Recursica</RecursicaButton>),
+    );
+    const kitAlongsideRecursica = mount(
+      withProvider(<MantineButton>Plain</MantineButton>),
+    );
+    const kitIsolated = mount(
+      withProvider(<MantineButton>Plain</MantineButton>),
+    );
+
+    try {
+      const kitButton =
+        kitAlongsideRecursica.container.querySelector("button")!;
+      const isolatedButton = kitIsolated.container.querySelector("button")!;
+
+      expect(Array.from(kitButton.classList).sort()).toEqual(
+        Array.from(isolatedButton.classList).sort(),
+      );
+
+      const kitStyle = getComputedStyle(kitButton);
+      const isolatedStyle = getComputedStyle(isolatedButton);
+      expect(kitStyle.borderRadius).toBe(isolatedStyle.borderRadius);
+      expect(kitStyle.backgroundColor).toBe(isolatedStyle.backgroundColor);
+      expect(kitStyle.fontFamily).toBe(isolatedStyle.fontFamily);
+    } finally {
+      unmount(recursica);
+      unmount(kitAlongsideRecursica);
+      unmount(kitIsolated);
+    }
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,184 @@
+import React, { forwardRef } from "react";
+import { Loader } from "../Loader/Loader";
+import {
+  Button as MantineButton,
+  type ButtonProps as MantineButtonProps,
+  createPolymorphicComponent,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Button.module.css";
+
+import { type RecursicaButtonProps } from "@recursica/adapter-common";
+
+export type ButtonProps = RecursicaOverStyled<
+  Omit<MantineButtonProps, "variant" | "size" | "leftSection" | "fullWidth"> &
+    RecursicaButtonProps
+>;
+
+function hasVisibleChildren(children: React.ReactNode): boolean {
+  if (children == null || children === "") return false;
+  if (typeof children === "string") return children.trim() !== "";
+  return true;
+}
+
+const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = "solid",
+    size = "default",
+    icon,
+    children,
+    overStyled = false,
+    loaderVariant = "oval",
+    loaderSize,
+    useRecursicaLoader = true,
+    ...rest
+  },
+  ref,
+) {
+  const mapVariant = {
+    solid: "filled",
+    outline: "outline",
+    text: "subtle",
+  } as const;
+
+  const mapSize = {
+    default: "md",
+    small: "sm",
+  } as const;
+
+  // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+  // through even if a caller forces them via plain JavaScript, bypassing the `Omit<>` above.
+  const UNSUPPORTED_PROPS = [
+    "fullWidth", // Recursica Button width comes from layout/token constraints, not Mantine's boolean fullWidth toggle.
+  ] as const satisfies readonly (keyof MantineButtonProps)[];
+
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled) as Record<string, unknown>,
+    UNSUPPORTED_PROPS,
+  ) as Partial<typeof rest>;
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const hasLeftSection = !!icon || !!restRecord["leftSection"];
+  const hasRightSection = !!restRecord["rightSection"];
+  const hasVisibleText = hasVisibleChildren(children);
+  const isIconOnly = (hasLeftSection || hasRightSection) && !hasVisibleText;
+
+  let contentType = "label";
+  if (isIconOnly) {
+    contentType = "icon-only";
+  } else if (hasLeftSection || hasRightSection) {
+    contentType = "icon-label";
+  }
+
+  if (
+    typeof process !== "undefined" &&
+    process.env.NODE_ENV !== "production" &&
+    isIconOnly &&
+    !restRecord["aria-label"]
+  ) {
+    console.warn(
+      '[Recursica Button] Icon-only buttons must provide an accessible name. Pass aria-label (e.g. aria-label="Submit").',
+    );
+  }
+
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      section: styles.section,
+      label: styles.label,
+      loader: styles.loader,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+  // Note: `finalClass` is safe from being clobbered by `{...sanitizedProps}` below purely
+  // because of spread order — `className` (like `classNames`, `variant`, `size`, `leftSection`,
+  // and the `data-*` attributes) is spread first, then re-asserted after, so our computed value
+  // always wins. See the canonical guide's §3.3 for why ordering (not deletion) is the fix here.
+
+  const userLoaderProps = restRecord.loaderProps as
+    | Record<string, unknown>
+    | undefined;
+
+  const resolvedLoaderSize = withCallerOverride(
+    size === "small" ? "small" : "default",
+    loaderSize,
+  );
+
+  let mergedLoaderProps = userLoaderProps;
+  if (useRecursicaLoader) {
+    // color="var(--button-color)" makes the loader ring match this button's own text color
+    // (Mantine's Button sets --button-color per variant/state) instead of Loader's own
+    // standalone indicator-color token, which Loader.module.css's `.root` would otherwise
+    // apply unconditionally, ignoring this nesting context. overStyled is required to pass
+    // `color` at all (blocked by default) — fully internal composition, no prop threading to
+    // callers, so it doesn't widen Loader's public API. See Button's IMPLEMENTATION_NOTES.md.
+    mergedLoaderProps = {
+      children: (
+        <Loader
+          variant={loaderVariant}
+          size={resolvedLoaderSize}
+          overStyled
+          color="var(--button-color)"
+        />
+      ),
+      ...userLoaderProps,
+    };
+  }
+
+  return (
+    <MantineButton
+      ref={ref}
+      {...sanitizedProps}
+      className={finalClass}
+      classNames={mergedClassNames}
+      variant={mapVariant[variant]}
+      size={mapSize[size]}
+      loaderProps={mergedLoaderProps}
+      leftSection={
+        icon != null ? (
+          <span className={styles.iconWrapper} aria-hidden>
+            {icon}
+          </span>
+        ) : undefined
+      }
+      data-variant={variant}
+      data-size={size}
+      data-content={contentType}
+      disabled={!!restRecord.disabled || !!restRecord.loading}
+    >
+      <span className={styles.labelText}>{children}</span>
+    </MantineButton>
+  );
+});
+_Button.displayName = "Button";
+
+/**
+ * Recursica Button component wrapping Mantine's Button.
+ *
+ * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
+ * This is particularly useful when you need a button that behaves as a hyperlink (rendering an `<a>` tag)
+ * or integrates with a routing library (e.g., `react-router-dom` or Next.js), while preserving full visual styling.
+ *
+ * @example
+ * ```tsx
+ * // Renders as an <a> tag natively
+ * <Button component="a" href="/dashboard" target="_blank">Navigate</Button>
+ *
+ * // Renders using a custom router link
+ * <Button renderRoot={(props) => <Link to="/home" {...props} />}>Home</Button>
+ * ```
+ */
+export const Button = createPolymorphicComponent<"button", ButtonProps>(
+  _Button,
+);

package/src/components/Button/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,109 @@
+# Button – implementation notes
+
+Decisions and design tweaks for the Recursica Button that go beyond the Component Development Guide. Use this when maintaining the Button or when adding similar behavior to other components.
+
+---
+
+## Icon size: Recursica defines it
+
+**Decision:** Icon size is **not** left to the developer. Recursica defines it via the design tokens; the Button enforces it so callers cannot pass an arbitrarily sized icon.
+
+**Implementation:**
+
+- When `icon` is provided, the Button wraps it in a single element with class `iconWrapper` before passing it to Mantine’s `leftSection`.
+- In `Button.module.css`, `.iconWrapper` has explicit `width` and `height` from the Recursica tokens mapping natively based on `data-size`.
+- The rule `.iconWrapper > *` sets `width: 100%`, `height: 100%`, and `object-fit: contain` so whatever the caller passes scales cleanly with the token constraints.
+
+---
+
+## Icon-only buttons: accessibility and width
+
+**Decision:** When the button has an icon and no visible label (icon-only), callers must provide an accessible name, and the button must not show extra space to the right of the icon.
+
+**Accessibility:** We document that icon-only buttons must pass `aria-label` (e.g. `aria-label="Submit"`). In development we log a console warning if `icon` is set, `children` is empty, and `aria-label` is missing.
+
+**Width:** Mantine’s layout natively applies structural section gaps. We detect icon-only and set a `data-icon-only` hook so that `Button.module.css` zeros out the sections spacing allowing the button to precisely hit `min-width` perfectly centered.
+
+---
+
+## Label truncation at max-width
+
+**Decision:** When the button hits its Recursica max-width (500px), the label truncates with an ellipsis instead of wrapping.
+
+**Implementation:**
+Mantine's `.mantine-Button-label` flex centering breaks primitive truncation logic. To combat this:
+
+- **`.root`** has `overflow: hidden`.
+- **`.root > *`** forces `min-width: 0`.
+- The structural children wrap into `<span className={styles.labelText}>`.
+- **`.labelText`** binds `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` creating flawless string cutoffs strictly at exact UI constraints.
+
+**Bug found (2026-08-27):** none of the above clips the button itself against a _constraining ancestor_ (e.g. `<div style={{ maxWidth: 250 }}>` — see the `TruncatedLabel` story). `.root` uses `width: fit-content` so it hugs its own content when unconstrained, but `fit-content` on this box doesn't reliably resize down against a narrower parent's resolved width — verified via Playwright: the button rendered at its full 534px `max-content` width and visually overflowed the 250px wrapper, even though the wrapper itself measured 250px. `max-width: 100%` on `.root` (percentage of the actual containing block) fixes it — it doesn't fight `width: fit-content` for the normal unconstrained case, it only kicks in when the parent is narrower than the content's intrinsic width.
+
+---
+
+## Disabled state: brand theme opacity (implicit)
+
+**Decision:** The UI kit enforces global brand theme disabled opacities. The `.root:disabled` logic implicitly overrides visibility locally via `var(--recursica_brand_states_disabled)`.
+
+---
+
+## Loader color contrast — fixed (source-of-truth audit, 2026-08-30)
+
+**Superseded:** the entry below originally documented an explicit decision _not_ to fix this.
+Re-verified during the mantine-vs-mui source-of-truth audit by measuring actual computed styles
+in the `Loading` story: the loader ring rendered `#c21b43` (Loader's own standalone
+`indicator-color` token) against a label text color of `rgb(249, 249, 249)` — a real, confirmed
+mismatch on the `solid` variant, not a false report.
+
+**Root cause:** `Loader.module.css`'s `.root` unconditionally sets `--loader-color:
+var(--recursica_..._loader_properties_indicator-color)` directly on the Loader's own root
+`<span>`. Mantine's own Button internally wraps `loaderProps.children` in a generic `<Loader
+size color>` that sets `--loader-color: var(--button-color)` as an _inline_ style on an outer
+wrapper div — but our own nested `<Loader>` (rendered as `loaderProps.children`) has an identical
+class (`mantine-Loader-root`) on its own root, so its own stylesheet rule locally re-declares
+`--loader-color`, shadowing the inherited value from that outer wrapper for anything computed on
+or under our own element (CSS custom properties resolve against the nearest self-or-ancestor
+declaration — a local re-declaration always wins over what an ancestor tried to pass down,
+regardless of whether the ancestor's value came from an inline style or not).
+
+**Fix:** pass `color="var(--button-color)"` to the Button-owned `<Loader>` — Mantine's own
+`Loader` factory writes any `color` prop straight through `getThemeColor()`/`parseThemeColor()`
+(safely falls through unresolved CSS values like a `var()` reference verbatim, per
+`@mantine/core`'s own `parse-theme-color.cjs`) into an _inline_ `--loader-color` style on that
+same root span — which, being inline, now wins over our own `.root` stylesheet declaration.
+Also added `--button-color` (`!important`) to each variant's own block in `Button.module.css`,
+set to that variant's own `colors_text-color` token — needed because Mantine's Button sets its
+own generic `--button-color: var(--mantine-color-white)` via an inline style on the button root
+itself, which our external stylesheet couldn't otherwise outrank at equal/lower priority
+regardless of selector specificity. Verified live: loader ring color now matches the label text
+color exactly (`rgb(249, 249, 249)`) across solid/outline/text variants, no visual regression on
+non-loading stories.
+
+---
+
+## Loading state enforces disabled state
+
+**Decision:** When `loading={true}` is passed to the Button, the component explicitly forces `disabled={true}` natively on the underlying element.
+
+**Implementation:** This ensures that loading buttons automatically inherit the brand theme disabled opacities (via the `:disabled` CSS pseudo-class) rather than relying solely on Mantine's native `data-disabled` dataset logic, which may not trigger the strict visual fade required by the Recursica design system.
+
+---
+
+## `className` overwrite bug (Matt Massey, 2026-08-08)
+
+**Bug:** with `overStyled` and a custom `className` (surfaced by Tree embedding a `Button` for its expand chevron — see `Tree/IMPLEMENTATION_NOTES.md`), `finalClass` (`` `${styles.root} ${classNameProp}` ``) was set explicitly on `<MantineButton>`, but `{...sanitizedProps}` was spread _after_ it — and `sanitizedProps` still contained the original, unmodified `className` key, since it had only been _read_, never deleted. The later spread would silently overwrite `finalClass` with just the caller's own class. Same bug class as `Dropdown.tsx`/`BareDropdown.tsx` had.
+
+**Why it wasn't visible here:** `classNames={{root: mergedClassNames.root, ...}}` is a _separate_ Mantine prop from the plain `className` string, unaffected by the overwrite, and `mergedClassNames.root` always includes `styles.root` independently — so the root element kept its Recursica styling regardless of the bug. mui-adapter's equivalent `Button.tsx` has no such secondary path (`@mui/material` only has a plain `className`), so the identical mistake there was fully visible (chevron rendered in MUI's own default color). Fixed in both regardless, since this is a real latent bug independent of whether it happens to be masked today.
+
+---
+
+## `.labelText` descender clipping (Matt Massey, 2026-08-28)
+
+`.labelText` used plain `overflow: hidden` to make `text-overflow: ellipsis` work, which also
+clips descenders (e.g. the "g" in a long label) whenever `text_line-height` is tighter than the
+font's natural ascent+descent. Switched to `overflow: clip; overflow-clip-margin: 0.35em;` — same
+truncation, but ink can bleed slightly past the line box before it's actually clipped. `.root`'s
+own `overflow: hidden` (the max-width truncation bounding box) is untouched — it has padding
+around the label so it isn't tight against the glyphs the way `.labelText` is. Project-wide fix;
+see Chip's `CHIP_IMPLEMENTATION_NOTES.md` for the original discovery.

package/src/components/Button/USAGE.md

@@ -0,0 +1,80 @@
+# Button - Usage Guide
+
+This document describes how to integrate and use the `Button` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Button } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Button } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return (
+    <Button variant="primary" onClick={() => console.log("Clicked!")}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+## Icon size: Recursica defines it
+
+Icon size is **not** left to the developer. Recursica defines it via the design tokens, so callers cannot pass an arbitrarily sized icon — whatever is passed in `icon` is scaled to fit the token-defined dimensions for the button's size.
+
+---
+
+## Icon-only buttons: accessibility
+
+When the button has an icon and no visible label (icon-only), callers must provide an accessible name via `aria-label` (e.g. `aria-label="Submit"`). In development, a console warning is logged if `icon` is set, `children` is empty, and `aria-label` is missing.
+
+---
+
+## Label truncation at max-width
+
+When the button hits its Recursica max-width (500px), the label truncates with an ellipsis instead of wrapping.
+
+---
+
+## Disabled state: brand theme opacity (implicit)
+
+**Decision:** The UI kit enforces global brand theme disabled opacities. The `.root:disabled` logic implicitly overrides visibility locally via `var(--recursica_brand_states_disabled)`.
+
+---
+
+## Loader color contrast
+
+**Decision:** When a Button is in a loading state, the `Recursica Loader` component is injected. The `Loader` component strictly defines its own colors and styles per variant, meaning it does not inherit the text color (`currentColor`) from the Button.
+
+**Constraint:** This can lead to contrast issues (e.g., a blue dots loader inside a solid blue button). Design has explicitly decided not to address this at the moment. As such, developers using the `loading` prop must be aware that the loader's color is fixed by its internal tokens, not by the button's context.
+
+---
+
+## Loading state enforces disabled state
+
+When `loading={true}` is passed to the Button, it is also treated as disabled — the button cannot be interacted with while loading.

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/src/components/Card/CARD_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,17 @@
+# Card Implementation Notes
+
+## Architecture Overrides
+
+Because Mantine natively constructs `Card` bounding boxes with generic inner `<Card.Section>` elements that depend on explicit user styling (and lack implicit native designations for "Header" vs "Footer"), we implemented an explicit component wrapper departure:
+
+- `<Card.Header>` explicitly hooks `--recursica_ui-kit_components_card_properties_header-background` and corresponding padding variables.
+- `<Card.Footer>` explicitly hooks `--recursica_ui-kit_components_card_properties_footer-background` and corresponding padding variables.
+
+Mantine's generic `<Card.Section>` calculates negative margins implicitly. Because of this, it is crucial that our local CSS module declares `--card-padding: var(--recursica_ui-kit_components_card_properties_padding)` directly on `.root` so that all generic or explicit section wrappers natively stretch across the bounding box properly.
+
+## Layout Alignment Exceptions
+
+To allow Cards to fit cleanly inside dynamic/flex layouts (like dashboard panels, grid tracks, or sidebar layout segments), the Card wrapper implements a custom gatekeeper bypass for outer styling properties:
+
+- Exposes a safe subset of flexbox/dimensions styling properties (`flex`, `flexGrow`, `flexShrink`, `flexBasis`, `grow`, `h`, `height`) on the root `<Card>` component to allow proper sizing alongside layout siblings.
+- Sets `<Card.Content>` to `flex-grow: 1;` by default via CSS modules. Since the root `<Card>` has `display: flex; flex-direction: column;`, this makes the content area expand to fill all vertical space, pushing `<Card.Footer>` to align at the absolute bottom of the bounding box.

package/src/components/Card/Card.module.css

@@ -0,0 +1,119 @@
+/* HARDCODED VALUES:
+   - display: flex on root
+   - flex-direction: column
+   - gap: section-gap
+ */
+
+.root {
+  /* HARDCODE: Map Recursica explicitly into Mantine's variable format so internal components know the margins */
+  --card-padding: var(--recursica_ui-kit_components_card_properties_padding);
+
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_background-color
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_card_properties_borders_border-radius
+  );
+  border: var(--recursica_ui-kit_components_card_properties_borders_border-size)
+    solid var(--recursica_ui-kit_components_card_properties_colors_border-color);
+  box-shadow: var(
+    --recursica_ui-kit_components_card_properties_elevations_elevation
+  );
+
+  padding: var(--card-padding);
+  min-width: var(--recursica_ui-kit_components_card_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_card_properties_max-width);
+  color: var(--recursica_ui-kit_components_card_properties_colors_content);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--recursica_ui-kit_components_card_properties_section-gap);
+}
+
+.header {
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_header-background-color
+  );
+  padding: var(--recursica_ui-kit_components_card_properties_header-padding);
+  color: var(--recursica_ui-kit_components_card_properties_colors_title);
+  border-bottom: var(--recursica_ui-kit_components_card_properties_divider-size)
+    solid
+    var(--recursica_ui-kit_components_card_properties_colors_divider-color);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_card_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_card_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_card_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_card_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_card_properties_header-style_textDecoration
+  );
+}
+
+.footer {
+  background-color: var(
+    --recursica_ui-kit_components_card_properties_colors_footer-background-color
+  );
+  padding: var(--recursica_ui-kit_components_card_properties_footer-padding);
+  border-top: var(--recursica_ui-kit_components_card_properties_divider-size)
+    solid
+    var(--recursica_ui-kit_components_card_properties_colors_divider-color);
+}
+
+.section {
+  /* Just maps standard section spacing overrides if passed explicitly */
+  margin-top: var(
+    --recursica_ui-kit_components_card_properties_vertical-gutter
+  );
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--recursica_ui-kit_components_card_properties_vertical-gutter);
+  padding: 0;
+  flex-grow: 1;
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_card_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_card_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_card_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_card_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_card_properties_content-style_textDecoration
+  );
+}