{"id":50485520,"url":"https://github.com/foscat/ui-style-kit-css","last_synced_at":"2026-06-01T22:00:31.631Z","repository":{"id":360161069,"uuid":"1248138824","full_name":"Foscat/ui-style-kit-css","owner":"Foscat","description":"CSS theme and UI style preset library with multiple visual systems, color schemes, light/dark/contrast modes, and accessibility-focused defaults. https://www.npmjs.com/package/ui-style-kit-css ","archived":false,"fork":false,"pushed_at":"2026-06-01T18:55:16.000Z","size":2658,"stargazers_count":1,"open_issues_count":14,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-01T19:21:40.263Z","etag":null,"topics":["bauhaus","bento","brutalism","color-scheme","cyber-punk","glassmorphism","maximalism","minimalist","neumorphism","skeuomorphism","tactile","toggle-theme","ui","ui-ux-designs","y2k-aesthetic"],"latest_commit_sha":null,"homepage":"https://foscat.github.io/ui-style-kit-css/","language":"CSS","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/Foscat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","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-24T08:29:40.000Z","updated_at":"2026-06-01T17:39:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Foscat/ui-style-kit-css","commit_stats":null,"previous_names":["foscat/ui-style-kit-css"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Foscat/ui-style-kit-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foscat%2Fui-style-kit-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foscat%2Fui-style-kit-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foscat%2Fui-style-kit-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foscat%2Fui-style-kit-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foscat","download_url":"https://codeload.github.com/Foscat/ui-style-kit-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foscat%2Fui-style-kit-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33795114,"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-06-01T02:00:06.963Z","response_time":115,"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":["bauhaus","bento","brutalism","color-scheme","cyber-punk","glassmorphism","maximalism","minimalist","neumorphism","skeuomorphism","tactile","toggle-theme","ui","ui-ux-designs","y2k-aesthetic"],"created_at":"2026-06-01T22:00:26.612Z","updated_at":"2026-06-01T22:00:31.615Z","avatar_url":"https://github.com/Foscat.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI Style Kit CSS\n\n**UI Style Kit CSS** is a CSS-only theme and visual style preset library for standardizing websites, dashboards, admin tools, and customer-facing pages.\n\nIt is designed to be separate from, but complementary to, **Interactive Surface CSS**. Use this library for visual identity, color themes, UI style presets, and native HTML coverage. Use Interactive Surface CSS for interaction-state animation systems and surface behavior.\n\n## Features\n\n- 11 UI style systems\n- 10 shared color schemes\n- `light`, `dark`, and `contrast` modes\n- one combined CSS entry file\n- optional per-style CSS files\n- CSS-only native HTML element coverage\n- visible focus states\n- reduced-motion support\n- high-contrast and forced-colors support\n- print styles\n- NPM/CDN-friendly package structure\n\n## Wiki\n\nExtended documentation lives in [`wiki/`](wiki/):\n\n- [`wiki/Home.md`](wiki/Home.md)\n- [`wiki/Installation-and-Setup.md`](wiki/Installation-and-Setup.md)\n- [`wiki/Theming-Model.md`](wiki/Theming-Model.md)\n- [`wiki/Class-API.md`](wiki/Class-API.md)\n- [`wiki/UI-Systems.md`](wiki/UI-Systems.md)\n- [`wiki/Accessibility.md`](wiki/Accessibility.md)\n\n## Community\n\n- [Code of Conduct](CODE_OF_CONDUCT.md)\n- [Contributing Guide](CONTRIBUTING.md)\n- [Security Policy](SECURITY.md)\n\n## Quality\n\n```bash\nnpm install\nnpm run build\nnpm run lint:css\nnpm test\n```\n\nRun Playwright tests:\n\n```bash\nnpm run test:e2e:install\nnpm run test:e2e\n```\n\nAuto-fix style issues:\n\n```bash\nnpm run lint:css:fix\n```\n\nFull release gate:\n\n```bash\nnpm run verify\n```\n\n## Demo SEO Files\n\nThe demo page includes production SEO/social metadata plus supporting files for GitHub Pages:\n\n- `index.html` comprehensive metadata + JSON-LD\n- `robots.txt`\n- `sitemap.xml`\n- `site.webmanifest`\n- `browserconfig.xml`\n- `.nojekyll`\n- `logo.png`\n- `assets/seo/social-card.png`\n\n## Install\n\n```bash\nnpm install ui-style-kit-css\n```\n\n## Import\n\n```js\nimport \"ui-style-kit-css/dist/ui-style-kit.css\";\n```\n\nOr import one style system only:\n\n```js\nimport \"ui-style-kit-css/styles/minimal-saas.css\";\nimport \"ui-style-kit-css/styles/cyberpunk.css\";\n```\n\n## Integration with Interactive Surface CSS\n\nThis package now ships with an integration bridge for `interactive-surface-css`.\n\nIf you import the combined build (`dist/ui-style-kit.css`), the bridge is already included.\n\nIf you import individual style files, also import the bridge file:\n\n```js\nimport \"interactive-surface-css/interactive-surface.css\";\nimport \"ui-style-kit-css/styles/minimal-saas.css\";\nimport \"ui-style-kit-css/styles/interactive-surface-bridge.css\";\n```\n\nShortcut export path:\n\n```js\nimport \"ui-style-kit-css/interactive-surface-bridge\";\n```\n\nThe bridge maps active `data-ui`, `data-theme`, and `data-mode` tokens to `.interactive-surface` tokens, including variant tokens (`variant-primary`, `variant-secondary`, etc.) and focus/icon color hooks.\n\n## Browser / CDN usage\n\nAfter publishing to NPM:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/ui-style-kit-css@latest/dist/ui-style-kit.min.css\" /\u003e\n```\n\nLocal usage:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/ui-style-kit.css\" /\u003e\n```\n\n## Basic usage\n\n```html\n\u003cbody data-ui=\"minimal-saas\" data-theme=\"arctic-indigo\" data-mode=\"light\"\u003e\n  \u003cmain class=\"saas-page\"\u003e\n    \u003csection class=\"saas-container saas-stack\"\u003e\n      \u003carticle class=\"saas-card\"\u003e\n        \u003ch1 class=\"saas-title\"\u003eUI Style Kit CSS\u003c/h1\u003e\n        \u003cp class=\"saas-subtitle\"\u003eSwitch UI systems, themes, and modes with attributes.\u003c/p\u003e\n      \u003c/article\u003e\n    \u003c/section\u003e\n  \u003c/main\u003e\n\u003c/body\u003e\n```\n\n## UI systems\n\n| UI style | `data-ui` | Class prefix |\n| --- | ---: | ---: |\n| Minimal SaaS | `minimal-saas` | `saas` |\n| Bento UI | `bento` | `bento` |\n| Maximalist / Playful | `maximalist` | `max` |\n| Bauhaus / Swiss Modern | `bauhaus` | `bau` |\n| Skeuomorphic / Tactile | `tactile` | `tactile` |\n| Neumorphism | `neumorphism` | `neo` |\n| Retrofuturism | `retrofuturism` | `retro` |\n| Brutalism | `brutalism` | `brutal` |\n| Cyberpunk | `cyberpunk` | `cyber` |\n| Y2K | `y2k` | `y2k` |\n| Retro Glass | `retro-glass` | `rg` |\n\n## Color themes\n\n- `midnight-gold`\n- `ocean-steel`\n- `forest-moss`\n- `sunset-ember`\n- `royal-plum`\n- `graphite-cyan`\n- `desert-sage`\n- `rose-quartz`\n- `cyber-lime`\n- `arctic-indigo`\n\n## Modes\n\n- `light`\n- `dark`\n- `contrast`\n\n## Dynamic switching\n\n```js\ndocument.body.dataset.ui = \"cyberpunk\";\ndocument.body.dataset.theme = \"midnight-gold\";\ndocument.body.dataset.mode = \"dark\";\n```\n\n## File structure\n\n```txt\nui-style-kit-css/\n  package.json\n  README.md\n  CONTRIBUTING.md\n  SECURITY.md\n  CODE_OF_CONDUCT.md\n  LICENSE\n  index.html\n  logo.png\n  llms.txt\n  robots.txt\n  sitemap.xml\n  site.webmanifest\n  browserconfig.xml\n  assets/\n    seo/\n      social-card.png\n  .stylelintrc.json\n  .stylelintignore\n  .editorconfig\n  .gitattributes\n  .github/\n    workflows/\n      ci.yml\n  dist/\n    ui-style-kit.css\n    ui-style-kit.min.css\n  styles/\n    minimal-saas.css\n    bento.css\n    maximalist.css\n    bauhaus.css\n    tactile.css\n    neumorphism.css\n    retrofuturism.css\n    brutalism.css\n    cyberpunk.css\n    y2k.css\n    retro-glass.css\n  wiki/\n    Home.md\n    Installation-and-Setup.md\n    Theming-Model.md\n    Class-API.md\n    UI-Systems.md\n    Accessibility.md\n```\n\n## Accessibility scope\n\nUI Style Kit CSS includes CSS-only accessibility presentation helpers:\n\n- scoped native HTML defaults\n- visible `:focus-visible` styles\n- `prefers-reduced-motion` support\n- `prefers-contrast: more` support\n- `forced-colors: active` support\n- print styles\n- skip-link and visually-hidden utilities per style prefix\n\nCSS cannot guarantee accessibility by itself. Use semantic HTML, real labels, keyboard-safe JavaScript, and correct ARIA state management for interactive components.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoscat%2Fui-style-kit-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoscat%2Fui-style-kit-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoscat%2Fui-style-kit-css/lists"}