Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244import { vars } from '@luke-ui/react/theme';import { visuallyHiddenStyle } from '@luke-ui/react/visually-hidden';import { globalStyle, style } from '@vanilla-extract/css';
// Styles for the docs reference tables. Everything not// expressed through `Box`, `Text`, `Stack`, or `Cluster` props lives here, and each rule names the// design system capability that is missing. These rules sit in the docs `components` layer, which// ranks above Luke UI's layers, so they also win over any Box prop.
/** * Named container, so the narrow layout follows the table's own column instead of the viewport. * It sits below `:root`, so it is named: the shell's unnamed queries keep resolving against the * root (see `lib/docs-container-queries.ts`). */const TABLE_CONTAINER = 'reference-table';/** Below this inline size the columns stack, as React Aria's API tables do below `sm`. */export const NARROW = `${TABLE_CONTAINER} (inline-size < 30rem)`;
// DS gap: Box has no containerType or containerName prop, and its responsive props resolve against// the root container, not a component's own width.export const frame = style({ '@layer': { components: { containerName: TABLE_CONTAINER, containerType: 'inline-size', }, },});
// DS gap: Box has no tableLayout, borderCollapse, or borderSpacing prop. Separate borders keep the// radius, and fixed columns keep Name, Type, and Default aligned when a group expands. The stacked// layout does not use columns, so it goes back to automatic.// DS gap: Box has no typography prop, so inline `Text` in a cell sits on the page's line box, not// the label style's. The table sets the label metrics for the cell's own line box.export const table = style({ '@layer': { components: { borderCollapse: 'separate', borderSpacing: 0, fontSize: vars.font.label.fontSize, lineHeight: vars.font.label.lineHeight, tableLayout: 'fixed', '@container': { [NARROW]: { tableLayout: 'auto', }, }, }, },});
// DS gap: Box has no verticalAlign prop. Table cells inherit it from their row group.export const bodyGroup = style({ '@layer': { components: { verticalAlign: 'top', }, },});
// DS gap: Box has no textAlign or container-query display.export const cell = style({ '@layer': { components: { textAlign: 'start', '@container': { [NARROW]: { display: 'block', }, }, }, },});
// DS gap: Box has no per-side border props. A ruled cell draws the row separator; the last row of// the last body never has a rule. In the stacked layout only the last visible cell of a prop keeps// the rule (see `rowEnd`).export const ruled = style({ '@layer': { components: { borderBlockEnd: `1px solid ${vars.color.border.decorative}`, selectors: { 'tbody:last-child > tr:last-child > &': { borderBlockEnd: 'none', }, }, '@container': { [NARROW]: { borderBlockEnd: 'none', }, }, }, },});
// DS gap: marks the last cell the narrow layout shows, so the stacked prop keeps one rule and end// padding under it.export const rowEnd = style({});
globalStyle(`${ruled}${rowEnd}`, { '@layer': { components: { '@container': { [NARROW]: { borderBlockEnd: `1px solid ${vars.color.border.decorative}`, }, }, }, },});
globalStyle(`tbody:last-child > tr:last-child > ${ruled}${rowEnd}`, { '@layer': { components: { '@container': { [NARROW]: { borderBlockEnd: 'none', }, }, }, },});
// DS gap: Box padding cannot change with a container query or a position in the row. Stacked cells// sit space.4 apart, with space.16 above the name and after the last line of a stacked row. A cell with a// description below it is not the end of its row, and the description cell is not its start.export const stackedCell = style({ '@layer': { components: { '@container': { [NARROW]: { paddingBlockEnd: 0, paddingBlockStart: vars.space['4'], selectors: { '&:first-child:not([colspan])': { paddingBlockStart: vars.space['16'], }, }, }, }, }, },});
globalStyle(`${stackedCell}${ruled}${rowEnd}`, { '@layer': { components: { '@container': { [NARROW]: { paddingBlockEnd: vars.space['16'], }, }, }, },});
// DS gap: Box has no container-query display. Columns and empty default cells have no place in the// stacked layout. This follows `cell` so `display: none` wins over `display: block`.export const hideNarrow = style({ '@layer': { components: { '@container': { [NARROW]: { display: 'none', }, }, }, },});
// DS gap: same as `hideNarrow`, but keeps the header in the accessibility tree so columnheader// associations survive the stacked layout. `display: none` would remove them.export const visuallyHiddenNarrow = style({ '@layer': { components: { '@container': { [NARROW]: { ...visuallyHiddenStyle, }, }, }, },});
// DS gap: Text has no font family prop, and `Code` always draws a chip. Prop names, types, and// defaults want the code font without one.// DS gap: Box has no overflowWrap prop or container-query props. In the stacked layout a long// unbreakable type would stretch the table past its frame, so it may break anywhere. `anywhere`// (not `break-word`) must win on descendants too: Luke `Text`/`Code`/`Button` set `break-word`,// which ignores soft wraps when computing min-content, and `table-layout: auto` then widens the// table to that min-content.export const monospace = style({ '@layer': { components: { fontFamily: vars.font.family.code, '@container': { [NARROW]: { overflowWrap: 'anywhere', }, }, }, },});
globalStyle(`${monospace} *`, { '@layer': { components: { '@container': { [NARROW]: { overflowWrap: 'anywhere', }, }, }, },});
// DS gap: no primitive flattens nested code. Generator `typeDescription` and `default` nodes often// wrap Shiki or `Code` chips, which should read as plain monospace text in a cell.globalStyle(`${monospace} code`, { '@layer': { components: { backgroundColor: 'transparent', borderColor: 'transparent', borderRadius: 0, borderStyle: 'none', borderWidth: 0, fontSize: 'inherit', lineHeight: 'inherit', paddingBlock: 0, paddingInline: 0, }, },});
/** Caption metrics for the icon-gallery filter toolbar. */export const filterToolbarCaption = style({ '@layer': { components: { fontSize: vars.font.caption.fontSize, lineHeight: vars.font.caption.lineHeight, }, },});