For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/api/theme-tokens.md.
Leaf UI
  • English

      • Theme tokens

      Prefer ConfigProvider's theme.primaryColor, theme.borderRadius and theme.controlHeight for everyday customization. Related styles derive automatically; see theming.

      LeafThemeTokens

      Pass advanced overrides through theme.tokens only when a derived value needs to change independently. Every field is optional, and nested providers inherit unspecified fields. Numeric lengths use pixels; numeric durations use milliseconds.

      PropertyTypeDefaultDescription
      onPrimaryColorstringThemeText on primary backgrounds
      dangerColorstringAppearanceDanger background / foreground
      onDangerColorstringAppearanceDanger background / foreground
      successColorstringAppearanceSuccess / warning / information
      warningColorstringAppearanceSuccess / warning / information
      infoColorstringAppearanceSuccess / warning / information
      textColorstringAppearanceMain / secondary text
      mutedTextColorstringAppearanceMain / secondary text
      subtleTextColorstring—Subtle supporting text color.
      surfaceColorstringAppearanceMain / subtle surfaces
      mutedSurfaceColorstringAppearanceMain / subtle surfaces
      raisedSurfaceColorstring—Raised and floating surface color.
      borderColorstringAppearanceNeutral borders
      borderHoverColorstring—Neutral border color on hover.
      dividerColorstring—Section divider color, derived from border and surface colors by default.
      borderRadiusSmnumber | stringBase × 0.6Small / large radius override
      borderRadiusMdnumber | stringBase × 1.2Medium radius override for content surfaces such as cards and alerts
      borderRadiusLgnumber | stringBase × 1.6Large radius override
      controlHeightSmnumber | stringBase height − 6px (minimum 1px)Small control height override
      controlHeightLgnumber | stringBase height + 6pxLarge control height override
      fontSizeSmnumber | stringBase − 1pxSmall / large font override
      fontSizeLgnumber | stringBase font size + 2pxLarge font size override
      fontWeightnumber500Emphasis weight for buttons, labels and component titles
      motionDurationnumber | string200Base transition duration; numbers are ms and CSS times are accepted. motion=false forces 0.
      motionEasingstring'cubic-bezier(0.22, 1, 0.36, 1)'Easing for hover, content and ordinary transitions.
      motionSpringstring'cubic-bezier(0.22, 1.28, 0.36, 1)'A mild spring curve for selection and shape changes.
      popupZIndexnumber1000Popup / modal / message stacking
      modalZIndexnumber1100Popup / modal / message stacking
      messageZIndexnumber1200Popup / modal / message stacking
      buttonBorderRadiusnumber | stringControl sizeButton-only radius / shared height override
      buttonHeightnumber | stringControl sizeButton-only radius / shared height override
      choiceBorderRadiusnumber | stringBase × 0.5Checkbox radius
      focusColorstringSemantic colorFocus outlines
      primaryHoverColorstringPrimary colorHover / pressed primary states
      primaryActiveColorstringPrimary colorHover / pressed primary states
      primarySoftColorstringPrimary colorSoft primary backgrounds and states
      primarySoftHoverColorstringPrimary colorSoft primary backgrounds and states
      primarySoftActiveColorstringPrimary colorSoft primary backgrounds and states
      primaryBorderColorstringPrimary colorPrimary border
      dangerHoverColorstringDanger colorHover / pressed danger states
      dangerActiveColorstringDanger colorHover / pressed danger states
      spacingSmnumber | string—Configure spacing sm.
      spacingLgnumber | string—Configure spacing lg.
      shadowSmstring—Configure shadow sm.
      shadowXsstring—The lightest surface shadow.
      shadowMdstring—Configure shadow md.
      shadowLgstring—Configure shadow lg.
      lineHeightnumber—Body line height.

      Type import

      import type { LeafThemeTokens } from '@ifhover/leaf-ui';

const tokens = {
  controlHeightSm: 28,
  borderRadiusLg: 14,
} satisfies LeafThemeTokens;

      Pass this object to <ConfigProvider theme={{ tokens }}>.

      LeafComponentTokens

      Style fields for theme.components overrides by component name. Check each component's documentation for the fields it supports.

      PropertyTypeDescription
      borderRadiusstring | numberCorner radius; numbers are pixels.
      controlHeightstring | numberControl height; numbers are pixels.
      paddingstring | numberContent padding.
      gapstring | numberSpace between children.
      fontSizestring | numberFont size; numbers are pixels.
      colorstringColor or semantic color.
      backgroundstringComponent surface background.
      borderColorstringOuter borders and section dividers.
      headerBackgroundstringHeader background.
      footerBackgroundstringFooter background.
      shadowstringCSS box-shadow value.

      LeafThemeStyle

      A React style type with --leaf-* custom properties. See Theming for consuming variables in application CSS.

      PropertyTypeDescription
      [key: `--leaf-${string}`]string | number | undefinedReusable CSS custom property.