@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.

The current light theme maps product UI to slate/blue-gray semantic variables for primary actions, text, borders, and surfaces. Brand green remains available through --fd-brand-accent, --fd-ring, and --fd-focus-ring for brand cues, focus affordances, and small selected states. The dark theme uses separated background, surface, raised surface, border, input, and muted foreground values so controls, cards, menus, and component states keep readable contrast on dark slate surfaces.

Key semantic variables include:

• --fd-brand-accent
• --fd-brand-accent-soft
• --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
• --fd-glass-surface
• --fd-glass-surface-strong
• --fd-glass-surface-raised
• --fd-glass-border-soft
• --fd-glass-highlight
• --fd-glass-shadow
• --fd-glass-shadow-elevated
• --fd-success
• --fd-warning
• --fd-error
• --fd-ruby
• --fd-info

Stability

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

License And Funding

This package uses the FroggDesign Limited Use License in LICENSE.md, not MIT. You may install and use it as a dependency in personal, internal, commercial, and client projects. You may not redistribute, republish, resell, sublicense, or distribute modified package derivatives without written permission.

Donations are optional and do not grant additional license rights, support commitments, priority service, ownership, endorsement, or commercial exclusivity.