@sbcrmweb/sbcrmweb-tma-core 0.0.59

package/dist/theme.js

@@ -0,0 +1,766 @@
+import { createTheme } from '@mui/material/styles';
+import { SFPro, SFProMono, Inter } from './fonts';
+export const BASE_SPACING = 8;
+export const commonColors = {
+    black: '#000000',
+    white: '#FFFFFF',
+    bg_color: {
+        light: '#FFFFFF',
+        dark: '#212121',
+    },
+    accent_text_color: {
+        light: '#007AFF',
+        dark: '#007AFF',
+    },
+    button_color: {
+        light: '#007AFF',
+        dark: '#2990FF',
+    },
+    button_text_color: {
+        light: '#FFFFFF',
+        dark: '#FFFFFF',
+    },
+    destructive_background: {
+        light: '#F12E2E05',
+        dark: '#F12E2E15',
+    },
+    destructive_text_color: {
+        light: '#E53935',
+        dark: '#E53935',
+    },
+    header_bg_color: {
+        light: '#FFFFFF',
+        dark: '#212121',
+    },
+    hint_color: {
+        light: '#707579',
+        dark: '#AAAAAA',
+    },
+    link_color: {
+        light: '#007AFF',
+        dark: '#2990FF',
+    },
+    secondary_bg_color: {
+        light: '#EFEFF4',
+        dark: '#0F0F0F',
+    },
+    section_bg_color: {
+        light: '#FFFFFF',
+        dark: '#212121',
+    },
+    section_header_text_color: {
+        light: '#707579',
+        dark: '#AAAAAA',
+    },
+    subtitle_text_color: {
+        light: '#707579',
+        dark: '#AAAAAA',
+    },
+    surface_dark: {
+        light: '#383838',
+        dark: '#383838',
+    },
+    text_color: {
+        light: '#000000',
+        dark: '#FFFFFF',
+    },
+    divider: {
+        light: '#00000015',
+        dark: '#FFFFFF05',
+    },
+    card_bg_color: {
+        light: '#FFFFFF',
+        dark: '#323232',
+    },
+    skeleton: {
+        light: '#00000003',
+        dark: '#FFFFFF03',
+    },
+    secondary_fill: {
+        light: '#4378FF10',
+        dark: '#2990FF15',
+    },
+    secondary_hint_color: {
+        light: '#A2ACB0',
+        dark: '#78797E',
+    },
+    outline: {
+        light: '#00000005',
+        dark: '#FFFFFF10',
+    },
+    plain_foreground: {
+        light: '#00000080',
+        dark: '#FFFFFF95',
+    },
+    plain_background: {
+        light: '#00000004',
+        dark: '#FFFFFF0A',
+    },
+    toast_accent_color: {
+        light: '#55A6FF',
+        dark: '#55A6FF',
+    },
+};
+const colorSchemes = {
+    light: {
+        palette: {
+            bg_color: {
+                main: commonColors.bg_color.light,
+            },
+            card_bg_color: {
+                main: commonColors.card_bg_color.light,
+            },
+            divider: commonColors.divider.light,
+            accent_text_color: {
+                main: commonColors.accent_text_color.light,
+            },
+            header_bg_color: {
+                main: commonColors.header_bg_color.light,
+            },
+            button_color: {
+                main: commonColors.button_color.light,
+            },
+            button_text_color: {
+                main: commonColors.button_text_color.light,
+            },
+            destructive_text_color: {
+                main: commonColors.destructive_text_color.light,
+            },
+            hint_color: {
+                main: commonColors.hint_color.light,
+            },
+            secondary_hint_color: {
+                main: commonColors.secondary_hint_color.light,
+            },
+            link_color: {
+                main: commonColors.link_color.light,
+            },
+            secondary_bg_color: {
+                main: commonColors.secondary_bg_color.light,
+            },
+            section_bg_color: {
+                main: commonColors.section_bg_color.light,
+            },
+            section_header_text_color: {
+                main: commonColors.section_header_text_color.light,
+            },
+            secondary_fill: {
+                main: commonColors.secondary_fill.light,
+            },
+            text_color: {
+                main: commonColors.text_color.light,
+            },
+            subtitle_text_color: {
+                main: commonColors.subtitle_text_color.light,
+            },
+            surface_dark: {
+                main: commonColors.surface_dark.light,
+            },
+            primary: {
+                main: commonColors.button_color.light,
+            },
+            background: {
+                default: commonColors.bg_color.light,
+                paper: commonColors.card_bg_color.light,
+            },
+            text: {
+                primary: commonColors.text_color.light,
+                secondary: commonColors.subtitle_text_color.light,
+            },
+            plain_foreground: {
+                main: commonColors.plain_foreground.light,
+            },
+            plain_background: {
+                main: commonColors.plain_background.light,
+            },
+            toast_accent_color: {
+                main: commonColors.toast_accent_color.light,
+            },
+            destructive_background: {
+                main: commonColors.destructive_background.light,
+            },
+        },
+    },
+    dark: {
+        palette: {
+            bg_color: {
+                main: commonColors.bg_color.dark,
+            },
+            card_bg_color: {
+                main: commonColors.card_bg_color.dark,
+            },
+            divider: commonColors.divider.dark,
+            header_bg_color: {
+                main: commonColors.header_bg_color.dark,
+            },
+            accent_text_color: {
+                main: commonColors.accent_text_color.dark,
+            },
+            button_color: {
+                main: commonColors.button_color.dark,
+            },
+            button_text_color: {
+                main: commonColors.button_text_color.dark,
+            },
+            destructive_text_color: {
+                main: commonColors.destructive_text_color.dark,
+            },
+            hint_color: {
+                main: commonColors.hint_color.dark,
+            },
+            secondary_hint_color: {
+                main: commonColors.secondary_hint_color.dark,
+            },
+            link_color: {
+                main: commonColors.link_color.dark,
+            },
+            secondary_bg_color: {
+                main: commonColors.secondary_bg_color.dark,
+            },
+            section_bg_color: {
+                main: commonColors.section_bg_color.dark,
+            },
+            section_header_text_color: {
+                main: commonColors.section_header_text_color.dark,
+            },
+            subtitle_text_color: {
+                main: commonColors.subtitle_text_color.dark,
+            },
+            surface_dark: {
+                main: commonColors.surface_dark.dark,
+            },
+            text_color: {
+                main: commonColors.text_color.dark,
+            },
+            primary: {
+                main: commonColors.button_color.dark,
+            },
+            background: {
+                default: commonColors.bg_color.dark,
+                paper: commonColors.card_bg_color.dark,
+            },
+            text: {
+                primary: commonColors.text_color.dark,
+                secondary: commonColors.subtitle_text_color.dark,
+            },
+            secondary_fill: {
+                main: commonColors.secondary_fill.dark,
+            },
+            plain_foreground: {
+                main: commonColors.plain_foreground.dark,
+            },
+            plain_background: {
+                main: commonColors.plain_background.dark,
+            },
+            toast_accent_color: {
+                main: commonColors.toast_accent_color.dark,
+            },
+            destructive_background: {
+                main: commonColors.destructive_background.dark,
+            },
+        },
+    },
+};
+const theme = createTheme({
+    colorSchemes,
+});
+export const typography = {
+    largeTitleRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 400,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 600,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    title1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 400,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 600,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 700,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 600,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 700,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title3Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 600,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 700,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    headlineRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    textRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 400,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textMedium: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 500,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 600,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 700,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    subheadline1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Mono: {
+        fontFamily: SFProMono.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Mono: {
+        fontFamily: SFProMono.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption3Regular: {
+        fontFamily: Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.1,
+    },
+    caption3Semibold: {
+        fontFamily: Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 600,
+        lineHeight: 1.07,
+        letterSpacing: 0.1,
+    },
+    caption3Bold: {
+        fontFamily: Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 700,
+        lineHeight: 1.07,
+        letterSpacing: 0.1,
+    },
+};
+export default createTheme(theme, {
+    breakpoints: {
+        keys: ['xs', 'sm', 'md'],
+    },
+    cssVariables: {
+        colorSchemeSelector: 'class',
+    },
+    typography,
+    components: {
+        MuiTypography: {
+            defaultProps: {
+                color: 'text.primary',
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
+                variant: 'contained',
+            },
+            styleOverrides: {
+                root: {
+                    variants: [
+                        {
+                            props: {
+                                size: 'small',
+                            },
+                            style: theme.unstable_sx({
+                                py: 1,
+                                px: 12 / BASE_SPACING,
+                                gap: 6 / BASE_SPACING,
+                            }),
+                        },
+                        {
+                            props: {
+                                size: 'medium',
+                            },
+                            style: theme.unstable_sx({
+                                py: 12 / BASE_SPACING,
+                                px: 2,
+                            }),
+                        },
+                        {
+                            props: {
+                                size: 'large',
+                            },
+                            style: theme.unstable_sx({
+                                py: 15 / BASE_SPACING,
+                                px: 18 / BASE_SPACING,
+                                ...typography.textSemibold,
+                            }),
+                        },
+                    ],
+                    ...theme.unstable_sx({
+                        typography: typography.subheadline2Semibold,
+                        borderRadius: 3,
+                        textTransform: 'none',
+                        '&.MuiButton-root': {
+                            color: theme.palette.button_text_color.main,
+                        },
+                        '&.MuiButton-colorError.MuiButton-text': {
+                            color: theme.palette.destructive_text_color.main,
+                        },
+                        '&.Mui-disabled': {
+                            color: theme.palette.button_text_color.main,
+                            backgroundColor: theme.palette.button_color.main,
+                            opacity: 0.35,
+                        },
+                        '&.MuiButton-colorBezeled': {
+                            backgroundColor: theme.palette.secondary_fill.main,
+                            color: theme.palette.link_color.main,
+                            '&:hover': {
+                                backgroundColor: theme.palette.secondary_fill.main,
+                                opacity: 0.8,
+                            },
+                        },
+                    }),
+                },
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                root: theme.unstable_sx({
+                    borderColor: String(commonColors.divider),
+                }),
+            },
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: ({ theme }) => theme.unstable_sx({
+                    '&.MuiDrawer-paperAnchorBottom': {
+                        borderTopLeftRadius: 12,
+                        borderTopRightRadius: 12,
+                        pb: 4,
+                    },
+                    '&.MuiDrawer-paperAnchorTop': {
+                        borderBottomLeftRadius: 12,
+                        borderBottomRightRadius: 12,
+                        pt: 4,
+                    },
+                    '&.MuiDrawer-paperAnchorLeft': {
+                        borderTopRightRadius: 12,
+                        borderBottomRightRadius: 12,
+                    },
+                    '&.MuiDrawer-paperAnchorRight': {
+                        borderTopLeftRadius: 12,
+                        borderBottomLeftRadius: 12,
+                    },
+                    backgroundColor: theme.palette.bg_color.main,
+                }),
+            },
+        },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'outlined',
+            },
+            styleOverrides: {
+                root: ({ theme }) => theme.unstable_sx({
+                    bgcolor: theme.palette.background.default,
+                    width: '100%',
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                    border: 'none',
+                    '& .MuiInputBase-root': {
+                        height: 48,
+                        px: 2,
+                        py: 13 / BASE_SPACING,
+                    },
+                    '& textarea, input': {
+                        p: '0 !important',
+                    },
+                    '&:has(textarea) .MuiFormControl-root': {
+                        height: 'auto !important',
+                    },
+                    '&:has(textarea) .MuiInputBase-root': {
+                        height: 'auto !important',
+                    },
+                    '& ::placeholder': {
+                        color: theme.palette.secondary_hint_color.main,
+                        ...typography.textRegular,
+                    },
+                    '& fieldset': {
+                        border: 'none',
+                    },
+                    '& .MuiOutlinedInput-root': {
+                        '& fieldset': {
+                            border: 'none',
+                        },
+                    },
+                    '& .MuiFormHelperText-root': {
+                        pb: 10 / BASE_SPACING,
+                    },
+                    '& .MuiInputBase-root.Mui-error': {
+                        borderColor: theme.palette.destructive_text_color.main,
+                        borderRadius: '12px',
+                        borderWidth: '1.5px',
+                        borderStyle: 'solid',
+                    }
+                }),
+            },
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: theme.unstable_sx({
+                    backgroundImage: 'none',
+                }),
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                root: ({ theme }) => theme.unstable_sx({
+                    '&.MuiInputBase-root': {
+                        backgroundColor: theme.palette.bg_color.main,
+                        '&.MuiSelect-root.MuiFilledInput-root': {
+                            backgroundColor: theme.palette.bg_color.main,
+                        },
+                        '&.Mui-error': {
+                            borderColor: theme.palette.destructive_text_color.main,
+                            borderRadius: '12px',
+                            borderWidth: '1.5px',
+                            borderStyle: 'solid',
+                        },
+                    },
+                    '::before, ::after': {
+                        display: 'none',
+                    },
+                }),
+            },
+            defaultProps: {
+                MenuProps: {
+                    sx: {
+                        marginTop: 1,
+                        '.MuiPaper-root': {
+                            borderRadius: 3,
+                        },
+                    },
+                    MenuListProps: {
+                        sx: {
+                            '& :focus': {
+                                backgroundColor: 'transparent !important',
+                            },
+                            '& :hover': {
+                                backgroundColor: 'transparent !important',
+                            },
+                            '& .Mui-selected': {
+                                backgroundColor: 'transparent !important',
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        MuiSwitch: {
+            styleOverrides: {
+                root: ({ theme }) => theme.unstable_sx({
+                    p: 0,
+                    width: 51,
+                    height: 31,
+                    borderRadius: 16,
+                    '& .MuiSwitch-switchBase': {
+                        p: 0,
+                    },
+                    '& .MuiSwitch-track': {
+                        opacity: '1 !important',
+                        backgroundColor: theme.palette.hint_color.main,
+                    },
+                    '& .MuiSwitch-switchBase:has(.Mui-checked)': {
+                        '& .MuiSwitch-track': {
+                            backgroundColor: theme.palette.link_color.main,
+                        },
+                    },
+                    '& .MuiSwitch-thumb': {
+                        m: 2 / BASE_SPACING,
+                        boxShadow: '0px 3px 1px 0px #0000000F, 0px 3px 8px 0px #00000026, 0px 0px 0px 1px #0000000A',
+                        width: 27,
+                        height: 27,
+                        backgroundColor: commonColors.white,
+                        color: commonColors.white,
+                    },
+                    '&:has(.Mui-disabled)': {
+                        opacity: 0.4,
+                    },
+                }),
+            },
+        },
+    },
+});