@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/breadcrumb-item/BreadcrumbItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { given } from '../../given.js';
+import './BreadcrumbItem.css';
+import { breadcrumbItemDefaults, breadcrumbItemParts, } from './BreadcrumbItem.types.js';
+/**
+ * One level of a trail: a link back to it, or the current page as plain text.
+ *
+ * `current` wins over `href`. The two together ask for a link from the page to
+ * itself — a tab stop that goes nowhere — so the component declines.
+ *
+ * `aria-current="page"` is what identifies the current level to a screen reader.
+ */
+export function BreadcrumbItem({ label, href, current = breadcrumbItemDefaults.current, ...rest }) {
+    return (_jsx("li", { className: breadcrumbItemParts.root, ...rest, children: current ? (_jsx("span", { className: breadcrumbItemParts.current, "aria-current": "page", children: label })) : given(href) ? (_jsx("a", { className: breadcrumbItemParts.link, href: href, children: label })) : (label) }));
+}

package/dist/components/core/breadcrumb-item/BreadcrumbItem.types.d.ts

@@ -0,0 +1,22 @@
+import type { LiHTMLAttributes } from 'react';
+export interface BreadcrumbItemOwnProps {
+    /** Always — it is the level's name, and the item renders nothing without it. The word the parent level would use for this place: "Forex", not "Forex markets and instruments" */
+    label: string;
+}
+export type BreadcrumbItemProps = BreadcrumbItemOwnProps & Omit<LiHTMLAttributes<HTMLLIElement>, 'className' | 'label' | 'href' | 'current'> & ({
+    current?: boolean;
+    href?: undefined;
+} | {
+    current?: false;
+    href?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const breadcrumbItemParts: {
+    readonly root: "dds-breadcrumbitem";
+    readonly link: "dds-breadcrumbitem__link";
+    readonly current: "dds-breadcrumbitem__current";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const breadcrumbItemDefaults: {
+    readonly current: false;
+};

package/dist/components/core/breadcrumb-item/BreadcrumbItem.types.js

@@ -0,0 +1,9 @@
+// GENERATED from breadcrumb-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const breadcrumbItemParts = {
+    root: 'dds-breadcrumbitem',
+    link: 'dds-breadcrumbitem__link',
+    current: 'dds-breadcrumbitem__current',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const breadcrumbItemDefaults = { current: false };

package/dist/components/core/button/Button.css

@@ -0,0 +1,188 @@
+/* GENERATED from button.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-button {
+  transition-property: background-color, background-image, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  font-family: inherit;
+  justify-content: center;
+  outline-style: solid;
+  padding-block: 0;
+  position: relative;
+  text-decoration-line: none;
+  white-space: nowrap;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  gap: var(--space-gap-sm);
+  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-button .dds-button__label {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-button .dds-button__icon {
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-button:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] {
+  block-size: var(--size-control-lg);
+  padding-inline: var(--space-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] .dds-button__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] .dds-button__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] {
+  block-size: var(--size-control-md);
+  padding-inline: var(--space-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] .dds-button__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] .dds-button__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  padding-inline: var(--space-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] .dds-button__icon {
+  block-size: var(--icon-control-sm);
+  inline-size: var(--icon-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] .dds-button__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"] {
+  background-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"] {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"] {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-brand-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:active {
+  background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:active {
+  background-color: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-tone="brand"]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-tone="inverse"]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"][data-tone="brand"] {
+  background-color: var(--color-bg-strong-on-brand);
+  color: var(--color-fg-on-strong-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"] {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"] {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[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-button[data-variant="inverse"][data-tone="brand"]: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-button[data-variant="secondary"][data-tone="brand"]: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-button[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-button[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-button[data-variant="inverse"][data-tone="brand"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"]:active {
+  background-image: linear-gradient(var(--color-bg-active-on-brand-strong), var(--color-bg-active-on-brand-strong));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[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-button[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-button,
+  :where([data-dds-context="marketing"]) .dds-button * { transition: none !important; }
+}
+

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

@@ -0,0 +1,27 @@
+import './Button.css';
+import './button-impl.css';
+import { type ButtonProps } from './Button.types.js';
+export type { ButtonProps };
+/**
+ * Three parts, declared in the contract and styled by the generated stylesheet.
+ * The classes come from `buttonParts` rather than being typed here — the CSS is
+ * generated from the same anatomy, and a class retyped slightly differently
+ * renders a part bare with its rule sitting unused.
+ *
+ * Which element it renders is decided by `href` and nothing else, the shape CardButton
+ * and ButtonIcon already take. A CTA that goes to a page and one that sends a newsletter
+ * form are the same press with different destinations, and the element is what tells a
+ * browser which: an `<a>` gives cmd-click, a destination in the status bar and a copyable
+ * link, and a `<button>` answers Space and does what the page says.
+ *
+ * It is typed against `AnchorHTMLAttributes`, the branch a marketing CTA takes in the
+ * ordinary case, and that is what puts `target` and `rel` in reach. ButtonIcon records the
+ * same trade: the generator takes one interface, so the `<button>`'s own `form`, `name` and
+ * `value` are what it gives up, and `type` survives as a string so a submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has an honest
+ * anchor form: the browser owns a link's pending state and shows it in the chrome, and
+ * `aria-disabled` on a link still follows the link when pressed. A prop that meant one
+ * thing on one branch and nothing on the other would be worse than its absence.
+ */
+export declare function Button({ variant, size, tone, href, showIcon, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/core/button/Button.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightRegularIcon } from '@deriv-com/quill-icons-web';
+import './Button.css';
+import './button-impl.css';
+import { buttonDefaults, buttonParts } from './Button.types.js';
+/**
+ * Three parts, declared in the contract and styled by the generated stylesheet.
+ * The classes come from `buttonParts` rather than being typed here — the CSS is
+ * generated from the same anatomy, and a class retyped slightly differently
+ * renders a part bare with its rule sitting unused.
+ *
+ * Which element it renders is decided by `href` and nothing else, the shape CardButton
+ * and ButtonIcon already take. A CTA that goes to a page and one that sends a newsletter
+ * form are the same press with different destinations, and the element is what tells a
+ * browser which: an `<a>` gives cmd-click, a destination in the status bar and a copyable
+ * link, and a `<button>` answers Space and does what the page says.
+ *
+ * It is typed against `AnchorHTMLAttributes`, the branch a marketing CTA takes in the
+ * ordinary case, and that is what puts `target` and `rel` in reach. ButtonIcon records the
+ * same trade: the generator takes one interface, so the `<button>`'s own `form`, `name` and
+ * `value` are what it gives up, and `type` survives as a string so a submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has an honest
+ * anchor form: the browser owns a link's pending state and shows it in the chrome, and
+ * `aria-disabled` on a link still follows the link when pressed. A prop that meant one
+ * thing on one branch and nothing on the other would be worse than its absence.
+ */
+export function Button({ variant = buttonDefaults.variant, size = buttonDefaults.size, tone = buttonDefaults.tone, href, showIcon = buttonDefaults.showIcon, children, ...rest }) {
+    /*
+      What both branches carry. Spread after `rest` so none of it can be written over from
+      the call site: the class is how the generated stylesheet finds the root.
+    */
+    const shared = {
+        className: buttonParts.root,
+        'data-variant': variant,
+        'data-tone': tone,
+        'data-size': size,
+    };
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: buttonParts.label, children: children }), showIcon ? (_jsx(ArrowRightRegularIcon, { className: buttonParts.icon, "aria-hidden": "true" })) : null] }));
+    if (href !== undefined) {
+        // No cast: `rest` is already the anchor's own attribute set, so `target` and `rel`
+        // arrive typed and land on the element that understands them.
+        return (_jsx("a", { ...rest, ...shared, href: href, children: content }));
+    }
+    return (
+    /*
+      A button, not a submit. The element's own default is `submit`, so a CTA dropped into
+      a newsletter form beside its real submit would send it. Above the spread rather than
+      below it, so a consumer who does want this to submit the form still wins — ButtonIcon
+      takes the same order for the same reason.
+
+      The cast is on this branch because the props are the anchor's: an `<a>`'s `type` is
+      the destination's MIME type and so is a plain string, which a `<button>`'s own `type`
+      will not accept. Runtime is unaffected.
+    */
+    _jsx("button", { type: "button", ...rest, ...shared, children: content }));
+}

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

@@ -0,0 +1,35 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface ButtonOwnProps {
+    /**
+     * `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';
+    /** 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'> & ({
+    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";
+    readonly label: "dds-button__label";
+    readonly icon: "dds-button__icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const buttonDefaults: {
+    readonly variant: "primary";
+    readonly size: "lg";
+    readonly tone: "default";
+    readonly showIcon: false;
+};

package/dist/components/core/button/Button.types.js

@@ -0,0 +1,9 @@
+// GENERATED from button.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const buttonParts = {
+    root: 'dds-button',
+    label: 'dds-button__label',
+    icon: 'dds-button__icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const buttonDefaults = { variant: 'primary', size: 'lg', tone: 'default', showIcon: false };

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

@@ -0,0 +1,71 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/**
+ * One rule the contract has no way to write.
+ *
+ * The arrow slides forward while the *button* is hovered, and `tokens` are keyed on the part
+ * the state is declared on: the contract can say "the arrow is hovered" and cannot say "the
+ * button is". Bound in the contract it generated `.dds-button__icon:hover`, which moves the
+ * mark only while the pointer sits on the sixteen pixels of the arrow itself — a hover the
+ * reader would find by accident and never on purpose. NotificationItem's archive control took
+ * this same division for the same reason, and records it in its own impl file.
+ *
+ * The transition lives here too, and has to. The generated sheet puts duration and easing on
+ * the root, and transition properties do not inherit — so the icon carried a transition
+ * property with no duration and jumped the four pixels instead of travelling them.
+ *
+ * Every value is a token. The distance is the smallest gap step, which is the same measure
+ * that separates the arrow from the words: the mark moves by exactly the space it sits in.
+ */
+:where([data-dds-context="marketing"]) .dds-button .dds-button__icon {
+  transition-property: translate;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon {
+  translate: var(--space-gap-xs);
+}
+
+/**
+ * A reader who asked for less motion gets none, rather than the same distance travelled
+ * instantly. The generated sheet already drops the transition under this query, which on its
+ * own would leave the four-pixel jump — the movement, minus the part that made it legible.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon {
+    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

@@ -0,0 +1,151 @@
+/* GENERATED from buttonicon.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-buttonicon {
+  transition-property: background-color, background-image, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  font-family: inherit;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  text-decoration-line: none;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  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-buttonicon .dds-buttonicon__icon {
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="lg"] {
+  block-size: var(--size-control-lg);
+  inline-size: var(--size-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="lg"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="md"] {
+  block-size: var(--size-control-md);
+  inline-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="md"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  inline-size: var(--size-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="sm"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-sm);
+  inline-size: var(--icon-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"] {
+  background-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"] {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"] {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"] {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-brand-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));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"]:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"]:active {
+  background-color: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-tone="inverse"]:focus-visible {
+  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-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-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-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 !important; }
+}
+

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

@@ -0,0 +1,34 @@
+import './ButtonIcon.css';
+import { type ButtonIconProps } from './ButtonIcon.types.js';
+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 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
+ * says. Two components for that would be two names for one gesture.
+ *
+ * The classes come from `buttonIconParts` rather than being typed here — the stylesheet is
+ * generated from the same anatomy, and a class retyped slightly differently renders a part
+ * bare with its rule sitting unused.
+ *
+ * It is typed against `AnchorHTMLAttributes`, which is the branch it takes in the ordinary
+ * case, and it is what puts `target` and `rel` in reach — a marketing destination leaves the
+ * site often enough that the pairing is the consumer's decision rather than an axis of this
+ * component, which is the ruling Button already recorded. The generator takes one interface,
+ * so this is a choice rather than a union: what it gives up is the form-participation
+ * attributes a `<button>` carries — `form`, `name`, `value` — which an icon-only control in a
+ * form wants far less often than an external link wants `rel="noopener"`. `type` survives as
+ * a string, so an intentional submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, which is where this stops following product's
+ * ButtonIcon. Neither has an honest anchor form: the browser owns a link's pending state
+ * and shows it in the chrome, and `aria-disabled` on a link still follows the link when it
+ * is pressed. A prop that meant one thing on one branch and nothing on the other would be
+ * worse than its absence.
+ */
+export declare function ButtonIcon({ icon, label, variant, size, tone, href, ...rest }: ButtonIconProps): import("react").JSX.Element;