Uploaded August 2026 | Updated September 2026, 3 weeks ago
Everything you're about to see is broken. On purpose.
After weeks of hand-coding the new Avalonia theme engine, we hit the wall every
theming system eventually hits: the old controls don't follow the new rules. So
this episode isn't a clean build — it's the demolition. We rip through the theme,
enforce the one rule that matters (TemplateBinding inside every Control Template,
no exceptions), and watch buttons, spinners, and the calendar control fall apart
in real time. This is what it actually looks like before it gets better.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• Why breaking a working system on purpose is sometimes the only path forward
• The one rule you must never break inside a Control Template — and why a plain
Binding instead of TemplateBinding silently blocks every style override forever
• The "horror state" bug: a background stuck red permanently because of a single
wrong binding — and how to spot it before it costs you a day
• What happens when you enforce strict rules retroactively across an entire theme
— the padding issues, the ugly hover states, the fallout
• Why the Calendar control is the worst offender in Avalonia's control set — hard
baked defaults that fight you at every turn
• The real decision point: fix it control-by-control, or rip it out entirely
• Why "very broken" is a normal, necessary stage of a real refactor — not a failure
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
0:00 – We've already broken a lot of stuff
1:46 – Where the themes stand right now: very broke
2:48 – The rule: only TemplateBinding inside a Control Template
3:10 – The horror state — stuck red forever
4:35 – Why this makes styling nearly impossible without the rule
5:16 – This turned into a bigger task than expected
5:45 – Nasty hover effects on the Button Spinner
5:58 – The Calendar: not standard, not baked to follow anything
7:05 – Contemplating ripping the Calendar out entirely
8:19 – Current state: obviously very broken (and that's the point)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Ep 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Ep 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Ep 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Ep 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Ep 5 – Checkbox Deep Dive: youtube.com/watch?v=uIimnwjITT0
▶ Ep 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Ep 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Ep 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Ep 9 – Surgical Legacy Code Removal: youtube.com/watch?v=5-p_fnOi0As
▶ Ep 10 – One Token System: youtube.com/watch?v=JEcD1XXIiA8
▶ Ep 11 – Styles Not Working? Breaking the Rule: youtube.com/watch?v=OhJN8Ssp2hA
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
Everything you're about to see is broken. On purpose.
After weeks of hand-coding the new Avalonia theme engine, we hit the wall every
theming system eventually hits: the old controls don't follow the new rules. So
this episode isn't a clean build — it's the demolition. We rip through the theme,
enforce the one rule that matters (TemplateBinding inside every Control Template,
no exceptions), and watch buttons, spinners, and the calendar control fall apart
in real time. This is what it actually looks like before it gets better.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• Why breaking a working system on purpose is sometimes the only path forward
• The one rule you must never break inside a Control Template — and why a plain
Binding instead of TemplateBinding silently blocks every style override forever
• The "horror state" bug: a background stuck red permanently because of a single
wrong binding — and how to spot it before it costs you a day
• What happens when you enforce strict rules retroactively across an entire theme
— the padding issues, the ugly hover states, the fallout
• Why the Calendar control is the worst offender in Avalonia's control set — hard
baked defaults that fight you at every turn
• The real decision point: fix it control-by-control, or rip it out entirely
• Why "very broken" is a normal, necessary stage of a real refactor — not a failure
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
0:00 – We've already broken a lot of stuff
1:46 – Where the themes stand right now: very broke
2:48 – The rule: only TemplateBinding inside a Control Template
3:10 – The horror state — stuck red forever
4:35 – Why this makes styling nearly impossible without the rule
5:16 – This turned into a bigger task than expected
5:45 – Nasty hover effects on the Button Spinner
5:58 – The Calendar: not standard, not baked to follow anything
7:05 – Contemplating ripping the Calendar out entirely
8:19 – Current state: obviously very broken (and that's the point)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Ep 1 – Setup: youtube.com/watch?v=rUKlQnjU0tc
▶ Ep 2 – Buttons: youtube.com/watch?v=oKjk6pyyARI
▶ Ep 3 – Button Spinner Anatomy: youtube.com/watch?v=WMaTbXkvm9g
▶ Ep 4 – Designing a Theme System: youtube.com/watch?v=I5halHoNfH0
▶ Ep 5 – Checkbox Deep Dive: youtube.com/watch?v=uIimnwjITT0
▶ Ep 6 – Checkbox Styling: youtube.com/watch?v=uv1bNrfCjtY
▶ Ep 7 – Theme Engine From Scratch: youtube.com/watch?v=NXz8hwITg5U
▶ Ep 8 – Design Token System: youtube.com/watch?v=QMVdxRZqaU8
▶ Ep 9 – Surgical Legacy Code Removal: youtube.com/watch?v=5-p_fnOi0As
▶ Ep 10 – One Token System: youtube.com/watch?v=JEcD1XXIiA8
▶ Ep 11 – Styles Not Working? Breaking the Rule: youtube.com/watch?v=OhJN8Ssp2hA
📺 Full Series Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: github.com/angelsix
🌐 AngelSix: angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding





![Building a Design Token System | Dev + AI
The theme engine is live — now it needs a proper foundation. In this episode I work through
the design of a complete design token system: the minimal, compact set of values that define
every visual property in a theme. Colours, spacing, radius, stroke, scaling — all architected
from first principles.
And yes, I used AI. Not to write the code — but as a collaborator in the design process.
The human makes every decision. The AI challenges, refines, and fills gaps. This is what
correct AI usage looks like: not vibe coding, not outsourcing — genuine engineering with a
powerful tool in your hands.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How the new source generator eliminates manual theme compilation — with full IntelliSense
• What a design token system actually is and why it matters for scalable UI theming
• Foundation tokens vs semantic tokens — and how the two layers interact
• Semantic colour naming: Surface, On-Surface, Accent, and why background/foreground falls short
• How a single BaseSize value scales every margin, padding, font and spacing proportionally
• Defining overlay layers for hover, pressed, and disabled states without hardcoding values
• How to use AI as a design collaborator — prompting, pushing back, and staying in control
• Why AI loses context over long sessions and how to manage it without losing your work
• The final locked design token plan — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & recap of the new theme engine
[0:40] – Installing the Angel6.ThemeEngine NuGet package
[1:19] – Defining a theme class with the [Theme] attribute
[1:49] – Injecting ThemeContext via dependency injection
[2:48] – Theme class properties in practice
[4:54] – Using theme: prefix in XAML with full IntelliSense
[6:10] – Source generator demo — instantaneous updates, no recompile
[7:55] – Why we need a design token system — entering AI collaboration
[9:28] – AI names it: design token system and confirms the concept
[11:56] – AIs first proposed architecture: colours, sizing, radius
[14:16] – Pushing back — more accent colours, base size scaling, real zoom
[17:20] – AIs revised plan: semantic colours, UI zoom, proportional scaling
[19:06] – AI creates the plan file using its planning skill
[22:10] – Brainstorming plan locked in the /plans folder
[25:06] – Closing questions: spacing levels, radius, overlays, accent derivation
[27:04] – AIs response — overlay layers, scale implementation, pastel accents
[30:00] – Further feedback: base size as derived properties, not render transform
[33:09] – Agreeing on scale implementation approach
[34:38] – Locking in the accent colour palette values
[36:27] – AI refines the plan with strong opinions acknowledged
[39:12] – Plan locked — ready for implementation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 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
📺 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 #uiux #desktopapp #softwaretutorial #coding Building a Design Token System | Dev + AI](https://i.ytimg.com/vi/QMVdxRZqaU8/mqdefault.jpg)




