From 162cf385867620300241550083b2260099ad0fdb Mon Sep 17 00:00:00 2001 From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com> Date: Wed, 15 Jul 2026 06:39:23 -0700 Subject: [PATCH] Studio: remove the edge fades appearance setting (#7143) The edge fades toggle in Settings > Appearance let users swap the panel edge gradients for thin divider lines. It added little on top of the default look, so this removes the setting and all of its wiring while leaving the default edge fades in place. - drop the edgeFades field, default, and no-edge-fades class from the appearance customization store - remove the settings row, switch, and search entry - drop the html.no-edge-fades rules from index.css and hub.css - remove the edgeFades label and description from all locales - drop the edgeFades field from the personalization backend model and its test references --- studio/backend/routes/settings.py | 1 - .../tests/test_personalization_settings.py | 2 - studio/frontend/src/features/hub/hub.css | 13 ------ .../components/appearance-custom-controls.tsx | 11 ----- .../src/features/settings/settings-search.ts | 1 - .../stores/appearance-custom-store.ts | 7 ---- .../features/settings/tabs/appearance-tab.tsx | 7 ---- studio/frontend/src/i18n/locales/en.ts | 5 --- studio/frontend/src/i18n/locales/ja.ts | 4 -- studio/frontend/src/i18n/locales/pt-br.ts | 4 -- studio/frontend/src/i18n/locales/zh-CN.ts | 4 -- studio/frontend/src/index.css | 41 ------------------- 12 files changed, 100 deletions(-) diff --git a/studio/backend/routes/settings.py b/studio/backend/routes/settings.py index 3fa9df0dde..1ddfc0eacb 100644 --- a/studio/backend/routes/settings.py +++ b/studio/backend/routes/settings.py @@ -708,7 +708,6 @@ class PersonalizationCustomization(BaseModel): pointerCursors: bool = False reduceMotion: Literal["system", "on", "off"] = "system" fontSmoothing: bool = True - edgeFades: bool = True sidebarMenu: list[PersonalizationSidebarMenuItem] = Field( default_factory = _default_sidebar_menu, max_length = MAX_SIDEBAR_MENU_INPUT_ITEMS, diff --git a/studio/backend/tests/test_personalization_settings.py b/studio/backend/tests/test_personalization_settings.py index 0b3c20c789..7b5e70decc 100644 --- a/studio/backend/tests/test_personalization_settings.py +++ b/studio/backend/tests/test_personalization_settings.py @@ -56,7 +56,6 @@ def test_customization_defaults(): assert c.contrast == 50 assert c.reduceMotion == "system" assert c.fontSmoothing is True - assert c.edgeFades is True assert c.pointerCursors is False assert c.colors.light.accent is None assert c.headingFont is None @@ -370,7 +369,6 @@ def test_personalization_route_roundtrip_real_shape(monkeypatch): "pointerCursors": True, "reduceMotion": "off", "fontSmoothing": True, - "edgeFades": False, "sidebarMenu": [ {"id": "darkMode", "visible": True}, {"id": "api", "visible": False}, diff --git a/studio/frontend/src/features/hub/hub.css b/studio/frontend/src/features/hub/hub.css index 398caaec83..947dd8cb34 100644 --- a/studio/frontend/src/features/hub/hub.css +++ b/studio/frontend/src/features/hub/hub.css @@ -1527,16 +1527,3 @@ html.dark .hub-page [data-hub-scroll="true"]::-webkit-scrollbar-thumb { body[data-scroll-locked] .hub-modal-pe-guard { pointer-events: none !important; } - -@layer components { - /* Edge fades off (Appearance setting): hub scroll dissolves become thin - divider lines. */ - html.no-edge-fades .hub-page .hub-detail-bar::after { - height: 1px; - background: var(--border); - } - html.no-edge-fades .hub-page .hub-scroll-fade { - background: none; - border-top: 1px solid var(--border); - } -} diff --git a/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx b/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx index c249e852cf..bd5459f88f 100644 --- a/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx +++ b/studio/frontend/src/features/settings/components/appearance-custom-controls.tsx @@ -846,17 +846,6 @@ export function CodeFontSizeRow() { ); } -export function EdgeFadesSwitch() { - const edgeFades = useAppearanceCustomStore((s) => s.customization.edgeFades); - const patch = useAppearanceCustomStore((s) => s.patch); - return ( - patch({ edgeFades: checked })} - /> - ); -} - export function FontSmoothingSwitch() { const fontSmoothing = useAppearanceCustomStore( (s) => s.customization.fontSmoothing, diff --git a/studio/frontend/src/features/settings/settings-search.ts b/studio/frontend/src/features/settings/settings-search.ts index 3c6577ab35..36191835e5 100644 --- a/studio/frontend/src/features/settings/settings-search.ts +++ b/studio/frontend/src/features/settings/settings-search.ts @@ -58,7 +58,6 @@ export const SETTINGS_SEARCH_INDEX: Record = { "settings.appearance.custom.uiFontSize.label", "settings.appearance.custom.codeFontSize.label", "settings.appearance.custom.fontSmoothing.label", - "settings.appearance.custom.edgeFades.label", "settings.appearance.layout.compactSidebar", "settings.appearance.sidebarMenu.title", "settings.appearance.sidebarMenu.darkModeToggle", diff --git a/studio/frontend/src/features/settings/stores/appearance-custom-store.ts b/studio/frontend/src/features/settings/stores/appearance-custom-store.ts index e2b078843e..b8c8d96f5a 100644 --- a/studio/frontend/src/features/settings/stores/appearance-custom-store.ts +++ b/studio/frontend/src/features/settings/stores/appearance-custom-store.ts @@ -111,8 +111,6 @@ export type AppearanceCustomization = { reduceMotion: ReduceMotionSetting; /** true = the app default (antialiased). */ fontSmoothing: boolean; - /** true = content dissolves at panel edges; false = thin divider lines. */ - edgeFades: boolean; /** Order and visibility of the optional sidebar profile menu items. */ sidebarMenu: SidebarMenuItemPref[]; }; @@ -136,7 +134,6 @@ export const DEFAULT_CUSTOMIZATION: AppearanceCustomization = { pointerCursors: false, reduceMotion: "system", fontSmoothing: true, - edgeFades: true, sidebarMenu: SIDEBAR_MENU_ITEM_IDS.map((id) => ({ id, visible: SIDEBAR_MENU_DEFAULT_VISIBLE[id], @@ -275,7 +272,6 @@ export function sanitizeCustomization(value: unknown): AppearanceCustomization { ? source.reduceMotion : "system", fontSmoothing: source.fontSmoothing !== false, - edgeFades: source.edgeFades !== false, sidebarMenu: sanitizeSidebarMenu(source.sidebarMenu), }; } @@ -548,9 +544,6 @@ export function applyCustomizationToDocument( // the media rules in index.css skip html.force-motion. el.classList.toggle("force-motion", c.reduceMotion === "off"); el.classList.toggle("no-font-smoothing", !c.fontSmoothing); - // Off swaps the scroll-edge dissolves for thin divider lines (index.css - // and hub.css key their fade rules off this class). - el.classList.toggle("no-edge-fades", !c.edgeFades); } /** diff --git a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx index 47f0f974e6..1ee8c0d349 100644 --- a/studio/frontend/src/features/settings/tabs/appearance-tab.tsx +++ b/studio/frontend/src/features/settings/tabs/appearance-tab.tsx @@ -10,7 +10,6 @@ import { CodeFontRow, CodeFontSizeRow, ContrastSliderRow, - EdgeFadesSwitch, FontSmoothingSwitch, HeadingFontRow, PointerCursorsSwitch, @@ -142,12 +141,6 @@ export function AppearanceTab() { > - - -