Feature/chia theme variants and overview

packages/core/package.json

@@ -25,6 +25,8 @@
   "dependencies": {
     "@babel/runtime": "7.27.6",
     "@emoji-mart/data": "1.1.2",
+    "@fontsource/inter": "5.0.8",
+    "@fontsource/poppins": "5.0.8",
     "@fontsource/roboto": "5.0.8",
     "@lingui/macro": "4.11.4",
     "@mui/utils": "5.14.5",

packages/core/src/components/Button/Button.tsx

@@ -3,8 +3,6 @@ import React, { SyntheticEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import Color from '../../constants/Color';
-
 const StyledBaseButton = styled(({ nowrap: boolean, selected, ...rest }) => <BaseButton {...rest} />)`
   white-space: ${({ nowrap }) => (nowrap ? 'nowrap' : 'normal')};
   ${({ selected, theme }) => {
@@ -13,11 +11,17 @@ const StyledBaseButton = styled(({ nowrap: boolean, selected, ...rest }) => <Bas
     }
 
     const isDark = theme.palette.mode === 'dark';
-    const level = isDark ? '50' : '900';
+    const primary = theme.palette.primary.main;
+    const text = theme.palette.text.primary;
 
     return `
-      background-color: ${alpha(Color.Neutral[level], 0.1)};
-      border-color: ${alpha(Color.Neutral[level], 0.3)} !important;
+      background-color: ${alpha(primary, isDark ? 0.24 : 0.1)};
+      border-color: ${alpha(primary, isDark ? 0.55 : 0.4)} !important;
+      color: ${text} !important;
+
+      .MuiSvgIcon-root {
+        color: ${text} !important;
+      }
     `;
   }}
 `;

packages/core/src/components/CardListItem/CardListItem.tsx

@@ -1,4 +1,4 @@
-import { alpha, Box, Card, CardContent, CardActionArea } from '@mui/material';
+import { alpha, Box, Card, CardActionArea, CardContent } from '@mui/material';
 import React, { type ReactNode } from 'react';
 
 import Color from '../../constants/Color';
@@ -34,19 +34,29 @@ export default function CardListItem(props: CardListItemProps) {
         border: (theme) =>
           `1px solid ${
             selected
-              ? theme.palette.highlight.main
+              ? theme.palette.primary.main
               : borderTransparency
                 ? theme.palette.background.default
                 : getColorModeValue(theme, 'border')
           }`,
-        backgroundColor: (theme) =>
-          `${selected ? getColorModeValue(theme, 'sidebarBackground') : theme.palette.background.paper}`,
+        backgroundColor: (theme) => {
+          if (!selected) {
+            return theme.palette.background.paper;
+          }
+          if (theme.chiaTheme?.variant === 'chia') {
+            return theme.palette.action.selected;
+          }
+          if (theme.palette.sidebarSelectedFill) {
+            return getColorModeValue(theme, 'sidebarSelectedFill' as Parameters<typeof getColorModeValue>[1]);
+          }
+          return alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.18 : 0.1);
+        },
         position: 'relative',
         overflow: 'visible',
 
         '&:hover': {
           borderColor: (theme) =>
-            `${disabled ? theme.palette.divider : selected ? theme.palette.highlight.main : theme.palette.divider}`,
+            `${disabled ? theme.palette.divider : selected ? theme.palette.primary.main : theme.palette.divider}`,
         },
       }}
     >

packages/core/src/components/Fonts/Fonts.tsx

@@ -1,11 +1,35 @@
+import { useTheme } from '@mui/material/styles';
+import React from 'react';
 import { createGlobalStyle } from 'styled-components';
-import '@fontsource/roboto/700.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/400.css';
+
 import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/600.css';
+import '@fontsource/poppins/700.css';
+
+import { THEME_TYPOGRAPHY } from '../../theme/typography';
+import { DEFAULT_THEME_VARIANT, parseThemeVariantId } from '../../theme/variantTypes';
+
+function getVariantFromTheme(theme: { chiaTheme?: { variant?: unknown } }) {
+  return parseThemeVariantId(theme.chiaTheme?.variant, DEFAULT_THEME_VARIANT);
+}
 
-export default createGlobalStyle`
+const GlobalStyle = createGlobalStyle<{ $fontFamily: string }>`
   body {
-    font-family: "Roboto";
+    font-family: ${(props) => props.$fontFamily};
   }
 `;
+
+export default function Fonts() {
+  const theme = useTheme();
+  const variant = getVariantFromTheme(theme);
+  const { fontFamily } = THEME_TYPOGRAPHY[variant];
+
+  return <GlobalStyle $fontFamily={fontFamily} />;
+}

packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx

@@ -2,7 +2,7 @@ import { useGetLoggedInFingerprintQuery, useGetKeyQuery, useFingerprintSettings
 import { Trans } from '@lingui/macro';
 import { Edit as EditIcon } from '@mui/icons-material';
 import { Box, AppBar, Toolbar, Drawer, IconButton, Typography, CircularProgress, Button } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { alpha, useTheme } from '@mui/material/styles';
 import React, { type ReactNode, useState, Suspense, useCallback } from 'react';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
@@ -12,6 +12,7 @@ import useGetLatestVersionFromWebsite from '../../hooks/useGetLatestVersionFromW
 import useOpenDialog from '../../hooks/useOpenDialog';
 import EmojiAndColorPicker from '../../screens/SelectKey/EmojiAndColorPicker';
 import SelectKeyRenameForm from '../../screens/SelectKey/SelectKeyRenameForm';
+import getColorModeValue from '../../utils/useColorModeValue';
 import Flex from '../Flex';
 import Link from '../Link';
 import Loading from '../Loading';
@@ -32,10 +33,18 @@ const StyledDrawer = styled(Drawer)`
   width: ${({ theme }) => theme.drawer.width};
   flex-shrink: 0;
 
-  > div {
+  & .MuiDrawer-paper {
     width: ${({ theme }) => theme.drawer.width};
-    // border-width: 0px;
-    border-right: 1px solid ${({ theme }) => (theme.palette.mode === 'dark' ? Color.Neutral[700] : Color.Neutral[300])};
+    background-color: ${({ theme }) => getColorModeValue(theme, 'sidebarBackground')};
+    border-right: 1px solid
+      ${({ theme }) =>
+        theme.palette.mode === 'dark'
+          ? alpha(getColorModeValue(theme, 'border'), 0.45)
+          : alpha(getColorModeValue(theme, 'border'), 0.35)};
+    color: ${({ theme }) =>
+      theme.palette.sidebarText
+        ? getColorModeValue(theme, 'sidebarText' as Parameters<typeof getColorModeValue>[1])
+        : getColorModeValue(theme, 'sidebarIcon')};
   }
 `;
 

packages/core/src/components/LineChart/LineChart.tsx

@@ -1,4 +1,4 @@
-import { alpha } from '@mui/material';
+import { alpha, useTheme } from '@mui/material';
 import { SparkLineChart, type SparkLineChartProps } from '@mui/x-charts';
 import { areaElementClasses } from '@mui/x-charts/LineChart';
 import BigNumber from 'bignumber.js';
@@ -14,24 +14,17 @@ const StyledGraphContainer = styled.div<{ height: number }>`
   height: ${({ height }) => `${height}px`};
 `;
 
-function LinearGradient() {
+function LinearGradient({ chartColor }: { chartColor: string }) {
   return (
     <defs>
       <linearGradient id="graph-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-        <stop offset="0%" stopColor={alpha(Color.Green[500], 0.4)} />
-        <stop offset="100%" stopColor={alpha(Color.Green[500], 0)} />
+        <stop offset="0%" stopColor={alpha(chartColor, 0.4)} />
+        <stop offset="100%" stopColor={alpha(chartColor, 0)} />
       </linearGradient>
     </defs>
   );
 }
 
-const sx = {
-  [`& .${areaElementClasses.root}`]: {
-    fill: 'url(#graph-gradient)',
-  },
-};
-
-const chartColors = [Color.Green[500]];
 const chartMargin = { top: 0, bottom: 0, left: 0, right: 0 };
 const defaultXValueFormatter = (value: number) => value.toString();
 const defaultYValueFormatter = (value: number | BigNumber | null) => (value !== null ? value.toString() : '');
@@ -41,16 +34,25 @@ type Point = {
   y: number | BigNumber;
 };
 
-const MemoLineChart = memo((props: SparkLineChartProps) => (
-  <SparkLineChart {...props}>
-    <LinearGradient />
-    <rect x={0} y={0} width={0} height="100%" fill="url(#graph-gradient)" />
-  </SparkLineChart>
-));
+const MemoLineChart = memo((props: SparkLineChartProps & { chartColor: string }) => {
+  const { chartColor, sx, ...rest } = props;
+  const areaSx = {
+    [`& .${areaElementClasses.root}`]: {
+      fill: 'url(#graph-gradient)',
+    },
+    ...sx,
+  };
+
+  return (
+    <SparkLineChart {...rest} sx={areaSx}>
+      <LinearGradient chartColor={chartColor} />
+      <rect x={0} y={0} width={0} height="100%" fill="url(#graph-gradient)" />
+    </SparkLineChart>
+  );
+});
 
 export type LineChartProps = {
   data: Point[];
-  // min?: number;
   height?: number;
   xValueFormatter?: (value: number) => string;
   yValueFormatter?: (value: number | BigNumber | null) => string;
@@ -59,12 +61,15 @@ export type LineChartProps = {
 export default function LineChart(props: LineChartProps) {
   const {
     data,
-    // min: defaultMin = 0,
     xValueFormatter = defaultXValueFormatter,
     yValueFormatter = defaultYValueFormatter,
     height = 150,
   } = props;
 
+  const theme = useTheme();
+  const chartColor = theme.palette.primary?.main ?? Color.Green[500];
+  const chartColors = useMemo(() => [chartColor], [chartColor]);
+
   const stringifiedData = useMemo(() => JSONbig.stringify(data), [data]);
   const freezedData = useMemo<Point[]>(() => JSONbig.parse(stringifiedData), [stringifiedData]);
 
@@ -94,10 +99,10 @@ export default function LineChart(props: LineChartProps) {
         curve="monotoneX"
         margin={chartMargin}
         colors={chartColors}
+        chartColor={chartColor}
         area
         showHighlight
         showTooltip
-        sx={sx}
       />
     </StyledGraphContainer>
   );

packages/core/src/components/Logo/Logo.tsx

@@ -1,9 +1,10 @@
-import { Chia } from '@chia-network/icons';
 import { Box, BoxProps } from '@mui/material';
 import React from 'react';
 import styled from 'styled-components';
 
-const StyledChia = styled(Chia)`
+import { ThemedChia } from '../ThemedChia';
+
+const StyledChia = styled(ThemedChia)`
   max-width: 100%;
   width: auto;
   height: auto;

packages/core/src/components/Settings/SettingsApp.tsx

@@ -19,6 +19,7 @@ import Flex from '../Flex';
 import NewerAppVersionAvailable from '../LayoutDashboard/NewerAppVersionAvailable';
 import Link from '../Link';
 import LocaleToggle from '../LocaleToggle';
+import ThemeVariantToggle from '../ThemeVariantToggle';
 
 import SettingsLabel from './SettingsLabel';
 
@@ -109,6 +110,16 @@ export default function SettingsApp(props: SettingsAppProps) {
         </ButtonGroup>
       </Flex>
 
+      <Flex flexDirection="column" gap={1}>
+        <SettingsLabel>
+          <Trans>Color Theme</Trans>
+        </SettingsLabel>
+        <ThemeVariantToggle variant="outlined" />
+        <Typography variant="body2" color="textSecondary">
+          <Trans>Applies immediately. Stored locally in app preferences.</Trans>
+        </Typography>
+      </Flex>
+
       <Flex flexDirection="column" gap={1}>
         <SettingsLabel>
           <Trans>Language</Trans>