Page Styling (path: "/styling", title: "Design System & Styling") {
Container(fadeIn) {
Spacer()
Heading("Design System & Styling", h1)
Text("Token-based design system. Every component uses design tokens for colors, spacing, typography. Change the entire look with a config update.", muted)
Spacer()
Heading("Variant Modifiers", h2)
Text("Apply common styles with modifier keywords.")
Spacer(sm)
Card(outlined) {
Card.Header { Text("Size Modifiers", bold) }
Card.Body {
Row(gap: sm, align: center) {
Button("Small", primary, small)
Button("Medium", primary)
Button("Large", primary, large)
}
}
}
Spacer(sm)
Card(outlined) {
Card.Header { Text("Color Modifiers", bold) }
Card.Body {
Row(gap: sm) {
Button("Primary", primary)
Button("Secondary", secondary)
Button("Success", success)
Button("Danger", danger)
Button("Warning", warning)
Button("Info", info)
}
Spacer(sm)
Row(gap: sm) {
Badge("Primary", primary)
Badge("Success", success)
Badge("Danger", danger)
Badge("Warning", warning)
}
}
}
Spacer(sm)
Card(outlined) {
Card.Header { Text("Shape and Elevation", bold) }
Card.Body {
Row(gap: sm) {
Button("Default", primary)
Button("Rounded", primary, rounded)
Button("Full Width", primary, full)
}
Spacer()
Row(gap: md) {
Card { Card.Body { Text("Default") } }
Card(elevated) { Card.Body { Text("Elevated") } }
Card(outlined) { Card.Body { Text("Outlined") } }
}
}
}
Spacer(sm)
Card(outlined) {
Card.Header { Text("Text Modifiers", bold) }
Card.Body {
Text("Bold text.", bold)
Text("Italic text.", italic)
Text("Uppercase text.", uppercase)
Text("Muted text.", muted)
Text("Primary colored text.", primary)
Text("Small text.", small)
Text("Large text.", large)
}
}
Spacer()
Divider()
Spacer()
Heading("Design Tokens", h2)
Text("All styling is built on tokens — CSS custom properties. Override any token in your config.")
Spacer(sm)
Row(gap: md) {
Column(span: 6) {
Card(outlined) {
Card.Header { Text("Colors", bold) }
Card.Body {
Table {
Thead { Tcell("Token") Tcell("Value") }
Trow { Tcell("color-primary") Tcell("#3B82F6") }
Trow { Tcell("color-success") Tcell("#22C55E") }
Trow { Tcell("color-danger") Tcell("#EF4444") }
Trow { Tcell("color-warning") Tcell("#F59E0B") }
Trow { Tcell("color-text") Tcell("#0F172A") }
Trow { Tcell("color-border") Tcell("#E2E8F0") }
}
}
}
}
Column(span: 6) {
Card(outlined) {
Card.Header { Text("Spacing and Radius", bold) }
Card.Body {
Table {
Thead { Tcell("Token") Tcell("Value") }
Trow { Tcell("spacing-xs") Tcell("0.25rem") }
Trow { Tcell("spacing-sm") Tcell("0.5rem") }
Trow { Tcell("spacing-md") Tcell("1rem") }
Trow { Tcell("spacing-lg") Tcell("1.5rem") }
Trow { Tcell("radius-md") Tcell("0.5rem") }
Trow { Tcell("radius-full") Tcell("9999px") }
}
}
}
}
}
Spacer()
Divider()
Spacer()
Heading("Themes", h2)
Text("4 built-in themes. Set in webfluent.app.json. Each preview below shows the actual colors and style of that theme.")
Spacer(sm)
Grid(columns: 2, gap: md) {
Card {
Card.Body {
Row(gap: sm, align: center) {
Badge("default", primary)
Text("Default", bold)
}
Spacer(sm)
Text("Clean, modern light theme with blue primary.", muted, small)
Spacer(sm)
Row(gap: sm) {
Button("Primary", primary, small)
Button("Success", success, small)
Badge("Tag", info)
}
Spacer(sm)
Progress(value: 65, max: 100, primary)
Spacer(sm)
Code("\"theme\": \{ \"name\": \"default\" \}", block)
}
style {
background: "#ffffff"
border: "1px solid #E2E8F0"
border-radius: "0.75rem"
}
}
Card {
Card.Body {
Row(gap: sm, align: center) {
Badge("dark", secondary)
Text("Dark", bold)
}
Spacer(sm)
Text("Dark backgrounds with light text and vibrant accents.", small)
Spacer(sm)
Row(gap: sm) {
Button("Primary", primary, small)
Button("Danger", danger, small)
Badge("Live", success)
}
Spacer(sm)
Progress(value: 80, max: 100, info)
Spacer(sm)
Code("\"theme\": \{ \"name\": \"dark\" \}", block)
}
style {
background: "#0F172A"
color: "#E2E8F0"
border: "1px solid #334155"
border-radius: "0.75rem"
}
}
Card {
Card.Body {
Row(gap: sm, align: center) {
Badge("minimal")
Text("Minimal", bold)
}
Spacer(sm)
Text("Black and white. No shadows, no border-radius. Pure content.", small)
Spacer(sm)
Row(gap: sm) {
Button("Action", small)
Badge("Note")
}
Spacer(sm)
Progress(value: 50, max: 100)
Spacer(sm)
Code("\"theme\": \{ \"name\": \"minimal\" \}", block)
}
style {
background: "#ffffff"
border: "2px solid #000000"
border-radius: "0"
}
}
Card {
Card.Body {
Row(gap: sm, align: center) {
Badge("brutalist", danger)
Text("Brutalist", bold)
}
Spacer(sm)
Text("Monospace font, bold red primary, hard offset shadows.", small)
Spacer(sm)
Row(gap: sm) {
Button("Action", danger, small)
Badge("Alert", danger)
}
Spacer(sm)
Progress(value: 90, max: 100, danger)
Spacer(sm)
Code("\"theme\": \{ \"name\": \"brutalist\" \}", block)
}
style {
background: "#ffffff"
border: "3px solid #000000"
border-radius: "0"
box-shadow: "4px 4px 0 #000000"
font-family: "monospace"
}
}
}
Spacer()
Divider()
Spacer()
Heading("Custom Tokens", h2)
Text("Override any design token in your config to customize the theme.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("\{\n \"theme\": \{\n \"name\": \"default\",\n \"tokens\": \{\n \"color-primary\": \"#8B5CF6\",\n \"color-secondary\": \"#EC4899\",\n \"font-family\": \"Poppins, sans-serif\",\n \"radius-md\": \"1rem\"\n \}\n \}\n\}", block)
}
}
Spacer()
Divider()
Spacer()
Heading("Style Blocks", h2)
Text("Override styles on any component with inline style blocks.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("Button(\"Custom\") \{\n style \{\n background: \"#8B5CF6\"\n padding: xl\n radius: lg\n \}\n\}", block)
}
}
Spacer(xl)
}
}