Box

Box is the styling primitive that succeeds Camp 1's Styled component. It renders a single element (polymorphic via as), applies the global reset, and resolves design tokens in spacing props (m, p, px, …) and in the styles / dangerouslySetStyles objects — including responsive array values and nested selectors.

Overview

Resources

Install

yarn add @camp/box

Upgrading from Camp 1 `Styled`

Box replaces Styled from @activecampaign/camp-components-styled with prop-for-prop parity (verified by a 435-entry parity harness against real product usage). The mechanical migration is performed by the box-migrate codemod in ac-frontend.

// Previous implementation
import Styled from '@activecampaign/camp-components-styled';
 
<Styled m="sp400" styles={{ color: 'ocean500' }}>
  content
</Styled>;
 
// New implementation
import { Box } from '@camp/box';
 
<Box m="sp400" styles={{ color: 'ocean500' }}>
  content
</Box>;

Differences from Styled (deliberate, documented in the package's MIGRATION.md):

The static class is camp-box (successor to is-styled).
The styled.settings rem-base singleton is gone — token values are fixed at base 16.
as={AnotherStyledComponent} fusion is not supported (plain as polymorphism only).

Theming

Box resolves semantic token paths (e.g. background.default) from the ambient styled-components theme. themed={false} pins the subtree to the light theme. Box currently ships light-theme resolution only; dark-theme support is a tracked follow-up.

Legacy Camp 1 tokens

Box still resolves legacy Camp 1 token names (sp400, ocean500, b200, …) at runtime and logs a deprecation warning pointing at the Next Gen replacement. The mapping table itself is published for migration tooling only at the @camp/box/legacy subpath:

import { legacyTokens } from '@camp/box/legacy';
 
legacyTokens.banana100;
// { category: 'color', kind: 'closest', value: '#FFF5DE', replacement: 'primitives.midday.200', … }

Application code should never import token data from this package — canonical token values come from @camp/tokens.

Box