@gomiui/theme-matcha

Earthy green theme with Figtree typography. Uses Lucide icons.

Install

npm install @gomiui/theme-matcha

Usage

Wrap your app with XDSTheme and pass the theme:

import {XDSTheme} from '@gomiui/core/theme';
import {matchaTheme} from '@gomiui/theme-matcha/built';

function App() {
  return <XDSTheme theme={matchaTheme}>{/* your app */}</XDSTheme>;
}

Import paths

| Path | Use case | | ----------------------------- | ------------------------------------------------------ | | @gomiui/theme-matcha | Source build (StyleX compilation via @gomiui/build) | | @gomiui/theme-matcha/built | Pre-built dist (Tailwind, plain CSS, or no build step) | | @gomiui/theme-matcha/theme.css | Pre-built CSS file (import in your stylesheet) |

If you're using @gomiui/build for StyleX source compilation, import from the bare path. Otherwise, use /built.

CSS import

Add the theme CSS to your stylesheet:

@import '@gomiui/theme-matcha/theme.css';

Fonts

This theme uses custom typefaces:

| Role | Font | | ------- | ----------------- | | Body | DM Sans | | Heading | Playwrite US Trad | | Code | JetBrains Mono |

These fonts must be loaded separately. The theme references them by name but does not bundle the font files.

Add this to your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Playwrite+US+Trad:[email protected]&display=swap" />

Without this, the theme falls back to system fonts.