Typography

라이브러리의 타입 스케일 그 자체입니다. 지금까지 이 사다리는 그것이 필요했던 컴포넌트 안에만 있었습니다 — Card의 제목, TextField의 라벨.

import { Typography } from 'neba';

<Typography level="h2">잘라낸 아크릴 한 장</Typography>
<Typography>모든 표면은 같은 재료를, 다른 불투명도로 쓴 것입니다.</Typography>;

Props

Prop	타입	기본값	설명
level	'h1'…'h6' | 'lead' | 'body' | 'caption' | 'overline'	'body'	타입 스케일과 렌더링할 요소를 함께 정합니다. variant라고 부르지 않는 이유는 이 라이브러리에서 variant가 이미 표면의 무게를 뜻하기 때문입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	의미론적 색 역할. 다른 컴포넌트와 달리 기본값이 없습니다 — 지정하지 않으면 페이지의 글자색을 그대로 씁니다
weight	'regular' | 'medium' | 'semibold' | 'bold'	—	level이 정한 굵기를 덮어씁니다
align	'start' | 'center' | 'end' | 'justify'	—	텍스트 정렬
lines	number	—	이 줄 수로 자르고 말줄임표를 붙입니다. 1이면 한 줄 자르기
gutter	boolean	false	아래 여백을 붙입니다. 기본이 꺼짐인 이유는 여백을 스스로 만드는 컴포넌트는 레이아웃이 싸워야 할 대상이기 때문입니다
render	useRender.RenderProp	—	타입 스케일은 그대로 두고 요소만 바꿉니다. Base UI의 render prop 그대로
children	ReactNode	—	텍스트

의도적인 두 가지 예외

variant가 아니라 level입니다. 이 라이브러리에서 variant는 표면의 무게 — solid / outline / text — 를 뜻하고, 같은 단어에 두 번째 뜻을 붙이는 것이야말로 Prop 규약이 금지하는 일입니다.

color에는 기본값이 없습니다. 다른 모든 컴포넌트는 primary가 기본입니다. 여기서 그러면 본문 글자가 전부 파랗게 됩니다. 문단의 일반적인 경우는 주변 문단과 같아 보이는 것이므로, color를 지정하지 않으면 "페이지의 색을 물려받는다"는 뜻이 됩니다.

예시

스케일

body는 md 크기 Card의 본문 사다리 위에 있습니다. 카드 안의 문단과 바깥의 문단이 같은 글자인 이유입니다. 제목들은 거기서 위로 올라가고, 커질수록 행간 비율은 좁아집니다 — 30px 줄은 13px 줄과 같은 비율을 원하지 않습니다.

import { Typography } from 'neba';

const LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'lead', 'body', 'caption', 'overline'] as const;

export default function TypographyScale() {
  return (
    <div className="flex flex-col gap-3">
      {LEVELS.map((level) => (
        <div key={level} className="flex items-baseline gap-4">
          <code className="w-20 shrink-0 text-[0.6875rem] text-[var(--neba-muted-fg)]">
            {level}
          </code>
          <Typography level={level}>The quick brown fox</Typography>
        </div>
      ))}
    </div>
  );
}

색

import { Typography } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function TypographyColors() {
  return (
    <div className="flex flex-col gap-1.5">
      <Typography>No colour asked for — inherits the page.</Typography>
      {COLORS.map((color) => (
        <Typography key={color} color={color}>
          {color}
        </Typography>
      ))}
    </div>
  );
}

줄 자르기

한 줄이면 말줄임표가 붙는 자르기이고, 두 줄 이상이면 줄 수 제한입니다. 둘 다 lines입니다.

import { Typography } from 'neba';

const COPY =
  'A Neba surface is a sheet of cut acrylic, not a moulded plastic key. Press is instant and release is slow, elevation is opt-in, and no control ever moves under the cursor.';

export default function TypographyClamp() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=1</Typography>
        <Typography lines={1}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">lines=2</Typography>
        <Typography lines={2}>{COPY}</Typography>
      </div>
      <div className="flex flex-col gap-1">
        <Typography level="overline">no clamp</Typography>
        <Typography>{COPY}</Typography>
      </div>
    </div>
  );
}

요소는 두고 스케일만

level은 타입 스케일과 요소를 함께 정하고, 대부분은 그것이 맞습니다. 둘이 달라져야 할 때 — 문서 개요에 들어가면 안 되는 소제목, 또는 h3처럼 보여야 하는 <p> — 는 render가 결정합니다.

<Typography level="h3" render={<p />}>
  제목처럼 보이지만 제목은 아닙니다
</Typography>

기본적으로 여백이 없습니다

gutter는 꺼져 있습니다. 스스로 여백을 만드는 라이브러리 컴포넌트는 레이아웃이 싸워야 할 대상입니다. 이어지는 산문에는 켜고, 이미 간격을 관리하는 flex 열 안에서는 꺼 두세요.