Yichen Jiang
17b480de51
Both editors live in `ui-models` and list the same thing, so they now share one row shape rather than diverging when #1368 lands: a bordered entry per model, id and display name on the row, and the capacities behind the row's own disclosure. The context window is joined there by the per-model output cap the adapter just gained; both read a decimal K/M suffix. The shared class names carry this file's token spellings, not that branch's. `--dsw-alias-border-subtle`, `--dsw-alias-text-tertiary`, and `--dsw-alias-text-primary` are undeclared, so they resolve to the light-mode literals in their fallback slots — the defect this section was moved off. A styles test now rejects any `--dsw-*` name the token sheet does not declare, so the next editor to name one fails instead of shipping a light-only surface. The keystroke buffer is now per capacity field rather than per row, since a row holds two of them.
39 lines
1.9 KiB
TypeScript
39 lines
1.9 KiB
TypeScript
import { readFileSync } from 'node:fs'
|
|
import { fileURLToPath } from 'node:url'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
const css = readFileSync(fileURLToPath(new URL('../src/client/ModelsSection.module.css', import.meta.url)), 'utf8')
|
|
const tokens = readFileSync(
|
|
fileURLToPath(new URL('../../ui-theme/src/styles/design-platform.css', import.meta.url)),
|
|
'utf8',
|
|
)
|
|
|
|
/** The declarations of one top-level rule, by selector. */
|
|
function block(selector: string): string {
|
|
const match = new RegExp(`^\\${selector} \\{([^}]*)\\}`, 'm').exec(css)
|
|
if (match === null) throw new Error(`ModelsSection.module.css has no \`${selector}\` rule`)
|
|
return match[1] ?? ''
|
|
}
|
|
|
|
describe('ModelsSection theme styles', () => {
|
|
it('names only theme variables the token sheet defines', () => {
|
|
// A `--dsw-*` name the sheet never declares is not a near miss: it silently
|
|
// resolves to whatever literal sits in its fallback slot, which is how this
|
|
// section stayed light under the dark theme before. Undeclared names have
|
|
// no fallback at all and inherit, so both spellings must fail here.
|
|
const named = [...css.matchAll(/var\((--dsw-[a-z0-9-]+)/g)].map(match => match[1])
|
|
const undeclared = [...new Set(named)].filter(name => !tokens.includes(` ${String(name)}:`))
|
|
expect(undeclared).toEqual([])
|
|
expect(css).not.toMatch(/var\(--(?:surface|text-|border|accent-strong)/)
|
|
})
|
|
|
|
it('separates the row card from the editor it expands into', () => {
|
|
// `bg-layer-3` and `bg-module-platform` both resolve to neutral-bluish-800
|
|
// under the dark theme, so filling the row with either erases the nested
|
|
// editor's boundary. The row is outlined; the fill is the editor's alone.
|
|
expect(block('.editor')).toContain('background: var(--dsw-alias-bg-module-platform)')
|
|
expect(block('.rowCard')).toContain('border: 1px solid var(--dsw-alias-border-l2)')
|
|
expect(block('.rowCard')).not.toMatch(/\bbackground\s*:/)
|
|
})
|
|
})
|