{"version":3,"sources":["../../../src/theme/components/buttons.ts"],"sourcesContent":["/**\n * Button component overrides: buttons, icon buttons, FABs, toggle buttons.\n * @see https://mui.com/material-ui/components/buttons/\n * @see https://mui.com/material-ui/components/button-group/\n * @see https://mui.com/material-ui/components/toggle-button/\n */\nimport varnishTokens from '@allenai/varnish-theme/mui';\nimport type { Components, Theme } from '@mui/material';\n\nexport const buttonComponents: Components<Omit<Theme, 'components'>> = {\n    MuiButton: {\n        defaultProps: {\n            disableElevation: true,\n        },\n        styleOverrides: {\n            root: {\n                textTransform: 'none',\n                lineHeight: '1',\n            },\n            sizeSmall: {\n                padding: '10px 14px',\n                fontSize: '0.75rem',\n            },\n            sizeMedium: {\n                padding: '11px 16px',\n                fontSize: varnishTokens.font.size.sm.value,\n            },\n            sizeLarge: {\n                padding: '16px 18px',\n                fontSize: varnishTokens.font.size.md.value,\n            },\n        },\n        variants: [\n            {\n                props: { variant: 'outlined' },\n                style: {\n                    border: '1px solid',\n                },\n            },\n            // Padding compensates for 1px border: visual size = padding + border\n            {\n                props: { variant: 'outlined', size: 'small' },\n                style: {\n                    padding: '9px 13px',\n                },\n            },\n            {\n                props: { variant: 'outlined', size: 'medium' },\n                style: {\n                    padding: '10px 15px',\n                },\n            },\n            {\n                props: { variant: 'outlined', size: 'large' },\n                style: {\n                    padding: '15px 17px',\n                },\n            },\n            {\n                props: { variant: 'contained', color: 'tertiary' },\n                style: ({ theme }) => {\n                    const { palette } = theme.vars ?? theme;\n                    return {\n                        backgroundColor: palette.tertiary.main,\n                        color: palette.tertiary.contrastText,\n                        '&:hover': { backgroundColor: palette.tertiary.hovered?.fill },\n                    };\n                },\n            },\n            {\n                props: { variant: 'outlined', color: 'tertiary' },\n                style: ({ theme }) => {\n                    const { palette } = theme.vars ?? theme;\n                    return {\n                        color: palette.tertiary.main,\n                        borderColor: palette.tertiary.main,\n                        '&:hover': {\n                            borderColor: palette.tertiary.hovered?.stroke,\n                        },\n                    };\n                },\n            },\n            {\n                props: { variant: 'text' },\n                style: ({ theme }) => ({\n                    '&:hover': {\n                        backgroundColor: (theme.vars ?? theme).palette.button.text.hovered.fill,\n                    },\n                }),\n            },\n            {\n                props: { variant: 'text', color: 'tertiary' },\n                style: ({ theme }) => ({ color: (theme.vars ?? theme).palette.tertiary.main }),\n            },\n            {\n                props: { variant: 'contained', color: 'default' },\n                style: ({ theme }) => {\n                    const { palette } = theme.vars ?? theme;\n                    return {\n                        backgroundColor: palette.default.main,\n                        color: palette.default.contrastText,\n                        '&:hover': { backgroundColor: palette.default.hovered?.fill },\n                    };\n                },\n            },\n            {\n                props: { variant: 'outlined', color: 'default' },\n                style: ({ theme }) => {\n                    const { palette } = theme.vars ?? theme;\n                    return {\n                        color: palette.default.main,\n                        borderColor: palette.default.main,\n                        '&:hover': {\n                            borderColor: palette.default.hovered?.stroke,\n                        },\n                    };\n                },\n            },\n            {\n                props: { variant: 'text', color: 'default' },\n                style: ({ theme }) => ({ color: (theme.vars ?? theme).palette.default.main }),\n            },\n            {\n                props: { shape: 'rounded' },\n                style: { borderRadius: varnishTokens.radii.full.value },\n            },\n        ],\n    },\n    MuiIconButton: {\n        styleOverrides: {\n            root: ({ ownerState, theme }) => {\n                const variant = ownerState.variant;\n                const colorKey = ownerState.color || 'default';\n                const themeWithVars = theme.vars ?? theme;\n                const p = themeWithVars.palette[colorKey as keyof typeof themeWithVars.palette] as\n                    | { main?: string; contrastText?: string; hovered?: { fill?: string } }\n                    | undefined;\n\n                return {\n                    ...(['tertiary', 'default'].includes(colorKey) &&\n                        (!variant || variant === 'text') && { color: p?.main }),\n                    ...(variant === 'contained' &&\n                        p?.main && {\n                            backgroundColor: p.main,\n                            color: p.contrastText,\n                            '&:hover': { backgroundColor: p.hovered?.fill ?? p.main },\n                        }),\n                    ...(variant === 'outlined' &&\n                        p?.main && {\n                            borderColor: p.main,\n                            color: p.main,\n                        }),\n                };\n            },\n            // padding is 1px smaller to compensate for border\n            sizeSmall: {\n                padding: '6px',\n                fontSize: '1.25rem',\n            },\n            sizeMedium: {\n                padding: '6px',\n                fontSize: varnishTokens.sizes.icon.sm.value,\n            },\n            sizeLarge: {\n                padding: '8px',\n                fontSize: varnishTokens.sizes.icon.lg.value,\n            },\n        },\n        variants: [\n            {\n                props: { variant: 'outlined', size: 'small' },\n                style: {\n                    padding: '5px',\n                },\n            },\n            {\n                props: { variant: 'outlined', size: 'medium' },\n                style: {\n                    padding: '5px',\n                },\n            },\n            {\n                props: { variant: 'outlined', size: 'large' },\n                style: {\n                    padding: '8px',\n                },\n            },\n            {\n                props: { shape: 'rounded' },\n                style: { borderRadius: varnishTokens.radii.full.value },\n            },\n        ],\n    },\n};\n"],"mappings":"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","names":["varnishTokens"]}