{"id":51510287,"url":"https://github.com/man4ish/omnibioai-design-tokens","last_synced_at":"2026-07-08T05:01:58.130Z","repository":{"id":365107687,"uuid":"1246444890","full_name":"man4ish/omnibioai-design-tokens","owner":"man4ish","description":"Unified design token system for OmniBioAI — 47 CSS custom properties (colors, typography, spacing, radius, shadows) shared across all frontend surfaces. Zero hardcoded values; swap themes by overriding tokens. Ships as CSS, JS, and TypeScript with no build step.","archived":false,"fork":false,"pushed_at":"2026-06-15T21:53:57.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-15T23:24:13.162Z","etag":null,"topics":["bioinformatics","css","css-variables","design-system","design-tokens","github-packages","omnibioai","typescript","ui-design"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/man4ish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-22T07:43:28.000Z","updated_at":"2026-06-15T21:54:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/man4ish/omnibioai-design-tokens","commit_stats":null,"previous_names":["man4ish/omnibioai-design-tokens"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/man4ish/omnibioai-design-tokens","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/man4ish%2Fomnibioai-design-tokens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/man4ish%2Fomnibioai-design-tokens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/man4ish%2Fomnibioai-design-tokens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/man4ish%2Fomnibioai-design-tokens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/man4ish","download_url":"https://codeload.github.com/man4ish/omnibioai-design-tokens/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/man4ish%2Fomnibioai-design-tokens/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35252324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-08T02:00:06.796Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bioinformatics","css","css-variables","design-system","design-tokens","github-packages","omnibioai","typescript","ui-design"],"created_at":"2026-07-08T05:01:57.380Z","updated_at":"2026-07-08T05:01:58.124Z","avatar_url":"https://github.com/man4ish.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @man4ish/design-tokens\n\nUnified design token system for the [OmniBioAI](https://github.com/man4ish/omnibioai-studio) platform — 47 CSS custom properties covering colors, typography, spacing, border radius, and shadows. Single source of truth for all OmniBioAI frontend surfaces.\n\n---\n\n## Installation\n\nThis package is published to the GitHub Packages registry under `@man4ish`.\n\n### 1. Authenticate with GitHub Packages\n\nAdd to `.npmrc` in your project root:\n\n```\n@man4ish:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN\n```\n\nYour token needs `read:packages` scope. Generate one at GitHub → Settings → Developer settings → Personal access tokens.\n\n### 2. Install\n\n```bash\nnpm install @man4ish/design-tokens\n```\n\nNo peer dependencies. No build step required — the package ships the final files directly.\n\n---\n\n## Usage\n\nThe package ships three files. Use whichever fits your stack:\n\n### CSS (recommended — React, plain HTML, any framework)\n\nImport once at your app entry point:\n\n```css\n@import '@man4ish/design-tokens/tokens.css';\n```\n\nOr in your JS/TS entry:\n\n```ts\nimport '@man4ish/design-tokens/tokens.css';\n```\n\nAll 47 tokens are then available as CSS custom properties throughout your app:\n\n```css\n.my-component {\n  background: var(--color-bg-surface);\n  color: var(--color-text);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-card);\n  font-family: var(--font-sans);\n}\n```\n\n### JS/ESM\n\n```ts\nimport { tokens } from '@man4ish/design-tokens';\n\nconsole.log(tokens.colorAccent);  // '#...'\n```\n\n### TypeScript\n\n`tokens.ts` ships with the package and provides full type definitions — no separate `@types` package needed.\n\n---\n\n## Token reference\n\n### Colors — backgrounds\n\n| Token | Usage |\n|---|---|\n| `--color-bg` | Page/app background |\n| `--color-bg-surface` | Card, panel, sidebar backgrounds |\n| `--color-bg-surface2` | Nested surfaces, input backgrounds |\n| `--color-bg-surface3` | Tertiary surfaces, hover states |\n| `--color-bg-elevated` | Modals, dropdowns, tooltips |\n\n### Colors — borders\n\n| Token | Usage |\n|---|---|\n| `--color-border` | Default border |\n| `--color-border-muted` | Subtle dividers |\n| `--color-border-bright` | Focused / highlighted borders |\n\n### Colors — text\n\n| Token | Usage |\n|---|---|\n| `--color-text` | Primary body text |\n| `--color-text-soft` | Slightly muted text |\n| `--color-text-secondary` | Secondary labels |\n| `--color-text-muted` | Captions, placeholders |\n| `--color-text-dim` | Disabled, hint text |\n\n### Colors — brand\n\n| Token | Usage |\n|---|---|\n| `--color-accent` | Primary brand color — buttons, links, focus rings |\n| `--color-blue` | Informational |\n| `--color-blue-dim` | Muted blue fill |\n| `--color-blue-surface` | Light blue background |\n| `--color-blue-border` | Blue border |\n| `--color-purple` | Secondary brand / AI features |\n| `--color-purple-dim` | Muted purple fill |\n| `--color-purple-surface` | Light purple background |\n| `--color-purple-border` | Purple border |\n\n### Colors — status\n\n| Token | Usage |\n|---|---|\n| `--color-danger` | Errors, destructive actions |\n| `--color-danger-dim` | Muted danger fill |\n| `--color-danger-border` | Danger border |\n| `--color-warning` | Warnings, in-progress states |\n| `--color-warning-dim` | Muted warning fill |\n| `--color-warning-border` | Warning border |\n| `--color-success` | Success, completed runs |\n| `--color-success-dim` | Muted success fill |\n| `--color-success-border` | Success border |\n| `--color-info` | Neutral informational |\n| `--color-info-dim` | Muted info fill |\n| `--color-info-border` | Info border |\n\n### Shadows\n\n| Token | Usage |\n|---|---|\n| `--shadow-sm` | Subtle elevation — badges, chips |\n| `--shadow-card` | Cards, panels |\n| `--shadow-header` | Fixed headers, nav bars |\n\n### Typography\n\n| Token | Usage |\n|---|---|\n| `--font-sans` | Primary UI font |\n| `--font-mono` | Code, labels, IDs |\n| `--font-size-xs` | 11px |\n| `--font-size-sm` | 12px |\n| `--font-size-base` | 14px |\n| `--font-size-md` | 15px |\n| `--font-size-lg` | 16px |\n| `--font-size-xl` | 18px |\n| `--font-size-2xl` | 22px |\n\n### Border radius\n\n| Token | Usage |\n|---|---|\n| `--radius-xs` | Tight corners — badges, tags |\n| `--radius-sm` | Inputs, small buttons |\n| `--radius` | Default — cards, buttons |\n| `--radius-lg` | Large cards, modals |\n| `--radius-xl` | Hero sections |\n| `--radius-pill` | Pills, toggle switches |\n\n### Layout\n\n| Token | Usage |\n|---|---|\n| `--sidebar-w` | Fixed sidebar width |\n| `--topbar-h` | Fixed top navigation height |\n| `--scrollbar-w` | Custom scrollbar width |\n\n---\n\n## Repository layout\n\n```\nomnibioai-design-tokens/\n├── tokens.css    ← CSS custom properties on :root — primary distribution format\n├── tokens.js     ← ESM export of token values as JS object\n├── tokens.ts     ← TypeScript definitions\n├── package.json  ← published as @man4ish/design-tokens to GitHub Packages\n└── .npmrc        ← scoped registry config\n```\n\nNo build step, no `dist/` directory — the source files are the published files.\n\n---\n\n## Used by\n\n| Package | How |\n|---|---|\n| [`@man4ish/ui`](https://github.com/man4ish/omnibioai-ui) | Required peer dep — all components reference these tokens |\n| [`omnibioai-studio`](https://github.com/man4ish/omnibioai-studio) | Electron + React desktop app |\n| `omnibioai-control-center` | CSS report uses design tokens for themed dashboard |\n\n---\n\n## Current version\n\nPublished as `@man4ish/design-tokens` to GitHub Packages.\n47 CSS custom properties — colors, typography, spacing,\nborder radius, shadows, and layout.\n\nAll OmniBioAI frontend surfaces (Electron app, web UI,\necosystem report) use these tokens as the single source of truth.\n\n---\n\n## Adding or updating tokens\n\nAll tokens are defined in `tokens.css` as CSS custom properties on `:root`. When adding a new token:\n\n1. Add the CSS custom property to `tokens.css`\n2. Add the corresponding JS export to `tokens.js`\n3. Add the TypeScript type to `tokens.ts`\n4. Bump the version in `package.json` (semver — patch for new tokens, minor for removals)\n5. Republish to GitHub Packages\n\nNever remove or rename an existing token without a major version bump — consumers depend on the exact property names.\n\n---\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fman4ish%2Fomnibioai-design-tokens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fman4ish%2Fomnibioai-design-tokens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fman4ish%2Fomnibioai-design-tokens/lists"}