{"id":35611562,"url":"https://github.com/duskmoon-dev/duskmoonui","last_synced_at":"2026-03-13T19:02:47.767Z","repository":{"id":320658229,"uuid":"1082737160","full_name":"duskmoon-dev/duskmoonui","owner":"duskmoon-dev","description":"The Core of DuskmoonUI","archived":false,"fork":false,"pushed_at":"2026-03-12T06:14:02.000Z","size":1818,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-12T12:33:59.234Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://duskmoon-dev.github.io/duskmoonui/","language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/duskmoon-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-10-24T17:32:09.000Z","updated_at":"2026-03-12T06:12:23.000Z","dependencies_parsed_at":"2025-10-25T04:33:11.339Z","dependency_job_id":null,"html_url":"https://github.com/duskmoon-dev/duskmoonui","commit_stats":null,"previous_names":["duskmoon-dev/duskmoonui"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/duskmoon-dev/duskmoonui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duskmoon-dev%2Fduskmoonui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duskmoon-dev%2Fduskmoonui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duskmoon-dev%2Fduskmoonui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duskmoon-dev%2Fduskmoonui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duskmoon-dev","download_url":"https://codeload.github.com/duskmoon-dev/duskmoonui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duskmoon-dev%2Fduskmoonui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30471165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T11:00:43.441Z","status":"ssl_error","status_checked_at":"2026-03-13T11:00:23.173Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-01-05T04:10:55.957Z","updated_at":"2026-03-13T19:02:47.759Z","avatar_url":"https://github.com/duskmoon-dev.png","language":"MDX","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DuskMoonUI\n\n\u003e A CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system\n\n[![CI](https://github.com/duskmoon-dev/duskmoonui/actions/workflows/ci.yml/badge.svg)](https://github.com/duskmoon-dev/duskmoonui/actions/workflows/ci.yml)\n[![@duskmoon-dev/core](https://img.shields.io/npm/v/@duskmoon-dev/core)](https://www.npmjs.com/package/@duskmoon-dev/core)\n[![@duskmoon-dev/css-art](https://img.shields.io/npm/v/@duskmoon-dev/css-art)](https://www.npmjs.com/package/@duskmoon-dev/css-art)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Features\n\n- **Extended Color System** - 65+ Material Design 3 color tokens in OKLCH format\n- **49 Components** - Buttons, cards, forms, modals, navigation, and more\n- **Beautiful Themes** - Sunshine (light) and Moonlight (dark) built-in themes\n- **CSS-Only** - No JavaScript runtime, works with any framework\n- **Tailwind CSS v4** - Native CSS imports, modern color functions\n- **Accessible** - WCAG AA contrast ratios with on-color variants\n\n## Quick Start\n\n### Installation\n\n```bash\nbun add @duskmoon-dev/core tailwindcss@^4.0.0\n\n# or npm\nnpm install @duskmoon-dev/core tailwindcss@^4.0.0\n```\n\n### Setup\n\nImport the library in your CSS file:\n\n#### Option A: CSS `@import` (Recommended)\n\n```css\n@import \"tailwindcss\";\n@import \"@duskmoon-dev/core\";\n```\n\n#### Option B: Tailwind `@plugin` Directive\n\n```css\n@import \"tailwindcss\";\n@plugin \"@duskmoon-dev/core/plugin\";\n```\n\nThe `@plugin` approach registers Material Design 3 color tokens into Tailwind's theme, enabling utility classes like `bg-primary`, `text-on-surface`, etc.\n\nSet the theme in your HTML:\n\n```html\n\u003chtml data-theme=\"sunshine\"\u003e\n  \u003c!-- Your app --\u003e\n\u003c/html\u003e\n```\n\n### Usage\n\nUse the component classes:\n\n```html\n\u003c!-- Buttons --\u003e\n\u003cbutton class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\n\u003cbutton class=\"btn btn-secondary btn-outline\"\u003eOutlined\u003c/button\u003e\n\u003cbutton class=\"btn btn-tertiary btn-ghost\"\u003eGhost\u003c/button\u003e\n\n\u003c!-- Cards --\u003e\n\u003cdiv class=\"card\"\u003e\n  \u003cdiv class=\"card-body\"\u003e\n    \u003ch2 class=\"card-title\"\u003eCard Title\u003c/h2\u003e\n    \u003cp\u003eCard content goes here.\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Form inputs --\u003e\n\u003cinput type=\"text\" class=\"input\" placeholder=\"Enter text...\" /\u003e\n\u003cinput type=\"text\" class=\"input input-primary\" placeholder=\"Primary input\" /\u003e\n```\n\nOr use the color utilities directly:\n\n```html\n\u003cdiv class=\"bg-primary text-primary-content\"\u003ePrimary background\u003c/div\u003e\n\u003cdiv class=\"bg-surface-container text-on-surface\"\u003eSurface container\u003c/div\u003e\n```\n\n## Components\n\nDuskMoonUI includes 49 components organized by category:\n\n**Forms:** Button, Input, Checkbox, Radio, Select, Textarea, Switch, Slider, Autocomplete, Datepicker, File Upload, Rating\n\n**Data Display:** Card, Badge, Avatar, Chip, Table, List, Timeline\n\n**Feedback:** Alert, Dialog, Modal, Toast, Snackbar, Progress, Skeleton, Tooltip\n\n**Navigation:** Navbar, Tabs, Drawer, Breadcrumbs, Pagination, Stepper, Bottom Navigation\n\n**Layout:** Divider, App Bar\n\n**Overlay:** Menu, Popover, Bottom Sheet, Collapse, Accordion\n\n## Built-in Themes\n\n### Sunshine (Light)\n\nWarm, energetic light theme with golden and vibrant accents.\n\n- Primary: Warm Orange\n- Secondary: Pink\n- Tertiary: Purple\n\n### Moonlight (Dark)\n\nSerene, elegant dark theme with cool tones and soft accents.\n\n- Primary: Soft Blue\n- Secondary: Purple\n- Tertiary: Teal\n\nSwitch themes dynamically:\n\n```html\n\u003cbutton onclick=\"document.documentElement.dataset.theme = 'moonlight'\"\u003e\n  Dark Mode\n\u003c/button\u003e\n```\n\n## Color System\n\nDuskMoonUI uses OKLCH color format for perceptually uniform colors. Focus states are generated dynamically using `color-mix()`:\n\n```css\n/* Hover states use color-mix() */\n.btn-primary:hover {\n  background-color: color-mix(in oklch, var(--color-primary), black 10%);\n}\n```\n\n### Color Tokens\n\n**Brand Colors** (Primary, Secondary, Tertiary):\n- `{color}` - Main color\n- `{color}-content` - Text on main color\n- `{color}-container` - Tinted background\n- `on-{color}-container` - Text on container\n\n**Surface Elevation:**\n- `surface` - Base surface\n- `surface-dim`, `surface-bright` - Dimmed/brightened variants\n- `surface-container-{lowest,low,default,high,highest}` - 5 elevation levels\n- `on-surface`, `on-surface-variant` - Text colors\n\n**Semantic Colors:**\n- `info`, `success`, `warning`, `error` - Status colors\n- `{status}-content` - Text on status colors\n- `{status}-container`, `on-{status}-container` - Container variants\n\n**Outline:**\n- `outline` - Borders and dividers\n- `outline-variant` - Subtle borders\n\n## Development\n\n### Prerequisites\n\n- [Bun](https://bun.sh/) v1.0 or later\n- Node.js v18 or later (optional)\n\n### Setup\n\n```bash\ngit clone https://github.com/duskmoon-dev/duskmoonui.git\ncd duskmoonui\nbun install\n```\n\n### Commands\n\n```bash\n# Build core package\nbun run build:core\n\n# Watch mode for development\nbun run dev:core\n\n# Type checking\nbun run typecheck\n\n# Run unit tests\ncd packages/core \u0026\u0026 bun test tests/unit\n\n# Run visual regression tests\ncd packages/core \u0026\u0026 bun run test:visual\n\n# Run all tests\ncd packages/core \u0026\u0026 bun run test:all\n```\n\n## Project Structure\n\n```\nduskmoonui/\n├── packages/\n│   └── core/                 # @duskmoon-dev/core\n│       ├── src/\n│       │   ├── base/         # Color token definitions\n│       │   ├── themes/       # Built-in themes (sunshine, moonlight)\n│       │   ├── components/   # 49 component CSS files\n│       │   ├── generators/   # CSS variable generators\n│       │   └── types/        # TypeScript definitions\n│       ├── tests/\n│       │   ├── unit/         # Unit tests\n│       │   ├── visual/       # Visual regression tests\n│       │   └── accessibility/# a11y tests\n│       └── dist/             # Built files\n└── examples/\n    ├── demo/                 # Interactive demo\n    ├── astro-starter/        # Astro example\n    └── nextjs-starter/       # Next.js example\n```\n\n## Who Uses This\n\n- **[duskmoon-elements](https://github.com/duskmoon-dev/duskmoon-elements)** - Web Components library that uses `@duskmoon-dev/core` CSS for its custom elements\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License - see LICENSE file for details\n\n## Acknowledgments\n\n- Material Design 3 for the comprehensive color system\n- Tailwind CSS for the utility-first framework\n- Bun for the fast JavaScript runtime\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduskmoon-dev%2Fduskmoonui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduskmoon-dev%2Fduskmoonui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduskmoon-dev%2Fduskmoonui/lists"}