@playbooks/theme NPM

Overview

This is the default theme for Playbooks projects. It is designed to be used in conjunction with the @playbooks/ui library.

Prerequisites

Node
@playbooks/ui
tailwind v4

Installation

npm install @playbooks/theme

Usage

Import this project in your _app.tsx file and then pass to the InterfaceProvider context as shown.

# _app.tsx

import { AppProps } from 'next/app';
import * as theme from '@playbooks/theme';
import '@playbooks/ui/styles.css';
import { InterfaceProvider } from '@playbooks/ui/context';

const App = ({ Component, pageProps }: AppProps) => {

	// Render
	return (
		<InterfaceProvider meta={meta} theme={theme}>
      <Component ssr={pageProps} {...contexts} />
		</InterfaceProvider>
	);
};

export default App;

Then, make sure to base stylesheet to look like the following:

@import 'tailwindcss';
@import '@playbooks/ui/styles.css';

@source "../../node_modules/@playbooks/theme*.js";
@source "../../node_modules/@playbooks/ui*.js";

@theme {
	--font-primary: Plus Jakarta Sans, sans-serif;
	--font-secondary: Inter, sans-serif;
	--font-accent: Courier, monospace;
}

@theme inline {
  --color-primary: var(--color-blue-500);
  --color-secondary: var(--color-cyan-500);
  --color-accent: var(--color-indigo-500);
}