🔖 (25.3.1) (#4497)

* fix negative amount parsing (#4489)

* fix negative amount parsing

* note

* Remove used release notes

* Empty commit to bump ci

* Fix number input on mobile with hidden decimals (#4503)

* Fix number input on mobile with hidden decimals

* Add release notes

* Remove used release notes

* Empty commit to bump ci

* Bump non-server versions

* Bump sync-server

---------

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/actions/bump-package-versions

@@ -0,0 +1,30 @@
+#!/bin/bash
+set -euo pipefail
+
+if [ "$#" -gt 0 ]; then
+    version="${1#v}"
+else
+    version=""
+fi
+
+files_to_bump=(
+    packages/api/package.json
+    packages/desktop-client/package.json
+    packages/desktop-electron/package.json
+)
+
+for file in "${files_to_bump[@]}"; do
+    if [ -z "$version" ]; then
+        # version format: YY.MM.patch
+        # logic: if before the 25th, bump patch, else set minor/major to next month
+        version="$(jq -r .version "$file" | perl -e '($y,$m,$p)=split/\./,<>;$d=(localtime)[3];$d>25?($p=0,++$m,$m>12&&($m=1,++$y)):$p++;print"$y.$m.$p\n"')"
+        if [ -z "$version" ]; then
+            echo "Error: Failed to calculate new version" >&2
+            exit 1
+        fi
+    fi
+
+    echo "Bumping $file to version $version"
+    jq '.version = "'"$version"'"' "$file" > "$file.tmp"
+    mv "$file.tmp" "$file"
+done

.github/workflows/build.yml

@@ -68,3 +68,17 @@ jobs:
         with:
           name: build-stats
           path: packages/desktop-client/build-stats
+
+  server:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Server
+        run: cd packages/sync-server && yarn build
+      - name: Upload Build
+        uses: actions/upload-artifact@v4
+        with:
+          name: sync-server
+          path: packages/sync-server/build

.github/workflows/docker-edge.yml

@@ -0,0 +1,90 @@
+name: Build Edge Docker Image
+
+# Edge Docker images are built for every commit, and daily
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'packages/sync-server/**'
+  pull_request:
+    branches:
+      - master
+    paths:
+      - 'packages/sync-server/**'
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: write
+
+env:
+  IMAGES: |
+    actualbudget/actual-server
+    ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
+
+  # Creates the following tags:
+  # - actual-server:edge
+  TAGS: |
+    type=edge,value=edge
+    type=sha
+
+jobs:
+  build:
+    if: ${{ github.event.repository.fork == false }}
+    name: Build Docker image
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        os: [ubuntu, alpine]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          # Push to both Docker Hub and Github Container Registry
+          images: ${{ env.IMAGES }}
+          flavor: ${{ matrix.os != 'ubuntu' && format('suffix=-{0}', matrix.os) || '' }}
+          tags: ${{ env.TAGS }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        if: github.event_name != 'pull_request'
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download artifacts
+        run: ./packages/sync-server/docker/download-artifacts.sh
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          file: packages/sync-server/docker/edge-${{ matrix.os }}.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7${{ matrix.os == 'alpine' && ',linux/arm/v6' || '' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}

.github/workflows/docker-release.yml

@@ -0,0 +1,89 @@
+name: Build Stable Docker Image
+
+# Stable Docker images are built for every new tag
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+    paths-ignore:
+      - README.md
+      - LICENSE.txt
+
+env:
+  IMAGES: |
+    actualbudget/actual-server
+    ghcr.io/actualbudget/actual-server
+    ghcr.io/actualbudget/actual
+
+  # Creates the following tags:
+  # - actual-server:latest (see docker/metadata-action flavor inputs, below)
+  # - actual-server:1.3
+  # - actual-server:1.3.7
+  # - actual-server:sha-90dd603
+  TAGS: |
+    type=semver,pattern={{version}}
+
+jobs:
+  build:
+    name: Build Docker image
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          # Push to both Docker Hub and Github Container Registry
+          images: ${{ env.IMAGES }}
+          # Automatically update :latest
+          flavor: latest=true
+          tags: ${{ env.TAGS }}
+
+      - name: Docker meta for Alpine image
+        id: alpine-meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGES }}
+          # Automatically update :latest
+          flavor: |
+            latest=true
+            suffix=-alpine,onlatest=true
+          tags: ${{ env.TAGS }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push ubuntu image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          file: packages/sync-server/docker/stable-ubuntu.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: ${{ steps.meta.outputs.tags }}
+
+      - name: Build and push alpine image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          file: packages/sync-server/docker/stable-alpine.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+          tags: ${{ steps.alpine-meta.outputs.tags }}

.github/workflows/e2e-test.yml

@@ -1,6 +1,7 @@
 name: E2E Tests
 
-on: [pull_request]
+on:
+  pull_request:
 
 env:
   GITHUB_PR_NUMBER: ${{github.event.pull_request.number}}

.github/workflows/generate-release-pr.yml

@@ -0,0 +1,35 @@
+name: Generate release PR
+
+on:
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: 'Commit or branch to release'
+        required: true
+        default: 'master'
+      version:
+        description: 'Version number for the release (optional)'
+        required: false
+        default: ''
+
+jobs:
+  generate-release-pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.ref }}
+      - name: Bump package versions
+        id: bump_package_versions
+        shell: bash
+        run: |
+          .github/actions/bump-package-versions ${{ github.event.inputs.version }}
+          echo "version=$(jq -r .version packages/desktop-client/package.json)" > $GITHUB_OUTPUT
+      - name: Create PR
+        uses: peter-evans/create-pull-request@v7
+        with:
+          commit-message: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
+          title: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
+          body: 'Generated by [generate-release-pr.yml](../tree/master/.github/workflows/generate-release-pr.yml)'
+          branch: 'release/v${{ steps.bump_package_versions.outputs.version }}'

.github/workflows/size-compare.yml

@@ -13,6 +13,9 @@ name: Compare Sizes
 
 on:
   pull_request_target:
+    paths:
+      - 'packages/**'
+      - '!packages/sync-server/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}

bin/package-electron

@@ -36,6 +36,16 @@ fi
 
 yarn workspace loot-core build:node
 
+# Get translations
+echo "Updating translations..."
+if ! [ -d packages/desktop-client/locale ]; then
+    git clone https://github.com/actualbudget/translations packages/desktop-client/locale
+fi
+pushd packages/desktop-client/locale > /dev/null
+git pull
+popd > /dev/null
+packages/desktop-client/bin/remove-untranslated-languages
+
 yarn workspace @actual-app/web build --mode=desktop # electron specific build
 
 yarn workspace desktop-electron update-client

eslint.config.mjs

@@ -113,7 +113,6 @@ export default [
       'packages/loot-core/**/node_modules/*',
       'packages/loot-core/**/lib-dist/*',
       'packages/loot-core/**/proto/*',
-      'packages/sync-server',
       '.yarn/*',
       '.github/*',
     ],
@@ -671,7 +670,6 @@ export default [
   },
   {
     files: ['packages/loot-core/src/**/*'],
-
     rules: {
       'no-restricted-imports': [
         'warn',
@@ -691,6 +689,10 @@ export default [
               message:
                 'Please use relative imports in loot-core instead of importing from `loot-core/*`',
             },
+            {
+              group: ['@actual-app/web/*'],
+              message: 'Please do not import `@actual-app/web` in `loot-core`',
+            },
           ],
         },
       ],
@@ -758,7 +760,7 @@ export default [
       'packages/desktop-client/src/components/budget/MobileBudget.tsx',
       'packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx',
       'packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx',
-      'packages/desktop-client/src/components/common/Menu.tsx',
+      'packages/component-library/src/Menu.tsx',
       'packages/desktop-client/src/components/FinancesApp.tsx',
       'packages/desktop-client/src/components/GlobalKeys.ts',
       'packages/desktop-client/src/components/LoggedInUser.tsx',
@@ -788,20 +790,6 @@ export default [
       'packages/desktop-client/src/components/sidebar/Tools.tsx',
       'packages/desktop-client/src/components/sort.tsx',
       'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
-      'packages/desktop-client/src/components/table.tsx',
-      'packages/desktop-client/src/components/Titlebar.tsx',
-      'packages/desktop-client/src/components/transactions/MobileTransaction.jsx',
-      'packages/desktop-client/src/components/transactions/SelectedTransactions.jsx',
-      'packages/desktop-client/src/components/transactions/SimpleTransactionsTable.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionList.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionsTable.jsx',
-      'packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx',
-      'packages/desktop-client/src/hooks/useAccounts.ts',
-      'packages/desktop-client/src/hooks/useCategories.ts',
-      'packages/desktop-client/src/hooks/usePayees.ts',
-      'packages/desktop-client/src/hooks/useProperFocus.tsx',
-      'packages/desktop-client/src/hooks/useSelected.tsx',
-      'packages/loot-core/src/client/query-hooks.tsx',
     ],
 
     rules: {
@@ -815,6 +803,7 @@ export default [
       '**/*.test.ts',
       '**/*.test.jsx',
       '**/*.test.tsx',
+      '**/*.spec.js',
     ],
 
     rules: {
@@ -832,4 +821,21 @@ export default [
       '@typescript-eslint/consistent-type-definitions': ['warn', 'type'],
     },
   },
+  {
+    files: ['packages/sync-server/**/*'],
+    // TODO: fix the issues in these files
+    rules: {
+      'import/extensions': 'off',
+      'rulesdir/typography': 'off',
+    },
+  },
+  {
+    files: ['packages/sync-server/src/app-gocardless/banks/*.js'],
+    rules: {
+      'import/no-anonymous-default-export': 'off',
+      'import/no-default-export': 'off',
+      // can be re-enabled after https://github.com/actualbudget/actual/pull/4253
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
 ];

package.json

@@ -19,6 +19,9 @@
   },
   "scripts": {
     "start": "yarn start:browser",
+    "start:server": "yarn workspace @actual-app/sync-server start",
+    "start:server-monitor": "yarn workspace @actual-app/sync-server start-monitor",
+    "start:server-dev": "NODE_ENV=development BROWSER_OPEN=localhost:5006 yarn npm-run-all --parallel 'start:server-monitor' 'start'",
     "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
@@ -40,6 +43,7 @@
     "rebuild-node": "yarn workspace loot-core rebuild",
     "lint": "eslint . --max-warnings 0",
     "lint:verbose": "DEBUG=eslint:cli-engine eslint . --max-warnings 0",
+    "install:server": "yarn workspaces focus @actual-app/sync-server --production",
     "typecheck": "yarn tsc && tsc-strict",
     "jq": "./node_modules/node-jq/bin/jq",
     "prepare": "husky"

packages/api/index.ts

@@ -1,8 +1,7 @@
 import type {
   RequestInfo as FetchInfo,
   RequestInit as FetchInit,
-  // @ts-ignore: false-positive commonjs module error on build until typescript 5.3
-} from 'node-fetch'; // with { 'resolution-mode': 'import' };
+} from 'node-fetch';
 
 // loot-core types
 import type { InitConfig } from 'loot-core/server/main';
@@ -16,9 +15,6 @@ import { validateNodeVersion } from './validateNodeVersion';
 let actualApp: null | typeof bundle.lib;
 export const internal = bundle.lib;
 
-// DEPRECATED: remove the next line in @actual-app/api v7
-export * as methods from './methods';
-
 export * from './methods';
 export * as utils from './utils';
 

packages/api/methods.ts

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import type { Handlers } from 'loot-core/src/types/handlers';
+import type { Handlers } from 'loot-core/types/handlers';
 
 import * as injected from './injected';
 

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "25.2.0",
+  "version": "25.3.1",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {

packages/api/tsconfig.dist.json

@@ -11,7 +11,6 @@
     "outDir": "dist",
     "declarationDir": "@types",
     "paths": {
-      "loot-core/src/*": ["./loot-core/*"],
       "loot-core/*": ["./@types/loot-core/*"]
     }
   },

packages/component-library/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@actual-app/components",
+  "version": "0.0.1",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.2"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.4",
+    "react-aria-components": "^1.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "18.2.0"
+  },
+  "exports": {
+    "./icons/*": "./src/icons/*.tsx",
+    "./aligned-text": "./src/AlignedText.tsx",
+    "./block": "./src/Block.tsx",
+    "./button": "./src/Button.tsx",
+    "./card": "./src/Card.tsx",
+    "./form-error": "./src/FormError.tsx",
+    "./initial-focus": "./src/InitialFocus.ts",
+    "./inline-field": "./src/InlineField.tsx",
+    "./label": "./src/Label.tsx",
+    "./menu": "./src/Menu.tsx",
+    "./paragraph": "./src/Paragraph.tsx",
+    "./popover": "./src/Popover.tsx",
+    "./space-between": "./src/SpaceBetween.tsx",
+    "./stack": "./src/Stack.tsx",
+    "./styles": "./src/styles.ts",
+    "./text": "./src/Text.tsx",
+    "./text-one-line": "./src/TextOneLine.tsx",
+    "./theme": "./src/theme.ts",
+    "./tokens": "./src/tokens.ts",
+    "./toggle": "./src/Toggle.tsx",
+    "./tooltip": "./src/Tooltip.tsx",
+    "./view": "./src/View.tsx"
+  }
+}

packages/component-library/src/Block.tsx

@@ -2,7 +2,7 @@ import { type HTMLProps, type Ref } from 'react';
 
 import { css, cx } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;

packages/component-library/src/Button.tsx

@@ -9,9 +9,9 @@ import { Button as ReactAriaButton } from 'react-aria-components';
 
 import { css } from '@emotion/css';
 
-import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { styles, theme } from '../../style';
-
+import { AnimatedLoading } from './icons/AnimatedLoading';
+import { styles } from './styles';
+import { theme } from './theme';
 import { View } from './View';
 
 const backgroundColor: {

packages/component-library/src/Card.tsx

@@ -1,7 +1,6 @@
 import { type ComponentProps, forwardRef } from 'react';
 
-import { theme } from '../../style';
-
+import { theme } from './theme';
 import { View } from './View';
 
 type CardProps = ComponentProps<typeof View>;

packages/component-library/src/InlineField.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from 'react';
 
 import { css } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type InlineFieldProps = {
   label: ReactNode;

packages/component-library/src/Label.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, type ReactNode, type CSSProperties } from 'react';
 
-import { theme, styles } from '../../style';
-
+import { styles } from './styles';
 import { Text } from './Text';
+import { theme } from './theme';
 
 type LabelProps = {
   title: ReactNode;

packages/component-library/src/Menu.tsx

@@ -8,9 +8,8 @@ import {
   type CSSProperties,
 } from 'react';
 
-import { theme } from '../../style';
-
 import { Text } from './Text';
+import { theme } from './theme';
 import { Toggle } from './Toggle';
 import { View } from './View';
 

packages/component-library/src/Paragraph.tsx

@@ -2,7 +2,7 @@ import { type HTMLProps } from 'react';
 
 import { css } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type ParagraphProps = HTMLProps<HTMLDivElement> & {
   style?: CSSProperties;

packages/component-library/src/Popover.tsx

@@ -3,7 +3,7 @@ import { Popover as ReactAriaPopover } from 'react-aria-components';
 
 import { css } from '@emotion/css';
 
-import { styles } from '../../style';
+import { styles } from './styles';
 
 type PopoverProps = ComponentProps<typeof ReactAriaPopover>;
 

packages/component-library/src/Text.tsx

@@ -7,7 +7,7 @@ import React, {
 
 import { css, cx } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;

packages/component-library/src/Toggle.tsx

@@ -2,8 +2,7 @@ import React, { type CSSProperties } from 'react';
 
 import { css } from '@emotion/css';
 
-import { theme } from '../../style';
-
+import { theme } from './theme';
 import { View } from './View';
 
 type ToggleProps = {

packages/component-library/src/Tooltip.tsx

@@ -8,8 +8,7 @@ import React, {
 } from 'react';
 import { Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
 
-import { styles } from '../../style';
-
+import { styles } from './styles';
 import { View } from './View';
 
 type TooltipProps = Partial<ComponentProps<typeof AriaTooltip>> & {

packages/component-library/src/View.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, type HTMLProps, type Ref } from 'react';
 
 import { css, cx } from '@emotion/css';
 
-import { type CSSProperties } from '../../style';
+import { type CSSProperties } from './styles';
 
 type ViewProps = HTMLProps<HTMLDivElement> & {
   className?: string;

packages/component-library/src/icons/AnimatedLoading.tsx

@@ -0,0 +1,26 @@
+import React, { type SVGProps } from 'react';
+
+import { css, keyframes } from '@emotion/css';
+
+import { SvgLoading } from './Loading';
+
+const rotation = keyframes({
+  '0%': { transform: 'rotate(-90deg)' },
+  '100%': { transform: 'rotate(666deg)' },
+});
+
+export function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
+  return (
+    <span
+      className={css({
+        animationName: rotation,
+        animationDuration: '1.6s',
+        animationTimingFunction: 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',
+        animationIterationCount: 'infinite',
+        lineHeight: 0,
+      })}
+    >
+      <SvgLoading {...props} />
+    </span>
+  );
+}

packages/component-library/src/icons/Loading.tsx

@@ -0,0 +1,33 @@
+import React, { type SVGProps, useState } from 'react';
+
+export const SvgLoading = (props: SVGProps<SVGSVGElement>) => {
+  const { color = 'currentColor' } = props;
+  const [gradientId] = useState('gradient-' + Math.random());
+
+  return (
+    <svg {...props} viewBox="0 0 38 38" style={{ ...props.style }}>
+      <defs>
+        <linearGradient
+          x1="8.042%"
+          y1="0%"
+          x2="65.682%"
+          y2="23.865%"
+          id={gradientId}
+        >
+          <stop stopColor={color} stopOpacity={0} offset="0%" />
+          <stop stopColor={color} stopOpacity={0.631} offset="63.146%" />
+          <stop stopColor={color} offset="100%" />
+        </linearGradient>
+      </defs>
+      <g transform="translate(1 2)" fill="none" fillRule="evenodd">
+        <path
+          d="M36 18c0-9.94-8.06-18-18-18"
+          stroke={'url(#' + gradientId + ')'}
+          strokeWidth={2}
+          fill="none"
+        />
+        <circle fill={color} cx={36} cy={18} r={1} />
+      </g>
+    </svg>
+  );
+};

packages/component-library/src/styles.ts

@@ -0,0 +1,157 @@
+import { keyframes } from '@emotion/css';
+
+import { theme } from './theme';
+import { tokens } from './tokens';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CSSProperties = Record<string, any>;
+
+const MOBILE_MIN_HEIGHT = 40;
+
+const shadowLarge = {
+  boxShadow: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const styles: Record<string, any> = {
+  incomeHeaderHeight: 70,
+  cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+  monthRightPadding: 5,
+  menuBorderRadius: 4,
+  mobileMinHeight: MOBILE_MIN_HEIGHT,
+  mobileMenuItem: {
+    fontSize: 17,
+    fontWeight: 400,
+    paddingTop: 8,
+    paddingBottom: 8,
+    height: MOBILE_MIN_HEIGHT,
+    minHeight: MOBILE_MIN_HEIGHT,
+  },
+  mobileEditingPadding: 12,
+  altMenuMaxHeight: 250,
+  altMenuText: {
+    fontSize: 13,
+  },
+  altMenuHeaderText: {
+    fontSize: 13,
+    fontWeight: 700,
+  },
+  veryLargeText: {
+    fontSize: 30,
+    fontWeight: 600,
+  },
+  largeText: {
+    fontSize: 20,
+    fontWeight: 700,
+    letterSpacing: 0.5,
+  },
+  mediumText: {
+    fontSize: 15,
+    fontWeight: 500,
+  },
+  smallText: {
+    fontSize: 13,
+  },
+  verySmallText: {
+    fontSize: 12,
+  },
+  tinyText: {
+    fontSize: 10,
+  },
+  page: {
+    flex: 1,
+    '@media (max-height: 550px)': {
+      minHeight: 700, // ensure we can scroll on small screens
+    },
+    paddingTop: 8, // height of the titlebar
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      paddingTop: 36,
+    },
+  },
+  pageContent: {
+    paddingLeft: 2,
+    paddingRight: 2,
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      paddingLeft: 20,
+      paddingRight: 20,
+    },
+  },
+  settingsPageContent: {
+    padding: 20,
+    [`@media (min-width: ${tokens.breakpoint_small})`]: {
+      padding: 'inherit',
+    },
+  },
+  staticText: {
+    cursor: 'default',
+    userSelect: 'none',
+  },
+  shadow: {
+    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.1)',
+  },
+  shadowLarge,
+  tnum: {
+    // eslint-disable-next-line rulesdir/typography
+    fontFeatureSettings: '"tnum"',
+  },
+  notFixed: { fontFeatureSettings: '' },
+  text: {
+    fontSize: 16,
+    // lineHeight: 22.4 // TODO: This seems like trouble, but what's the right value?
+  },
+  delayedFadeIn: {
+    animationName: keyframes({
+      '0%': { opacity: 0 },
+      '100%': { opacity: 1 },
+    }),
+    animationDuration: '1s',
+    animationFillMode: 'both',
+    animationDelay: '0.5s',
+  },
+  underlinedText: {
+    borderBottom: `2px solid`,
+  },
+  noTapHighlight: {
+    WebkitTapHighlightColor: 'transparent',
+    ':focus': {
+      outline: 'none',
+    },
+  },
+  lineClamp: (lines: number) => {
+    return {
+      display: '-webkit-box',
+      WebkitLineClamp: lines,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-word',
+    };
+  },
+  tooltip: {
+    padding: 5,
+    ...shadowLarge,
+    borderWidth: 2,
+    borderRadius: 4,
+    borderStyle: 'solid',
+    borderColor: theme.tooltipBorder,
+    backgroundColor: theme.tooltipBackground,
+    color: theme.tooltipText,
+    overflow: 'auto',
+  },
+  popover: {
+    border: 'none',
+    backgroundColor: theme.menuBackground,
+    color: theme.menuItemText,
+  },
+  // Dynamically set
+  horizontalScrollbar: null as CSSProperties | null,
+  lightScrollbar: null as CSSProperties | null,
+  darkScrollbar: null as CSSProperties | null,
+  scrollbarWidth: null as number | null,
+  editorPill: {
+    color: theme.pillText,
+    backgroundColor: theme.pillBackground,
+    borderRadius: 4,
+    padding: '3px 5px',
+  },
+};

packages/component-library/src/theme.ts

@@ -0,0 +1,203 @@
+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)',
+  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)',
+};

packages/component-library/src/tokens.ts

@@ -0,0 +1,35 @@
+enum BreakpointNames {
+  small = 'small',
+  medium = 'medium',
+  wide = 'wide',
+}
+
+type NumericBreakpoints = {
+  [key in BreakpointNames]: number;
+};
+
+export const breakpoints: NumericBreakpoints = {
+  small: 512,
+  medium: 730,
+  wide: 1100,
+};
+
+type BreakpointsPx = {
+  [B in keyof NumericBreakpoints as `breakpoint_${B}`]: string;
+};
+
+// Provide the same breakpoints in a form usable by CSS media queries
+// {
+//   breakpoint_small: '512px',
+//   breakpoint_medium: '740px',
+//   breakpoint_wide: '1100px',
+// }
+export const tokens: BreakpointsPx = Object.entries(
+  breakpoints,
+).reduce<BreakpointsPx>(
+  (acc, [key, val]) => ({
+    ...acc,
+    [`breakpoint_${key}`]: `${val}px`,
+  }),
+  {} as BreakpointsPx,
+);

packages/desktop-client/e2e/budget.mobile.test.ts

@@ -1,7 +1,7 @@
 import { type Page } from '@playwright/test';
 
+import * as monthUtils from 'loot-core/shared/months';
 import { amountToCurrency, currencyToAmount } from 'loot-core/shared/util';
-import * as monthUtils from 'loot-core/src/shared/months';
 
 import { expect, test } from './fixtures';
 import { ConfigurationPage } from './page-models/configuration-page';
@@ -60,6 +60,9 @@ async function setBudgetAverage(
     await budgetPage.goToPreviousMonth();
     const spentButton = await budgetPage.getButtonForSpent(categoryName);
     const spent = await spentButton.textContent();
+    if (!spent) {
+      throw new Error('Failed to get spent amount');
+    }
     totalSpent += currencyToAmount(spent) ?? 0;
   }
 
@@ -280,6 +283,10 @@ budgetTypes.forEach(budgetType => {
 
       const lastMonthBudget = await budgetedButton.textContent();
 
+      if (!lastMonthBudget) {
+        throw new Error('Failed to get last month budget');
+      }
+
       await budgetPage.goToNextMonth();
 
       await copyLastMonthBudget(budgetPage, categoryName);