open-index/open-npm huggingface dataset:
npm package: @surf-kit/theme
Description: Theme provider and Tailwind preset for surf-kit — light, dark, and brand color modes
Latest version: 0.3.0

# @surf-kit/theme

> Theme provider and Tailwind preset for surf-kit — light, dark, and brand color modes

Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.

## Install

```bash
npm install @surf-kit/theme @surf-kit/tokens
```

## Quick Example

```tsx
import { ThemeProvider, useColorMode } from '@surf-kit/theme';
import '@surf-kit/tokens/css';
import '@surf-kit/tokens/css/dark';

function App() {
  return (
    <ThemeProvider defaultColorMode="system">
      <MyApp />
    </ThemeProvider>
  );
}

function MyApp() {
  const { colorMode, setColorMode } = useColorMode();
  return <button onClick={() => setColorMode('dark')}>Current: {colorMode}</button>;
}
```

## What's Included

- **ThemeProvider** — wraps your app, manages color mode state
- **useTheme** — access the current theme object
- **useColorMode** — read and set the active color mode (`light` | `dark` | `brand`)
- **createTheme** — build a custom theme configuration
- **surfKitPreset** — Tailwind CSS v4 preset with all surf-kit design tokens

## Color Modes

| Mode | Description |
|------|-------------|
| `light` | Default light theme |
| `dark` | Dark theme |
| `brand` | Teal and gold brand theme |
| `system` | Auto-detects `light` or `dark` from OS preference |

## Docs

- [Storybook](https://barney-w.github.io/surf-kit/storybook)
- [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)

## License

[Apache-2.0](./LICENSE)
npm package: @surf-kit/tokens
Description: Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript
Latest version: 0.3.0

# @surf-kit/tokens

> Design tokens for surf-kit — colors, spacing, typography as CSS, JSON, and TypeScript

Part of the [surf-kit](https://github.com/barney-w/surf-kit) design system.

## Install

```bash
npm install @surf-kit/tokens
```

## Usage

### CSS Custom Properties

```ts
// Light mode (default)
import '@surf-kit/tokens/css';

// Dark mode overrides
import '@surf-kit/tokens/css/dark';

// Brand mode (teal/gold theme)
import '@surf-kit/tokens/css/brand';
```

### TypeScript

```ts
import tokens from '@surf-kit/tokens';
// tokens.color.primary, tokens.spacing.md, etc.
```

### JSON

```ts
import tokens from '@surf-kit/tokens/json';
```

## How It Works

Built with [Style Dictionary v4](https://styledictionary.com/) using the [DTCG](https://www.designtokens.org/) format. Source tokens live in the monorepo under `src/` and are compiled to CSS, JSON, and TypeScript outputs.

Three CSS builds are generated:
- **Light** — `:root` custom properties
- **Dark** — `:root` overrides for dark mode
- **Brand** — `[data-color-mode="brand"]` overrides for the teal/gold brand theme

## Docs

- [Storybook](https://barney-w.github.io/surf-kit/storybook)
- [Contributing](https://github.com/barney-w/surf-kit/blob/main/CONTRIBUTING.md)

## License

[Apache-2.0](./LICENSE)