Typography

TYPE_SIZES.each do |size|
  type_specimen(
    "The quick brown fox jumps over the lazy dog",
    token: "--nk-text-#{size}",
    style: "--gallery-type-size: var(--nk-text-#{size})"
  )
end

WEIGHTS.each do |weight|
  type_specimen(
    "Signals over ceremony",
    token: "--nk-font-weight-#{weight}",
    style: "--gallery-type-weight: var(--nk-font-weight-#{weight})"
  )
end

LEADINGS.each do |leading|
  type_specimen(
    "Lines set close read as one thought. Lines set open read as a list. The leading decides before the words do.",
    token: "--nk-leading-#{leading}",
    style: "--gallery-type-leading: var(--nk-leading-#{leading})"
  )
end

TITLE_ROLES.each do |role, job, consumers|
  figure(data: { gallery: "title-specimen", gallery_title_role: role }) do
    figcaption do
      strong { role.to_s.capitalize }
      code { "--nk-title-#{role}-size" }
    end
    p(data: { gallery: "title-specimen-text" }) { job }
    small { consumers }
  end
end

render NitroKit::Card.new(id: "gallery-typography-card") do |card|
  card.title("Quarterly invoices")
  card.body { plain "The card title above samples the surface role." }
end