ThemeTokens

Remarks

The whole argument for a utility system is here rather than in the generator: "accent is now teal" is one line of one file, and the editor's two hundred components follow. That is what makes this worth building instead of hand-writing CSS, and it applies more strongly to one monolithic application than it ever did to a website.

⚠ A token is a custom property in an @theme block, and that is Tailwind v4's model rather than a resemblance to it. Declaring --color-mint-500 does two things at once: it makes the variable available to hand-written CSS, and it tells the generator that bg-mint-500, text-mint-500 and border-mint-500 exist. There is no configuration file, which is the point — the thing that declares the token and the thing that uses it are the same language.

⚠ This replaces a vixen.ui.yaml reader, and the YAML is deleted rather than supported. The editor's copy of it declared no colours of its own: every entry was a var(--…) pointing at a property EditorTheme put on the root, which is @theme with an extra file in front of it. The two limitations that file carried in its own comments — a radius that could not be a var(), and an opacity modifier that dropped — were both the same bug: a token store that held parsed values where the theme held references. Under @theme a token is text in a stylesheet and the cascade resolves it, so the class of bug is gone rather than fixed.

⚠ Every namespace has a shipped default, and clearing one is how a project opts out. CreateDefault is Tailwind v4.3.3's own palette and scales, in oklch, so a game writing bg-blue-500 needs no theme file at all. A project's own @theme layers over it; --color-*: initial; empties the colour namespace before the project's own colours land, and --*: initial; empties every one.

Fields and properties (17)

• public const string DefaultKey

  The key a namespace uses for its unqualified form.

• public const float PixelsPerRem

  How many pixels one rem is worth when a token is resolved.

• public Dictionary<string, string> Colors

  Colours, keyed by their utility suffix — surface-1, blue-500.

• public Dictionary<string, string> Radius

  Corner radii, keyed by suffix, as the CSS length they stand for.

• public Dictionary<string, string> Shadow

  Shadows, as the box-shadow text they stand for, keyed by suffix.

• public Dictionary<string, string> InsetShadow

  Inner shadows, as the box-shadow text they stand for, keyed by suffix.

• public Dictionary<string, string> DropShadow

  Drop shadows, as the drop-shadow() arguments they stand for, keyed by suffix.

• public Dictionary<string, FontSizeToken> FontSize

  Font sizes, keyed by suffix.

• public Dictionary<string, float> FontWeight

  Font weights, keyed by suffix.

• public Dictionary<string, string> FontFamily

  Font stacks, keyed by suffix — sans, mono.

• public Dictionary<string, float> Screens

  Breakpoint widths in pixels, keyed by variant name.

• public Dictionary<string, float> Blur

  Blur radii in pixels, keyed by suffix — sm, 2xl.

• public Dictionary<string, float> Containers

  Container-query widths in pixels, keyed by variant name.

• public IReadOnlyDictionary<string, string> Variables

  Every custom property the theme declares, by full name, as it should be emitted.

• public float SpacingBase

  The spacing unit. p-4 is four of these.

• public DarkModeStrategy DarkMode

  How a dark theme is selected.

• public List<string> Diagnostics

  Everything that could not be read, and why.

Methods (6)

• public static ThemeTokens CreateDefault()

  The engine's shipped defaults: Tailwind v4.3.3's palette and scales, in oklch.

• public static ThemeTokens Parse(string css)

  Reads a project's @theme over the shipped defaults.

• public void Apply(string css)

  Layers one stylesheet's @theme blocks over what is already here.

• public static string Strip(string css)

  Removes every @theme block from a stylesheet.

• public string RootRuleFor(string css)

  The root rule declaring every theme variable a stylesheet references.

• public bool TryGetColor(string name, out string value)

  Looks a colour up.

Used by (18)

• ApplyAtInstallTestsVixen.Ui.Styling.Utilities.Tests
• ApplyExpanderVixen.Ui.Styling.Utilities
• ArbitraryPropertyTestsVixen.Ui.Styling.Utilities.Tests
• ParityLedgerVixen.Ui.Styling.Utilities.Tests
• ShadowedFamilyTestsVixen.Ui.Styling.Utilities.Tests
• ThemeAndScannerTestsVixen.Ui.Styling.Utilities.Tests
• TransitionUtilityTestsVixen.Ui.Styling.Utilities.Tests
• UiDocumentVixen.Ui
• UtilityConsumptionProbeVixen.Ui.Styling.Utilities.Tests
• UtilityFamiliesVixen.Ui.Styling.Utilities
• UtilityFamilyTestsVixen.Ui.Styling.Utilities.Tests
• UtilityFixtureVixen.Ui.Styling.Utilities.Tests
• UtilityGeneratorVixen.Ui.Styling.Utilities
• VariantCoverageTestsVixen.Ui.Styling.Utilities.Tests
• VariantsVixen.Ui.Styling.Utilities
• StyleGenRunnerVixen.StyleGen
• StylesheetTestsVixen.Editor.Ui.Tests
• UtilityFamilySupportTestsVixen.Editor.Ui.Tests