<% card = "rounded-lg border border-secondary bg-container p-3 space-y-2" meta = "text-xs text-secondary font-mono" light_ctx = "rounded p-3 bg-surface" dark_ctx = "rounded p-3 bg-gray-900" %>

Text & foregrounds

text-* utilities. Each example renders the literal class on a light and a dark surface so utilities meant for inverse contexts show their intended state.

<% utilities.each do |u| %>

Quick brown fox

Quick brown fox

<%= u[:name] %>

<%= u[:light_resolved] || u[:light_value] %>

<% if u[:dark_value] %>

dark: <%= u[:dark_resolved] || u[:dark_value] %>

<% end %>
<% end %>