@edwinner/togo-react

v0.2.4

Published

10 days ago

ToGo Design System — a personal React component library

0High
0Medium
0Low

edwinner

design-system react components ui togo

ToGo Design System — React

A personal React component library built as a portfolio piece, inspired by Goto's Chameleon design system.

Packages | Package | Description | |---|---| | @edwinner/togo-react | This package — React web components | | @edwinner/togo-react-native | Coming soon — React Native mobile components |

Installation

npm install @edwinner/togo-react
# or
yarn add @edwinner/togo-react
# or
pnpm add @edwinner/togo-react

React 18+ and react-dom are peer dependencies; make sure they're installed in your project.

Usage

1. Import the stylesheet

In your app's entry file (e.g. main.tsx or _app.tsx):

import "@edwinner/togo-react/styles";
// or
import "@edwinner/togo-react/dist/style.css";

2. Use components

import { Button } from "@edwinner/togo-react";

export default function App() {
  return (
    <Button variant="filled" onClick={() => console.log("clicked")}>
      Get Started
    </Button>
  );
}

Components

| Component | Status | |---|---| | Button | Stable |

More coming soon.

Design Tokens

Tokens are exported as a tokens object and as CSS custom properties (via the stylesheet).

import { tokens } from "@edwinner/togo-react";

console.log(tokens.colors.primary[500]); // "var(--togo-color-primary-500)"

CSS custom properties are available on :root once the stylesheet is imported:

.my-element {
  color: var(--togo-color-primary-600);
  font-family: var(--togo-font-sans);
}

Color Palette (Light & Dark)

The design system includes a full color palette for both light and dark modes. Semantic tokens (Surface, Type, Border) use CSS light-dark() and switch automatically based on color-scheme.

Enabling dark mode

Set color-scheme: dark on <html> (or a parent element) to apply dark mode. The bundled global stylesheet defines semantic tokens with light-dark(lightVal, darkVal).

// Option 1: Toggle via React state
function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  useEffect(() => {
    document.documentElement.style.colorScheme = theme;
  }, [theme]);
  return (
    <>
      <button onClick={() => setTheme(t => t === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
      {/* Your app */}
    </>
  );
}

<!-- Option 2: Set on html for app-wide dark mode -->
<html style="color-scheme: dark">

By default, color-scheme: light dark is set on :root, so the theme follows the user's prefers-color-scheme until you override it.

Raw palette values

For programmatic use (charts, canvas, etc.), import the palette with hex values:

import { tokens } from "@edwinner/togo-react";

// Semantic colors — light and dark values
tokens.semanticPalette.surface[0];  // { light: "#f3f4f5", dark: "#030405" }
tokens.semanticPalette.type.primary; // { light: "#212325", dark: "#a4a4a4" }

// Core colors — shared across modes
tokens.corePalette.green[500];      // "#007c4c"
tokens.corePalette.neutrals[800];   // "#212325"

Use tokens.semanticColors for CSS variable references in components.

Development

Prerequisites

Node.js 18+
npm 9+

Getting started

# Install dependencies
npm install

# Start Storybook (component explorer + docs)
npm run dev

# Build the library
npm run build

# Type-check without emitting
npm run typecheck

# Lint
npm run lint

Project structure

src/
├── components/        # Individual components
│   └── Button/
│       ├── Button.tsx
│       ├── Button.module.css
│       ├── Button.stories.tsx
│       └── index.ts
├── tokens/            # Design token JS exports
│   └── index.ts
├── styles/
│   └── global.css     # CSS custom properties
└── index.ts           # Library entry point

Publishing

# Bump version in package.json first, then:
npm publish --access public

The prepublishOnly script runs npm run build automatically before publishing.

License

MIT