@sproutsocial/seeds-react-theme
v4.3.1
Published
Seeds Theme
Downloads
11,349
Readme
@sproutsocial/seeds-react-theme
The Seeds design system semantic theme layer, providing meaningful component-oriented design tokens.
Overview
This package provides the Seeds theme in multiple formats for use across different frameworks and platforms:
- React (styled-components) - Original theme provider for React applications
- Tailwind CSS - Preset for Tailwind-based projects
- CSS Custom Properties - For Angular, Vue, Svelte, vanilla HTML/CSS
- SCSS Variables - For legacy SCSS-based projects
All formats support light and dark mode out of the box.
Installation
npm install @sproutsocial/seeds-react-theme
# or
yarn add @sproutsocial/seeds-react-themeUsage
React (styled-components)
import { ThemeProvider } from 'styled-components';
import theme from '@sproutsocial/seeds-react-theme';
function App() {
return (
<ThemeProvider theme={theme}>
<YourApp />
</ThemeProvider>
);
}Tailwind CSS
See MULTI_FRAMEWORK_GUIDE.md for complete documentation.
Quick start:
// tailwind.config.js
module.exports = {
presets: [
require('@sproutsocial/seeds-react-theme/dist/tailwind-preset'),
],
content: ['./src/**/*.{js,jsx,ts,tsx}'],
}<button className="bg-color-button-primary-bg-base text-color-button-primary-text-base px-space-400 py-space-300 rounded-radius-500">
Primary Button
</button>CSS Custom Properties
<link rel="stylesheet" href="node_modules/@sproutsocial/seeds-react-theme/dist/theme.css">
<button style="
background: var(--color-button-primary-bg-base);
color: var(--color-button-primary-text-base);
padding: var(--space-400);
border-radius: var(--radius-500);
">
Primary Button
</button>Angular / Vue / Svelte
Import the CSS file in your application entry point:
// Angular: styles.css or styles.scss
@import '@sproutsocial/seeds-react-theme/dist/theme-all.css';
// Vue: main.js
import '@sproutsocial/seeds-react-theme/dist/theme-all.css';
// Svelte: App.svelte or +layout.svelte
import '@sproutsocial/seeds-react-theme/dist/theme-all.css';Then use CSS variables in your component styles:
.my-button {
background: var(--color-button-primary-bg-base);
color: var(--color-button-primary-text-base);
padding: var(--space-400);
}Dark Mode
Tailwind CSS
Use the dark mode preset:
module.exports = {
presets: [
require('@sproutsocial/seeds-react-theme/dist/tailwind-preset-dark'),
],
}CSS Variables
Add the data-theme="dark" attribute to your HTML element:
<html data-theme="dark">
<!-- All CSS variables automatically switch to dark mode values -->
</html>Toggle with JavaScript:
// Enable dark mode
document.documentElement.setAttribute('data-theme', 'dark');
// Disable dark mode
document.documentElement.removeAttribute('data-theme');Available Tokens
Colors
- Button colors (primary, secondary, destructive, etc.)
- Text colors (headline, body, subtext, inverse)
- Link colors
- Container backgrounds and borders
- Form backgrounds and borders
- Icon colors
Spacing
0,100,200,300,350,400,450,500,600
Typography
- Font sizes and line heights (
100-1200) - Font families
- Font weights (normal, semibold, bold, extrabold)
Other
- Border radius values
- Box shadows
- Motion (easing, duration)
Package Exports
{
".": "@sproutsocial/seeds-react-theme", // React theme
"./dist/tailwind-preset": "Tailwind preset (light)",
"./dist/tailwind-preset-dark": "Tailwind preset (dark)",
"./dist/theme.css": "CSS variables (light)",
"./dist/theme-dark.css": "CSS variables (dark)",
"./dist/theme-all.css": "CSS variables (light + dark)"
}Documentation
- Multi-Framework Guide - Complete guide for using Seeds theme with Tailwind, Angular, Vue, Svelte, and HTML/CSS
- Changelog - Version history and changes
Development
Build all theme formats:
yarn buildBuild specific formats:
yarn build:tailwind # Build Tailwind presets
yarn build:css # Build CSS variablesLicense
MIT
Contributing
See the main Seeds repository for contribution guidelines.