# @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 ```bash npm install @sproutsocial/seeds-react-theme # or yarn add @sproutsocial/seeds-react-theme ``` ## Usage ### React (styled-components) ```jsx import { ThemeProvider } from "styled-components"; import theme from "@sproutsocial/seeds-react-theme"; function App() { return ( ); } ``` ### Tailwind CSS See [MULTI_FRAMEWORK_GUIDE.md](./MULTI_FRAMEWORK_GUIDE.md) for complete documentation. **Quick start:** ```javascript // tailwind.config.js module.exports = { presets: [require("@sproutsocial/seeds-react-theme/dist/tailwind-preset")], content: ["./src/**/*.{js,jsx,ts,tsx}"], }; ``` ```jsx ``` ### CSS Custom Properties ```html ``` ### Angular / Vue / Svelte Import the CSS file in your application entry point: ```javascript // 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: ```css .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: ```javascript 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 ``` Toggle with JavaScript: ```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 ```javascript { ".": "@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](./MULTI_FRAMEWORK_GUIDE.md)** - Complete guide for using Seeds theme with Tailwind, Angular, Vue, Svelte, and HTML/CSS - **[Changelog](./CHANGELOG.md)** - Version history and changes ## Development Build all theme formats: ```bash yarn build ``` Build specific formats: ```bash yarn build:tailwind # Build Tailwind presets yarn build:css # Build CSS variables ``` ## License MIT ## Contributing See the main [Seeds repository](https://github.com/sproutsocial/seeds) for contribution guidelines.