Table

A card-style table housed inside a .table-card container for displaying row-based data. Use it for repeating row data such as edu session lists.

Default

.table-card is a card-style container (radius 12, overflow-x: auto). thead th uses a 12% primary tint background with 16/800 weight to emphasize columns; cells use 16px body text size. Row hover applies a subtle rgba(10,30,51,.02)highlight.

Week	Topic	Format	Status
1	Orientation	In-person	Done
2	Prompt Basics	In-person	Done
3	Practical Application 1	In-person + Online	In Progress
4	Practical Application 2	In-person	Upcoming

Matrix

A two-axis comparison grid (header row × label column) used inside edu docs prose. Authors write the 매트릭스:: directive above a markdown table and lib/docs.ts renders it as a .docsMatrix grid (styled in app/docs/docs.module.css). Header row, label column and corner share the normal-table th:first-child tint; the corner cell is left blank.

짧은 질문

파일 작업

긴 목표

프로젝트 없이 작업

문장 다듬기

부적합

플랜 모드

방향 확인

적합

매우 적합

Spec summary

No outer outline — only inner gridlines via gap: 1px over a --c-line-soft container.
Header row / label column / corner tint must be opaque: color-mix(in srgb, var(--c-ink-deep) 3%, var(--c-canvas)). Rendered: light rgb(248,248,249), dark rgb(17,29,41) — identical to the normal-table first column.
Header text --c-ink-deep(theme-adaptive), bold, left-aligned; data cells --c-canvas.
Corner (row 1 × col 1) is left blank — omit the 매트릭스:: axis label (it duplicates the section heading above).

DON'T

Do not use a transparent tint (… 3%, transparent). Matrix cells sit over the gridline container, so a translucent tint composites over --c-line-soft and renders darker than the same tint in a normal table (the declared value looks identical in dev-tools — easy to miss). Use the opaque … 3%, var(--c-canvas) mix.
Do not hard-code the header text color — keep it --c-ink-deep so dark mode flips it.

Rules

Guardrails to follow when using the table.

DO

Always wrap inside a .table-card container to get the card border and horizontal scroll.
Right-align numeric columns; left-align text columns.
Pair a Status Dot component with status columns to add a visual signal.
Write column headers (th) as short, clear nouns.

DON'T

Do not add thick borders between rows beyond the 1px divider.
Do not apply arbitrary colors to thead th. The tint must use only the token expression color-mix(in srgb, var(--c-primary) 12%, transparent).
Do not use heavy row-hover colors. Strong colors used to attract attention impair data readability.
Do not hard-code colors on the component in dark mode — token flipping handles it automatically.

Spec summary

Container: radius --r-md (12px), overflow-x: auto, border --c-line-soft
Header background: color-mix(in srgb, var(--c-primary) 12%, transparent)
Header text: 16px / 800 / --c-ink-deep
Cell text: 16px / 400 / --c-body
Row hover: rgba(10,30,51,.02) (light), rgba(255,255,255,.04) (dark)
Dark header background: color-mix(in srgb, var(--c-sky) 14%, transparent)