| ... | ... | @@ -308,6 +308,7 @@ export function ThemeEditorPanel({ |
| 308 | 308 | const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState< |
| 309 | 309 | Record<ThemeAppearance, boolean> |
| 310 | 310 | >({ light: false, dark: false }); |
| 311 | const [shouldRegenerateGuidedColors, setShouldRegenerateGuidedColors] = useState(false); |
| 311 | 312 | const [error, setError] = useState<string | null>(null); |
| 312 | 313 | const [isMinimized, setIsMinimized] = useState(false); |
| 313 | 314 | const [roleQuery, setRoleQuery] = useState(""); |
| ... | ... | @@ -401,6 +402,10 @@ export function ThemeEditorPanel({ |
| 401 | 402 | // regenerate when the guided editor produced it. |
| 402 | 403 | setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true); |
| 403 | 404 | setSimpleColorsDirtyByAppearance({ light: false, dark: false }); |
| 405 | // An unmanaged palette needs conversion when the user opts into the |
| 406 | // guided editor. Merely revealing Advanced for a managed/default draft |
| 407 | // must stay read-only until a color changes. |
| 408 | setShouldRegenerateGuidedColors(sourceTheme !== null && sourceTheme.managed !== true); |
| 404 | 409 | setColorsByAppearance(nextColors); |
| 405 | 410 | setSelectedRole(null); |
| 406 | 411 | setUsageCount(null); |
| ... | ... | @@ -497,6 +502,7 @@ export function ThemeEditorPanel({ |
| 497 | 502 | [activeAppearance]: true, |
| 498 | 503 | })); |
| 499 | 504 | } |
| 505 | if (isAdvanced) setShouldRegenerateGuidedColors(true); |
| 500 | 506 | }, |
| 501 | 507 | [activeAppearance, isAdvanced], |
| 502 | 508 | ); |
| ... | ... | @@ -735,6 +741,7 @@ export function ThemeEditorPanel({ |
| 735 | 741 | if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) { |
| 736 | 742 | setSelectedRole(null); |
| 737 | 743 | } |
| 744 | if (!shouldRegenerateGuidedColors) return; |
| 738 | 745 | |
| 739 | 746 | // Regenerate every appearance the theme will save, not just the visible |
| 740 | 747 | // one, so the palettes shown after toggling match what gets saved. |
| ... | ... | @@ -754,8 +761,9 @@ export function ThemeEditorPanel({ |
| 754 | 761 | } |
| 755 | 762 | return next; |
| 756 | 763 | }); |
| 764 | setShouldRegenerateGuidedColors(false); |
| 757 | 765 | }, |
| 758 | | [activeAppearance, editingTheme, selectedRole], |
| 766 | [activeAppearance, editingTheme, selectedRole, shouldRegenerateGuidedColors], |
| 759 | 767 | ); |
| 760 | 768 | |
| 761 | 769 | const handleSubmit = () => { |