maxamundsen/kjol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reverted text-xs override. text-ss replaces the text-xs override while tailwind's existing text-xs replaces our text-2xs.

Browse Source
This commit is contained in:
Deven Ramchandran
2026-07-17 12:19:20 -04:00
parent dda0e738d4
commit 4f0418ea6e
43 changed files with 159 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
go/jsruntime/uikit/AutoTable.tsx
View File

@@ -560,14 +560,14 @@ const HEADER_SORT_ICON_CLS: Record<AutoTableHeaderColor, string> = {
export const HEADER_PADDING_CLS: Record<AutoTableSize, string> = {
[AUTOTABLE_SIZE_DEFAULT]: "p-4 text-sm",
[AUTOTABLE_SIZE_COMPACT]: "py-1.5 px-2 text-sm",
[AUTOTABLE_SIZE_SUPERCOMPACT]: "py-1 px-2 text-xs",
[AUTOTABLE_SIZE_SUPERCOMPACT]: "py-1 px-2 text-ss",
};
// Body cell padding per table size — applied via [&_td]: on the tbody.
export const BODY_PADDING_CLS: Record<AutoTableSize, string> = {
[AUTOTABLE_SIZE_DEFAULT]: "text-sm [&_td]:p-4",
[AUTOTABLE_SIZE_COMPACT]: "text-sm [&_td]:py-1 [&_td]:px-2",
[AUTOTABLE_SIZE_SUPERCOMPACT]: "text-xs [&_td]:py-0.5 [&_td]:px-2",
[AUTOTABLE_SIZE_SUPERCOMPACT]: "text-ss [&_td]:py-0.5 [&_td]:px-2",
};
// Pagination padding per table size.
@@ -651,7 +651,7 @@ const FORMULA_PLACEHOLDER = `<span class="text-ink-faint">e.g. [Revenue] / SUM({
// Mobile: filters collapse behind a toggle; lg+ always shows the filter row inline.
const FILTERS_TOGGLE = "lg:hidden inline-flex w-full items-center justify-between gap-2 py-1 px-3 text-sm font-normal text-ink bg-surface-muted border border-line-strong rounded-default shadow-xs cursor-pointer hover:bg-surface-raised";
const FILTERS_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-semibold text-white bg-sky-700 rounded-full";
const FILTERS_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1.5 text-ss font-semibold text-white bg-sky-700 rounded-full";
const FILTERS_BODY_BASE = "grow flex flex-col gap-3 min-w-0 max-w-full items-stretch overflow-visible lg:items-end max-lg:[&>*]:w-full max-lg:[&>*]:min-w-0 max-lg:[&_.search-fields]:w-full max-lg:[&_.search-fields]:flex-col [&>.quick-date-tags]:w-full";
const FILTERS_BODY_INLINE = FILTERS_BODY_BASE
+ " lg:flex lg:flex-row lg:flex-wrap lg:items-end lg:gap-x-3.5 lg:gap-y-2.5"
@@ -668,14 +668,14 @@ export const SEARCH_FIELDS = "search-fields flex flex-col items-stretch gap-3 w-
export const SEARCH_FIELDS_SPACER = "search-fields-spacer hidden lg:block flex-1 min-w-4 basis-full lg:basis-auto lg:min-w-[1rem]";
/** Combobox / custom filter control wrapper — pair with FormCombobox fieldWidth="grow". */
export const AUTOTABLE_FILTER_FIELD = "flex flex-col gap-1 min-w-0 w-full overflow-visible [&>label]:text-xs [&>label]:font-medium [&>label]:text-ink [&_.relative]:w-full [&_.relative]:min-w-0 [&_.relative]:flex-none";
export const AUTOTABLE_FILTER_FIELD = "flex flex-col gap-1 min-w-0 w-full overflow-visible [&>label]:text-ss [&>label]:font-medium [&>label]:text-ink [&_.relative]:w-full [&_.relative]:min-w-0 [&_.relative]:flex-none";
/** Sales report toolbar wrappers (presets row 1, filters + export row 2). */
export const SALES_REPORT_TOOLBAR = "sales-report-toolbar flex flex-col gap-2.5 w-full min-w-0 lg:contents";
export const SALES_REPORT_PRESETS = "sales-report-toolbar__presets min-w-0 w-full [&_.quick-date-tags]:gap-1.5";
export const SALES_REPORT_FILTERS = "search-fields sales-report-toolbar__filters flex flex-col items-stretch gap-3 w-full overflow-visible lg:flex-row lg:flex-wrap lg:items-end lg:gap-x-3.5 lg:gap-y-2.5 lg:w-auto lg:min-w-0 min-w-0 pt-0.5 border-t border-line [&>*]:min-w-0 [&>*]:max-lg:w-full lg:[&>*]:w-auto lg:[&>*:not(.sales-report-filter-date):not(.sales-report-filter-ref)]:flex-[1_1_8rem] lg:[&>*:not(.sales-report-filter-date):not(.sales-report-filter-ref)]:max-w-[12rem] [&_.relative]:w-full [&_.relative]:min-w-0 [&_.relative]:flex-none";
export const AUTOTABLE_SEARCH_FIELD = "flex flex-col gap-1 min-w-0 w-full [&>label]:text-xs [&>label]:font-medium [&>label]:text-ink [&_.relative]:w-full [&_.relative]:min-w-0";
export const AUTOTABLE_SEARCH_FIELD = "flex flex-col gap-1 min-w-0 w-full [&>label]:text-ss [&>label]:font-medium [&>label]:text-ink [&_.relative]:w-full [&_.relative]:min-w-0";
export const AUTOTABLE_SEARCH_FIELD_WIDE = AUTOTABLE_SEARCH_FIELD + " lg:flex-[2_1_12rem] lg:max-w-[20rem]";
export const AUTOTABLE_SEARCH_FIELD_NARROW = AUTOTABLE_SEARCH_FIELD + " lg:flex-[0_1_auto] lg:max-w-[11rem] lg:min-w-[7rem]";
export const AUTOTABLE_DATE_SEARCH_FIELD = AUTOTABLE_SEARCH_FIELD + " lg:flex-[1_1_10rem] lg:max-w-none";
@@ -1831,8 +1831,8 @@ function FormulaField(props: FormulaFieldProps) {
</div>;
// -- Insert menus (Advanced mode), shown in a row above the formula input ----
const MENU_TRIGGER = "inline-flex items-center gap-1 px-2 py-1 text-xs rounded-default border border-line-strong bg-surface-muted hover:bg-surface-raised text-ink cursor-pointer leading-none";
const MENU_SEARCH = "w-full text-xs p-1 border border-line-strong rounded-default focus:outline-2 focus:outline-sky-500 focus:outline-offset-1";
const MENU_TRIGGER = "inline-flex items-center gap-1 px-2 py-1 text-ss rounded-default border border-line-strong bg-surface-muted hover:bg-surface-raised text-ink cursor-pointer leading-none";
const MENU_SEARCH = "w-full text-ss p-1 border border-line-strong rounded-default focus:outline-2 focus:outline-sky-500 focus:outline-offset-1";
const columnMenu = () => <Show when={operandOptions.length}>
<Popover placement="bottom-start" standalone={true} open={colMenuOpen()} onOpenChange={setColMenuOpen}>
@@ -1850,17 +1850,17 @@ function FormulaField(props: FormulaFieldProps) {
class="flex items-center rounded-default hover:bg-surface-raised"
onMouseEnter={() => highlight([o.value])} onMouseLeave={() => highlight(null)}>
<button type="button"
class="flex-1 min-w-0 text-left truncate px-2 py-1 font-mono text-xs text-sky-600 dark:text-sky-400 bg-transparent border-0 cursor-pointer"
class="flex-1 min-w-0 text-left truncate px-2 py-1 font-mono text-ss text-sky-600 dark:text-sky-400 bg-transparent border-0 cursor-pointer"
title={"Insert [" + o.label + "] — this row's cell"}
onclick={(_e: MouseEvent) => { insertRef("[" + o.label + "]"); setColMenuOpen(false); }}>[{o.label}]</button>
<button type="button"
class="px-2 py-1 text-xs font-mono text-violet-600 hover:text-violet-800 bg-transparent border-0 cursor-pointer"
class="px-2 py-1 text-ss font-mono text-violet-600 hover:text-violet-800 bg-transparent border-0 cursor-pointer"
title={"Insert {" + o.label + "} — whole column"}
onclick={(_e: MouseEvent) => { insertRef("{" + o.label + "}"); setColMenuOpen(false); }}>{"{ }"}</button>
</div>}
</For>
<Show when={filteredColumns().length === 0}>
<div class="px-2 py-3 text-xs text-ink-muted text-center">No columns match.</div>
<div class="px-2 py-3 text-ss text-ink-muted text-center">No columns match.</div>
</Show>
</div>
</PopoverContent>
@@ -1884,14 +1884,14 @@ function FormulaField(props: FormulaFieldProps) {
{(f: { name: string; sig: string; desc: string }) => <button type="button"
class="w-full text-left px-2 py-1 rounded-default hover:bg-surface-raised cursor-pointer border-0 bg-transparent flex flex-col gap-0.5"
onclick={(_e: MouseEvent) => { insertFunction(f.name); setFuncMenuOpen(false); }}>
<span class="font-mono text-xs text-ink" innerHTML={highlightFormula(f.sig)}></span>
<span class="font-mono text-ss text-ink" innerHTML={highlightFormula(f.sig)}></span>
<span class="text-[11px] text-ink-muted">{f.desc}</span>
</button>}
</For>
</div>}
</For>
<Show when={filteredFunctionGroups().length === 0}>
<div class="px-2 py-3 text-xs text-ink-muted text-center">No functions match.</div>
<div class="px-2 py-3 text-ss text-ink-muted text-center">No functions match.</div>
</Show>
</div>
</PopoverContent>
@@ -1911,12 +1911,12 @@ function FormulaField(props: FormulaFieldProps) {
{(c: { name: string; desc: string }) => <button type="button"
class="w-full text-left px-2 py-1 rounded-default hover:bg-surface-raised cursor-pointer border-0 bg-transparent flex items-center justify-between gap-2"
onclick={(_e: MouseEvent) => { insertRef(c.name); setConstMenuOpen(false); }}>
<span class="font-mono text-xs text-amber-600 dark:text-amber-400">{c.name}</span>
<span class="font-mono text-ss text-amber-600 dark:text-amber-400">{c.name}</span>
<span class="text-[11px] text-ink-muted">{c.desc}</span>
</button>}
</For>
<Show when={filteredConstants().length === 0}>
<div class="px-2 py-3 text-xs text-ink-muted text-center">No constants match.</div>
<div class="px-2 py-3 text-ss text-ink-muted text-center">No constants match.</div>
</Show>
</div>
</PopoverContent>
@@ -1948,7 +1948,7 @@ function FormulaField(props: FormulaFieldProps) {
<HoverPopoverTrigger class="inline-flex items-center text-ink-faint hover:text-ink-soft cursor-help bg-transparent border-0 p-0 leading-none">
<Icon icon="circle-info" size={14} />
</HoverPopoverTrigger>
<HoverPopoverContent class="p-3 w-80 text-xs text-ink-soft leading-relaxed flex flex-col gap-2">
<HoverPopoverContent class="p-3 w-80 text-ss text-ink-soft leading-relaxed flex flex-col gap-2">
<div>
<div class="font-medium text-ink mb-1">References</div>
<div class="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 items-center">
@@ -2098,7 +2098,7 @@ function CalculatedColumnForm(props: CalculatedColumnFormProps) {
onHighlight={highlight}
apiRef={(api: FormulaFieldApi) => { formulaApi = api; }} />
<Show when={formulaError()}>
<p class="text-xs text-red-600 dark:text-red-400 mt-1">{formulaError()}</p>
<p class="text-ss text-red-600 dark:text-red-400 mt-1">{formulaError()}</p>
</Show>
</div>
<div class="grid grid-cols-2 gap-2">
@@ -2130,11 +2130,11 @@ function CalculatedColumnForm(props: CalculatedColumnFormProps) {
</div>
</div>
<Show when={errorMsg()}>
<p class="text-xs text-red-600 dark:text-red-400">{errorMsg()}</p>
<p class="text-ss text-red-600 dark:text-red-400">{errorMsg()}</p>
</Show>
<div class="flex gap-2 items-center pt-1">
<Show when={!!column() && !!props.onRemove}>
<ButtonLinkRed onclick={(_e: MouseEvent) => handleRemove()}><span class="text-xs">Remove</span></ButtonLinkRed>
<ButtonLinkRed onclick={(_e: MouseEvent) => handleRemove()}><span class="text-ss">Remove</span></ButtonLinkRed>
</Show>
<div class="flex gap-2 items-center ml-auto">
<ButtonUI small={true} color={BUTTON_COLOR_LIGHT_NEUTRAL} onclick={(_e: MouseEvent) => close()}>Cancel</ButtonUI>
@@ -2235,7 +2235,7 @@ function SummaryRowForm(props: SummaryRowFormProps) {
onHighlight={highlight}
apiRef={(api: FormulaFieldApi) => { formulaApi = api; }} />
<Show when={formulaError()}>
<p class="text-xs text-red-600 dark:text-red-400 mt-1">{formulaError()}</p>
<p class="text-ss text-red-600 dark:text-red-400 mt-1">{formulaError()}</p>
</Show>
</div>
<div class="grid grid-cols-2 gap-2">
@@ -2257,11 +2257,11 @@ function SummaryRowForm(props: SummaryRowFormProps) {
</div>
</div>
<Show when={errorMsg()}>
<p class="text-xs text-red-600 dark:text-red-400">{errorMsg()}</p>
<p class="text-ss text-red-600 dark:text-red-400">{errorMsg()}</p>
</Show>
<div class="flex gap-2 items-center pt-1">
<Show when={!!row() && !!props.onRemove}>
<ButtonLinkRed onclick={(_e: MouseEvent) => handleRemove()}><span class="text-xs">Remove</span></ButtonLinkRed>
<ButtonLinkRed onclick={(_e: MouseEvent) => handleRemove()}><span class="text-ss">Remove</span></ButtonLinkRed>
</Show>
<div class="flex gap-2 items-center ml-auto">
<ButtonUI small={true} color={BUTTON_COLOR_LIGHT_NEUTRAL} onclick={(_e: MouseEvent) => close()}>Cancel</ButtonUI>
@@ -2303,7 +2303,7 @@ function AddCalcMenu(props: AddCalcMenuProps) {
<Icon icon="table-columns" size={16} class="mt-0.5 text-ink-muted" />
<span class="flex flex-col">
<span class="text-sm font-medium text-ink">Calculated column</span>
<span class="text-xs text-ink-muted">A new column computed for each row</span>
<span class="text-ss text-ink-muted">A new column computed for each row</span>
</span>
</button>
</Show>
@@ -2312,7 +2312,7 @@ function AddCalcMenu(props: AddCalcMenuProps) {
<Icon icon="list-ol" size={16} class="mt-0.5 text-ink-muted" />
<span class="flex flex-col">
<span class="text-sm font-medium text-ink">Summary row</span>
<span class="text-xs text-ink-muted">A total or aggregate shown in the footer</span>
<span class="text-ss text-ink-muted">A total or aggregate shown in the footer</span>
</span>
</button>
</Show>