diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index f119ff4845..88b5a17518 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -41,6 +41,8 @@ jobs: run: yarn build - name: Build Docs + env: + STORYBOOK_BASE: /element/pr-preview/pr-${{ github.event.number }}/ run: yarn build:storybook:ci - name: Deploy PR Preview diff --git a/apps/element-storybook/.storybook/main.ts b/apps/element-storybook/.storybook/main.ts index dc0274fd56..7b8bf5c43b 100644 --- a/apps/element-storybook/.storybook/main.ts +++ b/apps/element-storybook/.storybook/main.ts @@ -1,9 +1,12 @@ // This file has been automatically migrated to valid ESM format by Storybook. -import { createRequire } from "node:module"; -import { dirname, join } from 'path'; +import { createRequire } from 'node:module'; +import { fileURLToPath } from 'node:url'; +import { dirname, join } from 'node:path'; import remarkGfm from 'remark-gfm'; +import tsconfigPaths from 'vite-tsconfig-paths'; import { StorybookConfig } from '@storybook/react-vite'; +const __dirname = dirname(fileURLToPath(import.meta.url)); const require = createRequire(import.meta.url); const config: StorybookConfig = { @@ -20,7 +23,7 @@ const config: StorybookConfig = { getAbsolutePath('@storybook/addon-themes'), getAbsolutePath('@storybook/addon-a11y'), { - name: getAbsolutePath("@storybook/addon-docs"), + name: getAbsolutePath('@storybook/addon-docs'), options: { mdxPluginOptions: { mdxCompileOptions: { @@ -28,7 +31,7 @@ const config: StorybookConfig = { }, }, }, - } + }, ], framework: { @@ -55,10 +58,18 @@ const config: StorybookConfig = { features: { actions: false, interactions: false, - storyStoreV7: false + storyStoreV7: false, }, - docs: {} + docs: {}, + + viteFinal: async (config) => { + config.plugins = [...(config.plugins || []), tsconfigPaths({ root: join(__dirname, '../../..') })]; + if (process.env.STORYBOOK_BASE) { + config.base = process.env.STORYBOOK_BASE; + } + return config; + }, }; export default config; diff --git a/apps/element-storybook/.storybook/preview.tsx b/apps/element-storybook/.storybook/preview.tsx index bcd9f17382..4ce3b23484 100644 --- a/apps/element-storybook/.storybook/preview.tsx +++ b/apps/element-storybook/.storybook/preview.tsx @@ -1,18 +1,47 @@ - import React from 'react'; -import { themes } from 'storybook/theming'; +import React from 'react'; import { Preview } from '@storybook/react-vite'; import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/addon-docs/blocks'; import type { StoryContext } from 'storybook/internal/types'; import { ThemeProvider } from '@availity/theme-provider'; -const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => { +const docsBackgrounds: Record = { + lightTheme: '#FFFFFF', + legacyBS: '#FFFFFF', + docsLight: '#EEF1F8', + docsDark: '#000C30', +}; + +const ThemeWrapper = ({ Story, theme }: { Story: () => React.JSX.Element; theme: string }) => { + const bg = docsBackgrounds[theme] || '#FFFFFF'; + const isDark = theme === 'docsDark'; + + React.useEffect(() => { + document.body.style.background = bg; + document.body.style.color = isDark ? '#EFF3FF' : '#000C30'; + + const docsStory = document.querySelector('.docs-story') as HTMLElement; + if (docsStory) { + docsStory.style.background = bg; + } + const sbDocs = document.querySelector('.sb-docs') as HTMLElement; + if (sbDocs) { + sbDocs.style.background = bg; + sbDocs.style.color = isDark ? '#EFF3FF' : '#000C30'; + } + }, [bg, isDark]); + return ( - + ); }; +const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => { + const theme = context.globals.theme || 'lightTheme'; + return ; +}; + const preview: Preview = { globalTypes: { theme: { @@ -23,6 +52,8 @@ const preview: Preview = { items: [ { value: 'lightTheme', icon: 'sun', title: 'Light (default)' }, { value: 'legacyBS', icon: 'markup', title: 'Legacy Bootstrap' }, + { value: 'docsLight', icon: 'document', title: 'Docs Light' }, + { value: 'docsDark', icon: 'moon', title: 'Docs Dark' }, ], dynamicTitle: true, showName: true, @@ -38,7 +69,6 @@ const preview: Preview = { sort: 'requiredFirst', disableSaveFromUI: true, }, - theme: themes.light, source: { excludeDecorators: true, type: 'code', @@ -46,6 +76,7 @@ const preview: Preview = { page: () => { // https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/DocsPage.tsx // Adjusting autodocs when no component passed + // eslint-disable-next-line react-hooks/rules-of-hooks const resolvedOf = useOf('meta', ['meta']); const { stories, meta } = resolvedOf.csfFile; const isSingleStory = Object.keys(stories).length === 1; @@ -79,7 +110,15 @@ const preview: Preview = { 'Sample Layouts', 'Design System', 'Form Components', - ['Component Guide', 'Controlled Form', ['*', 'README'], 'Uncontrolled Fields', ['Autocomplete', ['*', 'README'], '*', 'Datepicker', ['*', 'README'], 'TextField', ['*', 'README']], 'Uncontrolled FormUtils', ['*', 'README']], + [ + 'Component Guide', + 'Controlled Form', + ['*', 'README'], + 'Uncontrolled Fields', + ['Autocomplete', ['*', 'README'], '*', 'Datepicker', ['*', 'README'], 'TextField', ['*', 'README']], + 'Uncontrolled FormUtils', + ['*', 'README'], + ], 'Components', ], }, @@ -88,9 +127,9 @@ const preview: Preview = { }; // Make sure we are in the browser before starting -if (typeof global.process === 'undefined') { - // eslint-disable-next-line @nx/enforce-module-boundaries - import('../../../packages/mock/src/lib/browser').then(({ worker }) => { +if (global.process === undefined) { + // eslint-disable-next-line promise/catch-or-return, unicorn/prefer-top-level-await + import('@availity/mock/src/lib/browser').then(({ worker }) => { const config = process.env.NODE_ENV === 'development' ? { @@ -100,7 +139,7 @@ if (typeof global.process === 'undefined') { serviceWorker: { url: '/element/mockServiceWorker.js' }, onUnhandledRequest: 'bypass', }; - worker.start(config); + return worker.start(config); }); } diff --git a/packages/theme-provider/src/lib/theme-provider.tsx b/packages/theme-provider/src/lib/theme-provider.tsx index fec15b99b3..d0477ade81 100644 --- a/packages/theme-provider/src/lib/theme-provider.tsx +++ b/packages/theme-provider/src/lib/theme-provider.tsx @@ -1,4 +1,4 @@ -import { lightTheme as lightThemeOptions, legacyTheme as legacyThemeOptions } from '@availity/theme'; +import { lightTheme as lightThemeOptions, legacyTheme as legacyThemeOptions, docsLightTheme as docsLightThemeOptions, docsDarkTheme as docsDarkThemeOptions } from '@availity/theme'; import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'; import type { Theme, ThemeOptions } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; @@ -8,16 +8,20 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; const lightTheme = createTheme(lightThemeOptions as ThemeOptions); const legacyTheme = createTheme(legacyThemeOptions as ThemeOptions); +const docsLightTheme = createTheme(docsLightThemeOptions as ThemeOptions); +const docsDarkTheme = createTheme(docsDarkThemeOptions as ThemeOptions); export type ThemeProviderProps = { children: React.ReactNode; /** Availity theme to use */ - theme?: 'lightTheme' | 'legacyBS'; + theme?: 'lightTheme' | 'legacyBS' | 'docsLight' | 'docsDark'; }; const themes: Record = { lightTheme, legacyBS: legacyTheme, + docsLight: docsLightTheme, + docsDark: docsDarkTheme, }; export function ThemeProvider({ children, theme = 'lightTheme' }: ThemeProviderProps) { @@ -26,7 +30,7 @@ export function ThemeProvider({ children, theme = 'lightTheme' }: ThemeProviderP dateAdapter={AdapterDayjs} localeText={enUSDate.components.MuiLocalizationProvider.defaultProps.localeText} > - + {children} diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index e1c53dca78..1ffc9f0a28 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -1,2 +1,4 @@ export * from './lib/legacy-theme'; export * from './lib/light-theme'; +export * from './lib/docs-light-theme'; +export * from './lib/docs-dark-theme'; diff --git a/packages/theme/src/lib/docs-dark-theme.ts b/packages/theme/src/lib/docs-dark-theme.ts new file mode 100644 index 0000000000..05cc142e28 --- /dev/null +++ b/packages/theme/src/lib/docs-dark-theme.ts @@ -0,0 +1,593 @@ +import { docsLightTheme } from './docs-light-theme'; + +export const docsDarkTheme = { + ...docsLightTheme, + palette: { + ...docsLightTheme.palette, + mode: 'dark' as const, + text: { + primary: '#EFF3FF', + secondary: '#BBD5EA', + disabled: '#5E616E', + }, + background: { + default: '#000C30', + paper: '#061645', + }, + divider: '#0F2A7C', + tertiary: { + main: '#000C30', + light: '#061645', + dark: '#000820', + contrastText: '#FFFFFF', + }, + }, + components: { + MuiAccordion: { + styleOverrides: { + root: { + borderRadius: '12px', + border: '1px solid #0F2A7C', + backgroundColor: '#061645', + overflow: 'hidden', + '&:before': { display: 'none' }, + '&.Mui-expanded': { margin: 0 }, + '&.MuiAccordion-avFilled': { + border: '1px solid #0F2A7C', + backgroundColor: '#061645', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root': { + backgroundColor: '#0B1D4A', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root:hover': { + backgroundColor: '#0E2558', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root:active': { + backgroundColor: '#071A3E', + }, + }, + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: { + padding: '16px', + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + color: '#FFFFFF', + borderRadius: 'inherit', + '&:hover': { backgroundColor: '#0B2A60' }, + '&:focus-visible': { boxShadow: 'inset 0 0 0 2px #369CFF' }, + '&:active': { backgroundColor: '#05204F' }, + }, + expandIconWrapper: { color: '#519EE6' }, + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { + padding: '0 16px 16px 56px', + fontFamily: 'Lato', + fontSize: '18px', + lineHeight: '26px', + color: '#FFFFFF', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '24px', + padding: '24px', + backgroundColor: '#061645', + border: '1px solid #0F2A7C', + backgroundImage: 'none', + }, + }, + }, + MuiCardActionArea: { + styleOverrides: { + root: { + '&:hover': { + backgroundColor: '#0B2A60', + }, + '&:active': { + backgroundColor: '#000C30', + }, + '&:focus-visible': { + border: '2px solid #369CFF', + }, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: { + borderRadius: '50px', + padding: '4px 8px', + fontSize: '12px', + lineHeight: '18px', + fontFamily: 'Lato', + height: 'auto', + }, + colorSuccess: { + backgroundColor: '#052E2A', + border: '1px solid #0C7368', + color: '#CCFBF1', + }, + colorInfo: { + backgroundColor: '#061632', + border: '1px solid #103E8E', + color: '#EBF3F9', + }, + colorWarning: { + backgroundColor: '#2E2705', + border: '1px solid #534609', + color: '#FFF5BD', + }, + colorError: { + backgroundColor: '#381520', + border: '1px solid #84153A', + color: '#FFB6CE', + }, + colorDefault: { + backgroundColor: '#5E616E', + color: '#FFFFFF', + }, + }, + }, + MuiTableContainer: { + styleOverrides: { + root: { + borderRadius: '8px', + backgroundColor: '#151823', + border: '1px solid #363C4D', + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: '#191F31', + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '16px', + lineHeight: '26px', + borderColor: '#363C4D', + color: 'rgba(239, 243, 255, 0.9)', + backgroundColor: '#151823', + }, + head: { + fontWeight: 400, + fontSize: '16px', + lineHeight: '20px', + color: '#FFFFFF', + backgroundColor: '#191F31', + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + borderRadius: '8px', + padding: '0 12px', + height: '40px', + backgroundColor: 'rgba(0, 12, 48, 0.9)', + '& fieldset': { + borderColor: '#1552BC', + }, + '&:hover fieldset': { + borderColor: '#519EE6', + }, + '&.Mui-focused fieldset': { + borderColor: '#369CFF', + borderWidth: '2px', + }, + '&.Mui-disabled fieldset': { + borderColor: '#1552BC', + }, + '&.Mui-disabled': { + opacity: 0.5, + }, + }, + input: { + padding: '8px 0', + fontSize: '18px', + fontFamily: 'Lato', + lineHeight: '26px', + color: '#FFFFFF', + '&::placeholder': { + color: '#838795', + opacity: 1, + }, + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + avWrapper: { + display: 'flex', + alignItems: 'center', + gap: '4px', + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '18px', + lineHeight: '26px', + fontWeight: 400, + color: '#EFF3FF', + }, + }, + }, + MuiFormHelperText: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '12px', + lineHeight: '18px', + color: '#BBD5EA', + display: 'flex', + alignItems: 'center', + marginLeft: 0, + '& .MuiSvgIcon-root': { + fontSize: '14px', + }, + }, + }, + }, + MuiMenu: { + styleOverrides: { + paper: { + backgroundColor: '#000C30', + border: '1px solid #0F2A7C', + borderRadius: '16px', + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + padding: '6px 16px', + fontSize: '18px', + fontFamily: 'Lato', + lineHeight: '26px', + color: '#FFFFFF', + backgroundColor: '#000C30', + '.MuiSvgIcon-root': { + color: '#91B0DA', + }, + '&:hover': { + backgroundColor: '#0B2A60', + }, + '&:focus-visible': { + border: '1px solid #369CFF', + borderRadius: '8px', + backgroundColor: '#000C30', + }, + '&:active': { + backgroundColor: '#061645', + }, + '&.Mui-disabled': { + opacity: 0.5, + backgroundColor: '#061645', + }, + }, + }, + }, + MuiListSubheader: { + styleOverrides: { + root: { + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + color: '#91B0DA', + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + borderRadius: '100px', + padding: '8px 12px', + width: '40px', + height: '40px', + backgroundColor: '#061645', + border: '1px solid #519EE6', + color: '#519EE6', + '&:hover': { + background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.3) 100%)', + borderColor: '#FFFFFF', + color: '#FFFFFF', + }, + '&:focus-visible': { + border: '2px solid #519EE6', + }, + '&:active': { + backgroundColor: '#061645', + borderColor: '#519EE6', + color: '#FFFFFF', + }, + '&.Mui-disabled': { + opacity: 0.5, + border: '1px solid #519EE6', + }, + }, + sizeSmall: { + width: 'auto', + height: 'auto', + padding: '2px', + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + background: 'transparent', + border: 'none', + }, + '&:focus-visible': { + border: 'none', + outline: '2px solid #369CFF', + borderRadius: '4px', + }, + '&:active': { + border: 'none', + backgroundColor: 'transparent', + }, + '&.Mui-disabled': { + border: 'none', + }, + }, + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + disableRipple: true, + variant: 'contained', + color: 'primary', + }, + styleOverrides: { + root: { + borderRadius: '100px', + padding: '8px 22px', + textTransform: 'none' as const, + fontWeight: 700, + fontSize: '15px', + lineHeight: '24px', + letterSpacing: '0.01em', + }, + containedPrimary: { + background: 'linear-gradient(90deg, #FF9900 0%, #FF671F 100%)', + color: '#0D2543', + '&:hover': { + background: 'linear-gradient(90deg, #FF671F 0%, #FF9900 100%)', + borderColor: '#FFC300', + }, + '&:focus-visible': { + background: '#FF671F', + outline: '2px solid #369CFF', + }, + '&:active': { + background: '#FF671F', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + }, + }, + outlinedPrimary: { + borderColor: '#91B0DA', + color: 'rgba(255, 255, 255, 0.9)', + '&:hover': { + background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.3) 100%)', + borderColor: '#FFFFFF', + color: '#FFFFFF', + }, + '&:focus-visible': { + outline: '2px solid #369CFF', + border: '1px solid #FFFFFF', + }, + '&:active': { + borderColor: '#91B0DA', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#EEEFF2', + border: 'none', + }, + }, + outlinedSecondary: { + borderColor: '#91B0DA', + color: 'rgba(255, 255, 255, 0.9)', + '&:hover': { + background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.3) 100%)', + borderColor: '#FFFFFF', + color: '#FFFFFF', + }, + '&:focus-visible': { + outline: '2px solid #369CFF', + border: '1px solid #FFFFFF', + }, + '&:active': { + borderColor: '#91B0DA', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#EEEFF2', + border: 'none', + }, + }, + containedTertiary: { + backgroundColor: 'transparent', + color: '#FFFFFF', + '&:hover': { + backgroundColor: 'rgba(15, 42, 124, 0.2)', + }, + '&:focus-visible': { + outline: '2px solid #369CFF', + }, + '&:active': { + backgroundColor: 'rgba(15, 42, 124, 0.3)', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#EEEFF2', + }, + }, + outlinedTertiary: { + borderColor: '#91B0DA', + color: 'rgba(255, 255, 255, 0.9)', + '&:hover': { + backgroundColor: 'rgba(145, 176, 218, 0.1)', + borderColor: '#FFFFFF', + color: '#FFFFFF', + }, + '&:focus-visible': { + outline: '2px solid #369CFF', + border: '1px solid #FFFFFF', + }, + '&:active': { + borderColor: '#91B0DA', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#EEEFF2', + border: 'none', + }, + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontWeight: 700, + fontSize: '16px', + lineHeight: '24px', + letterSpacing: '0.01em', + color: '#FFFFFF', + textDecoration: 'none', + '&:hover': { + color: '#FFD300', + textDecoration: 'none', + }, + '&:focus-visible': { + outline: '2px solid #369CFF', + borderRadius: '4px', + }, + '&.Mui-disabled': { + opacity: 0.5, + color: '#FFFFFF', + }, + '& .MuiSvgIcon-root': { + fontSize: 'inherit', + }, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: { + padding: '4px 8px', + borderRadius: '8px', + gap: '12px', + fontFamily: 'Lato', + fontSize: '16px', + lineHeight: '24px', + letterSpacing: '0.01em', + color: 'rgba(239, 243, 255, 0.9)', + '&:hover': { backgroundColor: '#1F273C' }, + '&:active': { backgroundColor: '#191F31' }, + '&:focus-visible': { outline: '2px solid #369CFF' }, + '&.Mui-disabled': { opacity: 0.5 }, + }, + }, + }, + MuiAvatar: { + styleOverrides: { + root: { + width: 40, + height: 40, + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + backgroundColor: '#0F2A7C', + color: '#FFFFFF', + }, + }, + }, + MuiTabs: { + styleOverrides: { + indicator: { + backgroundColor: '#FFFFFF', + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + padding: '10px 16px', + fontFamily: 'Lato', + fontWeight: 400, + fontSize: '15px', + lineHeight: '24px', + letterSpacing: '0.01em', + textTransform: 'none' as const, + color: 'rgba(239, 243, 255, 0.9)', + borderRadius: 0, + minHeight: '44px', + '&:hover': { + fontWeight: 700, + color: '#FFFFFF', + }, + '&:focus-visible': { + border: '2px solid #369CFF', + borderRadius: '8px', + }, + '&.Mui-selected': { + fontWeight: 700, + color: 'rgba(239, 243, 255, 0.9)', + }, + '&.Mui-disabled': { + opacity: 0.5, + }, + }, + }, + }, + MuiAlert: { + styleOverrides: { + root: { + borderRadius: '8px', + padding: '8px 8px 8px 16px', + }, + standardError: { + backgroundColor: '#381520', + border: '1px solid #84153A', + }, + standardSuccess: { + backgroundColor: '#052E2A', + border: '1px solid #0C7368', + }, + standardWarning: { + backgroundColor: '#2E2705', + border: '1px solid #534609', + }, + standardInfo: { + backgroundColor: '#061632', + border: '1px solid #103E8E', + }, + }, + }, + }, +}; diff --git a/packages/theme/src/lib/docs-light-theme.ts b/packages/theme/src/lib/docs-light-theme.ts new file mode 100644 index 0000000000..f6b6e43e65 --- /dev/null +++ b/packages/theme/src/lib/docs-light-theme.ts @@ -0,0 +1,671 @@ +export const docsLightTheme = { + palette: { + mode: 'light' as const, + primary: { + main: '#FF671F', + light: '#FFA880', + dark: '#CA4F16', + }, + secondary: { + main: '#FFD300', + }, + tertiary: { + main: '#F5F6F8', + light: '#FFFFFF', + dark: '#E8EAF0', + contrastText: '#0F2A7C', + }, + error: { + main: '#C70002', + light: '#FA7AA5', + dark: '#84153A', + }, + success: { + main: '#0C7368', + light: '#11A191', + dark: '#052E2A', + }, + warning: { + main: '#806D0F', + light: '#FFE762', + dark: '#534609', + }, + info: { + main: '#1552BC', + light: '#519EE6', + dark: '#103E8E', + }, + text: { + primary: '#000C30', + secondary: 'rgba(0, 12, 48, 0.9)', + disabled: '#5E616E', + }, + background: { + default: '#F5F6F8', + paper: '#FFFFFF', + }, + divider: '#D3D5DC', + }, + typography: { + fontFamily: "'Lato', sans-serif", + h1: { + fontFamily: 'Montserrat', + fontSize: 56, + fontWeight: 600, + lineHeight: '68px', + }, + h2: { + fontFamily: 'Montserrat', + fontSize: 36, + fontWeight: 600, + lineHeight: '48px', + }, + h3: { + fontFamily: 'Montserrat', + fontSize: 28, + fontWeight: 600, + lineHeight: '40px', + }, + h4: { + fontFamily: 'Montserrat', + fontSize: 24, + fontWeight: 600, + lineHeight: '32px', + }, + h5: { + fontFamily: 'Montserrat', + fontSize: 20, + fontWeight: 600, + lineHeight: '24px', + }, + h6: { + fontFamily: 'Montserrat', + fontSize: 16, + fontWeight: 600, + lineHeight: '22px', + }, + body1: { + fontFamily: 'Lato', + fontSize: 16, + fontWeight: 400, + lineHeight: '26px', + }, + body2: { + fontFamily: 'Lato', + fontSize: 14, + fontWeight: 400, + lineHeight: '24px', + }, + subtitle1: { + fontFamily: 'Lato', + fontSize: 18, + fontWeight: 400, + lineHeight: '26px', + }, + subtitle2: { + fontFamily: 'Lato', + fontSize: 14, + fontWeight: 600, + lineHeight: '26px', + }, + button: { + fontFamily: 'Lato', + fontSize: 16, + fontWeight: 700, + lineHeight: '24px', + textTransform: 'none' as const, + }, + }, + shape: { + borderRadius: 8, + }, + spacing: 8, + components: { + MuiAccordion: { + styleOverrides: { + root: { + borderRadius: '12px', + border: '1px solid #D3D5DC', + backgroundColor: '#FFFFFF', + overflow: 'hidden', + '&:before': { display: 'none' }, + '&.Mui-expanded': { margin: 0 }, + '&.MuiAccordion-avFilled': { + border: '1px solid #E8EAF0', + backgroundColor: '#FFFFFF', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root': { + backgroundColor: '#F5F6F8', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root:hover': { + backgroundColor: '#ECEEF3', + }, + '&.MuiAccordion-avFilled > .MuiAccordion-heading .MuiAccordionSummary-root:active': { + backgroundColor: '#E4E7EF', + }, + }, + }, + }, + MuiAccordionSummary: { + styleOverrides: { + root: { + padding: '16px', + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + color: '#0D2543', + borderRadius: 'inherit', + '&:hover': { backgroundColor: '#F5F6F8' }, + '&:focus-visible': { boxShadow: 'inset 0 0 0 2px #1B74CB' }, + '&:active': { backgroundColor: '#EFF3FF' }, + }, + expandIconWrapper: { color: '#0F2A7C' }, + }, + }, + MuiAccordionDetails: { + styleOverrides: { + root: { + padding: '0 16px 16px 56px', + fontFamily: 'Lato', + fontSize: '18px', + lineHeight: '26px', + color: '#0D2543', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: '24px', + padding: '24px', + border: '1px solid #D3D5DC', + backgroundImage: 'none', + }, + }, + }, + MuiCardActionArea: { + styleOverrides: { + root: { + '&:hover': { + backgroundColor: '#F5F6F8', + }, + '&:active': { + backgroundColor: '#FFFFFF', + }, + '&:focus-visible': { + border: '2px solid #1B74CB', + }, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: { + borderRadius: '50px', + padding: '4px 8px', + fontSize: '12px', + lineHeight: '18px', + fontFamily: 'Lato', + height: 'auto', + }, + colorSuccess: { + backgroundColor: '#CCFBF1', + border: '1px solid #11A191', + color: '#07453F', + }, + colorInfo: { + backgroundColor: '#EBF3F9', + border: '1px solid #94C4EB', + color: '#103E8E', + }, + colorWarning: { + backgroundColor: '#FFF5BD', + border: '1px solid #E6C400', + color: '#534609', + }, + colorError: { + backgroundColor: '#FFD9E5', + border: '1px solid #FF7DA8', + color: '#822F4B', + }, + colorDefault: { + backgroundColor: '#5E616E', + color: '#FFFFFF', + }, + }, + }, + MuiTableContainer: { + styleOverrides: { + root: { + borderRadius: '8px', + border: '1px solid #D3D5DC', + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: '#F5F6F8', + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '16px', + lineHeight: '26px', + borderColor: '#D3D5DC', + color: '#0D2543', + }, + head: { + fontWeight: 400, + fontSize: '16px', + lineHeight: '20px', + color: '#0D2543', + backgroundColor: '#F5F6F8', + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + borderRadius: '8px', + padding: '0 12px', + height: '40px', + backgroundColor: '#FFFFFF', + '& fieldset': { + borderColor: '#6A7594', + }, + '&:hover fieldset': { + borderColor: '#0F2A7C', + }, + '&.Mui-focused fieldset': { + borderColor: '#1B74CB', + borderWidth: '2px', + }, + '&.Mui-disabled fieldset': { + borderColor: '#D3D5DC', + }, + }, + input: { + padding: '8px 0', + fontSize: '18px', + fontFamily: 'Lato', + lineHeight: '26px', + '&::placeholder': { + color: '#838795', + opacity: 1, + }, + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + avWrapper: { + display: 'flex', + alignItems: 'center', + gap: '4px', + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '18px', + lineHeight: '26px', + fontWeight: 400, + color: '#0D2543', + }, + }, + }, + MuiFormHelperText: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontSize: '12px', + lineHeight: '18px', + color: '#454754', + display: 'flex', + alignItems: 'center', + marginLeft: 0, + '& .MuiSvgIcon-root': { + fontSize: '14px', + }, + }, + }, + }, + MuiMenu: { + styleOverrides: { + paper: { + backgroundColor: '#EFF3FF', + borderRadius: '16px', + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + padding: '6px 16px', + fontSize: '18px', + fontFamily: 'Lato', + lineHeight: '26px', + color: '#0D2543', + '.MuiSvgIcon-root': { + color: '#0D2543', + }, + '&:hover': { + backgroundColor: '#BBD5EA', + }, + '&:focus-visible': { + border: '2px solid #1B74CB', + borderRadius: '8px', + backgroundColor: 'transparent', + }, + '&:active': { + backgroundColor: '#A6C5DE', + }, + '&.Mui-disabled': { + opacity: 0.5, + }, + }, + }, + }, + MuiListSubheader: { + styleOverrides: { + root: { + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + color: '#0D2543', + }, + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + borderRadius: '100px', + padding: '8px 12px', + width: '40px', + height: '40px', + border: '1px solid #0F2A7C', + color: '#0F2A7C', + '&:hover': { + background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.5) 100%)', + borderColor: '#0F2A7C', + }, + '&:focus-visible': { + border: '2px solid #1B74CB', + }, + '&:active': { + borderColor: '#0F2A7C', + }, + '&.Mui-disabled': { + opacity: 0.5, + border: '1px solid #0F2A7C', + }, + }, + sizeSmall: { + width: 'auto', + height: 'auto', + padding: '2px', + border: 'none', + backgroundColor: 'transparent', + '&:hover': { + background: 'transparent', + border: 'none', + }, + '&:focus-visible': { + border: 'none', + outline: '2px solid #1B74CB', + borderRadius: '4px', + }, + '&:active': { + border: 'none', + }, + '&.Mui-disabled': { + border: 'none', + }, + }, + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + disableRipple: true, + variant: 'contained', + color: 'primary', + }, + styleOverrides: { + root: { + borderRadius: '100px', + padding: '8px 22px', + textTransform: 'none' as const, + fontWeight: 700, + fontSize: '15px', + lineHeight: '24px', + letterSpacing: '0.01em', + }, + containedPrimary: { + background: 'linear-gradient(90deg, #FF9900 0%, #FF671F 100%)', + color: '#0D2543', + '&:hover': { + background: 'linear-gradient(90deg, #FF671F 0%, #FF9900 100%)', + borderColor: '#FFC300', + }, + '&:focus-visible': { + background: '#FF671F', + outline: '2px solid #1B74CB', + }, + '&:active': { + background: '#FF671F', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + }, + }, + outlinedPrimary: { + borderColor: '#FF671F', + color: '#CA4F16', + '&:hover': { + background: 'rgba(255, 103, 31, 0.08)', + borderColor: '#CA4F16', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + border: '1px solid #FF671F', + }, + '&:active': { + borderColor: '#FF671F', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + border: 'none', + }, + }, + outlinedSecondary: { + borderColor: '#B89600', + color: '#806D0F', + '&:hover': { + background: 'rgba(255, 211, 0, 0.1)', + borderColor: '#806D0F', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + border: '1px solid #B89600', + }, + '&:active': { + borderColor: '#B89600', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + border: 'none', + }, + }, + containedTertiary: { + backgroundColor: 'transparent', + color: '#0F2A7C', + '&:hover': { + backgroundColor: 'rgba(15, 42, 124, 0.08)', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + }, + '&:active': { + backgroundColor: 'rgba(15, 42, 124, 0.12)', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + }, + }, + outlinedTertiary: { + borderColor: '#0F2A7C', + color: '#0F2A7C', + '&:hover': { + backgroundColor: 'rgba(15, 42, 124, 0.08)', + borderColor: '#0F2A7C', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + border: '1px solid #0F2A7C', + }, + '&:active': { + backgroundColor: 'rgba(15, 42, 124, 0.12)', + }, + '&.Mui-disabled': { + background: '#838795', + color: '#FFFFFF', + border: 'none', + }, + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + fontFamily: 'Lato', + fontWeight: 700, + fontSize: '16px', + lineHeight: '24px', + letterSpacing: '0.01em', + color: '#0F2A7C', + textDecoration: 'none', + '&:hover': { + color: '#CA4F16', + textDecoration: 'none', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + borderRadius: '4px', + }, + '&.Mui-disabled': { + opacity: 0.5, + color: '#0F2A7C', + }, + '& .MuiSvgIcon-root': { + fontSize: 'inherit', + }, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: { + padding: '4px 8px', + borderRadius: '8px', + gap: '12px', + fontFamily: 'Lato', + fontSize: '16px', + lineHeight: '24px', + letterSpacing: '0.01em', + color: '#0D2543', + '&:hover': { backgroundColor: '#F5F6F8' }, + '&:active': { backgroundColor: '#EBECF2' }, + '&:focus-visible': { outline: '2px solid #1B74CB' }, + '&.Mui-disabled': { opacity: 0.5 }, + }, + }, + }, + MuiAvatar: { + styleOverrides: { + root: { + width: 40, + height: 40, + fontFamily: 'Montserrat', + fontWeight: 600, + fontSize: '16px', + lineHeight: '22px', + backgroundColor: '#D3D5DC', + color: '#0D2543', + }, + }, + }, + MuiTabs: { + styleOverrides: { + indicator: { + backgroundColor: '#0D2543', + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + padding: '10px 16px', + fontFamily: 'Lato', + fontWeight: 400, + fontSize: '15px', + lineHeight: '24px', + letterSpacing: '0.01em', + textTransform: 'none' as const, + color: '#0D2543', + borderRadius: 0, + minHeight: '44px', + '&:hover': { + fontWeight: 700, + }, + '&:focus-visible': { + border: '2px solid #1B74CB', + borderRadius: '8px', + }, + '&.Mui-selected': { + fontWeight: 700, + color: '#0D2543', + }, + '&.Mui-disabled': { + opacity: 0.5, + }, + }, + }, + }, + MuiAlert: { + styleOverrides: { + root: { + borderRadius: '8px', + padding: '8px 8px 8px 16px', + }, + standardError: { + backgroundColor: '#FFCFDF', + border: '1px solid #FA7AA5', + }, + standardSuccess: { + backgroundColor: '#CCFBF1', + border: '1px solid #11A191', + }, + standardWarning: { + backgroundColor: '#FFF5BD', + }, + standardInfo: { + backgroundColor: '#EBF3F9', + border: '1px solid #94C4EB', + }, + }, + }, + }, +};