npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@kiefer-tek/sophea-design-system

v1.10.0

Published

Sophea design system: latest-shadcn components + theme.css CSS contract + icons.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

sophea-aisophea-ai

Keywords

Readme

@kiefer-tek/sophea-design-system

Tokens + React components for all Sophea products (Sophea Nous, Sophea Portal, and beyond).

Source of truth for design comes from Claude Design (handoff bundle at docs/). This package is the executable form — published as @kiefer-tek/sophea-design-system, consumed by sophea-nous/web and sophea-nous-portal.

Layout

design-system/
├── package.json, tsconfig.json, vite.v2.config.ts
├── .storybook/             Storybook 8 (React + Vite)
├── scripts/                icon pipeline, theme copy, style/contrast audits
├── src/
│   ├── theme.css           hand-authored design tokens + @theme inline (the CSS contract)
│   ├── v2/                 components, foundations, patterns, lib, styles
│   ├── icons/              SVGR icon set + generated registry (npm run icons:build)
│   ├── Introduction.mdx    conventions/welcome doc
│   └── index.ts            public surface
└── docs/
    ├── design-spec.md      full spec (read first)
    ├── HANDOFF.md          original Claude Design handoff README
    ├── SKILL.md, CHANGELOG.md
    ├── chats/              design conversation transcripts
    └── reference/
        ├── preview/        77 HTML prototype cards (visual spec)
        ├── ui_kits/        chat-surface recreation
        └── scraps/         iteration screenshots

Install (from GitHub Packages)

This package is published to GitHub Packages (Kiefer-Tek org, Internal visibility). Consumers need a scoped registry entry and an auth token with read:packages.

Add a .npmrc in the consuming project:

@kiefer-tek:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

The committed .npmrc carries only the literal ${NODE_AUTH_TOKEN} placeholder — npm expands it from the environment at install time, so no secret is committed. Then:

  • CI (in-repo consumers): the repo's own GITHUB_TOKEN is exported as NODE_AUTH_TOKEN; no managed secret needed.
  • Local dev: export a GitHub PAT with read:packages as NODE_AUTH_TOKEN (e.g. export NODE_AUTH_TOKEN=$(gh auth token)), otherwise npm install against an Internal package returns 401.
npm install @kiefer-tek/sophea-design-system

Building this package locally

cd design-system
npm install
npm run build

Usage

Theme (CSS contract)

@import "tailwindcss";
@import "@kiefer-tek/sophea-design-system/theme.css";

theme.css is the package's only CSS export (hand-authored src/theme.css, copied verbatim to dist/theme.css at build). It exposes all CSS variables in light + dark scope: --theme-primary-05, --text-04, --surface-s2, --elevation-2-shadow, etc., plus the Tailwind v4 @theme inline mapping and the dark custom variant — so no Tailwind preset is needed. Import it after @import "tailwindcss" so its Tailwind directives resolve in the host build. Dark mode flips via the .dark class or [data-theme="dark"] on <html> (drive it with ThemeProvider).

Components

import { Button, Input, Badge } from "@kiefer-tek/sophea-design-system";

<Button variant="primary">Send</Button>
<Input label="Workspace" placeholder="Acme" />
<Badge tone="success" dot>Indexed</Badge>

Scripts

| Script | Purpose | |---|---| | npm run build | Build icons, bundle to dist/ via Vite (ESM + types), copy theme.css | | npm run dev | Watch-mode Vite build | | npm run icons:build | Regenerate the SVGR icon set + registry from src/icons/raw/ | | npm run storybook | Storybook on :6006 | | npm run build-storybook | Static Storybook | | npm run typecheck | tsc --noEmit | | npm run lint | ESLint | | npm run format | Prettier write |

Roadmap

This package is implemented in waves. Each wave is a separate PR.

| Wave | Scope | Status | |---|---|---| | 0 — Infra | Tokens, build, Storybook, package skeleton | done | | 1 — Proof | Button, Input, Badge | done | | 2 — Controls | Checkbox, Radio, Switch, Select, Datepicker | done | | 3 — Surface / feedback | Modal, Toast, Tooltip, Banner, Skeleton, Drawer | done | | 4 — Layout / nav | Sidebar tab, Breadcrumbs, Tabs, Pagination | done | | 5 — Data display | Table, Avatar, Code, Attachment | done | | 6 — AI-specific | Message, AI anatomy, Citation, Empty | done | | 7 — Patterns | EmptyHierarchy, ErrorRecovery, Filtering, Forms, LoadingStates (Login skipped) | done | | 8 — Adoption | Gradual migration in sophea-nous/web + Portal | pending |

Component reference (77 cards) lives at docs/reference/preview/. Open the corresponding *.html to see the target visual for each component before implementing.

Design contract (read first)

Full contract at docs/design-spec.md. Highlights every contributor must respect:

  • Tokens, not raw hex. Use var(--text-04), not #475569.
  • Lucide icons only, stroke 1.5 (Send arrow 2.75).
  • One primary CTA in view. Brand gradient is the signature.
  • Glass is for chrome only. Never for body content. Never glass-on-glass.
  • Drift motion language. 6 named patterns; never invent new ones.
  • WCAG 2.2 floors. Focus ring ≥ 2 px + 2 px offset, target size ≥ 24 px, honour prefers-reduced-*.
  • No emoji. Anywhere.
  • Greek-first. Greek runs ~15% longer; design hit targets for it.

Sources

  • Original design handoff: Claude Design bundle (see docs/HANDOFF.md + docs/chats/)
  • Codebase parity: sophea-nous/web/src/app/css/sophea_v1.css, web/lib/opal/src/, web/AGENTS.md
  • Workspace conventions: ../AGENTS.md (root)