From bc65faf9007b26d2bee8d48b518abf3517dd9a9c Mon Sep 17 00:00:00 2001 From: Jordan Young Date: Mon, 22 Jun 2026 14:21:45 -0400 Subject: [PATCH 1/5] feat: add docs-light and docs-dark themes with component overrides --- apps/element-storybook/.storybook/main.ts | 10 +- apps/element-storybook/.storybook/preview.tsx | 2 + .../theme-provider/src/lib/theme-provider.tsx | 10 +- packages/theme/src/index.ts | 2 + packages/theme/src/lib/docs-dark-theme.ts | 429 +++++++++++++++ packages/theme/src/lib/docs-light-theme.ts | 510 ++++++++++++++++++ 6 files changed, 959 insertions(+), 4 deletions(-) create mode 100644 packages/theme/src/lib/docs-dark-theme.ts create mode 100644 packages/theme/src/lib/docs-light-theme.ts diff --git a/apps/element-storybook/.storybook/main.ts b/apps/element-storybook/.storybook/main.ts index dc0274fd56..5c94411098 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 { fileURLToPath } from "node:url"; import { dirname, join } from '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 = { @@ -58,7 +61,12 @@ const config: StorybookConfig = { storyStoreV7: false }, - docs: {} + docs: {}, + + viteFinal: async (config) => { + config.plugins = [...(config.plugins || []), tsconfigPaths({ root: join(__dirname, '../../..') })]; + return config; + }, }; export default config; diff --git a/apps/element-storybook/.storybook/preview.tsx b/apps/element-storybook/.storybook/preview.tsx index bcd9f17382..d2aa803e98 100644 --- a/apps/element-storybook/.storybook/preview.tsx +++ b/apps/element-storybook/.storybook/preview.tsx @@ -23,6 +23,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, 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..1f068215c2 --- /dev/null +++ b/packages/theme/src/lib/docs-dark-theme.ts @@ -0,0 +1,429 @@ +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', + }, + 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: '100px', + padding: '8px 16px', + 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: 0, + fontSize: '15px', + fontFamily: 'Lato', + lineHeight: '24px', + letterSpacing: '0.01em', + color: '#FFFFFF', + '&::placeholder': { + color: '#FFFFFF', + opacity: 0.8, + }, + }, + }, + }, + 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', + }, + }, + }, + }, + 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', + }, + }, + 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', + }, + }, + }, + }, + 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', + }, + }, + }, + }, + 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', + }, + }, + }, + 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..aa041f924f --- /dev/null +++ b/packages/theme/src/lib/docs-light-theme.ts @@ -0,0 +1,510 @@ +export const docsLightTheme = { + palette: { + mode: 'light' as const, + primary: { + main: '#FF671F', + light: '#FFA880', + dark: '#CA4F16', + }, + secondary: { + main: '#FFD300', + }, + 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: '100px', + padding: '8px 16px', + height: '40px', + backgroundColor: '#FFFFFF', + '& fieldset': { + borderColor: '#D3D5DC', + }, + '&:hover fieldset': { + borderColor: '#0F2A7C', + }, + '&.Mui-focused fieldset': { + borderColor: '#1B74CB', + borderWidth: '2px', + }, + '&.Mui-disabled fieldset': { + borderColor: '#D3D5DC', + }, + }, + input: { + padding: 0, + fontSize: '15px', + fontFamily: 'Lato', + lineHeight: '24px', + letterSpacing: '0.01em', + '&::placeholder': { + opacity: 0.8, + }, + }, + }, + }, + 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', + }, + }, + }, + }, + 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', + }, + }, + outlinedSecondary: { + borderColor: '#0F2A7C', + color: '#0D2543', + '&:hover': { + background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.5) 100%)', + borderColor: '#0F2A7C', + }, + '&:focus-visible': { + outline: '2px solid #1B74CB', + border: '1px solid #FFFFFF', + }, + '&:active': { + borderColor: '#0F2A7C', + }, + '&.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', + }, + }, + }, + }, + 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', + }, + }, + }, + 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', + }, + }, + }, + }, +}; From e5f6565e7404ecbb7b79d3754f529e70469eafe6 Mon Sep 17 00:00:00 2001 From: Jordan Young Date: Mon, 22 Jun 2026 14:38:01 -0400 Subject: [PATCH 2/5] feat: add Tab overrides to docs themes and fix PR preview base path --- .github/workflows/preview.yml | 2 ++ apps/element-storybook/.storybook/main.ts | 3 ++ packages/theme/src/lib/docs-dark-theme.ts | 38 ++++++++++++++++++++++ packages/theme/src/lib/docs-light-theme.ts | 37 +++++++++++++++++++++ 4 files changed, 80 insertions(+) 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 5c94411098..7ecd67a790 100644 --- a/apps/element-storybook/.storybook/main.ts +++ b/apps/element-storybook/.storybook/main.ts @@ -65,6 +65,9 @@ const config: StorybookConfig = { viteFinal: async (config) => { config.plugins = [...(config.plugins || []), tsconfigPaths({ root: join(__dirname, '../../..') })]; + if (process.env.STORYBOOK_BASE) { + config.base = process.env.STORYBOOK_BASE; + } return config; }, }; diff --git a/packages/theme/src/lib/docs-dark-theme.ts b/packages/theme/src/lib/docs-dark-theme.ts index 1f068215c2..999df6682b 100644 --- a/packages/theme/src/lib/docs-dark-theme.ts +++ b/packages/theme/src/lib/docs-dark-theme.ts @@ -401,6 +401,44 @@ export const docsDarkTheme = { }, }, }, + 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: { diff --git a/packages/theme/src/lib/docs-light-theme.ts b/packages/theme/src/lib/docs-light-theme.ts index aa041f924f..55875b6913 100644 --- a/packages/theme/src/lib/docs-light-theme.ts +++ b/packages/theme/src/lib/docs-light-theme.ts @@ -483,6 +483,43 @@ export const docsLightTheme = { }, }, }, + 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: { From 2aa904605b6ff2e1548e8fe468c9d093f3dc596c Mon Sep 17 00:00:00 2001 From: Jordan Young Date: Mon, 22 Jun 2026 15:13:29 -0400 Subject: [PATCH 3/5] feat: add tertiary button variants, fix outlined colors, and link icon sizing --- apps/element-storybook/.storybook/main.ts | 12 ++-- packages/theme/src/lib/docs-dark-theme.ts | 68 ++++++++++++++++++++ packages/theme/src/lib/docs-light-theme.ts | 74 ++++++++++++++++++++-- 3 files changed, 144 insertions(+), 10 deletions(-) diff --git a/apps/element-storybook/.storybook/main.ts b/apps/element-storybook/.storybook/main.ts index 7ecd67a790..7b8bf5c43b 100644 --- a/apps/element-storybook/.storybook/main.ts +++ b/apps/element-storybook/.storybook/main.ts @@ -1,7 +1,7 @@ // This file has been automatically migrated to valid ESM format by Storybook. -import { createRequire } from "node:module"; -import { fileURLToPath } from "node:url"; -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'; @@ -23,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: { @@ -31,7 +31,7 @@ const config: StorybookConfig = { }, }, }, - } + }, ], framework: { @@ -58,7 +58,7 @@ const config: StorybookConfig = { features: { actions: false, interactions: false, - storyStoreV7: false + storyStoreV7: false, }, docs: {}, diff --git a/packages/theme/src/lib/docs-dark-theme.ts b/packages/theme/src/lib/docs-dark-theme.ts index 999df6682b..bd369a0986 100644 --- a/packages/theme/src/lib/docs-dark-theme.ts +++ b/packages/theme/src/lib/docs-dark-theme.ts @@ -15,6 +15,12 @@ export const docsDarkTheme = { paper: '#061645', }, divider: '#0F2A7C', + tertiary: { + main: '#000C30', + light: '#061645', + dark: '#000820', + contrastText: '#FFFFFF', + }, }, components: { MuiAccordion: { @@ -321,6 +327,27 @@ export const docsDarkTheme = { 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)', @@ -342,6 +369,44 @@ export const docsDarkTheme = { 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: { @@ -366,6 +431,9 @@ export const docsDarkTheme = { opacity: 0.5, color: '#FFFFFF', }, + '& .MuiSvgIcon-root': { + fontSize: 'inherit', + }, }, }, }, diff --git a/packages/theme/src/lib/docs-light-theme.ts b/packages/theme/src/lib/docs-light-theme.ts index 55875b6913..a1c0ef5b76 100644 --- a/packages/theme/src/lib/docs-light-theme.ts +++ b/packages/theme/src/lib/docs-light-theme.ts @@ -9,6 +9,12 @@ export const docsLightTheme = { secondary: { main: '#FFD300', }, + tertiary: { + main: '#F5F6F8', + light: '#FFFFFF', + dark: '#E8EAF0', + contrastText: '#0F2A7C', + }, error: { main: '#C70002', light: '#FA7AA5', @@ -404,19 +410,76 @@ export const docsLightTheme = { 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: '#0D2543', + color: '#0F2A7C', '&:hover': { - background: 'linear-gradient(90deg, rgba(145,176,218,0) 0%, rgba(145,176,218,0.5) 100%)', + backgroundColor: 'rgba(15, 42, 124, 0.08)', borderColor: '#0F2A7C', }, '&:focus-visible': { outline: '2px solid #1B74CB', - border: '1px solid #FFFFFF', + border: '1px solid #0F2A7C', }, '&:active': { - borderColor: '#0F2A7C', + backgroundColor: 'rgba(15, 42, 124, 0.12)', }, '&.Mui-disabled': { background: '#838795', @@ -448,6 +511,9 @@ export const docsLightTheme = { opacity: 0.5, color: '#0F2A7C', }, + '& .MuiSvgIcon-root': { + fontSize: 'inherit', + }, }, }, }, From f8d7aa5c160d0a0a0d45a4914f1c75464341bdb8 Mon Sep 17 00:00:00 2001 From: Jordan Young Date: Mon, 22 Jun 2026 15:28:17 -0400 Subject: [PATCH 4/5] fix: resize help icon and helper text icon in docs themes - Add MuiIconButton sizeSmall override to keep FieldHelpIcon inline - Add MuiFormLabel avWrapper flex display to align icon with label - Size down helper text icon to match 12px font - Remove helper text left margin indent --- packages/theme/src/lib/docs-dark-theme.ts | 74 +++++++++++++++++++--- packages/theme/src/lib/docs-light-theme.ts | 74 +++++++++++++++++++--- 2 files changed, 132 insertions(+), 16 deletions(-) diff --git a/packages/theme/src/lib/docs-dark-theme.ts b/packages/theme/src/lib/docs-dark-theme.ts index bd369a0986..05cc142e28 100644 --- a/packages/theme/src/lib/docs-dark-theme.ts +++ b/packages/theme/src/lib/docs-dark-theme.ts @@ -176,8 +176,8 @@ export const docsDarkTheme = { MuiOutlinedInput: { styleOverrides: { root: { - borderRadius: '100px', - padding: '8px 16px', + borderRadius: '8px', + padding: '0 12px', height: '40px', backgroundColor: 'rgba(0, 12, 48, 0.9)', '& fieldset': { @@ -198,15 +198,50 @@ export const docsDarkTheme = { }, }, input: { - padding: 0, - fontSize: '15px', + padding: '8px 0', + fontSize: '18px', fontFamily: 'Lato', - lineHeight: '24px', - letterSpacing: '0.01em', + lineHeight: '26px', color: '#FFFFFF', '&::placeholder': { - color: '#FFFFFF', - opacity: 0.8, + 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', }, }, }, @@ -289,6 +324,29 @@ export const docsDarkTheme = { 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: { diff --git a/packages/theme/src/lib/docs-light-theme.ts b/packages/theme/src/lib/docs-light-theme.ts index a1c0ef5b76..f6b6e43e65 100644 --- a/packages/theme/src/lib/docs-light-theme.ts +++ b/packages/theme/src/lib/docs-light-theme.ts @@ -271,12 +271,12 @@ export const docsLightTheme = { MuiOutlinedInput: { styleOverrides: { root: { - borderRadius: '100px', - padding: '8px 16px', + borderRadius: '8px', + padding: '0 12px', height: '40px', backgroundColor: '#FFFFFF', '& fieldset': { - borderColor: '#D3D5DC', + borderColor: '#6A7594', }, '&:hover fieldset': { borderColor: '#0F2A7C', @@ -290,13 +290,49 @@ export const docsLightTheme = { }, }, input: { - padding: 0, - fontSize: '15px', + padding: '8px 0', + fontSize: '18px', fontFamily: 'Lato', - lineHeight: '24px', - letterSpacing: '0.01em', + lineHeight: '26px', '&::placeholder': { - opacity: 0.8, + 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', }, }, }, @@ -372,6 +408,28 @@ export const docsLightTheme = { 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: { From cf737198dcaff743797555131a22ac856fdd8f69 Mon Sep 17 00:00:00 2001 From: Jordan Young Date: Mon, 22 Jun 2026 16:35:55 -0400 Subject: [PATCH 5/5] feat: add theme-aware background styling to storybook preview decorator --- apps/element-storybook/.storybook/preview.tsx | 57 +++++++++++++++---- 1 file changed, 47 insertions(+), 10 deletions(-) diff --git a/apps/element-storybook/.storybook/preview.tsx b/apps/element-storybook/.storybook/preview.tsx index d2aa803e98..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: { @@ -40,7 +69,6 @@ const preview: Preview = { sort: 'requiredFirst', disableSaveFromUI: true, }, - theme: themes.light, source: { excludeDecorators: true, type: 'code', @@ -48,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; @@ -81,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', ], }, @@ -90,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' ? { @@ -102,7 +139,7 @@ if (typeof global.process === 'undefined') { serviceWorker: { url: '/element/mockServiceWorker.js' }, onUnhandledRequest: 'bypass', }; - worker.start(config); + return worker.start(config); }); }