[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-129":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":15,"starSnapshotCount":15,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},129,"unity-ui-document-design-system","sinanata\u002Funity-ui-document-design-system","sinanata","A drop-in design system for Unity 6 UI Toolkit (UIDocument + UXML + USS). Tokens, components, icons, mobile responsiveness, and a runtime helper — all themed dark, all keyboard-and-touch-ready, all editable from one stylesheet.","https:\u002F\u002Fleapoflegends.com",null,"C#",408,27,3,0,11,22,102,33,4.34,"MIT License",false,"main",true,[26,27,28,29,30],"ui","ui-components","ui-design","uitoolkit","unity","2026-06-12 02:00:08","# Unity UI Toolkit Design System\n\nA drop-in **design system for Unity 6 UI Toolkit** (UIDocument + UXML + USS). Tokens, components, icons, mobile responsiveness, and a runtime helper — all themed dark, all keyboard-and-touch-ready, all editable from one stylesheet.\n\n\u003Cblockquote>\n\u003Ca href=\"https:\u002F\u002Fstore.steampowered.com\u002Fapp\u002F2269500\u002F\">\u003Cimg src=\"docs\u002Fleap-of-legends-icon.png\" align=\"left\" width=\"70\" height=\"70\" alt=\"Leap of Legends\">\u003C\u002Fa>\nBuilt for and battle-tested in \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fleapoflegends.com\">Leap of Legends\u003C\u002Fa>\u003C\u002Fstrong> — a cross-platform multiplayer game in active development on Steam, Google Play (internal testing), TestFlight, and macOS. Every menu, HUD, lobby, and store screen in the game is built on this design system. \u003Ca href=\"https:\u002F\u002Fstore.steampowered.com\u002Fapp\u002F2269500\u002F\">Wishlist on Steam\u003C\u002Fa> — public mobile store pages coming soon.\n\u003C\u002Fblockquote>\n\n---\n\n## Live showcase\n\n[![UI Toolkit Design System — interactive web showcase. Hover or tap to inspect, toggle day\u002Fnight, click classes to copy.](docs\u002Fscreenshots\u002Fdesign_system_showcase.gif)](https:\u002F\u002Fsinanata.github.io\u002Funity-ui-document-design-system\u002F)\n\n**[Open the interactive web demo →](https:\u002F\u002Fsinanata.github.io\u002Funity-ui-document-design-system\u002F)** (click the gif, too)\n\nHover (desktop) or tap (mobile) any component to surface its **selector chain** — every parent class on the way down to the leaf, plus the leaf's class list ready to copy. Click the classes line to copy to clipboard. Toggle day \u002F night in the COLORS section header and the whole tree retheme over 240 ms via the var() cascade. Slim themed scrollbar throughout, mobile flip below 768 px.\n\nBuild the demo locally any time:\n\n```powershell\n.\\Tools\\Build\\Build-Showcase.ps1 -Serve\n```\n\nServes at `http:\u002F\u002Flocalhost:3000`. See [`Tools\u002FBuild\u002FREADME.md`](Tools\u002FBuild\u002FREADME.md) for the orchestrator — no cloud builds, no Unity license secret, entirely local.\n\nThe showcase covers 23 sections: colors, typography, buttons, icons, inputs, tabs & filters, animal card, animal detail, navigation, badges & labels, toggles & checks, sliders, progress, modals \u002F panels, toasts, empty states, bottom sheet, confirm dialog, quantity stepper, pagination, loading states, notification badge, avatar, scrollbars.\n\n---\n\n```\n.ds-btn ds-btn--primary       →  rounded green CTA, hover\u002Fpress\u002Fdisabled built in\n.ds-input    .ds-search       →  text fields with leading-icon slot + placeholder\n.ds-tab      .ds-tabs         →  segmented strip with .is-active state\n.ds-toggle   .ds-check        →  iOS-style switch + square checkbox (auto-knob via runtime)\n.ds-modal    .ds-toast        →  overlays with header \u002F body \u002F actions slots\n.ds-icon ds-icon--paw         →  60+ SVG icons, parent-state-driven tints\n.mobile .ds-…                 →  one-class layout flip for touch targets\n.theme-light                  →  add to .ds-root — every var(--color-*) re-paints, animated\n```\n\n## Why this exists\n\nUI Toolkit ships great primitives but no design language. Every project re-invents tokens, button hierarchy, input shells, mobile breakpoints, modal scaffolding, and an icon system — usually inconsistently across screens, usually as a side-project of the actual game\u002Fapp. This repo is that work, finished, kept evergreen by [a real shipping product](https:\u002F\u002Fleapoflegends.com).\n\nWhat you get on day one:\n\n- **A dark-themed token palette** — primary \u002F secondary \u002F tertiary \u002F warning \u002F danger \u002F surface stack, all referenced via `var(--color-...)`. Swap one token, the whole UI follows. The showcase ships a `.theme-light` override under `Assets\u002FShowcase\u002FResources\u002FShowcaseTheme.uss` so you can see the cascade animate to a light palette in real time.\n- **24 ready components** — buttons (5 variants × 4 states + icon + sizes), inputs (text \u002F textarea \u002F search \u002F dropdown), tabs, toggles, checkboxes, radios, sliders + range, progress, modals, dialogs, drawers, toasts, badges, chips, tags, navigation (side \u002F rail \u002F bottom), avatars, notification dots, pagination, steppers, empty states, skeleton loaders, spinners.\n- **63 SVG icons** — paw, shirt, hats, store, cart, plus arrows, chevrons, status glyphs, action icons. White-fill SVGs that tint via `-unity-background-image-tint-color` so the same artwork serves passive \u002F hover \u002F active \u002F muted states.\n- **One `.mobile` class** — add it to your screen root to flip every spacing token, tap target, and dropdown to touch-friendly sizes. Same UXML, same USS, two layouts.\n- **A runtime helper** — `DesignSystemRuntime.cs` auto-attaches to every `UIDocument` in a scene, injects toggle knobs (Unity's `Toggle` doesn't render the iOS-style sliding pill on its own), drives spinner rotation (USS transitions can't loop), and animates skeleton shimmer.\n- **Slim themed scrollbars** — 8 px-wide pill thumb in `var(--color-border-strong)` that brightens on hover, scoped to `.ds-root` so it doesn't leak into editor windows. Auto-themes with the rest of the system.\n\n## Requirements\n\n| Requirement | Notes |\n| --- | --- |\n| **Unity 6** (6000.x or newer) | Uses Unity 6 USS additions (`@import`, `background-size`, `-unity-background-image-tint-color`, parent-state cascades). Earlier versions partially work but components like the checkbox icon shrink rule rely on Unity 6 `background-size`. |\n| `com.unity.ui` (UI Toolkit) | Built-in module — already enabled by default in Unity 6. |\n| `com.unity.modules.vectorgraphics` | Built-in module in Unity 6 — already enabled by default. The standalone `com.unity.vectorgraphics` *package* is not required; Unity 6's engine ships the SVG ScriptedImporter (`fileID: 12408`) directly. The repo ships `.meta` files for every icon preset to `svgType: 3` (Texture) so they import correctly on first open. |\n\nNo other external dependencies. No NuGet, no asmdef requirements, no editor scripts.\n\n## Installation\n\nThe design system is a single folder you drop into your project's `Assets\u002F`:\n\n```\nyour-unity-project\u002F\n└── Assets\u002F\n    └── DesignSystem\u002F                  ← drop the whole folder\n        ├── Resources\u002F\n        │   ├── UI\u002FStyles\u002FDesignSystem\u002F    ← USS + UXML showcase\n        │   └── Textures\u002FIcons\u002F            ← 63 SVG icons\n        └── Runtime\u002F\n            └── DesignSystemRuntime.cs\n```\n\n**Option A — copy files:**\n\n```powershell\n# From your Unity project root, on Windows or macOS:\ngit clone https:\u002F\u002Fgithub.com\u002Fsinanata\u002Funity-ui-document-design-system ..\u002Fdesign-system-src\ncp -r ..\u002Fdesign-system-src\u002FAssets\u002FDesignSystem Assets\u002FDesignSystem\n```\n\n**Option B — git submodule:**\n\n```bash\ncd your-unity-project\ngit submodule add https:\u002F\u002Fgithub.com\u002Fsinanata\u002Funity-ui-document-design-system Assets\u002FDesignSystem-src\n# Symlink or copy Assets\u002FDesignSystem-src\u002FAssets\u002FDesignSystem → Assets\u002FDesignSystem\n```\n\nAfter Unity reimports, every screen with a UIDocument can opt into the system by attaching the master stylesheet:\n\n```xml\n\u003Cui:UXML xmlns:ui=\"UnityEngine.UIElements\">\n  \u003CStyle src=\"project:\u002F\u002Fdatabase\u002FAssets\u002FDesignSystem\u002FResources\u002FUI\u002FStyles\u002FDesignSystem\u002FDesignSystem.uss\" \u002F>\n\n  \u003Cui:VisualElement class=\"ds-root\">\n    \u003Cui:Button text=\"Get started\" class=\"ds-btn ds-btn--primary\" \u002F>\n  \u003C\u002Fui:VisualElement>\n\u003C\u002Fui:UXML>\n```\n\nThat's it. The runtime auto-attaches to every UIDocument; no per-screen wiring needed.\n\n## Quick start\n\n```xml\n\u003C!-- A login form, fully styled, no inline CSS -->\n\u003Cui:VisualElement class=\"ds-root\" style=\"padding: 24px;\">\n\n  \u003Cui:Label text=\"Sign in\" class=\"ds-h2\" style=\"margin-bottom: 16px;\" \u002F>\n\n  \u003Cui:VisualElement class=\"ds-search\" style=\"margin-bottom: 8px;\">\n    \u003Cui:VisualElement class=\"ds-icon ds-icon--sm ds-icon--user ds-search__icon\" \u002F>\n    \u003Cui:TextField class=\"ds-search__field\" \u002F>\n  \u003C\u002Fui:VisualElement>\n\n  \u003Cui:TextField class=\"ds-input\" style=\"margin-bottom: 16px;\" password=\"true\" \u002F>\n\n  \u003Cui:VisualElement class=\"ds-row\" style=\"justify-content: space-between; margin-bottom: 16px;\">\n    \u003Cui:Toggle class=\"ds-check\" \u002F>\n    \u003Cui:Label text=\"Remember me\" class=\"ds-body-1\" \u002F>\n  \u003C\u002Fui:VisualElement>\n\n  \u003Cui:Button text=\"Sign in\" class=\"ds-btn ds-btn--primary ds-btn--block\" \u002F>\n\n\u003C\u002Fui:VisualElement>\n```\n\nSet `searchField.textEdition.placeholder = \"Username\"` from C# and you have a complete, themed, mobile-ready form in 12 lines of UXML.\n\n## Mobile\n\nAdd the `.mobile` class to your screen root and the entire stylesheet flips:\n\n```csharp\nif (Screen.width \u003C 768)              \u002F\u002F or your own platform check\n    root.AddToClassList(\"mobile\");\n```\n\n- Buttons grow from 36 px to 48 px (touch target minimum).\n- Inputs grow to 48 px height with 15 px font.\n- Tabs spread to 48 px tall.\n- Sliders \u002F range thumbs grow 18 px → 24 px with recomputed centering.\n- Modals widen, side rails compact, bottom-nav bar takes over from side-nav.\n\nAll in `Mobile.uss` — one file, ~350 lines, parallel-class structure to the desktop tokens. Full pattern in [docs\u002FMOBILE.md](docs\u002FMOBILE.md).\n\n## Icons\n\n63 white-fill SVGs under `Resources\u002FTextures\u002FIcons\u002F`. Each has a class in `Icons.uss`:\n\n```xml\n\u003C!-- Default tint = text-secondary -->\n\u003Cui:VisualElement class=\"ds-icon ds-icon--paw\" \u002F>\n\n\u003C!-- Tint variant -->\n\u003Cui:VisualElement class=\"ds-icon ds-icon--lg ds-icon--accent\" \u002F>\n\n\u003C!-- Inside a button — tint follows the button's hover\u002Factive state -->\n\u003Cui:Button class=\"ds-btn ds-btn--icon\">\n  \u003Cui:VisualElement class=\"ds-icon ds-icon--search\" \u002F>\n\u003C\u002Fui:Button>\n```\n\nAdding a new icon: drop the SVG into `Resources\u002FTextures\u002FIcons\u002F`, set `svgType: 3` (Texture) in the importer, add one line to `Icons.uss`. SVGs ship as `fill=\"white\"` so the design system's tint cascade can multiply onto any colour. Black-fill SVGs render black regardless of tint — see [docs\u002FICONS.md](docs\u002FICONS.md) for why and how.\n\n## Architecture\n\n```\nAssets\u002F\n├── DesignSystem\u002F                       ← the drop-in design system\n│   ├── Resources\u002FUI\u002FStyles\u002FDesignSystem\u002F\n│   │   ├── DesignSystem.uss            ← master, @imports the rest in order\n│   │   ├── DesignTokens.uss            ← :root variables (colors, radii, spacing, motion)\n│   │   ├── Typography.uss              ← .ds-h1 \u002F .ds-h2 \u002F .ds-h3 \u002F .ds-body-1 \u002F .ds-caption\n│   │   ├── Icons.uss                   ← .ds-icon + 63 .ds-icon--\u003Cname> + state cascade\n│   │   ├── Buttons.uss                 ← .ds-btn + variants + sizes + icon button\n│   │   ├── Inputs.uss                  ← .ds-input \u002F .ds-search \u002F .ds-dropdown \u002F .ds-textarea\n│   │   ├── TabsAndFilters.uss          ← .ds-tabs \u002F .ds-tab \u002F .ds-view-toggle\n│   │   ├── Cards.uss                   ← animal card, info row\n│   │   ├── Navigation.uss              ← .ds-side-nav \u002F .ds-side-rail \u002F .ds-bottom-nav \u002F profile\n│   │   ├── Badges.uss                  ← .ds-badge \u002F .ds-tag \u002F .ds-chip \u002F .ds-avatar \u002F notif dot\n│   │   ├── Controls.uss                ← .ds-toggle \u002F .ds-check \u002F .ds-radio \u002F .ds-slider \u002F .ds-range \u002F scrollbars\n│   │   ├── Overlays.uss                ← .ds-modal \u002F .ds-dialog \u002F .ds-toast \u002F .ds-sheet \u002F empty\n│   │   ├── Feedback.uss                ← .ds-progress \u002F .ds-spinner \u002F .ds-skeleton \u002F .ds-pagination\n│   │   ├── Mobile.uss                  ← every .mobile-prefixed responsive override (loaded LAST)\n│   │   └── DesignSystemShowcase.uxml   ← living style guide\n│   └── Runtime\u002FDesignSystemRuntime.cs  ← auto-attaches to every UIDocument\n│\n├── Showcase\u002F                           ← showcase host project (only if cloning the repo)\n│   ├── Showcase.unity                  ← minimal scene; bootstrap creates UIDocuments at runtime\n│   ├── Resources\u002F\n│   │   ├── ShowcaseTheme.uss           ← .theme-light override + universal opacity transition\n│   │   ├── UnityDefaultRuntimeTheme.tss\n│   │   └── sinanata.jpg                ← avatar texture (Showcase only)\n│   └── Runtime\u002F\n│       ├── ShowcaseBootstrap.cs        ← spawns docs, wires toggle, promo links\n│       └── ShowcaseDocOverlay.cs       ← selector-chain hover overlay\n│\n├── Editor\u002FBuildCli.cs                  ← Unity batchmode entry for WebGL builds\n└── WebGLTemplates\u002FShowcaseTemplate\u002F    ← custom WebGL template (mobile-friendly)\n\nTools\u002FBuild\u002F\n├── Build-Showcase.ps1                  ← Windows orchestrator (-Serve \u002F -Deploy)\n├── Deploy-GhPages.ps1                  ← single-commit force-push via git worktree\n├── config.example.json                 ← copy to config.local.json (gitignored)\n└── README.md                           ← orchestrator docs\n```\n\nImport order is load-bearing — Inputs.uss specialises selectors that Icons.uss generalises; Mobile.uss intentionally loads last so its specificity always wins. Don't reorder unless you read the comments first.\n\nThe `Assets\u002FShowcase\u002F`, `Assets\u002FEditor\u002F`, `Assets\u002FWebGLTemplates\u002F`, and `Tools\u002FBuild\u002F` folders are the **host project** that runs the live demo. They're not part of the drop-in design system — if you copy `Assets\u002FDesignSystem\u002F` into your own project, leave them behind. Use them when you clone this repo to iterate on the design system itself.\n\nFull architectural reasoning in [docs\u002FARCHITECTURE.md](docs\u002FARCHITECTURE.md). Build pipeline docs in [Tools\u002FBuild\u002FREADME.md](Tools\u002FBuild\u002FREADME.md).\n\n## Components reference\n\nOne-line summary per component lives in [docs\u002FCOMPONENTS.md](docs\u002FCOMPONENTS.md). The showcase UXML is the second source of truth — every class appears there with its expected DOM structure.\n\n## What makes this robust\n\n- **Tokens, not hex.** Every colour, radius, spacing, motion timing references a `var(--…)` variable. Theme by editing one file (`DesignTokens.uss`).\n- **Parent-state cascades for icons.** A `.ds-icon` inside `.ds-btn:hover` retints automatically — you don't write per-component `:hover .icon` rules.\n- **Per-axis radius tokens.** Unity 6 USS clamps `border-radius` per axis to half the element's side. We ship `--radius-pill-9 \u002F -16 \u002F -20 \u002F -28 \u002F -36` so a circle stays a circle and a pill stays a pill regardless of element height.\n- **Auto-knob injection.** Unity's `Toggle` doesn't render the sliding pill on its own. `DesignSystemRuntime` injects a `.ds-toggle__knob` child every 250 ms — covers UXML-authored screens AND C#-cloned templates.\n- **No `Resources.Load\u003CTexture2D>` in C#.** Icons resolve via USS `resource(...)` so they survive Sprite-vs-Texture import differences. The runtime never touches a backgroundImage.\n- **MinMaxSlider thumbs cross-centred via `top: 50% + margin-top: -\u003Chalf>px`** — Unity's stock slider positions thumbs at `top: 0` which floats them above the track. Same trick for the single slider.\n- **Checkbox tick shrunk via `background-size: 12px 12px`** — the `check.svg` viewBox runs path-edge to viewBox-edge; default `stretch-to-fill` made the tick overflow the box's 2 px border. Constraining the rendered size leaves a clean inner margin.\n- **Day \u002F night theme via single class.** Adding `.theme-light` to `.ds-root` redefines every colour token under that scope; the var() cascade re-paints the whole tree. A universal `transition-property` in `ShowcaseTheme.uss` animates the swap over 240 ms. Same pattern works for any custom theme — just author the token block.\n- **Progress-bar `min-height: 0` overrides.** Unity's stock `.unity-progress-bar` ships with `min-height: 21px`. `.ds-progress` resets it to 0 across container, background, and progress layers so an 8 px bar reserves exactly 8 px of vertical space (not the 21 px Unity defaults to).\n- **Spinner rotation is C#-driven, no USS transition.** `DesignSystemRuntime.StartSpinners` writes `style.rotate` every 16 ms. We deliberately omit `transition-property: rotate` from `.ds-spinner` — a transition would try to ease between consecutive per-frame writes and the spinner visibly jiggles instead of spinning.\n\nEvery \"why is this ugly?\" complaint we hit while shipping the game lives as a comment on the rule that fixed it. Read the USS files — half of them are documentation.\n\n## Contributing\n\nIssues and PRs welcome. The whole system is ~1700 lines of USS + 180 lines of C# — readable in an afternoon, hackable in a weekend.\n\nAreas where help is especially useful:\n\n- Light theme — the token structure supports it (just override `:root`); a polished `LightTokens.uss` is on the roadmap.\n- Localisation — RTL flips for nav-item icons \u002F chevrons \u002F arrow buttons, and a doc note on which classes need a mirror modifier.\n- Additional icons — particularly platform glyphs (Steam \u002F Apple \u002F Google), gameplay glyphs (D-pad, button prompts), and currency icons.\n- Editor scripts — a Unity menu item that toggles `.mobile` on the active UIDocument's root for live preview, like the showcase but for any screen.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for the naming convention, file-load order, and PR checklist.\n\n## Credits & support\n\nMade for **[Leap of Legends](https:\u002F\u002Fleapoflegends.com)** — a cross-platform physics-heavy multiplayer game in active development, targeting Steam, iOS, Android, and Mac. If this design system saved you time:\n\n- ⭐ Star the repo\n- 🎮 [Wishlist Leap of Legends on Steam](https:\u002F\u002Fstore.steampowered.com\u002Fapp\u002F2269500\u002F) — mobile store pages coming soon\n- 🐦 Shout out [@sinanata](https:\u002F\u002Fx.com\u002Fsinanata)\n\n## Licence\n\nMIT — see [LICENSE](LICENSE). Free for commercial use. No warranty.\n\nThe 63 SVG icons under `Resources\u002FTextures\u002FIcons\u002F` are released under the same MIT licence — use them in your own projects, ship them in commercial products, modify them freely.\n\n---\n\n**[Leap of Legends](https:\u002F\u002Fleapoflegends.com)** · physics · multiplayer · cross-platform · in development · the UI you see in every screenshot was built with this system.\n","该项目是一个为Unity 6 UI Toolkit设计的即插即用设计系统，支持UIDocument、UXML和USS。它提供了包括令牌、组件、图标、移动端响应以及运行时辅助工具等一系列功能，所有元素均采用暗色主题，并且支持键盘和触摸操作，同时可以通过单一样式表进行编辑。该设计系统适用于需要快速构建统一风格UI界面的Unity游戏或应用开发场景，特别适合追求高效开发流程及跨平台一致性的项目。",2,"2026-06-11 02:31:01","CREATED_QUERY"]