--- title: One Token System for the Entire Avalonia Theme | Dev + AI description: Hundreds of random hardcoded values scattered across every control in the theme. Margins, thicknesses, font sizes — all over the place, inconsistent,... canonical: https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: One Token System for the Entire Avalonia Theme | Dev + AI | daily.dev og:description: Hundreds of random hardcoded values scattered across every control in the theme. Margins, thicknesses, font sizes — all over the place, inconsistent,... og:url: https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh og:image: https://api.daily.dev/og/posts/vjmqtbQxH.png og:image:alt: One Token System for the Entire Avalonia Theme | Dev + AI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # One Token System for the Entire Avalonia Theme | Dev + AI **[AngelSix](https://daily.dev/sources/angelsix)** · 37 min read · 0 upvotes · 0 comments ## Summary Hundreds of random hardcoded values scattered across every control in the theme. Margins, thicknesses, font sizes — all over the place, inconsistent, unmaintainable. In this episode we do the deduplication pass: collapsing everything down to a minimal, precise set of design tokens that defines the entire theme system. AI does the grunt work again — but the interesting part is what happens when it goes off-brief. Real-time corrections, naming convention debates, a new Scaled markup extension that solves proportional scaling for edge-case values, and a moment where the AI adds things I explicitly told it not to. This is what collaborative AI development actually looks like in practice. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📌 WHAT YOU'LL LEARN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • How to use AI to find and replace hundreds of scattered hardcoded values across a theme • Adding new token properties to the engine: font family, font sizes, control height, icon • What the Adorner Layer is and how to correctly map its thickness values to tokens • How to establish naming conventions for thickness and spacing tokens — with real examples • When NOT to add a value to the token set — the token bloat problem and how to avoid it • Styling AutoCompleteBox: placeholder text, border brushes, padding, drop-down height • The Scaled markup extension — what it is, why it's needed, and how to implement it right • How to handle negative margins using Edges + a negative multiplier • How to correct AI when it goes off-brief — real examples of steering it back in real-time • The ultimate goal: swap any compliant theme without a single line of application code ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⏱ TIMESTAMPS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ [0:00] – Introduction — new theme engine recap, goal of the deduplication pass [0:25] – Using AI to find and replace legacy dynamic resources [0:48] – New token properties added: font family, font sizes, control height, icon [1:04] – Button control reviewed — already clean, moving on [1:31] – What the Adorner Layer is and why it draws on its own visual layer [3:08] – Prompting AI to merge AdornerLayer thickness values into the theme engine [3:56] – Moving to AutoCompleteBox — placeholder, borders, padding [8:49] – AI's first response on AdornerLayer thickness mapping [11:08] – Decision: add dedicated thickness tokens to the engine [11:59] – AI identifies further inline resources across other controls [13:41] – Asking AI for thickness token naming conventions [13:52] – AI's full token proposal reviewed and critiqued [14:26] – The token bloat problem — when NOT to add a new token [18:11] – Policy decision: how to snap stray values to existing tokens [20:08] – AutoCompleteBox: border brush and accent brush tokens [21:45] – MaxDropDownHeight and margin replacement [23:27] – ⚠️ AI adds unwanted spacing values — correcting it in real-time [24:17] – Introducing the Scaled markup extension for proportional custom values [26:09] – Problem: Scaled extension hardcoded to ThemeContext — feedback given to AI [28:17] – Further AI instructions on the Scaled extension + remaining issues [32:59] – Bug fix discovered in Avalonia source code for AutoCompleteBox [33:42] – Negative margins fixed with Edges + negative multiplier [34:07] – Git diff review: AdornerLayer and AutoCompleteBox fully cleaned up [36:45] – The ultimate goal: seamless theme swapping without any application code changes [38:00] – Wrap up & next steps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔗 LINKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▶ Part 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc ▶ Part 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI ▶ Part 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g ▶ Part 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0 ▶ Part 5 – Checkbox Anatomy: https://www.youtube.com/watch?v=uIimnwjITT0 ▶ Part 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY ▶ Part 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U ▶ Part 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8 ▶ Part 9 – Stripping Legacy Code: https://www.youtube.com/watch?v=5-p_fnOi0As 📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO 💾 Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab 🌐 AngelSix: https://www.angelsix.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #avalonia #avaloniaui #xaml #csharp #dotnet #aiagent #aitools #softwaretutorial #coding ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- [View this post on daily.dev](https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"One Token System for the Entire Avalonia Theme | Dev + AI","url":"https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh"},"datePublished":"2026-10-04T13:04:32.791Z","dateModified":"2026-10-04T21:46:09.374Z","description":"Hundreds of random hardcoded values scattered across every control in the theme. Margins, \nthicknesses, font sizes — all over the place, inconsistent,...","image":"https://i.ytimg.com/vi/JEcD1XXIiA8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/JEcD1XXIiA8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AngelSix","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AngelSix","logo":"https://media.daily.dev/image/upload/s--h1ikmN_u--/f_auto,q_auto/v1791119063/logos/angelsix?_a=BAMAMicg0","url":"https://daily.dev/sources/angelsix"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/one-token-system-for-the-entire-avalonia-theme-dev-ai-vjmqtbqxh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"","timeRequired":"PT37M","video":{"@type":"VideoObject","name":"One Token System for the Entire Avalonia Theme | Dev + AI","description":"Hundreds of random hardcoded values scattered across every control in the theme. Margins, \nthicknesses, font sizes — all over the place, inconsistent,...","thumbnailUrl":"https://i.ytimg.com/vi/JEcD1XXIiA8/sddefault.jpg","uploadDate":"2026-10-04T13:04:32.791Z","duration":"PT37M","url":"https://api.daily.dev/r/vjmqtbQxH","embedUrl":"https://www.youtube.com/embed/JEcD1XXIiA8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AngelSix","item":"https://daily.dev/sources/angelsix"},{"@type":"ListItem","position":3,"name":"One Token System for the Entire Avalonia Theme | Dev + AI"}]} ```