Text

Typography helper

Type from tokens without writing CSS: pick a size, a weight, tracking, and the element it should be. The scale and what each step is for — 2xs captions and ©, xs labels and meta (bold, tracking="wider", uppercase), sm secondary text and dates, md body, lg titles, xl headings, headline the hanging page title, display the watermark. Weights: thin is the voice (100; 300 in dark), bold is the UI; light and normal in between.

as is the element and carries the meaning — h2, p, dt; size is only how it looks, so a size="xl" span is not a heading. Margins are stripped; space with a Stack or a gap. color="accent" renders accent-text, the darkened accent that passes as small text — for link-like text and chosen things, not for emphasis at rest; muted is a shortcut for color="muted".

Basic

xl thin — 冴えない彼女の育てかた

lg — TVアニメ公式サイト

md — body 本文テキスト

sm muted — 2019.09.25

xs bold wider upper — label

2xs caption — ©丸戸史明・深崎暮人

accent text — a chosen episode: 第12話

<script setup lang="ts">
import { BlessText } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessText as="p" size="xl" weight="thin">xl thin — 冴えない彼女の育てかた</BlessText>
    <BlessText as="p" size="lg">lg — TVアニメ公式サイト</BlessText>
    <BlessText as="p">md — body 本文テキスト</BlessText>
    <BlessText as="p" size="sm" muted>sm muted — 2019.09.25</BlessText>
    <BlessText as="p" size="xs" weight="bold" tracking="wider" uppercase
      >xs bold wider upper — label</BlessText
    >
    <BlessText as="p" size="2xs" muted>2xs caption — ©丸戸史明・深崎暮人</BlessText>
    <BlessText as="p" size="sm" color="accent">accent text — a chosen episode: 第12話</BlessText>
  </div>
</template>

Usage

import { BlessText } from "blessing-ui";

API

Props

Name	Type	Default	Description
as	string	"span"
size	"md" | "sm" | "xs" | "lg" | "xl" | "2xs" | "headline" | "display"	"md"
weight	"bold" | "normal" | "thin" | "light"	"normal"
tracking	"normal" | "tight" | "wide" | "wider"	"normal"
leading	"none" | "normal" | "tight"	"normal"
muted	boolean	—	shortcut for color="muted"
color	"text" | "accent" | "danger" | "muted"	—	accent renders --bless-color-accent-text: the accent darkened for 4.5:1 as text
uppercase	boolean	—

Slots

Name	Scope	Description
default	—