Add IconButton, Divider, and Link atom components
IconButton: - Wraps MUI IconButton with FA theme (focus ring, brand hover colours) - 3 sizes reusing Button height tokens: small 32px, medium 40px, large 48px - 5 stories: Default, Sizes, Colours, States, CommonUseCases Divider: - Wraps MUI Divider with FA border token - Horizontal/vertical, fullWidth/inset/middle variants, text support - 6 stories: Default, Variants, Vertical, WithText, InContent, NavigationList Link: - Wraps MUI Link with FA brand colour (copper brand.600, 4.8:1 contrast) - Underline on hover by default, focus-visible ring, fontWeight 500 - 7 stories: Default, UnderlineVariants, ColourVariants, Inline, Navigation, FooterLinks, OnDifferentBackgrounds Theme: Added MuiIconButton, MuiDivider, MuiLink overrides Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -679,6 +679,68 @@ export const theme = createTheme({
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: parseInt(t.ButtonBorderRadiusDefault, 10),
|
||||
transition: 'background-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
|
||||
'&:focus-visible': {
|
||||
outline: `2px solid ${t.ColorInteractiveFocus}`,
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
},
|
||||
sizeSmall: {
|
||||
width: parseInt(t.ButtonHeightSm, 10),
|
||||
height: parseInt(t.ButtonHeightSm, 10),
|
||||
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeSm },
|
||||
},
|
||||
sizeMedium: {
|
||||
width: parseInt(t.ButtonHeightMd, 10),
|
||||
height: parseInt(t.ButtonHeightMd, 10),
|
||||
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeMd },
|
||||
},
|
||||
sizeLarge: {
|
||||
width: parseInt(t.ButtonHeightLg, 10),
|
||||
height: parseInt(t.ButtonHeightLg, 10),
|
||||
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeLg },
|
||||
},
|
||||
colorPrimary: {
|
||||
color: t.ColorInteractiveDefault,
|
||||
'&:hover': { backgroundColor: t.ColorBrand100 },
|
||||
},
|
||||
colorSecondary: {
|
||||
color: t.ColorNeutral600,
|
||||
'&:hover': { backgroundColor: t.ColorNeutral200 },
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDivider: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderColor: t.ColorBorderDefault,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiLink: {
|
||||
defaultProps: {
|
||||
underline: 'hover',
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: t.ColorTextBrand,
|
||||
fontWeight: 500,
|
||||
transition: 'color 150ms ease-in-out',
|
||||
'&:hover': {
|
||||
color: t.ColorInteractiveActive,
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: `2px solid ${t.ColorInteractiveFocus}`,
|
||||
outlineOffset: '2px',
|
||||
borderRadius: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiRadio: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
|
||||
Reference in New Issue
Block a user