mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-11 20:44:32 -05:00
405c8b986f
* add user defined tag colors * use DB to store tag colors * change specific tags_colors to generic tags * move tag customization to its own page (pt. 1) * move tag customization to its own page (pt. 2), edit description * move tag customization to its own page (pt. 3), better default tag mgmt * move tag customization to its own page (pt. 4), tag creation * move tag customization to its own page (pt. 5), remove tags settings * Update VRT * nitpicking & code rabbit fixing * remove spaces from tag and better partial Tag typing * add tag similar to transaction add * peer review updates (live preview) * enable keyboard navigation * fix lint errors * live input for color picker * disable 3 digit hex color live input * add context menu * add tags link to command bar * Update VRT * Update VRT * fix lint issues --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: youngcw <calebyoung94@gmail.com>
205 lines
11 KiB
TypeScript
205 lines
11 KiB
TypeScript
export const theme = {
|
|
pageBackground: 'var(--color-pageBackground)',
|
|
pageBackgroundModalActive: 'var(--color-pageBackgroundModalActive)',
|
|
pageBackgroundTopLeft: 'var(--color-pageBackgroundTopLeft)',
|
|
pageBackgroundBottomRight: 'var(--color-pageBackgroundBottomRight)',
|
|
pageBackgroundLineTop: 'var(--color-pageBackgroundLineTop)',
|
|
pageBackgroundLineMid: 'var(--color-pageBackgroundLineMid)',
|
|
pageBackgroundLineBottom: 'var(--color-pageBackgroundLineBottom)',
|
|
pageText: 'var(--color-pageText)',
|
|
pageTextLight: 'var(--color-pageTextLight)',
|
|
pageTextSubdued: 'var(--color-pageTextSubdued)',
|
|
pageTextDark: 'var(--color-pageTextDark)',
|
|
pageTextPositive: 'var(--color-pageTextPositive)',
|
|
pageTextLink: 'var(--color-pageTextLink)',
|
|
pageTextLinkLight: 'var(--color-pageTextLinkLight)',
|
|
cardBackground: 'var(--color-cardBackground)',
|
|
cardBorder: 'var(--color-cardBorder)',
|
|
cardShadow: 'var(--color-cardShadow)',
|
|
tableBackground: 'var(--color-tableBackground)',
|
|
tableRowBackgroundHover: 'var(--color-tableRowBackgroundHover)',
|
|
tableText: 'var(--color-tableText)',
|
|
tableTextLight: 'var(--color-tableTextLight)',
|
|
tableTextSubdued: 'var(--color-tableTextSubdued)',
|
|
tableTextSelected: 'var(--color-tableTextSelected)',
|
|
tableTextHover: 'var(--color-tableTextHover)',
|
|
tableTextInactive: 'var(--color-tableTextInactive)',
|
|
tableHeaderText: 'var(--color-tableHeaderText)',
|
|
tableHeaderBackground: 'var(--color-tableHeaderBackground)',
|
|
tableBorder: 'var(--color-tableBorder)',
|
|
tableBorderSelected: 'var(--color-tableBorderSelected)',
|
|
tableBorderHover: 'var(--color-tableBorderHover)',
|
|
tableBorderSeparator: 'var(--color-tableBorderSeparator)',
|
|
tableRowBackgroundHighlight: 'var(--color-tableRowBackgroundHighlight)',
|
|
tableRowBackgroundHighlightText:
|
|
'var(--color-tableRowBackgroundHighlightText)',
|
|
tableRowHeaderBackground: 'var(--color-tableRowHeaderBackground)',
|
|
tableRowHeaderText: 'var(--color-tableRowHeaderText)',
|
|
sidebarBackground: 'var(--color-sidebarBackground)',
|
|
sidebarItemBackgroundPending: 'var(--color-sidebarItemBackgroundPending)',
|
|
sidebarItemBackgroundPositive: 'var(--color-sidebarItemBackgroundPositive)',
|
|
sidebarItemBackgroundFailed: 'var(--color-sidebarItemBackgroundFailed)',
|
|
sidebarItemAccentSelected: 'var(--color-sidebarItemAccentSelected)',
|
|
sidebarItemBackgroundHover: 'var(--color-sidebarItemBackgroundHover)',
|
|
sidebarItemText: 'var(--color-sidebarItemText)',
|
|
sidebarItemTextSelected: 'var(--color-sidebarItemTextSelected)',
|
|
menuBackground: 'var(--color-menuBackground)',
|
|
menuItemBackground: 'var(--color-menuItemBackground)',
|
|
menuItemBackgroundHover: 'var(--color-menuItemBackgroundHover)',
|
|
menuItemText: 'var(--color-menuItemText)',
|
|
menuItemTextHover: 'var(--color-menuItemTextHover)',
|
|
menuItemTextSelected: 'var(--color-menuItemTextSelected)',
|
|
menuItemTextHeader: 'var(--color-menuItemTextHeader)',
|
|
menuBorder: 'var(--color-menuBorder)',
|
|
menuBorderHover: 'var(--color-menuBorderHover)',
|
|
menuKeybindingText: 'var(--color-menuKeybindingText)',
|
|
menuAutoCompleteBackground: 'var(--color-menuAutoCompleteBackground)',
|
|
menuAutoCompleteBackgroundHover:
|
|
'var(--color-menuAutoCompleteBackgroundHover)',
|
|
menuAutoCompleteText: 'var(--color-menuAutoCompleteText)',
|
|
menuAutoCompleteTextHover: 'var(--color-menuAutoCompleteTextHover)',
|
|
menuAutoCompleteTextHeader: 'var(--color-menuAutoCompleteTextHeader)',
|
|
menuAutoCompleteItemTextHover: 'var(--color-menuAutoCompleteItemTextHover)',
|
|
menuAutoCompleteItemText: 'var(--color-menuAutoCompleteItemText)',
|
|
modalBackground: 'var(--color-modalBackground)',
|
|
modalBorder: 'var(--color-modalBorder)',
|
|
mobileHeaderBackground: 'var(--color-mobileHeaderBackground)',
|
|
mobileHeaderText: 'var(--color-mobileHeaderText)',
|
|
mobileHeaderTextSubdued: 'var(--color-mobileHeaderTextSubdued)',
|
|
mobileHeaderTextHover: 'var(--color-mobileHeaderTextHover)',
|
|
mobilePageBackground: 'var(--color-mobilePageBackground)',
|
|
mobileNavBackground: 'var(--color-mobileNavBackground)',
|
|
mobileNavItem: 'var(--color-mobileNavItem)',
|
|
mobileNavItemSelected: 'var(--color-mobileNavItemSelected)',
|
|
mobileAccountShadow: 'var(--color-mobileAccountShadow)',
|
|
mobileAccountText: 'var(--color-mobileAccountText)',
|
|
mobileTransactionSelected: 'var(--color-mobileTransactionSelected)',
|
|
mobileViewTheme: 'var(--color-mobileViewTheme)',
|
|
mobileConfigServerViewTheme: 'var(--color-mobileConfigServerViewTheme)',
|
|
markdownNormal: 'var(--color-markdownNormal)',
|
|
markdownDark: 'var(--color-markdownDark)',
|
|
markdownLight: 'var(--color-markdownLight)',
|
|
buttonMenuText: 'var(--color-buttonMenuText)',
|
|
buttonMenuTextHover: 'var(--color-buttonMenuTextHover)',
|
|
buttonMenuBackground: 'var(--color-buttonMenuBackground)',
|
|
buttonMenuBackgroundHover: 'var(--color-buttonMenuBackgroundHover)',
|
|
buttonMenuBorder: 'var(--color-buttonMenuBorder)',
|
|
buttonMenuSelectedText: 'var(--color-buttonMenuSelectedText)',
|
|
buttonMenuSelectedTextHover: 'var(--color-buttonMenuSelectedTextHover)',
|
|
buttonMenuSelectedBackground: 'var(--color-buttonMenuSelectedBackground)',
|
|
buttonMenuSelectedBackgroundHover:
|
|
'var(--color-buttonMenuSelectedBackgroundHover)',
|
|
buttonMenuSelectedBorder: 'var(--color-buttonMenuSelectedBorder)',
|
|
buttonPrimaryText: 'var(--color-buttonPrimaryText)',
|
|
buttonPrimaryTextHover: 'var(--color-buttonPrimaryTextHover)',
|
|
buttonPrimaryBackground: 'var(--color-buttonPrimaryBackground)',
|
|
buttonPrimaryBackgroundHover: 'var(--color-buttonPrimaryBackgroundHover)',
|
|
buttonPrimaryBorder: 'var(--color-buttonPrimaryBorder)',
|
|
buttonPrimaryShadow: 'var(--color-buttonPrimaryShadow)',
|
|
buttonPrimaryDisabledText: 'var(--color-buttonPrimaryDisabledText)',
|
|
buttonPrimaryDisabledBackground:
|
|
'var(--color-buttonPrimaryDisabledBackground)',
|
|
buttonPrimaryDisabledBorder: 'var(--color-buttonPrimaryDisabledBorder)',
|
|
buttonNormalText: 'var(--color-buttonNormalText)',
|
|
buttonNormalTextHover: 'var(--color-buttonNormalTextHover)',
|
|
buttonNormalBackground: 'var(--color-buttonNormalBackground)',
|
|
buttonNormalBackgroundHover: 'var(--color-buttonNormalBackgroundHover)',
|
|
buttonNormalBorder: 'var(--color-buttonNormalBorder)',
|
|
buttonNormalShadow: 'var(--color-buttonNormalShadow)',
|
|
buttonNormalSelectedText: 'var(--color-buttonNormalSelectedText)',
|
|
buttonNormalSelectedBackground: 'var(--color-buttonNormalSelectedBackground)',
|
|
buttonNormalDisabledText: 'var(--color-buttonNormalDisabledText)',
|
|
buttonNormalDisabledBackground: 'var(--color-buttonNormalDisabledBackground)',
|
|
buttonNormalDisabledBorder: 'var(--color-buttonNormalDisabledBorder)',
|
|
buttonBareText: 'var(--color-buttonBareText)',
|
|
buttonBareTextHover: 'var(--color-buttonBareTextHover)',
|
|
buttonBareBackground: 'var(--color-buttonBareBackground)',
|
|
buttonBareBackgroundHover: 'var(--color-buttonBareBackgroundHover)',
|
|
buttonBareBackgroundActive: 'var(--color-buttonBareBackgroundActive)',
|
|
buttonBareDisabledText: 'var(--color-buttonBareDisabledText)',
|
|
buttonBareDisabledBackground: 'var(--color-buttonBareDisabledBackground)',
|
|
calendarText: 'var(--color-calendarText)',
|
|
calendarBackground: 'var(--color-calendarBackground)',
|
|
calendarItemText: 'var(--color-calendarItemText)',
|
|
calendarItemBackground: 'var(--color-calendarItemBackground)',
|
|
calendarSelectedBackground: 'var(--color-calendarSelectedBackground)',
|
|
noticeBackground: 'var(--color-noticeBackground)',
|
|
noticeBackgroundLight: 'var(--color-noticeBackgroundLight)',
|
|
noticeBackgroundDark: 'var(--color-noticeBackgroundDark)',
|
|
noticeText: 'var(--color-noticeText)',
|
|
noticeTextLight: 'var(--color-noticeTextLight)',
|
|
noticeTextDark: 'var(--color-noticeTextDark)',
|
|
noticeTextMenu: 'var(--color-noticeTextMenu)',
|
|
noticeTextMenuHover: 'var(--color-noticeTextMenuHover)',
|
|
noticeBorder: 'var(--color-noticeBorder)',
|
|
warningBackground: 'var(--color-warningBackground)',
|
|
warningText: 'var(--color-warningText)',
|
|
warningTextLight: 'var(--color-warningTextLight)',
|
|
warningTextDark: 'var(--color-warningTextDark)',
|
|
warningBorder: 'var(--color-warningBorder)',
|
|
errorBackground: 'var(--color-errorBackground)',
|
|
errorText: 'var(--color-errorText)',
|
|
errorTextDark: 'var(--color-errorTextDark)',
|
|
errorTextDarker: 'var(--color-errorTextDarker)',
|
|
errorTextMenu: 'var(--color-errorTextMenu)',
|
|
errorBorder: 'var(--color-errorBorder)',
|
|
upcomingBackground: 'var(--color-upcomingBackground)',
|
|
upcomingText: 'var(--color-upcomingText)',
|
|
upcomingBorder: 'var(--color-upcomingBorder)',
|
|
formLabelText: 'var(--color-formLabelText)',
|
|
formLabelBackground: 'var(--color-formLabelBackground)',
|
|
formInputBackground: 'var(--color-formInputBackground)',
|
|
formInputBackgroundSelected: 'var(--color-formInputBackgroundSelected)',
|
|
formInputBackgroundSelection: 'var(--color-formInputBackgroundSelection)',
|
|
formInputBorder: 'var(--color-formInputBorder)',
|
|
formInputTextReadOnlySelection: 'var(--color-formInputTextReadOnlySelection)',
|
|
formInputBorderSelected: 'var(--color-formInputBorderSelected)',
|
|
formInputText: 'var(--color-formInputText)',
|
|
formInputTextSelected: 'var(--color-formInputTextSelected)',
|
|
formInputTextPlaceholder: 'var(--color-formInputTextPlaceholder)',
|
|
formInputTextPlaceholderSelected:
|
|
'var(--color-formInputTextPlaceholderSelected)',
|
|
formInputTextSelection: 'var(--color-formInputTextSelection)',
|
|
formInputShadowSelected: 'var(--color-formInputShadowSelected)',
|
|
formInputTextHighlight: 'var(--color-formInputTextHighlight)',
|
|
checkboxText: 'var(--color-checkboxText)',
|
|
checkboxBackgroundSelected: 'var(--color-checkboxBackgroundSelected)',
|
|
checkboxBorderSelected: 'var(--color-checkboxBorderSelected)',
|
|
checkboxShadowSelected: 'var(--color-checkboxShadowSelected)',
|
|
checkboxToggleBackground: 'var(--color-checkboxToggleBackground)',
|
|
checkboxToggleBackgroundSelected:
|
|
'var(--color-checkboxToggleBackgroundSelected)',
|
|
checkboxToggleDisabled: 'var(--color-checkboxToggleDisabled)',
|
|
pillBackground: 'var(--color-pillBackground)',
|
|
pillBackgroundLight: 'var(--color-pillBackgroundLight)',
|
|
pillText: 'var(--color-pillText)',
|
|
pillTextHighlighted: 'var(--color-pillTextHighlighted)',
|
|
pillBorder: 'var(--color-pillBorder)',
|
|
pillBorderDark: 'var(--color-pillBorderDark)',
|
|
pillBackgroundSelected: 'var(--color-pillBackgroundSelected)',
|
|
pillTextSelected: 'var(--color-pillTextSelected)',
|
|
pillBorderSelected: 'var(--color-pillBorderSelected)',
|
|
pillTextSubdued: 'var(--color-pillTextSubdued)',
|
|
reportsRed: 'var(--color-reportsRed)',
|
|
reportsBlue: 'var(--color-reportsBlue)',
|
|
reportsGreen: 'var(--color-reportsGreen)',
|
|
reportsGray: 'var(--color-reportsGray)',
|
|
reportsLabel: 'var(--color-reportsLabel)',
|
|
reportsInnerLabel: 'var(--color-reportsInnerLabel)',
|
|
noteTagBackground: 'var(--color-noteTagBackground)',
|
|
noteTagBackgroundHover: 'var(--color-noteTagBackgroundHover)',
|
|
noteTagDefault: 'var(--color-noteTagDefault)',
|
|
noteTagText: 'var(--color-noteTagText)',
|
|
budgetOtherMonth: 'var(--color-budgetOtherMonth)',
|
|
budgetCurrentMonth: 'var(--color-budgetCurrentMonth)',
|
|
budgetHeaderOtherMonth: 'var(--color-budgetHeaderOtherMonth)',
|
|
budgetHeaderCurrentMonth: 'var(--color-budgetHeaderCurrentMonth)',
|
|
floatingActionBarBackground: 'var(--color-floatingActionBarBackground)',
|
|
floatingActionBarBorder: 'var(--color-floatingActionBarBorder)',
|
|
floatingActionBarText: 'var(--color-floatingActionBarText)',
|
|
tooltipText: 'var(--color-tooltipText)',
|
|
tooltipBackground: 'var(--color-tooltipBackground)',
|
|
tooltipBorder: 'var(--color-tooltipBorder)',
|
|
calendarCellBackground: 'var(--color-calendarCellBackground)',
|
|
};
|