froggdesign-theme

CSS variable theme layer for FroggDesign.

Public API

import { theme, tokens } from "froggdesign-theme";

CSS entry points:

import "froggdesign-theme/styles.css";
import "froggdesign-theme/tokens.css";
import "froggdesign-theme/light.css";
import "froggdesign-theme/dark.css";

styles.css imports the token, light, and dark theme files. Use data-theme="light" or data-theme="dark" on a root element to select semantic variables.

Key semantic variables include:

• --fd-surface-raised
• --fd-surface-sunken
• --fd-foreground-muted
• --fd-brand-soft
• --fd-primary-hover
• --fd-primary-active
• --fd-accent-soft
• --fd-focus-ring
• --fd-hover
• --fd-active

Stability

This is a public npm package. CSS variable names are public API.