<% card = "rounded-lg border border-secondary bg-container p-3 space-y-1.5" label = "text-xs font-medium text-primary" meta = "text-xs text-secondary font-mono" swatch = "h-12 w-full rounded-md border border-secondary" %>

Surfaces & backgrounds

bg-* utilities. Light/dark values shown when defined.

<% utilities.each do |u| %>

<%= u[:name] %>

<% if u[:compose] %>

@apply <%= u[:compose].join(" ") %>

<% else %>

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

<% if u[:dark_value] %>

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

<% end %> <% end %>
<% end %>