@sbcrmweb/sbcrmweb-tma-core 0.0.59

package/dist/cjs/theme.js

@@ -0,0 +1,769 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typography = exports.commonColors = exports.BASE_SPACING = void 0;
+const styles_1 = require("@mui/material/styles");
+const fonts_1 = require("./fonts");
+exports.BASE_SPACING = 8;
+exports.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: exports.commonColors.bg_color.light,
+            },
+            card_bg_color: {
+                main: exports.commonColors.card_bg_color.light,
+            },
+            divider: exports.commonColors.divider.light,
+            accent_text_color: {
+                main: exports.commonColors.accent_text_color.light,
+            },
+            header_bg_color: {
+                main: exports.commonColors.header_bg_color.light,
+            },
+            button_color: {
+                main: exports.commonColors.button_color.light,
+            },
+            button_text_color: {
+                main: exports.commonColors.button_text_color.light,
+            },
+            destructive_text_color: {
+                main: exports.commonColors.destructive_text_color.light,
+            },
+            hint_color: {
+                main: exports.commonColors.hint_color.light,
+            },
+            secondary_hint_color: {
+                main: exports.commonColors.secondary_hint_color.light,
+            },
+            link_color: {
+                main: exports.commonColors.link_color.light,
+            },
+            secondary_bg_color: {
+                main: exports.commonColors.secondary_bg_color.light,
+            },
+            section_bg_color: {
+                main: exports.commonColors.section_bg_color.light,
+            },
+            section_header_text_color: {
+                main: exports.commonColors.section_header_text_color.light,
+            },
+            secondary_fill: {
+                main: exports.commonColors.secondary_fill.light,
+            },
+            text_color: {
+                main: exports.commonColors.text_color.light,
+            },
+            subtitle_text_color: {
+                main: exports.commonColors.subtitle_text_color.light,
+            },
+            surface_dark: {
+                main: exports.commonColors.surface_dark.light,
+            },
+            primary: {
+                main: exports.commonColors.button_color.light,
+            },
+            background: {
+                default: exports.commonColors.bg_color.light,
+                paper: exports.commonColors.card_bg_color.light,
+            },
+            text: {
+                primary: exports.commonColors.text_color.light,
+                secondary: exports.commonColors.subtitle_text_color.light,
+            },
+            plain_foreground: {
+                main: exports.commonColors.plain_foreground.light,
+            },
+            plain_background: {
+                main: exports.commonColors.plain_background.light,
+            },
+            toast_accent_color: {
+                main: exports.commonColors.toast_accent_color.light,
+            },
+            destructive_background: {
+                main: exports.commonColors.destructive_background.light,
+            },
+        },
+    },
+    dark: {
+        palette: {
+            bg_color: {
+                main: exports.commonColors.bg_color.dark,
+            },
+            card_bg_color: {
+                main: exports.commonColors.card_bg_color.dark,
+            },
+            divider: exports.commonColors.divider.dark,
+            header_bg_color: {
+                main: exports.commonColors.header_bg_color.dark,
+            },
+            accent_text_color: {
+                main: exports.commonColors.accent_text_color.dark,
+            },
+            button_color: {
+                main: exports.commonColors.button_color.dark,
+            },
+            button_text_color: {
+                main: exports.commonColors.button_text_color.dark,
+            },
+            destructive_text_color: {
+                main: exports.commonColors.destructive_text_color.dark,
+            },
+            hint_color: {
+                main: exports.commonColors.hint_color.dark,
+            },
+            secondary_hint_color: {
+                main: exports.commonColors.secondary_hint_color.dark,
+            },
+            link_color: {
+                main: exports.commonColors.link_color.dark,
+            },
+            secondary_bg_color: {
+                main: exports.commonColors.secondary_bg_color.dark,
+            },
+            section_bg_color: {
+                main: exports.commonColors.section_bg_color.dark,
+            },
+            section_header_text_color: {
+                main: exports.commonColors.section_header_text_color.dark,
+            },
+            subtitle_text_color: {
+                main: exports.commonColors.subtitle_text_color.dark,
+            },
+            surface_dark: {
+                main: exports.commonColors.surface_dark.dark,
+            },
+            text_color: {
+                main: exports.commonColors.text_color.dark,
+            },
+            primary: {
+                main: exports.commonColors.button_color.dark,
+            },
+            background: {
+                default: exports.commonColors.bg_color.dark,
+                paper: exports.commonColors.card_bg_color.dark,
+            },
+            text: {
+                primary: exports.commonColors.text_color.dark,
+                secondary: exports.commonColors.subtitle_text_color.dark,
+            },
+            secondary_fill: {
+                main: exports.commonColors.secondary_fill.dark,
+            },
+            plain_foreground: {
+                main: exports.commonColors.plain_foreground.dark,
+            },
+            plain_background: {
+                main: exports.commonColors.plain_background.dark,
+            },
+            toast_accent_color: {
+                main: exports.commonColors.toast_accent_color.dark,
+            },
+            destructive_background: {
+                main: exports.commonColors.destructive_background.dark,
+            },
+        },
+    },
+};
+const theme = (0, styles_1.createTheme)({
+    colorSchemes,
+});
+exports.typography = {
+    largeTitleRegular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 400,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleSemibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 600,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleBold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    title1Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 400,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 600,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 700,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title2Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 600,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 700,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title3Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 600,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 700,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    headlineRegular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineSemibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineBold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    textRegular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 400,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textMedium: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 500,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textSemibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 600,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textBold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 700,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    subheadline1Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Mono: {
+        fontFamily: fonts_1.SFProMono.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Mono: {
+        fontFamily: fonts_1.SFProMono.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Regular: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Semibold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Bold: {
+        fontFamily: fonts_1.SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption3Regular: {
+        fontFamily: fonts_1.Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.1,
+    },
+    caption3Semibold: {
+        fontFamily: fonts_1.Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 600,
+        lineHeight: 1.07,
+        letterSpacing: 0.1,
+    },
+    caption3Bold: {
+        fontFamily: fonts_1.Inter.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 700,
+        lineHeight: 1.07,
+        letterSpacing: 0.1,
+    },
+};
+exports.default = (0, styles_1.createTheme)(theme, {
+    breakpoints: {
+        keys: ['xs', 'sm', 'md'],
+    },
+    cssVariables: {
+        colorSchemeSelector: 'class',
+    },
+    typography: exports.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 / exports.BASE_SPACING,
+                                gap: 6 / exports.BASE_SPACING,
+                            }),
+                        },
+                        {
+                            props: {
+                                size: 'medium',
+                            },
+                            style: theme.unstable_sx({
+                                py: 12 / exports.BASE_SPACING,
+                                px: 2,
+                            }),
+                        },
+                        {
+                            props: {
+                                size: 'large',
+                            },
+                            style: theme.unstable_sx({
+                                py: 15 / exports.BASE_SPACING,
+                                px: 18 / exports.BASE_SPACING,
+                                ...exports.typography.textSemibold,
+                            }),
+                        },
+                    ],
+                    ...theme.unstable_sx({
+                        typography: exports.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(exports.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 / exports.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,
+                        ...exports.typography.textRegular,
+                    },
+                    '& fieldset': {
+                        border: 'none',
+                    },
+                    '& .MuiOutlinedInput-root': {
+                        '& fieldset': {
+                            border: 'none',
+                        },
+                    },
+                    '& .MuiFormHelperText-root': {
+                        pb: 10 / exports.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 / exports.BASE_SPACING,
+                        boxShadow: '0px 3px 1px 0px #0000000F, 0px 3px 8px 0px #00000026, 0px 0px 0px 1px #0000000A',
+                        width: 27,
+                        height: 27,
+                        backgroundColor: exports.commonColors.white,
+                        color: exports.commonColors.white,
+                    },
+                    '&:has(.Mui-disabled)': {
+                        opacity: 0.4,
+                    },
+                }),
+            },
+        },
+    },
+});