@goldencomm/ds-core
v0.0.1
Published
Baseline design-system core — tokens (Style Dictionary → CSS vars, Tailwind preset, theme.json, SCSS, TS) plus reset + base element styles. The platform-agnostic foundation every target consumes.
Maintainers
Readme
@goldencomm/ds-core
The platform-agnostic foundation of the Baseline design system: design tokens plus base CSS (reset + element styles), built from one source.
This package merges what were formerly @goldencomm/ds-tokens and
@goldencomm/ds-css. Tokens are the single source of truth; every other target
(React, WordPress, Shopify, .NET) consumes the compiled outputs below.
What it produces
pnpm build runs two steps in order — tokens first, then CSS:
| Output | Export | Notes |
|---|---|---|
| dist/css/variables.css | @goldencomm/ds-core/css | CSS custom properties; semantic colors use light-dark() |
| dist/baseline.css | @goldencomm/ds-core/baseline | tokens + reset + elements + schemes, inlined into one file |
| dist/reset.css | @goldencomm/ds-core/reset | reset only |
| dist/elements.css | @goldencomm/ds-core/elements | element styles only |
| dist/scss/_tokens.scss | @goldencomm/ds-core/scss | SCSS variables (light values) |
| dist/js/tokens.{js,cjs,d.ts} | @goldencomm/ds-core | JS/TS token modules |
| dist/tailwind/preset.cjs | @goldencomm/ds-core/tailwind | Tailwind v4 preset |
| dist/wp/theme.json | @goldencomm/ds-core/theme-json | WP theme.json palette/style fragment |
Customization
Per-client brand is applied in code, not Figma, by overriding CSS variables at
:root. Tokens whose source is a single reference (e.g. {brand.primary.600}) emit
as var(--brand-primary-600) rather than a resolved value, so overriding a brand
primitive cascades through the semantic layer without a rebuild. See
docs/architecture.md.
Source layout
src/tokens/ DTCG token JSON — primitives / semantic / component
src/css/ reset.css, elements.css, schemes.css, focus.css, components/*, baseline.css
scripts/ build-tokens.js (Style Dictionary), build-css.mjs (PostCSS bundle)