{"id":50837625,"url":"https://github.com/zcag/tahta","last_synced_at":"2026-06-14T05:01:35.206Z","repository":{"id":364625433,"uuid":"1268600847","full_name":"zcag/tahta","owner":"zcag","description":"A pristine, themeable design system for Slidev — switch the entire visual style (type, shape, texture, palette) with one line.","archived":false,"fork":false,"pushed_at":"2026-06-13T19:41:27.000Z","size":4602,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-13T20:26:02.614Z","etag":null,"topics":["design-system","design-tokens","presentation","slides","slidev","slidev-theme","theme","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/zcag.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":"2026-06-13T18:13:18.000Z","updated_at":"2026-06-13T19:41:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zcag/tahta","commit_stats":null,"previous_names":["zcag/tahta"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zcag/tahta","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcag%2Ftahta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcag%2Ftahta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcag%2Ftahta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcag%2Ftahta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcag","download_url":"https://codeload.github.com/zcag/tahta/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcag%2Ftahta/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34309655,"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-14T02:00:07.365Z","response_time":62,"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":["design-system","design-tokens","presentation","slides","slidev","slidev-theme","theme","vue"],"created_at":"2026-06-14T05:01:18.880Z","updated_at":"2026-06-14T05:01:35.191Z","avatar_url":"https://github.com/zcag.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003etahta\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eA design system for \u003ca href=\"https://sli.dev\"\u003eSlidev\u003c/a\u003e.\u003c/b\u003e\u003cbr\u003e\nTokens, components, and patterns — so a deck is something you \u003ci\u003eassemble\u003c/i\u003e, not style.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ccode\u003enpm i slidev-theme-tahta\u003c/code\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://tahta.cagdas.io\"\u003etahta.cagdas.io\u003c/a\u003e — live explorer (every layout × every variant) · used in production by \u003ca href=\"https://tela.cagdas.io\"\u003etela\u003c/a\u003e as its deck theme.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"docs/assets/variants.png\" alt=\"One deck rendered in all seven tahta variants\" width=\"860\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cem\u003eOne deck, seven variants — one line changed. Not a recolor: different typefaces, shapes, textures, density, and motion.\u003c/em\u003e\u003c/p\u003e\n\n---\n\nMost Slidev themes are a stylesheet and some layouts. **Tahta is a design system**: a token foundation, a component library with a published contract, a layout kit, generated docs, and a test that enforces the system's own rules. You author decks from **declarative frontmatter** — no CSS, no grids, no layout HTML — and reskin everything by switching a variant.\n\nWhat makes it a system, not a theme:\n\n- **Foundations as data.** A 3-tier token layer ([`tokens.json`](packages/theme/tokens.json)) — primitives → semantic → variant bundles. Components read *only* semantic tokens, so a variant is a remap. One `--accent` derives the whole palette (tints, shades, chart series) via OKLCH.\n- **A published contract.** [`layouts.json`](packages/theme/layouts.json) (every layout + field) and [`variants.json`](packages/theme/variants.json) ship in the package; [`AGENTS.md`](packages/theme/AGENTS.md) is *generated* from them.\n- **Components \u0026 patterns.** `Stat`, `Plot` (ECharts), `Callout`, `Badge`, `Icon` (Lucide, bundled), `Reveal`, `Fit` + 20 layouts — all variant-aware. Semantic `good/warn/bad/info` roles; `themeConfig.lang` for locale casing (Turkish `i→İ`).\n- **Quality is enforced, not hoped for.** `npm test` gates a **token-contract** (no hardcoded values) and **WCAG-AA contrast** for every variant; CI renders every layout across every variant.\n- **Variants are the proof.** `themeConfig.variant` — 7 complete styles (4 dark / 3 light) swapping type, shape, texture, density, motion, and palette. *That's* the one-liner — a consequence of the token system, not the pitch.\n\n## Variants\n\n| | scheme | type | shape | feel |\n|---|---|---|---|---|\n| **editorial** *(default)* | dark | Fraunces serif + Hanken | hairline, grain | refined keynote |\n| **brutalist** | dark | Space Mono | hard edges, grid | technical / raw |\n| **soft** | light | Plus Jakarta | rounded, soft shadow | friendly / product |\n| **minimal** | light | Archivo, heavy | Swiss whitespace | high-contrast editorial |\n| **paper** | light | Fraunces serif | warm cream, grain | warm editorial |\n| **atelier** | dark | Hanken, gradient titles | cool, refined | studio / premium |\n| **notebook** | light | Hanken, bold | ruled paper, dashed rules | playful-clean |\n\nMachine-readable contracts ship in the package: [`variants.json`](packages/theme/variants.json) (the table above as data) and [`layouts.json`](packages/theme/layouts.json) (every layout + field + component) — `AGENTS.md` is generated from them.\n\n```yaml\nthemeConfig:\n  variant: brutalist\n  accent: '#c8f135'   # optional — override just the brand color\n```\n\n## Quick start\n\n```bash\nnpm i slidev-theme-tahta echarts        # echarts only if you use the chart layout\n```\n\n```yaml\n---\ntheme: slidev-theme-tahta\ntitle: My Talk\nthemeConfig: { variant: editorial }\nlayout: cover\nkicker: Team · 2026\nsubtitle: A one-line promise\n---\n```\n\n## Write slides by filling fields\n\nEvery layout reads structured frontmatter — a full stats slide is nine lines and zero markup:\n\n```yaml\n---\nlayout: stats\nkicker: The numbers\ntitle: What actually changed\nstats:\n  - { value: 80, unit: \"%\", label: lower p95 latency }\n  - { value: 33, unit: \"%\", label: cost reduction }\n  - { value: 0, label: seconds of downtime }\n---\n```\n\n### Layouts\n\n`cover` · `section` · `default` · `statement` · `quote` · `stats` · `fact` · `compare` · `chart` · `steps` · `feature` · `timeline` · `logos` · `code` · `two-cols` · `image` · `showcase` · `bleed` · `embed` · `end`\n\nCharts do `bar · line · area · donut` (ECharts), with a categorical palette derived from your one accent. `code` supports Magic Move. Long bodies auto-fit to the frame.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"docs/assets/layouts.png\" alt=\"Layout catalog\" width=\"860\"\u003e\u003c/p\u003e\n\nFull per-layout reference: [`packages/theme/AGENTS.md`](packages/theme/AGENTS.md).\n\n## Theming goes deep\n\nThree levels, all declarative:\n\n1. **Variant** — `themeConfig.variant` swaps the whole style bundle.\n2. **Accent** — `themeConfig.accent` overrides the single brand color.\n3. **Tokens** — `packages/theme/styles/tokens.css` is a 3-tier system (primitives → semantic → variant bundles). Components read only semantic tokens, so a new `:root[data-variant='…']` block restyles everything.\n\nSee [`docs/design-system.md`](docs/design-system.md).\n\n## Repo\n\n```\npackages/theme/   slidev-theme-tahta — the design system (tokens · variants · layouts · components)\npackages/grade/   tahta — visual-grading CLI used to develop the theme\nexamples/edge/    a deck authored entirely in frontmatter\nexamples/gallery/ every layout + component, in one deck\ndocs/             design-system.md + generated images\n```\n\n## Developing tahta\n\nThe theme is the project; the tooling exists to build it well. `packages/grade` (`tahta`) is the inner loop — it exports every slide to PNG, flags blank/broken/regressed/overflowing slides, and serves a side-by-side report with a tab per variant.\n\n```bash\nnpm install\nnpm run dev        # live-edit the example deck\nnpm run grade      # export + grade the example across all four variants, serve the report\nnpm run assets     # regenerate the README images from source\n```\n\nEditing the system, the loop is: change a token → `npx tahta examples/gallery/slides.md --variants editorial,brutalist,soft,minimal --watch` → see every slide in every variant update, with regressions flagged. Details in [`packages/grade/README.md`](packages/grade/README.md).\n\n## License\n\nMIT © Cagdas Salur\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcag%2Ftahta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcag%2Ftahta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcag%2Ftahta/lists"}