FN-8200: add Settings theme selector spacing
Add tokenized spacing below the Settings current-theme selector before Font Size. - Scope the spacing to the Settings current-theme row without affecting compact dropdowns. - Add a regression test for the established spacing token. - Add a patch changeset for the Settings layout fix. Files changed: .changeset/fn-8200-theme-selector-spacing.md | 6 ++++++ packages/dashboard/app/components/ThemeDropdown.css | 8 ++++++++ .../dashboard/app/components/__tests__/ThemeDropdown.test.tsx | 6 ++++++ 3 files changed, 20 insertions(+) Fusion-Task-Id: FN-8200 Fusion-Task-Lineage: 6b72d0f7-759f-49aa-a8f9-f788cc9ec5c5 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
6
.changeset/fn-8200-theme-selector-spacing.md
Normal file
6
.changeset/fn-8200-theme-selector-spacing.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
summary: Add spacing below the Settings theme selector before the Font Size section.
|
||||||
|
category: fix
|
||||||
@@ -24,6 +24,14 @@ Glass theme surfaces create stronger translucent stacking contexts, so the Comma
|
|||||||
min-inline-size: 0;
|
min-inline-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
FNXC:DashboardTheming 2026-07-16-15:00:
|
||||||
|
FN-8200 gives the Settings-only current-theme selector breathing room before the Font Size section, using the established large spacing token without affecting Command Center's compact dropdown.
|
||||||
|
*/
|
||||||
|
.theme-dropdown--current-row {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
.theme-dropdown-trigger .theme-option-swatch,
|
.theme-dropdown-trigger .theme-option-swatch,
|
||||||
.theme-dropdown-option .theme-option-swatch {
|
.theme-dropdown-option .theme-option-swatch {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|||||||
@@ -54,6 +54,12 @@ describe("ThemeDropdown", () => {
|
|||||||
expect(renderedThemeIds(screen.getByRole("listbox", { name: /color theme/i }))).toEqual(EXPECTED_THEME_IDS);
|
expect(renderedThemeIds(screen.getByRole("listbox", { name: /color theme/i }))).toEqual(EXPECTED_THEME_IDS);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps tokenized space below the Settings current-theme row", () => {
|
||||||
|
const css = readFileSync("app/components/ThemeDropdown.css", "utf8");
|
||||||
|
|
||||||
|
expect(css).toMatch(/\.theme-dropdown--current-row\s*\{\s*margin-bottom:\s*var\(--space-lg\);\s*\}/);
|
||||||
|
});
|
||||||
|
|
||||||
it("labels only Shadcn Ember as the default option", () => {
|
it("labels only Shadcn Ember as the default option", () => {
|
||||||
render(<ThemeDropdown colorTheme="ocean" onColorThemeChange={vi.fn()} />);
|
render(<ThemeDropdown colorTheme="ocean" onColorThemeChange={vi.fn()} />);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user