theme.ts

// Copyright (c) 2025-2026 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
// SPDX-License-Identifier: Apache-2.0

import { createTheme, type ThemeOptions } from '@mui/material/styles'

export const portfolioColors = {
    black: '#000000',
    grey27: '#1B1B1B',
    grey36: '#272727',
    grey54: '#363636',
    grey69: '#454545',
    grey105: '#696969',
    grey207: '#CFCFCF',
    grey226: '#E2E2E2',
    white: '#FFFFFF',
    lightBlue99: '#96E4FD',
    lightBlue89: '#C8F1FE',
    yellow100: '#F3FF97',
    yellow99: '#F8FDCD',
    purple100: '#875CFF',
    purple90: '#561AFF',
    purple30: '#C6B2FF',
    red99: '#FD8575',
    green76: '#33C200',
} as const

declare module '@mui/material/styles' {
    interface Theme {
        portfolio: {
            sidebar: { background: string; active: string }
            surface: { subtle: string; border: string; required: string }
            nav: { main: string; hover: string; soft: string }
        }
    }

    interface ThemeOptions {
        portfolio?: Partial<Theme['portfolio']>
    }
}

export const portfolioAppTokens = {
    portfolio: {
        sidebar: {
            background: portfolioColors.grey36,
            active: portfolioColors.grey54,
        },
        surface: {
            subtle: portfolioColors.grey36,
            border: portfolioColors.grey69,
            required: portfolioColors.grey54,
        },
        nav: {
            main: portfolioColors.purple100,
            hover: portfolioColors.purple90,
            soft: portfolioColors.purple30,
        },
    },
} satisfies ThemeOptions

const typography = {
    fontFamily: 'Inter, sans-serif',
    // h1: { fontWeight: 500, letterSpacing: '-0.04em' },
    // h2: { fontWeight: 500, letterSpacing: '-0.03em' },
    // h3: { fontWeight: 500, letterSpacing: '-0.02em' },
    // h6: { fontWeight: 500 },
    // button: { textTransform: 'none' as const, fontWeight: 500 },
}

export const darkPortfolioTokens: ThemeOptions = {
    palette: {
        mode: 'dark',
        primary: {
            main: portfolioColors.lightBlue99,
            light: portfolioColors.lightBlue89,
            contrastText: portfolioColors.black,
        },
        secondary: {
            main: portfolioColors.yellow100,
            light: portfolioColors.yellow99,
            contrastText: portfolioColors.black,
        },
        error: {
            main: portfolioColors.red99,
            contrastText: portfolioColors.black,
        },
        warning: {
            main: portfolioColors.red99,
            contrastText: portfolioColors.black,
        },
        success: {
            main: portfolioColors.green76,
            contrastText: portfolioColors.black,
        },
        background: {
            default: portfolioColors.grey27,
            paper: portfolioColors.grey36,
        },
        text: {
            primary: portfolioColors.grey226,
            secondary: portfolioColors.grey207,
            disabled: portfolioColors.grey105,
        },
        divider: portfolioColors.grey69,
        action: {
            hover: portfolioColors.grey54,
            selected: portfolioColors.grey54,
            disabled: portfolioColors.grey105,
            disabledBackground: portfolioColors.grey54,
        },
    },
    typography,
    shape: {
        borderRadius: 8,
    },
    ...portfolioAppTokens,
}

export const lightPortfolioTokens: ThemeOptions = {
    palette: {
        mode: 'light',
        primary: {
            main: portfolioColors.purple90,
            light: portfolioColors.purple100,
            contrastText: portfolioColors.white,
        },
        secondary: {
            main: portfolioColors.grey54,
            light: portfolioColors.grey69,
            contrastText: portfolioColors.white,
        },
        error: {
            main: portfolioColors.red99,
            contrastText: portfolioColors.black,
        },
        warning: {
            main: portfolioColors.red99,
            contrastText: portfolioColors.black,
        },
        success: {
            main: portfolioColors.green76,
            contrastText: portfolioColors.black,
        },
        background: {
            default: portfolioColors.white,
            paper: portfolioColors.grey226,
        },
        text: {
            primary: portfolioColors.black,
            secondary: portfolioColors.grey54,
            disabled: portfolioColors.grey105,
        },
        divider: portfolioColors.grey207,
        action: {
            hover: portfolioColors.grey226,
            selected: portfolioColors.grey207,
            disabled: portfolioColors.grey105,
            disabledBackground: portfolioColors.grey207,
        },
    },
    typography,
    shape: {
        borderRadius: 8,
    },
    portfolio: {
        sidebar: {
            background: portfolioColors.grey226,
            active: portfolioColors.grey207,
        },
        surface: {
            subtle: portfolioColors.white,
            border: portfolioColors.grey207,
            required: portfolioColors.grey226,
        },
        nav: portfolioAppTokens.portfolio.nav,
    },
}

export const portfolioComponents: ThemeOptions['components'] = {
    MuiCssBaseline: {
        styleOverrides: (theme) => ({
            body: {
                backgroundColor: theme.palette.background.default,
                color: theme.palette.text.primary,
                WebkitFontSmoothing: 'antialiased',
                MozOsxFontSmoothing: 'grayscale',
            },
            '::selection': {
                backgroundColor: theme.palette.secondary.main,
                color: theme.palette.secondary.contrastText,
            },
        }),
    },
    MuiButton: {
        defaultProps: {
            disableElevation: true,
        },
        styleOverrides: {
            root: ({ theme }) => ({
                borderRadius: 999,
                minWidth: 'unset',
                textTransform: 'none',
                fontWeight: 700,
                '&.Mui-focusVisible': {
                    outline: `2px solid ${theme.palette.secondary.main}`,
                    outlineOffset: 2,
                },
                '&.MuiButton-containedPrimary': {
                    color: theme.palette.primary.contrastText,
                    backgroundColor: theme.palette.primary.main,
                    '&:hover': { backgroundColor: theme.palette.primary.light },
                },
                '&.MuiButton-containedSecondary': {
                    color: theme.palette.secondary.contrastText,
                    backgroundColor: theme.palette.secondary.main,
                    '&:hover': {
                        backgroundColor: theme.palette.secondary.light,
                    },
                },
                '&.MuiButton-outlinedError': {
                    color: theme.palette.error.main,
                    borderColor: theme.palette.error.main,
                    '&:hover': {
                        borderColor: theme.palette.error.main,
                        backgroundColor: 'rgba(253, 133, 117, 0.08)',
                    },
                },
            }),
        },
    },
    MuiPaper: {
        styleOverrides: {
            root: ({ theme }) => ({
                backgroundImage: 'none',
                backgroundColor: theme.palette.background.paper,
                color: theme.palette.text.primary,
                borderColor: theme.palette.divider,
            }),
        },
    },
    MuiCard: {
        styleOverrides: {
            root: ({ theme }) => ({
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
            }),
        },
    },
    MuiTableCell: {
        styleOverrides: {
            root: ({ theme }) => ({
                borderBottomColor: theme.palette.divider,
                color: theme.palette.text.primary,
            }),
            head: ({ theme }) => ({
                color: theme.palette.text.secondary,
                fontSize: '0.75rem',
                fontWeight: 700,
                letterSpacing: '0.04em',
                textTransform: 'uppercase',
            }),
        },
    },
    MuiTableRow: {
        styleOverrides: {
            root: ({ theme }) => ({
                '&.MuiTableRow-hover:hover': {
                    backgroundColor: theme.palette.action.hover,
                },
                '&.Mui-selected, &.Mui-selected:hover': {
                    backgroundColor: theme.palette.action.selected,
                },
            }),
        },
    },
    MuiTabs: {
        styleOverrides: {
            indicator: ({ theme }) => ({
                backgroundColor: theme.portfolio.nav.main,
            }),
        },
    },
    MuiTab: {
        styleOverrides: {
            root: ({ theme }) => ({
                textTransform: 'none',
                fontWeight: 700,
                color: theme.palette.text.secondary,
                '&.Mui-selected': {
                    color: theme.portfolio.nav.soft,
                },
                '&.Mui-focusVisible': {
                    outline: `2px solid ${theme.palette.secondary.main}`,
                    outlineOffset: 2,
                },
            }),
        },
    },
    MuiDialog: {
        styleOverrides: {
            paper: ({ theme }) => ({
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 16,
            }),
        },
    },
    MuiDialogTitle: {
        styleOverrides: {
            root: {
                fontWeight: 700,
                padding: '24px 24px 8px',
            },
        },
    },
    MuiDialogContent: {
        styleOverrides: {
            root: {
                padding: '16px 24px',
            },
        },
    },
    MuiDialogActions: {
        styleOverrides: {
            root: {
                padding: '16px 24px 24px',
            },
        },
    },
    MuiOutlinedInput: {
        styleOverrides: {
            root: ({ theme }) => ({
                backgroundColor: theme.portfolio.surface.subtle,
                borderRadius: 12,
                '& .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.divider,
                },
                '&:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.text.secondary,
                },
                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.secondary.main,
                    borderWidth: 2,
                },
            }),
        },
    },
    MuiChip: {
        styleOverrides: {
            root: {
                borderRadius: 999,
                fontWeight: 700,
            },
        },
    },
    MuiIconButton: {
        styleOverrides: {
            root: ({ theme }) => ({
                color: theme.palette.text.secondary,
                '&:hover': {
                    backgroundColor: theme.palette.action.hover,
                    color: theme.palette.secondary.main,
                },
                '&.Mui-focusVisible': {
                    outline: `2px solid ${theme.palette.secondary.main}`,
                    outlineOffset: 2,
                },
            }),
        },
    },
    MuiTooltip: {
        styleOverrides: {
            tooltip: ({ theme }) => ({
                backgroundColor: theme.palette.text.primary,
                color: theme.palette.background.default,
                fontWeight: 700,
            }),
            arrow: ({ theme }) => ({
                color: theme.palette.text.primary,
            }),
        },
    },
}

export const darkTheme = createTheme({
    ...darkPortfolioTokens,
    components: portfolioComponents,
})

export const lightTheme = createTheme({
    ...lightPortfolioTokens,
    components: portfolioComponents,
})

export default darkTheme