@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/core/button/Button.types.d.ts

@@ -1,30 +1,25 @@
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface ButtonOwnProps {
-    /**
-     * `primary` — The step the page was built to produce. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two — a section offering two brand fills has said nothing about either.
-     * `secondary` — A real destination that is not the one being pushed — compare plans, read the docs, talk to sales. An outline rather than a quiet fill: this package has color.bg.hover for the wash but no hover partner for color.bg.subtle, so a filled secondary would get lighter on hover instead of darker. The outline keeps the shape, the inset and the target size, and gives up only the fill.
-     * `inverse` — A section that paints its own ground — a brand-coloured hero, a photo band, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
-     */
-    variant?: 'primary' | 'secondary' | 'inverse';
     /**
      * `sm` — A dense band where the button is one control among several — a filter row, a utility bar, an action beside body copy. size.control.sm tall against space.control.sm on the sides, half of it as at every step. The label holds at font.label.sm, md's own 14px: the label ramp has no step below it, so what separates these two is the box. Desktop only — at thirty-two it is below what a finger reliably hits.
      * `md` — The default, and everything that is not a hero — navigation bars, pricing rows, feature sections, footer bands. size.control.md tall against space.control.md on the sides, which is half of it, and font.label.sm — the 14px step, so the label matches product's default button rather than running a size above it.
      * `lg` — A hero, or a full-width conversion band that is the only control in view. size.control.lg tall against space.control.lg on the sides, again half the height, so the label starts where the pill's curve stops. font.label.md at 16px, product's own large-button measure. One per page, usually: a page of lg CTAs has no hero.
      */
     size?: 'sm' | 'md' | 'lg';
-    /**
-     * `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
-     * `inherit` — A section that painted its own ground and set its own ink: a dark hero, a brand band, a photo. The button stops naming a colour and takes the one around it, so the edge and the label are whatever the band decided was legible on itself
-     */
-    tone?: 'default' | 'inherit';
-    /** Always. The destination is the component — an anchor without an href is not a link, is not reachable by keyboard, and is announced as plain text, so there is no default that could stand in for one. It takes no default and is not optional for exactly that reason. */
-    href: string;
+    /** The press goes somewhere with a URL of its own — the ordinary case for a call to action on a marketing page. It makes this an anchor rather than a button, which is what gives a visitor cmd-click, a visible destination and a copyable link. `target` and `rel` are not props: the component is typed against AnchorHTMLAttributes, so they are already in reach and land on the anchor. */
+    href?: string;
     /** Where the destination continues a sequence rather than being simply somewhere else to go — the hero CTA that starts a signup, the button at the foot of a step. Named for the part it renders rather than for the mark inside it: which glyph that is belongs to the component, the way showClose and showTitle name their parts elsewhere. Today it is a forward arrow, and it slides on hover. */
     showIcon?: boolean;
     /** Allowed: text */
     children: ReactNode;
 }
-export type ButtonProps = ButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'size' | 'tone' | 'href' | 'showIcon'>;
+export type ButtonProps = ButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'size' | 'tone' | 'href' | 'showIcon'> & ({
+    variant?: 'primary' | 'secondary' | 'inverse';
+    tone?: Exclude<'default' | 'inverse' | 'brand', 'brand'>;
+} | {
+    variant: Exclude<'primary' | 'secondary' | 'inverse', 'primary'>;
+    tone?: 'default' | 'inverse' | 'brand';
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const buttonParts: {
     readonly root: "dds-button";

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

@@ -44,3 +44,28 @@
     translate: 0;
   }
 }
+
+/**
+ * The label travels with the fill.
+ *
+ * The generated list names what the button's own states move — the fills and the focus ring — and
+ * the label's colour is not one of them: no state changes it. The tone does. A navigation bar
+ * re-tones its buttons when it gathers on scroll, and the fill eased to the new ground while the
+ * label jumped to the new ink on the first frame, so a secondary on a dark hero spent the whole
+ * change as dark words on a still-dark fill. Naming `color` and `border-color` here carries both
+ * across the same step as the fill.
+ *
+ * Written out in full rather than appended to, because a property list cannot be added to — this
+ * replaces the generated one, and has to keep everything that one names.
+ */
+:where([data-dds-context="marketing"]) .dds-button {
+  transition-property: background-color, background-image, border-color, color, outline-color, outline-width;
+}
+
+/* And none of it for a reader who asked for less motion — restated, because the rule above comes
+   after the generated sheet's own reduced-motion guard and would otherwise be the one that wins. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-button {
+    transition-property: none;
+  }
+}

package/dist/components/core/button-icon/ButtonIcon.css

@@ -72,11 +72,10 @@
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"] {
   background-color: var(--color-bg-brand);
-  color: var(--color-fg-on-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"] {
-  border-color: var(--color-border-strong);
   color: var(--color-fg-default);
 }
 
@@ -92,10 +91,6 @@
   background-color: var(--color-bg-brand-hover);
 }
 
-:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover);
-}
-
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"]:active {
   background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
 }
@@ -108,28 +103,49 @@
   background-color: var(--color-bg-brand-active);
 }
 
-:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:active {
-  background-color: var(--color-bg-active);
-}
-
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-tone="inverse"]:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"] {
-  color: var(--color-fg-on-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="default"] {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="inverse"] {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"]:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="default"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="inverse"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-on-brand-strong), var(--color-bg-hover-on-brand-strong));
 }
 
 :where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"]:active {
-  background-color: var(--color-bg-active-inverse);
+  background-color: var(--color-bg-active-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="default"]:active {
+  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"][data-tone="inverse"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
 }
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-buttonicon,
-  :where([data-dds-context="marketing"]) .dds-buttonicon * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-buttonicon * { transition: none !important; }
 }
 

package/dist/components/core/button-icon/ButtonIcon.d.ts

@@ -5,8 +5,8 @@ export type { ButtonIconProps };
  * One press carried by a glyph alone.
  *
  * Which element it renders is decided by `href` and nothing else, which is CardButton's
- * shape rather than Button's. Button could not take it: its job is defined as moving a
- * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * shape rather than Button's. Button has since taken the same shape; when this was written its job was
+ * defined as moving a visitor along a funnel, so it was an anchor always. A glyph-alone control has no such
  * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
  * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
  * the status bar and a copyable link; a `<button>` answers Space and does what the page

package/dist/components/core/button-icon/ButtonIcon.js

@@ -6,8 +6,8 @@ import { buttonIconDefaults, buttonIconParts } from './ButtonIcon.types.js';
  * One press carried by a glyph alone.
  *
  * Which element it renders is decided by `href` and nothing else, which is CardButton's
- * shape rather than Button's. Button could not take it: its job is defined as moving a
- * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * shape rather than Button's. Button has since taken the same shape; when this was written its job was
+ * defined as moving a visitor along a funnel, so it was an anchor always. A glyph-alone control has no such
  * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
  * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
  * the status bar and a copyable link; a `<button>` answers Space and does what the page

package/dist/components/core/button-icon/ButtonIcon.types.d.ts

@@ -2,9 +2,9 @@ import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface ButtonIconOwnProps {
     /**
      * `primary` — The one glyph-alone press a section is built around — a play control over a hero, the single action a band exists for. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two.
-     * `secondary` — The ordinary case for these, because they usually arrive several at a time — a footer's social row, a carousel's two directions, a bar's dismiss. An outline rather than a quiet fill, for Button's reason: this package has color.bg.hover for the wash but no hover partner for color.bg.subtle, so a filled secondary would get lighter on hover instead of darker. It keeps the circle, the mark and the target and gives up only the fill.
-     * `inverse` — A section that paints its own ground — a brand-coloured band, a photo, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink over a photograph, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
-     * `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a ring around it would be the loudest thing there. It keeps the target and the states and gives up only the edge, so what a reader presses is unchanged and what they see is the glyph.
+     * `secondary` — The ordinary case for these, because they usually arrive several at a time — a footer's social row, a carousel's two directions, a bar's dismiss. Button's secondary, drawn as a circle: the lightest tint the ramp offers, color.bg.subtle, with hover and press layered over the fill as a background-image rather than replacing it, so a glyph-alone control and a labelled one beside it read as one family. On the dark band, tone="inverse" keeps the fill and turns it white.
+     * `inverse` — A section that paints its own ground — a brand-coloured band, a photo, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral tint is lost over a photograph, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
+     * `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a tint behind it would be the loudest thing there. It keeps the target and the states and gives up only the fill, so what a reader presses is unchanged and what they see is the glyph.
      */
     variant?: 'primary' | 'secondary' | 'inverse' | 'plain';
     /**
@@ -15,7 +15,7 @@ export interface ButtonIconOwnProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * `default` — The control is on a light ground, which is every surface this package paints by default
-     * `inverse` — The control is on a ground that runs against the mode — a mark in a navigation bar standing on a dark hero. The ink and the tints move together; nothing else does
+     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. The ink and the tints move to the band's fixed roles; nothing else does
      */
     tone?: 'default' | 'inverse';
     /** Always — the glyph is the whole control, so it is required rather than a slot that may be empty. Pass the glyph itself, from the icon package, rather than one already sized: the size a mark takes in this circle is this component's decision, at icon.control.md on md and icon.control.lg on lg, and the width and height the glyph shipped with are overridden by the class this component clones onto it. */

package/dist/components/core/card/Card.css

@@ -9,13 +9,13 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="accent-strong"] {
-  background-color: var(--color-bg-brand-strong);
+  background-color: var(--color-bg-surface-card-strong);
   color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="accent"] {
   background-color: var(--color-bg-brand);
-  color: var(--color-fg-on-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="plain"] {
@@ -23,8 +23,13 @@
   color: var(--color-fg-default);
 }
 
+:where([data-dds-context="marketing"]) .dds-card[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-card[data-variant="surface-raised"] {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-card-raised);
   color: var(--color-fg-default);
 }
 
@@ -45,12 +50,16 @@
   color: var(--color-fg-on-brand-strong);
 }
 
+:where([data-dds-context="marketing"]) .dds-card[data-variant="surface-light"][data-compact="true"] {
+  border-radius: var(--radius-surface-compact);
+}
+
 :where([data-dds-context="marketing"]) .dds-card[data-variant="surface-raised"][data-compact="true"] {
   border-radius: var(--radius-surface-compact);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="surface-raised"][data-tone="inverse"] {
-  background-color: var(--color-bg-surface-raised-inverse);
+  background-color: var(--color-bg-surface-raised-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/core/card/Card.types.d.ts

@@ -2,12 +2,13 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface CardOwnProps {
     /**
      * `surface` — The default, and right for a card on the page. The marketing page is white and this is a step off it, so the card is told apart by being recessed — no shadow and no border, because the fill is already the edge
+     * `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 and break the set. 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. There the recessed fill is only 1.09:1 against its ground and all but disappears; this one is 1.23:1 the other way, lifting off the band instead of sinking into it
      * `plain` — An editorial card — an article, a post, a story — where the picture and the headline are what separate one card from the next. It paints no background, so it shows whatever is under it: the page, a subtle band, or a section that has taken a colour. The corner and the clip are still the card's, so a picture at the top of it meets a rounded edge rather than squaring one off It takes no corner either: radius.surface is the shape of a fill, and with no fill there is nothing to round — a rounded picture sitting on the page reads as a floating tile rather than as the art leading an article.
      * `accent` — One card in a set is the promotional one and the page has already earned the colour. The coral is the loudest ground here, so a row of them is a row of nothing louder than the rest
      * `accent-strong` — A card carrying more weight than its neighbours, where the coral would be too loud and the page ground too quiet. The darkest of the four, and the one that takes white at 20.55:1 — the most legible ground a marketing card has
      */
-    variant?: 'surface' | 'surface-raised' | 'plain' | 'accent' | 'accent-strong';
+    variant?: 'surface' | 'surface-light' | 'surface-raised' | 'plain' | 'accent' | 'accent-strong';
     /**
      * `default` — The page is light, which is nearly every page. The fills are opaque and the ink is dark
      * `inverse` — The card sits on a band that paints its own dark ground. The neutral fills become a veil of white over that ground rather than a sheet of paper on top of it, which is what keeps a card on a dark band from reading as a hole cut in it. The two neutral variants stay two steps apart: `surface` is the quiet one a panel wants, `surface-raised` the stronger lift that suits something the size of a control.

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

@@ -37,11 +37,11 @@
   transition-property: color;
   margin: 0;
   text-transform: uppercase;
-  font-family: var(--font-eyebrow-family);
-  font-size: var(--font-eyebrow-size);
-  font-weight: var(--font-eyebrow-weight);
-  letter-spacing: var(--font-eyebrow-letter-spacing);
-  line-height: var(--font-eyebrow-line-height);
+  font-family: var(--font-eyebrow-sm-family);
+  font-size: var(--font-eyebrow-sm-size);
+  font-weight: var(--font-eyebrow-sm-weight);
+  letter-spacing: var(--font-eyebrow-sm-letter-spacing);
+  line-height: var(--font-eyebrow-sm-line-height);
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__title {
@@ -64,6 +64,11 @@
   line-height: var(--font-body-md-line-height);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__media-frame {
   display: block;
   flex: auto;
@@ -134,6 +139,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-cardbody,
-  :where([data-dds-context="marketing"]) .dds-cardbody * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-cardbody * { transition: none !important; }
 }
 

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

@@ -59,4 +59,4 @@ export type { CardBodyProps };
  * inherits, so the same title is `fg.on-solid` on the brand fill and
  * `fg.default` on the page without this component knowing which card it is in.
  */
-export declare function CardBody({ eyebrow, title, description, mark, src, alt, aspect, mediaPosition, overMedia, flush, compact, tone, zoomOnHover, children: _children, ...rest }: CardBodyProps): import("react").JSX.Element;
+export declare function CardBody({ eyebrow, title, description, link, mark, src, alt, aspect, mediaPosition, overMedia, flush, compact, tone, zoomOnHover, children: _children, ...rest }: CardBodyProps): import("react").JSX.Element;

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

@@ -61,7 +61,7 @@ import { cardBodyDefaults, cardBodyParts } from './CardBody.types.js';
  * inherits, so the same title is `fg.on-solid` on the brand fill and
  * `fg.default` on the page without this component knowing which card it is in.
  */
-export function CardBody({ eyebrow, title, description, mark, src, alt, aspect, mediaPosition = cardBodyDefaults.mediaPosition, overMedia = cardBodyDefaults.overMedia, flush = cardBodyDefaults.flush, compact = cardBodyDefaults.compact, tone = cardBodyDefaults.tone, zoomOnHover = cardBodyDefaults.zoomOnHover, children: _children, ...rest }) {
+export function CardBody({ eyebrow, title, description, link, mark, src, alt, aspect, mediaPosition = cardBodyDefaults.mediaPosition, overMedia = cardBodyDefaults.overMedia, flush = cardBodyDefaults.flush, compact = cardBodyDefaults.compact, tone = cardBodyDefaults.tone, zoomOnHover = cardBodyDefaults.zoomOnHover, children: _children, ...rest }) {
     // Pulled out of `rest` and deliberately unused. `HTMLAttributes` carries a
     // `children` the contract does not declare, and the generator only omits props
     // it knows about — so the type accepts children this component has no slot for,
@@ -85,7 +85,7 @@ export function CardBody({ eyebrow, title, description, mark, src, alt, aspect,
         // frame arrived: the ratio is a fact about the box, and the picture inside it
         // fills that box at 100% and covers.
         style: aspect === undefined ? undefined : { flex: 'none', aspectRatio: aspect }, children: _jsx("img", { className: cardBodyParts.media, src: src, alt: alt }) })) : null;
-    const content = (_jsxs("div", { className: cardBodyParts.content, children: [mark !== undefined ? (_jsx("div", { className: cardBodyParts.mark, children: _jsx(Icon, { size: "lg", children: mark }) })) : null, given(eyebrow) ? _jsx("p", { className: cardBodyParts.eyebrow, children: eyebrow }) : null, given(title) ? _jsx("h3", { className: cardBodyParts.title, children: title }) : null, given(description) ? (_jsx("p", { className: cardBodyParts.description, children: description })) : null] }));
+    const content = (_jsxs("div", { className: cardBodyParts.content, children: [mark !== undefined ? (_jsx("div", { className: cardBodyParts.mark, children: _jsx(Icon, { size: "lg", children: mark }) })) : null, given(eyebrow) ? _jsx("p", { className: cardBodyParts.eyebrow, children: eyebrow }) : null, given(title) ? _jsx("h3", { className: cardBodyParts.title, children: title }) : null, given(description) ? (_jsx("p", { className: cardBodyParts.description, children: description })) : null, link ? _jsx("div", { className: cardBodyParts.link, children: link }) : null] }));
     if (overMedia) {
         return (
         // Both values, never just the set one. The stylesheet selects on

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

@@ -23,6 +23,8 @@ export interface CardBodyOwnProps {
     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 */
@@ -37,7 +39,7 @@ export interface CardBodyOwnProps {
      */
     mediaPosition?: 'below' | 'above';
 }
-export type CardBodyProps = CardBodyOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'overMedia' | 'flush' | 'zoomOnHover' | 'compact' | 'tone' | 'eyebrow' | 'title' | 'description' | 'mark' | 'src' | 'alt' | 'aspect' | 'mediaPosition'>;
+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";
@@ -47,6 +49,7 @@ export declare const cardBodyParts: {
     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";
 };

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

@@ -8,6 +8,7 @@ export const cardBodyParts = {
     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',
 };

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

@@ -27,13 +27,13 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent-strong"] {
-  background-color: var(--color-bg-brand-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-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="plain"] {
@@ -41,8 +41,13 @@
   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-raised);
+  background-color: var(--color-bg-surface-card-raised);
   color: var(--color-fg-default);
 }
 
@@ -59,6 +64,10 @@
   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);
 }
@@ -68,6 +77,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-cardbutton { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-cardbutton { transition: none !important; }
 }
 

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

@@ -2,12 +2,13 @@ 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-raised' | 'accent' | 'accent-strong' | 'plain';
+    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 */

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

@@ -48,7 +48,6 @@
   justify-content: center;
   pointer-events: none;
   block-size: var(--icon-size-2xs);
-  color: var(--color-fg-on-solid);
   inline-size: var(--icon-size-2xs);
 }
 
@@ -111,6 +110,14 @@
   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);
 }

package/dist/components/core/dropdown-menu/DropdownMenu.css

@@ -30,6 +30,15 @@
   transition-timing-function: var(--motion-easing-standard);
 }
 
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
+  transition-property: rotate;
+  block-size: var(--icon-control-lg);
+  color: var(--color-fg-muted);
+  inline-size: var(--icon-control-lg);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
 :where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__surface {
   border-style: solid;
   box-sizing: border-box;
@@ -66,14 +75,6 @@
   inset-inline-start: 0;
 }
 
-:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
-  block-size: var(--icon-control-lg);
-  color: var(--color-fg-muted);
-  inline-size: var(--icon-control-lg);
-  transition-duration: var(--motion-duration-fast);
-  transition-timing-function: var(--motion-easing-standard);
-}
-
 :where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__icon {
   block-size: var(--icon-control-lg);
   inline-size: var(--icon-control-lg);
@@ -124,15 +125,15 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:active {
-  background-color: var(--color-bg-active-inverse);
+  background-color: var(--color-bg-active-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"][data-size="sm"] .dds-dropdownmenu__trigger {
@@ -141,6 +142,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-dropdownmenu,
-  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none !important; }
 }
 

package/dist/components/core/dropdown-menu/DropdownMenu.d.ts

@@ -11,10 +11,12 @@ export type { DropdownMenuProps };
  * them back on the button they pressed.
  *
  * The trigger is drawn here rather than passed in, which is where this parts company with product's
- * menu of the same name. That is forced rather than chosen: this package's Button is an anchor with
- * a required `href`, so it is a link and a link that opens a menu does not navigate; ButtonIcon is a
+ * menu of the same name. That was forced rather than chosen: when this was built, this package's
+ * Button was an anchor with a required `href`, so it was a link and a link that opens a menu does not
+ * navigate; ButtonIcon is a
  * real button and takes no words. A set of destinations is chosen by reading it, so the trigger
- * needs words, and nothing here draws a button with words.
+ * needs words, and nothing here drew a button with words. Button now renders a `<button>` when it
+ * has no href, so whether it should become the trigger is an open question rather than a settled one.
  *
  * Focus moves to the rows themselves rather than being described from the trigger. A menu's rows are
  * things to take, and a visitor pressing Enter should be pressing the thing they are on.

package/dist/components/core/dropdown-menu/DropdownMenu.js

@@ -16,10 +16,12 @@ import { dropdownMenuDefaults, dropdownMenuParts } from './DropdownMenu.types.js
  * them back on the button they pressed.
  *
  * The trigger is drawn here rather than passed in, which is where this parts company with product's
- * menu of the same name. That is forced rather than chosen: this package's Button is an anchor with
- * a required `href`, so it is a link and a link that opens a menu does not navigate; ButtonIcon is a
+ * menu of the same name. That was forced rather than chosen: when this was built, this package's
+ * Button was an anchor with a required `href`, so it was a link and a link that opens a menu does not
+ * navigate; ButtonIcon is a
  * real button and takes no words. A set of destinations is chosen by reading it, so the trigger
- * needs words, and nothing here draws a button with words.
+ * needs words, and nothing here drew a button with words. Button now renders a `<button>` when it
+ * has no href, so whether it should become the trigger is an open question rather than a settled one.
  *
  * Focus moves to the rows themselves rather than being described from the trigger. A menu's rows are
  * things to take, and a visitor pressing Enter should be pressing the thing they are on.

package/dist/components/core/filter-chip/FilterChip.css

@@ -37,6 +37,7 @@
   align-items: center;
   display: flex;
   flex: none;
+  transition-property: rotate;
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-easing-standard);
 }
@@ -144,6 +145,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-filterchip,
-  :where([data-dds-context="marketing"]) .dds-filterchip * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-filterchip * { transition: none !important; }
 }
 

package/dist/components/core/footer/footer-impl.css

@@ -214,5 +214,5 @@
  * been put on, and Footer cannot bind a property of a component it does not declare.
  */
 :where([data-dds-context="marketing"]) .dds-footer .dds-link:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }

package/dist/components/core/footer-group/FooterGroup.css

@@ -38,6 +38,12 @@
   padding-block: var(--space-gap-sm);
 }
 
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__marker {
+  transition-property: rotate;
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
 :where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__list {
   display: flex;
   flex-direction: column;
@@ -63,13 +69,8 @@
   line-height: var(--font-label-md-line-height);
 }
 
-:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__marker {
-  block-size: var(--icon-size-xs);
-  inline-size: var(--icon-size-xs);
-}
-
 :where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
   outline-width: var(--border-width-focus);
 }
 
@@ -85,6 +86,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-footergroup,
-  :where([data-dds-context="marketing"]) .dds-footergroup * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-footergroup * { transition: none !important; }
 }
 

package/dist/components/core/icon/Icon.css

@@ -35,6 +35,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-icon { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-icon { transition: none !important; }
 }