Fuaran.UI.Design 0.95.0

Prefix Reserved
dotnet add package Fuaran.UI.Design --version 0.95.0
                    
NuGet\Install-Package Fuaran.UI.Design -Version 0.95.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Fuaran.UI.Design" Version="0.95.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Fuaran.UI.Design" Version="0.95.0" />
                    
Directory.Packages.props
<PackageReference Include="Fuaran.UI.Design" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Fuaran.UI.Design --version 0.95.0
                    
#r "nuget: Fuaran.UI.Design, 0.95.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Fuaran.UI.Design@0.95.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Fuaran.UI.Design&version=0.95.0
                    
Install as a Cake Addin
#tool nuget:?package=Fuaran.UI.Design&version=0.95.0
                    
Install as a Cake Tool

Fuaran.UI.Design

Fuaran UI described as a design system. One call renders the language's own parts into a directory of preview cards a design-system tool can ingest, beside the theme as a DTCG manifest:

  • a Components card per kind the IDL declares, swept over the tone, weight and emphasis axes one axis at a time, each with a note on what the kind is for, which fields bind to data and which hold children;
  • a Fragments card per certified stdlib fragment (Fuaran.UI.Fragments), with its holes named and an applied example;
  • one Type, one Spacing and one Colors card from the chosen Theme.

Colours are offered as roles (the seven tones and the theme manifest's named roles), never as literal values. A design composed from the bundle is a composition of parts a Fuaran UI tree can express.

open Fuaran.UI
open Fuaran.UI.Design

let bundle = Bundle.build Defaults.theme None (Bundle.BundleOptions.defaults ())

match Bundle.check bundle with
| [] ->
    Bundle.write bundle "./design-system"
    printfn "%s" bundle.ContentHash
| findings -> findings |> List.iter (printfn "%s")

The same from the command line, through the fuaran dotnet tool (Fuaran.UI.Cli):

fuaran design-system export --theme default --out ./design-system
fuaran design-system export --theme theme.manifest.json --brand brand.css --out ./design-system

The bundle

manifest.json          file list with hashes, cards by group, colour roles, content hash, IDL version
theme.tokens.json      the theme as a DTCG manifest (Fuaran.UI.ThemeManifest)
fuaran-reference.css   the canonical class stylesheet every card links
README.md              an authoring note per group
cards/type/type.html
cards/colors/colors.html
cards/spacing/spacing.html
cards/components/<Kind>.html
cards/fragments/<fragment>.html

Every card's first line is ``, the group one of Type, Colors, Spacing, Components or Fragments. The rest is a self-contained HTML document rendered by Fuaran.UI.Renderer.Server, with the theme's :root variable block inlined.

The content hash is SHA-256 over the sorted file set (every file except manifest.json), so two exports of one theme with one brand print the same hash.

The checks

Bundle.check returns the bundle's contract violations, empty when it holds:

  • every kind in the IDL has a Components card (the kind set is read from the IDL, so a kind admitted there with no specimen is a finding, not a stale bundle);
  • every stdlib fragment has a Fragments card;
  • there is exactly one Type, Colors and Spacing card;
  • no Colors token is a literal colour (a hex value, a colour function or a CSS colour name);
  • every card's first line is the marker of its group.

See docs/DESIGN-SYSTEM-EXPORT.md for the card contract and how a consumer reads the bundle.

.NET only: it renders through the server renderer. Apache-2.0 licensed.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.95.0 0 10/17/2026