From 15358b6b54b5379ec18600a1ad0e9839c835e728 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 17 Mar 2026 19:18:47 +0000 Subject: [PATCH] [AI] Remove development theme (#7232) * [AI] Remove development theme Delete the development theme that was only available in non-production environments. Removes the theme file, its registration in the theme registry, type definitions, preference validation, ThemeSelector icon mapping, and Storybook configuration. https://claude.ai/code/session_01A1aEippeWppuwoRSCBPwby * Add release notes for PR #7232 --------- Co-authored-by: Claude Co-authored-by: github-actions[bot] --- .../component-library/.storybook/preview.tsx | 3 - .../src/components/ThemeSelector.tsx | 1 - packages/desktop-client/src/style/theme.tsx | 11 +- .../src/style/themes/development.ts | 249 ------------------ .../loot-core/src/server/preferences/app.ts | 1 - packages/loot-core/src/types/prefs.ts | 8 +- upcoming-release-notes/7232.md | 6 + 7 files changed, 8 insertions(+), 271 deletions(-) delete mode 100644 packages/desktop-client/src/style/themes/development.ts create mode 100644 upcoming-release-notes/7232.md diff --git a/packages/component-library/.storybook/preview.tsx b/packages/component-library/.storybook/preview.tsx index f2195d9650..61bf13af28 100644 --- a/packages/component-library/.storybook/preview.tsx +++ b/packages/component-library/.storybook/preview.tsx @@ -5,7 +5,6 @@ import type { Preview } from '@storybook/react-vite'; // Not ideal to import from desktop-client, but we need a source of truth for theme variables // TODO: this needs refactoring import * as darkTheme from '../../desktop-client/src/style/themes/dark'; -import * as developmentTheme from '../../desktop-client/src/style/themes/development'; import * as lightTheme from '../../desktop-client/src/style/themes/light'; import * as midnightTheme from '../../desktop-client/src/style/themes/midnight'; @@ -13,7 +12,6 @@ const THEMES = { light: lightTheme, dark: darkTheme, midnight: midnightTheme, - development: developmentTheme, } as const; type ThemeName = keyof typeof THEMES; @@ -64,7 +62,6 @@ const preview: Preview = { { value: 'light', title: 'Light' }, { value: 'dark', title: 'Dark' }, { value: 'midnight', title: 'Midnight' }, - { value: 'development', title: 'Development' }, ], }, }, diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx index 9afeaf9215..263c1e5553 100644 --- a/packages/desktop-client/src/components/ThemeSelector.tsx +++ b/packages/desktop-client/src/components/ThemeSelector.tsx @@ -33,7 +33,6 @@ export function ThemeSelector({ style }: ThemeSelectorProps) { dark: SvgMoonStars, auto: SvgSystem, midnight: SvgMoonStars, - development: SvgMoonStars, } as const; type ThemeIconKey = keyof typeof themeIcons; diff --git a/packages/desktop-client/src/style/theme.tsx b/packages/desktop-client/src/style/theme.tsx index a62e1fab6a..d2f3c9170b 100644 --- a/packages/desktop-client/src/style/theme.tsx +++ b/packages/desktop-client/src/style/theme.tsx @@ -1,11 +1,9 @@ import { useEffect, useMemo, useState } from 'react'; -import { isNonProductionEnvironment } from 'loot-core/shared/environment'; import type { DarkTheme, Theme } from 'loot-core/types/prefs'; import { parseInstalledTheme, validateThemeCss } from './customThemes'; import * as darkTheme from './themes/dark'; -import * as developmentTheme from './themes/development'; import * as lightTheme from './themes/light'; import * as midnightTheme from './themes/midnight'; @@ -17,9 +15,6 @@ const themes = { dark: { name: 'Dark', colors: darkTheme }, midnight: { name: 'Midnight', colors: midnightTheme }, auto: { name: 'System default', colors: darkTheme }, - ...(isNonProductionEnvironment() && { - development: { name: 'Development', colors: developmentTheme }, - }), } as const; type ThemeKey = keyof typeof themes; @@ -48,11 +43,7 @@ export function ThemeStyle() { const [activeTheme] = useTheme(); const [darkThemePreference] = usePreferredDarkTheme(); const [themeColors, setThemeColors] = useState< - | typeof lightTheme - | typeof darkTheme - | typeof midnightTheme - | typeof developmentTheme - | undefined + typeof lightTheme | typeof darkTheme | typeof midnightTheme | undefined >(undefined); useEffect(() => { diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts deleted file mode 100644 index a303b74157..0000000000 --- a/packages/desktop-client/src/style/themes/development.ts +++ /dev/null @@ -1,249 +0,0 @@ -import * as colorPalette from '@desktop-client/style/palette'; - -export const pageBackground = colorPalette.navy100; -export const pageBackgroundModalActive = colorPalette.navy200; -export const pageBackgroundTopLeft = colorPalette.navy100; -export const pageBackgroundBottomRight = colorPalette.blue150; -export const pageBackgroundLineTop = colorPalette.white; -export const pageBackgroundLineMid = colorPalette.navy100; -export const pageBackgroundLineBottom = colorPalette.blue150; -export const pageText = '#272630'; -export const pageTextLight = colorPalette.navy500; -export const pageTextSubdued = colorPalette.navy300; -export const pageTextDark = colorPalette.navy800; -export const pageTextPositive = colorPalette.purple600; -export const pageTextLink = colorPalette.blue600; -export const pageTextLinkLight = colorPalette.blue300; - -export const cardBackground = colorPalette.white; -export const cardBorder = colorPalette.purple700; -export const cardShadow = colorPalette.navy700; - -export const tableBackground = colorPalette.white; -export const tableRowBackgroundHover = colorPalette.navy50; -export const tableText = pageText; -export const tableTextLight = colorPalette.navy400; -export const tableTextSubdued = colorPalette.navy100; -export const tableTextSelected = colorPalette.navy700; -export const tableTextHover = colorPalette.navy900; -export const tableTextInactive = colorPalette.navy500; -export const tableHeaderText = colorPalette.navy600; -export const tableHeaderBackground = colorPalette.white; -export const tableBorder = colorPalette.navy100; -export const tableBorderSelected = colorPalette.purple500; -export const tableBorderHover = colorPalette.purple400; -export const tableBorderSeparator = colorPalette.navy400; -export const tableRowBackgroundHighlight = colorPalette.blue150; -export const tableRowBackgroundHighlightText = colorPalette.navy700; -export const tableRowHeaderBackground = colorPalette.navy50; -export const tableRowHeaderText = colorPalette.navy800; - -export const numberPositive = colorPalette.green700; -export const numberNegative = colorPalette.red500; -export const numberNeutral = colorPalette.navy100; -export const budgetNumberNegative = numberNegative; -export const budgetNumberZero = tableTextSubdued; -export const budgetNumberNeutral = tableText; -export const budgetNumberPositive = budgetNumberNeutral; -export const templateNumberFunded = numberPositive; -export const templateNumberUnderFunded = colorPalette.orange700; -export const toBudgetPositive = numberPositive; -export const toBudgetZero = numberPositive; -export const toBudgetNegative = budgetNumberNegative; - -export const sidebarBackground = colorPalette.navy900; -export const sidebarItemBackgroundPending = colorPalette.orange200; -export const sidebarItemBackgroundPositive = colorPalette.green500; -export const sidebarItemBackgroundFailed = colorPalette.red300; -export const sidebarItemBackgroundHover = colorPalette.navy800; -export const sidebarItemAccentSelected = colorPalette.purple200; -export const sidebarItemText = colorPalette.navy150; -export const sidebarItemTextSelected = colorPalette.purple200; -export const sidebarBudgetName = colorPalette.navy150; - -export const menuBackground = colorPalette.white; -export const menuItemBackground = colorPalette.navy50; -export const menuItemBackgroundHover = colorPalette.navy100; -export const menuItemText = colorPalette.navy900; -export const menuItemTextHover = menuItemText; -export const menuItemTextSelected = colorPalette.purple300; -export const menuItemTextHeader = colorPalette.navy400; -export const menuBorder = colorPalette.navy100; -export const menuBorderHover = colorPalette.purple100; -export const menuKeybindingText = colorPalette.navy400; -export const menuAutoCompleteBackground = colorPalette.navy900; -export const menuAutoCompleteBackgroundHover = colorPalette.navy600; -export const menuAutoCompleteText = colorPalette.white; -export const menuAutoCompleteTextHeader = colorPalette.orange150; -export const menuAutoCompleteItemText = menuAutoCompleteText; - -export const modalBackground = colorPalette.white; -export const modalBorder = colorPalette.white; -export const mobileHeaderBackground = colorPalette.purple400; -export const mobileHeaderText = colorPalette.navy50; -export const mobileHeaderTextSubdued = colorPalette.gray200; -export const mobileHeaderTextHover = 'rgba(200, 200, 200, .15)'; -export const mobilePageBackground = colorPalette.navy50; -export const mobileNavBackground = colorPalette.white; -export const mobileNavItem = colorPalette.gray300; -export const mobileNavItemSelected = colorPalette.purple500; -export const mobileAccountShadow = colorPalette.navy300; -export const mobileAccountText = colorPalette.blue800; -export const mobileTransactionSelected = colorPalette.purple500; - -// Mobile view themes (for the top bar) -export const mobileViewTheme = mobileHeaderBackground; -export const mobileConfigServerViewTheme = colorPalette.purple500; - -export const markdownNormal = colorPalette.purple150; -export const markdownDark = colorPalette.purple400; -export const markdownLight = colorPalette.purple100; - -// Button -export const buttonMenuText = colorPalette.navy100; -export const buttonMenuTextHover = colorPalette.navy50; -export const buttonMenuBackground = 'transparent'; -export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)'; -export const buttonMenuBorder = colorPalette.navy500; -export const buttonMenuSelectedText = colorPalette.green800; -export const buttonMenuSelectedTextHover = colorPalette.orange800; -export const buttonMenuSelectedBackground = colorPalette.orange200; -export const buttonMenuSelectedBackgroundHover = colorPalette.orange300; -export const buttonMenuSelectedBorder = buttonMenuSelectedBackground; - -export const buttonPrimaryText = colorPalette.white; -export const buttonPrimaryTextHover = buttonPrimaryText; -export const buttonPrimaryBackground = colorPalette.purple500; -export const buttonPrimaryBackgroundHover = buttonPrimaryBackground; -export const buttonPrimaryBorder = buttonPrimaryBackground; -export const buttonPrimaryShadow = 'rgba(0, 0, 0, 0.3)'; -export const buttonPrimaryDisabledText = colorPalette.white; -export const buttonPrimaryDisabledBackground = colorPalette.navy300; -export const buttonPrimaryDisabledBorder = buttonPrimaryDisabledBackground; - -export const buttonNormalText = colorPalette.navy900; -export const buttonNormalTextHover = buttonNormalText; -export const buttonNormalBackground = colorPalette.white; -export const buttonNormalBackgroundHover = buttonNormalBackground; -export const buttonNormalBorder = colorPalette.navy150; -export const buttonNormalShadow = 'rgba(0, 0, 0, 0.2)'; -export const buttonNormalSelectedText = colorPalette.white; -export const buttonNormalSelectedBackground = colorPalette.blue600; -export const buttonNormalDisabledText = colorPalette.navy300; -export const buttonNormalDisabledBackground = buttonNormalBackground; -export const buttonNormalDisabledBorder = buttonNormalBorder; - -export const calendarText = colorPalette.navy50; -export const calendarBackground = colorPalette.navy900; -export const calendarItemText = colorPalette.navy150; -export const calendarItemBackground = colorPalette.navy800; -export const calendarSelectedBackground = colorPalette.navy500; - -export const buttonBareText = buttonNormalText; -export const buttonBareTextHover = buttonNormalText; -export const buttonBareBackground = 'transparent'; -export const buttonBareBackgroundHover = 'rgba(100, 100, 100, .15)'; -export const buttonBareBackgroundActive = 'rgba(100, 100, 100, .25)'; -export const buttonBareDisabledText = buttonNormalDisabledText; -export const buttonBareDisabledBackground = buttonBareBackground; - -export const noticeBackground = colorPalette.green150; -export const noticeBackgroundLight = colorPalette.green100; -export const noticeBackgroundDark = colorPalette.green500; -export const noticeText = colorPalette.green700; -export const noticeTextLight = colorPalette.green500; -export const noticeTextDark = colorPalette.green900; -export const noticeTextMenu = colorPalette.green200; -export const noticeBorder = colorPalette.green500; -export const warningBackground = colorPalette.orange200; -export const warningText = colorPalette.orange700; -export const warningTextLight = colorPalette.orange500; -export const warningTextDark = colorPalette.orange900; -export const warningBorder = colorPalette.orange500; -export const errorBackground = colorPalette.red100; -export const errorText = colorPalette.red500; -export const errorTextDark = colorPalette.red700; -export const errorTextDarker = colorPalette.red900; -export const errorTextMenu = colorPalette.red200; -export const errorBorder = colorPalette.red500; -export const upcomingBackground = colorPalette.purple100; -export const upcomingText = colorPalette.purple700; -export const upcomingBorder = colorPalette.purple500; - -export const formLabelText = colorPalette.blue600; -export const formLabelBackground = colorPalette.blue200; -export const formInputBackground = colorPalette.navy50; -export const formInputBackgroundSelected = colorPalette.white; -export const formInputBackgroundSelection = colorPalette.purple500; -export const formInputBorder = colorPalette.navy150; -export const formInputTextReadOnlySelection = colorPalette.navy50; -export const formInputBorderSelected = colorPalette.purple500; -export const formInputText = colorPalette.navy900; -export const formInputTextSelected = colorPalette.navy50; -export const formInputTextPlaceholder = colorPalette.navy300; -export const formInputTextPlaceholderSelected = colorPalette.navy200; -export const formInputTextSelection = colorPalette.navy100; -export const formInputShadowSelected = colorPalette.purple300; -export const formInputTextHighlight = colorPalette.purple200; -export const checkboxText = tableBackground; -export const checkboxBackgroundSelected = colorPalette.blue500; -export const checkboxBorderSelected = colorPalette.blue500; -export const checkboxShadowSelected = colorPalette.blue300; -export const checkboxToggleBackground = colorPalette.gray400; -export const checkboxToggleBackgroundSelected = colorPalette.purple600; -export const checkboxToggleDisabled = colorPalette.gray200; - -export const pillBackground = colorPalette.navy150; -export const pillBackgroundLight = colorPalette.navy50; -export const pillText = colorPalette.navy800; -export const pillTextHighlighted = colorPalette.purple600; -export const pillBorder = colorPalette.navy150; -export const pillBorderDark = colorPalette.navy300; -export const pillBackgroundSelected = colorPalette.blue150; -export const pillTextSelected = colorPalette.blue900; -export const pillBorderSelected = colorPalette.purple500; -export const pillTextSubdued = colorPalette.navy200; - -export const reportsRed = colorPalette.red300; -export const reportsBlue = colorPalette.blue400; -export const reportsGreen = colorPalette.green400; -export const reportsGray = colorPalette.gray400; -export const reportsLabel = colorPalette.navy900; -export const reportsInnerLabel = colorPalette.navy800; -export const reportsNumberPositive = numberPositive; -export const reportsNumberNegative = numberNegative; -export const reportsNumberNeutral = numberNeutral; -export const reportsChartFill = reportsNumberPositive; - -export const noteTagBackground = colorPalette.purple125; -export const noteTagBackgroundHover = colorPalette.purple150; -export const noteTagDefault = colorPalette.purple125; -export const noteTagText = colorPalette.black; - -export const budgetCurrentMonth = tableBackground; -export const budgetOtherMonth = colorPalette.gray50; -export const budgetHeaderCurrentMonth = budgetOtherMonth; -export const budgetHeaderOtherMonth = colorPalette.gray80; - -export const floatingActionBarBackground = colorPalette.purple400; -export const floatingActionBarBorder = floatingActionBarBackground; -export const floatingActionBarText = colorPalette.navy50; - -export const tooltipText = colorPalette.navy900; -export const tooltipBackground = colorPalette.navy50; -export const tooltipBorder = colorPalette.navy150; - -export const calendarCellBackground = colorPalette.navy100; - -export const overlayBackground = 'rgba(0, 0, 0, 0.3)'; - -// Chart colors - Qualitative scale (9 colors) -export const chartQual1 = colorPalette.chartQual1; -export const chartQual2 = colorPalette.chartQual2; -export const chartQual3 = colorPalette.chartQual3; -export const chartQual4 = colorPalette.chartQual4; -export const chartQual5 = colorPalette.chartQual5; -export const chartQual6 = colorPalette.chartQual6; -export const chartQual7 = colorPalette.chartQual7; -export const chartQual8 = colorPalette.chartQual8; -export const chartQual9 = colorPalette.chartQual9; diff --git a/packages/loot-core/src/server/preferences/app.ts b/packages/loot-core/src/server/preferences/app.ts index f18f9e5bc4..7b4d7f9f1f 100644 --- a/packages/loot-core/src/server/preferences/app.ts +++ b/packages/loot-core/src/server/preferences/app.ts @@ -170,7 +170,6 @@ async function loadGlobalPrefs(): Promise { theme === 'light' || theme === 'dark' || theme === 'auto' || - theme === 'development' || theme === 'midnight' ? theme : 'auto', diff --git a/packages/loot-core/src/types/prefs.ts b/packages/loot-core/src/types/prefs.ts index cf65d98e41..6d47b3e0b0 100644 --- a/packages/loot-core/src/types/prefs.ts +++ b/packages/loot-core/src/types/prefs.ts @@ -92,13 +92,7 @@ export type LocalPrefs = Partial<{ 'mobile.showSpentColumn': boolean; }>; -export type Theme = - | 'light' - | 'dark' - | 'auto' - | 'midnight' - | 'development' - | string; +export type Theme = 'light' | 'dark' | 'auto' | 'midnight' | string; export type DarkTheme = 'dark' | 'midnight'; // GlobalPrefs are the parsed global-store.json values diff --git a/upcoming-release-notes/7232.md b/upcoming-release-notes/7232.md new file mode 100644 index 0000000000..c02f8b1f4e --- /dev/null +++ b/upcoming-release-notes/7232.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Remove development theme from all configurations and components across multiple packages.