4.1.0 • Published 2 weeks ago

@sproutsocial/seeds-react-theme

Licence

MIT

Version

4.1.0

Deps

Vulns

Weekly

Summary Dependency Versions

@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-theme

Usage

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 build

Build specific formats:

yarn build:tailwind  # Build Tailwind presets
yarn build:css       # Build CSS variables

License

MIT

Contributing

See the main Seeds repository for contribution guidelines.