Skip to content

style(ui): two text tones in data tables; name column sized to its names #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HTExplicit merged 2 commits into from
Oct 1, 2026
Merged

style(ui): two text tones in data tables; name column sized to its names #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5560ae7
feat(ui): two text tones in the record tables; the account name colum…
Oct 1, 2026
218da66
fix(ui): the account name column follows the page's usual names at ev…
Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 142 additions & 9 deletions frontend/src/styles/console/data.css
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 37 additions & 1 deletion frontend/src/styles/console/pages/accounts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,17 @@ html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="account-filters"] {
gap: 6px;
}

/* The filter pills are controls (text roles, data.css 12: the toolbar's grey is the placeholder's): drawn like the
buttons and selects beside them, in the ink; under the pointer a pill takes the focus line, as the labelled field
pills of 使用记录 do (an active pill keeps its accent edge: this weighs less). */
html.flat-theme [data-ui="accounts-toolbar"] [data-ui~="filter-pill"] {
--ui-ink-soft: var(--ui-data-primary);
}

html.flat-theme :where([data-ui="accounts-toolbar"]) [data-ui~="filter-pill"]:hover {
border-color: rgb(var(--ui-line-focus));
}

/* The route-group select stands among 30px pills: the recipe's house select at the pill height. */
html.flat-theme [data-ui="account-filters"] select.input {
height: var(--ui-control-h);
Expand Down Expand Up @@ -444,7 +455,8 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
min-width: 3em;
font-size: 12px;
line-height: 18px;
color: rgb(var(--ui-muted));
/* the e-mail under the name is a secondary value (data.css 12) */
color: rgb(var(--ui-data-secondary));
}

/* Integration review: a name that links to the account's homepage sits in HelpTooltip's root, which keeps its own
Expand Down Expand Up @@ -647,6 +659,30 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"]
}
}

/* Text roles (data.css 12) of the accounts table whose template class names another role:
- 管理分类 and 请求路由 are inline labels (template spans); the folder and the route summary are their values;
- priority, scheduling weight and the account rate are figures (primary); 「未探测」 is the labelled value of
上游声明倍率 (its class says label). */
html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] span[class~="font-medium"][class~="text-gray-700"],
html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] div[class~="truncate"][class~="text-gray-500"],
html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="upstream_billing_rate"] [class~="font-medium"][class~="text-gray-400"] {
--theme-text-gray-100: var(--ui-data-labelled); --theme-text-gray-200: var(--ui-data-labelled); --theme-text-gray-300: var(--ui-data-labelled);
--theme-text-gray-400: var(--ui-data-labelled); --theme-text-gray-500: var(--ui-data-labelled); --theme-text-gray-600: var(--ui-data-labelled);
--theme-text-gray-700: var(--ui-data-labelled); --theme-text-gray-800: var(--ui-data-labelled); --theme-text-gray-900: var(--ui-data-labelled);
--theme-text-gray-950: var(--ui-data-labelled); --theme-text-dark-100: var(--ui-data-labelled); --theme-text-dark-200: var(--ui-data-labelled);
--theme-text-dark-300: var(--ui-data-labelled); --theme-text-dark-400: var(--ui-data-labelled); --theme-text-dark-500: var(--ui-data-labelled);
--theme-text-dark-600: var(--ui-data-labelled); --ui-ink-soft: var(--ui-data-labelled);
}

html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"]:is([data-line="priority"], [data-line="scheduler_score"], [data-line="rate_multiplier"]) > [data-ui="cell-line-value"] [class~="text-gray-700"] {
--theme-text-gray-100: var(--ui-data-primary); --theme-text-gray-200: var(--ui-data-primary); --theme-text-gray-300: var(--ui-data-primary);
--theme-text-gray-400: var(--ui-data-primary); --theme-text-gray-500: var(--ui-data-primary); --theme-text-gray-600: var(--ui-data-primary);
--theme-text-gray-700: var(--ui-data-primary); --theme-text-gray-800: var(--ui-data-primary); --theme-text-gray-900: var(--ui-data-primary);
--theme-text-gray-950: var(--ui-data-primary); --theme-text-dark-100: var(--ui-data-primary); --theme-text-dark-200: var(--ui-data-primary);
--theme-text-dark-300: var(--ui-data-primary); --theme-text-dark-400: var(--ui-data-primary); --theme-text-dark-500: var(--ui-data-primary);
--theme-text-dark-600: var(--ui-data-primary); --ui-ink-soft: var(--ui-data-primary);
}

/* ================================================================== 6 · card grid and compact list */

/* Shared parts of the two other views: the 14px checkbox with its 32px hit area (as in the table), the account id
Expand Down
98 changes: 90 additions & 8 deletions frontend/src/styles/console/pages/dashboard-usage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,12 +416,13 @@ html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"]
color: rgb(var(--ui-ink-soft));
}

/* Hierarchy by colour and weight instead of more black (palette C): the requested model and the billed cost are the
row's ink (500); every token figure (input, output, cache, image) ink-soft; the key, account and reasoning names
ink-soft 400; the endpoint's 「入站 / 上游」 labels 400; times and IPs tabular figures. The token glyphs get upstream's
hues back as identity-safe text colours (input emerald, output violet, cache read sky, cache write amber, image
fuchsia / pink, indigo), so the figures stay neutral and the colour says which figure is which; the account's billed
cost stays muted. The key, account, reasoning and endpoint rules also name their lines of a stacked cell
/* Hierarchy by colour and weight instead of more black (palette C, then the text roles of data.css 12): the requested
model and the billed cost are the row's ink (500); every token figure (input, output, cache, image) the ink at 400;
the key and account names 400 (the primary role), the reasoning effort the secondary one; the endpoint's
「入站 / 上游」 labels 400; times and IPs tabular figures. The token glyphs get upstream's hues back as identity-safe
text colours (input emerald, output violet, cache read sky, cache write amber, image fuchsia / pink, indigo), so the
figures stay neutral and the colour says which figure is which; the account's billed cost is a reference value (the
grey). The key, account, reasoning and endpoint rules also name their lines of a stacked cell
([data-ui="cell-line"][data-line], the table-width track's stacked layout), as that track does for the rules it
carries over. */
html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="api_key"], [data-column="account"], [data-column="reasoning_effort"]) span[class~="text-gray-900"],
Expand All @@ -430,9 +431,15 @@ html.flat-theme .table-wrapper[data-table="usage"] [data-ui="cell-line"]:is([dat
font-weight: 400;
}

/* (text roles, data.css 12: every token figure is a primary figure, in the ink like the billed cost, Geist Mono 13 / 400
tabular; the billed cost keeps 500, the one weighted figure of the row. They were ink-soft Mono 13 / 500.) */
html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] span[class~="font-medium"][class~="text-gray-900"],
html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] :is([class~="text-sky-600"], [class~="text-amber-600"], [class~="text-fuchsia-600"], [class~="text-pink-600"]) {
color: rgb(var(--ui-ink-soft));
color: rgb(var(--ui-data-primary));
font-family: var(--ui-font-mono);
font-size: 13px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}

html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] span[class~="text-green-600"] {
Expand Down Expand Up @@ -476,8 +483,83 @@ html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[
color: rgb(var(--ui-id-indigo));
}

/* the account's billed cost (A $) is a reference value next to the billed cost: the grey, a secondary figure one pixel
under the row's 13px figures (it was 11px) */
html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] div[class~="text-orange-500"] {
color: rgb(var(--ui-muted));
color: rgb(var(--ui-data-reference));
font-size: 12px;
line-height: 18px;
}

/* Text roles (data.css 12) of the records and error lists whose class names another role:
- reasoning effort qualifies the model: secondary (its class says primary; dark: its dark:text-white reads
--theme-on-fill, the ink inside tables, so that is moved too, on these text leaves only);
- 入站 / 上游: the endpoint path is the labelled value, 「入站:」 / 「上游:」 its label (their classes say secondary);
- error lists: the message is the row's content (primary); platform and category are secondary.
The secondary figures (latency, IP) are Geist Mono 12, a pixel under the primary 13px figures (latency was Geist
sans 12 / 500, the IP Mono 13). */
html.flat-theme .table-wrapper[data-table="usage"] :is(td[data-column="reasoning_effort"], [data-ui="cell-line"][data-line="reasoning_effort"]) :is(span, div)[class~="text-gray-900"] {
--theme-text-gray-100: var(--ui-data-secondary); --theme-text-gray-200: var(--ui-data-secondary); --theme-text-gray-300: var(--ui-data-secondary);
--theme-text-gray-400: var(--ui-data-secondary); --theme-text-gray-500: var(--ui-data-secondary); --theme-text-gray-600: var(--ui-data-secondary);
--theme-text-gray-700: var(--ui-data-secondary); --theme-text-gray-800: var(--ui-data-secondary); --theme-text-gray-900: var(--ui-data-secondary);
--theme-text-gray-950: var(--ui-data-secondary); --theme-text-dark-100: var(--ui-data-secondary); --theme-text-dark-200: var(--ui-data-secondary);
--theme-text-dark-300: var(--ui-data-secondary); --theme-text-dark-400: var(--ui-data-secondary); --theme-text-dark-500: var(--ui-data-secondary);
--theme-text-dark-600: var(--ui-data-secondary); --ui-ink-soft: var(--ui-data-secondary);
}

html.flat-theme.dark .table-wrapper[data-table="usage"] :is(td[data-column="reasoning_effort"], [data-ui="cell-line"][data-line="reasoning_effort"]) :is(span, div)[class~="text-gray-900"] {
--theme-on-fill: var(--ui-data-secondary);
}

html.flat-theme :is(.table-wrapper[data-table="usage"], :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"])) :is(td[data-column="endpoint"], [data-ui="cell-line"][data-line="endpoint"]) div[class~="break-all"] {
--theme-text-gray-100: var(--ui-data-labelled); --theme-text-gray-200: var(--ui-data-labelled); --theme-text-gray-300: var(--ui-data-labelled);
--theme-text-gray-400: var(--ui-data-labelled); --theme-text-gray-500: var(--ui-data-labelled); --theme-text-gray-600: var(--ui-data-labelled);
--theme-text-gray-700: var(--ui-data-labelled); --theme-text-gray-800: var(--ui-data-labelled); --theme-text-gray-900: var(--ui-data-labelled);
--theme-text-gray-950: var(--ui-data-labelled); --theme-text-dark-100: var(--ui-data-labelled); --theme-text-dark-200: var(--ui-data-labelled);
--theme-text-dark-300: var(--ui-data-labelled); --theme-text-dark-400: var(--ui-data-labelled); --theme-text-dark-500: var(--ui-data-labelled);
--theme-text-dark-600: var(--ui-data-labelled); --ui-ink-soft: var(--ui-data-labelled);
}

html.flat-theme :is(.table-wrapper[data-table="usage"], :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"])) :is(td[data-column="endpoint"], [data-ui="cell-line"][data-line="endpoint"]) div[class~="break-all"] > span[class~="font-medium"] {
--theme-text-gray-100: var(--ui-data-label); --theme-text-gray-200: var(--ui-data-label); --theme-text-gray-300: var(--ui-data-label);
--theme-text-gray-400: var(--ui-data-label); --theme-text-gray-500: var(--ui-data-label); --theme-text-gray-600: var(--ui-data-label);
--theme-text-gray-700: var(--ui-data-label); --theme-text-gray-800: var(--ui-data-label); --theme-text-gray-900: var(--ui-data-label);
--theme-text-gray-950: var(--ui-data-label); --theme-text-dark-100: var(--ui-data-label); --theme-text-dark-200: var(--ui-data-label);
--theme-text-dark-300: var(--ui-data-label); --theme-text-dark-400: var(--ui-data-label); --theme-text-dark-500: var(--ui-data-label);
--theme-text-dark-600: var(--ui-data-label); --ui-ink-soft: var(--ui-data-label);
}

html.flat-theme :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"]) td[data-column="message"] > span[class~="text-gray-600"] {
--theme-text-gray-100: var(--ui-data-primary); --theme-text-gray-200: var(--ui-data-primary); --theme-text-gray-300: var(--ui-data-primary);
--theme-text-gray-400: var(--ui-data-primary); --theme-text-gray-500: var(--ui-data-primary); --theme-text-gray-600: var(--ui-data-primary);
--theme-text-gray-700: var(--ui-data-primary); --theme-text-gray-800: var(--ui-data-primary); --theme-text-gray-900: var(--ui-data-primary);
--theme-text-gray-950: var(--ui-data-primary); --theme-text-dark-100: var(--ui-data-primary); --theme-text-dark-200: var(--ui-data-primary);
--theme-text-dark-300: var(--ui-data-primary); --theme-text-dark-400: var(--ui-data-primary); --theme-text-dark-500: var(--ui-data-primary);
--theme-text-dark-600: var(--ui-data-primary); --ui-ink-soft: var(--ui-data-primary);
}

html.flat-theme :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"]) :is(td[data-column="platform"], td[data-column="category"]) > span[class~="text-gray-900"],
html.flat-theme :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"]) [data-ui="cell-line"]:is([data-line="platform"], [data-line="category"]) > [data-ui="cell-line-value"] > span[class~="text-gray-900"] {
--theme-text-gray-100: var(--ui-data-secondary); --theme-text-gray-200: var(--ui-data-secondary); --theme-text-gray-300: var(--ui-data-secondary);
--theme-text-gray-400: var(--ui-data-secondary); --theme-text-gray-500: var(--ui-data-secondary); --theme-text-gray-600: var(--ui-data-secondary);
--theme-text-gray-700: var(--ui-data-secondary); --theme-text-gray-800: var(--ui-data-secondary); --theme-text-gray-900: var(--ui-data-secondary);
--theme-text-gray-950: var(--ui-data-secondary); --theme-text-dark-100: var(--ui-data-secondary); --theme-text-dark-200: var(--ui-data-secondary);
--theme-text-dark-300: var(--ui-data-secondary); --theme-text-dark-400: var(--ui-data-secondary); --theme-text-dark-500: var(--ui-data-secondary);
--theme-text-dark-600: var(--ui-data-secondary); --ui-ink-soft: var(--ui-data-secondary);
}

html.flat-theme.dark :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"]) :is(td[data-column="platform"], td[data-column="category"]) > span[class~="text-gray-900"],
html.flat-theme.dark :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"]) [data-ui="cell-line"]:is([data-line="platform"], [data-line="category"]) > [data-ui="cell-line-value"] > span[class~="text-gray-900"] {
--theme-on-fill: var(--ui-data-secondary);
}

html.flat-theme .table-wrapper[data-table="usage"] td[data-column="latency"] span[class~="tabular-nums"] {
font-family: var(--ui-font-mono);
font-size: 12px;
}

html.flat-theme :is(.table-wrapper[data-table="usage"], :is([data-ui~="usage-records"], [data-ui~="ops-error-list"], [data-ui="user-usage"]) .table-wrapper:not([data-table="usage"])) td:is([data-column="ip_address"], [data-column="client_ip"]) span[class~="font-mono"] {
font-size: 12px;
}

/* The token and cost breakdown cards (UsageTable's two portals; the frame is overlays.css 2.3): the billed amounts and
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/styles/console/pages/ops-channels.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1698,13 +1698,14 @@ html.flat-theme [data-ui~="ops-error-list"] > div:last-child > div[class~="mb-2"
color: rgb(var(--ui-label));
}

/* the list's cells: time Mono; the type and group chips are categories (data.css' category-chip hook, added to
OpsErrorLogTable.vue: the reference's neutral chip); the detail action a 28px icon button */
/* the list's cells: time Mono, a secondary value (data.css 12, as in the other lists); the type and group chips are
categories (data.css' category-chip hook, added to OpsErrorLogTable.vue: the reference's neutral chip); the detail
action a 28px icon button */
html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="created_at"] > span {
font-family: var(--ui-font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: rgb(var(--ui-muted));
color: rgb(var(--ui-data-secondary));
}

html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="actions"] > button {
Expand Down
25 changes: 22 additions & 3 deletions frontend/src/styles/console/pages/user.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,32 @@ html.flat-theme .table-wrapper[data-table="keys"] td[data-column="usage"] span[c
font-variant-numeric: tabular-nums;
}

/* the labels (今日 / 近30天) in ink-soft, the reference's colour for a row's secondary figures: muted sits at 4.5:1
on a hovered row, too close to the floor for a 12px label */
/* the labels (今日 / 近30天): the label role of the table's text (data.css 12; #66666e is 4.95:1 on a hovered row) */
html.flat-theme .table-wrapper[data-table="keys"] td[data-column="usage"] span[class~="text-gray-500"] {
color: rgb(var(--ui-ink-soft));
color: rgb(var(--ui-data-label));
font-size: 12px;
}

/* text roles (data.css 12) whose class names another role: 「选择分组」 is an empty-value prompt (a label); 「永久有效」 is
a value (secondary, its class says label) */
html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] [class~="text-gray-500"] {
--theme-text-gray-100: var(--ui-data-label); --theme-text-gray-200: var(--ui-data-label); --theme-text-gray-300: var(--ui-data-label);
--theme-text-gray-400: var(--ui-data-label); --theme-text-gray-500: var(--ui-data-label); --theme-text-gray-600: var(--ui-data-label);
--theme-text-gray-700: var(--ui-data-label); --theme-text-gray-800: var(--ui-data-label); --theme-text-gray-900: var(--ui-data-label);
--theme-text-gray-950: var(--ui-data-label); --theme-text-dark-100: var(--ui-data-label); --theme-text-dark-200: var(--ui-data-label);
--theme-text-dark-300: var(--ui-data-label); --theme-text-dark-400: var(--ui-data-label); --theme-text-dark-500: var(--ui-data-label);
--theme-text-dark-600: var(--ui-data-label); --ui-ink-soft: var(--ui-data-label);
}

html.flat-theme .table-wrapper[data-table="keys"] td[data-column="expires_at"] > span[class~="text-gray-400"] {
--theme-text-gray-100: var(--ui-data-secondary); --theme-text-gray-200: var(--ui-data-secondary); --theme-text-gray-300: var(--ui-data-secondary);
--theme-text-gray-400: var(--ui-data-secondary); --theme-text-gray-500: var(--ui-data-secondary); --theme-text-gray-600: var(--ui-data-secondary);
--theme-text-gray-700: var(--ui-data-secondary); --theme-text-gray-800: var(--ui-data-secondary); --theme-text-gray-900: var(--ui-data-secondary);
--theme-text-gray-950: var(--ui-data-secondary); --theme-text-dark-100: var(--ui-data-secondary); --theme-text-dark-200: var(--ui-data-secondary);
--theme-text-dark-300: var(--ui-data-secondary); --theme-text-dark-400: var(--ui-data-secondary); --theme-text-dark-500: var(--ui-data-secondary);
--theme-text-dark-600: var(--ui-data-secondary); --ui-ink-soft: var(--ui-data-secondary);
}

/* the live-concurrency count: the reference's cell chip (4px, Mono), a running count keeps its success tint */
html.flat-theme .table-wrapper[data-table="keys"] td[data-column="current_concurrency"] > span {
min-width: 28px;
Expand Down
Loading
Loading