Theming, language and direction

Set CSS custom properties on a wrapper to theme its widgets. Use :root for values shared across your application.

.host-review {
  --primary: #087f8c;
  --primary-foreground: #ffffff;
  --sea-radius-control: 2px;
  --sea-highlight: #f7df77;
}

Layout and parts

sea-context, sea-process and sea-step display their children without adding a layout box. Put the individual widgets in ordinary host HTML, CSS Grid or Flexbox. Set each widget's size and placement with a class or style. React wrappers accept className and style.

.review-grid {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  height: 40rem;
}
.review-grid > * {
  min-width: 0;
  min-height: 0;
}
@media (max-width: 60rem) {
  .review-grid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .review-grid sea-source-viewer {
    height: 30rem;
  }
}
sea-form.compact::part(toolbar) {
  padding: 0.5rem;
}
sea-file-browser.documents::part(item) {
  border-radius: 0.25rem;
}
sea-field.total::part(value) {
  font-weight: 600;
}

Host CSS controls the outer element. CSS tokens inherit into its shadow DOM. ::part() selects public internal regions. Each component reference lists its parts, including domain parts such as dropzone, item, group, field and value.

The document intake example places the individual widgets with host CSS. Set each widget's classes and dimensions, then use its own styling parts.

Preset

Load the stylesheet and apply its class to the widget or a wrapper.

import * as React from "react";
import "@sea-dev/widget-lit/themes/banking-classic.css";
import App from "./results-example";

export function ThemedReview() {
  return (
    <div className="sea-theme-banking-classic">
      <App />
    </div>
  );
}

Colours

Tokens	Use
--background, --foreground	Canvas and text
--card, --card-foreground	Panels
--popover, --popover-foreground	Floating surfaces
--primary, --primary-foreground	Primary actions
--secondary, --secondary-foreground	Secondary surfaces
--muted, --muted-foreground	Subtle surfaces and secondary text
--accent, --accent-foreground	Selection and hover
--border, --input, --ring	Borders and focus
--success, --success-foreground	Success status
--warning, --warning-foreground	Warning status
--danger, --danger-foreground	Danger status
--info, --info-foreground	Information status
--destructive	Destructive actions and the --sea-color-fail fallback
--sea-highlight	Source highlights

Set background and foreground pairs together. Structured colour aliases such as --sea-color-text, --sea-color-surface and --sea-color-accent fall back to the corresponding flat tokens.

Shape and spacing

Token	Default	Use
--sea-radius-control	0.1875rem	Inputs and buttons
--sea-radius-badge	0.25rem	Badges and status pills
--sea-radius-card	0.3125rem	Cards and panels
--sea-radius-overlay	0.5rem	Modals and popovers
--sea-radius-pill	9999px	Rounded markers
--radius	0.625rem	General corner radius
--sea-space-1 to --sea-space-8	4 to 32 pixels	Spacing scale
--sea-text-2xs, --sea-text-xs, --sea-text-sm, --sea-text-base	11, 12.5, 13 and 14 pixels	Text sizes
--sea-shadow-md	Medium shadow	Floating cards
--sea-shadow-overlay	Side shadow	Overlays

Dark mode

Apply class="dark" or theme="dark" to the widget element. A .dark class on an ancestor also activates the dark palette.

Language and direction

The interface includes English (en) and Arabic (ar). Set locale on Sea context. A host locale takes precedence over a saved language choice, followed by browser language and English.

Registered regional or script-specific locale IDs retain their own dictionary and text direction. Submission reads use the base language for translated field labels.

Each Sea context scopes the language to its descendants. Nested contexts inherit it unless they set their own language. Sibling contexts remain independent.

A provider without a host locale remembers a language-toggle choice as a browser preference without changing live siblings.

Arabic uses right-to-left layout with Latin display digits, including when the locale changes after the widget has loaded. A dir set on the page or on an ancestor element takes priority over the locale, so check that <html dir="ltr"> isn't holding an Arabic screen left to right. Set dir on a host container to choose the screen's direction. The spreadsheet grid keeps column A on the left and determines each text cell's direction from its content. Document coordinates retain their original ordering.

Field labels

Field and group labels come from the form, separately from the interface language. A field keeps its canonical name, which doesn't change. To show a different label in a language, add an optional synonym with displayName and, if you want one, displayHint:

curl -X PUT "$API_BASE/v2/forms/$FORM_ID/fields/$FIELD_ID/synonyms/ar" \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"displayName":"إجمالي الأصول"}'

Groups use /v2/forms/{formId}/groups/{groupId}/synonyms/{locale}. A field without a synonym for the language shows its name, formatted for reading, and its own hint.