mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-21 06:58:47 -05:00
[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 <noreply@anthropic.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Matiss Janis Aboltins
committed by
GitHub
GitHub
parent
6d9b1a1d72
commit
15358b6b54
@@ -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' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -33,7 +33,6 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
|
||||
dark: SvgMoonStars,
|
||||
auto: SvgSystem,
|
||||
midnight: SvgMoonStars,
|
||||
development: SvgMoonStars,
|
||||
} as const;
|
||||
|
||||
type ThemeIconKey = keyof typeof themeIcons;
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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;
|
||||
@@ -170,7 +170,6 @@ async function loadGlobalPrefs(): Promise<GlobalPrefs> {
|
||||
theme === 'light' ||
|
||||
theme === 'dark' ||
|
||||
theme === 'auto' ||
|
||||
theme === 'development' ||
|
||||
theme === 'midnight'
|
||||
? theme
|
||||
: 'auto',
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user