Tokens

EnterUI components do not hard-code visual values. They read CSS variables exposed by @froggdesign/theme, which in turn maps the raw token primitives from @froggdesign/tokens. Override a token once, and every component on the page picks it up.

#Two layers

• --fd-* from @froggdesign/theme — token source of truth (color, type, spacing, radius, shadow). Light and dark modes each set their own values.
• --eui-* from @froggdesign/enter-ui — component-facing aliases that default to the matching --fd-* variable.

Two layers exist so apps can re-skin EnterUI without touching tokens used elsewhere in the FroggDesign theme.

#Categories

#Theme defaults

Every variable below is set in @froggdesign/theme/styles.css. Apps can simply import the file once and consume the tokens.

:root {
  --fd-primary: #334155;
  --fd-background: #f8fafc;
  --fd-foreground: #0f172a;
  --fd-error: #dc143c;
  --fd-ruby: #9b111e;
}

#Override strategy

Re-define the variables you need on :root (or any selector) after the theme import. Components inside that scope inherit the new values automatically.

@import "@froggdesign/theme/styles.css";
@import "@froggdesign/enter-ui/styles.css";

:root {
  --fd-primary: #1f2937;
  --fd-radius-md: 8px;
}

[data-theme="dark"] {
  --fd-primary: #f1f5f9;
}

For local rebrands, scope overrides to a className instead of :root:

.brand-billing {
  --eui-color-brand-green: #6366f1;
  --eui-error: #f97316;
}

#Principles

• Neutral first. Charcoal and slate carry the interface. Green is a signal, not a fill.
• Green as signal. --fd-color-brand-green appears for selected states, primary actions, and successful moments. It never dominates a page.
• Crimson and ruby for error. --fd-error drives invalid borders and focus rings; --fd-ruby handles destructive actions like Delete. Both carry their own -soft backgrounds for inline messages.
• Token-driven styling. Components never hard-code colors or sizes. The token layer is the single source of truth across light, dark, and bespoke product themes.

#Next steps

Move on to the Theming guide for the complete override reference, or read the Styling Philosophy for how the token system fits together with className and CSS Modules.