Text

Install and import

Text is in @dovetail-ds/react. Install it with React, if you haven't:

Guidelines

Running text in one of the system's type roles: an eyebrow, a lead paragraph, body copy, small print, fine print, a label. It replaces the hand-written .eyebrow, .lead and .fine classes every brand otherwise writes for itself.

Use it when

• Any paragraph or line of text outside Prose that belongs to a type role.
• A price, a count or a value that should line up: variant="label" numeric.

Don't use it when

• It is long-form content from a CMS. Use Prose, which styles plain elements.
• It is a heading. Use Heading.

Variants

Example

<Stack gap="xs">
  <Text variant="label" weight="semibold" numeric>$48.00</Text>
  <Text variant="fine">Tax calculated at checkout.</Text>
</Stack>

Paragraph variants are bounded at --dt-measure-default so a line never runs wider than it can be read; pass measure="none" inside a narrow column where the bound does nothing.

Tone

brand and brand-secondary read --dt-text-brand and --dt-text-brand-secondary: an eyebrow, a highlighted word or a price in the brand colour, at text contrast in either mode.

<Text variant="eyebrow" tone="brand">New season</Text>

Every tone is a semantic role, so a Text inside a brand or photo Section follows the section: the section re-points --dt-text-primary, -secondary and -tertiary for its own surface.

Tokens

--dt-text-{role}-*, --dt-text-primary, -secondary, -tertiary, -link, --dt-measure-*, --dt-font-weight-*. The eyebrow and label roles read --dt-font-family-secondary, so a secondary face set in Configure reaches them.

Props

The typed contract, from Text.d.ts.

import * as React from "react";

/**
 * Running text in one of the system's type roles. The variant picks the role,
 * the tag and a default tone; every one of those can be overridden.
 */
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  /**
   * eyebrow: small caps label above a heading, secondary. lead: the opening
   * paragraph, body-lg, secondary. body: body-md. small: body-sm. fine: body-xs,
   * tertiary, for terms and footnotes. label: label-md, for a price or a value.
   * @default "body"
   */
  variant?: "eyebrow" | "lead" | "body" | "small" | "fine" | "label";
  /** Overrides the variant's default tone. inherit follows the surface it sits on; brand and brand-secondary read the brand text roles, for an eyebrow, a highlighted word or a price in the brand colour. */
  tone?: "inherit" | "primary" | "secondary" | "tertiary" | "link" | "brand" | "brand-secondary";
  /** Bounds the line length. Defaults to "default" for paragraph variants and "none" for eyebrow and label. */
  measure?: "narrow" | "default" | "wide" | "none";
  /** Overrides the role's weight, most often for a price. */
  weight?: "regular" | "medium" | "semibold";
  align?: React.CSSProperties["textAlign"];
  /** Tabular numerals, so a column of prices lines up. @default false */
  numeric?: boolean;
  /** Overrides the tag: p for paragraph variants, span for eyebrow and label. */
  as?: keyof React.JSX.IntrinsicElements;
  children?: React.ReactNode;
}

export declare function Text(props: TextProps): React.JSX.Element;

Tokens it reads

Every custom property Text.jsx resolves, read from the source: 150 semantic, 7 primitive. Component tier first, because that is the one to reach for.

Open the graph

• semantic Shared roles. Override one and everything using that role moves with it.
• primitive Raw values. A component reading one directly is a deliberate exception.

Source

React only, no dependencies, every value a token.

import React from "react";

const VARIANTS = {
  eyebrow: { role: "eyebrow", tag: "span", tone: "secondary", measure: "none", upper: true },
  lead: { role: "body-lg", tag: "p", tone: "secondary", measure: "default" },
  body: { role: "body-md", tag: "p", tone: "inherit", measure: "default" },
  small: { role: "body-sm", tag: "p", tone: "inherit", measure: "default" },
  fine: { role: "body-xs", tag: "p", tone: "tertiary", measure: "default" },
  label: { role: "label-md", tag: "span", tone: "inherit", measure: "none" },
};
const TONES = {
  inherit: "inherit",
  primary: "var(--dt-text-primary)",
  secondary: "var(--dt-text-secondary)",
  tertiary: "var(--dt-text-tertiary)",
  link: "var(--dt-text-link)",
  brand: "var(--dt-text-brand, var(--dt-text-link))",
  "brand-secondary": "var(--dt-text-brand-secondary, var(--dt-color-secondary-700, var(--dt-text-link)))",
};
const MEASURES = { narrow: "var(--dt-measure-narrow)", default: "var(--dt-measure-default)", wide: "var(--dt-measure-wide)", none: "none" };
const WEIGHTS = { regular: "var(--dt-font-weight-regular)", medium: "var(--dt-font-weight-medium)", semibold: "var(--dt-font-weight-semibold)" };

export function Text({ variant = "body", tone, measure, weight, align, numeric = false, as, children, style, ...rest }) {
  const v = VARIANTS[variant] || VARIANTS.body;
  const Tag = as || v.tag;
  const role = v.role;
  return (
    <Tag
      style={{
        margin: 0,
        fontFamily: `var(--dt-text-${role}-family)`,
        fontSize: `var(--dt-text-${role}-size)`,
        lineHeight: `var(--dt-text-${role}-line)`,
        fontWeight: WEIGHTS[weight] || `var(--dt-text-${role}-weight)`,
        letterSpacing: `var(--dt-text-${role}-tracking)`,
        textTransform: v.upper ? "uppercase" : undefined,
        color: TONES[tone || v.tone] || TONES.inherit,
        maxWidth: MEASURES[measure || v.measure] || MEASURES.none,
        textAlign: align,
        textWrap: v.tag === "p" ? "pretty" : undefined,
        fontVariantNumeric: numeric ? "tabular-nums" : undefined,
        ...style,
      }}
      {...rest}
    >
      {children}
    </Tag>
  );
}