Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color Consolidations #1868

Merged
merged 21 commits into from
Nov 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/desktop-client/src/components/NotesButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ function NotesTooltip({
minWidth: 350,
minHeight: 120,
outline: 'none',
backgroundColor: theme.tableBackground,
color: theme.tableText,
})}`}
value={notes || ''}
onChange={e => setNotes(e.target.value)}
Expand Down
4 changes: 2 additions & 2 deletions packages/desktop-client/src/components/accounts/Balance.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function DetailedBalance({ name, balance, isExactBalance = true }) {
marginLeft: 15,
borderRadius: 4,
padding: '4px 6px',
color: theme.alt2PillText,
color: theme.pillText,
backgroundColor: theme.pillBackground,
}}
>
Expand Down Expand Up @@ -172,7 +172,7 @@ export function Balances({
width: 10,
height: 10,
marginLeft: 10,
color: theme.alt2PillText,
color: theme.pillText,
transform: showExtraBalances ? 'rotateZ(180deg)' : 'rotateZ(0)',
}}
/>
Expand Down
9 changes: 7 additions & 2 deletions packages/desktop-client/src/components/accounts/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,12 @@ export function AccountHeader({
: accountName}
</View>

{account && <NotesButton id={`account-${account.id}`} />}
{account && (
<NotesButton
id={`account-${account.id}`}
defaultColor={theme.pageTextSubdued}
/>
)}
<Button
type="bare"
className="hover-visible"
Expand All @@ -170,7 +175,7 @@ export function AccountHeader({
style={{
width: 11,
height: 11,
color: theme.altButtonBareText,
color: theme.pageTextSubdued,
}}
/>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/alerts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Alert = ({
padding: 10,
flexDirection: 'row',
'& a, & a:active, & a:visited': {
color: theme.altFormLabelText,
color: theme.formLabelText,
},
...style,
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function MonthCountSelector({
calendars.push(
<Calendar
key={i}
color={maxMonths >= i ? theme.pageTextLight : theme.altButtonBareText}
color={maxMonths >= i ? theme.pageTextLight : theme.pageTextSubdued}
onClick={() => onChange(i)}
/>,
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ export function BudgetSummary({
<DotsHorizontalTriple
width={15}
height={15}
style={{ color: theme.alt2PillText }}
style={{ color: theme.pageTextLight }}
/>
</Button>
{menuOpen && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ function OpButton({ op, selected, style, onClick }) {
<Button
type="bare"
style={{
backgroundColor: theme.altbuttonMenuBackground,
backgroundColor: theme.pillBackground,
marginBottom: 5,
...style,
...(selected && {
Expand Down
12 changes: 6 additions & 6 deletions packages/desktop-client/src/components/forms.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const SectionLabel = ({ title, style }: SectionLabelProps) => {
style={{
fontWeight: 500,
textTransform: 'uppercase',
color: theme.altFormLabelText,
color: theme.formLabelText,
marginBottom: 5,
lineHeight: '1em',
...style,
Expand Down Expand Up @@ -89,15 +89,15 @@ export const Checkbox = (props: CheckboxProps) => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.tableBackground,
color: theme.checkboxText,
backgroundColor: theme.tableBackground,
':checked': {
border: '1px solid ' + theme.altFormInputBorderSelected,
backgroundColor: theme.tableTextEditingBackground,
border: '1px solid ' + theme.checkboxBorderSelected,
backgroundColor: theme.checkboxBackgroundSelected,
'::after': {
display: 'block',
background:
theme.tableTextEditingBackground +
theme.checkboxBackgroundSelected +
// eslint-disable-next-line rulesdir/typography
' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
width: 9,
Expand All @@ -112,7 +112,7 @@ export const Checkbox = (props: CheckboxProps) => {
bottom: -5,
left: -5,
right: -5,
border: '2px solid ' + theme.altFormInputBorderSelected,
border: '2px solid ' + theme.checkboxBorderSelected,
borderRadius: 6,
content: ' ',
},
Expand Down
6 changes: 3 additions & 3 deletions packages/desktop-client/src/components/manager/Import.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,19 @@ function Import({ modalProps, actions }) {

<Button style={itemStyle} onClick={() => onSelectType('ynab4')}>
<span style={{ fontWeight: 700 }}>YNAB4</span>
<View style={{ color: theme.alt2PillText }}>
<View style={{ color: theme.pageTextLight }}>
The old unsupported desktop app
</View>
</Button>
<Button style={itemStyle} onClick={() => onSelectType('ynab5')}>
<span style={{ fontWeight: 700 }}>nYNAB</span>
<View style={{ color: theme.alt2PillText }}>
<View style={{ color: theme.pageTextLight }}>
<div>The newer web app</div>
</View>
</Button>
<Button style={itemStyle} onClick={() => onSelectType('actual')}>
<span style={{ fontWeight: 700 }}>Actual</span>
<View style={{ color: theme.alt2PillText }}>
<View style={{ color: theme.pageTextLight }}>
<div>Import a file exported from Actual</div>
</View>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/modals/EditField.js
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
title={label}
style={{
alignSelf: 'center',
color: theme.altMobileModalText,
color: theme.mobileModalText,
marginBottom: 10,
}}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/desktop-client/src/components/modals/EditRule.js
Original file line number Diff line number Diff line change
Expand Up @@ -755,8 +755,8 @@ export default function EditRule({
}

let editorStyle = {
color: theme.altPillText,
backgroundColor: theme.altPillBackground,
color: theme.pillText,
backgroundColor: theme.pillBackground,
borderRadius: 4,
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export default function GoCardlessExternalMsg({
be misconfigured. Please{' '}
<LinkButton
onClick={onGoCardlessInit}
style={{ color: theme.altFormLabelText, display: 'inline' }}
style={{ color: theme.formLabelText, display: 'inline' }}
>
set them up
</LinkButton>{' '}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ export default function ActionExpression({
style={{
display: 'block',
maxWidth: '100%',
color: theme.altPillText,
backgroundColor: theme.altPillBackground,
color: theme.pillText,
backgroundColor: theme.pillBackground,
borderRadius: 4,
padding: '3px 5px',
whiteSpace: 'nowrap',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ export default function ConditionExpression({
style={{
display: 'block',
maxWidth: '100%',
color: theme.altPillText,
backgroundColor: theme.altPillBackground,
color: theme.pillText,
backgroundColor: theme.pillBackground,
borderRadius: 4,
padding: '3px 5px',
whiteSpace: 'nowrap',
Expand Down
14 changes: 7 additions & 7 deletions packages/desktop-client/src/components/select/DateSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ import DateSelectRight from './DateSelect.right.png';

let pickerStyles = {
'& .pika-single.actual-date-picker': {
color: theme.sidebarItemTextHover,
background: theme.sidebarBackground,
color: theme.calendarText,
background: theme.calendarBackground,
border: 'none',
boxShadow: '0 0px 4px rgba(0, 0, 0, .25)',
borderRadius: 4,
Expand All @@ -49,7 +49,7 @@ let pickerStyles = {
},
// month/year
'& .pika-label': {
backgroundColor: theme.sidebarBackground,
backgroundColor: theme.calendarBackground,
},
// Back/forward buttons
'& .pika-prev': {
Expand All @@ -60,19 +60,19 @@ let pickerStyles = {
},
// Day of week
'& .pika-table th': {
color: theme.sidebarItemText,
color: theme.calendarItemText,
'& abbr': { textDecoration: 'none' },
},
// Numbered days
'& .pika-button': {
backgroundColor: theme.sidebarItemBackgroundHover,
color: theme.sidebarItemText,
backgroundColor: theme.calendarItemBackground,
color: theme.calendarItemText,
},
'& .is-today .pika-button': {
textDecoration: 'underline',
},
'& .is-selected .pika-button': {
backgroundColor: theme.altButtonNormalSelectedBackground,
backgroundColor: theme.calendarSelectedBackground,
boxShadow: 'none',
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/settings/UI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => {
alignItems: 'flex-start',
padding: 15,
borderRadius: 4,
border: '1px solid ' + theme.altPillBorder,
border: '1px solid ' + theme.pillBorderDark,
width: '100%',
},
style,
Expand Down
10 changes: 5 additions & 5 deletions packages/desktop-client/src/components/table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -634,15 +634,15 @@ export function SelectCell({
alignItems: 'center',
borderRadius: 3,
border: selected
? '1px solid ' + theme.altFormInputBorderSelected
? '1px solid ' + theme.checkboxBorderSelected
: '1px solid ' + theme.formInputBorder,
color: theme.tableBackground,
color: theme.checkboxText,
backgroundColor: selected
? theme.tableTextEditingBackground
? theme.checkboxBackgroundSelected
: theme.tableBackground,
':focus': {
border: '1px solid ' + theme.altFormInputBorderSelected,
boxShadow: '0 1px 2px ' + theme.altFormInputShadowSelected,
border: '1px solid ' + theme.checkboxBorderSelected,
boxShadow: '0 1px 2px ' + theme.checkboxShadowSelected,
},
}}
onEdit={onEdit}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -628,12 +628,12 @@ class TransactionEditInner extends PureComponent {
<SvgAdd
width={17}
height={17}
style={{ color: theme.altFormLabelText }}
style={{ color: theme.formLabelText }}
/>
<Text
style={{
...styles.text,
color: theme.altFormLabelText,
color: theme.formLabelText,
marginLeft: 5,
}}
>
Expand Down Expand Up @@ -990,7 +990,7 @@ class Transaction extends PureComponent {
height: 11,
color: cleared
? theme.noticeTextLight
: theme.altButtonBareText,
: theme.pageTextSubdued,
marginRight: 5,
}}
/>
Expand Down
30 changes: 15 additions & 15 deletions packages/desktop-client/src/style/themes/dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ export const tableTextLight = tableText;
export const tableTextSubdued = colorPalette.navy150;
export const tableTextSelected = colorPalette.navy150;
export const tableTextHover = colorPalette.navy400;
export const tableTextEditing = colorPalette.black;
export const tableTextEditingBackground = colorPalette.purple400;
export const tableTextInactive = colorPalette.navy500;
export const tableHeaderText = colorPalette.navy300;
export const tableHeaderBackground = colorPalette.navy700;
Expand Down Expand Up @@ -77,7 +75,6 @@ export const mobileAccountShadow = cardShadow;
export const mobileAccountText = colorPalette.blue800;
export const mobileModalBackground = colorPalette.navy900;
export const mobileModalText = colorPalette.white;
export const altMobileModalText = colorPalette.blue100;
export const mobileDateBackground = colorPalette.navy100;

// Mobile view themes (for the top bar)
Expand All @@ -88,6 +85,10 @@ export const mobileConfigServerViewTheme = colorPalette.purple500;
export const mobileSettingsViewTheme = colorPalette.navy50;
export const mobileTransactionViewTheme = colorPalette.purple500;

export const markdownNormal = colorPalette.purple700;
export const markdownDark = colorPalette.purple500;
export const markdownLight = colorPalette.purple800;

// Button
export const buttonMenuText = colorPalette.navy900;
export const buttonMenuTextHover = buttonMenuText;
Expand Down Expand Up @@ -116,18 +117,19 @@ export const buttonNormalBackground = colorPalette.navy800;
export const buttonNormalBackgroundHover = colorPalette.navy600;
export const buttonNormalBorder = colorPalette.navy300;
export const buttonNormalShadow = 'rgba(0, 0, 0, 0.4)';

export const altbuttonMenuBackground = buttonNormalBackground;
export const buttonNormalSelectedText = colorPalette.white;
export const buttonNormalSelectedBackground = colorPalette.purple600;
export const altButtonNormalSelectedBackground = buttonNormalSelectedBackground;

export const buttonNormalDisabledText = colorPalette.navy500;
export const buttonNormalDisabledBackground = colorPalette.navy800;
export const buttonNormalDisabledBorder = colorPalette.navy500;

export const calendarText = colorPalette.navy50;
export const calendarBackground = colorPalette.navy900;
export const calendarItemText = colorPalette.navy150;
export const calendarItemBackground = colorPalette.navy800;
export const calendarSelectedBackground = buttonNormalSelectedBackground;

export const buttonBareText = buttonNormalText;
export const altButtonBareText = buttonBareText;
export const buttonBareTextHover = buttonNormalText;
export const buttonBareBackground = 'transparent';
export const buttonBareBackgroundHover = 'rgba(200, 200, 200, .3)';
Expand Down Expand Up @@ -159,35 +161,33 @@ export const upcomingText = colorPalette.purple100;
export const upcomingBorder = tableBorder;

export const formLabelText = colorPalette.purple150;
export const altFormLabelText = formLabelText;
export const formLabelBackground = colorPalette.blue900;
export const formInputBackground = colorPalette.navy800;
export const formInputBackgroundSelected = colorPalette.navy700;
export const formInputBackgroundSelection = colorPalette.purple400;
export const formInputBorder = colorPalette.navy600;
export const formInputTextReadOnlySelection = colorPalette.navy800;
export const formInputBorderSelected = colorPalette.purple400;
export const altFormInputBorderSelected = formInputBorderSelected;
export const formInputText = colorPalette.navy150;
export const formInputTextSelected = colorPalette.black;
export const formInputTextPlaceholder = colorPalette.navy150;
export const formInputTextPlaceholderSelected = colorPalette.navy100;
export const formInputTextSelection = colorPalette.navy800;
export const formInputShadowSelected = colorPalette.purple200;
export const altFormInputShadowSelected = formInputShadowSelected;
export const formInputTextHighlight = colorPalette.purple400;
export const checkboxText = tableText;
export const checkboxBackgroundSelected = colorPalette.purple300;
export const checkboxBorderSelected = colorPalette.purple300;
export const checkboxShadowSelected = colorPalette.purple500;

export const pillBackground = colorPalette.navy800;
export const pillText = colorPalette.navy200;
export const pillTextHighlighted = colorPalette.purple500;
export const pillBorder = colorPalette.navy700;
export const altPillBorder = pillBorder;
export const pillBorderDark = pillBorder;
export const pillBackgroundSelected = colorPalette.purple600;
export const pillTextSelected = colorPalette.navy150;
export const pillBorderSelected = colorPalette.purple400;
export const altPillBackground = pillBackground;
export const altPillText = pillText;
export const alt2PillText = pillText;

export const reportsRed = colorPalette.red300;
export const reportsBlue = colorPalette.blue400;
Expand Down
Loading