@goldencomm/ds-react

Baseline React components — typographic primitives, form fields, buttons. Consumes @goldencomm/ds-core for visual values.

Install

pnpm add @goldencomm/ds-react @goldencomm/ds-core

Use

import "@goldencomm/ds-core/baseline";
import { Button } from "@goldencomm/ds-react";

export function App() {
  return <Button variant="primary">Click me</Button>;
}

Components are presentational and server-renderable (no 'use client') — they just render markup + classes and forward props.

Color schemes & light/dark

These are CSS conventions, not React components (so they work the same across React, HTML, WordPress, Shopify, and .NET):

• Color scheme: add a gcds-scheme-* class to any element; @goldencomm/ds-core (schemes.css) re-maps the semantic tokens for that subtree.

  <section class="gcds-scheme-inverse">…</section>

• Light/dark: use the native color-scheme CSS property where needed.

v0.1 ships default + inverse; accent comes later (values pending in Figma).

Components (v0.1)

To be added per the v0.1 component list: Button, Heading, Text, Link, Input, Textarea, Select, Label, List, Quote, Code, Caption.