Unified · Split
| @@ -308,6 +308,7 @@ export function ThemeEditorPanel({ · 307 unmodified lines | |||
| 308 | const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState< | 308 | const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState< |
| 309 | Record<ThemeAppearance, boolean> | 309 | Record<ThemeAppearance, boolean> |
| 310 | >({ light: false, dark: false }); | 310 | >({ light: false, dark: false }); |
| 311 | const [shouldRegenerateGuidedColors, setShouldRegenerateGuidedColors] = useState(false); | ||
| 311 | const [error, setError] = useState<string | null>(null); | 312 | const [error, setError] = useState<string | null>(null); |
| 312 | const [isMinimized, setIsMinimized] = useState(false); | 313 | const [isMinimized, setIsMinimized] = useState(false); |
| 313 | const [roleQuery, setRoleQuery] = useState(""); | 314 | const [roleQuery, setRoleQuery] = useState(""); |
| @@ -401,6 +402,10 @@ export function ThemeEditorPanel({ · 87 unmodified lines | |||
| 401 | // regenerate when the guided editor produced it. | 402 | // regenerate when the guided editor produced it. |
| 402 | setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true); | 403 | setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true); |
| 403 | setSimpleColorsDirtyByAppearance({ light: false, dark: false }); | 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 | setColorsByAppearance(nextColors); | 409 | setColorsByAppearance(nextColors); |
| 405 | setSelectedRole(null); | 410 | setSelectedRole(null); |
| 406 | setUsageCount(null); | 411 | setUsageCount(null); |
| @@ -497,6 +502,7 @@ export function ThemeEditorPanel({ · 90 unmodified lines | |||
| 497 | [activeAppearance]: true, | 502 | [activeAppearance]: true, |
| 498 | })); | 503 | })); |
| 499 | } | 504 | } |
| 505 | if (isAdvanced) setShouldRegenerateGuidedColors(true); | ||
| 500 | }, | 506 | }, |
| 501 | [activeAppearance, isAdvanced], | 507 | [activeAppearance, isAdvanced], |
| 502 | ); | 508 | ); |
| @@ -735,6 +741,7 @@ export function ThemeEditorPanel({ · 232 unmodified lines | |||
| 735 | if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) { | 741 | if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) { |
| 736 | setSelectedRole(null); | 742 | setSelectedRole(null); |
| 737 | } | 743 | } |
| 744 | if (!shouldRegenerateGuidedColors) return; | ||
| 738 | 745 | ||
| 739 | // Regenerate every appearance the theme will save, not just the visible | 746 | // Regenerate every appearance the theme will save, not just the visible |
| 740 | // one, so the palettes shown after toggling match what gets saved. | 747 | // one, so the palettes shown after toggling match what gets saved. |
| @@ -754,8 +761,9 @@ export function ThemeEditorPanel({ · 13 unmodified lines | |||
| 754 | } | 761 | } |
| 755 | return next; | 762 | return next; |
| 756 | }); | 763 | }); |
| 764 | setShouldRegenerateGuidedColors(false); | ||
| 757 | }, | 765 | }, |
| 758 | [activeAppearance, editingTheme, selectedRole], | 766 | [activeAppearance, editingTheme, selectedRole, shouldRegenerateGuidedColors], |
| 759 | ); | 767 | ); |
| 760 | 768 | ||
| 761 | const handleSubmit = () => { | 769 | const handleSubmit = () => { |