@jigsaw-ds/theme-portfolio
v0.3.0
Published
Portfolio theme (CSS variables) for the Jigsaw design system.
Downloads
325
Maintainers
Readme
@jigsaw-ds/theme-portfolio
Portfolio theme (CSS variables) for the Jigsaw design system. Tokens are scoped to [data-theme="portfolio"] and layer on top of the default theme rather than replacing it.
This package is versioned in lockstep with the other publishable Jigsaw packages (@jigsaw-ds/design-system, @jigsaw-ds/tokens, @jigsaw-ds/theme-default, and @jigsaw-ds/theme-build).
Install
npm install @jigsaw-ds/theme-portfolioUsage
Import the theme CSS in your root layout, after the default theme and before your Tailwind entry file. Load order matters — portfolio tokens layer on top of the default theme:
- Shared + default theme sheets (see
@jigsaw-ds/theme-default) @jigsaw-ds/theme-portfolio/base.css@jigsaw-ds/theme-portfolio/semantic.css
import "@jigsaw-ds/theme-portfolio/base.css";
import "@jigsaw-ds/theme-portfolio/semantic.css";Then activate it by setting data-theme="portfolio" on <html> (or a wrapper element).
Exports
| Entry | Purpose |
|-------|---------|
| @jigsaw-ds/theme-portfolio/base.css | Base theme primitives |
| @jigsaw-ds/theme-portfolio/semantic.css | Semantic tokens |
See the full setup guide at docs/using-jigsaw.md.
License
MIT © James Howell
