@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/card-body/CardBody.types.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CardBodyOwnProps {
+    /** The picture is the card's ground and the copy is read on top of it. Set explicitly rather than inferred from src, which BannerBody can afford to do and this cannot: there, art is always behind the words, so having art and being over it are the same fact. Here a picture is a region in the column by default, and the same src means two different cards */
+    overMedia?: boolean;
+    /** The card has no fill for the copy to be held off — Card's `plain` variant, where the picture is the card's edge rather than the ground being it. The inline inset goes and the copy lines up with the picture above it; the block padding stays, because the space between a picture and the line under it is still doing its job */
+    flush?: boolean;
+    /** The card is pressable and its picture is what answers the pointer — an editorial card inside a CardButton, on any ground. The picture grows by motion.scale.media-hover and media-frame clips it, so what the reader sees is the frame holding still while the art moves inside it. Setting this is also what stops the card lifting: CardButton suppresses its own lift when the body it holds zooms, so the two motions never compete */
+    zoomOnHover?: boolean;
+    /** The card is small enough that the standard inset and the standard type are most of it. `space.inset.card` is thirty-two, which is a fifth of the width of a rail beside a footer's columns; `font.h5` is twenty-four, which is a heading over a group of cards rather than the name of one two hundred pixels wide.
+  
+  This takes the inset to `space.inset.md`, the title to `font.label.md` and the description to `font.body.sm` — sixteen and fourteen, where the standard card runs twenty-four and sixteen. The pair moves together: dropping the title alone would put a heading two pixels above its own body copy.
+  
+  It is about the card's size rather than its importance. A compact card is not a lesser one. */
+    compact?: boolean;
+    /**
+     * `default` — The card is on the page, which is nearly every card
+     * `inverse` — The card sits on a band that paints its own dark ground, and carries `tone="inverse"` itself. The eyebrow takes the inverse muted ink so it stays quieter than the copy without falling below what a reader can make out
+     */
+    tone?: 'default' | 'inverse';
+    /** The card is filed under something a reader scans before the headline — the date an article ran, how long it takes to read, the category it sits in. Write it in the case it should be read in: the part draws the capitals itself, so 'August' is what belongs here and AUGUST is what appears */
+    eyebrow?: string;
+    /** The card names what it is about. A noun phrase rather than a sentence — 'Balance protection', not 'We protect your balance' — because it is read as a label on the block beneath it. A string rather than a node: a node could carry a mark or a link, and would cost the component its examples — the checker requires a named element there, so no row could ever show a card with real copy in it. */
+    title?: string;
+    /** What the title means, usually a sentence or two. It takes the default body step, because a card's copy is copy rather than a caption. A string rather than a node, for the reason the title is one — a node prop cannot be given text in an examples row, and a card nobody can show is worse than a sentence that cannot hold a link. */
+    description?: string;
+    /** The card's own way on — "Learn more" — under the line, for a card in a Card rather than a CardButton: the card is read and the link is what is pressed. A standalone Link. On a card that paints its own ground, accent or accent-strong, give it tone="inherit" so it takes the card's white; on a light card it keeps its coral. */
+    link?: ReactNode;
+    /** The card leads with a glyph — a badge, a shield, a small piece of art that makes the feature recognisable before the title is read. Set it on every card in a set or on none of them: one card in a row carrying a mark reads as the important one, which is a claim the mark was not meant to make. Pass the glyph; the body draws it at its own step, and an Icon passed already sized is unwrapped rather than obeyed */
+    mark?: ReactNode;
+    /** The card shows a picture — a photograph, a product render, a screenshot of the thing being described. Absent is the ordinary case: most cards are words */
+    src?: string;
+    /** Whenever src is, and empty when the picture says nothing the copy has not already said. A decorative render beside a title naming it — a shield next to 'Integrity' — takes alt="", which tells a screen reader to skip it rather than read a filename aloud. A photograph carrying meaning of its own takes a sentence describing what it shows */
+    alt?: string;
+    /** The picture must hold a known shape rather than absorb the card's spare height — a logo that distorts the moment it is cropped, or a chart whose proportions are the point. Written as the division rather than the result, so the shape is legible: aspect={16 / 9}, not aspect={1.7778} */
+    aspect?: number;
+    /**
+     * `below` — The copy introduces the picture — a feature named and explained, then shown. The ordinary case, and what a reader scanning a column of cards is reading for
+     * `above` — The picture is what the reader recognises the card by and the words caption it — a photograph leading an article, a screenshot the copy then describes. Changes the order of the elements themselves rather than only their appearance, so what a screen reader hears follows what the page shows
+     */
+    mediaPosition?: 'below' | 'above';
+}
+export type CardBodyProps = CardBodyOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'overMedia' | 'flush' | 'zoomOnHover' | 'compact' | 'tone' | 'eyebrow' | 'title' | 'description' | 'link' | 'mark' | 'src' | 'alt' | 'aspect' | 'mediaPosition'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const cardBodyParts: {
+    readonly root: "dds-cardbody";
+    readonly scrim: "dds-cardbody__scrim";
+    readonly content: "dds-cardbody__content";
+    readonly mark: "dds-cardbody__mark";
+    readonly eyebrow: "dds-cardbody__eyebrow";
+    readonly title: "dds-cardbody__title";
+    readonly description: "dds-cardbody__description";
+    readonly link: "dds-cardbody__link";
+    readonly 'media-frame': "dds-cardbody__media-frame";
+    readonly media: "dds-cardbody__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const cardBodyDefaults: {
+    readonly overMedia: false;
+    readonly flush: false;
+    readonly zoomOnHover: false;
+    readonly compact: false;
+    readonly tone: "default";
+    readonly mediaPosition: "below";
+};

package/dist/components/core/card-body/CardBody.types.js

@@ -0,0 +1,16 @@
+// GENERATED from card-body.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const cardBodyParts = {
+    root: 'dds-cardbody',
+    scrim: 'dds-cardbody__scrim',
+    content: 'dds-cardbody__content',
+    mark: 'dds-cardbody__mark',
+    eyebrow: 'dds-cardbody__eyebrow',
+    title: 'dds-cardbody__title',
+    description: 'dds-cardbody__description',
+    link: 'dds-cardbody__link',
+    'media-frame': 'dds-cardbody__media-frame',
+    media: 'dds-cardbody__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const cardBodyDefaults = { overMedia: false, flush: false, zoomOnHover: false, compact: false, tone: 'default', mediaPosition: 'below' };

package/dist/components/core/card-body/card-body-impl.css

@@ -0,0 +1,87 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every rule below ties or beats exactly what it would have without it.
+ * Imported after the generated sheet, which is what lets the ties fall this way.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * The picture answers a pointer that is anywhere on the card.
+ *
+ * Here because of the shape of the selector rather than the value in it. A state bound on a
+ * part emits hover on that part — `.dds-cardbody__media:hover` — so the picture would grow
+ * while the pointer was on the picture and sit still while it was on the headline of the
+ * very same card. What an editorial card wants is the root's hover reaching one of its own
+ * children, and the generator has no vocabulary for that.
+ *
+ * The body is the card's only child and takes its full height, so hovering the card is
+ * hovering the body. That is what keeps this inside one component: both halves of the
+ * selector are CardBody's own, and nothing here reaches into a part someone else owns.
+ *
+ * What stops this from growing the card is `media-frame`, not anything in this rule. A
+ * transform never reflows, so the layout was never going to move — but an <img> cannot clip
+ * itself, and before the frame existed the nearest clip was the Card's, one level up and
+ * around the copy as well. The picture grew past its own box and painted over the eyebrow
+ * and the headline, and in a body with no card around it, over whatever came next. The
+ * frame holds the box; this moves the art inside it.
+ *
+ * The step is `motion.scale.media-hover` rather than `motion.scale.hover`. The latter is held to two
+ * per cent because a control that grows past the pointer fires its own mouse-out; a picture in a frame
+ * that never moves cannot do that, so it takes twice the step.
+ *
+ * `scale` rather than `transform: scale()`, matching the `translate` CardButton binds for
+ * its lift. They are independent properties, so neither needs the other's matrix — which is
+ * what would let one card do both. None does: the lift is bound to the four variants with a
+ * fill, and this is for the one without.
+ *
+ * Two classes deep to match the generated rule it sits against, which is
+ * `.dds-cardbody .dds-cardbody__media`. A bare `.dds-cardbody__media` would lose on
+ * specificity however late it loaded, which is the quiet way an override fails.
+ */
+:where([data-dds-context="marketing"]) .dds-cardbody[data-zoom-on-hover="true"]:hover .dds-cardbody__media {
+  scale: var(--motion-scale-media-hover);
+}
+
+/*
+ * Only the property list. The duration and the curve are bound in the contract, on this
+ * same part and under this same axis, so the generated sheet already carries them — and
+ * binding them is also what tells the generator this component has motion at all, which is
+ * what makes it emit the reduced-motion block below this one.
+ *
+ * The list itself cannot be bound, because the generator computes it from the properties a
+ * contract binds on a state, and the only thing that moves here is bound in no state.
+ *
+ * Those two are `motion.duration.media-hover` and `motion.easing.media-hover`, which together
+ * with `motion.scale.media-hover` are the three roles this one effect owns. `duration.normal`
+ * is the role whose description names card hover, and 200ms is right for a card that lifts:
+ * the movement is small and over. A picture that zooms is still on screen when it stops and
+ * the eye follows it the whole way, so the same 200ms reads as a snap. 400ms is the step that
+ * follows without lagging the pointer.
+ *
+ * The curve matters more than the duration. `easing.standard` is `emphasized`, which is
+ * 87 per cent travelled by its halfway point — a one-way shape, for something arriving
+ * somewhere. A hover is the one transition that runs backwards as often as forwards, and an
+ * asymmetric curve played in reverse is a different animation: a snap going in, a drift coming
+ * out. `media-hover` is `in-out-soft`, which is the same shape both ways.
+ */
+:where([data-dds-context="marketing"]) .dds-cardbody[data-zoom-on-hover="true"] .dds-cardbody__media {
+  transition-property: scale;
+}
+
+/*
+ * The generated reduced-motion block turns the transition off and stops there, which is
+ * right for every other component in the package: with nothing to interpolate, a colour
+ * simply arrives. Here it would leave the picture jumping between two sizes on hover — more
+ * motion in less time, which is the opposite of what the reader asked for.
+ *
+ * So the scale goes too. Written here because the generated block is generated: it knows a
+ * component has transitions, not that one of them was a size.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-cardbody[data-zoom-on-hover="true"]:hover .dds-cardbody__media {
+    scale: none;
+  }
+}

package/dist/components/core/card-button/CardButton.css

@@ -0,0 +1,82 @@
+/* GENERATED from cardbutton.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-cardbutton {
+  transition-property: outline-color, outline-width, translate;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  outline-style: solid;
+  overflow: hidden;
+  padding: 0;
+  text-align: start;
+  text-decoration: none;
+  border-radius: var(--radius-surface);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent"] {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="plain"] {
+  border-radius: var(--radius-none);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light);
+  color: var(--color-fg-on-surface-card-light);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-raised"] {
+  background-color: var(--color-bg-surface-card-raised);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface"] {
+  background-color: var(--color-bg-surface);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent-strong"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-light"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-raised"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-cardbutton { transition: none !important; }
+}
+

package/dist/components/core/card-button/CardButton.d.ts

@@ -0,0 +1,27 @@
+import './CardButton.css';
+import './card-button-impl.css';
+import { type CardButtonProps } from './CardButton.types.js';
+export type { CardButtonProps };
+/**
+ * A card that responds to a press.
+ *
+ * Which element it renders is decided by `href` and nothing else. A card that goes to a
+ * page and a card that opens a dialog are the same gesture with different destinations,
+ * and the element is what tells a browser which: a `<button>` answers Space and does what
+ * the page says, an `<a>` gives cmd-click, a visible destination and a copyable link. Two
+ * components for that would be two names for one gesture.
+ *
+ * Everything Card's surface does, this does — the four grounds, the corner, the clip, no
+ * inset of its own. What it adds is that the whole surface is one target, and what it gives
+ * up is holding a control: a button inside a button is unreachable, which is why
+ * `forbiddenChildren` names every one of them.
+ *
+ * `color` is bound per ground rather than inherited, which the anchor makes necessary — a
+ * `<button>` takes the text colour around it and an `<a>` does not, so without it every
+ * word in the card would come out the browser's link blue.
+ *
+ * `type="button"` on the button branch, because a card inside a form would otherwise submit
+ * it: the default for a `<button>` is `submit`, and a promotional card that reloaded the
+ * page is the kind of fault nobody looks for in a card.
+ */
+export declare function CardButton({ variant, href, children, ...rest }: CardButtonProps): import("react").JSX.Element;

package/dist/components/core/card-button/CardButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './CardButton.css';
+import './card-button-impl.css';
+import { cardButtonDefaults, cardButtonParts } from './CardButton.types.js';
+/**
+ * A card that responds to a press.
+ *
+ * Which element it renders is decided by `href` and nothing else. A card that goes to a
+ * page and a card that opens a dialog are the same gesture with different destinations,
+ * and the element is what tells a browser which: a `<button>` answers Space and does what
+ * the page says, an `<a>` gives cmd-click, a visible destination and a copyable link. Two
+ * components for that would be two names for one gesture.
+ *
+ * Everything Card's surface does, this does — the four grounds, the corner, the clip, no
+ * inset of its own. What it adds is that the whole surface is one target, and what it gives
+ * up is holding a control: a button inside a button is unreachable, which is why
+ * `forbiddenChildren` names every one of them.
+ *
+ * `color` is bound per ground rather than inherited, which the anchor makes necessary — a
+ * `<button>` takes the text colour around it and an `<a>` does not, so without it every
+ * word in the card would come out the browser's link blue.
+ *
+ * `type="button"` on the button branch, because a card inside a form would otherwise submit
+ * it: the default for a `<button>` is `submit`, and a promotional card that reloaded the
+ * page is the kind of fault nobody looks for in a card.
+ */
+export function CardButton({ variant = cardButtonDefaults.variant, href, children, ...rest }) {
+    const shared = {
+        className: cardButtonParts.root,
+        // Read from `data-variant` rather than folded into the class, the same way Card reads it.
+        'data-variant': variant,
+    };
+    if (href !== undefined) {
+        return (_jsx("a", { ...rest, ...shared, href: href, children: children }));
+    }
+    return (_jsx("button", { ...rest, ...shared, type: "button", children: children }));
+}

package/dist/components/core/card-button/CardButton.types.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface CardButtonOwnProps {
+    /**
+     * `surface` — The default, and right for a pressable card on the page. The same recessed step off the white page that Card takes, so a row mixing pressable and plain cards reads as one row
+     * `surface-light` — A light card among dark ones that has to stay light in both themes — a row mixing a dark, a coral and a grey card, where the grey one flipping to dark in dark mode would make two dark cards. gray.50 with gray.950 text, fixed. For an ordinary card that follows the theme, surface.
+     * `surface-raised` — The card sits on a color.bg.subtle band rather than on the page, where the recessed fill all but disappears and this one lifts off the band instead
+     * `accent` — One card in a set is the promotional one and the page has already earned the colour
+     * `accent-strong` — A card carrying more weight than its neighbours. The darkest of the four, and the one that takes white at 20.55:1 — the most legible ground a marketing card has
+     * `plain` — An editorial card that goes somewhere — an article, a post, a release note. No fill, no corner and no lift: what marks it out is its picture and the gap to the next one, the way a column of articles is told apart on a page rather than the way a row of tiles is. The same ground Card's own plain variant takes, so a pressable article card and a static one sit in one column without a seam
+     */
+    variant?: 'surface' | 'surface-light' | 'surface-raised' | 'accent' | 'accent-strong' | 'plain';
+    /** The press goes somewhere with a URL of its own. It makes this an anchor rather than a button, which is what gives a reader cmd-click, a visible destination and a copyable link — none of which mean anything for a press that opens a dialog. This is the ordinary case on a marketing page, where most cards point at a page */
+    href?: string;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type CardButtonProps = CardButtonOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'variant' | 'href'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const cardButtonParts: {
+    readonly root: "dds-cardbutton";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const cardButtonDefaults: {
+    readonly variant: "surface";
+};

package/dist/components/core/card-button/CardButton.types.js

@@ -0,0 +1,7 @@
+// GENERATED from card-button.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const cardButtonParts = {
+    root: 'dds-cardbutton',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const cardButtonDefaults = { variant: 'surface' };

package/dist/components/core/card-button/card-button-impl.css

@@ -0,0 +1,39 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so the rule below beats exactly what it needs to and nothing else.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * One motion per gesture: a card whose picture zooms does not also lift.
+ *
+ * Two motions answering one hover reads as a glitch rather than as emphasis — the frame
+ * slides up while the art inside it grows, and neither movement is legible because the
+ * other is happening. Which one to keep is decided by what the card is: an editorial card
+ * is recognised by its picture, so the picture is what should answer the pointer.
+ *
+ * This is a separate rule from `plain` having no lift, and the two are independent. That one
+ * is about the ground: with no fill, what would rise is a picture and some loose text, which
+ * reads as the words sliding. This one is about the motion already present, and it holds on
+ * every variant — an editorial card on a surface fill has a ground to lift and still should
+ * not, because its picture is already moving.
+ *
+ * Written here because the condition is a fact about this component's child. A contract binds
+ * a property under a styling axis of its own, and "the body inside me zooms" is neither — it
+ * is CardBody's prop, one level down. `:has()` is what lets this stay a rule about the
+ * CardButton: the selector is on this component's own root, and the child is only read.
+ *
+ * `>` rather than a descendant, because a CardButton holds exactly one child. A loose
+ * descendant would also match a zooming body nested somewhere deeper, which is a shape
+ * childCount already forbids and this need not restate.
+ *
+ * Specificity: the generated lift is `.dds-cardbutton[data-variant="…"]:hover:where(…)`, at
+ * three classes. This reads four — the class, the two inside `:has()`, and `:hover` — so it
+ * wins on weight rather than on load order, and would still win if the sheets were reordered.
+ */
+:where([data-dds-context="marketing"]) .dds-cardbutton:has(> .dds-cardbody[data-zoom-on-hover="true"]):hover {
+  translate: none;
+}

package/dist/components/core/checkbox/Checkbox.css

@@ -0,0 +1,156 @@
+/* GENERATED from checkbox.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__control {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__box {
+  align-items: center;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  position: relative;
+  background-color: var(--color-bg-surface-raised);
+  block-size: var(--size-checkbox-box);
+  border-color: var(--color-border-default);
+  border-radius: var(--radius-control-sm);
+  border-width: var(--border-width-default);
+  inline-size: var(--size-checkbox-box);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__field {
+  appearance: none;
+  cursor: pointer;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  block-size: var(--size-checkbox-box);
+  inline-size: var(--size-checkbox-box);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__indicator {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  block-size: var(--icon-size-2xs);
+  inline-size: var(--icon-size-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__label {
+  cursor: pointer;
+  color: var(--color-fg-default);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__message {
+  align-items: flex-start;
+  display: flex;
+  overflow-wrap: anywhere;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  gap: var(--space-gap-xs);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__description-text {
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__box:hover:where(:not(:has(.dds-checkbox__field:disabled))) {
+  box-shadow: var(--elevation-ring-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox:has(.dds-checkbox__field:focus-visible) .dds-checkbox__box {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox:has(.dds-checkbox__field:disabled:not(:where(:disabled *))) {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-status="error"] .dds-checkbox__message {
+  color: var(--color-fg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-status="success"] .dds-checkbox__message {
+  color: var(--color-fg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-status="warning"] .dds-checkbox__message {
+  color: var(--color-fg-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="accent"] .dds-checkbox__indicator {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="standard"] .dds-checkbox__indicator {
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-checked="unchecked"][data-status="error"] .dds-checkbox__box {
+  border-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-checked="unchecked"][data-status="success"] .dds-checkbox__box {
+  border-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-checked="unchecked"][data-status="warning"] .dds-checkbox__box {
+  border-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="accent"][data-checked="checked"] .dds-checkbox__box {
+  background-color: var(--color-bg-brand);
+  border-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="accent"][data-checked="indeterminate"] .dds-checkbox__box {
+  background-color: var(--color-bg-brand);
+  border-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="standard"][data-checked="checked"] .dds-checkbox__box {
+  background-color: var(--color-bg-strong);
+  border-color: var(--color-bg-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="standard"][data-checked="indeterminate"] .dds-checkbox__box {
+  background-color: var(--color-bg-strong);
+  border-color: var(--color-bg-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox .dds-checkbox__field:disabled {
+  cursor: not-allowed;
+}
+

package/dist/components/core/checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import './Checkbox.css';
+import './checkbox-impl.css';
+import { type CheckboxProps } from './Checkbox.types.js';
+export type { CheckboxProps };
+/**
+ * A real `<input type="checkbox">`, invisible, with the box the user sees drawn as
+ * its sibling.
+ *
+ * The tick lives inside `box`, which is a `<span>`, and the input covers the box rather
+ * than containing anything. So every part here is a real element the generator can name,
+ * *and* the control is native: it submits with a form, it takes the keyboard for free,
+ * and it carries the mixed state properly.
+ *
+ * That is why nothing below writes `role` or `aria-checked` by hand. The element is
+ * already a checkbox and already announces its state.
+ *
+ * It carries its own status and its own description. A lone consent is the case with
+ * nothing above it to hold either, and one that cannot show its own error is a form the
+ * reader cannot be told they failed.
+ */
+export declare function Checkbox({ tone, checked, status, label, showLabel, description, statusMessage, id, onChange, ...rest }: CheckboxProps): import("react").JSX.Element;