{"id":50707916,"url":"https://github.com/tenphi/tasty.style","last_synced_at":"2026-06-09T13:01:22.233Z","repository":{"id":349529369,"uuid":"1180871827","full_name":"tenphi/tasty.style","owner":"tenphi","description":"Website for Tasty style engine","archived":false,"fork":false,"pushed_at":"2026-06-03T13:12:10.000Z","size":1785,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-03T14:23:50.098Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tasty.style","language":"TypeScript","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/tenphi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-13T13:58:28.000Z","updated_at":"2026-06-03T13:13:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/tenphi/tasty.style","commit_stats":null,"previous_names":["tenphi/tasty.style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tenphi/tasty.style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty.style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty.style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty.style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty.style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tenphi","download_url":"https://codeload.github.com/tenphi/tasty.style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenphi%2Ftasty.style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34107866,"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-09T02:00:06.510Z","response_time":63,"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":[],"created_at":"2026-06-09T13:01:17.713Z","updated_at":"2026-06-09T13:01:22.221Z","avatar_url":"https://github.com/tenphi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tasty Website \u0026 Showcase\n\nOfficial website and interactive showcase for [`@tenphi/tasty`](https://github.com/tenphi/tasty) — a CSS-in-JS styling engine for React with a declarative, state-aware DSL and design system integration.\n\nThis project serves as both the public-facing landing page for Tasty and a production-grade demonstration of its capabilities: SSR with streaming, OKHSL color theming via [`@tenphi/glaze`](https://github.com/tenphi/glaze), responsive state maps, sub-element styling, and more.\n\n## Tech Stack\n\n- **[Next.js 15](https://nextjs.org/)** — App Router, React Server Components\n- **[React 19](https://react.dev/)** — concurrent features, streaming SSR\n- **[@tenphi/tasty](https://github.com/tenphi/tasty)** — styling engine (runtime + SSR)\n- **[@tenphi/glaze](https://github.com/tenphi/glaze)** — OKHSL color theme generator with WCAG contrast solving\n- **[Shiki](https://shiki.style/)** — syntax highlighting with a custom Tasty DSL grammar\n- **TypeScript**, **ESLint**, **Prettier**\n\n## Features Demonstrated\n\n- **SSR hydration** — `TastyRegistry` from `@tenphi/tasty/ssr/next` collects and inlines dynamic styles during server rendering\n- **Custom state aliases** — `@mobile`, `@tablet`, `@desktop`, `@dark`, `@high-contrast`, `@reduce-motion` mapped to media/container/root queries\n- **OKHSL color palette** — light, dark, and high-contrast schemes generated with `@tenphi/glaze`, including WCAG AA/AAA contrast solving\n- **Theme \u0026 contrast switching** — runtime toggle via `data-schema` and `data-contrast` root attributes, with `prefers-color-scheme` / `prefers-contrast` fallback\n- **Sub-element styling** — nested element selectors via `$` key (e.g., `Logo`, `LogoImg`)\n- **Responsive state maps** — per-breakpoint value overrides in style objects\n- **Variants \u0026 recipes** — component variants with `variants` key, global recipes via config\n- **UI primitives library** — reusable `Button`, `Card`, `Badge`, `Tabs`, `Grid`, `Text`, and more in `app/ui/`\n- **Custom Shiki grammar** — Tasty DSL syntax highlighting in code examples\n\n## Getting Started\n\n**Prerequisites:** Node.js \u003e= 20, pnpm 10\n\n```bash\ngit clone https://github.com/tenphi/tasty-nextjs-example.git\ncd tasty-nextjs-example\npnpm install\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Scripts\n\n| Command             | Description              |\n| ------------------- | ------------------------ |\n| `pnpm dev`          | Start Next.js dev server |\n| `pnpm build`        | Production build         |\n| `pnpm start`        | Start production server  |\n| `pnpm lint`         | Run ESLint               |\n| `pnpm lint:fix`     | Run ESLint with auto-fix |\n| `pnpm format`       | Format with Prettier     |\n| `pnpm format:check` | Check formatting         |\n| `pnpm hygiene`      | Lint + format check      |\n| `pnpm hygiene:fix`  | Auto-fix lint + format   |\n\n## Project Structure\n\n```\napp/\n  layout.tsx              # Root layout — imports SSR registry and global styles\n  page.tsx                # Home page — composes all sections\n  theme.ts                # Glaze color palette definition\n  states.ts               # Shared custom state aliases (used by both configs)\n  tasty-config.ts         # Runtime Tasty config (imports shared states)\n  tasty-registry.tsx      # SSR style registry (TastyRegistry wrapper)\n  components/             # Page sections\n    Header.tsx            # Sticky header with nav, theme/contrast switchers\n    Hero.tsx              # Hero with gradient title and CTAs\n    Features.tsx          # Feature cards grid\n    HowItWorks.tsx        # Interactive state mapping examples\n    TokenShowcase.tsx     # Design token and color palette demos\n    CodeShowcase.tsx      # Tabbed code examples\n    Ecosystem.tsx         # Related tools (Glaze, ESLint plugin, VS Code ext)\n    CallToAction.tsx      # Install command and CTA buttons\n    Footer.tsx            # Links and copyright\n    ThemeSwitcher.tsx     # Light/dark toggle\n    ContrastSwitcher.tsx  # Normal/high-contrast toggle\n  ui/                     # Reusable UI primitives\n    Button.tsx, Card.tsx, Badge.tsx, Tabs.tsx, Grid.tsx,\n    Text.tsx, Link.tsx, Space.tsx, CodeBlock.tsx, Switcher.tsx, ...\n  lib/\n    shiki.ts              # Shiki highlighter setup\n    shiki-theme.ts        # Custom theme using Tasty color tokens\n    tasty.tmLanguage.json # TextMate grammar for Tasty DSL\npublic/\n  tasty.svg               # Logo\nnext.config.ts            # Next.js config\n```\n\n## How Tasty is Integrated\n\nThe project uses a two-layer integration:\n\n1. **SSR** — `TastyStyleRegistry` wraps the app in `layout.tsx`. It uses `TastyRegistry` from `@tenphi/tasty/ssr/next` to collect styles generated during server rendering and inline them into the HTML response, ensuring no flash of unstyled content.\n\n2. **Runtime** — `tasty-config.ts` calls `configure()` to register custom state aliases that map to media queries, root attribute selectors, and combined conditions. Components use `tasty()` to create styled elements with state-aware style objects.\n\n```\nSSR:     TastyRegistry ──► \u003cstyle\u003e tags inlined in HTML (dynamic, per-request)\nRuntime: configure()   ──► custom states, tokens, plugins (client-side)\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenphi%2Ftasty.style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftenphi%2Ftasty.style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenphi%2Ftasty.style/lists"}