diff --git a/go/cmd/kjol-website/app/components.go b/go/cmd/kjol-website/app/components.go index 782d4cb0..52ab1c39 100644 --- a/go/cmd/kjol-website/app/components.go +++ b/go/cmd/kjol-website/app/components.go @@ -232,7 +232,7 @@ func badgesSection() func() *VNode { ui.EnvBadge("staging"), // Production deliberately renders NOTHING — the badge exists to tell you that // you are NOT in production, and a badge that is always there says nothing. - Span(Attr("class", "text-xs text-ink-muted"), + Span(Attr("class", "text-ss text-ink-muted"), Text("(production renders nothing — that is the point of it)")), ), ), @@ -473,7 +473,7 @@ func selectsSection() func() *VNode { field("Timezone", ui.FormTimezoneSelector(ui.FormSelectProps{ Value: tz.Get(), OnChange: func(v string) { tz.Set(v) }})), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("one="+orElse(one.Get(), "—")+" several="+orElse(strings.Join(langs.Get(), ","), "—"))), ), @@ -484,7 +484,7 @@ func selectsSection() func() *VNode { OnSelect: func(o ui.FormSelectOption) { picked.Set(o.Label + " <" + o.Value + ">") }, }), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Two characters before it asks; 200 ms after you stop typing. A response for a query "+ "you have already typed past is DISCARDED rather than shown — which is the whole bug "+ "with hand-rolled autocompletes.")), @@ -500,7 +500,7 @@ func selectsSection() func() *VNode { ShowSelectAll: true, OnChange: func(v []string) { tags.Set(v) }, }), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Same selection model as the field above; only the thing you click on differs.")), ), ) @@ -535,7 +535,7 @@ func togglesSection() func() *VNode { demo("Signature pad — "+itoa(len(signed.Get()))+" bytes of SVG", pad.Render(ui.SignaturePadProps{}), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Draw in it. Long strokes are smoothed; a single stray point is not a stroke and "+ "is dropped, so a click does not leave a dot behind.")), ), @@ -584,7 +584,7 @@ func datesSection() func() *VNode { OnNavigate: func(m time.Time) { month.Set(m) }, }), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("The same grid the picker drops down, usable directly when you want it inline.")), ), ) @@ -676,7 +676,7 @@ func tablesSection() func() *VNode { SortDesc: gridDesc.Get(), SetSortDesc: func(b bool) { gridDesc.Set(b) }, }), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Click a Qty or Price cell and type. The grid does not own the rows — it tells you "+ "which cell changed and hands the value back; what you do with it is yours.")), ), @@ -801,7 +801,7 @@ func overlaysSection(push func(ui.ToastType, string)) func() *VNode { tipFocus.Render(Span(Text("Shown on FOCUS, not hover — tab to the field")), ui.FormInput(ui.FormInputProps{Placeholder: "Focus me"})), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Narrow the window and hover \"Right\": it flips to the left, and its arrow follows "+ "it. A tooltip that only answers to a mouse is a tooltip a keyboard user cannot read.")), ), @@ -862,7 +862,7 @@ func overlaysSection(push func(ui.ToastType, string)) func() *VNode { hoverMenu.Item(ui.MenuItemProps{}, Text("Two")), ), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Opening one closes the other — a single-open manager. Submenus are exempt, or a "+ "submenu would close the very menu it belongs to as it opened. The items raise toasts, "+ "which is how you can see that an item really does close its own menu.")), @@ -889,7 +889,7 @@ func overlaysSection(push func(ui.ToastType, string)) func() *VNode { }, ui.ModalOptions{Size: ui.ModalSmall}) }}), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("Open the modal, then the nested one inside it, and press Escape twice: modals unwind "+ "ONE LAYER per press rather than all at once.")), @@ -994,7 +994,7 @@ func feedbackSection(toaster *ui.Toaster, tour *ui.Tutorial) func() *VNode { demo("The guided tour", row("flex flex-wrap items-center gap-3", tour.StartButton(0, "", Text("Take the tour")), - Span(Attr("class", "text-xs text-ink-muted"), + Span(Attr("class", "text-ss text-ink-muted"), Text("It dims the page, cuts a hole around each target, and animates the spotlight from "+ "one to the next. Targets are CSS SELECTORS — the same section ids the sidebar jumps to.")), ), @@ -1006,7 +1006,7 @@ func feedbackSection(toaster *ui.Toaster, tour *ui.Tutorial) func() *VNode { OnClick: flash.Fire}), ui.RemoteUpdateFlash(flash.Visible()), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("A two-second acknowledgement that data you are looking at was changed by somebody "+ "else. It is not a toast: it belongs next to the thing that moved, not in the corner.")), ), @@ -1071,7 +1071,7 @@ func navigationSection() func() *VNode { demo("Accordion — one open at a time, or several", row("grid gap-6 lg:grid-cols-2", row("flex flex-col gap-2", - P(Attr("class", "text-xs font-semibold uppercase tracking-widest text-ink-faint"), + P(Attr("class", "text-ss font-semibold uppercase tracking-widest text-ink-faint"), Text("SingleAccordion")), ui.SingleAccordion([]ui.AccordionItemData{ {Title: "What is Kjøl Wasm Web?", Content: panel("kjol's Go→WebAssembly UI engine.")}, @@ -1080,7 +1080,7 @@ func navigationSection() func() *VNode { }, acc.Get(), func(i int) { acc.Set(i) }), ), row("flex flex-col gap-2", - P(Attr("class", "text-xs font-semibold uppercase tracking-widest text-ink-faint"), + P(Attr("class", "text-ss font-semibold uppercase tracking-widest text-ink-faint"), Text("Accordion (several at once)")), ui.Accordion([]ui.AccordionItemData{ {Title: "First", Content: panel("Open me.")}, @@ -1107,7 +1107,7 @@ func navigationSection() func() *VNode { }}, }, func(id string) { side.Set(id) }, ""), ), - P(Attr("class", "mt-3 text-xs text-ink-muted"), + P(Attr("class", "mt-3 text-ss text-ink-muted"), Text("It reports the id you clicked and nothing else. The sidebar on THIS page is the "+ "same idea, wired to scroll the section into view.")), ), @@ -1230,7 +1230,7 @@ func chartsSection() func() *VNode { row("mt-4 flex items-center gap-3", ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Small: true, Text: "New data", OnClick: func() { seed.Set(seed.Get() + 1) }}), ui.Button(ui.ButtonProps{Color: ui.ButtonNeutral, Small: true, Text: threeDLabel, OnClick: func() { threeD.Set(!threeD.Get()) }}), - Span(Attr("class", "text-xs text-ink-muted"), Text("Each chart takes a Title; a multi-series chart also draws a legend. Click a legend key (Errors, or a donut slice) to hide it — the scale and marks recompute. 3D extrudes the bars and tilts the donut.")), + Span(Attr("class", "text-ss text-ink-muted"), Text("Each chart takes a Title; a multi-series chart also draws a legend. Click a legend key (Errors, or a donut slice) to hide it — the scale and marks recompute. 3D extrudes the bars and tilts the donut.")), ), ), @@ -1247,7 +1247,7 @@ func chartsSection() func() *VNode { demo("US heatmap — a value per state, with proportional lat/lng points on top", heat.Render(ui.USHeatmapProps{Data: usSignups, Points: usCities, Proportional: true}), - Span(Attr("class", "mt-3 block text-xs text-ink-muted"), + Span(Attr("class", "mt-3 block text-ss text-ink-muted"), Text("webui.USHeatmap shades each state on the choropleth ramp and projects lat/lng points "+ "with a Go albersUsa port — Anchorage and Honolulu land on the insets. Hover a state or a point.")), ), diff --git a/go/cmd/kjol-website/app/docs.go b/go/cmd/kjol-website/app/docs.go index bfdfb988..3c3f7a75 100644 --- a/go/cmd/kjol-website/app/docs.go +++ b/go/cmd/kjol-website/app/docs.go @@ -89,7 +89,7 @@ func docPage(eyebrow, title, lede string, sections ...*VNode) *VNode { mods := []Mod{Attr("class", "pb-16")} mods = append(mods, Div(Attr("class", "border-b border-line pb-6"), - P(Attr("class", "text-xs font-semibold uppercase tracking-widest text-accent"), Text(eyebrow)), + P(Attr("class", "text-ss font-semibold uppercase tracking-widest text-accent"), Text(eyebrow)), H1(Attr("class", "mt-2 text-3xl font-semibold tracking-tight text-text-heading"), Text(title)), P(Attr("class", "mt-3 text-ink-muted leading-relaxed"), Text(lede)), ), @@ -150,7 +150,7 @@ func codeLang(caption, lang, src string) *VNode { return Div(Attr("class", "mt-4 overflow-hidden rounded-default border border-neutral-800 bg-neutral-900"), Div(Attr("class", "flex items-center gap-2 border-b border-neutral-800 px-4 py-2"), - Span(Attr("class", "text-xs font-medium text-ink-faint font-mono"), Text(caption)), + Span(Attr("class", "text-ss font-medium text-ink-faint font-mono"), Text(caption)), Span(Attr("class", "ml-auto rounded-full bg-white/5 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-ink-faint"), Text(lang)), ), Pre(Attr("class", "overflow-x-auto px-4 py-3 text-[13px] leading-relaxed text-neutral-100 font-mono"), body), @@ -164,7 +164,7 @@ func demo(title string, body ...*VNode) *VNode { mods := []Mod{Attr("class", "mt-4 rounded-default border border-line bg-surface shadow-xs")} mods = append(mods, Div(Attr("class", "border-b border-line px-4 py-2"), - Span(Attr("class", "text-xs text-ink-muted"), Text(title)), + Span(Attr("class", "text-ss text-ink-muted"), Text(title)), ), ) inner := []Mod{Attr("class", "p-4")} diff --git a/go/cmd/kjol-website/app/layers.go b/go/cmd/kjol-website/app/layers.go index 002cf84e..336b9721 100644 --- a/go/cmd/kjol-website/app/layers.go +++ b/go/cmd/kjol-website/app/layers.go @@ -247,7 +247,7 @@ func layerItem(d Deps, l Layer) *VNode { Span(Attr("class", "rounded-full bg-surface-raised px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-ink-muted"), Text("reference")), ), - Span(Attr("class", "text-xs text-ink-muted"), Text(l.Tagline)), + Span(Attr("class", "text-ss text-ink-muted"), Text(l.Tagline)), ) } @@ -257,6 +257,6 @@ func layerItem(d Deps, l Layer) *VNode { } return A(Attr("class", cls), Attr("href", l.Href), Span(Attr("class", "text-sm font-medium text-ink"), Text(l.Name)), - Span(Attr("class", "text-xs text-ink-muted"), Text(l.Tagline)), + Span(Attr("class", "text-ss text-ink-muted"), Text(l.Tagline)), ) } diff --git a/go/cmd/kjol-website/app/pages.go b/go/cmd/kjol-website/app/pages.go index 846831ea..0d20c296 100644 --- a/go/cmd/kjol-website/app/pages.go +++ b/go/cmd/kjol-website/app/pages.go @@ -410,7 +410,7 @@ serving "./wwwroot" on http://localhost:8085` func AboutPage(d Deps) func() *VNode { return func() *VNode { return Div(Attr("class", "mx-auto max-w-3xl py-4"), - P(Attr("class", "text-xs font-semibold uppercase tracking-widest text-accent"), Text("About")), + P(Attr("class", "text-ss font-semibold uppercase tracking-widest text-accent"), Text("About")), H1(Attr("class", "mt-2 text-4xl font-semibold tracking-tight text-text-heading"), Text("Why this exists")), P(Attr("class", "mt-6 text-lg leading-relaxed text-ink-soft"), diff --git a/go/cmd/kjol-website/frontend/src/layout/Shell.tsx b/go/cmd/kjol-website/frontend/src/layout/Shell.tsx index e8cac115..26103537 100644 --- a/go/cmd/kjol-website/frontend/src/layout/Shell.tsx +++ b/go/cmd/kjol-website/frontend/src/layout/Shell.tsx @@ -98,7 +98,7 @@ function LayerItem(props: { layer: Layer; current?: Layer }) { reference - {props.layer.tagline} + {props.layer.tagline} } > @@ -113,7 +113,7 @@ function LayerItem(props: { layer: Layer; current?: Layer }) { } > {props.layer.name} - {props.layer.tagline} + {props.layer.tagline} ); diff --git a/go/cmd/kjol-website/frontend/src/pages/Components.tsx b/go/cmd/kjol-website/frontend/src/pages/Components.tsx index 7b2c97f1..5d0ec95f 100644 --- a/go/cmd/kjol-website/frontend/src/pages/Components.tsx +++ b/go/cmd/kjol-website/frontend/src/pages/Components.tsx @@ -112,7 +112,7 @@ function Panel(props: { title: string; children?: JSXElement }) { return (
- {props.title} + {props.title}
{props.children}
@@ -153,7 +153,7 @@ function Body() { return (
-

Kjøl JS Web

+

Kjøl JS Web

Components

Every component in the Solid kit, running. Not a screenshot of one anywhere: each block @@ -313,7 +313,7 @@ function Badges() { kjol

-

+

Nothing beside the wordmark? Then this build is production — which is what it is telling you.

@@ -429,7 +429,7 @@ function Icons() {
-

+

The last two are the same name in the solid and regular styles. Which one you get by default is a CSS variable the app sets, read at runtime.

@@ -614,7 +614,7 @@ function Selects() { setTz(e?.currentTarget?.value ?? e)} /> -

+

one: {one() || "—"} · several:{" "} {many().join(", ") || "—"}

@@ -635,7 +635,7 @@ function Selects() { onSelect={(value, option) => setPicked(option.label + " <" + value + ">")} /> -

+

Two characters before it asks; 200 ms after you stop typing. A response for a query you have already typed past is DISCARDED rather than shown — which is the whole bug with hand-rolled autocompletes. @@ -655,7 +655,7 @@ function Selects() { searchable showSelectAll /> -

+

Same selection model as the field above; only the thing you click on differs.

@@ -698,7 +698,7 @@ function Toggles() { -

+

Draw in it. Clearing it emits an empty string, so "did they sign?" is just a length check.

@@ -735,7 +735,7 @@ function Dates() {
-

+

The same grid the picker drops down, usable directly when you want it inline. Pass{" "} variant="month" for the big version.

@@ -859,7 +859,7 @@ function Tables() { sortDesc={sortDesc()} setSortDesc={setSortDesc} /> -

+

Click a Qty or Price cell and type; Tab and the arrow keys move between editable cells. The grid does not own the rows — it tells you which cell changed and hands the value back.

@@ -972,7 +972,7 @@ function Overlays() { -

+

A tooltip that only answers to a mouse is a tooltip a keyboard user cannot read.

@@ -1048,7 +1048,7 @@ function Overlays() { -

+

The items raise toasts, which is how you can see that an item really does close its own menu — and that the one marked closeOnClick={"{false}"} does not.

@@ -1064,7 +1064,7 @@ function Overlays() { Open wizard -

+

Open the modal, then the nested one inside it, and press Escape twice: modals unwind ONE LAYER per press rather than all at once.

@@ -1190,7 +1190,7 @@ function Feedback() { Sticky (no timer) -

+

useToast() throws outside a{" "} <ToastProvider> — which is one of only two providers this kit has. @@ -1200,7 +1200,7 @@ function Feedback() {

Take the tour - + It dims the page, cuts a hole around each target, and animates the spotlight from one to the next. Targets are CSS SELECTORS — the same section ids the sidebar jumps to. @@ -1214,7 +1214,7 @@ function Feedback() {
-

+

A brief acknowledgement that data you are looking at was changed by somebody else. It is not a toast: it belongs next to the thing that moved, not in the corner.

@@ -1269,7 +1269,7 @@ function Navigation() {
-

+

SingleAccordion

-

+

Accordion (several at once)

-

+

It scrolls the element whose id matches the item into view — so these really do jump, because those sections really do exist on this page.

@@ -1353,7 +1353,7 @@ function Search() { onSelect={(value) => setHit(value)} />
-

+

The scorer is headless too: rankFuzzyMatches and{" "} fuzzySegments give you the ranking and the highlight runs, and you render them however you like. @@ -1438,7 +1438,7 @@ function Charts() { setThreeD(!threeD())}> {threeD() ? "Flat" : "3D"} - + Each chart carries a title; a multi-series chart also draws a legend. Click a legend key — say Errors or a donut slice — to hide it, and the scale and marks recompute from what's left. The threeD prop extrudes @@ -1468,7 +1468,7 @@ function Charts() { { name: "Retries", data: shuffle([5, 7, 3, 9]) }, ]} height={260} /> -

+

horizontal runs the categories down the y-axis;{" "} stacked layers the series with a 2px surface gap between segments.

@@ -1476,7 +1476,7 @@ function Charts() { v.toLocaleString("en-US")} /> -

+

@ui/USHeatmap shades each state on a themed sequential ramp and projects points (latitude/longitude) with a dependency-free albersUsa port — so Anchorage and Honolulu land on the Alaska and Hawaii insets. With{" "} @@ -1557,7 +1557,7 @@ function Theming() { )} -

+

The swatch class is written out in full in the source, not built as{" "} "bg-" + name. Tailwind finds the classes it must compile by scanning the source for literal strings — a concatenation is invisible to it, and every diff --git a/go/cmd/kjol-website/frontend/src/pages/Overview.tsx b/go/cmd/kjol-website/frontend/src/pages/Overview.tsx index 3fcbfaa3..8a1b77b6 100644 --- a/go/cmd/kjol-website/frontend/src/pages/Overview.tsx +++ b/go/cmd/kjol-website/frontend/src/pages/Overview.tsx @@ -13,7 +13,7 @@ export function Overview() { return (

-

Kjøl JS Web

+

Kjøl JS Web

A Solid kit, built by a Go toolchain

@@ -103,7 +103,7 @@ export function Overview() { function Stage(props: { n: string; title: string; body: string }) { return (
- + {props.n}
diff --git a/go/cmd/kjol-website/frontend/src/pages/public/Ssr.tsx b/go/cmd/kjol-website/frontend/src/pages/public/Ssr.tsx index 7cc3c512..68bac74f 100644 --- a/go/cmd/kjol-website/frontend/src/pages/public/Ssr.tsx +++ b/go/cmd/kjol-website/frontend/src/pages/public/Ssr.tsx @@ -29,7 +29,7 @@ export function Ssr() { return (
-

Kjøl JS Web

+

Kjøl JS Web

This page was rendered by Go

diff --git a/go/jsruntime/styles/theme.css b/go/jsruntime/styles/theme.css index 9a526974..d90978d1 100644 --- a/go/jsruntime/styles/theme.css +++ b/go/jsruntime/styles/theme.css @@ -39,8 +39,7 @@ @theme { /* Custom text sizes */ - --text-2xs: 0.75rem; /* Same size as Tailwind's default text-xs */ - --text-xs: 0.8rem; /* Override: Tailwind default is 0.75rem */ + --text-ss: 0.8rem; /* Override: Tailwind default is 0.75rem */ /* Custom breakpoints (Tailwind defaults + xs + ultrawide) */ --breakpoint-xs: 375px; diff --git a/go/jsruntime/uikit/AutoTable.tsx b/go/jsruntime/uikit/AutoTable.tsx index 066cfa65..e49b5d1b 100644 --- a/go/jsruntime/uikit/AutoTable.tsx +++ b/go/jsruntime/uikit/AutoTable.tsx @@ -560,14 +560,14 @@ const HEADER_SORT_ICON_CLS: Record = { export const HEADER_PADDING_CLS: Record = { [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 = { [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 = `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) {
; // -- 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 = () => @@ -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)}>
} -
No columns match.
+
No columns match.
@@ -1884,14 +1884,14 @@ function FormulaField(props: FormulaFieldProps) { {(f: { name: string; sig: string; desc: string }) => }
} -
No functions match.
+
No functions match.
 @@ -1911,12 +1911,12 @@ function FormulaField(props: FormulaFieldProps) { {(c: { name: string; desc: string }) => } -
No constants match.
+
No constants match.
 @@ -1948,7 +1948,7 @@ function FormulaField(props: FormulaFieldProps) { - +
References
@@ -2098,7 +2098,7 @@ function CalculatedColumnForm(props: CalculatedColumnFormProps) { onHighlight={highlight} apiRef={(api: FormulaFieldApi) => { formulaApi = api; }} /> -

{formulaError()}

+

{formulaError()}
@@ -2130,11 +2130,11 @@ function CalculatedColumnForm(props: CalculatedColumnFormProps) {
-

{errorMsg()}

+

{errorMsg()}
- handleRemove()}>Remove + handleRemove()}>Remove
close()}>Cancel @@ -2235,7 +2235,7 @@ function SummaryRowForm(props: SummaryRowFormProps) { onHighlight={highlight} apiRef={(api: FormulaFieldApi) => { formulaApi = api; }} /> -

{formulaError()}

+

{formulaError()}
@@ -2257,11 +2257,11 @@ function SummaryRowForm(props: SummaryRowFormProps) {
-

{errorMsg()}

+

{errorMsg()}
- handleRemove()}>Remove + handleRemove()}>Remove
close()}>Cancel @@ -2303,7 +2303,7 @@ function AddCalcMenu(props: AddCalcMenuProps) { Calculated column - A new column computed for each row + A new column computed for each row @@ -2312,7 +2312,7 @@ function AddCalcMenu(props: AddCalcMenuProps) { Summary row - A total or aggregate shown in the footer + A total or aggregate shown in the footer diff --git a/go/jsruntime/uikit/Badges.tsx b/go/jsruntime/uikit/Badges.tsx index f908674f..e9d65ce1 100644 --- a/go/jsruntime/uikit/Badges.tsx +++ b/go/jsruntime/uikit/Badges.tsx @@ -7,7 +7,7 @@ export const BADGE_AMBER = "amber"; export const BADGE_NEUTRAL = "neutral"; export const BADGE_MUTED = "muted"; -const BASE = "inline-flex items-center gap-1 text-xs font-semibold py-0.5 px-2 rounded-default whitespace-nowrap"; +const BASE = "inline-flex items-center gap-1 text-ss font-semibold py-0.5 px-2 rounded-default whitespace-nowrap"; const COLORS: Record = { "green": "text-white bg-green-700", diff --git a/go/jsruntime/uikit/Buttons.tsx b/go/jsruntime/uikit/Buttons.tsx index 98b8ed15..357cda09 100644 --- a/go/jsruntime/uikit/Buttons.tsx +++ b/go/jsruntime/uikit/Buttons.tsx @@ -144,7 +144,7 @@ export function SegmentedButtons(props: SegmentedButtonsProps) { const innerRadius = "rounded-default"; // chips: 4px const outerRadius = "rounded-md"; // track: 4px + 2px = 6px - const sizeCls = () => props.small ? "py-0.5 px-2 text-xs" : "py-1 px-3 text-sm"; + const sizeCls = () => props.small ? "py-0.5 px-2 text-ss" : "py-1 px-3 text-sm"; const baseCls = "inline-flex items-center justify-center gap-1.5 flex-1 cursor-pointer font-medium transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"; const activeCls = "bg-surface text-ink shadow-sm"; const inactiveCls = "text-ink-muted hover:text-ink"; diff --git a/go/jsruntime/uikit/Calendar.tsx b/go/jsruntime/uikit/Calendar.tsx index 22f1f95c..f7431aea 100644 --- a/go/jsruntime/uikit/Calendar.tsx +++ b/go/jsruntime/uikit/Calendar.tsx @@ -21,14 +21,14 @@ export const CAL_MY_MONTH = "text-lg font-heading mx-4 flex-1 text-center font-s export const CAL_WEEKDAYS_PICKER = "grid grid-cols-7 gap-[2px] mb-1"; export const CAL_WEEKDAYS_MONTH = "grid grid-cols-7 border-b border-line"; -export const CAL_WEEKDAY_PICKER = "text-center text-xs font-semibold text-ink-muted p-1"; -export const CAL_WEEKDAY_MONTH = "text-center text-xs font-semibold text-ink-muted p-2 uppercase tracking-wider"; +export const CAL_WEEKDAY_PICKER = "text-center text-ss font-semibold text-ink-muted p-1"; +export const CAL_WEEKDAY_MONTH = "text-center text-ss font-semibold text-ink-muted p-2 uppercase tracking-wider"; export const CAL_DAYS_PICKER = "grid grid-cols-7 gap-[2px]"; export const CAL_DAYS_MONTH = "grid grid-cols-7"; export const CAL_DAY_PICKER_BASE = "aspect-square flex items-center justify-center text-sm bg-transparent border-0 rounded-sm cursor-pointer text-ink p-0"; -export const CAL_DAY_MONTH_BASE = "min-h-[6.5rem] flex flex-col items-stretch justify-start p-1.5 border-r border-b border-line text-left gap-1 text-xs bg-transparent cursor-pointer"; +export const CAL_DAY_MONTH_BASE = "min-h-[6.5rem] flex flex-col items-stretch justify-start p-1.5 border-r border-b border-line text-left gap-1 text-ss bg-transparent cursor-pointer"; export const CAL_SELECT = "flex-1 py-1 px-2 text-sm font-semibold border border-line rounded-sm bg-surface text-ink cursor-pointer focus:outline-hidden focus:border-primary"; diff --git a/go/jsruntime/uikit/CellGrid.tsx b/go/jsruntime/uikit/CellGrid.tsx index 6734866b..bda42f54 100644 --- a/go/jsruntime/uikit/CellGrid.tsx +++ b/go/jsruntime/uikit/CellGrid.tsx @@ -1,7 +1,7 @@ import { createSignal, createMemo, untrack, Show, For, JSXElement } from "solid-js"; import { Icon } from "./Icons.tsx"; -export const GRID_HEADER_CLS = "border-b border-r border-line-strong bg-surface-muted px-1.5 py-1.5 text-left text-xs font-bold uppercase text-ink whitespace-nowrap last:border-r-0"; +export const GRID_HEADER_CLS = "border-b border-r border-line-strong bg-surface-muted px-1.5 py-1.5 text-left text-ss font-bold uppercase text-ink whitespace-nowrap last:border-r-0"; interface SortableHeaderProps { label: string; @@ -411,7 +411,7 @@ export function CellGrid(props: CellGridProps) { ); }; - const tableCls = () => "min-w-full w-max border-collapse " + (dense() ? "text-xs" : "text-sm"); + const tableCls = () => "min-w-full w-max border-collapse " + (dense() ? "text-ss" : "text-sm"); return (
diff --git a/go/jsruntime/uikit/Chart.tsx b/go/jsruntime/uikit/Chart.tsx index 131950cf..2883eb1e 100644 --- a/go/jsruntime/uikit/Chart.tsx +++ b/go/jsruntime/uikit/Chart.tsx @@ -586,7 +586,7 @@ function CartesianTooltip(p: { }); const rows = () => p.props.series.map((s, i) => ({ s, i })).filter(({ i }) => !p.hidden.has(i)); return ( -
{p.label}
{(row) => ( @@ -704,7 +704,7 @@ function RadialChart(p: SubProps): JSXElement { setHover(null)} /> -
string; hidden: }> - {it.name} + {it.name} ); }} diff --git a/go/jsruntime/uikit/CrmTabs.tsx b/go/jsruntime/uikit/CrmTabs.tsx index d058ad40..72ca536e 100644 --- a/go/jsruntime/uikit/CrmTabs.tsx +++ b/go/jsruntime/uikit/CrmTabs.tsx @@ -102,7 +102,7 @@ const CRM_TAB_ROW = "flex w-full overflow-x-auto text-sm"; const CRM_TAB_BASE = "flex items-center gap-1.5 cursor-pointer p-4 font-medium border-line-strong transition-colors"; const CRM_TAB_INACTIVE = "border-b text-ink-muted hover:text-ink"; const CRM_TAB_ACTIVE = "border-x border-t-2 border-t-sky-700 text-primary"; -const CRM_TAB_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-semibold bg-primary text-white rounded-full"; +const CRM_TAB_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-ss font-semibold bg-primary text-white rounded-full"; export function CrmTabGroup(props: CrmTabGroupProps) { // Memoize props.items: callers pass items={[{content: }]} where each @@ -148,7 +148,7 @@ const CRM_SUBTAB_BASE = "flex items-center gap-1.5 py-1 px-3 cursor-pointer font const CRM_SUBTAB_DIVIDER = "border-l border-line-strong"; const CRM_SUBTAB_ACTIVE = "bg-neutral-500 text-white"; const CRM_SUBTAB_INACTIVE = "bg-surface text-ink-soft hover:bg-surface-raised hover:text-ink"; -const CRM_SUBTAB_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-semibold bg-black/10 text-current rounded-full"; +const CRM_SUBTAB_BADGE = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-ss font-semibold bg-black/10 text-current rounded-full"; export function CrmSubTabGroup(props: CrmTabGroupProps) { // See CrmTabGroup: memoize eager `content` JSX so it's built once, in-owner. diff --git a/go/jsruntime/uikit/Forms.tsx b/go/jsruntime/uikit/Forms.tsx index 8a217e8f..45f97248 100644 --- a/go/jsruntime/uikit/Forms.tsx +++ b/go/jsruntime/uikit/Forms.tsx @@ -45,8 +45,8 @@ function _prefixCls(small?: boolean, error?: unknown, onDark?: boolean): string + (small ? " p-1 text-sm" : " p-2"); } -const FORM_ERROR = "block text-red-600 text-xs mt-1"; -const FORM_SUCCESS = "block text-green-600 text-xs mt-1"; +const FORM_ERROR = "block text-red-600 text-ss mt-1"; +const FORM_SUCCESS = "block text-green-600 text-ss mt-1"; const INPUT_GROUP = "flex flex-row items-stretch w-full text-sm"; const TRIGGER_BASE = "bg-white border border-neutral-300 rounded-default shadow-xs text-sm w-full text-left flex items-center justify-between gap-2 cursor-pointer disabled:bg-neutral-100 disabled:cursor-not-allowed"; @@ -662,8 +662,8 @@ export function FormSignaturePad(props: { value?: () => string; onchange?: (svg: onTouchEnd={stopDrawing} />
- {isEmpty() ? "Sign above" : ""} - + {isEmpty() ? "Sign above" : ""} +
; @@ -1537,7 +1537,7 @@ export function FormMultiSelect(props: FormMultiSelectProps) { } return
tagsContainerRef = el} class="flex flex-nowrap gap-1 overflow-hidden items-center"> - {(option) => + {(option) => {option.label} )} diff --git a/go/jsruntime/uikit/ToggleSwitch.tsx b/go/jsruntime/uikit/ToggleSwitch.tsx index bbe24217..d2fa1c79 100644 --- a/go/jsruntime/uikit/ToggleSwitch.tsx +++ b/go/jsruntime/uikit/ToggleSwitch.tsx @@ -55,7 +55,7 @@ export function ToggleSwitch(props: ToggleSwitchProps) { class={"text-sm select-none " + (isDisabled() ? "text-ink-faint" : "text-ink")} onclick={(_e: MouseEvent) => toggle()} >{resolve(props.label)}} - {props.description !== undefined && {resolve(props.description)}} + {props.description !== undefined && {resolve(props.description)}}
}
; } diff --git a/go/jsruntime/uikit/Tutorial.tsx b/go/jsruntime/uikit/Tutorial.tsx index a9edd2f1..75c59491 100644 --- a/go/jsruntime/uikit/Tutorial.tsx +++ b/go/jsruntime/uikit/Tutorial.tsx @@ -468,7 +468,7 @@ function TutorialPopover() { {displayedStep()?.title} - + {(displayedStepIndex() + 1) + " of " + ctx.totalSteps()}
diff --git a/go/jsruntime/uikit/USHeatmap.tsx b/go/jsruntime/uikit/USHeatmap.tsx index 580b2fa9..207763fe 100644 --- a/go/jsruntime/uikit/USHeatmap.tsx +++ b/go/jsruntime/uikit/USHeatmap.tsx @@ -195,7 +195,7 @@ export function USHeatmap(props: USHeatmapProps): JSXElement { {(t) => ( -
string }): JSXElement { const swatches = () => Array.from({ length: p.steps }, (_, i) => i + 1); return ( -
+
{p.fmt(p.min)}
{(k) => ( diff --git a/go/webui/autotable.go b/go/webui/autotable.go index 86184045..c948827e 100644 --- a/go/webui/autotable.go +++ b/go/webui/autotable.go @@ -118,14 +118,14 @@ var atHeaderSortIconCls = map[AutoTableHeaderColor]string{ var HEADER_PADDING_CLS = map[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_PADDING_CLS is the body cell padding per table size (applied via [&_td]:). var BODY_PADDING_CLS = map[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", } // atPaginationPaddingCls is the pagination bar padding per table size. @@ -2184,7 +2184,7 @@ const ( AUTOTABLE_SEARCH_FIELD = "flex flex-col gap-1 min-w-0 grow sm:grow-0 sm:w-48" AUTOTABLE_SEARCH_SELECT = "w-full rounded-default border border-line-strong bg-surface px-3 py-2 text-sm" AUTOTABLE_FILTERS_TOGGLE = "sm:hidden inline-flex items-center gap-2 rounded-default border border-line-strong px-3 py-2 text-sm" - AUTOTABLE_FILTERS_BADGE = "ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-sky-600 px-1.5 text-xs font-semibold text-white" + AUTOTABLE_FILTERS_BADGE = "ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-sky-600 px-1.5 text-ss font-semibold text-white" AUTOTABLE_TOOLBAR = "flex flex-wrap items-end justify-between gap-3 pb-3" AUTOTABLE_ASIDE = "w-full sm:w-64 shrink-0 rounded-default border border-line-strong bg-surface p-3" AUTOTABLE_ACCORDION_CELL = "w-10 text-center" @@ -3141,7 +3141,7 @@ const ( formulaPlaceholder = `e.g. [Revenue] / SUM({Revenue}) * 100` - calcMenuTrigger = "inline-flex items-center gap-1 rounded-default border border-line-strong bg-surface-muted px-2 py-1 text-xs leading-none text-ink-soft cursor-pointer hover:bg-surface-raised" + calcMenuTrigger = "inline-flex items-center gap-1 rounded-default border border-line-strong bg-surface-muted px-2 py-1 text-ss leading-none text-ink-soft cursor-pointer hover:bg-surface-raised" calcChooserItem = "w-full text-left px-2 py-2 rounded-default hover:bg-surface-raised cursor-pointer border-0 bg-transparent flex items-start gap-2.5" ) @@ -3630,7 +3630,7 @@ func calcChooserButton(icon, title, subtitle string, onClick func()) *vdom.VNode Icon(icon, 16, "mt-0.5 text-ink-muted"), vdom.Span(vdom.Attr("class", "flex flex-col"), vdom.Span(vdom.Attr("class", "text-sm font-medium text-ink"), vdom.Text(title)), - vdom.Span(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text(subtitle)), + vdom.Span(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(subtitle)), ), ) } @@ -3639,7 +3639,7 @@ func calcListRow(title, subtitle string, onEdit, onDelete func()) *vdom.VNode { return vdom.Div(vdom.Attr("class", "flex items-center gap-2 rounded-default px-2 py-1 hover:bg-surface-muted"), vdom.Div(vdom.Attr("class", "min-w-0 grow"), vdom.Div(vdom.Attr("class", "truncate text-sm font-medium text-ink"), vdom.Text(title)), - vdom.Div(vdom.Attr("class", "truncate font-mono text-xs text-ink-muted"), vdom.Text(subtitle)), + vdom.Div(vdom.Attr("class", "truncate font-mono text-ss text-ink-muted"), vdom.Text(subtitle)), ), Button(ButtonProps{Color: ButtonLightNeutral, Small: true, Icon: "pencil", Title: "Edit", OnClick: onEdit}), Button(ButtonProps{Color: ButtonLightNeutral, Small: true, Icon: "trash", Title: "Delete", OnClick: onDelete}), @@ -3793,7 +3793,7 @@ func (s *AutoTableState) calcForm(e *calcEditor, summary bool) *vdom.VNode { } if msg := e.errorMsg.Get(); msg != "" { - fields = append(fields, vdom.P(vdom.Attr("class", "text-xs text-red-600 dark:text-red-400"), vdom.Text(msg))) + fields = append(fields, vdom.P(vdom.Attr("class", "text-ss text-red-600 dark:text-red-400"), vdom.Text(msg))) } saveLabel := "Add" @@ -3897,7 +3897,7 @@ func (s *AutoTableState) calcBasicEditor(e *calcEditor, summary bool) *vdom.VNod }))) } - children = append(children, vdom.P(vdom.Attr("class", "text-xs text-ink-muted"), + children = append(children, vdom.P(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(calcBasicHint(e, summary)))) return vdom.Div(kids([]vdom.Mod{vdom.Attr("class", "flex flex-col gap-2")}, children)...) @@ -3929,11 +3929,11 @@ func (s *AutoTableState) calcAdvancedEditor(e *calcEditor, summary bool) *vdom.V colItems = append(colItems, e.colMenu.Item(MenuItemProps{OnClick: func() { e.insertAtCaret("[" + label + "]") }}, vdom.Span(vdom.Attr("class", "font-mono text-sky-600 dark:text-sky-400"), vdom.Text("["+label+"]")), - vdom.Span(vdom.Attr("class", "ml-2 text-xs text-ink-muted"), vdom.Text("this row")), + vdom.Span(vdom.Attr("class", "ml-2 text-ss text-ink-muted"), vdom.Text("this row")), ), e.colMenu.Item(MenuItemProps{OnClick: func() { e.insertAtCaret("{" + label + "}") }}, vdom.Span(vdom.Attr("class", "font-mono text-violet-600 dark:text-violet-400"), vdom.Text("{"+label+"}")), - vdom.Span(vdom.Attr("class", "ml-2 text-xs text-ink-muted"), vdom.Text("whole column")), + vdom.Span(vdom.Attr("class", "ml-2 text-ss text-ink-muted"), vdom.Text("whole column")), ), ) } @@ -3945,7 +3945,7 @@ func (s *AutoTableState) calcAdvancedEditor(e *calcEditor, summary bool) *vdom.V groups := filterFormulaGroups(e.fnSearch.Get()) if len(groups) == 0 { fnItems = append(fnItems, vdom.Div( - vdom.Attr("class", "px-2 py-3 text-center text-xs text-ink-muted"), + vdom.Attr("class", "px-2 py-3 text-center text-ss text-ink-muted"), vdom.Text("No functions match"), )) } @@ -3959,8 +3959,8 @@ func (s *AutoTableState) calcAdvancedEditor(e *calcEditor, summary bool) *vdom.V vdom.Div(vdom.Attr("class", "flex flex-col items-start gap-0.5 min-w-0"), // The signature is syntax-highlighted with the same highlighter the // formula box uses, so the menu and the editor speak one language. - vdom.Span(vdom.Attr("class", "font-mono text-xs"), vdom.Raw(HighlightFormula(f.Sig))), - vdom.Span(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text(f.Desc)), + vdom.Span(vdom.Attr("class", "font-mono text-ss"), vdom.Raw(HighlightFormula(f.Sig))), + vdom.Span(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(f.Desc)), ), )) } @@ -3973,8 +3973,8 @@ func (s *AutoTableState) calcAdvancedEditor(e *calcEditor, summary bool) *vdom.V OnClick: func() { e.insertAtCaret(cc.Name) }, }, vdom.Div(vdom.Attr("class", "flex flex-col items-start gap-0.5"), - vdom.Span(vdom.Attr("class", "font-mono text-xs text-amber-600 dark:text-amber-400"), vdom.Text(cc.Name)), - vdom.Span(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text(cc.Desc)), + vdom.Span(vdom.Attr("class", "font-mono text-ss text-amber-600 dark:text-amber-400"), vdom.Text(cc.Name)), + vdom.Span(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(cc.Desc)), ), )) } @@ -4028,7 +4028,7 @@ func (s *AutoTableState) calcAdvancedEditor(e *calcEditor, summary bool) *vdom.V ), ) - help := vdom.P(vdom.Attr("class", "text-xs text-ink-muted"), + help := vdom.P(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text("[Column] is this row's cell · {Column} is the whole column · {Column:1:ROW()} is a running total.")) children := []*vdom.VNode{menus, editor, help} @@ -4048,7 +4048,7 @@ func (e *calcEditor) fnSearchBox() *vdom.VNode { vdom.Input( vdom.WithRef(e.fnSearchRef), vdom.Attr("type", "text"), - vdom.Attr("class", "w-full rounded-default border border-line-strong p-1 text-xs focus:outline-2 focus:outline-sky-500"), + vdom.Attr("class", "w-full rounded-default border border-line-strong p-1 text-ss focus:outline-2 focus:outline-sky-500"), vdom.Attr("placeholder", "Search functions…"), vdom.Attr("spellcheck", "false"), vdom.Prop("value", e.fnSearch.Get()), @@ -4089,12 +4089,12 @@ func (s *AutoTableState) calcPreview(e *calcEditor, src string, summary bool) *v return nil } if _, err := CompileFormula(src); err != nil { - return vdom.P(vdom.Attr("class", "text-xs text-red-600 dark:text-red-400"), vdom.Text(err.Error())) + return vdom.P(vdom.Attr("class", "text-ss text-red-600 dark:text-red-400"), vdom.Text(err.Error())) } rows := s.FilteredRows() if len(rows) == 0 { - return vdom.P(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text("Formula is valid.")) + return vdom.P(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text("Formula is valid.")) } ctx := NewCalcContext(rows, s.cols, s.Calculated(), s.read) @@ -4107,10 +4107,10 @@ func (s *AutoTableState) calcPreview(e *calcEditor, src string, summary bool) *v n, err := EvalFormula(src, target) if err != nil { - return vdom.P(vdom.Attr("class", "text-xs text-red-600 dark:text-red-400"), vdom.Text(err.Error())) + return vdom.P(vdom.Attr("class", "text-ss text-red-600 dark:text-red-400"), vdom.Text(err.Error())) } out := FormatCalcResult(n, CalculatedDataType(e.dataType.Get()), calcPrecisionOf(e.precision.Get()), "", "", "") - return vdom.P(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text(prefix+out)) + return vdom.P(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(prefix+out)) } // insertAtCaret drops text where the cursor is, rather than at the end — which is @@ -4141,7 +4141,7 @@ func (e *calcEditor) insertAtCaretOffset(text string, back int) { func calcField(label string, children ...*vdom.VNode) *vdom.VNode { nodes := []*vdom.VNode{ - vdom.Span(vdom.Attr("class", "text-xs font-medium text-ink-soft"), vdom.Text(label)), + vdom.Span(vdom.Attr("class", "text-ss font-medium text-ink-soft"), vdom.Text(label)), } nodes = append(nodes, children...) return vdom.Div(kids([]vdom.Mod{vdom.Attr("class", "flex flex-col gap-1")}, nodes)...) diff --git a/go/webui/badges.go b/go/webui/badges.go index 8a41b817..c7810c89 100644 --- a/go/webui/badges.go +++ b/go/webui/badges.go @@ -13,7 +13,7 @@ const ( BadgeMuted = "muted" ) -const badgeBase = "inline-flex items-center gap-1 text-xs font-semibold py-0.5 px-2 rounded-default whitespace-nowrap" +const badgeBase = "inline-flex items-center gap-1 text-ss font-semibold py-0.5 px-2 rounded-default whitespace-nowrap" var badgeColors = map[string]string{ "green": "text-white bg-green-700", diff --git a/go/webui/buttons.go b/go/webui/buttons.go index a71eef97..f30b6ff1 100644 --- a/go/webui/buttons.go +++ b/go/webui/buttons.go @@ -171,7 +171,7 @@ type SegmentedButtonOption struct { func SegmentedButtons(options []SegmentedButtonOption, value string, onChange func(string), small bool, class string) *vdom.VNode { sizeCls := "py-1 px-3 text-sm" if small { - sizeCls = "py-0.5 px-2 text-xs" + sizeCls = "py-0.5 px-2 text-ss" } const baseCls = "inline-flex items-center justify-center gap-1.5 flex-1 cursor-pointer font-medium transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed" const activeCls = "bg-surface text-text-heading shadow-sm" diff --git a/go/webui/calendar.go b/go/webui/calendar.go index c9d817b6..930ad5f5 100644 --- a/go/webui/calendar.go +++ b/go/webui/calendar.go @@ -38,14 +38,14 @@ const calMyMonth = "text-lg font-heading mx-4 flex-1 text-center font-semibold t const calWeekdaysPicker = "grid grid-cols-7 gap-[2px] mb-1" const calWeekdaysMonth = "grid grid-cols-7 border-b border-line" -const calWeekdayPicker = "text-center text-xs font-semibold text-text-muted p-1" -const calWeekdayMonth = "text-center text-xs font-semibold text-text-muted p-2 uppercase tracking-wider" +const calWeekdayPicker = "text-center text-ss font-semibold text-text-muted p-1" +const calWeekdayMonth = "text-center text-ss font-semibold text-text-muted p-2 uppercase tracking-wider" const calDaysPicker = "grid grid-cols-7 gap-[2px]" const calDaysMonth = "grid grid-cols-7" const calDayPickerBase = "aspect-square flex items-center justify-center text-sm bg-transparent border-0 rounded-sm cursor-pointer text-text-body p-0" -const calDayMonthBase = "min-h-[6.5rem] flex flex-col items-stretch justify-start p-1.5 border-r border-b border-line text-left gap-1 text-xs bg-transparent cursor-pointer" +const calDayMonthBase = "min-h-[6.5rem] flex flex-col items-stretch justify-start p-1.5 border-r border-b border-line text-left gap-1 text-ss bg-transparent cursor-pointer" const calSelect = "flex-1 py-1 px-2 text-sm font-semibold border border-line rounded-sm bg-surface text-text-heading cursor-pointer focus:outline-hidden focus:border-primary" diff --git a/go/webui/cellgrid.go b/go/webui/cellgrid.go index 55b68e52..a284339a 100644 --- a/go/webui/cellgrid.go +++ b/go/webui/cellgrid.go @@ -35,7 +35,7 @@ import ( // GridHeaderCls is the base class for CellGrid headers (exported, matching // the TSX GRID_HEADER_CLS). -const GridHeaderCls = "border-b border-r border-line-strong bg-surface-muted px-1.5 py-1.5 text-left text-xs font-bold uppercase text-ink whitespace-nowrap last:border-r-0" +const GridHeaderCls = "border-b border-r border-line-strong bg-surface-muted px-1.5 py-1.5 text-left text-ss font-bold uppercase text-ink whitespace-nowrap last:border-r-0" var cgLeadingDigits = regexp.MustCompile(`^\d+`) var cgLeadingFloat = regexp.MustCompile(`^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?`) @@ -467,7 +467,7 @@ func CellGrid(p CellGridProps) *vdom.VNode { tableCls := "min-w-full w-max border-collapse text-sm" if p.Dense { - tableCls = "min-w-full w-max border-collapse text-xs" + tableCls = "min-w-full w-max border-collapse text-ss" } return vdom.Div(vdom.Attr("class", "relative max-w-full overflow-x-auto border border-line-strong rounded-default bg-surface tabular-nums"), vdom.Table(vdom.Attr("class", tableCls), thead, tbody), diff --git a/go/webui/chart.go b/go/webui/chart.go index 7fd38869..b9fc60be 100644 --- a/go/webui/chart.go +++ b/go/webui/chart.go @@ -308,7 +308,7 @@ func (c *Chart) positionTip(left, top float64, transform string) { // pass so its ref stays valid; onMove positions it imperatively. When there is no hover it // is present but hidden — the same slot each render keeps the reconciler's diff stable. func (c *Chart) tooltipNode(p ChartProps, hv int) *vdom.VNode { - base := "pointer-events-none absolute z-10 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-xs shadow-lg" + base := "pointer-events-none absolute z-10 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-ss shadow-lg" if p.NoTooltip || hv < 0 || hv >= chartN(p) { return vdom.Div(vdom.WithRef(c.tipRef), vdom.Attr("class", cx(base, "hidden"))) } @@ -1086,10 +1086,10 @@ func (c *Chart) legend(p ChartProps) *vdom.VNode { it := it // capture per iteration for the click closure off := !chartShown(p, it.i) swatchStyle := "background-color:" + chartColor(p, it.i) - labelClass := "text-xs text-ink-soft" + labelClass := "text-ss text-ink-soft" if off { swatchStyle += ";opacity:0.35" - labelClass = "text-xs text-ink-faint line-through" + labelClass = "text-ss text-ink-faint line-through" } nodes = append(nodes, vdom.El("button", vdom.Attr("type", "button"), diff --git a/go/webui/crmtabs.go b/go/webui/crmtabs.go index 95191e55..049603a0 100644 --- a/go/webui/crmtabs.go +++ b/go/webui/crmtabs.go @@ -52,7 +52,7 @@ const crmTabRow = "flex w-full overflow-x-auto text-sm" const crmTabBase = "flex items-center gap-1.5 cursor-pointer p-4 font-medium border-line-strong transition-colors" const crmTabInactive = "border-b text-ink-muted hover:text-ink" const crmTabActive = "border-x border-t-2 border-t-sky-700 text-accent" -const crmTabBadge = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-semibold bg-primary text-white rounded-full" +const crmTabBadge = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-ss font-semibold bg-primary text-white rounded-full" // CrmTabGroup renders boxed tabs with a sky-blue top accent; content sits flat // beneath the row (no body panel), with a trailing filler extending the baseline. @@ -95,7 +95,7 @@ const crmSubTabBase = "flex items-center gap-1.5 py-1 px-3 cursor-pointer font-m const crmSubTabDivider = "border-l border-line-strong" const crmSubTabActive = "bg-neutral-500 text-white" const crmSubTabInactive = "bg-surface text-ink-soft hover:bg-surface-raised hover:text-ink" -const crmSubTabBadge = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-semibold bg-black/10 text-current rounded-full" +const crmSubTabBadge = "inline-flex items-center justify-center min-w-5 h-5 px-1 text-ss font-semibold bg-black/10 text-current rounded-full" // CrmSubTabGroup renders a left-aligned segmented control (interlocking // segments) with a full-width baseline separating the bar from the content. diff --git a/go/webui/forms.go b/go/webui/forms.go index 70dda058..ee6c3f4f 100644 --- a/go/webui/forms.go +++ b/go/webui/forms.go @@ -26,8 +26,8 @@ import ( const formInputBase = "bg-surface block w-full border rounded-default shadow-xs text-sm focus:outline-2 focus:outline-offset-1 disabled:bg-surface-raised disabled:cursor-not-allowed" const formInputBaseDark = "bg-dark text-text-on-dark placeholder:text-text-on-dark-faint block w-full border rounded-default shadow-xs text-sm focus:outline-2 focus:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed" -const formErrorCls = "block text-red-600 dark:text-red-400 text-xs mt-1" -const formSuccessCls = "block text-green-600 text-xs mt-1" +const formErrorCls = "block text-red-600 dark:text-red-400 text-ss mt-1" +const formSuccessCls = "block text-green-600 text-ss mt-1" const formInputGroupCls = "flex flex-row items-stretch w-full text-sm" const formTriggerBase = "bg-surface border border-line-strong rounded-default shadow-xs text-sm w-full text-left flex items-center justify-between gap-2 cursor-pointer disabled:bg-surface-raised disabled:cursor-not-allowed" @@ -1312,7 +1312,7 @@ func (m *MultiSelect) triggerFace(p FormMultiSelectProps, selected []FormSelectO pillCls := formMultiSelectTag if p.Small { - pillCls = cx(pillCls, "px-1.5 text-xs") + pillCls = cx(pillCls, "px-1.5 text-ss") } else { pillCls = cx(pillCls, "px-2 text-sm") } diff --git a/go/webui/fuzzymatch.go b/go/webui/fuzzymatch.go index 5a9a0950..31b84fa0 100644 --- a/go/webui/fuzzymatch.go +++ b/go/webui/fuzzymatch.go @@ -275,7 +275,7 @@ func fuzzyScoreBadge(show bool, score int) *vdom.VNode { if !show { return nil } - return vdom.Span(vdom.Attr("class", "ml-3 shrink-0 text-xs text-ink-faint"), vdom.Text(strconv.Itoa(score))) + return vdom.Span(vdom.Attr("class", "ml-3 shrink-0 text-ss text-ink-faint"), vdom.Text(strconv.Itoa(score))) } // fuzzyListView renders the inline "list" display. Before the user types, all diff --git a/go/webui/general.go b/go/webui/general.go index e0194fc4..a0ed8606 100644 --- a/go/webui/general.go +++ b/go/webui/general.go @@ -15,7 +15,7 @@ func Divider() *vdom.VNode { return vdom.Hr(vdom.Attr("class", "text-line mt-1 m // CodeBox renders a dark monospace code block. func CodeBox(code, class string) *vdom.VNode { - return vdom.Div(vdom.Attr("class", cx("text-xs p-3 bg-neutral-800 text-neutral-100 border border-neutral-700 rounded-default", class)), + return vdom.Div(vdom.Attr("class", cx("text-ss p-3 bg-neutral-800 text-neutral-100 border border-neutral-700 rounded-default", class)), vdom.Pre(vdom.Code(vdom.Text(code))), ) } @@ -58,7 +58,7 @@ type BreadcrumbItem struct { // Breadcrumbs renders a chevron-separated crumb trail; the last item is bold and // not linked. func Breadcrumbs(items []BreadcrumbItem) *vdom.VNode { - mods := []vdom.Mod{vdom.Attr("class", "flex flex-row items-center text-ink-faint text-xs")} + mods := []vdom.Mod{vdom.Attr("class", "flex flex-row items-center text-ink-faint text-ss")} for i, crumb := range items { if i != len(items)-1 { mods = append(mods, vdom.Span(vdom.Attr("class", "flex items-center"), diff --git a/go/webui/modal.go b/go/webui/modal.go index 77f21f2d..a45fa706 100644 --- a/go/webui/modal.go +++ b/go/webui/modal.go @@ -109,7 +109,7 @@ var modalSizes = map[ModalSize]string{ Modal2XLarge: "max-w-5xl", Modal3XLarge: "max-w-6xl", Modal4XLarge: "max-w-7xl", - Modal5XLarge: "max-w-[90rem]", + Modal5XLarge: "max-w-8xl", ModalFull: "max-w-none", } @@ -137,12 +137,12 @@ var modalConfirmOkVariants = map[string]string{ const modalWizardHeader = "flex flex-col items-center gap-2 flex-1" const modalWizardTitleRow = "flex items-center justify-between w-full" const modalWizardTitle = "text-xl" -const modalWizardStepName = "text-xs font-semibold text-ink-soft uppercase tracking-wider" +const modalWizardStepName = "text-ss font-semibold text-ink-soft uppercase tracking-wider" const modalWizardSteps = "flex items-center justify-between relative w-full max-w-64" const modalWizardTrack = "absolute top-1/2 left-0 right-0 h-0.5 bg-surface-strong -translate-y-1/2" const modalWizardTrackFill = "h-full bg-primary transition-[width] duration-300 ease-in-out" const modalWizardStepWrap = "relative z-[1]" -const modalStepIndicatorBase = "w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold border-2 shrink-0 transition-all duration-300 ease-in-out" +const modalStepIndicatorBase = "w-7 h-7 rounded-full flex items-center justify-center text-ss font-semibold border-2 shrink-0 transition-all duration-300 ease-in-out" const modalStepIndicatorPending = "border-line-strong text-ink-faint bg-surface" const modalStepIndicatorActive = "bg-primary text-white border-primary" const modalStepIndicatorCompleted = "bg-primary text-white border-primary" diff --git a/go/webui/prettytable.go b/go/webui/prettytable.go index ac5b9983..8c4afa90 100644 --- a/go/webui/prettytable.go +++ b/go/webui/prettytable.go @@ -80,13 +80,13 @@ var ptRowHoverCls = map[PrettyTableHeaderColor]string{ var ptHeaderPaddingCls = map[PrettyTableSize]string{ PrettyTableSizeDefault: "p-4 text-sm", PrettyTableSizeCompact: "py-1.5 px-2 text-sm", - PrettyTableSizeSuperCompact: "py-1 px-2 text-xs", + PrettyTableSizeSuperCompact: "py-1 px-2 text-ss", } var ptBodyPaddingCls = map[PrettyTableSize]string{ PrettyTableSizeDefault: "text-sm [&_td]:p-4", PrettyTableSizeCompact: "text-sm [&_td]:py-1 [&_td]:px-2", - PrettyTableSizeSuperCompact: "text-xs [&_td]:py-0.5 [&_td]:px-2", + PrettyTableSizeSuperCompact: "text-ss [&_td]:py-0.5 [&_td]:px-2", } var ptPosCls = map[PrettyTableColumnPosition]string{ diff --git a/go/webui/sidebar.go b/go/webui/sidebar.go index bf218f09..0566da26 100644 --- a/go/webui/sidebar.go +++ b/go/webui/sidebar.go @@ -7,7 +7,7 @@ import "kjol/wasmruntime/vdom" const sidebarNavRoot = "bg-surface rounded-default shadow-sm border border-line py-2" const sidebarNavList = "list-none m-0 p-0" const sidebarNavBtn = "w-full text-left py-2 pr-3 pl-4 text-sm cursor-pointer bg-transparent text-ink-soft border-0 hover:text-ink hover:bg-surface-muted" -const sidebarNavSubBtn = "w-full text-left py-1.5 pr-3 pl-8 text-xs cursor-pointer bg-transparent text-ink-muted border-0 hover:text-ink hover:bg-surface-muted" +const sidebarNavSubBtn = "w-full text-left py-1.5 pr-3 pl-8 text-ss cursor-pointer bg-transparent text-ink-muted border-0 hover:text-ink hover:bg-surface-muted" const sidebarNavIcon = "mr-2" const sidebarLayoutRoot = "grid grid-cols-1 gap-8 min-h-screen items-start lg:grid-cols-12" diff --git a/go/webui/signaturepad.go b/go/webui/signaturepad.go index c16267bb..8d598b9d 100644 --- a/go/webui/signaturepad.go +++ b/go/webui/signaturepad.go @@ -135,7 +135,7 @@ func (s *SignaturePad) Render(p SignaturePadProps) *vdom.VNode { } clear := []vdom.Mod{ vdom.Attr("type", "button"), - vdom.Attr("class", "text-xs text-ink-muted hover:text-ink disabled:opacity-50"), + vdom.Attr("class", "text-ss text-ink-muted hover:text-ink disabled:opacity-50"), vdom.Text(pick(p.ClearText, "Clear")), } if p.Disabled || s.IsEmpty() { @@ -145,7 +145,7 @@ func (s *SignaturePad) Render(p SignaturePadProps) *vdom.VNode { } kids = append(kids, vdom.Div( vdom.Attr("class", "flex items-center justify-between border-t border-line bg-surface-muted px-2 py-1"), - vdom.Span(vdom.Attr("class", "text-xs italic text-ink-faint"), vdom.Text(hint)), + vdom.Span(vdom.Attr("class", "text-ss italic text-ink-faint"), vdom.Text(hint)), vdom.Button(clear...), )) } diff --git a/go/webui/tabs.go b/go/webui/tabs.go index 28c9891c..b9b75378 100644 --- a/go/webui/tabs.go +++ b/go/webui/tabs.go @@ -113,7 +113,7 @@ func TabGroup(p TabGroupProps) *vdom.VNode { vdom.Text(item.Title), } if item.Badge > 0 { - btn = append(btn, vdom.Span(vdom.Attr("class", "inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-semibold bg-primary text-white rounded-full"), + btn = append(btn, vdom.Span(vdom.Attr("class", "inline-flex items-center justify-center min-w-5 h-5 px-1 text-ss font-semibold bg-primary text-white rounded-full"), vdom.Text(strconv.Itoa(item.Badge)))) } header = append(header, vdom.Button(btn...)) diff --git a/go/webui/toggleswitch.go b/go/webui/toggleswitch.go index 38fb8c01..7942b21c 100644 --- a/go/webui/toggleswitch.go +++ b/go/webui/toggleswitch.go @@ -56,7 +56,7 @@ func ToggleSwitch(checked bool, onChange func(bool), label, description string, vdom.Text(label))) } if description != "" { - text = append(text, vdom.Span(vdom.Attr("class", "text-xs text-ink-muted"), vdom.Text(description))) + text = append(text, vdom.Span(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(description))) } mods = append(mods, vdom.Div(text...)) } diff --git a/go/webui/tutorial.go b/go/webui/tutorial.go index ea654879..6d237fdd 100644 --- a/go/webui/tutorial.go +++ b/go/webui/tutorial.go @@ -704,7 +704,7 @@ func (t *Tutorial) content(step *TutorialStep, idx, total int) *vdom.VNode { headerLeft = append(headerLeft, vdom.Span(vdom.Attr("class", "font-medium text-ink"), vdom.Text(step.Title))) } - headerLeft = append(headerLeft, vdom.Span(vdom.Attr("class", "text-xs text-ink-muted"), + headerLeft = append(headerLeft, vdom.Span(vdom.Attr("class", "text-ss text-ink-muted"), vdom.Text(strconv.Itoa(idx+1)+" of "+strconv.Itoa(total)))) header := vdom.Div(vdom.Attr("class", "flex items-center justify-between p-4 pb-2"), diff --git a/go/webui/usheatmap.go b/go/webui/usheatmap.go index 762b01be..42dd0082 100644 --- a/go/webui/usheatmap.go +++ b/go/webui/usheatmap.go @@ -221,7 +221,7 @@ func (c *USHeatmap) onMove(e vdom.Event) { // tooltipNode is the HTML tooltip (absolute, pointer-events-none), rendered every pass so // its ref stays valid; onMove positions it imperatively. Hidden when nothing is hovered. func (c *USHeatmap) tooltipNode(p USHeatmapProps, hv usHover, mn, mx float64, steps int) *vdom.VNode { - base := "pointer-events-none absolute z-10 min-w-28 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-xs shadow-lg" + base := "pointer-events-none absolute z-10 min-w-28 max-w-64 rounded-default border border-line bg-surface px-3 py-2 text-ss shadow-lg" if p.NoTooltip || hv.kind == "" { return vdom.Div(vdom.WithRef(c.tipRef), vdom.Attr("class", cx(base, "hidden"))) } @@ -387,7 +387,7 @@ func choroplethLegend(mn, mx float64, steps int, fmt func(float64) string) *vdom vdom.Attr("style", "background-color:var(--color-choropleth-"+strconv.Itoa(k)+")"))) } ramp := vdom.Div(kids([]vdom.Mod{vdom.Attr("class", "flex overflow-hidden rounded-xs")}, swatches)...) - return vdom.Div(vdom.Attr("class", "mt-3 flex items-center gap-2 text-xs text-ink-muted"), + return vdom.Div(vdom.Attr("class", "mt-3 flex items-center gap-2 text-ss text-ink-muted"), vdom.Span(vdom.Attr("style", "font-variant-numeric:tabular-nums"), vdom.Text(fmt(mn))), ramp, vdom.Span(vdom.Attr("style", "font-variant-numeric:tabular-nums"), vdom.Text(fmt(mx))),