> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rhetoric.law/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

export const Swatch = ({color}) => <span>
    <span style={{
  display: "inline-block",
  width: 12,
  height: 12,
  borderRadius: 3,
  marginRight: 6,
  verticalAlign: "middle",
  background: color,
  border: "1px solid rgba(128,128,128,0.4)"
}} />
    <code>{color}</code>
  </span>;

The Element is configured through the props you pass to the component.

```tsx theme={null}
import { Element } from "@rhetoriclabs/element-react";

<Element
  sessionToken={sessionToken}
  appearance={{
    theme: "night",
    variables: { colorPrimary: "#7fb3c4" },
    buttons: "outline",
  }}
/>;
```

## Props

<ResponseField name="sessionToken" type="string" required>
  The `session_token` returned when you create a filing session. Sent as
  `Authorization: Bearer <sessionToken>` on every call the Element makes.

  Only pass the session token to the browser. Your API key must stay on your
  backend. The token is shown only once, so capture it when the session is
  created. It cannot be recovered later.
</ResponseField>

<ResponseField name="appearance" type="Appearance">
  Controls how the Element looks. See [Appearance](#appearance).
</ResponseField>

## Appearance

<ResponseField name="theme" type="&#x22;day&#x22; | &#x22;night&#x22;" default="day">
  The base theme. A theme is a complete set of default variables that you can
  use as the starting point for customization. Unknown values fall back to `day`
  with a console warning.
</ResponseField>

<ResponseField name="variables" type="Variables">
  Design variable overrides. Values that are not set fall back to the selected
  theme. See [Variables](#variables).
</ResponseField>

<ResponseField name="buttons" type="&#x22;solid&#x22; | &#x22;outline&#x22;" default="solid">
  How buttons are drawn. `solid` fills primary buttons with `colorPrimary`.
  `outline` draws them with a `colorPrimary` border and label, and fills them on
  hover. Unknown values fall back to `solid` with a console warning.
</ResponseField>

### Variables

Variables are design tokens that you can override to match your own look. Every
other shade the Element uses, such as borders and hover tints, is derived from
these, so a handful of values restyles the whole Element.

Values are CSS values. Colors accept any CSS color, `fontFamily` accepts a list
of fonts, and `borderRadius` accepts a length. Pass resolved values, not
`var(...)` references. Empty values are ignored.

<ResponseField name="colorPrimary" type="string">
  The color used for primary buttons. Also used as the accent unless
  `colorAccent` is set.
</ResponseField>

<ResponseField name="colorAccent" type="string">
  The color used for selection and emphasis, such as selected cards and options,
  the current breadcrumb, hover and drag highlights, and spinners. Falls back to
  `colorPrimary`.
</ResponseField>

<ResponseField name="colorPrimaryText" type="string">
  The color of text and icons drawn on top of `colorPrimary`.
</ResponseField>

<ResponseField name="colorBackground" type="string">
  The color of the surface behind inputs, cards, and popovers.
</ResponseField>

<ResponseField name="colorText" type="string">
  The color of main text.
</ResponseField>

<ResponseField name="colorTextSecondary" type="string">
  The color of muted text such as descriptions, placeholders, and breadcrumbs.
</ResponseField>

<ResponseField name="colorDanger" type="string">
  The color of errors.
</ResponseField>

<ResponseField name="colorWarning" type="string">
  The color of warnings, focus rings, and in-progress states.
</ResponseField>

<ResponseField name="colorSuccess" type="string">
  The color of confirmations and completed states.
</ResponseField>

<ResponseField name="colorBorder" type="string">
  The color of borders of inputs, cards, and popovers. Derived from the text and
  background colors when not set.
</ResponseField>

<ResponseField name="colorFocus" type="string">
  The color of focus rings. Falls back to `colorWarning`.
</ResponseField>

<ResponseField name="fontFamily" type="string" default="Inter">
  A CSS `font-family` value. Use `inherit` to use the font from the host page.

  The Element loads its default font (Inter) only when this is not set. When it
  is set, your page is responsible for making the font available.
</ResponseField>

<ResponseField name="fontFamilyHeading" type="string">
  A CSS `font-family` value for headings, such as step titles. Falls back to
  `fontFamily`.
</ResponseField>

<ResponseField name="borderRadius" type="string" default="6px">
  The base corner radius. Larger surfaces scale from it.
</ResponseField>

### Theme defaults

| Variable | `day` | `night` |
| - | - | - |
| `colorPrimary` | <Swatch color="#244653" /> | <Swatch color="#7fb3c4" /> |
| `colorPrimaryText` | <Swatch color="#f6f3ec" /> | <Swatch color="#10171a" /> |
| `colorBackground` | <Swatch color="#fffef8" /> | <Swatch color="#16191b" /> |
| `colorText` | <Swatch color="#1b1d1f" /> | <Swatch color="#ecebe6" /> |
| `colorTextSecondary` | <Swatch color="#64716f" /> | <Swatch color="#9aa5a3" /> |
| `colorDanger` | <Swatch color="#b54835" /> | <Swatch color="#e5806c" /> |
| `colorWarning` | <Swatch color="#ba6a2e" /> | <Swatch color="#d9944f" /> |
| `colorSuccess` | <Swatch color="#2e7d4f" /> | <Swatch color="#6fbf8f" /> |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.