Color

Sugarcoat UI uses a semantic color system that automatically adapts to light and dark themes.

Semantic Colors#

Token	Description
`bg.canvas`	Page background
`bg.subtle`	Subtle background for sections
`bg.muted`	Muted background

Use semantic tokens in your styles:

import { css } from "@sugarcoat/core/css";
 
const styles = css({
  color: "fg.default",
  bg: "bg.canvas",
  borderColor: "border.subtle",
});