Add the Fluksio look, and make it the one a dashboard starts in
Docs / docs (push) Successful in 48s
Playwright Tests / test-playwright (1, 2) (push) Failing after 16s
Playwright Tests / test-playwright (2, 2) (push) Failing after 13s
pre-commit / pre-commit (push) Failing after 2m8s
Test Backend / test-backend (push) Failing after 49s
Compose Smoke Test / test-compose (push) Failing after 26s
Playwright Tests / merge-reports (push) Failing after 13s
Docs / docs (push) Successful in 48s
Playwright Tests / test-playwright (1, 2) (push) Failing after 16s
Playwright Tests / test-playwright (2, 2) (push) Failing after 13s
pre-commit / pre-commit (push) Failing after 2m8s
Test Backend / test-backend (push) Failing after 49s
Compose Smoke Test / test-compose (push) Failing after 26s
Playwright Tests / merge-reports (push) Failing after 13s
Two looks were somebody else's language spoken well, and neither was the product's. A dashboard nobody has dressed yet should look like the rest of the app, so there is now a third set that follows the root DESIGN-GUIDELINES.md to the letter — `--card` surfaces told from the page by a hairline and a low shadow rather than by colour, every control a pill, 16px panels, frosted floating chrome, one slate-blue accent spent on what a person can act on — and it is what `look` means when nothing says otherwise. That also turns the exemption the other way round. The dashboard is still allowed to look unlike the product; it just no longer does so by default. An existing dashboard, which has never named a look, lands on the design it had before any of this. Restraint is the style rather than an omission here: no ripple, no glow, no lift, and a press answered by the colour changing. The one deliberate departure is the selector, which holds its choice in `--primary` rather than the `--accent` the segmented rule asks for — that is a decision about the widget, not about the look, and a control must not change what it signals when the drawing changes. All three sets hold it the same way.
This commit is contained in:
@@ -626,14 +626,14 @@ async function setLook(
|
||||
})
|
||||
}
|
||||
|
||||
// Both looks, in both themes. A look is mostly colour and depth, so the four
|
||||
// screenshots are the assertion that neither collapses — and the checks around
|
||||
// them are that a look changes how the panel is drawn and nothing else.
|
||||
// Every look, in both themes. A look is mostly colour and depth, so the
|
||||
// screenshots are the assertion that none of them collapses — and the checks
|
||||
// around them are that a look changes how the panel is drawn and nothing else.
|
||||
for (const scheme of ["light", "dark"] as const) {
|
||||
test.describe(`${scheme} theme`, () => {
|
||||
test.use({ colorScheme: scheme })
|
||||
|
||||
for (const look of ["material", "glass"] as const) {
|
||||
for (const look of ["fluksio", "material", "glass"] as const) {
|
||||
test(`the panel reads in ${scheme} ${look}`, async ({ page }) => {
|
||||
await openPanel(page)
|
||||
await setLook(page, dashboardName, { look: { value: look } })
|
||||
@@ -691,7 +691,7 @@ for (const scheme of ["light", "dark"] as const) {
|
||||
path: `screenshots/widgets/${scheme}-palette.png`,
|
||||
})
|
||||
await setLook(page, dashboardName, {
|
||||
look: { value: "material" },
|
||||
look: { value: "fluksio" },
|
||||
palette: { value: [] },
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user